:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#0f1115;color:#e8edf2}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#1b2230,#0f1115 45%),#0f1115}#app,#viewport{min-height:100vh}#viewport{position:relative;overflow:hidden}#world{display:block;width:100%;height:100vh;cursor:crosshair}.hud-panel{position:absolute;z-index:10;width:min(280px,calc(100vw - 24px));pointer-events:none}#stats-panel{top:12px;left:12px}#lineages-panel{top:152px;left:12px;max-height:calc(100vh - 220px)}#inspector-panel{top:12px;right:12px;width:min(300px,calc(100vw - 24px))}#builder-panel{top:360px;right:12px;width:min(360px,calc(100vw - 24px))}.hud-panel>summary,#control-drawer>summary{list-style:none;cursor:grab;-webkit-user-select:none;user-select:none;padding:8px 10px;border-radius:12px;background:#0c0f148f;border:1px solid rgba(255,255,255,.08);font-weight:700;margin-bottom:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto}.hud-panel>summary::-webkit-details-marker,#control-drawer>summary::-webkit-details-marker{display:none}#control-drawer{position:absolute;right:12px;bottom:12px;width:min(340px,calc(100vw - 24px));z-index:10;opacity:.96;pointer-events:none}#control-drawer>summary,#control-drawer .hud-card{pointer-events:auto}#control-drawer .hud-card+.hud-card{margin-top:10px}.hud-card{background:#0c0f146b;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto}.compact-card{max-height:220px;overflow:auto}#inspector-panel .hud-card{height:calc(100% - 42px);max-height:none;overflow:auto}#lineages-panel .hud-card{max-height:calc(100vh - 210px);overflow:auto}h1,h2,p{margin-top:0}.subtitle{color:#a8b3c2;margin-bottom:18px}label{display:grid;gap:6px;margin-bottom:12px;font-size:14px}input[type=range]{width:100%}button{background:#1f6feb;color:#fff;border:none;border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:600}button:hover{filter:brightness(1.1)}.secondary-btn{background:#ffffff14;width:100%;margin-top:10px}.row{display:flex;gap:8px;flex-wrap:wrap}.row button{flex:1 1 120px}#resetLayoutBtn{margin-top:0}ul{list-style:none;padding:0;margin:0}li{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px}.swatch{width:12px;height:12px;border-radius:999px;display:inline-block}.green{background:#59d66f}.blue{background:#4aa8ff}.red{background:#f55}.orange{background:#ff9b47}.gray{background:#9fa6b2}.purple{background:#b084ff}.yellow{background:#f4e66a}#stats,#inspector,#lineages{font-size:14px;line-height:1.55;color:#d0dae6}.lineage-entry{padding:2px 0}.muted{color:#9aa7b8}hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:10px 0}.draggable-panel{touch-action:none;overflow:auto;min-width:220px;min-height:180px}.drag-summary{position:relative;padding-left:28px}.drag-summary:before{content:"⋮⋮";position:absolute;left:10px;top:7px;color:#ffffff73;letter-spacing:-2px;font-size:14px}.panel-dragging>summary,.panel-dragging.drag-summary,.panel-dragging .drag-summary{cursor:grabbing}.panel-dragging{opacity:.98}.draggable-panel{position:absolute}.panel-resize-handle{position:absolute;right:8px;bottom:8px;width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,transparent 0 35%,rgba(255,255,255,.18) 35% 45%,transparent 45% 60%,rgba(255,255,255,.28) 60% 70%,transparent 70% 100%),#ffffff0a;cursor:nwse-resize;z-index:2}.panel-resizing{-webkit-user-select:none;user-select:none}.panel-resizing>summary,.panel-resizing .drag-summary{cursor:nwse-resize}@media (pointer: coarse){.panel-resize-handle{display:none}}select{width:100%;background:#ffffff14;color:#e8edf2;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px}.small-note{font-size:13px;line-height:1.4;margin:0}#builder-panel .hud-card{height:calc(100% - 42px);max-height:none;overflow:auto}#builder-preview{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#09101a;margin-bottom:10px}.segment-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.segment-chip{background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px;color:#d7e1ec;font-size:12px}.segment-chip.selected{background:#1f6feb80;border-color:#6ea8fee6}.inline-btn{width:auto;margin-top:0}input[type=text],textarea{width:100%;background:#ffffff14;color:#e8edf2;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;font:inherit}textarea{resize:vertical}.checkbox-row{display:flex;align-items:center;gap:8px}.checkbox-row input{width:16px;height:16px}.inspector-actions{margin-top:10px}.inspector-actions button{width:100%}#builder-panel,#inspector-panel,#control-drawer,#stats-panel{min-height:200px}#brand-chip{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 66px);z-index:14;display:inline-flex;align-items:center;gap:10px;max-width:min(260px,calc(100vw - 32px));padding:9px 12px;border-radius:999px;background:#09101ac2;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 28px #00000038}#brand-chip img{width:34px;height:34px;display:block}#brand-chip strong,#brand-chip span{display:block;line-height:1.15}#brand-chip strong{font-size:14px;letter-spacing:.02em}#brand-chip span{font-size:11px;color:#9db0c7;margin-top:2px}#helpBtn{position:absolute;right:12px;top:12px;z-index:12;width:40px;height:40px;border-radius:999px;padding:0;font-size:18px;box-shadow:0 10px 30px #00000040}#action-strip{position:absolute;right:12px;top:58px;z-index:9;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:min(560px,calc(100vw - 24px))}#hint-ribbon{position:fixed;left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 66px);top:auto;z-index:16;max-width:min(720px,calc(100vw - 24px));width:max-content;text-align:center;pointer-events:none;padding:8px 12px;border-radius:999px;background:#09101aad;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#hint-ribbon span{color:#90a8c2;white-space:nowrap}#hint-ribbon strong{font-weight:600}.top-stats-bar{position:absolute;left:12px;right:64px;top:12px;z-index:9;padding:8px;border-radius:14px;background:#09101a8f;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}#stats{display:flex;gap:8px;flex-wrap:wrap}.stat-pill{display:inline-flex;align-items:baseline;gap:6px;padding:6px 10px;border-radius:999px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);font-size:12px;color:#dce6f0}.stat-label{color:#93abc4}#splash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center}#splash-overlay[hidden]{display:none}.splash-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#03060ab8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.splash-card{position:relative;width:min(680px,calc(100vw - 32px));max-height:min(88vh,900px);overflow:auto;padding:24px 24px 20px;border-radius:24px;background:linear-gradient(180deg,#0e151ff5,#080c12f5);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px #0000006b}.splash-close-btn{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:999px;padding:0;background:#ffffff14;font-size:22px}.splash-studio-logo{display:block;width:min(160px,36%);max-width:160px;margin:0 auto 12px;opacity:.92}.splash-kicker{text-align:center;color:#8fa8c3;margin-bottom:8px;text-transform:uppercase;letter-spacing:.18em;font-size:11px}.splash-card h1{text-align:center;margin-bottom:10px}.splash-subtitle{text-align:center;color:#b4c4d6;font-size:16px;margin-bottom:18px}.splash-points{list-style:disc;padding-left:20px;margin-bottom:16px;color:#d8e3ef}.splash-points li{display:list-item;margin-bottom:8px}.splash-hint{padding:10px 12px;border-radius:14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#dce8f3;margin-bottom:14px}.splash-guide{margin-bottom:18px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);overflow:hidden}.splash-guide>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:700}.splash-guide>summary::-webkit-details-marker{display:none}.splash-guide-body{padding:0 14px 14px;color:#c9d8e8}.splash-actions{margin-top:10px}body.splash-open{overflow:hidden}@media (max-width: 900px){#control-drawer{bottom:76px}}.hud-panel>summary,#control-drawer>summary,.hud-card,.builder-card,.inspector-card{color:#e8edf2}select,input[type=text],textarea,option{color:#e8edf2}option{background:#152030}input::placeholder,textarea::placeholder{color:#91a4ba}.segment-chip{cursor:pointer}#ad-banner-shell{position:absolute;left:50%;bottom:10px;transform:translate(-50%);width:min(320px,calc(100vw - 32px));min-height:50px;z-index:8;border-radius:12px;background:#09101ad1;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden}#ad-banner-shell .adsbygoogle{width:100%;min-height:50px}#ad-banner-shell[hidden]{display:none}@media (max-width: 900px){#brand-chip{right:12px;bottom:70px;max-width:calc(100vw - 24px)}#hint-ribbon{bottom:70px;width:calc(100vw - 24px);white-space:normal}#ad-banner-shell{bottom:8px}}@media (max-width: 800px){#action-strip{right:12px}#action-strip button{flex:1 1 140px}#hint-ribbon{left:50%;right:auto;transform:translate(-50%);bottom:70px;top:auto;max-width:calc(100vw - 20px)}}#footer-links{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:13;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:999px;background:#09101ab8;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;color:#b8c7d8}#footer-links a{color:#d6e2ef;text-decoration:none}#footer-links a:hover{color:#fff;text-decoration:underline}@media (max-width: 900px){#footer-links{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:13}}.lab-card{height:calc(100% - 42px);max-height:none;overflow:auto}.lab-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}.lab-tab{border-radius:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:#d6e2ef}.lab-tab.is-active{background:#1f6feb47;border-color:#6ea8febf}.lab-pane{display:block}.lab-pane[hidden]{display:none!important}.builder-workbench{display:grid;grid-template-columns:minmax(220px,.95fr) minmax(0,1.15fr);gap:12px;align-items:start}.builder-stage-card,.builder-section-card{border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;padding:12px}.builder-stage-card{position:sticky;top:0}.builder-stage-header,.builder-section-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:10px}.builder-stage-header strong,.builder-section-head strong{display:block;font-size:14px}.builder-stage-header span,.builder-section-head span{display:block;color:#9db0c7;font-size:12px;line-height:1.35}.builder-controls-stack{display:grid;gap:12px}.builder-range-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.builder-range-row span{min-width:40px;text-align:right;font-variant-numeric:tabular-nums;color:#dce6f0}.builder-adjust-row{display:grid;gap:8px}.builder-stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.builder-stepper .secondary-btn,.builder-stepper .inline-btn{width:100%;margin-top:0}.type-chip-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.type-chip{border-radius:999px;padding:7px 10px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:#d8e3ef}.type-chip.selected{background:#1f6feb52;border-color:#6ea8fecc}#builder-preview{aspect-ratio:1 / 1;min-height:260px}@media (max-width: 980px){.builder-workbench{grid-template-columns:1fr}.builder-stage-card{position:static}}#lab-panel{position:fixed;right:16px;top:64px;width:min(1040px,calc(100vw - 32px));height:min(78vh,860px);max-height:calc(100vh - 76px);z-index:18}#lab-panel[open] .hud-card{display:block;max-height:calc(100% - 52px);overflow:auto}#lab-panel .hud-card{display:none}#lab-panel .panel-resize-handle{display:block}@media (max-width: 900px){#lab-panel{left:10px;right:10px;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 132px);width:auto!important;max-height:min(42vh,420px)}#lab-panel .panel-resize-handle,#footer-links{display:none}}@media (max-width: 900px){#brand-chip{display:none}.top-stats-bar{display:none!important}#stats{gap:6px}.stat-pill{font-size:11px;padding:5px 8px}#helpBtn{top:calc(env(safe-area-inset-top,0px) + 68px);right:12px}#action-strip{left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 10px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:none;justify-content:stretch}#action-strip button{width:100%;min-height:42px;padding-inline:10px}#hint-ribbon{bottom:calc(env(safe-area-inset-bottom,0px) + 68px);width:calc(100vw - 20px);max-width:calc(100vw - 20px);white-space:normal}#lab-panel{left:10px;right:10px;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 132px);width:auto!important;height:min(50vh,460px)!important;max-height:min(50vh,460px);min-height:260px}#lab-panel>summary{position:sticky;top:0;z-index:2}#lab-panel[open] .hud-card{max-height:calc(min(50vh,460px) - 48px);overflow:auto}}@media (max-width: 900px) and (orientation: landscape){.top-stats-bar{display:none!important}#action-strip{left:10px;right:calc(50vw + 6px);top:calc(env(safe-area-inset-top,0px) + 88px);grid-template-columns:repeat(2,minmax(0,1fr))}#hint-ribbon{left:10px;right:calc(50vw + 6px);transform:none;width:auto;max-width:none;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);text-align:left}#lab-panel{left:calc(50vw + 6px);right:10px;top:calc(env(safe-area-inset-top,0px) + 10px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);height:auto!important;max-height:none;min-height:0}#lab-panel[open] .hud-card{max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 70px)}}#homeBtn{position:absolute;right:58px;top:12px;z-index:12;width:40px;height:40px;border-radius:999px;padding:0;font-size:18px;box-shadow:0 10px 30px #00000040}.tutorial-primary-btn{flex:2 1 260px;min-height:48px;font-size:15px;background:linear-gradient(135deg,#1f6feb,#7c3aed)}.tutorial-unseen{animation:tutorialPulse 1.8s ease-in-out infinite}@keyframes tutorialPulse{0%,to{box-shadow:0 0 #7c3aed00}50%{box-shadow:0 0 26px #7c3aed8c}}#tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:42;pointer-events:none}#tutorial-overlay[hidden]{display:none}.tutorial-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#03060a2e;pointer-events:auto}.tutorial-card{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%);width:min(560px,calc(100vw - 24px));max-height:min(44vh,360px);overflow:auto;padding:18px;border-radius:22px;background:linear-gradient(180deg,#0e151ffa,#080c12fa);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 80px #00000085;pointer-events:auto}.tutorial-card h2{margin:0 0 8px;font-size:20px}.tutorial-card p{margin:0 0 16px;color:#c9d8e8;line-height:1.5}.tutorial-progress{color:#93abc4;font-size:12px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.12em}.tutorial-actions{display:flex;gap:8px;justify-content:flex-end}.tutorial-actions button{min-width:92px}.tutorial-highlight{position:relative;z-index:41!important;outline:3px solid rgba(124,195,255,.95);outline-offset:4px;box-shadow:0 0 0 9999px #0000002e,0 0 28px #7cc3ff8c;border-radius:16px}body.tutorial-open #world.tutorial-highlight{outline-offset:-10px}@media (max-width: 900px){#homeBtn{top:calc(env(safe-area-inset-top,0px) + 68px);right:58px}.tutorial-card{bottom:calc(env(safe-area-inset-bottom,0px) + 12px);max-height:54vh}}@media (max-width: 900px) and (orientation: landscape){#helpBtn{top:calc(env(safe-area-inset-top,0px) + 10px);right:10px}#homeBtn{top:calc(env(safe-area-inset-top,0px) + 10px);right:56px}#lab-panel{left:auto;right:10px;top:calc(env(safe-area-inset-top,0px) + 58px);bottom:calc(env(safe-area-inset-bottom,0px) + 10px);width:min(420px,42vw)!important;height:auto!important;max-height:none;min-height:0}#lab-panel:not([open]){bottom:auto;width:178px}#lab-panel>summary{text-align:center}#action-strip{right:calc(42vw + 24px);top:calc(env(safe-area-inset-top,0px) + 10px)}.tutorial-card{left:10px;right:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);transform:none;width:min(430px,calc(58vw - 20px));max-height:calc(100vh - 20px)}}@media (max-width: 900px){#lab-panel.draggable-panel:not([open]){height:auto;min-height:0;max-height:none}#lab-panel.draggable-panel>summary{touch-action:none;cursor:grab}#lab-panel.draggable-panel.panel-dragging>summary{cursor:grabbing}}