:root{font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;color:#173551;background:#eaf6ff;font-size:16px;--blue:#086bdc;--green:#147447;--yellow:#ffcf40;--muted:#526b81;--line:#d6e6ef;--shadow:0 12px 35px #224b6c12}
*{box-sizing:border-box}body{margin:0;min-width:280px;background:radial-gradient(ellipse at 85% 20%,#d9f6e8 0,transparent 45%),linear-gradient(135deg,#edf8ff,#f7fbff)}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible{outline:3px solid #173551;outline-offset:5px}button{transition:transform .18s,box-shadow .18s,background .18s}button:hover{transform:translateY(-2px)}button:active{transform:translateY(0)}h1,h2,p{margin-top:0}h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;letter-spacing:-.04em;margin-bottom:14px}p{line-height:1.6}button,main{ -webkit-tap-highlight-color:transparent}button{min-height:48px}main:focus{outline:none}[hidden]{display:none!important}.game-shell{max-width:1440px;min-height:100svh;margin:auto;display:flex;flex-direction:column;padding:0 48px}.topbar{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:6px;border:0;background:transparent;font-size:23px;font-weight:900;padding:0}.brand>span:first-child{font-size:30px;margin-right:7px}.brand>span:last-child{color:var(--blue)}.utilities{display:flex;gap:10px}.utility,.nav-button{border:1px solid var(--line);background:#ffffffd9;border-radius:15px;padding:10px 17px;font-size:.875rem;font-weight:700}.utility[aria-pressed=false]#sound{background:#e3edf5}#screen{flex:1;display:flex;flex-direction:column}footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.8125rem;padding:23px 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#326680;margin-bottom:22px}.primary{border:0;background:var(--blue);color:white;box-shadow:0 5px 0 #084c99,0 12px 20px #086bdc25;border-radius:18px;padding:20px 30px;font-weight:800;letter-spacing:.025em;display:inline-flex;align-items:center;justify-content:space-between;gap:38px}.primary:hover{background:#005fc9;box-shadow:0 5px 0 #084c99,0 16px 24px #086bdc30}.subtext{color:var(--muted)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10;background:#173551;color:white;padding:16px 24px;border-radius:16px;box-shadow:var(--shadow);max-width:calc(100% - 32px);width:max-content;font-size:1rem}.navigation{display:flex;gap:10px;margin:10px 0 28px}.nav-button{background:white}.screen-heading{margin-bottom:26px}.screen-heading p{margin-bottom:0}.card-icon{display:grid;place-items:center;background:#eef6ff;border-radius:17px;width:58px;height:58px;font-size:28px;flex-shrink:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Official visual target: assets/reference/makmal-cilik-visual-target.png.
   Reference only: bright lab light, blue frames, yellow branding, tactile controls. */
:root{color:#102650;--blue:#0874da;--green:#187b38;--yellow:#ffd539;--muted:#435d7b;--line:#b7d7f3;--shadow:0 5px 0 #bdd7eb,0 12px 24px #234b7812}
body{background:radial-gradient(ellipse at 88% 12%,#dcf5df 0,transparent 40%),linear-gradient(120deg,#e0f3ff,#f5fbff 48%,#dcefff);background-attachment:fixed}
.brand{color:#075bb9}.brand>span:last-child{color:#735300;background:#ffdb46;padding:3px 6px;border-radius:8px}
.utility{background:linear-gradient(#21a6f3,#0774d8);color:white;border:2px solid #8bd5ff;box-shadow:0 3px 0 #17589a,inset 0 1px 0 #ffffffb0}
.utility[aria-pressed=false]#sound{background:#e6f1fa;color:#294a70;border-color:#afcce4}
.nav-button{border:2px solid #b9dafa;box-shadow:0 3px 0 #bfd5e8;background:linear-gradient(white,#e9f4ff)}
.primary{border:2px solid #8bdbff;background:linear-gradient(#159aee,#0063c8);box-shadow:inset 0 2px 0 #ffffff70,0 5px 0 #074b99,0 12px 20px #086bdc25;text-shadow:0 1px 1px #003e80}
.primary:hover{background:linear-gradient(#0589df,#005bb8)}
.screen-heading{border:3px solid #7ccaff;border-radius:25px;padding:23px 28px;background:linear-gradient(white,#edf6ff);box-shadow:inset 0 0 0 3px #ffffffc0,0 5px 0 #469bdb,0 12px 24px #234b7812}
.screen-heading h1{color:#0b2464}.card-icon{border:2px solid white;box-shadow:0 0 0 2px #c1def5,inset 0 -4px 0 #b1d6f33d;background:linear-gradient(#e8f7ff,#b9ddff)}