.studio{margin:0;background:var(--ink);color:var(--paper);border:1px solid var(--ink);position:relative;box-shadow:0 18px 35px -30px #151b17}.studio-toolbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);gap:16px}.studio-title{display:flex;align-items:center;gap:15px;font-size:15px}.studio-mark{font-size:25px;color:var(--acid)}.illustrative{font:400 9px/1.4 "Space Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:#bac0b1;border-left:1px solid #62695a;padding-left:15px}.studio-controls{display:flex;gap:6px}.studio-controls button{border:1px solid #505749;background:none;color:#d9dfd0;min-height:36px;padding:6px 12px;font:400 10px/1.3 "Space Mono",monospace}.studio-controls button:hover{background:#32392b}.studio-controls button span{margin-left:12px;color:var(--acid)}.studio-controls button:disabled{opacity:.6;cursor:default}.studio-panes{display:grid;grid-template-columns:1fr 1fr}.code-pane,.design-pane{min-width:0;display:flex;flex-direction:column}.code-pane{background:#171c18}.pane-heading{height:45px;display:flex;justify-content:space-between;align-items:center;padding:0 25px;font:400 10px/1.5 "Space Mono",monospace;color:#a9b1a2;border-bottom:1px solid #343c30}.pane-heading b{font-weight:400;color:var(--acid);margin-right:14px}.code-sheet{display:flex;gap:25px;padding:25px 25px 27px;flex:1;min-width:0;font:400 clamp(11px,1.01vw,15px)/1.8 "Space Mono",Consolas,monospace}.line-numbers{white-space:pre;color:#626f5e;user-select:none;text-align:right;font-size:inherit}.code-sheet pre{font:inherit;margin:0;white-space:pre;letter-spacing:-.035em;color:#d5ddcc;min-width:0}.code-sheet .code-comment{color:#84967c}.code-sheet .code-keyword{color:#c8ff32}.code-sheet .code-number{color:#e4eec1}.code-sheet .noise{color:#718866}.code-foot,.design-foot{min-height:39px;padding:12px 25px;display:flex;justify-content:space-between;gap:10px;font:400 8px/1.5 "Space Mono",monospace;letter-spacing:.025em;color:#a8b39e;border-top:1px solid #343c30}.design-pane{background:#e7e8de;color:var(--ink)}.design-pane .pane-heading{border-color:#c6cabc;color:#59614f}.design-pane .pane-heading b{color:#59614f}.design-viewport{position:relative;flex:1;min-height:410px;overflow:hidden;background-image:radial-gradient(#b9bfaf .7px,transparent .7px);background-size:22px 22px}.design-viewport canvas,.design-fallback{position:absolute;width:100%;height:100%;inset:0;display:block}.viewport-note{position:absolute;left:25px;bottom:22px;font:400 8px/1.7 "Space Mono",monospace;letter-spacing:.05em;color:#555e4b;pointer-events:none}.axis{position:absolute;right:26px;bottom:22px;color:#667156;font:400 10px/1.6 "Space Mono",monospace}.design-foot{border-color:#c6cabc;color:#5c6353}.studio-bottom{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:25px;min-height:76px;padding:17px 25px}.stage-list{display:flex;gap:28px;font:400 10px/1.5 "Space Mono",monospace}.stage-list span{color:#889580;transition:color .4s}.stage-list i{font-style:normal;margin-right:8px}.stage-list .active{color:var(--acid)}.studio-bottom p{margin:0;color:#a9b39f;font:400 10px/1.6 "Space Mono",monospace;max-width:470px}.studio-progress{height:3px;background:#30382b}.studio-progress span{display:block;height:100%;width:100%;background:var(--acid);transform:scaleX(var(--progress,1));transform-origin:left}.hero-postscript{display:flex;justify-content:space-between;gap:20px;padding-top:23px;font:400 10px/1.6 "Space Mono",monospace;color:#666d5e}.hero-postscript a{color:var(--ink)}.hero-postscript a span{margin-left:20px}

.studio{--ink:#171b17;--paper:#f4f2ed;--acid:#c8ff32;--line:#363c33}.studio-controls button{min-height:44px}.studio-bottom p{letter-spacing:0}.studio-wrap{padding:0 var(--pad) 65px}.studio-wrap>p{font-size:12px;color:var(--muted);margin:18px 0 0}.studio-title{flex-wrap:wrap}.code-sheet{font-size:13px}.design-viewport{min-height:430px}@media(max-width:760px){.studio-toolbar{height:auto;padding:18px;align-items:flex-start;flex-wrap:wrap}.studio-title{gap:10px;font-size:14px}.studio-panes{grid-template-columns:1fr}.code-sheet{font-size:10px;gap:12px;padding:20px 12px}.pane-heading{padding:0 15px;font-size:9px}.code-foot,.design-foot{padding:12px 15px;font-size:7px}.design-viewport{min-height:290px}.studio-bottom{display:block;padding:20px 15px}.stage-list{gap:16px;font-size:9px}.studio-bottom p{margin-top:14px}.studio-wrap{padding-bottom:40px}.illustrative{font-size:8px}.studio-controls button{padding:8px 12px}}