:root{color-scheme:dark;--bg: #050708;--bg-soft: #080d10;--surface: rgba(13, 18, 21, .78);--surface-strong: rgba(17, 24, 28, .92);--surface-muted: rgba(255, 255, 255, .035);--border: rgba(196, 221, 224, .16);--border-strong: rgba(203, 235, 238, .28);--text: #eef7f4;--muted: #9aa9a9;--faint: #637273;--cyan: #2fd8ef;--lime: #a7f543;--coral: #ff756d;--gold: #f3c84b;--shadow: 0 22px 70px rgba(0, 0, 0, .42);--radius: 8px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(125deg,rgba(47,216,239,.075),transparent 32%),linear-gradient(245deg,rgba(255,117,109,.06),transparent 38%),var(--bg);background-size:82px 82px,82px 82px,auto,auto,auto;color:var(--text)}button,input{font:inherit}button{color:inherit}.app-frame{display:grid;grid-template-columns:72px minmax(0,1fr);min-height:100vh}.rail{position:sticky;top:0;z-index:30;display:flex;flex-direction:column;align-items:center;width:72px;height:100vh;border-right:1px solid var(--border);background:#04080adb;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.terminal-mark,.rail-button,.icon-button,.toolbar-button,.canvas-tools button,.zoom-control button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:transparent;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}.terminal-mark{width:40px;height:40px;margin-top:14px;border-color:var(--border-strong);border-radius:8px;background:#0b1013;box-shadow:inset 0 0 0 1px #ffffff09}.rail-nav{display:flex;flex:1;flex-direction:column;gap:13px;width:100%;margin-top:26px;align-items:center}.rail-button{position:relative;width:42px;height:42px;border-radius:8px;color:#9ca9aa}.rail-button:hover,.rail-button.is-active{color:var(--cyan);border-color:#2fd8ef3d;background:#2fd8ef1c}.rail-button.is-active:before{position:absolute;left:-15px;width:3px;height:28px;border-radius:999px;background:var(--cyan);content:""}.rail-footer{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:18px;color:var(--muted)}.online-dot{width:8px;height:8px;border-radius:999px;background:var(--lime);box-shadow:0 0 12px #a7f543b3}.online-label{font-size:.75rem}.content-shell{min-width:0}.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto minmax(260px,1fr) auto;align-items:center;min-height:72px;gap:28px;padding:0 32px;border-bottom:1px solid var(--border);background:#05080ac2;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.brand{color:var(--text);text-decoration:none;font-size:1.35rem;font-weight:760}.nav-tabs{display:flex;align-items:center;gap:28px}.nav-tab{position:relative;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.96rem;font-weight:650;line-height:72px;padding:0 4px}.nav-tab:hover,.nav-tab.is-active{color:var(--cyan)}.nav-tab.is-active:after{position:absolute;right:0;bottom:0;left:0;height:3px;border-radius:999px 999px 0 0;background:var(--cyan);box-shadow:0 0 18px #2fd8efa6;content:""}.topbar-actions{display:flex;align-items:center;gap:12px}.search-box{display:flex;align-items:center;gap:9px;width:270px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:#ffffff09;color:var(--muted)}.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.84rem}.search-box input::placeholder{color:#687778}.avatar-button{width:34px;height:34px;border:0;border-radius:999px;background:linear-gradient(135deg,#2ddbf2,#3178ff);color:#fff;font-weight:760;cursor:pointer}.icon-button{width:34px;height:34px;border-radius:8px;color:var(--muted)}.icon-button:hover{border-color:var(--border);background:#ffffff0b}.main-layout{width:min(100%,1660px);margin:0 auto;padding:30px 32px 56px}.intro-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.intro-row h1{margin:0 0 8px;font-size:2rem;line-height:1.14;font-weight:820}.intro-row p{margin:0;color:var(--muted);font-size:.98rem}.primary-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:164px;height:46px;border:1px solid rgba(47,216,239,.28);border-radius:8px;background:linear-gradient(180deg,#37ddf4,#20bad5);color:#061113;box-shadow:0 16px 32px #2fd8ef2e;cursor:pointer;font-size:.95rem;font-weight:760}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:32px;align-items:stretch}.workbench,.activity-panel,.quick-card,.locked-card,.experiment-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.workbench{overflow:hidden;min-height:438px}.workbench-toolbar{display:flex;align-items:center;height:46px;border-bottom:1px solid var(--border);background:#ffffff07}.file-tab{display:inline-flex;align-items:center;gap:9px;height:100%;min-width:140px;padding:0 13px;border-right:1px solid var(--border);color:var(--text);font-size:.86rem;font-weight:690}.file-tab button{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:1.15rem}.status-light{width:9px;height:9px;border-radius:999px;background:var(--lime);box-shadow:0 0 14px #a7f543b8}.toolbar-spacer{flex:1}.toolbar-button{width:38px;height:38px;border-radius:8px;color:var(--muted)}.toolbar-button:hover{color:var(--text);background:#ffffff0b}.run-button{color:var(--lime)}.run-button.is-running{background:#a7f54321;color:var(--lime)}.editor-layout{display:grid;grid-template-columns:minmax(360px,48%) minmax(0,1fr);min-height:392px}.code-pane{position:relative;border-right:1px solid var(--border);background:#05090ba8;overflow:hidden}.code-pane ol{margin:0;padding:26px 28px 92px 58px;color:#748082;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.91rem;line-height:1.72}.code-pane li{padding-left:12px;white-space:nowrap}.comment{color:#6b7779}.keyword{color:#2fd8ef}.function-name{color:#a7f543}.string{color:#ff756d}.indent{display:inline-block;width:24px}.console-strip{position:absolute;right:16px;bottom:16px;left:16px;display:grid;gap:6px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#00000047;color:#879697;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.78rem}.canvas-pane{position:relative;display:grid;min-height:392px;place-items:center;overflow:hidden;background:linear-gradient(#04080a6b,#04080a9e),url(/assets/experiment-bg.png) center / cover no-repeat,#071013}.canvas-pane:after{position:absolute;inset:0;background-image:radial-gradient(circle at center,rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;opacity:.18;content:""}.canvas-tools{position:absolute;z-index:2;top:14px;right:14px;display:grid;gap:9px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#0a1012ad;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.canvas-tools button{width:34px;height:34px;border-radius:7px;color:#d2dddd}.canvas-tools button:hover{background:#ffffff12;color:var(--cyan)}.canvas-empty{position:relative;z-index:1;display:grid;place-items:center;gap:9px;color:var(--text);text-align:center}.canvas-empty strong{font-size:1.02rem}.canvas-empty span{color:var(--muted);font-size:.84rem}.canvas-add{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px dashed rgba(238,247,244,.42);border-radius:8px;background:#0000002e;color:var(--text);cursor:pointer}.zoom-control{position:absolute;z-index:2;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 8px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#090e10c2;color:var(--muted);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:.86rem}.zoom-control button{width:28px;height:28px;border-radius:7px;color:#cbd6d5}.activity-panel{padding:24px 22px;background:linear-gradient(180deg,#11181ce0,#090d10cc)}.panel-heading,.section-heading{display:flex;align-items:center;gap:16px}.panel-heading{justify-content:space-between;margin-bottom:24px}.panel-heading h2,.quick-section h2,.section-heading h2{margin:0;font-size:1rem;font-weight:760}.panel-heading h2{display:inline-flex;align-items:center;gap:10px}.panel-heading button,.view-all{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.82rem}.activity-list{display:grid;gap:18px;margin:0;padding:0;list-style:none}.activity-list li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;color:#d8e2df;font-size:.88rem}.activity-list li span:nth-child(2){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.activity-list time{color:var(--muted);font-size:.78rem}.activity-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid currentColor;border-radius:999px;background:#ffffff0a}.quick-section,.experiment-section{margin-top:28px}.quick-section h2{margin-bottom:12px}.quick-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:26px}.quick-card{display:grid;grid-template-columns:46px minmax(0,1fr) 18px;align-items:center;min-height:86px;gap:16px;padding:18px;color:var(--text);text-align:left;cursor:pointer}.quick-card:hover,.quick-card.is-selected{border-color:currentColor;background:#ffffff0d}.quick-card strong,.quick-card small{display:block}.quick-card strong{margin-bottom:6px;font-size:.98rem}.quick-card small{color:var(--muted);font-size:.8rem}.locked-card{display:inline-flex;align-items:center;justify-content:center;min-height:86px;gap:9px;border-style:dashed;background:#ffffff05;color:#848f90;font-size:.88rem;font-weight:650}.section-heading{margin-bottom:18px}.section-heading h2{margin-right:12px}.category-tabs{display:flex;flex:1;flex-wrap:wrap;gap:8px}.category-tabs button{min-height:32px;padding:0 14px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:.82rem}.category-tabs button:hover,.category-tabs button.is-active{border-color:#2fd8ef33;background:#2fd8ef1f;color:var(--cyan)}.view-all{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.experiment-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px}.experiment-card{display:grid;grid-template-columns:74px minmax(0,1fr);grid-template-rows:1fr auto;min-height:126px;gap:12px 14px;padding:18px}.experiment-icon{display:inline-flex;align-items:center;justify-content:center;width:74px;height:58px;border:1px dashed currentColor;border-radius:8px;background:#ffffff06;opacity:.76}.experiment-card h3{margin:8px 0 6px;font-size:.96rem}.experiment-card p{margin:0;color:var(--muted);font-size:.82rem}.experiment-card>span{grid-column:2;color:var(--faint);font-size:.76rem}.empty-state{min-height:126px;display:grid;place-items:center;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted)}.tone-cyan{color:var(--cyan)}.tone-lime{color:var(--lime)}.tone-coral{color:var(--coral)}.tone-gold{color:var(--gold)}@media(max-width:1180px){.topbar{grid-template-columns:auto 1fr}.topbar-actions{grid-column:1 / -1;padding-bottom:16px}.search-box{flex:1;width:auto}.workspace-grid{grid-template-columns:1fr}.quick-grid,.experiment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.app-frame{display:block}.rail{position:fixed;inset:auto 0 0;flex-direction:row;justify-content:space-between;width:auto;height:68px;padding:0 12px;border-top:1px solid var(--border);border-right:0}.terminal-mark,.rail-footer{display:none}.rail-nav{flex:1;flex-direction:row;justify-content:space-between;gap:6px;margin-top:0}.rail-button{width:40px;height:40px}.rail-button.is-active:before{display:none}.topbar{position:static;grid-template-columns:1fr;gap:16px;padding:18px 18px 0}.nav-tabs{gap:18px;overflow-x:auto}.nav-tab{line-height:44px;white-space:nowrap}.topbar-actions{padding-bottom:18px}.main-layout{padding:24px 18px 92px}.intro-row{flex-direction:column}.primary-action{width:100%}.editor-layout{grid-template-columns:1fr}.code-pane{min-height:260px;border-right:0;border-bottom:1px solid var(--border)}.canvas-pane{min-height:340px}.quick-grid,.experiment-grid{grid-template-columns:1fr;gap:14px}.section-heading{align-items:flex-start;flex-direction:column}.view-all{align-self:flex-start}}