:root{color:#202b43;font-synthesis:none;background:#f5f6fa;font-family:Inter,Noto Sans JP,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline-offset:4px;outline:3px solid #8ea4ff}button{transition:background .15s}a{color:inherit}.header{background:#fff;border-bottom:1px solid #e2e5ed;justify-content:space-between;align-items:center;height:82px;padding:0 4vw;display:flex}.brand{letter-spacing:-.5px;align-items:center;gap:8px;font-size:20px;text-decoration:none;display:flex}.brand strong{color:#596681;font-weight:500}.mark{color:#fff;background:#3b5bdb;border-radius:10px;place-items:center;width:37px;height:37px;margin-right:6px;font-family:Georgia,serif;font-size:28px;font-style:italic;display:inline-grid}.header-right{align-items:center;gap:26px;display:flex}.local-label{color:#69758b;font-size:13px}.secondary{color:#35415b;background:#fff;border:1px solid #dce1eb;border-radius:7px;padding:10px 14px;font-size:14px}.secondary:hover{background:#eff2fa}main{max-width:1600px;margin:auto;padding:20px 4vw 0}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.vim-label{color:#67748c;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:14px;display:flex}.vim-label input{accent-color:#496ae5;width:15px;height:15px}.sample-label{color:#67748c;align-items:center;gap:12px;font-size:14px;display:flex}select{color:#27334c;background:#fff;border:1px solid #dce1eb;border-radius:7px;max-width:100%;padding:11px 14px;font-size:14px}.workspace{border:1px solid #dce1eb;border-radius:12px;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);display:grid;overflow:hidden;box-shadow:0 6px 25px #202e4910}.code-panel{color:#c4cde0;background:#171e2e;min-width:0}.panel-bar{border-bottom:1px solid #e5e8ef;justify-content:space-between;align-items:center;gap:10px;height:48px;padding:0 20px;font-size:13px;display:flex}.code-panel .panel-bar{background:#20283a;border-color:#2c3549}.file-name{font-family:SFMono-Regular,Consolas,monospace;font-size:13px}.file-name span{color:#a6b6ee;margin-right:12px}.save-status{color:#a0aec5;font-size:12px}.cm-editor{height:390px;font-size:14px}.cm-scroller{font-family:SFMono-Regular,Menlo,Consolas,monospace!important;line-height:1.8!important}.cm-content{padding:18px 0!important}.cm-line{padding:0 20px 0 8px!important}.cm-gutters{padding-left:12px}.cm-editor.cm-focused{outline:0}.cm-panels{color:#93a1ba;background:#20283a!important;border-top:1px solid #2c3549!important}.cm-vim-panel{font-size:12px}.editor-actions{border-top:1px solid #2c3549;justify-content:space-between;align-items:center;gap:8px;min-height:69px;padding:12px 18px;display:flex}.editor-actions>div{gap:8px;display:flex}.shortcut{color:#93a1ba;font-size:12px}.primary{color:#fff;white-space:nowrap;background:#496ae5;border-radius:6px;padding:10px 18px;font-size:14px;font-weight:600}.primary:hover{background:#5b79eb}.primary span{margin-right:6px;font-size:11px}.primary.running{background:#52658b}.stop{color:#d4dded;background:#2d374c;border-radius:6px;padding:10px 13px;font-size:14px}.console{background:#131b2b;border-top:1px solid #2c3549}.console-heading{color:#a9b6cb;justify-content:space-between;padding:12px 20px 0;font-size:12px;display:flex}.console-heading span{color:#90a1bc;font-variant-numeric:tabular-nums}.console pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#9fadbf;height:107px;margin:0;padding:12px 20px 18px;font-size:13px;line-height:1.65;overflow:auto}.console pre.error{color:#ffb4ad}.preview-panel{background:#fff;flex-direction:column;min-width:0;display:flex}.preview-panel .panel-bar{color:#59667c}.preview-panel #dimensions{color:#748098;font-family:monospace;font-size:12px}#canvas-stage{color:#68758c;text-align:center;background-color:#eef0f6;background-image:radial-gradient(#ccd2e0 .75px,#0000 .75px);background-size:16px 16px;flex:1;justify-content:center;align-items:center;min-height:480px;padding:32px;font-size:14px;display:flex}#canvas-stage canvas{touch-action:none;background:0 0;flex-shrink:1;min-width:0;display:block;box-shadow:0 3px 18px #1c294614}#canvas-stage[aria-busy=true]{opacity:.7}.preview-footer{color:#69758b;border-top:1px solid #e5e8ef;justify-content:space-between;align-items:center;gap:10px;min-height:42px;padding:10px 20px;font-size:12px;display:flex}.reference{background:#fff;border:1px solid #dce1eb;border-radius:12px;margin-top:20px;padding:30px;scroll-margin-top:20px}.reference[hidden]{display:none}.reference-heading{justify-content:space-between;align-items:center;display:flex}h2{margin:0;font-size:24px}.reference p{color:#667188;font-size:14px;line-height:1.8}.reference dl{grid-template-columns:1fr 1fr;gap:0 32px;display:grid}.reference dl>div{border-bottom:1px solid #edf0f6;padding:16px 0}.reference dt{color:#3b5bdb;overflow-wrap:anywhere;font:14px SFMono-Regular,Consolas,monospace}.reference dd{color:#626e85;margin:8px 0 0;font-size:14px;line-height:1.7}.reference .limits-note{font-size:12px}footer{color:#8a93a4;justify-content:space-between;padding:24px 0;font-size:12px;display:flex}footer a{text-decoration:none}footer a:hover{text-decoration:underline}@media (min-width:1500px){.cm-editor{height:450px}}@media (max-width:1000px){.shortcut{display:none}#canvas-stage{padding:24px}}@media (max-width:760px){.header{height:70px;padding:0 20px}.brand{font-size:17px}.mark{width:32px;height:32px;font-size:24px}.local-label{display:none}.header-right{gap:0}.header .secondary{padding:8px;font-size:12px}.header .secondary span{display:none}main{padding:16px 16px 0}.sample-label{width:100%}.sample-label select{flex:1;min-width:0}.workspace{grid-template-columns:1fr}.cm-editor{height:340px}.code-panel{border-bottom:1px solid #dce1eb}#canvas-stage{min-height:310px;padding:22px}.reference{padding:22px}.reference dl{grid-template-columns:1fr}.reference h2{font-size:21px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}