:root{color-scheme:dark;--bg:#0d1512;--panel:#16221c;--soft:#1e2e25;--line:#304238;--ink:#f1f0e6;--muted:#a3b3a9;--gold:#e6b85c;--green:#8bb99a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button,a{ -webkit-tap-highlight-color:transparent }[hidden]{display:none!important}.skip{position:fixed;top:-80px;left:20px;z-index:10;padding:12px;background:var(--gold);color:#17221b}.skip:focus{top:12px}.school-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}.navigation{padding:36px 22px 24px;border-right:1px solid var(--line);background:#111c16;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;font-family:Georgia,serif;font-size:23px;line-height:1.2}.brand-mark{color:var(--gold);font-family:'Segoe UI Symbol',serif;font-size:46px}.brand small{display:block;font:9px system-ui;letter-spacing:1.9px;color:var(--muted);margin-top:9px}.nav-label,.eyebrow{font-size:10px;font-weight:750;letter-spacing:2px;color:var(--gold)}.nav-label{margin:46px 12px 14px;color:#7c9686}nav{display:grid;gap:7px}nav a{display:flex;gap:16px;align-items:center;min-height:47px;padding:10px 16px;border:1px solid transparent;border-radius:8px;font-size:14px;color:var(--muted)}nav a span{font-size:23px;width:24px;text-align:center}nav a:hover{background:var(--soft);color:var(--ink)}nav a[aria-current=page]{background:#29382a;color:var(--gold);border-color:#46533a}.nav-note{margin-top:auto;padding:32px 12px 0;font-size:12px;color:var(--green);line-height:1.7}.nav-note p{color:var(--muted);font-size:11px;max-width:170px}.nav-note a{color:var(--ink)}.status-dot{display:inline-block;height:6px;width:6px;border-radius:50%;background:#8bb99a;margin-right:5px}.workspace{min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;border-bottom:1px solid var(--line);padding:18px 42px;font-size:12px;color:var(--muted)}.topbar a{border:1px solid var(--line);border-radius:30px;padding:8px 13px;white-space:nowrap;color:var(--green)}main{max-width:1440px;margin:auto;padding:36px 42px 54px;min-height:calc(100vh - 144px)}main:focus{outline:none}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400}h1{font-size:clamp(32px,3.5vw,53px);line-height:1.12;letter-spacing:-1.2px;margin-bottom:16px}h2{font-size:28px;letter-spacing:-.5px;margin-bottom:12px}h3{font-size:16px;line-height:1.4}.muted,.intro{color:var(--muted);line-height:1.8;font-size:14px}.intro{max-width:680px}.eyebrow{margin-bottom:18px}.page-head{margin-bottom:28px}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:center;padding:36px;border:1px solid #3b4f3c;border-radius:16px;background:radial-gradient(ellipse at 100% 0,#30472f 0,transparent 65%),#18271e;overflow:hidden}.hero h1 em{font-style:normal;color:var(--gold)}.hero .intro{max-width:380px}.hero-actions,.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:11px 17px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#1b2b22;font-size:13px;font-weight:650}.button:hover{border-color:var(--gold);background:#273a2b}.button.primary{background:var(--gold);color:#182117;border-color:var(--gold)}.button.primary:hover{background:#f0c978}.button.danger{border-color:#865b53;color:#ffc2af}.text-link{font-size:13px;color:var(--gold);text-decoration:underline;text-underline-offset:4px}.hero-art{max-width:320px;width:100%;justify-self:center;transform:rotate(-5deg);position:relative}.mini-board{display:grid;width:100%;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1;border:8px solid #46604a;border-radius:5px;box-shadow:0 20px 50px #0006}.mini-board span{display:grid;min-width:0;min-height:0;overflow:hidden;place-items:center;background:#dfd7bd;color:#17251b;font-family:'Segoe UI Symbol',serif;font-size:clamp(16px,2.8vw,36px);line-height:1}.mini-board span.dark{background:#789379}.mini-board .white{color:#fffdf0;text-shadow:0 1px 2px #18261a}.art-caption{display:inline-block;position:absolute;bottom:-12px;left:15px;padding:11px 18px;border:1px solid #677152;background:#1c2a20;border-radius:8px;font-size:12px;transform:rotate(5deg);box-shadow:0 5px 20px #0004;color:var(--gold)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 35px}.stat{padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.stat strong{font:30px Georgia,serif}.stat span{display:block;font-size:12px;color:var(--muted);margin-top:6px}.section-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:30px 0 18px}.section-top h2{margin:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{display:block;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel);transition:border-color .15s,transform .15s}.card:hover{border-color:#698168}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.module-icon{font-family:'Segoe UI Symbol',serif;color:var(--gold);font-size:36px;line-height:1}.tag{font-size:10px;letter-spacing:.3px;border:1px solid #3b5040;padding:5px 9px;border-radius:20px;color:var(--green)}.card h3{margin-bottom:8px}.card p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:18px}.card small{color:var(--muted);font-size:11px}.track{height:5px;border-radius:10px;background:#354238;overflow:hidden;margin:14px 0 10px}.track span{display:block;height:100%;background:var(--gold)}.bottom-note{margin:26px 0 0;padding:20px 24px;background:#19261e;border-left:3px solid var(--gold);font-size:13px;color:var(--muted);line-height:1.7}.lesson-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);background:var(--panel);padding:22px;border-radius:10px;margin:12px 0}.lesson-row:hover{border-color:var(--gold)}.lesson-row h3{margin:0 0 6px}.lesson-row p{margin:0;font-size:12px;color:var(--muted)}.lesson-row .number{font:26px Georgia,serif;color:var(--gold);min-width:35px}.lesson-row .lesson-info{flex:1}.lesson-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr);gap:24px}.reading,.panel{padding:28px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.reading p{font-size:15px;line-height:1.9;color:#c8d3cb}.reading p:last-child{margin-bottom:0}.panel h2{font-size:24px}.quiz{margin-top:22px}.quiz fieldset{border:0;padding:0;margin:0}.quiz legend{font-weight:650;line-height:1.6;margin-bottom:16px}.quiz label{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:8px;margin:9px 0;font-size:14px;line-height:1.5;cursor:pointer}.quiz label:has(input:checked){border-color:var(--gold);background:#2d3826}.quiz input{accent-color:var(--gold);margin-top:4px}.feedback{padding:14px 16px;border-radius:8px;background:#233a2c;color:#c8e9cf;font-size:14px;line-height:1.7;margin-top:18px}.feedback.error{background:#402c25;color:#ffd1bf}.back{display:inline-block;margin-bottom:24px;font-size:12px;color:var(--muted)}.back:hover{color:var(--gold)}.exercise-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,1fr);gap:28px}.training-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;width:100%;max-width:600px;border:6px solid #405c47;border-radius:6px;overflow:hidden}.square{position:relative;border:0;border-radius:0;background:#e5dcc9;color:#172019;display:grid;place-items:center;padding:0;aspect-ratio:1;min-width:0}.square.dark{background:#73917b}.square.selected{box-shadow:inset 0 0 0 4px #d39929}.square.target::after{content:'';position:absolute;width:24%;height:24%;border-radius:50%;background:#12392388}.square .piece{font-family:'Segoe UI Symbol','Noto Sans Symbols 2',serif;font-size:clamp(24px,4vw,53px);line-height:1}.square .piece.white{color:#fffdf5;text-shadow:0 1px 2px #172019}.coord{position:absolute;bottom:3px;left:4px;font-size:9px;font-weight:bold}.board-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:12px}.filters{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.filter{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:20px;padding:9px 15px;font-size:12px}.filter[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}.game-frame{display:block;border:1px solid var(--line);border-radius:12px;width:100%;height:1050px;background:var(--bg)}.progress-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}.progress-list{list-style:none;padding:0;margin:0}.progress-list li{padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}.progress-list li:last-child{border:0}.progress-list .count{float:right;color:var(--gold)}.notice{margin:15px 24px;padding:16px;border:1px solid #9f7f44;background:#332f21;color:#ffe0a2;line-height:1.6;font-size:13px}.file-input{display:block;margin-top:18px;width:100%;font-size:12px;color:var(--muted)}.panel+.panel{margin-top:20px}footer{border-top:1px solid var(--line);padding:24px 42px;display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#91a398}.guide{max-width:820px}.guide h2{margin-top:30px}.guide p,.guide li{color:var(--muted);font-size:14px;line-height:1.9}.guide a{color:var(--gold);text-decoration:underline}.guide ul{padding-left:22px}
@media(min-width:1500px){main{padding-top:48px}.hero{padding:48px}.hero-art{max-width:350px}}
@media(max-width:1100px){.school-shell{grid-template-columns:210px minmax(0,1fr)}.navigation{padding:26px 14px}.brand{font-size:20px}.brand small{font-size:8px}.topbar{padding:18px 25px}main{padding:28px 25px 40px}.hero{padding:26px;gap:22px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{max-width:260px}.lesson-layout,.progress-layout{grid-template-columns:1fr}.exercise-layout{grid-template-columns:minmax(0,1fr) minmax(230px,.8fr)}}
@media(max-width:760px){.school-shell{display:block}.navigation{height:auto;position:static;padding:18px 18px 12px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:23px}.brand-mark{font-size:38px}.nav-label,.nav-note{display:none}nav{display:flex;overflow-x:auto;gap:6px;margin-top:18px;padding-bottom:5px}nav a{flex-shrink:0;min-height:40px;padding:9px 12px;font-size:12px}nav a span{display:none}.topbar{min-height:52px;padding:10px 18px;font-size:10px}.topbar>span{max-width:190px}.topbar a{padding:6px 9px}main{padding:24px 18px 35px}.hero{grid-template-columns:1.15fr 1fr;padding:24px 20px;gap:16px}.hero h1{font-size:33px}.hero .intro{font-size:12px}.hero-actions{gap:12px}.hero-art{max-width:210px}.mini-board{border-width:5px}.mini-board span{font-size:clamp(16px,4vw,28px)}.art-caption{font-size:9px;padding:8px;left:0}.stats{gap:8px;margin-bottom:26px}.stat{padding:16px 12px}.stat strong{font-size:25px}.stat span{font-size:10px}.grid{gap:12px}.card{padding:20px}.exercise-layout{grid-template-columns:1fr}.training-board{max-width:550px;margin:auto}.square .piece{font-size:clamp(25px,8vw,52px)}.game-frame{height:1460px}.section-top h2{font-size:24px}.section-top{gap:10px}.section-top a{font-size:11px}.reading,.panel{padding:22px}footer{padding:22px 18px;font-size:10px}}
@media(max-width:440px){.hero{grid-template-columns:1fr}.hero-art{display:none}.hero h1{font-size:39px}.hero .intro{font-size:14px}.grid{grid-template-columns:1fr}.card-top{margin-bottom:12px}.card{padding:20px}.game-frame{height:1420px}.topbar>span{max-width:170px}.lesson-row{padding:17px}.lesson-row .tag{font-size:9px}.stats .stat{padding:15px 10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.piece-heading{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px;color:var(--gold);font-size:13px}
.piece-catalog .card h2{font-size:25px}.piece-catalog .card-top{flex-wrap:wrap;gap:12px}.piece-catalog .module-icon{font-size:42px}
.piece-demo{min-width:0;padding:22px}.piece-demo .training-board{container-type:inline-size}.piece-demo .square .piece{font-size:clamp(18px,9cqw,52px)}
.square.capture-target::after{content:'';position:absolute;inset:8%;border:4px solid #20432caa;border-radius:50%;pointer-events:none}
.board-legend{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:12px;margin:12px 0 18px}
.mate-banner{border-color:#68734b;background:linear-gradient(110deg,#283a25,#16221c)}
.mate-layout{align-items:start}.mate-layout>div,.mate-layout>aside{min-width:0}.mate-layout .training-board{container-type:inline-size;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr))}.mate-layout .square .piece{font-size:clamp(20px,10cqw,56px)}
.mate-steps{display:flex;gap:8px;list-style:none;padding:0;margin:22px 0}.mate-steps li{flex:1;text-align:center;padding:12px 5px;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:12px}.mate-steps li[aria-current=step]{border-color:var(--gold);color:var(--gold)}.mate-steps li.complete{background:#2c4934;color:#d4efda;border-color:#598565}
.mate-random-note{margin-top:14px;font-size:12px}.mate-history-title{margin-top:26px}.mate-history{padding-left:24px;line-height:2;color:var(--gold);font-variant-numeric:tabular-nums}.mate-history:empty::before{content:'Belum ada langkah.';color:var(--muted);font-size:13px}#mate-solution{border-top:1px solid var(--line);padding-top:16px}#mate-solution summary{cursor:pointer;color:var(--gold);font-size:13px;min-height:32px}#mate-solution-line{line-height:1.8;overflow-wrap:anywhere;font-weight:650}#mate-total{margin:20px 0 0;font-size:12px}