body.immersive{height:100svh;overflow:hidden;background:var(--bg,var(--theme-bg))}.immersive main{max-width:none;padding:0}.immersive header{position:fixed;z-index:5;left:0;right:0;top:0;max-width:none;height:64px;padding:0 27px;background:linear-gradient(color-mix(in srgb,var(--theme-bg) 85%,transparent),color-mix(in srgb,var(--theme-bg) 46%,transparent));border-bottom:1px solid color-mix(in srgb,var(--theme-border) 33%,transparent);pointer-events:none}.immersive header a{pointer-events:auto}.immersive .intro{position:fixed;z-index:3;left:27px;top:87px;margin:0;gap:20px;max-width:calc(100% - 400px);pointer-events:none;text-shadow:0 2px 10px var(--theme-bg)}.immersive .intro h1{font-size:32px;letter-spacing:-.9px}.immersive .intro .eyebrow{font-size:9px;margin-bottom:12px}.immersive .intro p:last-child{font-size:11px;margin-top:12px}.immersive .intro-tag{font-size:8px;padding:9px 12px;background:color-mix(in srgb,var(--theme-deep) 79%,transparent)}.immersive .world,.immersive .visual{position:fixed;inset:0;border:none;border-radius:0;background:none;box-shadow:none;overflow:visible}.immersive .studio{display:block}.immersive .canvas-wrap{position:fixed;inset:0;margin:0;height:100svh;width:100vw;border:none;border-radius:0;z-index:0;background:var(--theme-deep)}.immersive #grid{width:100%;height:100%}.immersive #canvas-hint{bottom:auto;top:210px;left:27px;right:auto;padding:9px 12px;background:color-mix(in srgb,var(--theme-deep) 79%,transparent);border-color:color-mix(in srgb,var(--theme-border) 40%,transparent);z-index:2;font-size:9px}.immersive .world-heading,.immersive .visual>.panel-top{position:fixed;z-index:3;left:27px;top:169px;padding:0;gap:20px;margin:0;pointer-events:none;background:none}.immersive .world-heading>.section-label,.immersive .visual>.panel-top>.section-label{display:none}.immersive .world-heading .legend{order:0;margin:0;font-size:8px;gap:16px;background:color-mix(in srgb,var(--theme-deep) 79%,transparent);padding:8px 11px;border:1px solid color-mix(in srgb,var(--theme-border) 40%,transparent);border-radius:5px}.immersive .world-heading .status{font-size:8px}.immersive .visual>.panel-top{top:169px}.immersive .control-drawer,.immersive .code-drawer{position:fixed;z-index:6;right:25px;top:88px;width:290px;border-radius:12px;background:color-mix(in srgb,var(--theme-panel) 93%,transparent);border:1px solid color-mix(in srgb,var(--theme-border) 67%,transparent);box-shadow:0 12px 35px color-mix(in srgb,var(--theme-bg) 21%,transparent);backdrop-filter:blur(16px)}.immersive details>summary{cursor:pointer;padding:17px 19px;list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#bad5f8;gap:22px}.immersive details>summary::-webkit-details-marker{display:none}.immersive details>summary>span{font-size:14px;color:#85a5d3}.immersive details:not([open]){width:auto}.immersive details[open]>summary{border-bottom:1px solid color-mix(in srgb,var(--theme-border) 40%,transparent)}.immersive .control-drawer .toolbar{border:none;border-radius:0;margin:0;padding:20px;display:flex;flex-wrap:wrap;gap:18px 16px;background:none}.immersive .control-drawer .preset-label,.immersive .control-drawer .algorithm-control{flex:0 1 100%;min-width:0;max-width:none}.immersive .control-drawer .slider-label,.immersive .control-drawer .range-control,.immersive .control-drawer .speed-control{flex:0 1 calc(50% - 8px);width:calc(50% - 8px);min-width:0}.immersive .control-drawer .toolbar label{font-size:9px;gap:9px}.immersive .control-drawer .toolbar select{font-size:11px;min-height:41px}.immersive .control-drawer .toolbar input{height:31px}.immersive .control-drawer .toolbar output{font-size:9px}.immersive .world-tools,.immersive .grid-tools{padding:0 20px 20px;display:flex;flex-wrap:wrap;gap:17px;margin:0;position:static;width:auto;background:none}.immersive .brushes{width:100%;gap:6px}.immersive .brushes button{flex:1;font-size:9px;min-height:38px;padding:9px 10px}.immersive .view-options{gap:17px;font-size:9px}.immersive .grid-tools>button{min-height:34px;font-size:9px}.immersive .stats{position:fixed;z-index:3;left:27px;bottom:99px;display:flex;width:auto;max-width:calc(100vw - 390px);gap:31px;padding:16px 21px;border:1px solid color-mix(in srgb,var(--theme-border) 53%,transparent);border-radius:10px;background:color-mix(in srgb,var(--theme-deep) 91%,transparent);backdrop-filter:blur(12px);pointer-events:none}.immersive .stats>div>span{font-size:8px;letter-spacing:.6px}.immersive .stats strong{font-size:19px;margin-top:8px}.immersive .stats strong span{font-size:10px}.immersive .floating-play{position:fixed;z-index:5;right:26px;bottom:100px;padding:9px;border:1px solid color-mix(in srgb,var(--theme-border) 53%,transparent);border-radius:12px;background:color-mix(in srgb,var(--theme-deep) 91%,transparent);backdrop-filter:blur(12px)}.immersive .floating-play .play-controls{gap:7px;margin:0;flex-basis:auto;justify-content:initial;width:auto}.immersive .floating-play button{min-height:42px;min-width:42px;padding:9px 12px}.immersive .floating-play .primary{min-width:102px}.immersive .explanation{position:fixed;z-index:3;left:27px;right:27px;bottom:21px;display:flex;align-items:center;gap:23px;padding:16px 20px;border:1px solid color-mix(in srgb,var(--theme-border) 47%,transparent);border-radius:10px;background:color-mix(in srgb,var(--theme-deep) 91%,transparent);backdrop-filter:blur(12px);pointer-events:none;max-width:none}.immersive .explanation .rules-title{font-size:9px}.immersive .explanation p{font-size:11px;line-height:1.8;color:#b0c6e5;max-width:none;margin:0}.immersive .explanation a{pointer-events:auto;font-size:9px;margin-left:auto;white-space:nowrap}.immersive footer{display:none}.immersive .visual-footer{position:fixed;z-index:3;left:27px;top:208px;padding:9px 12px;background:color-mix(in srgb,var(--theme-deep) 79%,transparent);border:1px solid color-mix(in srgb,var(--theme-border) 40%,transparent);border-radius:5px;font-size:8px;gap:20px;pointer-events:none}.immersive .visual-footer>span{display:none}.immersive:has(.code-drawer) #canvas-hint{top:249px}.immersive .code-drawer{top:calc(88px + 275px);max-height:calc(100svh - 500px);overflow:auto;scrollbar-width:thin;scrollbar-color:#466a98 transparent}.immersive .code-drawer:not([open]){max-height:none}.immersive .code-drawer .code{background:transparent;border:none;border-radius:0;box-shadow:none}.immersive .code-drawer .panel-top{display:none}.immersive .code-drawer h2{font-size:17px;padding:20px 20px 15px}.immersive .code-drawer .complexity{padding:0 20px 17px}.immersive .code-drawer #code-lines{padding:10px 0}.immersive .code-drawer #code-lines li{font-size:9px;padding:9px 15px;gap:12px}.immersive .code-drawer #algorithm-note{padding:17px 20px;font-size:9px}.immersive .code-drawer .code-footer{padding:15px 20px;font-size:8px}.immersive details>summary:focus-visible{outline:2px solid var(--theme-accent);outline-offset:4px}
@media(max-width:1000px){.immersive .intro-tag{display:none}.immersive .stats{gap:20px;padding:14px 17px}.immersive .stats strong{font-size:16px}.immersive .explanation{gap:15px}.immersive .explanation p{font-size:10px}.immersive .intro h1{font-size:28px}}
@media(max-width:700px){.immersive header{height:55px;padding:0 18px}.immersive header .brand{font-size:21px}.immersive header .brand span{font-size:8px}.immersive header>a:last-child{font-size:10px}.immersive .intro{top:76px;left:18px;max-width:calc(100% - 120px)}.immersive .intro h1{font-size:23px;line-height:1.3;letter-spacing:-.5px}.immersive .intro .eyebrow{font-size:7px;letter-spacing:1.2px;margin-bottom:10px}.immersive .intro p:last-child{display:none}.immersive .control-drawer{right:18px;top:73px;width:270px;max-height:calc(100svh - 260px);overflow-y:auto}.immersive .control-drawer:not([open]){width:auto}.immersive details>summary{padding:13px 14px;font-size:10px;gap:12px}.immersive .world-heading,.immersive .visual>.panel-top{left:18px;top:152px;gap:12px}.immersive .world-heading .legend{font-size:7px;padding:7px 9px;gap:12px;width:auto}.immersive .world-heading .status{font-size:7px;padding:7px}.immersive #canvas-hint{left:18px;top:195px;font-size:8px;padding:7px 9px}.immersive .stats{left:18px;right:18px;bottom:158px;max-width:none;width:auto;gap:20px;padding:13px 16px;justify-content:space-between}.immersive .stats>div>span{font-size:6px;letter-spacing:.4px}.immersive .stats strong{font-size:14px;margin-top:8px}.immersive .stats strong span{font-size:8px;margin-left:3px}.immersive .floating-play{right:18px;left:18px;bottom:91px;padding:8px}.immersive .floating-play .play-controls{gap:8px;display:flex;width:100%}.immersive .floating-play button{flex:1;min-height:40px;font-size:16px}.immersive .floating-play .primary{flex:2;font-size:11px}.immersive .explanation{left:18px;right:18px;bottom:12px;padding:12px 14px;gap:0;min-height:63px;display:block}.immersive .explanation .rules-title,.immersive .explanation a{display:none}.immersive .explanation p{font-size:9px;line-height:1.7;min-width:0}.immersive .visual-footer{left:18px;top:192px;font-size:7px;padding:7px 9px}.immersive:has(.code-drawer) #canvas-hint{top:231px}.immersive .code-drawer{right:18px;top:calc(100svh - 283px);max-height:calc(100svh - 340px);width:270px}.immersive .code-drawer[open]{top:190px;max-height:calc(100svh - 425px)}.immersive .code-drawer:not([open]){width:auto;max-height:none}.immersive .control-drawer[open]{z-index:8}.immersive .control-drawer .toolbar{gap:16px}.immersive .world-tools,.immersive .grid-tools{gap:15px}}
@media(max-height:700px) and (min-width:701px){.immersive .control-drawer{max-height:calc(100svh - 230px);overflow:auto}.immersive .code-drawer{right:335px;top:88px;max-height:calc(100svh - 260px)}.immersive .intro{max-width:calc(100% - 670px)}.immersive .intro h1{font-size:24px}.immersive .stats{gap:20px}}

.immersive .floating-play,.immersive .stats{bottom:calc(var(--rules-height,55px) + 43px)}
@media(max-width:700px){.immersive .floating-play{bottom:calc(var(--rules-height,63px) + 28px)}.immersive .stats{bottom:calc(var(--rules-height,63px) + 95px)}.immersive .code-drawer:not([open]){top:auto;bottom:calc(var(--rules-height,63px) + 170px)}.immersive .code-drawer[open]{max-height:calc(100svh - var(--rules-height,63px) - 355px)}}

@media(min-width:701px) and (min-height:701px){.immersive .code-drawer{top:calc(var(--controls-bottom,347px) + 16px);max-height:calc(100svh - var(--controls-bottom,347px) - var(--rules-height,55px) - 150px)}}