:root{--bg:#111510;--panel:#171c16;--line:#2a3228;--text:#e9eee2;--muted:#919b89;--accent:#c4ee92}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI","Malgun Gothic",sans-serif;font-size:14px}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{color:inherit}header{height:80px;padding:0 36px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:64px;background:#111510} .brand{display:flex;align-items:center;font-size:24px;font-weight:650;letter-spacing:-1px}.brand>span:not(.brand-icon){color:var(--accent)}.brand-icon{background:var(--accent);color:#162018;border-radius:10px;width:34px;height:34px;margin-right:12px;text-align:center;line-height:34px;font-size:28px}.brand small{font-size:9px;letter-spacing:1.5px;font-weight:500;margin-left:16px;color:var(--muted);border-left:1px solid var(--line);padding-left:16px}nav{display:flex;align-self:stretch;gap:30px}nav button{border:0;background:none;color:var(--muted);font-size:13px;padding:0;position:relative}nav .nav-active{color:var(--accent)}nav .nav-active:after{content:"";position:absolute;height:2px;background:var(--accent);left:0;right:0;bottom:0}#saved-count{font-size:10px;margin-left:6px}.repo-link{margin-left:auto;color:var(--muted);font-size:12px}.layout{display:grid;grid-template-columns:212px minmax(0,1fr) 310px;max-width:1800px;margin:auto}.sidebar{padding:35px 20px;border-right:1px solid var(--line);min-height:calc(100vh - 80px)}.eyebrow{font-size:9px;letter-spacing:1.6px;color:var(--muted);font-weight:650;margin:0 0 16px}.sidebar h3{font-size:14px;margin:0 0 26px;font-weight:500}#categories{display:grid;gap:8px}.category{display:flex;align-items:center;gap:10px;border:1px solid transparent;background:none;border-radius:7px;padding:12px;color:#a9b29f;text-align:left;font-size:12px}.category.active{color:var(--accent);background:#23301c;border-color:#34452b}.category .cat-icon{font-size:17px;width:20px}.category .cat-count{margin-left:auto;font-size:10px;color:#798671}.sidebar-note{margin-top:48px;border:1px solid var(--line);border-radius:10px;padding:16px;background:linear-gradient(135deg,#20291b,#151b14)}.sidebar-note>span{display:block;font-size:27px;color:var(--accent);margin-bottom:12px}.sidebar-note strong{font-size:12px;font-weight:500}.sidebar-note p{color:var(--muted);font-size:11px;line-height:1.8;margin-bottom:0}.source-link{display:block;color:var(--muted);font-size:11px;margin-top:24px}main{min-width:0;padding:34px 32px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;min-height:265px;padding-bottom:32px;border-bottom:1px solid var(--line)}.hero .eyebrow{color:var(--accent);font-size:10px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:6px}h1{font-size:clamp(28px,2.7vw,43px);letter-spacing:-2px;line-height:1.35;font-weight:650;margin:20px 0}h1 em{font-style:normal;color:var(--accent)}.hero-copy{color:#a4ae9c;font-size:12px;line-height:1.9}.hero-meta{display:flex;gap:12px;font-size:10px;color:#858f7e;margin-top:22px}.hero-meta span+span:before{content:"·";margin-right:12px}.hero-scene{border:1px solid #34412b;border-radius:12px;background:linear-gradient(150deg,#202b1d,#141b15);overflow:hidden;transform:rotate(-2deg)}.scene-label{padding:16px 16px 0;font-size:8px;color:#92a27f;letter-spacing:2px}.hero-scene svg{width:100%;display:block}.scene-bottom{padding:12px;display:flex;justify-content:space-between;font-size:8px;color:#9aae83;border-top:1px solid #2a3825;letter-spacing:.7px}.scene-bottom span:first-child{color:var(--accent)}.hero-orbit{animation:orbit 7s linear infinite}.section-top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:30px 0 20px}.section-top .eyebrow{font-size:8px;margin-bottom:9px}h2{font-size:20px;margin:0;font-weight:550;letter-spacing:-.5px}h2>span{font-size:11px;vertical-align:middle;color:var(--accent);background:#293421;padding:3px 7px;border-radius:5px;margin-left:7px}.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;padding:10px 12px;gap:8px;width:260px;background:#171c16}.search>span{font-size:22px;color:var(--muted);line-height:1}.search input{min-width:0;width:100%;background:none;border:0;color:var(--text);outline:none;font-size:11px}.search kbd{font-size:10px;color:#64715c;border:1px solid #3a4533;padding:1px 5px;border-radius:3px}.filter-row{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:22px}.chips{display:flex;gap:7px;flex-wrap:wrap}.chips button{background:none;border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:10px;padding:7px 11px}.chips button.active{background:var(--accent);border-color:var(--accent);color:#23321a}.preview-note{font-size:9px;color:#85917b}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel);transition:border-color .2s,transform .2s}.card:hover{border-color:#6a8454;transform:translateY(-3px)}.preview{position:relative;background:#18211b;overflow:hidden;aspect-ratio:1.65}.preview svg{width:100%;height:100%;display:block}.preview .preview-label{position:absolute;left:11px;top:10px;font-size:8px;letter-spacing:1px;color:#c3d4b5;background:#0d160f9e;border:1px solid #ffffff12;padding:4px 6px;border-radius:3px}.save{position:absolute;right:9px;top:9px;border:1px solid #ffffff20;background:#111a14c9;border-radius:5px;width:26px;height:26px;color:#b5c8a6}.save.saved{color:var(--accent);background:#344324}.card-body{padding:14px}.card-category{font-size:8px;color:#9dae8c;margin:0 0 8px}.card-title-row{display:flex;justify-content:space-between;gap:6px}.card h3{font-size:14px;font-weight:500;margin:0 0 4px}.term-en{font-size:10px;letter-spacing:.3px;color:#86997b;margin:0}.card-desc{color:#a3ad9b;font-size:10px;line-height:1.7;margin:12px 0;min-height:34px}.card-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:10px}.details{font-size:10px;border:0;background:none;color:#aebaa1;padding:4px 0}.add{width:27px;height:27px;background:#28351f;color:var(--accent);border:1px solid #405432;border-radius:6px;font-size:18px}.add.selected{background:var(--accent);color:#1c2a15}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);margin-top:35px;padding:22px 0 4px;color:#65735d;font-size:9px}.composer{border-left:1px solid var(--line);padding:32px 22px;position:sticky;top:0;height:100vh;max-height:100vh;overflow:auto;background:#151a13}.composer-heading{display:flex;justify-content:space-between;align-items:center}.composer-heading .eyebrow{font-size:8px}.composer h2{font-size:18px}.composer-heading>span{color:var(--accent);font-size:22px}.muted{color:var(--muted);font-size:11px;line-height:1.7}.selection{min-height:148px;margin:24px 0;border:1px dashed #394630;border-radius:9px;padding:12px;display:flex;align-content:flex-start;gap:7px;flex-wrap:wrap}.selection-empty{text-align:center;width:100%;align-self:center;color:#76886a;font-size:11px;line-height:1.9}.selection-empty span{display:block;font-size:25px;margin-bottom:9px}.selected-chip{display:flex;gap:8px;align-items:center;align-self:flex-start;border:1px solid #415234;background:#293620;color:#d0e6b6;font-size:10px;border-radius:5px;padding:7px}.selected-chip button{border:0;background:none;color:#9cb088;padding:0}.field-label{display:block;font-size:10px;color:#c5cfbb;margin:18px 0 9px}textarea,select{background:#10170f;border:1px solid #34422b;color:#c8d5be;border-radius:7px;padding:11px;font-size:11px;width:100%;outline:none}textarea:focus,select:focus{border-color:var(--accent)}textarea{resize:vertical;line-height:1.7}textarea::placeholder{color:#68755f}.field-row{margin-bottom:22px}.language{display:flex;border-bottom:1px solid var(--line);gap:22px;margin-bottom:18px}.language button{border:0;background:none;font-size:11px;color:#79896c;padding:0 0 11px}.language button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.prompt-box{background:#10160e;border:1px solid #2c3923;border-radius:8px;padding:16px;min-height:158px}.prompt-box .eyebrow{font-size:8px;color:#8fa777}#prompt{font-size:11px;color:#bdc9b3;line-height:1.9;white-space:pre-line;margin-bottom:0}.copy-button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-radius:7px;padding:13px 16px;background:var(--accent);color:#23321a;font-weight:600;font-size:12px;margin-top:17px}.copy-button:disabled{opacity:.4;cursor:default}.clear-button{width:100%;border:0;background:none;font-size:10px;color:#879979;padding:14px}.composer-tip{display:flex;gap:10px;padding-top:22px;border-top:1px solid var(--line);color:#768b67}.composer-tip>span{color:var(--accent);font-size:20px}.composer-tip p{margin:0;font-size:10px;line-height:1.8}.empty{text-align:center;padding:80px 16px;color:var(--muted)}.empty button{border:1px solid #4f6540;color:var(--accent);background:#25331c;border-radius:6px;padding:10px}.empty[hidden]{display:none}dialog{width:min(560px,calc(100% - 32px));padding:0;background:#171f15;color:var(--text);border:1px solid #47583b;border-radius:14px;max-height:90vh}dialog::backdrop{background:#050a05c9;backdrop-filter:blur(5px)}.modal-top{display:flex;justify-content:space-between;align-items:center;padding:17px 22px}.modal-top .eyebrow{margin:0}.modal-top button{background:none;border:0;color:#b8c8ab}.modal-body{padding:24px}.modal-body h2{margin:6px 0 18px}.modal-body>p{line-height:1.9;color:#b6c4aa;font-size:13px}.modal-body h4{margin-top:22px;font-size:12px;color:var(--accent)}blockquote{margin:0;padding:15px;border-left:2px solid var(--accent);background:#222f1b;font-size:12px;line-height:1.8}.modal-body a{display:inline-block;color:var(--accent);font-size:11px;margin-top:20px}.modal-body .detail-note{font-size:10px;color:#819474}.modal-body .term-en{font-size:11px;color:#92a880}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--accent);color:#182613;border-radius:8px;padding:12px 24px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}.motion{transform-box:fill-box;transform-origin:center;animation:move 3s ease-in-out infinite}.orbit{transform-origin:160px 92px;animation:orbit 6s linear infinite}.pulse{animation:pulse 2s ease-in-out infinite}.dash{animation:dash 1.8s ease-in-out infinite}.jump{animation:jump 2.4s ease-in-out infinite}.hit{animation:hit 2s steps(1,end) infinite}.drift{animation:drift 5s linear infinite}.swing{transform-origin:160px 25px;animation:swing 3s ease-in-out infinite}@keyframes move{50%{transform:translateX(42px)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.25}}@keyframes dash{0%,25%,100%{transform:translateX(0)}45%,65%{transform:translateX(95px)}}@keyframes jump{0%,20%,80%,100%{transform:translateY(0)}50%{transform:translateY(-55px)}}@keyframes hit{0%,40%,100%{transform:translateX(0)}45%{transform:translateX(-8px)}55%{transform:translateX(5px)}}@keyframes drift{to{stroke-dashoffset:-60}}@keyframes swing{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}}@media(min-width:1600px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1200px){.layout{grid-template-columns:180px minmax(0,1fr) 280px}main{padding:28px 22px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr}.hero-scene{display:none}.preview-note{display:none}.section-top{align-items:flex-start;flex-direction:column}.search{width:100%}header{gap:30px;padding:0 24px}}@media(max-width:850px){.layout{grid-template-columns:155px minmax(0,1fr)}.composer{grid-column:2;position:static;height:auto;max-height:none;border-top:1px solid var(--line);border-left:0}.sidebar{grid-row:1 / 3}.brand small{display:none}.repo-link{display:none}.hero{min-height:230px}h1{font-size:34px}header{gap:25px}nav{gap:16px}.composer .selection{min-height:90px}}@media(max-width:560px){header{height:68px;padding:0 16px;gap:16px}.brand{font-size:19px}.brand-icon{width:28px;height:28px;font-size:23px;line-height:28px;margin-right:6px}nav{margin-left:auto;gap:14px}nav button{font-size:11px}#saved-count{display:none}.layout{display:block}.sidebar{min-height:0;padding:15px 16px;border-bottom:1px solid var(--line);border-right:0}.sidebar>.eyebrow,.sidebar h3,.sidebar-note,.source-link{display:none}#categories{display:flex;overflow:auto;gap:7px}.category{white-space:nowrap;font-size:10px;padding:8px}.cat-count{display:none}.category .cat-icon{width:14px;font-size:13px}main{padding:25px 16px}.hero{padding-bottom:25px}.hero .eyebrow{font-size:8px}h1{font-size:34px}.hero-copy{font-size:11px}.hero-meta{font-size:9px}.cards{gap:10px}.card-body{padding:11px}.card h3{font-size:12px}.card-desc{font-size:10px;min-height:50px}.card .term-en{font-size:9px}.preview .preview-label{font-size:6px;left:7px;top:7px}.save{width:23px;height:23px;right:6px;top:6px}.chips button{font-size:9px;padding:7px 9px}.composer{padding:26px 20px}footer{flex-direction:column;font-size:8px}}

[hidden]{display:none!important}

/* GameLens light theme */
:root{--bg:#f6f8ff;--panel:#fff;--line:#dfe6f4;--text:#203353;--muted:#74839b;--accent:#3068ca}
header{background:#fff}.brand-icon{background:#ffda57;color:#234576}.brand>span:not(.brand-icon){color:#3068ca}.layout{grid-template-columns:212px minmax(0,1fr) 335px}.sidebar{background:#edf3ff}.category{color:#607594}.category.active{background:#dfebff;color:#285db6;border-color:#bdd2f5}.category .cat-count{color:#7a91b3}.sidebar-note{background:linear-gradient(135deg,#fff5d0,#fffbea);border-color:#f0df9e}.hero-copy{color:#667a97}.hero-meta{color:#7c8da8}.hero-scene{background:linear-gradient(150deg,#e4edff,#f5f8ff);border-color:#cbdcf6}.hero-scene svg{filter:brightness(.72) saturate(.65)}.scene-label,.scene-bottom{color:#5d7da9}.scene-bottom{border-color:#d2dff4}.scene-bottom span:first-child{color:#3469bf}.hero .eyebrow{color:#3269c4}.search{background:#fff}.search kbd{color:#8394af;border-color:#d9e3f3}.chips button{background:#fff;color:#677b9b}.chips button.active{background:#ffe17d;border-color:#ebcb64;color:#5b481b}.card{box-shadow:0 3px 12px #3559980d}.card:hover{border-color:#8baded}.preview{background:#edf3fd}.preview .preview-label{background:#ffffffdb;border-color:#d5e2f6;color:#456b9e}.save{background:#fffdf8e8;border-color:#d2def2;color:#7a91b3}.save.saved{color:#a37b19;background:#fff2bd}.card-category{color:#7d91af}.term-en,.card .term-en{color:#7d91ae}.card-desc{color:#6c7e97}.details{color:#386bbb}.add{background:#e7efff;border-color:#cbdcf6;color:#356cc5}.add.selected{background:#346bd0;color:#fff}.composer{background:#fff}.muted{color:#70829b}.selection{border-color:#d4e0f6;background:#f8faff;min-height:80px;margin:10px 0 18px}.selection-empty{color:#90a2be}.selection-empty span{font-size:20px;margin-bottom:3px}.selected-chip{border-color:#c9dafa;background:#edf3ff;color:#4267a5}.selected-chip button{color:#7892bb}.field-label{color:#526b90}textarea,select{background:#f8faff;border-color:#d6e1f3;color:#29436d}textarea::placeholder{color:#92a2bc}.language button{color:#869ab8}.language button.active{color:#3267bd}.prompt-box{background:#f5f8ff;border-color:#d6e2f7}.prompt-box .eyebrow{color:#7e99bf}#prompt{color:#516d96}.copy-button{background:#336bd1;color:#fff}.clear-button{color:#8299b9}.composer-tip{color:#7d91ae}.composer-tip>span{color:#386cbf}footer{color:#93a4bf}dialog{background:#fff;color:var(--text);border-color:#c9dafa}.modal-top button{color:#7092c2}.modal-body>p{color:#617b9f}.modal-body h4{color:#366cbe}.modal-body a{color:#3468bd}.modal-body .term-en{color:#7b94b7}.modal-body .detail-note{color:#8ba0bd}blockquote{background:#fff8df;border-color:#e6c351}#toast{background:#2e65c3;color:#fff}.empty button{background:#eaf1ff;border-color:#c7d7f1;color:#3769b8}.animation-toggle{border:0;background:none;color:#6887b4;font-size:10px;padding:6px}.recommendations{margin-top:18px}.recommendations h3{font-size:12px;margin:0 0 7px;color:#365c93}.recommendation-help,.suggestion-empty{font-size:10px;line-height:1.7;color:#8299b9}.suggestion-row{border:1px solid #d9e4f7;background:#f8faff;border-radius:7px;padding:11px;margin-top:8px}.suggestion-row strong{font-size:11px;font-weight:600}.suggestion-row p{font-size:10px;line-height:1.65;color:#7e93b2;margin:5px 0 8px}.suggestion-actions{display:flex;gap:8px}.suggestion-actions button{font-size:10px;color:#386bc1;border:1px solid #cedcf4;background:#fff;border-radius:4px;padding:5px 9px}.suggestion-actions button[aria-pressed="true"]{background:#ffeaae}.composer-heading h2{font-size:17px}.composer-heading h2>span{background:#e7efdb;color:#55753f}.game-demo .demo{animation-duration:4.5s;animation-iteration-count:infinite;animation-timing-function:linear}.game-demo .phase-label{opacity:0;animation-timing-function:steps(1,end)}.game-demo .phases-3.phase-0{animation-name:phaseA}.game-demo .phases-3.phase-1{animation-name:phaseB}.game-demo .phases-3.phase-2{animation-name:phaseC}.game-demo .phases-2.phase-0{animation-name:phaseFirst}.game-demo .phases-2.phase-1{animation-name:phaseSecond}.target-side{animation-name:targetSide}.map-walk{animation-name:mapWalk}.iso-walk{animation-name:isoWalk}.camera-orbit{animation-name:orbit;transform-origin:0 0}.hit-attacker{animation-name:hitApproach}.hit-target{animation-name:hitResume}.hit-flash{animation-name:hitFlash}.attack-warning{animation-name:attackWarning}.attack-strike{animation-name:attackStrike}.dodge-unit{animation-name:dodgeUnit}.invincible{animation-name:invincibleWindow}.projectile{animation-name:projectile}.knock-target{animation-name:knockTarget}.dash-run{animation-name:dashRun}.dash-trail{animation-name:dashTrail}.coyote-run{animation-name:coyoteRun}.input-flash{animation-name:inputFlash}.buffer-jump{animation-name:bufferJump}.buffer-input{animation-name:bufferInput}.rope-swing{animation-name:ropeSwing;transform-origin:0 0}.slot-arrive{animation-name:slotArrive;animation-delay:var(--delay)}.formation-move{animation-name:formationMove}.path-follow{animation-name:pathFollow}.vision-cross{animation-name:visionCross}.detected{animation-name:detected}.door-glow{animation-name:doorGlow}.walk-door{animation-name:walkDoor}.arena-walk{animation-name:arenaWalk}.loop-walk{animation-name:loopWalk}.rim-show{animation-name:rimShow}.blade-swing{animation-name:bladeSwing;transform-origin:153px 104px}.trail-show{animation-name:trailShow}.fog-show{animation-name:fogShow}.shock-ring{animation-name:shockRing;transform-origin:0 0}
@keyframes phaseA{0%,32%{opacity:1}33%,100%{opacity:0}}@keyframes phaseB{0%,32%{opacity:0}33%,65%{opacity:1}66%,100%{opacity:0}}@keyframes phaseC{0%,65%{opacity:0}66%,100%{opacity:1}}@keyframes phaseFirst{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes phaseSecond{0%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes targetSide{0%,100%{transform:translateX(-18px)}50%{transform:translateX(28px)}}@keyframes mapWalk{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,15px)}}@keyframes isoWalk{0%,100%{transform:translate(0,0)}50%{transform:translate(58px,-26px)}}@keyframes hitApproach{0%,10%{transform:translateX(0)}33%,66%{transform:translateX(54px)}80%,100%{transform:translateX(0)}}@keyframes hitResume{0%,66%{transform:translateX(0)}75%{transform:translateX(10px)}90%,100%{transform:translateX(0)}}@keyframes hitFlash{0%,32%,67%,100%{opacity:0}33%,66%{opacity:1}}@keyframes attackWarning{0%,10%{opacity:0}15%,63%{opacity:1}66%,100%{opacity:0}}@keyframes attackStrike{0%,65%,82%,100%{opacity:0}66%,78%{opacity:1}}@keyframes dodgeUnit{0%,30%{transform:translateX(0)}45%,65%{transform:translateX(70px)}80%,100%{transform:translateX(115px)}}@keyframes invincibleWindow{0%,32%,66%,100%{opacity:0}33%,65%{opacity:1}}@keyframes projectile{0%,33%{transform:translateX(0);opacity:0}34%{opacity:1;transform:translateX(0)}65%{opacity:1;transform:translateX(-180px)}66%,100%{opacity:0;transform:translateX(-180px)}}@keyframes knockTarget{0%,33%{transform:translateX(0)}50%,86%{transform:translateX(94px)}100%{transform:translateX(0)}}@keyframes dashRun{0%,33%{transform:translateX(0)}44%,93%{transform:translateX(120px)}100%{transform:translateX(0)}}@keyframes dashTrail{0%,32%,50%,100%{opacity:0}34%,44%{opacity:1}}@keyframes coyoteRun{0%,10%{transform:translate(0,0)}33%{transform:translate(49px,4px)}55%{transform:translate(62px,9px)}75%{transform:translate(78px,-57px)}95%,100%{transform:translate(90px,29px)}}@keyframes inputFlash{0%,42%,66%,100%{opacity:0}43%,65%{opacity:1}}@keyframes bufferJump{0%,10%{transform:translateY(0)}50%,65%{transform:translateY(52px)}82%,100%{transform:translateY(-8px)}}@keyframes bufferInput{0%,23%,67%,100%{opacity:0}24%,66%{opacity:1}}@keyframes ropeSwing{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}}@keyframes slotArrive{0%,20%{transform:translateX(38px)}66%,100%{transform:translateX(0)}}@keyframes formationMove{0%,33%{transform:translateX(0)}80%,100%{transform:translateX(95px)}}@keyframes pathFollow{0%,10%{transform:translate(0,0)}33%{transform:translate(0,-60px)}66%{transform:translate(156px,-60px)}90%,100%{transform:translate(156px,-2px)}}@keyframes visionCross{0%,20%{transform:translateY(0)}40%,60%{transform:translateY(55px)}80%,100%{transform:translateY(115px)}}@keyframes detected{0%,32%,66%,100%{opacity:0}33%,65%{opacity:1}}@keyframes doorGlow{0%,35%{opacity:0}50%,100%{opacity:1}}@keyframes walkDoor{0%,50%{transform:translate(0,0)}100%{transform:translate(67px,-27px)}}@keyframes arenaWalk{0%,10%{transform:translate(0,0)}33%{transform:translate(11px,-56px)}66%{transform:translate(84px,-56px)}100%{transform:translate(96px,0)}}@keyframes loopWalk{0%{transform:translate(0,0)}20%{transform:translate(0,-52px)}50%{transform:translate(172px,-52px)}70%{transform:translate(172px,11px)}95%{transform:translate(0,11px)}100%{transform:translate(0,0)}}@keyframes rimShow{0%,44%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}@keyframes bladeSwing{0%,20%{transform:rotate(-45deg)}50%,90%{transform:rotate(45deg)}100%{transform:rotate(-45deg)}}@keyframes trailShow{0%,24%,80%,100%{opacity:0}30%,60%{opacity:1}}@keyframes fogShow{0%,40%{opacity:0}65%,90%{opacity:.85}100%{opacity:0}}@keyframes shockRing{0%,32%{transform:scale(1);opacity:0}33%{transform:scale(1);opacity:1}90%,100%{transform:scale(6);opacity:0}}
@media(max-width:1200px){.layout{grid-template-columns:180px minmax(0,1fr) 320px}.animation-toggle{font-size:9px}}@media(max-width:850px){.layout{grid-template-columns:155px minmax(0,1fr)}}@media(max-width:560px){.layout{display:block}.filter-row{flex-wrap:wrap}.animation-toggle{padding-left:0}.composer-heading h2{font-size:18px}}

.hero-scene svg{filter:none}h2>span{background:#fff0b3;color:#946f16}.composer{max-height:100vh}textarea#idea{min-height:90px}

dialog#detail{width:min(800px,calc(100% - 32px))}
.article-examples{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.article-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.article-heading h3{font-size:16px;margin:0}.article-heading #article-file{margin:0;font-size:10px}.engine-tabs{display:flex;gap:8px;margin:16px 0}.engine-tabs button{border:1px solid #cbdcf6;border-radius:6px;background:#edf4ff;padding:9px 15px;color:#627fa9;font-size:12px}.engine-tabs button[aria-pressed="true"]{background:#336bd1;color:#fff;border-color:#336bd1}#article-status{font-size:10px;color:#8b795d;line-height:1.7}#article-code pre{background:#f2f6ff;border:1px solid #d5e2f6;border-radius:8px;padding:18px;overflow-x:auto;margin:12px 0;tab-size:4}#article-code code{font:12px/1.8 Consolas,"Courier New",monospace;color:#355a93;white-space:pre}.code-copy{border:1px solid #cbdcf6;border-radius:5px;background:#e7efff;color:#3c6cbd;padding:8px 12px;font-size:11px}.code-copy:disabled{opacity:.5}#article-notes{margin-top:20px}#article-notes h3{font-size:12px;color:#3969b1;margin:22px 0 8px}#article-notes p{font-size:12px;line-height:1.9;color:#647d9f;white-space:pre-line}#article-notes a{display:block;overflow-wrap:anywhere;font-size:10px;margin-top:10px}
@media(max-width:560px){#article-code pre{padding:12px}#article-code code{font-size:11px}.article-heading{align-items:flex-start}}
.card-title-link{border:0;background:none;color:inherit;font:inherit;padding:0;text-align:left}.card-title-link:hover{color:#336bd1}#article-structure{background:#fff8df;border-left:3px solid #edcb5c;border-radius:4px;padding:12px 15px;margin-top:12px}#article-structure h3{font-size:11px;color:#9a7b29;margin:0 0 8px}#article-structure p{font-size:12px;line-height:1.8;color:#7f6b36;margin:0}

.animation-status{font-size:9px;color:#7d95b7;margin-left:auto}.selected-count-label{font-size:9px;color:#879fbe;margin-left:5px;font-weight:400}.filter-row{flex-wrap:wrap}

html{scrollbar-gutter:stable}html:has(#detail[open]),body:has(#detail[open]){overflow:hidden;overscroll-behavior:none}#detail{overscroll-behavior:contain}.game-demo .demo,.hero-orbit{animation-play-state:running!important}

/* Dark code editor */
.code-frame{border:1px solid #2a3c59;border-radius:10px;overflow:hidden;margin:14px 0;box-shadow:0 8px 22px #15274818}.code-bar{background:#1c2a40;border-bottom:1px solid #30415c;color:#9fb5d7;font:11px/1.5 Consolas,monospace;letter-spacing:.4px;padding:10px 16px}.code-bar:before{content:"● ● ●";color:#f5cf5a;margin-right:18px;letter-spacing:3px}#article-code .code-frame pre{background:#111d30;border:0;border-radius:0;padding:18px;margin:0;overflow:auto}#article-code .code-frame code{color:#d7e4f7;font-size:12px;line-height:1.85}.syntax-keyword{color:#ba9cff}.syntax-type{color:#73d4dd}.syntax-function{color:#f3d67d}.syntax-string{color:#a6d899}.syntax-number{color:#f3ab7b}.syntax-comment{color:#8295b0;font-style:italic}.brand-icon{background:#ffdb61;color:#2d5595}.copy-button{background:#336bd1;color:white}.hero h1 em{color:#2e66c6}.live-dot{background:#efc440}.hero-scene{box-shadow:0 10px 30px #4779c313}.sidebar-note>span{color:#c6a22e}
.live-light{animation-name:liveLight}.concept-light{animation-name:conceptLight}.offscreen-object{animation-name:offscreenObject}.lost-reflection{animation-name:lostReflection}.occluding-wall{animation-name:occludingWall}@keyframes liveLight{0%,32%,90%,100%{opacity:1}33%,80%{opacity:0}}@keyframes conceptLight{0%,32%,90%,100%{opacity:1}33%,80%{opacity:.15}}@keyframes offscreenObject{0%,30%{transform:translateX(0)}66%,90%{transform:translateX(140px)}100%{transform:translateX(0)}}@keyframes lostReflection{0%,48%,100%{opacity:1}66%,90%{opacity:0}}@keyframes occludingWall{0%,20%,85%,100%{transform:translateY(-85px);opacity:0}33%,66%{transform:translateY(0);opacity:1}}

/* Optional dark theme: blue surfaces and yellow accents */
.theme-toggle{margin-left:auto;border:1px solid #d1dff5;background:#edf3ff;color:#3f6bab;border-radius:7px;padding:8px 12px;font-size:11px;white-space:nowrap}.repo-link{margin-left:0}
html[data-theme="dark"]{color-scheme:dark;--bg:#101827;--panel:#192438;--line:#2b3a52;--text:#e4ecf9;--muted:#98a9c2;--accent:#8fb7ff}
html[data-theme="dark"] header{background:#121d30}
html[data-theme="dark"] .sidebar{background:#141f32}
html[data-theme="dark"] .composer{background:#141f32}
html[data-theme="dark"] .category{color:#a9bddb}
html[data-theme="dark"] .category.active{background:#243b60;border-color:#3c5c87;color:#aaceff}
html[data-theme="dark"] .cat-count{color:#8ba6d0}
html[data-theme="dark"] .sidebar-note{background:linear-gradient(135deg,#2d2b22,#202635);border-color:#58513b}
html[data-theme="dark"] .sidebar-note strong{color:#f2dc95}
html[data-theme="dark"] .hero-copy,html[data-theme="dark"] .card-desc,html[data-theme="dark"] .muted{color:#a9b9d1}
html[data-theme="dark"] .hero h1 em{color:#95bcff}
html[data-theme="dark"] .hero .eyebrow{color:#e2c86e}
html[data-theme="dark"] .hero-meta,html[data-theme="dark"] footer{color:#91a5c3}
html[data-theme="dark"] .hero-scene{background:linear-gradient(150deg,#253c5f,#1b293e);border-color:#39567e}
html[data-theme="dark"] .scene-label,html[data-theme="dark"] .scene-bottom{color:#a6bde0}
html[data-theme="dark"] .scene-bottom{border-color:#39516f}
html[data-theme="dark"] .scene-bottom span:first-child{color:#f1d478}
html[data-theme="dark"] .search,html[data-theme="dark"] .chips button{background:#1a2940;border-color:#354866;color:#aebfdb}
html[data-theme="dark"] .search input{color:#e1eafd}
html[data-theme="dark"] .chips button.active{background:#f0d36f;border-color:#f0d36f;color:#3e341c}
html[data-theme="dark"] .card:hover{border-color:#759ddd}
html[data-theme="dark"] .card-category,html[data-theme="dark"] .term-en,html[data-theme="dark"] .details{color:#9eb9e3}
html[data-theme="dark"] .add{background:#263c5e;border-color:#42648d;color:#b7d4ff}
html[data-theme="dark"] .add.selected{background:#719fee;color:#11203b}
html[data-theme="dark"] .save{background:#233451;border-color:#456185;color:#b7cdec}
html[data-theme="dark"] .save.saved{background:#574b26;border-color:#877344;color:#ffdf7b}
html[data-theme="dark"] h2>span{background:#4e4429;color:#f2d477}
html[data-theme="dark"] .field-label,html[data-theme="dark"] .recommendations h3{color:#cad9f0}
html[data-theme="dark"] textarea,html[data-theme="dark"] select,html[data-theme="dark"] .selection{background:#101b2d;border-color:#354764;color:#ccdcf4}
html[data-theme="dark"] .selected-chip{background:#253b5d;border-color:#42638b;color:#bfd7ff}
html[data-theme="dark"] .selected-chip button{color:#9ebbe7}
html[data-theme="dark"] .suggestion-row{background:#192941;border-color:#344b6b}
html[data-theme="dark"] .suggestion-row p,html[data-theme="dark"] .recommendation-help,html[data-theme="dark"] .suggestion-empty{color:#99adca}
html[data-theme="dark"] .suggestion-actions button{background:#223856;border-color:#426189;color:#bfdbff}
html[data-theme="dark"] .suggestion-actions button[aria-pressed="true"]{background:#544b2d;color:#f6db80}
html[data-theme="dark"] .prompt-box{background:#101b2d;border-color:#334866}
html[data-theme="dark"] #prompt{color:#b8cce9}
html[data-theme="dark"] .language button.active{color:#aacbff}
html[data-theme="dark"] .copy-button{background:#f0d36f;color:#2d2b21}
html[data-theme="dark"] .composer-tip{color:#95accd}
html[data-theme="dark"] dialog{background:#172338;border-color:#496385}
html[data-theme="dark"] .modal-body>p,html[data-theme="dark"] #article-notes p{color:#b1c2dd}
html[data-theme="dark"] .modal-body h4,html[data-theme="dark"] #article-notes h3{color:#efd47d}
html[data-theme="dark"] .modal-body a{color:#a7c8ff}
html[data-theme="dark"] blockquote,html[data-theme="dark"] #article-structure{background:#303127;border-color:#c4a957;color:#ecdaa2}
html[data-theme="dark"] #article-structure h3,html[data-theme="dark"] #article-structure p{color:#e4d59d}
html[data-theme="dark"] .engine-tabs button,html[data-theme="dark"] .code-copy{background:#203553;border-color:#40628d;color:#b4d2ff}
html[data-theme="dark"] .engine-tabs button[aria-pressed="true"]{background:#f0d36f;color:#342e1a;border-color:#f0d36f}
html[data-theme="dark"] .theme-toggle{background:#25364e;border-color:#466080;color:#f5dc87}
html[data-theme="dark"] .brand>span:not(.brand-icon){color:#96beff}
html[data-theme="dark"] .card-title-link:hover{color:#a2c7ff}
@media(max-width:560px){header{gap:10px}.theme-toggle{font-size:10px;padding:7px}.brand{font-size:16px}nav{gap:9px}.theme-toggle{margin-left:0}}
.resources-button{border:0;background:none;cursor:pointer;text-align:left;padding:0;color:var(--muted)}#resources-dialog{width:min(800px,calc(100% - 32px));overscroll-behavior:contain}html:has(#resources-dialog[open]),body:has(#resources-dialog[open]){overflow:hidden;overscroll-behavior:none}#resource-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.resource-card{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:17px}.resource-card .eyebrow{margin-bottom:8px;font-size:9px}.modal-body .resource-card a{font-size:15px;font-weight:600;margin:0}.resource-card p:not(.eyebrow){font-size:11px;line-height:1.8;color:var(--muted)}.resource-card small{font-size:10px;line-height:1.7;display:block;color:var(--muted)}@media(max-width:560px){#resource-list{grid-template-columns:1fr}.sidebar .resources-button{display:block;margin-top:12px}}

.research-path{animation-name:researchPath}.research-direction{animation-name:researchDirection;transform-origin:160px 100px}.research-parent{animation-name:researchParent}@keyframes researchPath{0%,15%,100%{transform:translate(0,0)}35%{transform:translate(60px,0)}60%{transform:translate(60px,-40px)}80%,90%{transform:translate(230px,-40px)}}@keyframes researchDirection{0%,20%,100%{transform:rotate(0deg)}40%,55%{transform:rotate(-90deg)}70%,90%{transform:rotate(-180deg)}}@keyframes researchParent{0%,20%,100%{transform:translateX(0)}65%,90%{transform:translateX(110px)}}

.pool-cycle{animation-name:poolCycle}.state-cycle{animation-name:stateCycle}.fixed-step{animation-name:fixedStep}.smooth-view{animation-name:smoothView}@keyframes poolCycle{0%,15%,100%{transform:translateX(0)}40%,65%{transform:translateX(150px)}90%{transform:translateX(0)}}@keyframes stateCycle{0%,30%,100%{transform:translateX(0)}34%,63%{transform:translateX(95px)}67%,95%{transform:translateX(190px)}}@keyframes fixedStep{0%,24%,100%{transform:translateX(0)}25%,49%{transform:translateX(60px)}50%,74%{transform:translateX(120px)}75%,95%{transform:translateX(180px)}}@keyframes smoothView{0%,100%{transform:translateX(0)}95%{transform:translateX(180px)}}

.glossary-cycle{animation-name:glossaryCycle}@keyframes glossaryCycle{0%,30%,100%{transform:translateX(0)}34%,63%{transform:translateX(100px)}67%,95%{transform:translateX(200px)}}