:root {
    --night: #1F0207;
    --wine: #421010;
    --wine2: #5c1820;
    --copper: #ecb88a;
    --gold: #efd4ae;
    --cream: #f7eee3;
    --muted: #bca7a4;
    --line: rgba(239, 206, 178, .15);
    --glass: rgba(41, 11, 16, .79);
    --shadow: 0 35px 105px rgba(8, 0, 4, .43);
    --font: 'Inter', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
    --display: 'Iowan Old Style', 'Baskerville', 'Palatino Linotype', Georgia, serif
   }

   * {
    box-sizing: border-box
   }

   html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px
   }

   body {
    margin: 0;
    background: var(--night);
    color: var(--cream);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
   }

   body::before {
    content: "";
    position: absolute;
    top: -290px;
    right: 0;
    width: min(900px, 100vw);
    height: 900px;
    background: radial-gradient(circle, rgba(129, 33, 38, .24), transparent 66%);
    pointer-events: none;
    z-index: -1
   }

   a {
    color: inherit;
    text-decoration: none
   }

   button {
    font: inherit
   }

   a,
   button,
   summary {
    -webkit-tap-highlight-color: transparent
   }

   a:focus-visible,
   button:focus-visible,
   summary:focus-visible,
   canvas:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px
   }

   ::selection {
    background: #ab3e4d;
    color: white
   }

   img {
    max-width: 100%
   }

   p {
    line-height: 1.77
   }

   h1,
   h2,
   h3,
   p {
    margin-top: 0
   }

   svg {
    display: block;
    flex: none
   }

   svg.icon {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
   }

   .screen-reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
   }

   .wrap {
    width: min(100% - 80px, 1320px);
    margin-inline: auto
   }

   .skip-link {
    position: absolute;
    z-index: 100;
    top: -80px;
    left: 12px;
    background: #f2c9a1;
    color: #240609;
    font-size: 13px;
    font-weight: 800;
    padding: 14px 18px
   }

   .skip-link:focus {
    top: 8px
   }

   .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--copper);
    font-size: 11px;
    letter-spacing: .24em;
    font-weight: 800;
    text-transform: uppercase
   }

   .eyebrow::before {
    content: "";
    width: 27px;
    height: 1px;
    background: currentColor
   }

   .top-rule {
    height: 4px;
    background: linear-gradient(90deg, #290408, #bc5b57 47%, #f3c59d 50%, #bc5b57 53%, #290408)
   }

   .top-strap {
    height: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    background: #170105;
    color: #c7a39c;
    letter-spacing: .19em;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px
   }

   .top-strap span:nth-child(2) {
    color: #e3c09a
   }

   .header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(31, 2, 7, .88);
    border-bottom: 1px solid rgba(245, 193, 166, .12);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px)
   }

   .header-inner {
    height: 81px;
    display: flex;
    align-items: center;
    gap: 48px
   }

   .identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
   }

   .brandmark {
    width: 49px;
    height: 49px;
    border: 1px solid #d4aa8355;
    display: grid;
    place-items: center;
    position: relative;
    background: linear-gradient(145deg, #562127, #240608);
    overflow: hidden;
    border-radius: 4px;
    flex: none
   }

   .brandmark>span {
    font: 700 33px var(--display);
    color: var(--gold)
   }

   .brandmark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent
   }

   .brandword {
    font-size: 22px;
    letter-spacing: .17em;
    font-weight: 850;
    line-height: 1
   }

   .brandword small {
    display: block;
    font-size: 9px;
    letter-spacing: .29em;
    color: #b3938b;
    margin-top: 8px;
    font-weight: 700
   }

   .nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: auto
   }

   .nav a {
    font-size: 12px;
    font-weight: 750;
    color: #dac6be;
    transition: color .2s
   }

   .nav a:hover {
    color: white
   }

   .nav .nav-member {
    display: none
   }

   .header-action {
    margin-left: auto;
    white-space: nowrap
   }

   .menu-button {
    display: none;
    background: none;
    border: 1px solid var(--line);
    color: var(--cream);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer
   }

   .btn {
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 23px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 850;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform .2s, background .2s, border-color .2s
   }

   .btn:hover {
    transform: translateY(-2px)
   }

   .btn svg {
    width: 17px;
    height: 17px
   }

   .btn-primary {
    background: linear-gradient(135deg, #f2c9a1, #d3936a);
    color: #28100e;
    border-color: #ffdac0;
    box-shadow: 0 7px 30px rgba(241, 166, 118, .17)
   }

   .btn-primary:hover {
    background: linear-gradient(135deg, #ffe1bc, #e8a878)
   }

   .btn-outline {
    color: var(--cream);
    background: #ffffff06;
    border-color: rgba(243, 197, 160, .4)
   }

   .btn-outline:hover {
    background: #ffffff0e;
    border-color: #efc7aa
   }

   .btn-dark {
    color: var(--gold);
    background: #2c090e;
    border-color: #92504d
   }

   .hero {
    position: relative;
    padding: 92px 0 96px;
    isolation: isolate;
    overflow: hidden
   }

   .hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, .025);
    z-index: -1
   }

   .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .93fr);
    gap: 46px;
    align-items: center
   }

   .hero-copy {
    padding: 0 0 10px;
    position: relative;
    z-index: 2
   }

   .hero-copy h1 {
    font: 400 clamp(68px, 9.2vw, 146px)/.92 var(--display);
    letter-spacing: -.078em;
    margin: 26px 0 19px;
    color: var(--cream);
    white-space: nowrap
   }

   .hero-copy h1 span {
    color: #dc9d82
   }

   .hero-label {
    display: block;
    font: 650 clamp(22px, 2.2vw, 31px)/1.3 var(--font);
    letter-spacing: .25em;
    text-transform: uppercase;
    margin: 18px 0 27px;
    white-space: nowrap;
    color: #f2d5c2
   }

   .hero-copy .lead {
    max-width: 555px;
    font-size: 16px;
    line-height: 1.95;
    color: #cab6ac;
    margin-bottom: 34px
   }

   .hero-actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap
   }

   .hero-facts {
    display: flex;
    gap: 35px;
    margin-top: 54px;
    padding-top: 28px;
    border-top: 1px solid var(--line)
   }

   .hero-fact {
    display: flex;
    align-items: center;
    gap: 12px
   }

   .hero-fact svg {
    width: 23px;
    height: 23px;
    color: #e5b18f
   }

   .hero-fact strong {
    display: block;
    font-size: 12px
   }

   .hero-fact small {
    display: block;
    color: #957d79;
    font-size: 10px;
    letter-spacing: .08em;
    margin-top: 5px;
    text-transform: uppercase
   }

   .hero-visual {
    position: relative;
    height: min(600px, 45vw);
    min-height: 425px;
    display: flex;
    align-items: center;
    justify-content: center
   }

   .visual-orbit {
    position: absolute;
    width: 96%;
    aspect-ratio: 1;
    border: 1px solid rgba(222, 154, 127, .23);
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(145, 63, 52, .15), transparent 58%)
   }

   .visual-orbit::before,
   .visual-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(222, 154, 127, .12);
    border-radius: 50%;
    inset: 7%
   }

   .visual-orbit::after {
    inset: 16%
   }

   .orbital {
    position: absolute;
    inset: 0;
    opacity: .65;
    pointer-events: none;
    width: 100%;
    height: 100%
   }

   .visual-inner {
    position: relative;
    width: 83%;
    aspect-ratio: 1;
    background: radial-gradient(circle at 54% 30%, #85534c55 3%, #4a151b 36%, #1a050a 76%);
    border: 1px solid rgba(231, 179, 141, .2);
    border-radius: 50%;
    box-shadow: 0 0 100px #d3665833, inset 0 0 85px #0f0207;
    overflow: hidden;
    display: grid;
    place-items: center
   }

   .temple-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
   }

   .visual-inner .banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    opacity: .82;
    mask-image: linear-gradient(to bottom, #000 45%, transparent 96%)
   }

   .visual-inner .banner-image.is-missing {
    display: none
   }

   .visual-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(22, 2, 6, .65) 75%, rgba(22, 2, 6, .87));
    pointer-events: none
   }

   .visual-text {
    position: absolute;
    bottom: 12%;
    text-align: center;
    left: 8%;
    right: 8%;
    z-index: 1
   }

   .visual-text span {
    font-size: 10px;
    letter-spacing: .33em;
    color: #f2caab;
    text-transform: uppercase
   }

   .visual-text strong {
    display: block;
    font: italic 32px var(--display);
    margin-top: 9px
   }

   .art-coordinate {
    position: absolute;
    color: #be9687;
    font-size: 10px;
    letter-spacing: .25em
   }

   .art-coordinate.top {
    top: 5%;
    right: -1%
   }

   .art-coordinate.bottom {
    bottom: 7%;
    left: -3%
   }

   .art-cross {
    position: absolute;
    left: 5%;
    top: 13%;
    font-size: 25px;
    font-family: var(--display);
    color: #efc49e
   }

   .mini-plate {
    position: absolute;
    right: -2%;
    bottom: 19%;
    border: 1px solid #ad736775;
    padding: 16px 21px;
    background: rgba(34, 4, 9, .82);
    backdrop-filter: blur(10px);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #dcbca9;
    box-shadow: var(--shadow)
   }

   .mini-plate strong {
    display: block;
    font-size: 20px;
    color: white;
    margin-top: 6px;
    letter-spacing: .04em
   }

   .ticker {
    border-block: 1px solid rgba(244, 190, 156, .13);
    background: #29080d;
    overflow: hidden
   }

   .ticker-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px 0
   }

   .ticker-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #cab0a4;
    font-size: 11px;
    font-weight: 770;
    letter-spacing: .13em;
    text-transform: uppercase
   }

   .ticker-item svg {
    color: var(--copper)
   }

   .ticker-item em {
    font-style: normal;
    color: #744b46;
    font-size: 16px
   }

   .section {
    padding: 115px 0
   }

   .section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 40px
   }

   .section-head h2,
   .editorial h2,
   .world-feature h2,
   .member-content h2 {
    font: 400 clamp(39px, 5.2vw, 70px)/1.06 var(--display);
    letter-spacing: -.045em;
    margin: 16px 0 0
   }

   .section-head h2 i,
   .editorial h2 i,
   .world-feature h2 i,
   .member-content h2 i {
    font-weight: 400;
    color: #d9a28a
   }

   .section-head p {
    max-width: 400px;
    margin: 0;
    color: #ad9490;
    font-size: 13px
   }

   .section-index {
    font-size: 11px;
    color: #b4847e;
    letter-spacing: .2em;
    white-space: nowrap
   }

   .play-section {
    background: radial-gradient(ellipse at 54% 21%, rgba(127, 29, 38, .18), transparent 52%), linear-gradient(180deg, #1F0207 0, #2b080d 47%, #1F0207 100%)
   }

   .sim-shell {
    border: 1px solid #a86d6047;
    background: #15080b;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative
   }

   .sim-shell::before {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    top: 0;
    background: linear-gradient(90deg, transparent, #cf9a79, transparent);
    z-index: 2
   }

   .sim-head {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    border-bottom: 1px solid #ffffff17;
    background: #210a0f
   }

   .sim-head-left,
   .sim-head-right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
   }

   .sim-label {
    font-size: 11px;
    letter-spacing: .16em;
    font-weight: 850;
    color: #f0cfb0;
    text-transform: uppercase;
    white-space: nowrap
   }

   .sim-secondary {
    font-size: 10px;
    letter-spacing: .12em;
    color: #9d7672;
    text-transform: uppercase
   }

   .led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #73caa4;
    box-shadow: 0 0 14px #73caa4
   }

   .led.off {
    background: #cb967c;
    box-shadow: none
   }

   .sim-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    min-height: 590px
   }

   .viewport {
    position: relative;
    min-width: 0;
    background: #102629
   }

   .viewport canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1080/650;
    cursor: crosshair;
    touch-action: manipulation;
    outline-offset: -4px
   }

   .viewport canvas[data-tool="inspect"] {
    cursor: help
   }

   .map-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 2
   }

   .map-title {
    top: 22px;
    left: 23px;
    display: flex;
    align-items: start;
    gap: 10px;
    background: rgba(9, 24, 28, .78);
    padding: 12px 16px;
    border: 1px solid #e9cc9f30;
    backdrop-filter: blur(10px)
   }

   .map-title svg {
    color: #e9bf8a
   }

   .map-title strong {
    display: block;
    font-size: 13px;
    letter-spacing: .17em;
    color: white
   }

   .map-title span {
    display: block;
    font-size: 9px;
    letter-spacing: .19em;
    color: #a5b0a7;
    margin-top: 5px
   }

   .map-scale {
    bottom: 17px;
    left: 22px;
    color: #ffedd6d9;
    font: 10px monospace;
    letter-spacing: .09em;
    text-shadow: 0 2px 8px #000
   }

   .map-coord {
    bottom: 16px;
    right: 18px;
    color: #ffedd6c9;
    font: 10px monospace;
    text-shadow: 0 2px 8px #000
   }

   .map-hint {
    top: 23px;
    right: 20px;
    color: #fff4dd;
    background: rgba(12, 32, 33, .66);
    border: 1px solid #ffffff1c;
    padding: 9px 12px;
    font-size: 10px;
    letter-spacing: .06em;
    max-width: 180px;
    text-align: right
   }

   .stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: #6c4b4461;
    border-top: 1px solid #6c4b4490
   }

   .stat {
    padding: 15px 19px;
    background: #1d0b0e;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
   }

   .stat svg {
    color: #c99d80
   }

   .stat small {
    display: block;
    color: #957d75;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 9px;
    margin-bottom: 3px
   }

   .stat strong {
    font-size: 20px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    display: block
   }

   .stat strong i {
    font-size: 10px;
    color: #9b7f76;
    font-style: normal;
    font-weight: 550;
    margin-left: 4px
   }

   .console {
    border-left: 1px solid #784b4266;
    background: linear-gradient(165deg, #270c11, #17070a);
    display: flex;
    flex-direction: column;
    min-width: 0
   }

   .console-h {
    font-size: 10px;
    letter-spacing: .2em;
    color: #a98073;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 0 14px
   }

   .console-part {
    padding: 20px 19px;
    border-bottom: 1px solid #ffffff13
   }

   .console-part p {
    margin: 0;
    color: #a68e86;
    font-size: 11px;
    line-height: 1.65
   }

   .power-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px
   }

   .power {
    min-height: 76px;
    border: 1px solid rgba(230, 177, 141, .18);
    background: rgba(246, 220, 186, .027);
    padding: 13px 9px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 9px;
    color: #d6b5a4;
    text-align: left;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s
   }

   .power svg {
    width: 20px;
    height: 20px
   }

   .power:hover {
    background: #6d2c2c35;
    color: white
   }

   .power.active {
    color: #ffe0be;
    background: linear-gradient(125deg, #74313487, #39171c);
    border-color: #ddab83
   }

   .power.active svg {
    color: #ffd09e
   }

   .tool-prompt {
    font-size: 11px;
    margin-top: 13px;
    color: #b99a8b;
    min-height: 36px;
    line-height: 1.55
   }

   .sim-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
    margin-top: 12px
   }

   .sim-actions button,
   .save-actions button {
    background: #36151a;
    color: #f1d4c1;
    border: 1px solid #82595177;
    border-radius: 2px;
    min-height: 40px;
    padding: 8px 6px;
    cursor: pointer;
    font-size: 10px;
    letter-spacing: .04em;
    font-weight: 780
   }

   .sim-actions button:hover,
   .save-actions button:hover {
    background: #57242a
   }

   .save-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 8px
   }

   .save-actions button {
    background: #240b0f
   }

   .console-status {
    padding: 18px 19px;
    margin-top: auto;
    color: #98827e;
    font-size: 11px;
    line-height: 1.6
   }

   .console-status strong {
    color: #e2c3ab
   }

   .sim-bottom {
    padding: 14px 22px;
    background: #200b10;
    border-top: 1px solid #73453e65;
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
   }

   .sim-bottom p {
    font-size: 11px;
    color: #a48a80;
    line-height: 1.55;
    margin: 0;
    max-width: 850px
   }

   .inline-status {
    color: #e2bda5
   }

   .viewport-toast {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    background: rgba(30, 7, 10, .91);
    border: 1px solid #ebb99180;
    color: #ffe9d1;
    padding: 10px 15px;
    pointer-events: none;
    font-size: 12px;
    opacity: 0;
    transition: opacity .28s, transform .28s;
    max-width: 90%;
    text-align: center;
    z-index: 5
   }

   .viewport-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
   }

   .chronicle-strip {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 25px;
    align-items: start;
    margin-top: 24px;
    padding: 25px 29px;
    background: #39101677;
    border: 1px solid #ad6d6341
   }

   .chronicle-intro {
    display: flex;
    gap: 15px;
    align-items: start
   }

   .chronicle-intro svg {
    color: #d2a58e;
    width: 30px;
    height: 30px
   }

   .chronicle-intro b {
    display: block;
    font: 25px var(--display);
    margin-bottom: 5px
   }

   .chronicle-intro span {
    font-size: 11px;
    color: #9e7f7a;
    line-height: 1.6
   }

   .chronicle-list {
    display: grid;
    gap: 9px;
    max-height: 195px;
    overflow: auto;
    padding-right: 8px;
    scrollbar-color: #784944 transparent;
    scrollbar-width: thin
   }

   .chronicle-list p {
    padding: 0 0 9px;
    border-bottom: 1px solid #ffffff13;
    display: flex;
    gap: 14px;
    margin: 0;
    color: #c8afa4;
    font-size: 12px;
    line-height: 1.55
   }

   .chronicle-list time {
    color: #d7aa89;
    white-space: nowrap;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .1em;
    padding-top: 3px
   }

   .dark-section {
    background: #180408
   }

   .feature-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(45px, 8vw, 145px);
    align-items: center
   }

   .world-feature h2 {
    margin-bottom: 24px
   }

   .world-feature p {
    font-size: 14px;
    color: #b8a19a;
    line-height: 1.95
   }

   .world-feature p strong {
    color: #f1d3b9
   }

   .quote-line {
    display: block;
    border-left: 2px solid #d19c7e;
    padding-left: 23px;
    font: italic 25px/1.45 var(--display);
    color: #f0d4bc;
    margin: 30px 0
   }

   .world-panel {
    position: relative;
    min-height: 440px;
    padding: 34px;
    background: radial-gradient(circle at 80% 0%, #7f2c3552, transparent 55%), linear-gradient(145deg, #48141c, #21070c);
    border: 1px solid #aa6a5f6b;
    overflow: hidden
   }

   .world-panel::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(238, 196, 164, .15);
    border-radius: 50%;
    right: -220px;
    top: -230px
   }

   .world-panel-header {
    display: flex;
    justify-content: space-between;
    color: #c8a492;
    font-size: 10px;
    letter-spacing: .19em;
    font-weight: 700
   }

   .linimasa {
    margin-top: 44px;
    display: grid;
    gap: 25px;
    position: relative
   }

   .linimasa::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 7px;
    border-left: 1px dashed #b66f63
   }

   .linimasa-item {
    display: flex;
    align-items: start;
    gap: 23px;
    position: relative
   }

   .linimasa-item::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 3px solid #ca9578;
    background: #421010;
    flex: none;
    z-index: 1;
    margin-top: 3px
   }

   .linimasa-year {
    display: block;
    color: #d9a881;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .18em;
    margin-bottom: 6px
   }

   .linimasa-event {
    font-size: 14px;
    line-height: 1.55;
    color: #f5dfca
   }

   .linimasa-footer {
    margin-top: 34px;
    padding-top: 19px;
    border-top: 1px solid #c79f8a30;
    font-size: 11px;
    color: #a37f75;
    line-height: 1.6
   }

   .systems {
    background: linear-gradient(180deg, #1f0509, #28070c)
   }

   .systems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px
   }

   .system-card {
    padding: 35px 29px 32px;
    background: rgba(248, 218, 191, .025);
    border: 1px solid #b07b6b38;
    min-height: 267px;
    transition: background .2s, border-color .2s, transform .2s
   }

   .system-card:hover {
    background: rgba(248, 218, 191, .055);
    border-color: #e0b18a6f;
    transform: translateY(-3px)
   }

   .system-card .number {
    float: right;
    font-size: 11px;
    color: #825f58;
    letter-spacing: .16em
   }

   .system-icon {
    width: 45px;
    height: 45px;
    border: 1px solid #c08f7744;
    color: #e9b794;
    display: grid;
    place-items: center;
    margin-bottom: 32px;
    background: #59192055
   }

   .system-icon svg {
    width: 24px;
    height: 24px
   }

   .system-card h3 {
    font: 27px/1.2 var(--display);
    margin-bottom: 14px;
    color: #f7e6d5
   }

   .system-card p {
    margin: 0;
    color: #ac9691;
    font-size: 12px;
    line-height: 1.8
   }

   .editorial {
    background: #1d0509;
    padding: 115px 0
   }

   .editorial-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 45px
   }

   .editorial-head h2 {
    margin-top: 15px
   }

   .editorial-head p {
    color: #b69c94;
    font-size: 14px;
    margin-top: 18px
   }

   .editorial-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 75px;
    align-items: start
   }

   .article-nav {
    position: sticky;
    top: 116px;
    border-left: 1px solid #d9a28b66;
    padding-left: 25px
   }

   .article-nav strong {
    font-size: 10px;
    letter-spacing: .22em;
    color: #cda186
   }

   .article-nav a {
    display: block;
    font-size: 12px;
    color: #ad8d86;
    margin-top: 21px
   }

   .article-nav a:hover {
    color: #ffe3c4
   }

   .seo-article h3 {
    font: 32px var(--display);
    color: #f3dbc5;
    margin: 0 0 13px
   }

   .seo-article p,
   .seo-article li {
    color: #bda8a0;
    font-size: 14px;
    line-height: 2
   }

   .seo-article p {
    margin-bottom: 19px
   }

   .seo-article section+section {
    border-top: 1px solid var(--line);
    padding-top: 30px;
    margin-top: 32px
   }

   .seo-article ul {
    padding-left: 20px
   }

   .seo-article li {
    padding-left: 6px;
    margin-bottom: 6px
   }

   .seo-article strong {
    color: #f5d8c3
   }

   .step-list {
    display: grid;
    gap: 18px;
    margin: 30px 0
   }

   .step {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 17px
   }

   .step span {
    display: grid;
    place-items: center;
    border: 1px solid #d5a5857f;
    color: #d6a685;
    width: 36px;
    height: 36px;
    font: 16px var(--display)
   }

   .step h4 {
    margin: 2px 0 5px;
    color: #eedac9;
    font-size: 14px
   }

   .step p {
    margin: 0;
    font-size: 12px
   }

   .faq-section {
    background: #21070b;
    padding: 100px 0
   }

   .faq-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: start
   }

   .faq-layout h2 {
    font: 50px/1.05 var(--display);
    letter-spacing: -.05em;
    margin: 16px 0
   }

   .faq-layout p {
    color: #ae9189;
    font-size: 13px
   }

   .faq-list {
    border-top: 1px solid var(--line)
   }

   .faq-list details {
    border-bottom: 1px solid var(--line)
   }

   .faq-list summary {
    cursor: pointer;
    list-style: none;
    padding: 23px 36px 23px 0;
    font-size: 14px;
    font-weight: 700;
    color: #f3dccb;
    position: relative
   }

   .faq-list summary::-webkit-details-marker {
    display: none
   }

   .faq-list summary::after {
    content: '+';
    position: absolute;
    right: 5px;
    top: 18px;
    font: 24px var(--display);
    color: #d1a78a
   }

   .faq-list details[open] summary::after {
    content: '−'
   }

   .faq-list details p {
    color: #b7a09a;
    font-size: 13px;
    line-height: 1.85;
    padding: 0 35px 23px 0;
    margin: 0
   }

   .member-section {
    padding: 115px 0 105px;
    background: #1f0409
   }

   .member-banner {
    border: 1px solid #c6927c88;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 78% 40%, #963c3d55, transparent 37%), linear-gradient(115deg, #50141c, #21060c);
    padding: 74px 78px;
    min-height: 335px;
    display: flex;
    align-items: center
   }

   .member-banner::before {
    content: "";
    position: absolute;
    right: 8%;
    top: -80px;
    width: 440px;
    height: 440px;
    border: 1px solid #c38d7b36;
    border-radius: 50%;
    pointer-events: none
   }

   .member-banner::after {
    content: "✧";
    position: absolute;
    right: 16%;
    top: 10%;
    font: 280px var(--display);
    color: #c6948533;
    pointer-events: none
   }

   .member-content {
    position: relative;
    z-index: 1;
    max-width: 700px
   }

   .member-content h2 {
    margin: 12px 0 17px
   }

   .member-content p {
    font-size: 13px;
    color: #dbbbb1;
    max-width: 530px;
    margin: 0 0 26px
   }

   .member-content .member-note {
    font-size: 11px;
    color: #b48983;
    margin: 15px 0 0
   }

   .member-link:focus-visible {
    outline-offset: 5px
   }

   .footer {
    padding: 42px 0;
    background: #170307;
    border-top: 1px solid rgba(255, 255, 255, .09)
   }

   .footer-main {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 30px
   }

   .footer .brandword {
    font-size: 17px
   }

   .footer .brandword small {
    font-size: 8px
   }

   .footer p {
    color: #947b75;
    font-size: 11px;
    max-width: 475px;
    line-height: 1.8;
    margin: 16px 0 0
   }

   .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
    padding-top: 7px
   }

   .footer-nav a {
    font-size: 11px;
    color: #b89c91
   }

   .footer-nav a:hover {
    color: white
   }

   .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    margin-top: 38px;
    padding-top: 22px;
    font-size: 10px;
    color: #846c66;
    letter-spacing: .04em
   }

   @media(max-width:1140px) {
    .wrap {
     width: min(100% - 48px, 1320px)
    }

    .nav {
     gap: 20px
    }

    .header-inner {
     gap: 19px
    }

    .hero {
     padding: 70px 0 80px
    }

    .hero-grid {
     gap: 14px
    }

    .hero-copy h1 {
     font-size: clamp(58px, 8vw, 100px)
    }

    .hero-facts {
     gap: 14px
    }

    .hero-fact {
     gap: 8px
    }

    .sim-main {
     grid-template-columns: minmax(0, 1fr) 273px
    }

    .console-part {
     padding: 15px 14px
    }

    .power {
     min-height: 70px
    }

    .system-card {
     padding: 25px 23px;
     min-height: 265px
    }

    .editorial-grid {
     gap: 45px
    }
   }

   @media(max-width:900px) {
    .header-action {
     display: none
    }

    .nav {
     margin-left: auto
    }

    .hero-grid {
     grid-template-columns: 1fr 1fr
    }

    .hero-copy h1 {
     font-size: clamp(55px, 8vw, 86px)
    }

    .hero-label {
     font-size: 18px
    }

    .hero-copy .lead {
     font-size: 14px
    }

    .hero-visual {
     min-height: 335px
    }

    .mini-plate {
     right: 0
    }

    .hero-facts {
     flex-wrap: wrap;
     margin-top: 30px
    }

    .sim-main {
     grid-template-columns: 1fr
    }

    .console {
     border-left: 0;
     border-top: 1px solid var(--line);
     display: grid;
     grid-template-columns: 1fr 1fr
    }

    .console-part {
     border-bottom: 0
    }

    .console-status {
     grid-column: span 2;
     border-top: 1px solid var(--line)
    }

    .power-grid {
     grid-template-columns: repeat(4, 1fr)
    }

    .chronicle-strip {
     grid-template-columns: 1fr;
     gap: 17px
    }

    .systems-grid {
     grid-template-columns: repeat(2, 1fr)
    }

    .feature-layout {
     gap: 45px
    }

    .world-panel {
     padding: 23px
    }

    .editorial-grid {
     grid-template-columns: 1fr
    }

    .article-nav {
     position: static;
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     border-left: 0;
     border-bottom: 1px solid var(--line);
     padding: 0 0 17px
    }

    .article-nav a {
     margin: 0
    }

    .faq-layout {
     gap: 30px
    }
   }

   @media(max-width:700px) {
    .wrap {
     width: min(100% - 34px, 1320px)
    }

    .top-strap {
     font-size: 8px;
     gap: 10px;
     letter-spacing: .1em
    }

    .header-inner {
     height: 68px
    }

    .menu-button {
     display: flex;
     margin-left: auto
    }

    .header-action {
     display: none
    }

    .nav {
     display: none;
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     padding: 14px 17px 20px;
     background: #27080e;
     border-bottom: 1px solid #b87e7066;
     box-shadow: 0 16px 30px #0006;
     flex-direction: column;
     align-items: stretch;
     gap: 0
    }

    .nav.is-open {
     display: flex
    }

    .nav a {
     padding: 13px 8px;
     border-bottom: 1px solid #ffffff13
    }

    .nav .nav-member {
     display: block;
     color: #efbf9d
    }

    .brandmark {
     width: 43px;
     height: 43px
    }

    .brandword {
     font-size: 19px
    }

    .hero {
     padding: 47px 0 65px
    }

    .hero-grid {
     grid-template-columns: 1fr
    }

    .hero-copy h1 {
     font-size: clamp(63px, 14vw, 104px)
    }

    .hero-label {
     font-size: clamp(18px, 5vw, 26px);
     letter-spacing: .18em
    }

    .hero-copy .lead {
     max-width: 570px
    }

    .hero-visual {
     min-height: unset;
     height: auto;
     aspect-ratio: 1;
     max-height: 510px;
     width: min(96%, 510px);
     margin: 27px auto 0
    }

    .hero-facts {
     margin-top: 34px;
     gap: 20px
    }

    .hero-fact {
     min-width: 135px
    }

    .art-coordinate.bottom {
     left: 0
    }

    .section,
    .editorial {
     padding: 75px 0
    }

    .section-head {
     display: block
    }

    .section-head h2 {
     font-size: 48px;
     margin-bottom: 20px
    }

    .section-head p {
     max-width: 540px
    }

    .section-index {
     display: none
    }

    .ticker-inner {
     justify-content: center;
     padding: 15px 0
    }

    .ticker-item {
     font-size: 9px
    }

    .ticker-item em {
     display: none
    }

    .sim-head {
     padding: 0 13px
    }

    .sim-secondary {
     display: none
    }

    .map-hint {
     display: none
    }

    .sim-label {
     font-size: 10px
    }

    .stat-row {
     grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .stat {
     padding: 13px
    }

    .stat strong {
     font-size: 18px
    }

    .console {
     display: block
    }

    .console-part {
     border-bottom: 1px solid #ffffff13;
     padding: 16px
    }

    .power-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .power {
     min-height: 69px;
     font-size: 10px;
     gap: 8px;
     padding: 10px 7px
    }

    .power svg {
     width: 19px;
     height: 19px
    }

    .console-status {
     border-top: 0
    }

    .chronicle-strip {
     padding: 20px
    }

    .feature-layout,
    .faq-layout {
     grid-template-columns: 1fr;
     gap: 35px
    }

    .world-feature h2 {
     font-size: 48px
    }

    .world-panel {
     min-height: 420px
    }

    .systems-grid {
     grid-template-columns: 1fr 1fr
    }

    .system-card {
     padding: 24px 19px;
     min-height: 235px
    }

    .system-card h3 {
     font-size: 23px
    }

    .system-card .system-icon {
     margin-bottom: 21px
    }

    .editorial-head h2 {
     font-size: 45px
    }

    .faq-layout h2 {
     font-size: 44px
    }

    .faq-section {
     padding: 75px 0
    }

    .member-section {
     padding: 80px 0
    }

    .member-banner {
     padding: 43px 26px;
     min-height: 330px
    }

    .member-content h2 {
     font-size: 48px
    }

    .member-banner::after {
     right: -10%;
     top: 20%;
     opacity: .4
    }

    .footer-main,
    .footer-bottom {
     flex-direction: column
    }

    .footer-bottom {
     gap: 7px
    }

    .footer-nav {
     padding-top: 0
    }
   }

   @media(max-width:430px) {
    .hero-copy h1 {
     font-size: clamp(53px, 14.5vw, 69px)
    }

    .hero-label {
     font-size: 18px;
     letter-spacing: .12em
    }

    .hero-actions {
     flex-direction: column;
     align-items: stretch
    }

    .hero-actions .btn {
     width: 100%
    }

    .hero-facts {
     gap: 15px
    }

    .hero-fact {
     min-width: calc(50% - 12px)
    }

    .mini-plate {
     padding: 10px 13px
    }

    .mini-plate strong {
     font-size: 15px
    }

    .art-coordinate {
     font-size: 8px
    }

    .section-head h2 {
     font-size: 40px
    }

    .power-grid {
     grid-template-columns: repeat(4, 1fr);
     gap: 5px
    }

    .power {
     min-height: 72px;
     font-size: 9px
    }

    .power svg {
     width: 18px;
     height: 18px
    }

    .map-title {
     top: 10px;
     left: 10px;
     padding: 8px
    }

    .map-title strong {
     font-size: 10px
    }

    .map-title span {
     font-size: 8px
    }

    .map-scale,
    .map-coord {
     font-size: 8px;
     bottom: 8px
    }

    .stat {
     gap: 8px
    }

    .stat svg {
     width: 16px;
     height: 16px
    }

    .stat small {
     font-size: 8px
    }

    .systems-grid {
     grid-template-columns: 1fr
    }

    .system-card {
     min-height: 0
    }

    .world-panel {
     padding: 20px
    }

    .chronicle-strip {
     padding: 15px
    }
   }

   @media(prefers-reduced-motion:reduce) {
    html {
     scroll-behavior: auto
    }

    .btn,
    .system-card,
    .power,
    .viewport-toast {
     transition: none !important
    }
   }

  /* INDOBET / Dunia Para Dewa — identity & editorial redesign. Theme variables stay unchanged. */
  :root { --section-rule: rgba(239,206,178,.23); }
  .top-strap {background:var(--night);border-bottom-color:var(--section-rule);letter-spacing:.22em}
  .header {background:rgba(31,2,7,.94);box-shadow:0 9px 40px #08000444}
  .header-inner {height:86px}
  .brandmark {border-radius:50%;background:radial-gradient(circle at 35% 25%,var(--wine2),var(--night));border-color:var(--copper);box-shadow:0 0 0 5px rgba(236,184,138,.07)}
  .brandword {letter-spacing:.095em;font-weight:900}
  .brandword small {letter-spacing:.22em;font-weight:600}
  .nav a {text-transform:uppercase;font-size:10px;letter-spacing:.13em}
  .hero {padding:100px 0 92px; background:radial-gradient(ellipse 55% 85% at 83% 36%,rgba(92,24,32,.64),transparent 72%),linear-gradient(110deg,var(--night),#26060b 63%,var(--night));border-bottom:1px solid var(--line)}
  .hero::before {content:'OLYMPUS • Cibiogas • DUNIA PARA DEWA';position:absolute;right:18px;top:50%;writing-mode:vertical-rl;color:var(--copper);opacity:.55;font-size:9px;letter-spacing:.35em;z-index:1;pointer-events:none}
  .hero-grid {grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,4vw,80px)}
  .hero-copy {border-left:1px solid rgba(236,184,138,.35);padding:10px 0 10px 33px}
  .hero-copy h1 {white-space:normal;display:flex;flex-direction:column;align-items:flex-start;margin:30px 0 18px;gap:10px;font:400 16px/1.2 var(--font);letter-spacing:normal}
  .hero-copy h1 .hero-brand-title {display:block;font:500 clamp(59px,7.7vw,123px)/.99 var(--display);letter-spacing:-.09em;color:var(--cream);white-space:nowrap}
  .hero-copy h1 .hero-genre {display:block;max-width:580px;text-transform:uppercase;font:800 clamp(13px,1.55vw,21px)/1.45 var(--font);color:var(--copper);letter-spacing:.12em}
  .hero-copy h1 .hero-edition {display:block;font:italic 400 clamp(28px,3vw,48px)/1.15 var(--display);color:var(--gold);letter-spacing:-.035em}
  .hero-manifesto {font:400 clamp(21px,2.5vw,34px)/1.35 var(--display);color:var(--cream);margin:22px 0 14px}
  .hero-manifesto em {color:var(--copper)}
  .hero-copy .lead {font-size:14px;line-height:1.94;max-width:590px;margin:0 0 28px}
  .hero-copy .lead strong {color:var(--gold)}
  .hero-actions {gap:12px}
  .hero-actions .btn {min-height:55px}
  .hero-signature {display:flex;gap:15px;flex-wrap:wrap;margin:31px 0 0;color:var(--copper);font-size:10px;font-weight:800;letter-spacing:.13em}
  .hero-signature span+span::before {content:'✦';color:var(--gold);margin-right:15px}
  .hero-facts {margin-top:32px;padding-top:23px;gap:21px}
  .hero-visual {min-height:530px;height:min(600px,44vw)}
  .visual-orbit {border-color:rgba(239,212,174,.3)}
  .visual-inner {width:87%;box-shadow:0 0 125px rgba(92,24,32,.28),inset 0 0 65px var(--night);outline:1px solid rgba(236,184,138,.13);outline-offset:13px}
  .visual-text strong {font-size:clamp(20px,2.3vw,31px)}
  .mini-plate {top:58%;bottom:auto;right:-2%}
  .ticker {background:var(--wine);border-color:rgba(236,184,138,.2)}
  .ticker-inner {justify-content:space-between}
  .ticker-item {letter-spacing:.18em;color:var(--gold)}
  .section,.editorial {padding-block:110px}
  .section-head,.editorial-head {border-top:1px solid var(--section-rule);padding-top:28px}
  .section-head h2,.editorial h2,.world-feature h2,.faq-layout h2 {letter-spacing:-.06em}
  .play-section {background:radial-gradient(ellipse at 48% 4%,rgba(92,24,32,.6),transparent 67%),var(--night)}
  .sim-shell {border:1px solid rgba(236,184,138,.38);box-shadow:0 30px 75px rgba(0,0,0,.37),0 0 0 7px rgba(236,184,138,.03)}
  .sim-head {background:var(--wine);border-color:var(--section-rule)}
  .chronicle-strip {background:rgba(66,16,16,.68);border-color:var(--section-rule)}
  .dark-section {border-top:1px solid var(--section-rule);border-bottom:1px solid var(--section-rule)}
  .world-feature {position:relative}
  .world-feature::before {content:'ZAMAN PERTAMA';position:absolute;right:0;top:-26px;color:var(--copper);font-size:10px;letter-spacing:.22em;opacity:.7}
  .world-panel {border-color:rgba(236,184,138,.42);box-shadow:17px 17px 0 rgba(66,16,16,.5)}
  .systems {background:var(--night)}
  .systems-grid {gap:0;border-top:1px solid var(--section-rule);border-left:1px solid var(--section-rule)}
  .system-card {border:0;border-bottom:1px solid var(--section-rule);border-right:1px solid var(--section-rule);background:linear-gradient(150deg,rgba(92,24,32,.2),rgba(31,2,7,.28));min-height:288px}
  .system-card:hover {background:rgba(92,24,32,.5);transform:translateY(0)}
  .system-icon {width:53px;height:53px;border-radius:50%;background:rgba(66,16,16,.7);border-color:var(--copper)}
  .system-card h3 {font-size:30px}
  .editorial {background:linear-gradient(180deg,#21070b,var(--night))}
  .editorial-head {max-width:unset;text-align:left;margin:0 0 59px;display:grid;grid-template-columns:1fr .7fr;gap:14px 60px;align-items:end}
  .editorial-head .eyebrow {grid-column:1/-1}
  .editorial-head h2 {font-size:clamp(42px,5vw,69px);margin:0}
  .editorial-head p {margin:0;border-left:1px solid var(--section-rule);padding-left:25px}
  .editorial-grid {grid-template-columns:minmax(190px,.57fr) minmax(0,1.43fr);gap:clamp(35px,6vw,94px)}
  .article-nav {top:112px;background:rgba(66,16,16,.18);padding:22px 25px;border-left:2px solid var(--copper)}
  .article-nav strong {color:var(--gold)}
  .article-nav a {line-height:1.55}
  .seo-article h3 {font-size:clamp(28px,3.3vw,43px);line-height:1.2}
  .seo-article p,.seo-article li {font-size:14px;line-height:1.95}
  .seo-article section+section {border-color:var(--section-rule);padding-top:43px;margin-top:45px}
  .identity-chapter {position:relative}
  .chapter-meta {display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--section-rule);padding-bottom:15px;margin-bottom:27px;color:var(--copper);letter-spacing:.16em;font-size:10px;font-weight:700}
  .identity-chapter .intro-emphasis {color:var(--cream);font-size:17px;line-height:1.84}
  .identity-points {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--section-rule);border:1px solid var(--section-rule);margin:32px 0 7px}
  .identity-points>div {background:var(--wine);padding:18px 12px 20px}
  .identity-points span {display:block;font:800 9px var(--font);color:var(--copper);letter-spacing:.13em;margin-bottom:9px}
  .identity-points strong {color:var(--cream);font:500 16px var(--display)}
  .faq-section {background:linear-gradient(140deg,var(--wine),var(--night) 70%);border-block:1px solid var(--section-rule)}
  .faq-layout {grid-template-columns:.78fr 1.22fr;gap:clamp(35px,6vw,95px)}
  .faq-intro {position:relative;min-height:420px}
  .faq-layout h2 {font-size:clamp(41px,5vw,65px);line-height:1.12}
  .faq-layout p {font-size:14px;line-height:1.9}
  .faq-crest {margin-top:54px;color:var(--copper);display:flex;gap:15px;align-items:center;opacity:.75}
  .faq-crest span {font:100px/.7 var(--display)}
  .faq-crest small {font-size:9px;letter-spacing:.24em}
  .faq-list {counter-reset:faq;border-top-color:var(--section-rule)}
  .faq-list details {counter-increment:faq;border-bottom-color:var(--section-rule)}
  .faq-list summary {display:flex;align-items:baseline;gap:16px;font-size:15px;line-height:1.6;padding:23px 35px 23px 0}
  .faq-list summary::before {content:counter(faq,decimal-leading-zero);color:var(--copper);font-size:10px;letter-spacing:.1em;flex:none}
  .faq-list details[open] {background:linear-gradient(90deg,rgba(236,184,138,.04),transparent)}
  .faq-list details p {padding-left:38px}
  .member-section {padding-block:100px}
  .member-banner {background:radial-gradient(circle at 77% 37%,rgba(236,184,138,.09),transparent 50%),linear-gradient(105deg,var(--wine2),var(--night));border-color:var(--section-rule)}
  .member-content {max-width:720px}
  .member-note {max-width:520px}
  .footer {border-top:1px solid var(--section-rule)}
  @media(max-width:1140px){
   .hero-copy h1 .hero-brand-title {font-size:clamp(59px,7.8vw,98px)}
   .hero-copy {padding-left:20px}
   .hero-facts {gap:12px}
   .editorial-grid {gap:36px}
  }
  @media(max-width:900px){
   .hero-grid {grid-template-columns:1fr 1fr;gap:16px}
   .hero-copy h1 .hero-brand-title {font-size:clamp(50px,7.2vw,77px)}
   .hero-copy h1 .hero-genre {font-size:clamp(11px,1.4vw,17px)}
   .hero-copy h1 .hero-edition {font-size:clamp(25px,3.1vw,36px)}
   .hero-manifesto {font-size:clamp(19px,2.5vw,28px)}
   .hero-visual {min-height:365px;height:42vw}
   .editorial-head {grid-template-columns:1fr}
   .editorial-head .eyebrow {grid-column:auto}
   .editorial-head p {padding-left:0;border:0}
   .editorial-grid {grid-template-columns:1fr}
   .article-nav {display:flex;background:none;border-left:0;border-bottom:1px solid var(--line);padding:0 0 20px}
   .faq-intro {min-height:auto}
  }
  @media(max-width:700px){
   .top-strap {height:29px;letter-spacing:.12em;white-space:nowrap}
   .top-strap span:not(:nth-child(3)){display:none}
   .hero {padding:47px 0 62px}
   .hero::before {display:none}
   .hero-grid {grid-template-columns:1fr;gap:18px}
   .hero-copy {padding-left:17px}
   .hero-copy h1 {margin:22px 0 17px;gap:9px}
   .hero-copy h1 .hero-brand-title {font-size:clamp(58px,13vw,95px)}
   .hero-copy h1 .hero-genre {font-size:clamp(12px,3vw,17px)}
   .hero-copy h1 .hero-edition {font-size:clamp(29px,7vw,44px)}
   .hero-manifesto {font-size:clamp(25px,5.5vw,34px)}
   .hero-copy .lead {font-size:13px}
   .hero-signature {font-size:8px;gap:8px}
   .hero-signature span+span::before {margin-right:8px}
   .hero-visual {height:auto;min-height:unset;margin:17px auto 0}
   .section,.editorial {padding-block:75px}
   .editorial-head {margin-bottom:35px}
   .faq-crest {display:none}
   .identity-points {grid-template-columns:1fr}
   .identity-points>div {padding:13px 16px}
   .identity-points span {margin-bottom:5px}
   .faq-section {padding:75px 0}
   .faq-layout {grid-template-columns:1fr;gap:25px}
   .faq-list summary {font-size:14px}
   .system-card {min-height:230px}
   .member-banner {padding:42px 27px}
  }
  @media(max-width:430px){
   .hero-copy h1 .hero-brand-title {font-size:clamp(51px,12.8vw,66px)}
   .hero-copy h1 .hero-edition {font-size:clamp(26px,6.9vw,32px)}
   .hero-signature {flex-wrap:wrap}
   .faq-list details p {padding-left:24px}
   .identity-chapter .intro-emphasis {font-size:15px}
  }
  @media(prefers-reduced-motion:reduce){.hero-visual,.visual-inner {animation:none}}
  
  /* Logo resmi INDOBET: gambar saja, tanpa teks tambahan di header/footer. */
  .identity-logo{display:inline-flex;align-items:center;min-width:0;flex-shrink:0;text-decoration:none}
  .identity-logo .brand-logo{display:block;height:51px;width:auto;max-width:min(230px,30vw);object-fit:contain;border:0;background:transparent}
  .footer .identity-logo .brand-logo{height:68px;max-width:min(260px,50vw)}
  @media(max-width:700px){.header .identity-logo .brand-logo{height:39px;max-width:125px}.footer .identity-logo .brand-logo{height:58px;max-width:205px}}
  @media(max-width:380px){.header .identity-logo .brand-logo{height:35px;max-width:104px}}