:root{
    --ink:#F1E9D6; --paper:#100E0A; --paper-alt:#1B1710;
    --gold:#D4B268; --gold-deep:#B08D3E;
    --line:rgba(241,233,214,0.16); --line-strong:rgba(241,233,214,0.34);
    --err:#E58A7A; --ok:#8FC79A; --nt:#7FA3C7; --gold-hover:#E8CC85; --terra:#D9906E;
    --ph:rgba(241,233,214,0.42); --on-ink:#14120D;
  }
  :root[data-theme="light"]{
    --ink:#161310; --paper:#F6F1E4; --paper-alt:#ECE3CE;
    --gold:#96772C; --gold-deep:#7A5E22;
    --line:rgba(22,19,16,0.16); --line-strong:rgba(22,19,16,0.34);
    --err:#B3412C; --ok:#2E7A45; --nt:#3F6A93; --gold-hover:#7A5E22; --terra:#B25A36;
    --ph:rgba(22,19,16,0.4); --on-ink:#F6F1E4;
  }
  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Work Sans", system-ui, sans-serif; font-size:16px; line-height:1.6; }
  body.tes-aktif{ overflow:hidden; }
  [hidden]{ display:none !important; }
  .wrap{ max-width:720px; margin:0 auto; padding:32px 16px 40px; }
  .eyebrow{ font-family:"Space Mono", monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); }
  h1{ font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:clamp(28px, 6vw, 42px); line-height:1.15; margin:8px 0 12px; }
  h2{ font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:clamp(22px, 4.5vw, 28px); line-height:1.2; margin:0 0 10px; }
  h3{ font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:19px; margin:0 0 6px; }
  .lead{ font-size:17px; opacity:0.88; margin:0 0 18px; }
  a{ color:var(--gold); }
  .catatan{ border-left:3px solid var(--gold); background:var(--paper-alt); padding:12px 14px; margin:0 0 22px; font-size:15px; }
  .kartu{ border:1px solid var(--line); background:var(--paper-alt); padding:20px 18px 18px; margin:0 0 22px; }
  .field{ margin-bottom:14px; }
  label.lbl{ display:block; font-size:14px; margin-bottom:5px; }
  .req{ color:var(--gold); }
  .opt{ opacity:0.6; font-size:12.5px; }
  .hint{ font-size:13px; opacity:0.72; margin:4px 0 0; }
  input[type=text], input[type=email], input[type=password], select{
    width:100%; background:var(--paper); color:var(--ink); border:1px solid var(--line-strong);
    padding:12px; font:inherit; font-size:16px; border-radius:0; color-scheme:dark;
  }
  :root[data-theme="light"] input[type=text], :root[data-theme="light"] input[type=email], :root[data-theme="light"] input[type=password], :root[data-theme="light"] select{ color-scheme:light; }
  ::placeholder{ color:var(--ph); opacity:1; }
  input:focus, select:focus, button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
  @media (max-width:520px){ .grid2{ grid-template-columns:1fr; } }
  .cek{ display:flex; gap:10px; align-items:flex-start; margin:0 0 12px; font-size:15px; cursor:pointer; }
  .cek input{ margin-top:5px; accent-color:var(--gold); width:18px; height:18px; flex:none; }
  .persiapan{ margin:4px 0 16px; padding-left:20px; font-size:14.5px; }
  .persiapan li{ margin-bottom:3px; }
  .btn{ display:inline-block; background:var(--gold); color:var(--on-ink); border:1px solid var(--gold); padding:14px 22px; font-family:"Space Mono", monospace; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:13px; line-height:1.4; text-align:center; text-wrap:balance; cursor:pointer; text-decoration:none; touch-action:manipulation; transition:background .18s, color .18s, border-color .18s; }
  .btn.ghost{ background:transparent; color:var(--gold); border:1px solid var(--gold); }
  .btn.besar{ padding:16px 26px; font-size:14px; }
  @media (max-width:520px){ .btn.besar{ padding:15px 18px; font-size:13px; } }
  @media (hover:hover){
    .btn:hover{ background:var(--gold-hover); border-color:var(--gold-hover); }
    .btn.ghost:hover{ background:var(--gold); border-color:var(--gold); color:var(--on-ink); }
  }
  .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .btn[disabled]{ opacity:0.45; cursor:not-allowed; }
  .nb{ white-space:nowrap; }
  .btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
  .msg{ margin:12px 0 0; font-size:14px; min-height:1.2em; }
  .msg.err{ color:var(--err); font-style:italic; }
  .info-link{ font-size:14px; border:1px solid var(--line-strong); padding:10px 12px; margin:0 0 14px; }
  .info-link.ok{ border-color:var(--ok); }
  .info-link.peringatan{ border-color:var(--err); }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  /* ---------- Bagian penjelasan (teks untuk pembaca & mesin pencari) ---------- */
  .isi{ margin-top:34px; }
  .isi section{ margin:0 0 26px; }
  .isi ol, .isi ul{ padding-left:22px; margin:8px 0; }
  .isi li{ margin-bottom:6px; }
  details.faq{ border-top:1px solid var(--line); padding:12px 0; }
  details.faq:last-of-type{ border-bottom:1px solid var(--line); }
  details.faq summary{ cursor:pointer; font-weight:600; }
  details.faq p{ margin:8px 0 0; opacity:0.88; }

  /* ---------- Layar tes (menutupi halaman) ---------- */
  #ov{ position:fixed; inset:0; z-index:100; background:var(--paper); display:flex; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .ov-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); flex:none; }
  .langkah{ display:flex; gap:6px; flex-wrap:wrap; font-family:"Space Mono", monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; }
  .langkah span{ padding:3px 8px; border:1px solid var(--line-strong); opacity:0.55; }
  .langkah span.on{ border-color:var(--gold); color:var(--gold); opacity:1; }
  .langkah span.sudah{ opacity:0.9; color:var(--ok); border-color:var(--ok); }
  .kecil{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); padding:8px 12px; font:inherit; font-size:13px; cursor:pointer; touch-action:manipulation; }
  .sv{ flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 18px; text-align:center; }
  .sv > *{ max-width:560px; width:100%; }
  .sv p{ margin:6px 0; }
  .contoh{ display:flex; justify-content:center; gap:28px; margin:16px 0; }
  .contoh div{ text-align:center; font-size:14px; }
  .contoh b{ display:block; font-family:"Noto Music","Segoe UI Symbol",sans-serif; font-size:64px; line-height:1.1; font-weight:400; }
  .contoh .t b{ color:var(--gold); }
  .contoh .n b{ color:var(--nt); }
  .nada-besar{ font-size:64px; line-height:1; margin:6px 0 10px; color:var(--gold); font-family:"Noto Music","Segoe UI Symbol",sans-serif; }

  /* permainan fokus */
  .game{ padding:0 !important; justify-content:flex-start !important; align-items:stretch !important; position:relative; }
  .game > *{ max-width:none; }
  .ikon{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; height:44px; padding:0 10px; flex:none; background:transparent; color:var(--ink); border:1px solid var(--line-strong); font:inherit; font-size:13px; cursor:pointer; touch-action:manipulation; }
  .ikon svg{ width:18px; height:18px; fill:currentColor; flex:none; }
  .ikon .lbl{ display:none; }
  @media (min-width:520px){ .ikon .lbl{ display:inline; } }
  .ikon:hover{ border-color:var(--gold); color:var(--gold); }
  .g-jeda{ position:absolute; inset:0; z-index:5; background:var(--paper); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; }
  .g-jeda > div{ max-width:420px; width:100%; }
  .g-jeda .waktu{ font-family:"Space Mono", monospace; font-size:34px; color:var(--gold); margin:4px 0; }
  .btn svg{ width:14px; height:14px; fill:currentColor; vertical-align:-2px; margin-right:6px; }
  .g-top{ display:flex; align-items:center; gap:12px; padding:10px 14px; flex:none; }
  .g-prog{ flex:1; height:8px; background:var(--line); border-radius:4px; position:relative; }
  .g-prog i{ display:block; height:100%; width:0; background:var(--gold); border-radius:4px; transition:width .3s linear; }
  .g-stars{ font-family:"Space Mono", monospace; font-size:15px; color:var(--gold); min-width:56px; text-align:right; }
  .g-stars.pop{ animation:pop .25s ease-out; }
  @keyframes pop{ 50%{ transform:scale(1.3); } }
  @media (prefers-reduced-motion:reduce){ .g-stars.pop{ animation:none; } .g-prog i{ transition:none; } }
  .g-level{ font-family:"Space Mono", monospace; font-size:12px; color:var(--ink-soft, var(--ink)); opacity:.8; white-space:nowrap; }
  .g-stars{ transition:font-size .3s, text-shadow .3s; transform-origin:right center; }
  .g-stars.ms1{ font-size:18px; text-shadow:0 0 6px rgba(233,168,0,.55); }
  .g-stars.ms2{ font-size:21px; text-shadow:0 0 10px rgba(233,168,0,.75), 0 0 2px rgba(233,168,0,.9); }
  .g-stars.ms3{ font-size:25px; text-shadow:0 0 14px rgba(233,168,0,.9), 0 0 4px #E9A800; }
  .g-stars.capai{ animation:capai .7s ease-out; }
  @keyframes capai{ 0%{ transform:scale(1); } 35%{ transform:scale(1.6); } 100%{ transform:scale(1); } }
  .g-burst{ position:absolute; left:50%; top:50%; width:min(70vmin, 320px); aspect-ratio:1; margin:calc(min(70vmin, 320px) / -2) 0 0 calc(min(70vmin, 320px) / -2); pointer-events:none; opacity:0; z-index:2; }
  .g-burst svg{ width:100%; height:100%; overflow:visible; }
  .g-burst .bt{ fill:#F5C518; stroke:#E9A800; stroke-width:2; stroke-linejoin:round; transform-origin:50px 50px; filter:drop-shadow(0 0 5px rgba(233,168,0,.8)); }
  .g-burst .sinar line{ stroke:#E9A800; stroke-width:3.5; stroke-linecap:round; }
  .g-burst.on{ animation:burstOp .65s ease-out; }
  .g-burst.on .bt{ animation:burstBt .65s cubic-bezier(.2,1.4,.4,1); }
  .g-burst.on .sinar{ transform-origin:50px 50px; animation:burstSn .65s ease-out; }
  @keyframes burstOp{ 0%{ opacity:1; } 70%{ opacity:1; } 100%{ opacity:0; } }
  @keyframes burstBt{ 0%{ transform:scale(.3); } 55%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
  @keyframes burstSn{ 0%{ transform:scale(.6); } 100%{ transform:scale(1.25); } }
  .g-lvban{ position:absolute; top:10px; left:0; right:0; text-align:center; font-family:"Fraunces", Georgia, serif; font-size:26px; color:var(--gold); opacity:0; pointer-events:none; z-index:3; }
  .g-lvban.on{ animation:lvban 2s ease-out; }
  @keyframes lvban{ 0%{ opacity:0; transform:translateY(-8px); } 15%{ opacity:1; transform:none; } 75%{ opacity:1; } 100%{ opacity:0; } }
  .g-area.lv2{ background:linear-gradient(rgba(124,181,24,.07), rgba(124,181,24,.07)); }
  .g-area.lv3{ background:linear-gradient(rgba(233,168,0,.09), rgba(233,168,0,.09)); }
  @media (prefers-reduced-motion:reduce){ .g-burst.on, .g-burst.on .bt, .g-burst.on .sinar, .g-stars.capai{ animation:none; } .g-burst.on{ opacity:1; } .g-lvban.on{ animation:none; opacity:1; } }
  .g-area{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; position:relative; }
  .g-glyph{ font-family:"Noto Music","Segoe UI Symbol","DejaVu Sans",sans-serif; font-size:min(56vmin, 250px); line-height:1; visibility:hidden; font-weight:400; }
  .g-glyph.t{ color:var(--gold); }
  .g-glyph.n{ color:var(--nt); }
  .g-glyph.hitung{ color:var(--ink); font-family:"Fraunces", Georgia, serif; opacity:.85; }
  .g-fb{ position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:19px; min-height:1.5em; font-weight:600; }
  .g-fb.bagus{ color:var(--ok); }
  .g-fb.ups{ color:var(--err); }
  .g-foot{ flex:none; text-align:center; font-size:14px; padding:10px 14px 14px; opacity:0.85; }
  .g-foot b{ font-family:"Noto Music","Segoe UI Symbol",sans-serif; font-weight:400; font-size:20px; }
  .g-foot .t{ color:var(--gold); } .g-foot .n{ color:var(--nt); }

  /* tugas nada */
  .titik{ display:flex; gap:6px; justify-content:center; margin:0 0 14px; }
  .titik i{ width:10px; height:10px; border-radius:50%; background:var(--line-strong); }
  .titik i.on{ background:var(--gold); }
  .titik i.sudah{ background:var(--ok); }
  .jawab{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
  .jawab .btn{ padding:18px 10px; font-size:13px; }
  .pad{ width:min(62vw, 230px); aspect-ratio:1; border-radius:50%; border:3px solid var(--gold); background:var(--paper-alt); color:var(--gold); font-family:"Space Mono", monospace; font-size:16px; letter-spacing:.05em; cursor:pointer; margin:14px auto; display:flex; align-items:center; justify-content:center; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
  .pad.flash{ background:var(--gold); color:var(--on-ink); }
  .pad:disabled{ opacity:.4; cursor:default; }
  .urut-main{ text-align:left; max-width:420px; margin:0 auto 12px; padding-left:22px; font-size:15px; }
  .urut-main li{ margin:0 0 5px; }
  .ulang-sesi{ margin:10px 0 0; text-align:center; font-size:13.5px; }
  .tautan{ background:none; border:0; padding:6px 4px; font:inherit; color:var(--gold); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .panah{ display:inline-block; font-weight:700; font-size:1.15em; line-height:1; vertical-align:-2px; }
  .panah.naik{ color:var(--ok); } .panah.turun{ color:var(--terra); }
  .jawab .jw{ display:flex; align-items:center; justify-content:center; gap:8px; }
  .jw-ik{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; border-radius:50%; font-size:17px; font-weight:700; color:#fff; padding:0 2px; }
  .jawab .jw1{ border-color:#5B8FC7; } .jawab .jw1 .jw-ik{ background:#5B8FC7; }
  .jawab .jw2{ border-color:#D9774F; } .jawab .jw2 .jw-ik{ background:#D9774F; }
  .jawab .jw1:not(:disabled):hover{ background:rgba(91,143,199,.15); color:var(--ink); }
  .jawab .jw2:not(:disabled):hover{ background:rgba(217,119,79,.15); color:var(--ink); }
  #nDengar svg{ width:18px; height:18px; fill:currentColor; vertical-align:-4px; margin-right:8px; }
  .n-viz{ position:relative; height:76px; margin:10px auto 0; max-width:360px; }
  .n-viz-label{ position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
  .n-titik{ position:absolute; font-style:normal; font-size:30px; line-height:1; font-weight:700; transform:translateX(-50%); animation:titikMasuk .45s ease-out both; }
  @keyframes titikMasuk{ from{ opacity:0; transform:translateX(-50%) scale(.5); } to{ opacity:1; transform:translateX(-50%) scale(1); } }
  @media (prefers-reduced-motion:reduce){ .n-titik{ animation:none; } }

  /* kipas garis */
  .kipas{ width:min(86vw, 52vh, 340px); aspect-ratio:1; margin:8px auto; background:#fff; border-radius:50%; }
  .kipas svg{ width:100%; height:100%; display:block; touch-action:manipulation; }
  .kipas .v{ stroke:#000; stroke-width:3.2; stroke-linecap:butt; }
  .kipas .h{ stroke:transparent; stroke-width:26; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .kipas .pilih{ stroke:#C9971F; stroke-width:8; stroke-linecap:round; filter:drop-shadow(0 0 4px #E9B93A); pointer-events:none; }
  .btn.sama.on{ background:var(--gold); color:var(--on-ink); }
  .btn:disabled{ opacity:.4; cursor:default; }
  b.emas{ color:var(--gold); }
  .ov-aksi{ display:flex; gap:8px; flex:none; }
  .ke-isi{ margin:10px 0 0; font-size:13.5px; }
  .ke-isi a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
  .ke-isi b{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-right:7px; border:1px solid var(--gold); border-radius:50%; font:700 12px "Space Mono", monospace; vertical-align:1px; }
  .mulai-bawah{ text-align:center; margin:26px 0 30px; }

  /* ---------- HP mendatar (landscape): tiap layar tes pas satu layar, tanpa scroll ---------- */
  @media (orientation:landscape) and (max-height:520px){
    .ov-bar{ padding:4px 12px; } .ov-bar .kecil{ padding:5px 10px; font-size:12px; } .langkah{ font-size:10.5px; }
    .sv{ padding:6px 16px; } .sv:not(.game){ justify-content:flex-start; } .sv:not(.game) > *{ margin-top:auto; margin-bottom:auto; }   /* tengah, tapi bagian atas tidak terpotong kalau isinya panjang */ .sv > *{ max-width:780px; }
    .sv h2{ font-size:19px; margin:0 0 4px; } .sv p{ font-size:13.5px; line-height:1.35; margin:3px 0; } .sv .hint{ font-size:12px; }
    .sv .lencana, .sv .gelas, .sv > .deco-notes{ display:none; }          /* hiasan saja; disembunyikan supaya teks dan tombol muat */
    .g-area{ overflow:hidden; }
    .sv .btns{ margin-top:8px; } .sv .btn{ padding:9px 16px; } .sv .btn.besar{ padding:10px 20px; font-size:13px; }
    .contoh{ margin:4px 0; gap:40px; } .contoh div{ font-size:13px; } .contoh b{ font-size:34px; }
    .g-top{ padding:4px 12px; } .ikon{ height:34px; min-width:38px; } .g-foot{ padding:3px 12px 5px; font-size:12px; } .g-foot b{ font-size:15px; } .g-fb{ bottom:2px; font-size:15px; }
    .g-jeda{ padding:8px; } .g-jeda .waktu{ font-size:24px; margin:0; }
    .titik{ margin:0 0 6px; } .jawab{ margin-top:8px; } .jawab .btn{ padding:11px 10px; } .pad{ width:min(34vh, 200px); margin:6px auto; }
    #sv-garis > div{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:2px 22px; }
    #sv-garis .kipas{ grid-column:1; grid-row:1 / span 3; width:min(calc(100vh - 70px), 300px); width:min(calc(100dvh - 70px), 300px); margin:0; }
  }

  /* dialog */
  dialog{ border:1px solid var(--gold); background:var(--paper); color:var(--ink); padding:22px; max-width:min(420px, calc(100vw - 32px)); }
  dialog::backdrop{ background:rgba(0,0,0,0.7); }
  dialog p{ margin:0 0 14px; }

  /* ---------- Hasil ---------- */
  .anak{ text-align:center; border:1px solid var(--gold); background:var(--paper-alt); padding:26px 18px; margin:0 0 22px; }
  .stiker{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin:14px 0 18px; }
  .stiker div{ width:118px; font-size:13px; line-height:1.3; }
  .stiker svg{ width:84px; height:84px; display:block; margin:0 auto 6px; }
  .stiker .lingkar{ fill:var(--gold); }
  .stiker .cincin{ stroke-dasharray:2 3; }
  .stiker .gambar{ fill:var(--on-ink); stroke:none; }
  .stiker .tulis{ fill:var(--on-ink); font-family:"Noto Music","Segoe UI Symbol",sans-serif; font-size:44px; text-anchor:middle; }
  .stiker .garis{ stroke:var(--on-ink); fill:none; stroke-width:3.4; stroke-linecap:round; }
  .hasil-kotak{ border:1px solid var(--line); background:var(--paper-alt); padding:18px; margin:0 0 16px; }
  .hasil-kotak h3{ color:var(--gold); font-family:"Space Mono", monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin:0 0 8px; }
  .besar-teks{ font-family:"Fraunces", Georgia, serif; font-size:clamp(24px, 6vw, 32px); line-height:1.2; margin:0 0 6px; }
  .meta{ font-size:13.5px; opacity:0.72; margin:0 0 14px; }
  .baris{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line); font-size:15px; }
  .baris:first-of-type{ border-top:0; }
  .baris span:last-child{ text-align:right; }
  .chart{ width:100%; height:auto; display:block; margin:8px 0 2px; }
  .chart text{ fill:var(--ink); font-family:"Space Mono", monospace; font-size:9px; text-anchor:middle; }
  .chart .sumbu{ stroke:var(--line-strong); stroke-width:1; }
  .chart .grid{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; }
  .chart .bar{ fill:var(--gold); }
  .chart .bar.turun{ fill:var(--gold-deep); opacity:.5; }
  .chart .bar.parsial{ opacity:.35; }
  .chart .gar{ fill:none; stroke:var(--gold); stroke-width:2; }
  .chart .titik-rt{ fill:var(--gold); }
  .chart .tanda{ stroke:var(--err); stroke-width:1.2; stroke-dasharray:4 3; }
  .legenda{ font-size:12.5px; opacity:.7; margin:0 0 12px; }
  .chart .yl{ text-anchor:end; }
  .chart .ya{ text-anchor:start; }
  .chart .jud{ font-size:8px; opacity:.75; }
  .chart .ket{ font-size:7.5px; opacity:.65; font-style:italic; }
  .chart .dasar{ stroke:var(--nt); stroke-width:1.3; stroke-dasharray:5 3; }
  .chart .nilai{ font-size:8px; }
  .cara-baca{ font-size:14px; background:var(--paper); border-left:3px solid var(--gold); padding:9px 12px; margin:6px 0 4px; }
  .leg{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; opacity:.85; margin:2px 0 14px; }
  .leg i{ display:inline-block; width:14px; height:10px; margin-right:6px; vertical-align:-1px; background:var(--gold); }
  .leg i.turun{ background:var(--gold-deep); opacity:.5; }
  .leg i.parsial{ opacity:.35; }
  .leg i.gdasar{ background:none; height:0; border-top:2px dashed var(--nt); vertical-align:3px; }
  .leg i.gturun{ background:none; width:0; height:12px; border-left:2px dashed var(--err); margin-right:8px; }
  .rumah{ display:flex; flex-direction:column; gap:8px; }
  details.rm{ --c:var(--gold); border:1px solid var(--c); border-left-width:5px; background:rgba(150,119,44,.07); }
  @supports (background:color-mix(in srgb, red 10%, transparent)){ details.rm{ background:color-mix(in srgb, var(--c) 10%, transparent); } }
  details.rm summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; font-weight:600; font-size:15px; }
  details.rm summary::-webkit-details-marker{ display:none; }
  .rm-ik{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--c); color:var(--t,#fff); display:flex; align-items:center; justify-content:center; }
  .rm-ik svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .rm-no{ font:700 12px "Space Mono", monospace; color:var(--c); }
  .rm-chev{ margin-left:auto; flex:none; width:9px; height:9px; border-right:2px solid var(--c); border-bottom:2px solid var(--c); transform:rotate(45deg); transition:transform .2s; }
  details.rm[open] .rm-chev{ transform:rotate(-135deg); }
  details.rm > p{ margin:0; padding:0 14px 12px 56px; font-size:15px; }
  @media (hover:hover){ details.rm summary:hover b{ color:var(--c); } }
  .rm-aksi{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin:-18px -18px 8px; padding:0 18px 0 0; }
  .rm-deco{ position:relative; flex:1; height:78px; display:flex; align-items:center; gap:28px; padding:0 18px 0 14px; color:var(--gold); font-family:"Noto Music", serif; line-height:1; }
  .rm-deco::before{ content:""; position:absolute; left:0; right:0; top:28px; height:21px; background:repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 5px); }
  .rm-deco::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:34%; background:linear-gradient(90deg, transparent, var(--paper-alt)); pointer-events:none; z-index:2; }
  .rm-deco span{ position:relative; font-size:26px; } .rm-deco span:first-child{ font-size:54px; }
  .rm-deco span{ opacity:.85; }
  .bag{ display:block; color:var(--c); font:700 11px "Space Mono", monospace; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; }
  .gb{ border-left:4px solid var(--c); padding:2px 0 2px 12px; margin:0 0 12px; }
  details.gb summary{ list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer; }
  details.gb summary::-webkit-details-marker{ display:none; }
  details.gb[open] .rm-chev{ transform:rotate(-135deg); }
  .gb-isi{ margin-top:6px; }
  .mno{ display:inline-block; margin-right:8px; vertical-align:middle; text-align:center; color:var(--paper); }
  .meter-judul{ cursor:pointer; }
  button.lencana{ border:0; background:none; padding:0; cursor:pointer; color:inherit; transition:transform .18s; }
  @media (hover:hover){ button.lencana:hover, a.lencana:hover{ transform:scale(1.1); } }
  a.lencana{ display:block; transition:transform .18s; }
  .kipas-dua figure{ cursor:zoom-in; transition:transform .2s; }
  @media (hover:hover){ .kipas-dua figure:hover{ transform:scale(1.06); } .kipas-dua figure:hover .pilih{ stroke-width:5; } }
  .pop-ov{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px; }
  .pop-kotak{ position:relative; width:min(480px, 100%); max-height:90vh; overflow:auto; background:var(--paper); border:1px solid var(--gold); padding:22px 20px 18px; }
  .pop-kotak h3{ margin:0 0 8px; font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:22px; }
  .pop-tutup{ position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink); font-size:20px; line-height:1; cursor:pointer; }
  .pv{ position:relative; height:130px; margin:12px 0; background:var(--paper-alt); border:1px solid var(--line); overflow:hidden; text-align:center; }
  .pv small{ display:block; font-size:12.5px; opacity:.85; }
  .pv-a, .pv-b{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; animation:pvGanti 4s infinite; } .pv-b{ animation-delay:2s; }
  .pv-big{ font-size:52px; line-height:1; }
  @keyframes pvGanti{ 0%{ opacity:0; transform:scale(.6); } 12%, 45%{ opacity:1; transform:scale(1); } 55%, 100%{ opacity:0; } }
  .pv-nada span{ position:absolute; font-size:44px; color:#3E63DD; opacity:0; animation:pvNada 4s infinite; } .pv-nada .n1{ left:30%; bottom:34px; } .pv-nada .n2{ left:58%; bottom:62px; animation-delay:1.2s; color:#12A594; }
  .pv-nada small{ position:absolute; left:0; right:0; bottom:4px; }
  @keyframes pvNada{ 0%{ opacity:0; } 10%, 70%{ opacity:1; } 90%, 100%{ opacity:0; } }
  .pv-mata{ height:170px; display:flex; align-items:center; justify-content:center; } .pv-mata svg{ width:150px; height:150px; } .pv-mata line{ stroke:var(--line-strong); stroke-width:1; } .pv-mata line.pilih{ stroke:#D63B3B; stroke-width:3.4; } .pv-mata text{ fill:var(--ink); font:10px "Space Mono", monospace; text-anchor:middle; opacity:.6; }
  @media (prefers-reduced-motion:reduce){ .pv-a, .pv-b, .pv-nada span{ animation:none; opacity:1; } .pv-b{ display:none; } }
  .zoom-ov .pop-kotak{ text-align:center; width:min(440px, 100%); }
  .zoom-ov svg{ width:min(78vw, 360px); height:min(78vw, 360px); }
  .zoom-ov .pilih{ stroke-width:6; filter:drop-shadow(0 0 5px #D63B3B); }
  .kontak-box{ display:flex; gap:12px; align-items:center; border:1px solid var(--gold); background:transparent; padding:12px 14px; margin:18px 0 14px; }
  .kontak-box .pk-ik{ background:#12A594; color:#fff; }
  .kontak-box p{ margin:0; }
  body:has(#v-dewasa:not([hidden])) .wrap{ padding-top:12px; }
  .eyebrow-baris.besar{ gap:20px; }
  .hero-hasil{ overflow:hidden; padding-top:6px; }
  .hero-hasil .hero-clef{ font-size:130px; top:-8px; right:2px; }
  .hero-hasil .hero-notes{ top:0; height:100px; }
  .lipat-isi{ cursor:pointer; }
  .lipat-isi .meter-jalur, .lipat-isi .meter-judul, .lipat-isi summary, .lipat-isi a, .lipat-isi button{ cursor:pointer; }
  @media (hover:hover){
    .sesi-judul.lipat:has(+ .lipat-isi:hover) h2{ color:var(--gold); }
    .sesi-judul.lipat:has(+ .lipat-isi:hover) .rm-chev{ border-color:var(--gold); }
    details.rm:hover summary b{ color:var(--c); }
    details.rm:hover .rm-ik{ background:var(--paper-alt); color:var(--c); box-shadow:inset 0 0 0 2px var(--c); }
  }
  #dewasaIsi p.legenda{ margin:16px 0 0; padding-top:8px; border-top:1px dashed var(--line-strong); font-style:italic; font-size:12.5px; opacity:.72; }
  .meter-arti{ font-style:italic; margin-top:12px; }
  .meter-latih{ font-style:normal; font-weight:600; margin-top:8px; }
  .meter-kutub{ font:11px "Space Mono", monospace; letter-spacing:.06em; text-transform:uppercase; opacity:.6; }
  .info-link:empty{ display:none; }
  .pil-var{ margin:0 0 8px; padding:8px 12px; border-left:3px solid var(--line-strong); font-size:14px; } .pil-var.ini{ border-left-color:var(--gold); background:rgba(150,119,44,.1); }
  button.pil{ background:transparent; font-family:inherit; cursor:pointer; transition:transform .18s, background .18s, color .18s; }
  @media (hover:hover){ button.pil:hover{ background:var(--c, var(--gold)); color:var(--paper); transform:scale(1.08); } }
  details.rm, details.gb, .riwayat li{ transition:transform .18s, opacity .18s; }
  @media (hover:hover){
    details.rm:hover, details.gb:hover, .riwayat li:hover{ transform:scale(1.02); }
    .rumah:hover details.rm:not(:hover), .arti-garis:hover details.gb:not(:hover), .riwayat:hover li:not(:hover){ opacity:.55; }
    details.rm summary:hover .rm-ik{ background:var(--paper-alt); color:var(--c); box-shadow:inset 0 0 0 2px var(--c); }
  }
  .ringkasan .rk-ikon{ z-index:6; }
  .rk-ikon a[data-tip]::after{ bottom:auto; top:calc(100% + 6px); left:0; right:auto; transform:none; }
  .eyebrow-baris.besar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .eyebrow-baris.besar .logo-kiri{ width:138px; height:138px; }
  #v-dewasa p.catatan{ position:relative; font-style:italic; padding:26px 38px; }
  #v-dewasa p.catatan::before, #v-dewasa p.catatan::after{ position:absolute; font:700 64px/1 Georgia, serif; font-style:normal; color:var(--gold); opacity:.28; pointer-events:none; }
  #v-dewasa p.catatan::before{ content:"\201C"; left:10px; top:8px; }
  #v-dewasa p.catatan::after{ content:"\201D"; right:10px; bottom:-14px; }
  .sesi-judul.lipat{ cursor:pointer; } @media (hover:hover){ .sesi-judul.lipat:hover h2{ color:var(--gold); } }
  .sesi-judul.lipat .rm-chev{ margin-left:0; transform:rotate(-135deg); } .sesi-judul.lipat.tutup .rm-chev{ transform:rotate(45deg); }
  .lipat-isi.tutup{ display:none; }
  @media print{ .lipat-isi.tutup{ display:block !important; } }
  .btns + .hint{ margin-top:18px; }
  .btn-atas{ position:fixed; right:16px; bottom:16px; z-index:55; width:44px; height:44px; border-radius:50%; border:1px solid var(--gold); background:var(--paper-alt); color:var(--gold); font-size:22px; line-height:1; cursor:pointer; opacity:.9; }
  .btn-atas:hover, .btn-atas:focus-visible{ background:var(--gold); color:var(--on-ink); outline:none; }

  .gb-no{ flex:none; width:24px; height:24px; min-width:24px; border-radius:50%; background:var(--c); color:var(--t,#fff); font:700 12px/24px "Space Mono", monospace; text-align:center; }
  .gb-ik{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--c); color:var(--t,#fff); display:flex; align-items:center; justify-content:center; }
  .gb-ik svg, .co-h svg, .sub-j svg, .pk-ik svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .gb.tips{ border:1px solid var(--c); border-left-width:4px; background:rgba(150,119,44,.08); padding:10px 12px; }
  @supports (background:color-mix(in srgb, red 10%, transparent)){ .gb.tips{ background:color-mix(in srgb, var(--c) 10%, transparent); } }
  .gb p, .gb ul{ margin:0 0 6px; } .gb ul{ padding-left:20px; }
  .catatan-kecil{ margin:16px 0 0; padding-top:8px; border-top:1px dashed var(--line-strong); font-style:italic; font-size:12.5px; opacity:.72; }
  .sub-j{ display:flex; align-items:center; gap:8px; margin:6px 0 10px; font:700 12px "Space Mono", monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
  .callout{ border-left:4px solid var(--terra); background:rgba(178,90,54,.1); padding:10px 14px; margin:0 0 10px; }
  .co-h{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--terra); margin-bottom:4px; }
  .callout p{ margin:0; font-size:15px; }
  .pengerjaan{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:8px; margin-top:12px; }
  .pk{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); padding:10px; font-size:14px; }
  .pk-ik{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; }
  .pk b{ display:block; font:700 11px "Space Mono", monospace; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
  .chip-menit{ display:inline-block; color:#fff; font:700 11px "Space Mono", monospace; padding:2px 8px; border-radius:999px; margin-right:6px; }

  .kipas-hasil{ width:140px; height:140px; display:block; margin:0 auto; }
  .kipas-dua{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:0 0 12px; }
  .kipas-dua figure{ margin:0; flex:1; min-width:150px; max-width:220px; text-align:center; font-size:13px; }
  .kipas-dua figcaption{ margin-top:4px; }
  .kipas-hasil .pilih{ stroke:#D63B3B; stroke-width:3.4; }
  .kipas-hasil line{ stroke:var(--line-strong); stroke-width:1; }
  .kipas-hasil text{ fill:var(--ink); font:10px "Space Mono", monospace; text-anchor:middle; opacity:.7; } .kipas-hasil text.pj{ fill:var(--gold); font-weight:700; opacity:1; font-size:12px; }
  .arti-garis.kipas-baris{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
  .arti-garis ul{ margin:4px 0 6px; padding-left:20px; }
  .meter-latih{ font-size:14px; margin:6px 0 0; }
  .meter-info p{ margin:0 0 6px; } .meter-info p:last-child{ margin:0; }
  .meter-jalur[data-tip]{ cursor:pointer; }
  .chart .klik{ cursor:pointer; } .chart .klik:hover{ opacity:.75; stroke:var(--ink); stroke-width:1.2; } .chart rect.bar.sel, .chart circle.sel{ stroke:var(--ink); stroke-width:2; }
  .chart .hit{ fill:transparent; cursor:pointer; } .chart .hit:hover, .chart rect.hit.sel{ fill:rgba(128,128,128,.14); stroke:none; }
  .chart text[data-i]{ cursor:pointer; }
  .panel-menit{ font-size:14px; background:var(--paper); border-left:3px solid var(--gold); padding:10px 12px; margin:0 0 14px; }
  .lp{ position:absolute; top:0; bottom:1px; width:34px; border:0; background:var(--paper); color:var(--gold); font-size:26px; line-height:1; cursor:pointer; display:none; padding:0; z-index:2; }
  .lp.on{ display:block; } .lp-l{ left:0; box-shadow:8px 0 8px -4px var(--paper); } .lp-r{ right:48px; box-shadow:-8px 0 8px -4px var(--paper); }
  .lompat{ cursor:grab; user-select:none; } .lompat.seret{ cursor:grabbing; }
  ul.rumah b{ display:block; font-weight:600; }
  ul.saran{ margin:6px 0 0; padding-left:20px; font-size:15px; }
  ul.saran li{ margin-bottom:5px; }
  .tabel-riwayat{ width:100%; border-collapse:collapse; font-size:13.5px; }
  .tabel-riwayat td, .tabel-riwayat th{ border-top:1px solid var(--line); padding:6px 4px; text-align:left; vertical-align:top; }
  .tabel-riwayat th{ font-family:"Space Mono", monospace; font-size:11px; text-transform:uppercase; opacity:.7; }

  /* ---------- Dekorasi (satu keluarga dengan website utama) ---------- */
  .hero{ position:relative; margin-bottom:6px; }
  .hero > *:not(.hero-clef):not(.hero-notes){ position:relative; z-index:1; }
  .hero-clef{ position:absolute; right:-2%; top:-34px; z-index:0; font-family:"Noto Music", serif; font-size:min(46vw, 300px); line-height:1; color:var(--gold); opacity:.12; pointer-events:none; user-select:none; }
  .hero-notes{ position:absolute; left:0; right:0; top:-26px; height:230px; z-index:0; pointer-events:none; }
  .hero-notes b{ position:absolute; left:var(--x); top:var(--y); font-family:"Noto Music", serif; font-size:var(--s, 24px); line-height:1; color:var(--gold); opacity:.32; transform:rotate(var(--r, 0deg)); font-weight:400; }
  .staff{ color:var(--gold); opacity:.6; height:clamp(70px, 14vw, 110px); margin:4px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
  .staff svg{ width:100%; height:100%; display:block; }
  .kartu, .anak, .ringkasan{ position:relative; overflow:hidden; }
  .kartu::before{ content:"\266B \266A"; position:absolute; left:10px; top:6px; font-family:"Noto Music", serif; font-size:44px; letter-spacing:6px; line-height:1; color:var(--gold); opacity:.07; pointer-events:none; }
  .kartu::after, .anak::after, .ringkasan::after{ content:"\1D11E"; position:absolute; right:-6px; top:-20px; font-family:"Noto Music", serif; font-size:140px; line-height:1; color:var(--gold); opacity:.06; pointer-events:none; }
  .kartu::after{ right:30%; top:-4px; }
  .kartu > *:not(.hp), .anak > *, .ringkasan > *{ position:relative; z-index:1; }
  .isi h2::before{ content:"\266A"; font-family:"Noto Music","Segoe UI Symbol",serif; color:var(--gold); margin-right:8px; font-size:.85em; }
  .sv{ position:relative; }
  .sv > .deco-notes{ max-width:none; width:auto; }
  .sv > .deco-notes b{ opacity:.26; }
  .sv:not(.game) > div{ position:relative; z-index:1; }
  .lencana{ width:96px; height:96px; margin:0 auto 14px; }
  .lencana svg{ width:100%; height:100%; display:block; }
  .lencana .cincin, .stiker .cincin{ fill:none; stroke:var(--gold); stroke-width:1.2; opacity:.55; stroke-dasharray:2 3; }
  .lencana .lingkar{ fill:var(--gold); }
  .lencana .gambar{ fill:var(--on-ink); stroke:none; }
  .lencana .tulis{ fill:var(--on-ink); font-family:"Noto Music","Segoe UI Symbol",sans-serif; font-size:44px; text-anchor:middle; }
  .lencana .garis{ stroke:var(--on-ink); fill:none; stroke-width:3.4; stroke-linecap:round; }
  .lencana.mini{ width:44px; height:44px; margin:0; flex:none; }
  .gelas{ width:120px; margin:0 auto 28px; }
  .gelas svg{ width:100%; height:auto; display:block; overflow:visible; }
  .gelas .kaca{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
  .gelas .air{ fill:var(--nt); opacity:.55; }
  .gelas .alas{ fill:var(--gold); opacity:.25; }
  .gelas .sedotan{ stroke:var(--terra); stroke-width:4.5; stroke-linecap:round; fill:none; }
  .gelas .gelembung{ fill:none; stroke:var(--ink); stroke-width:1.4; opacity:.45; }
  @media (prefers-reduced-motion:no-preference){
    .gelas .gelembung{ animation:naik 3.3s ease-in infinite; }
    .gelas .gelembung:nth-of-type(2){ animation-delay:1.1s; }
    .gelas .gelembung:nth-of-type(3){ animation-delay:2.2s; }
    .gelas .ombak{ animation:ombak 3.6s ease-in-out infinite alternate; }
  }
  @keyframes naik{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:.6; } 100%{ transform:translateY(-40px); opacity:0; } }
  @keyframes ombak{ to{ transform:translateX(-14px); } }
  .anak .btn{ max-width:100%; }

  /* ---------- Form kacamata dan salinan email (hanya dengan link pribadi) ---------- */
  .sub-kartu{ border:1px dashed var(--line-strong); padding:14px 14px 4px; margin:0 0 14px; }
  .sub-kartu h3{ font-size:17px; }
  .km-mata{ margin:10px 0 12px; }
  .km-mata > b{ display:block; font-size:14px; margin-bottom:4px; }
  .km-baris{ display:grid; grid-template-columns:1fr 1fr; gap:10px 8px; }
  .km-baris > div:nth-child(3){ grid-column:1 / 2; }
  @media (min-width:560px){ .km-baris{ grid-template-columns:1.45fr 1.45fr 1fr; } .km-baris > div:nth-child(3){ grid-column:auto; } }
  @media (max-width:340px){ .km-baris{ grid-template-columns:1fr; } .km-baris > div:nth-child(3){ grid-column:auto; } }
  .km-lbl{ display:block; font-size:12px; opacity:.7; margin-bottom:3px; }
  .km-gabung{ display:flex; gap:4px; }
  .km-gabung select{ width:auto; flex:none; padding:10px 4px; }
  .km-gabung input{ min-width:0; flex:1; }
  .km-baris input:disabled, .km-baris select:disabled{ opacity:.4; }

  /* ---------- Hasil untuk orang tua: kesimpulan, per sesi, meter ---------- */
  .lompat{ display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; scrollbar-width:none; }
  .lompat::-webkit-scrollbar{ display:none; }
  .lompat a{ flex:none; white-space:nowrap; }
  .lompat a{ font-family:"Space Mono", monospace; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; border:1px solid var(--line-strong); padding:6px 10px; color:var(--ink); }
  @media (hover:hover){ .lompat a:hover{ border-color:var(--gold); color:var(--gold); } }
  .ringkasan{ border:1px solid var(--gold); background:var(--paper-alt); padding:22px 18px; margin:0 0 8px; scroll-margin-top:84px; }
  .rk-ikon{ display:flex; gap:10px; margin-bottom:12px; }
  .ringkasan p{ margin:6px 0; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .chip{ font-size:13.5px; padding:5px 12px; border:1px solid var(--c, var(--line-strong)); border-radius:999px; }
  .chip b{ color:var(--c); font-weight:600; }
  a.chip{ color:inherit; text-decoration:none; transition:background .18s, color .18s; }
  @media (hover:hover){ a.chip:hover{ background:var(--c); color:#fff; } a.chip:hover b{ color:#fff; } }
  [data-tip]{ position:relative; }
  [data-tip]::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); right:0; white-space:nowrap; background:var(--ink); color:var(--paper); font:500 12px "Work Sans", sans-serif; letter-spacing:0; text-transform:none; padding:6px 10px; border-radius:4px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:40; }
  a.chip[data-tip]::after{ right:auto; left:50%; transform:translateX(-50%); }
  @media (hover:hover){ [data-tip]:hover::after{ opacity:1; } }
  [data-tip]:focus-visible::after{ opacity:1; }
  .arti-garis{ font-size:14px; background:var(--paper); border-left:3px solid var(--c, var(--gold)); padding:10px 12px; margin:10px 0 0; }
  .arti-garis p{ margin:0 0 6px; } .arti-garis p:last-child{ margin:0; }
  .sesi-judul{ display:flex; align-items:center; gap:12px; margin:34px 0 12px; padding-top:22px; border-top:1px solid rgba(233,168,0,.35); scroll-margin-top:84px; }
  .sesi-judul .no{ flex:none; width:38px; height:38px; border-radius:50%; border:2px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center; font-family:"Fraunces", Georgia, serif; font-size:19px; }
  .sesi-judul h2{ margin:0; }
  .sesi-judul small{ display:block; font-size:13px; opacity:.7; }
  .m-emas{ --c:var(--gold); } .m-biru{ --c:var(--nt); } .m-hijau{ --c:var(--ok); } .m-terra{ --c:var(--terra); } .m-ungu{ --c:#9A8CC7; } .m-merah{ --c:#E5484D; }
  .meter{ margin:0 0 20px; }
  .meter-judul{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-bottom:8px; font-size:15px; }
  .meter-judul b{ color:var(--c); font-size:18px; font-weight:600; }
  .meter-judul em{ font-style:normal; font-size:13px; opacity:.75; }
  .meter-jalur{ position:relative; height:12px; }
  .meter-jalur::before{ content:""; position:absolute; inset:0; border-radius:6px; background:var(--c); opacity:.45; }
  .meter-jalur i{ position:absolute; top:50%; left:var(--p); width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--paper-alt); border:4px solid var(--c); box-sizing:border-box; }
  .meter-kutub{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; opacity:.75; margin-top:6px; }
  .meter-arti{ font-size:14px; opacity:.88; margin:8px 0 0; }
  .pil{ display:inline-block; padding:4px 14px; border:1px solid var(--c); border-radius:999px; color:var(--c); font-weight:600; font-size:14px; margin-bottom:8px; }

  /* ---------- Cetak / simpan PDF: kop + watermark + info singkat + QR + copyright ---------- */
  .kop-cetak, .kontak-cetak, .hak-cetak, .wm-cetak{ display:none; }
  @media print{
    @page{ size:A4; margin:15mm 14mm 20mm; @bottom-left{ content:"© 2026 Fanny Yu. All rights reserved. · fanny-yu.vercel.app"; font:7pt "Space Mono", monospace; color:#777; text-align:left; width:70%; }
      @bottom-right{ content:"Halaman " counter(page) " dari " counter(pages); font:7pt "Space Mono", monospace; color:#777; text-align:right; } }
    :root, :root[data-theme="light"]{ --ink:#161310; --paper:#fff; --paper-alt:#fff; --gold:#96772C; --gold-deep:#7A5E22; --line:rgba(22,19,16,.16); --line-strong:rgba(22,19,16,.4); --nt:#3F6A93; --ok:#2E7A45; --terra:#B25A36; --err:#B3412C; --on-ink:#fff; }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body{ background:#fff; color:#161310; font-size:10pt; line-height:1.45; }
    .wrap{ max-width:none; padding:0; }
    .toolbar-fixed, #ov, .deco-strip, footer, #v-intro, #v-anak, .no-print, .lompat, #v-dewasa .staff, #v-dewasa > .eyebrow, #kirimStatus, .info-link, .lompat-wrap, .panel-menit, .rm-chev, .rm-aksi, .btn-atas, .pop-ov, .logo-pojok, .logo-bar{ display:none !important; }
    .kop-cetak{ display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--gold); padding-bottom:10px; margin-bottom:14px; }
    .kop-logo{ width:58px; height:auto; flex:none; }
    .kop-teks{ display:flex; flex-direction:column; flex:1; font-size:9pt; color:#444; }
    .kop-teks b{ font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:17pt; color:#161310; line-height:1.1; }
    .kop-judul{ display:flex; flex-direction:column; text-align:right; font-size:9pt; color:#444; }
    .kop-judul b{ font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:12pt; color:#161310; }
    .wm-cetak{ display:block; position:fixed; left:50%; top:52%; width:360px; transform:translate(-50%, -50%); opacity:.1; z-index:-1; }
    .hasil-kotak{ background:transparent; }   /* transparan supaya watermark terlihat; kotak boleh pindah halaman, isinya tidak dipotong */
    .ringkasan, .meter, .baris, .grafik, .cara-baca, .kontak-cetak, .catatan, .gb, .callout, .pk{ break-inside:avoid; background:transparent; }
    .kop-cetak a, .hak-cetak a{ color:inherit; text-decoration:none; }
    .hasil-kotak{ border-color:#bbb; }
    .chart{ max-width:430px; }
    .cara-baca{ background:transparent; }
    .grafik-duo{ display:flex; gap:14px; align-items:flex-start; break-inside:avoid; }
    .grafik-duo .grafik{ flex:1; min-width:0; }
    .grafik-duo .chart{ max-width:none; }
    .grafik-duo .chart text{ font-size:10.5px; } .grafik-duo .chart .jud{ font-size:9px; } .grafik-duo .chart .ket{ font-size:9px; } .grafik-duo .chart .nilai{ font-size:9.5px; }
    .grafik-duo .cara-baca{ font-size:8.5pt; padding:6px 9px; }
    .grafik-duo .leg{ font-size:7.5pt; gap:2px 10px; }
    .ringkasan{ border-color:var(--gold); }
    .ringkasan::after, .kartu::after, .anak::after{ display:none; }
    .sesi-judul{ break-after:avoid; break-inside:avoid; margin-top:14px; }
    .hasil-kotak{ padding:14px; margin-bottom:12px; }
    ul.rumah li{ padding-top:7px; padding-bottom:7px; }
    .chart text{ fill:#000; } .chart .bar{ fill:#96772C; }
    .kontak-cetak{ position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; border:1.5pt solid var(--gold); border-top-width:4pt; background:rgba(150,119,44,.08); padding:14px 16px; margin:14px 0 12px; font-size:9.5pt; color:#222; }
    .kc-clef{ position:absolute; left:-8px; bottom:-34px; font-family:"Noto Music", serif; font-size:120pt; line-height:1; color:var(--gold); opacity:.12; }
    .kc-isi{ position:relative; flex:1; }
    .kc-eyebrow{ font:700 8.5pt "Space Mono", monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); }
    .kc-judul{ font-family:"Fraunces", Georgia, serif; font-size:17pt; line-height:1.15; margin:3px 0 6px; color:#161310; }
    .kc-isi p{ margin:0 0 7px; }
    .kc-btn{ display:inline-block; padding:6px 12px; border:1px solid var(--gold); font:700 8.5pt "Space Mono", monospace; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; margin:2px 6px 2px 0; }
    .kc-btn.isi{ background:var(--gold); color:#fff; }
    .kc-btn.garis{ color:var(--gold-deep); }
    .kc-tentang{ font-size:8.5pt; color:#444; margin:8px 0 0 !important; }
    .kontak-cetak .qr-kotak{ position:relative; flex:none; text-align:center; font-size:7.5pt; color:#555; }
    .kontak-cetak .qr{ display:block; width:96px; height:96px; margin:0 auto 3px; }
    .hak-cetak{ display:block; margin:12px 0 0; padding-top:8px; border-top:1px solid var(--gold); font-size:8pt; color:#555; }
  }

  /* ---------- Mode pengajar (?edit=1) ---------- */
  .guru{ border-color:var(--gold); }
  .guru h3{ font-size:18px; margin:8px 0 4px; }
  .guru-daftar{ list-style:none; margin:10px 0 8px; padding:0; display:flex; flex-direction:column; gap:8px; max-height:440px; overflow:auto; }
  .guru-daftar li{ border:1px solid var(--line); background:var(--paper); padding:10px 12px; }
  .guru-daftar .nm{ font-weight:600; }
  .guru-daftar .sub{ font-size:13.5px; opacity:.82; font-weight:400; }
  .guru-daftar .tag{ display:inline-block; font-family:"Space Mono", monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line-strong); padding:1px 6px; margin-left:6px; }
  .guru-aksi{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .guru-aksi .btn{ padding:9px 12px; font-size:11.5px; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

  /* ---------- Hasil interaktif: penjelasan meter, perkembangan, link hasil ---------- */
  .tanya{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink); font:700 12px "Space Mono", monospace; cursor:pointer; padding:0; margin-left:auto; flex:none; align-self:center; }
  @media (hover:hover){ .tanya:hover{ border-color:var(--gold); color:var(--gold); } }
  .tanya[aria-expanded="true"]{ border-color:var(--gold); color:var(--gold); }
  .meter-info{ font-size:13.5px; background:var(--paper); border-left:3px solid var(--c); padding:8px 10px; margin:10px 0 0; }
  .meter-jalur i{ transition:left .9s cubic-bezier(.2,.8,.2,1); }
  @media (prefers-reduced-motion:reduce){ .meter-jalur i{ transition:none; } }
  .lompat-wrap{ position:sticky; top:0; z-index:20; background:var(--paper); display:flex; align-items:center; gap:8px; padding:8px 0; margin:0 0 14px; border-bottom:1px solid var(--line); }
  .lompat-wrap .lompat{ flex:1; min-width:0; }
  .lompat a{ padding:9px 10px; }
  .theme-toggle.tema-bar{ flex:none; width:40px; height:40px; opacity:.85; }
  body:has(#v-dewasa:not([hidden]) .lompat-wrap) .toolbar-fixed{ display:none; }
  .lompat a.aktif{ border-color:var(--gold); color:var(--gold); }
  .link-hasil{ margin-top:8px; font-size:13.5px; word-break:break-all; }
  .riwayat{ list-style:none; margin:0; padding:0; }
  .riwayat li a{ display:grid; grid-template-columns:150px 1fr auto; gap:10px; align-items:center; padding:10px 4px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); font-size:14px; }
  .riwayat li:first-child a{ border-top:0; }
  .riwayat li.ini a{ background:var(--paper); font-weight:600; }
  @media (hover:hover){ .riwayat li a:hover .rw-tgl{ color:var(--gold); } }
  .rw-bar{ height:10px; background:var(--line); border-radius:5px; overflow:hidden; }
  .rw-bar i{ display:block; height:100%; background:var(--gold); }
  .rw-teks{ font-size:13px; opacity:.85; white-space:nowrap; }
  @media (max-width:520px){ .riwayat li a{ grid-template-columns:1fr auto; } .riwayat li a .rw-bar{ grid-column:1 / -1; order:3; } }
  @media print{ [data-tip]::after{ display:none; } .tanya, .meter-info{ display:none !important; } .riwayat li a{ color:#161310; } }

  /* tombol terang/gelap, sama seperti website utama */
  .toolbar-fixed{ position:fixed; top:16px; right:16px; z-index:60; }
  .eyebrow-baris{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .logo-kiri{ flex:none; display:block; width:46px; height:46px; border-radius:50%; overflow:hidden; background:#FAF3E8; border:1px solid var(--gold); transition:transform .18s; }
  .logo-kiri img{ width:100%; height:100%; object-fit:contain; padding:3px; display:block; }
  @media (hover:hover){ .logo-kiri:hover{ transform:scale(1.08); } }
  .logo-pojok, .logo-bar{ display:block; flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; background:#FAF3E8; border:1px solid var(--gold); transition:transform .18s; }
  .logo-pojok{ position:fixed; top:16px; right:16px; z-index:60; } .logo-bar{ width:40px; height:40px; }
  .logo-pojok img, .logo-bar img{ width:100%; height:100%; object-fit:contain; padding:3px; display:block; }
  @media (hover:hover){ .logo-pojok:hover, .logo-bar:hover{ transform:scale(1.08); } }
  .hero-hasil{ margin-bottom:16px; }
  @media print{ .hero-hasil .hero-clef, .hero-hasil .hero-notes{ display:none; } .hero-hasil{ background:none !important; border:0 !important; padding:0 !important; } }
  .theme-toggle{ border-radius:50%; border:1px solid var(--line-strong); background:var(--paper-alt); color:var(--gold); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; width:44px; height:44px; opacity:.5; transition:opacity .18s, border-color .18s; }
  .theme-toggle:hover, .theme-toggle:focus-visible{ opacity:1; border-color:var(--gold); outline:none; }
  .theme-toggle svg{ width:20px; height:20px; }
  .theme-toggle .bulb-rays{ opacity:0; transition:opacity .2s; }
  .theme-toggle .bulb-glass{ fill:none; transition:fill .2s; }
  :root:not([data-theme="light"]) .theme-toggle .bulb-rays{ opacity:1; }
  :root:not([data-theme="light"]) .theme-toggle .bulb-glass{ fill:#C6A253; fill-opacity:.3; }
  /* footer, sama seperti website utama */
  .deco-notes{ position:absolute; inset:0; z-index:0; pointer-events:none; }
  .deco-notes b{ position:absolute; left:var(--x); top:var(--y); display:inline-block; font-family:"Noto Music", serif; font-size:var(--s, 24px); line-height:1; color:#C6A253; opacity:0.15; transform:rotate(var(--r, 0deg)); font-weight:400; }
  .deco-strip{ position:relative; max-width:640px; margin:0 auto; height:clamp(80px, 13vw, 130px); }
  @media (max-width:600px){ .deco-strip{ height:70px; } .wrap{ padding-top:64px; } }
  footer{ padding:32px 20px 48px; text-align:center; }
  footer .label{ font-family:"Space Mono", monospace; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--line-strong); }
  footer .copyright{ display:block; margin-top:8px; font-family:"Space Mono", monospace; font-size:0.68rem; color:var(--line-strong); }
  footer .foot-social{ display:flex; justify-content:center; gap:16px; margin-top:18px; }
  footer .foot-social a{ color:var(--line-strong); display:flex; transition:color 0.15s ease; }
  footer .foot-social svg{ width:20px; height:20px; }
  @media (hover:hover){ footer .foot-social a:hover{ color:var(--gold); } }


  /* B28: link pribadi yang sudah dipakai, kotak urutan bisa diklik, ikon bisa diklik, stopwatch, tema di layar tes */
  .info-link .il-ctt{ margin:8px 0 0; }
  .info-link .il-btn{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .info-link .il-btn .btn{ padding:9px 14px; font-size:13px; text-decoration:none; }
  .langkah span{ cursor:pointer; user-select:none; }
  .langkah span:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .lencana.bisa-klik{ cursor:pointer; transition:transform .18s; }
  .lencana.bisa-klik:hover, .lencana.bisa-klik:focus-visible{ transform:scale(1.07); outline:none; }
  .lencana.bisa-klik:active{ transform:scale(.95); }
  .g-waktu{ display:flex; align-items:center; gap:6px; font-family:"Space Mono", monospace; font-size:13px; color:var(--ink); opacity:.75; flex:none; }
  .g-waktu[hidden]{ display:none; }
  .g-waktu svg{ width:22px; height:22px; }
  .g-waktu circle{ fill:none; stroke-width:4; }
  .g-waktu .dasar{ stroke:var(--line-strong); }
  .g-waktu .isi{ stroke:var(--gold); transition:stroke-dasharray .3s linear; }
  .theme-toggle.tema-ov{ flex:none; width:32px; height:32px; opacity:.9; }
  .theme-toggle.tema-ov svg{ width:16px; height:16px; }
  .toolbar-fixed .theme-toggle{ opacity:.9; }
  #dlgTidak[hidden]{ display:none; }

  /* B28 halaman hasil: rincian terlipat, hasil pribadi terpisah dari penjelasan umum, pola fokus, jawaban garis */
  .lipat-isi, .lipat-isi .meter-jalur, .lipat-isi .meter-judul{ cursor:auto; }
  .lipat-isi .meter-jalur, .lipat-isi .meter-judul{ cursor:pointer; }
  .sesi-hasil{ margin:3px 0 0; font-size:14px; color:var(--gold); font-weight:600; }
  .lipat-lbl{ flex:none; font:11.5px "Space Mono", monospace; letter-spacing:.04em; border:1px solid var(--line-strong); padding:3px 8px; white-space:nowrap; opacity:.85; }
  .lipat-lbl::after{ content:"Tutup"; }
  .sesi-judul.tutup .lipat-lbl{ border-color:var(--gold); color:var(--gold); opacity:1; }
  .sesi-judul.tutup .lipat-lbl::after{ content:"Buka rincian"; }
  .sesi-judul.lipat:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  .lipat-tutup{ display:block; margin:16px auto 0; }
  .meter-hasil{ margin:8px 0 0; font-size:14.5px; }
  .meter-hasil .bintang{ color:var(--gold); white-space:nowrap; }
  .meter-info h4{ color:var(--c); opacity:1; margin:10px 0 3px; font:700 11.5px "Space Mono", monospace; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
  .meter-info h4:first-child{ margin-top:0; }
  .pola-kotak, .jawab-garis{ border-left:4px solid var(--gold); background:rgba(198,162,83,.1); padding:10px 14px; margin:12px 0; }
  .pola-kotak h3, .jawab-garis h3{ margin:0 0 6px; font-size:15.5px; }
  .pola-kotak p, .jawab-garis p{ margin:0 0 6px; font-size:14.5px; }
  .jawab-garis ul{ margin:0 0 6px; padding-left:18px; font-size:14.5px; }
  .jawab-garis .jg-ya{ color:var(--ok); font-weight:600; white-space:nowrap; }
  .jawab-garis .jg-beda{ color:var(--terra); font-weight:600; white-space:nowrap; }
  @media (max-width:420px){ .sesi-judul.lipat{ gap:8px; } .sesi-judul.lipat .lencana.mini{ width:34px; height:34px; } }
  @media print{ .pola-kotak, .jawab-garis{ break-inside:avoid; background:transparent; } }

  /* Jeda permainan 2 dan 3; jarak tombol "?" ke bar di HP */
  .jeda-umum[hidden]{ display:none; }
  @media (max-width:560px){ .meter-judul{ margin-bottom:14px; row-gap:6px; } }

  .emas{ color:var(--gold); } .info-ul{ margin:2px 0 0; padding-left:18px; } .info-ul li{ margin:0 0 4px; } .kontak-box[data-wa]{ cursor:pointer; }

  .g-knob{ position:absolute; top:50%; left:0; width:18px; height:18px; margin-top:-9px; border-radius:50%; background:var(--gold); border:3px solid var(--paper); box-shadow:0 0 0 2px var(--gold), 0 0 12px 3px rgba(233,168,0,.75); transition:left .3s linear, transform .3s linear; }
  .g-knob[hidden], .g-pct[hidden]{ display:none; }
  .g-pct{ font:700 12px "Space Mono", monospace; min-width:34px; text-align:right; opacity:.8; flex:none; }
  .g-area{ position:relative; }
  .g-ring{ position:absolute; top:50%; left:50%; width:min(70vmin, 310px); height:min(70vmin, 310px); transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
  .g-ring.on{ opacity:1; }
  .g-ring svg{ width:100%; height:100%; display:block; }
  .g-ring circle{ fill:none; stroke-width:5; }
  .g-ring .dsr{ stroke:var(--line-strong); opacity:.5; }
  .g-ring .gerak{ stroke:var(--ink); opacity:.75; stroke-linecap:round; }
  .g-fb.telat{ color:var(--ink); opacity:.7; }
  #ov:fullscreen{ width:100vw; height:100vh; height:100dvh; }
  .langkah{ white-space:nowrap; }

  .langkah{ flex-wrap:nowrap; } .langkah span{ flex:1 1 auto; text-align:center; white-space:nowrap; min-width:0; display:flex; align-items:center; justify-content:center; }
  .ov-waktu{ font:700 12px "Space Mono", monospace; opacity:.75; align-self:center; white-space:nowrap; } .ov-waktu[hidden]{ display:none; }
  .hint.habis, .hint.habis .emas{ color:#8a8a8a; }
  :root:not([data-theme="light"]) #nDengar:disabled{ background:#6b6b6b; border-color:#6b6b6b; color:#fff; opacity:1; }
  @media (max-width:420px){ .langkah span{ padding:3px 5px; } .ov-aksi{ gap:5px; } }

  .kipas svg{ touch-action:none; }

  #dlgTeks{ text-align:center; }

  .tema-bar{ text-decoration:none; } a.tema-bar svg{ width:20px; height:20px; }
  #dewasaIsi{ position:relative; }
  #v-dewasa .staff{ position:absolute; left:0; right:0; top:60px; height:260px; margin:0; opacity:.22; z-index:0; pointer-events:none; }
  #v-dewasa .ringkasan, #v-dewasa .lompat-wrap{ position:relative; z-index:1; } #v-dewasa .lompat-wrap{ position:sticky; }
  #v-dewasa .ringkasan{ background:transparent; }
  @media (max-width:480px){ .lompat-wrap{ gap:5px; } .theme-toggle.tema-bar{ width:34px; height:34px; } .lompat-wrap .lp{ display:none; } }

  .gelas .air2{ fill:var(--nt); opacity:.3; }
  .ik-telinga{ width:1.1em; height:1.1em; vertical-align:-.15em; margin-left:6px; color:var(--gold); }
  .bisa-info{ cursor:pointer; }
  @media (prefers-reduced-motion:no-preference){
    .gelas .ombak{ animation:ombakG 2.6s linear infinite; } .gelas .ombak2{ animation:ombakG2 3.8s linear infinite; }
    .gelas .air-naik{ animation:airNaik 4.2s ease-in-out infinite alternate; }
  }
  @keyframes ombakG{ from{ transform:translateX(0); } to{ transform:translateX(-30px); } }
  @keyframes ombakG2{ from{ transform:translateX(-30px); } to{ transform:translateX(0); } }
  @keyframes airNaik{ from{ transform:translateY(0); } to{ transform:translateY(-6px); } }

  .ik-pintu{ width:15px; height:15px; vertical-align:-3px; margin-right:3px; } #ov .tema-bar{ width:32px; height:32px; opacity:.9; } #ov .tema-bar svg{ width:18px; height:18px; }
  @media (max-width:480px){ .ov-bar{ gap:6px; padding:4px 8px; } .langkah{ gap:3px; font-size:9px; letter-spacing:0; } .langkah span{ padding:3px 4px; } .ov-aksi{ gap:4px; align-items:center; } .ov-aksi .kecil{ padding:5px 7px; font-size:11px; } .ov-waktu{ font-size:10px; } #ov .tema-bar{ width:28px; height:28px; } }

  .rm-ul{ margin:8px 0 4px; padding-left:20px; } .rm-ul li{ margin:0 0 6px; } .rm-sub{ margin:10px 0 2px; font-weight:700; color:var(--c); }
  .hero-clef{ right:16%; top:.34em; } @media (max-width:600px){ .hero-clef{ right:10%; top:.34em; } }  /* glyph kunci G menjulang ~0.34em di atas kotaknya; digeser supaya ujung atasnya sejajar atas logo, tidak tertutup ikon beranda dan terang/gelap */

  /* jawaban per soal Telinga Musik */
  .jawab-nada{ border-left:4px solid var(--nt); background:rgba(127,163,199,.1); padding:10px 14px; margin:12px 0; }
  .jawab-nada h3{ margin:0 0 6px; font-size:15.5px; }
  .jn-kecil{ margin:0 0 8px; font-size:13px; opacity:.85; }
  details.jn{ margin:0 0 8px; }
  details.jn summary{ display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font-size:14.5px; }
  details.jn summary::-webkit-details-marker{ display:none; }
  details.jn[open] .rm-chev{ transform:rotate(-135deg); }
  .jn-skor{ margin-left:auto; font-family:"Space Mono", monospace; font-size:12px; opacity:.85; }
  .jn-daftar{ list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:6px 14px; }
  .jn-baris{ display:flex; align-items:center; gap:8px; font-size:13.5px; line-height:1.35; padding:4px 6px; border-radius:6px; break-inside:avoid; }
  .jn-baris.salah{ background:rgba(179,65,44,.1); }
  .jn-svg{ flex:none; width:52px; height:34px; }
  .jn-svg.lebar{ width:112px; height:34px; }
  .jn-no{ font:700 8px "Space Mono", monospace; fill:currentColor; opacity:.7; }
  .jn-pilih{ stroke-width:3; } .jn-ok{ stroke:var(--ok); } .jn-salah{ stroke:var(--err); }
  .jn-garis{ fill:none; stroke:currentColor; stroke-width:.8; opacity:.35; }
  .jn-titik{ fill:var(--gold); } .jn-beda{ fill:none; stroke:var(--err); stroke-width:1.8; }
  .jn-oktitik{ fill:var(--ok); } .jn-salahtitik{ fill:var(--err); }
  .jn-tanda.ya{ color:var(--ok); font-weight:600; white-space:nowrap; }
  .jn-tanda.tdk{ color:var(--err); font-weight:600; }
  .jn-ringkas{ margin:8px 0 0; font-size:14px; } .jn-ringkas ul{ margin:4px 0 0; padding-left:18px; } .jn-ringkas li{ margin:0 0 3px; }
  @media print{ .jawab-nada{ break-inside:auto; background:transparent; } }

  /* Ingatan Visual */
  #lk4{ border-style:dashed !important; }
  .ig-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; max-width:340px; margin:14px auto; }
  .ig-b{ aspect-ratio:1; min-height:84px; border-radius:18px; border:3px solid var(--w); background:transparent; color:var(--w); font-size:clamp(40px, 14vw, 60px); line-height:1; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .12s, transform .12s, box-shadow .12s; font-family:inherit; }
  .ig-b:disabled{ cursor:default; opacity:.9; }
  .ig-b.nyala{ background:var(--w); color:#fff; transform:scale(1.06); box-shadow:0 0 22px var(--w); }
  .ig-svg{ flex:none; width:64px; height:43px; }
  .ig-sel{ fill:none; stroke:currentColor; stroke-width:1; opacity:.3; }
  .ig-aktif{ fill:var(--gold); stroke:none; } .ig-benar{ fill:var(--ok); stroke:none; } .ig-salah{ fill:var(--err); stroke:none; }
  .ig-teks{ font:700 11px "Space Mono", monospace; fill:#fff; }
  .ig-jawab .jn-baris{ flex-wrap:wrap; }
  @media (prefers-reduced-motion:reduce){ .ig-b{ transition:none; } }

  /* pilih satu dari dua hasil di hari yang sama (B11) */
  .pilih-hasil{ margin:12px 0 4px; padding:12px 14px; border:1px solid var(--gold); background:rgba(198,162,83,.08); text-align:left; }
  .pilih-hasil h3{ margin:0 0 4px; font-size:16px; } .pilih-hasil p{ margin:0 0 8px; font-size:14px; }
  .ph-kolom{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; }
  .ph{ border:1px solid var(--line-strong); padding:10px 12px; background:var(--paper-alt); }
  .ph h4{ margin:0 0 2px; font-size:14px; } .ph-waktu{ font-size:12.5px; opacity:.8; }
  .ph-isi p{ margin:0 0 5px; font-size:13px; } .ph .btn{ padding:10px 14px; font-size:12px; }
  @media print{ .pilih-hasil{ display:none; } }

  /* Ajak teman tes (QR) dan simpan hasil umum */
  .ajak-url{ display:flex; gap:8px; margin:8px 0 10px; } .ajak-url input{ flex:1; min-width:0; padding:8px 10px; font:inherit; font-size:13px; background:var(--paper-alt); color:var(--ink); border:1px solid var(--line-strong); }
  .ajak-qr{ width:min(220px, 70vw); margin:6px auto 8px; } .ajak-qr .qr{ width:100%; height:auto; display:block; }
  .cek{ display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.45; cursor:pointer; text-align:left; } .cek input{ margin-top:3px; flex:none; }

  /* Bagikan hasil (B10) */
  .bagikan-ov .pop-kotak{ width:min(520px, 100%); text-align:left; }
  .bg-untuk{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
  .bg-chip{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); padding:7px 12px; font:inherit; font-size:13.5px; cursor:pointer; }
  .bg-chip.on{ background:var(--gold); border-color:var(--gold); color:var(--on-ink); }
  #bgTeks{ width:100%; box-sizing:border-box; padding:8px 10px; font:inherit; font-size:14px; line-height:1.4; background:var(--paper-alt); color:var(--ink); border:1px solid var(--line-strong); resize:vertical; margin-top:6px; }
  .bg-tombol{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; } .bg-tombol .kecil, .bg-tombol a.kecil{ text-decoration:none; }
  .bg-tombol .kecil:disabled{ opacity:.4; cursor:default; }
  .bg-prev{ margin:8px auto; border:1px solid var(--line-strong); background:#111; } .bg-prev.story{ width:min(200px, 55%); } .bg-prev.feed{ width:min(300px, 80%); } .bg-prev img{ width:100%; display:block; }

/* Bar atas tes: timer di bawah kotak "1 Fokus" di HP, bintang dan not digambar SVG di tengah */
.ov-waktu{ margin-left:auto; }
.g-glyph svg.g-svg{ display:block; width:min(56vmin, 250px); height:min(56vmin, 250px); }
@media (max-width:520px){
  .ov-bar{ flex-wrap:wrap; row-gap:3px; }
  .ov-bar .langkah{ order:1; flex:1 1 100%; }
  .ov-bar .ov-waktu{ order:2; margin-left:0; margin-right:auto; }
  .ov-bar .ov-aksi{ order:3; margin-left:auto; }
}

/* Dialog: tombol rata tengah, di HP ditumpuk sama lebar (tombol emas = lanjut) */
dialog .btns, .g-jeda .btns{ justify-content:center; }
@media (max-width:520px){
  dialog .btns, .g-jeda .btns{ flex-direction:column; align-items:stretch; }
  dialog .btns .btn, .g-jeda .btns .btn{ width:100%; max-width:320px; margin-inline:auto; }
}
/* Jeda: layar setengah transparan supaya progres di belakangnya tetap terbaca */
.g-jeda{ background:rgba(255,255,255,.5); background:color-mix(in srgb, var(--paper) 50%, transparent); }
.g-jeda > div{ background:var(--paper); border:1px solid var(--line-strong); padding:18px 16px; }
/* Bar progres panjang di baris sendiri di HP; baris kedua berisi sisa waktu, level, bintang, tombol */
@media (max-width:640px){
  .g-top{ flex-wrap:wrap; row-gap:8px; }
  .g-top > .g-prog{ order:1; flex:1 1 calc(100% - 64px); min-width:0; }
  .g-top > .g-pct{ order:2; }
  .g-top > :not(.g-prog):not(.g-pct){ order:3; }
  .g-top > .g-stars{ margin-left:auto; }
}

/* Ikon jeda dan berhenti di bar atas tes 2 sampai 4 */
.hud-umum .ikon .lbl{ display:none; }
/* Visual melodi: titik di bagian atas, label (Melodi 1 / Melodi 2) di bawah supaya tidak tertutup */
.n-viz{ height:88px; }
.n-viz-label{ bottom:0; }

/* Baris progres tes 2 sampai 4: bar emas panjang di kiri, jeda dan berhenti di kanan */
.hud-umum{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--line); flex:none; }
.hud-umum[hidden]{ display:none; }
.hud-umum .g-prog{ flex:1; min-width:0; }
.hud-umum .g-prog[hidden]{ display:none; }
.hud-umum .ikon{ margin-left:0; height:38px; min-width:38px; padding:0 9px; }
.hud-umum .g-prog[hidden] + .ikon{ margin-left:auto; }
.hud-umum .ikon svg{ width:18px; height:18px; fill:currentColor; }
#hudBar{ display:block; height:100%; width:0; background:var(--gold); border-radius:4px; }

/* Dialog dan layar jeda: latar 50% supaya posisi tes sebelumnya tetap terlihat */
dialog::backdrop{ background:rgba(0,0,0,.5); }

/* Semua kelompok tombol di layar tes, dialog, dan layar jeda rata tengah */
#ov .btns, dialog .btns, .g-jeda .btns, #v-anak .btns, .pop-kotak .btns{ justify-content:center; }
.btns[hidden]{ display:none; }
/* Ikon tes: tahan lama di HP sama dengan mengetuk, tanpa menu salin atau pilih teks */
.lencana.mini{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; }

/* Layar permainan selesai: tombol berjajar rapi dan tombol tema tidak menempel */
#v-anak .anak{ display:flex; flex-direction:column; align-items:center; }
#v-anak .anak > .btn{ margin-top:10px; }

/* Layar permainan selesai: tombol tema naik dan kotak turun sedikit supaya tidak mepet */
body:has(#v-anak:not([hidden])) .toolbar-fixed{ top:8px; }
#v-anak{ padding-top:14px; }

/* Bar penunjuk geser menu lompat (hasil) */
.lompat-wrap{ position:sticky; }
.lompat-bar{ position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent; pointer-events:none; }
.lompat-bar i{ position:absolute; top:0; height:3px; background:var(--gold); border-radius:2px; transition:left .08s linear, width .15s; }

/* Tombol di bagian bawah halaman hasil: ukuran sama semua */
#v-dewasa > .btns.no-print{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; }
#v-dewasa > .btns.no-print .btn{ display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:10px 14px; margin:0; text-align:center; box-sizing:border-box; }

/* Dialog bagikan: ikon sosial, tombol format sama ukuran */
.bg-sosial{ gap:10px; }
.bg-ikon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0; }
.bg-ikon svg{ width:22px; height:22px; }
.bg-tombol .kecil svg{ width:16px; height:16px; margin-right:6px; vertical-align:-3px; flex:none; }
.bg-ikon svg{ margin:0; }
.bg-tombol .kecil{ display:inline-flex; align-items:center; justify-content:center; }
.bg-fmt{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bg-fmt .kecil{ width:100%; min-height:46px; padding:8px 10px; }
.bg-fmt .kecil span{ line-height:1.25; }

/* Tombol ke bawah di baris logo paling atas halaman hasil */
#v-dewasa .eyebrow-baris{ position:relative; }
#v-dewasa .eyebrow-baris .lompat-bawah{ position:absolute; top:4px; right:0; }

/* Salah ketuk not biru: not jadi abu-abu dan bergetar (kebalikan dari bintang yang meledak emas) */
.g-glyph.salah, .g-glyph.n.salah, .g-glyph.t.salah{ color:#8a8a8a; animation:glifSalah .5s ease-out both; }
@keyframes glifSalah{ 0%{ transform:translateX(0) scale(1); } 15%{ transform:translateX(-12px) scale(.97); } 35%{ transform:translateX(10px) scale(.95); } 55%{ transform:translateX(-7px) scale(.93); } 75%{ transform:translateX(4px) scale(.92); } 100%{ transform:translateX(0) scale(.92); opacity:.65; } }
@media (prefers-reduced-motion:reduce){ .g-glyph.salah{ animation:none; opacity:.65; } }

/* Menu lompat hasil: geser dengan jari atau mouse tanpa memicu seret tautan atau gulir halaman */
.lompat a{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
.lompat{ overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; }

/* Tip ikon di kotak Kesimpulan: dipasang relatif ke barisnya (bukan ke tiap ikon) supaya tidak terpotong tepi kotak */
.rk-ikon{ position:relative; }
.rk-ikon a[data-tip]{ position:static; }
.rk-ikon a[data-tip]::after{ top:calc(100% + 6px); bottom:auto; left:0; right:auto; transform:none; max-width:calc(100vw - 64px); white-space:normal; }

/* Menu navigasi hasil harus di atas kotak Kesimpulan saat digulir (sebelumnya sama-sama z-index 1, jadi isi kotak terlihat menembus menu) */
#v-dewasa .lompat-wrap{ position:sticky; z-index:30; }

/* Keterangan folder spam di bawah status salinan email */
.info-link .il-spam{ margin-top:6px; font-size:13px; font-style:italic; color:var(--gold-deep); }

/* Bar atas halaman tes: ikon beranda di kiri tombol terang/gelap */
.toolbar-fixed{ display:flex; align-items:center; gap:8px; }

/* Not dekor hero: tinggal di sisi kiri (maks. 41%), jalur kanan dipakai kunci G supaya tidak bertabrakan */
/* Not dekor menyebar sampai bagian bawah hero (sebelum kotak Alat bantu mengajar); posisi vertikal dalam persen tinggi hero */
.hero-notes{ height:auto; bottom:0; }
.hero-hasil .hero-notes{ height:100px; bottom:auto; }
.hero-hasil .hero-notes b:nth-child(n+4){ display:none; }
/* Nama permainan di daftar "Isi tes": emas, bisa diklik untuk penjelasan */
.isi-info{ background:none; border:0; padding:0; margin:0; font:inherit; font-weight:inherit; color:var(--gold); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; cursor:pointer; }
.isi-info:hover, .isi-info:focus-visible{ text-decoration-style:solid; outline:none; }
.emas{ color:var(--gold); }

/* Judul "Data dan privasi": ikon gembok (bukan not); judul FAQ berwarna emas supaya mudah dibedakan dari butir pertanyaan */
.isi h2.h-gembok::before{ content:""; display:inline-block; width:.8em; height:.8em; margin-right:8px; vertical-align:-.05em; background:var(--gold); font-size:1em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2 0h6V7a3 3 0 0 0-6 0zm3 4.2a1.7 1.7 0 0 0-.9 3.1V19h1.8v-1.7a1.7 1.7 0 0 0-.9-3.1z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2 0h6V7a3 3 0 0 0-6 0zm3 4.2a1.7 1.7 0 0 0-.9 3.1V19h1.8v-1.7a1.7 1.7 0 0 0-.9-3.1z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat; }
.isi h2.h-faq{ color:var(--gold); }
details.faq summary{ font-weight:500; }

/* Jawaban Meniru ketukan: kolom tidak lebih lebar dari kotak (di HP tulisan hijau terpotong) */
.jn-daftar{ grid-template-columns:repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.jn-baris{ min-width:0; }
.jn-teks{ min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.jn-tanda{ display:inline-block; max-width:100%; }

/* Simulasi Ingatan Visual di pop-up penjelasan */
.ig-demo{ max-width:300px; gap:10px; margin:10px auto 8px; }
.ig-demo .ig-b{ cursor:pointer; min-height:66px; font-size:34px; animation:igDemoNyala 7.2s infinite; animation-delay:calc(var(--k) * 1s); }
.ig-demo .ig-b:disabled{ opacity:1; }
.ig-demo .ig-b.tekan{ animation:none; background:transparent; color:var(--w); transform:scale(.93); box-shadow:0 0 0 3px var(--paper-alt), 0 0 0 6px var(--w); }
@keyframes igDemoNyala{
  0%, 10%{ background:var(--w); color:#fff; transform:scale(1.06); box-shadow:0 0 18px var(--w); }
  14%, 100%{ background:transparent; color:var(--w); transform:none; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce){ .ig-demo .ig-b{ animation:none; } }

/* Ikon sosial di dialog Bagikan: tepat di tengah kotak (aturan umum tombol kecil menambah margin kanan pada svg) */
.bg-tombol .bg-ikon{ display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:0; }
.bg-tombol .bg-ikon svg{ display:block; width:22px; height:22px; margin:0; vertical-align:baseline; }