:root{--bg: #eef1f6;--panel: #ffffff;--line: #d9dee7;--text: #1f2328;--muted: #5f6b7a;--brand: #1e5bd8;--brand-ink: #ffffff;--run: #0f8a4b;--err: #d93025;--warn: #b26a00;--code-w: 52%;--top-h: 52px;font-family:system-ui,-apple-system,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic UI,Meiryo,sans-serif;color:var(--text)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg)}body{display:flex;flex-direction:column;overflow:hidden;position:fixed;left:0;right:0;top:var(--app-top, 0px);height:var(--app-h, 100dvh);overscroll-behavior:none}body.dragging{cursor:col-resize;-webkit-user-select:none;user-select:none}body.dragging iframe{pointer-events:none}button,select,input{font:inherit;color:inherit}svg{width:18px;height:18px;fill:currentColor;flex:none}.topbar{height:var(--top-h);flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;background:#10203f;color:#fff}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:16px;letter-spacing:.02em}.brand-mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#3b82f6,#22c55e);box-shadow:inset 0 0 0 2px #ffffff40}.brand b{font-weight:700}.actions{margin-left:auto;display:flex;align-items:center;gap:8px}.btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:#ffffff14;cursor:pointer;text-decoration:none;white-space:nowrap}.btn:hover{background:#ffffff29}.btn:focus-visible,.seg:focus-visible,.filetab:focus-visible{outline:3px solid #93c5fd;outline-offset:1px}.btn-run{background:var(--run);border-color:transparent;font-weight:700;color:#fff}.btn-run:hover{background:#0c7a42}.btn-primary{background:var(--brand);border-color:transparent;color:#fff;font-weight:700}.btn-primary:hover{background:#174bb8}.btn-ghost{background:transparent}.toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#cbd5e1;cursor:pointer;white-space:nowrap}.toggle input{width:16px;height:16px;accent-color:#22c55e}.menu{position:relative}.menu-list{position:absolute;right:0;top:42px;z-index:30;min-width:270px;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #0f172a2e;padding:6px}.menu-list button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:none;border-radius:8px;cursor:pointer}.menu-list button:hover{background:#eef2ff}.mobile-switch{display:none}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(320px,var(--code-w)) 6px minmax(300px,1fr)}.pane{min-width:0;min-height:0;display:flex;flex-direction:column}.pane-code{background:var(--panel);border-right:1px solid var(--line)}.splitter{cursor:col-resize;background:var(--bg);touch-action:none}.splitter:hover{background:#cbd5e1}.filetabs{flex:none;display:flex;gap:2px;padding:8px 8px 0;background:#f6f8fb;border-bottom:1px solid var(--line);overflow-x:auto}.filetab{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;background:transparent;cursor:pointer;color:var(--muted);font-size:14px;white-space:nowrap}.filetab.active{background:#fff;border-color:var(--line);color:var(--text);font-weight:600;margin-bottom:-1px}.ficon{width:10px;height:10px;border-radius:3px}.ficon-html{background:#e8590c}.ficon-css{background:#1e5bd8}.ficon-js{background:#e0b100}.fbadge:empty{display:none}.fbadge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;line-height:18px;text-align:center;color:#fff;background:var(--warn)}.fbadge.err{background:var(--err)}.editor{flex:1;min-height:0;overflow:hidden}.editor .cm-editor{height:100%;font-size:15px}.editor .cm-scroller{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,BIZ UDGothic,Noto Sans Mono CJK JP,monospace;line-height:1.6}.editor .cm-gutters{background:#fbfcfe;border-right:1px solid #eef1f5;color:#98a2b3}.editor .cm-activeLine{background:#f5f8ff}.editor .cm-activeLineGutter{background:#eaf1ff;color:var(--text)}.cm-zenkaku{outline:1px dashed #d93025;outline-offset:-2px;background:#d9302514;border-radius:2px}.cm-tooltip.cm-tooltip-lint{font-size:13px}.cm-diagnostic-error{border-left-color:var(--err)!important}.cm-diagnostic-warning{border-left-color:var(--warn)!important}.cm-tooltip-autocomplete ul li[aria-selected]{background:var(--brand)!important}.cm-completionDetail{color:#64748b;font-style:normal!important;margin-left:10px}.bottom{flex:none;display:flex;flex-direction:column;border-top:1px solid var(--line);background:#fbfcfe;min-width:0}.bottom[data-open=true]{height:200px}.bottom[data-open=false] .bottom-list{display:none}.bottom[data-open=false] .bottom-tabs{border-bottom:0}.bsummary{flex:1;min-width:0;border:0;background:none;text-align:left;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;padding:4px 6px}.bsummary.error{color:var(--err)}.bsummary.warning{color:var(--warn)}.bottom[data-open=true] .bsummary{display:none}.btoggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:28px;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer}.btoggle:hover{background:#e8eefc}.bottom[data-open=true] .btoggle svg{transform:rotate(180deg)}.bottom-tabs{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line)}.btab{border:0;background:none;padding:5px 10px;border-radius:7px;cursor:pointer;color:var(--muted);font-size:13px}.btab.active{background:#e8eefc;color:var(--brand);font-weight:700}.count{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#e2e8f0;color:#475569;font-size:11px;text-align:center}.count.has{background:var(--err);color:#fff}#consoleCount.has{background:#475569}.hint{font-size:12px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bottom-list{list-style:none;margin:0;padding:4px 0;overflow:auto;flex:1;font-size:13px}.bottom-list .empty{padding:10px 14px;color:#0f8a4b}.problem{display:grid;grid-template-columns:96px 128px 1fr;gap:10px;align-items:baseline;width:100%;text-align:left;border:0;background:none;padding:6px 14px;cursor:pointer}.problem:hover{background:#eef2ff}.ptag{justify-self:start;font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;color:#fff;background:var(--warn);white-space:nowrap}.problem.error .ptag{background:var(--err)}.pwhere{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.log{display:flex;gap:10px;padding:5px 14px;border-bottom:1px solid #f1f5f9;font-family:ui-monospace,Menlo,Consolas,monospace}.log-error{color:var(--err);background:#fff5f5}.log-warn{color:var(--warn);background:#fffaf0}.lmsg{flex:1;white-space:pre-wrap;word-break:break-all}.lwhere{color:var(--muted);white-space:nowrap}.pane-preview{background:var(--bg)}.preview-bar{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:#f6f8fb}.preview-bar select{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:180px}.preview-bar .btn{color:var(--text);border-color:var(--line);height:34px;padding:0 9px;background:#fff}.size,.zoom{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.zoom{margin-left:auto}.stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px}.stage-inner{transform-origin:top left;flex:none}.stage-inner.bare{width:100%;height:100%;transform:none}.preview-frame{display:block;width:100%;height:100%;border:0;background:#fff}.device{background:#16181d;border-radius:54px;box-shadow:0 0 0 2px #3a3f4a,0 24px 60px #0f172a47}.device-home{border-radius:46px}.device-punch{border-radius:40px}.device-tablet{border-radius:36px}.device.landscape{border-radius:44px}.device-screen{position:relative;overflow:hidden;background:#fff;border-radius:42px}.device-home .device-screen{border-radius:4px}.device-punch .device-screen{border-radius:30px}.device-tablet .device-screen{border-radius:18px}.device.landscape .device-screen{border-radius:32px}.statusbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font:600 15px/1 -apple-system,system-ui,sans-serif;color:#111;background:#fff;z-index:2}.device-home .statusbar,.device-punch .statusbar,.device-tablet .statusbar{font-size:12px;padding:0 12px}.sb-icons{letter-spacing:1px;font-size:11px}.cutout{position:absolute;left:50%;transform:translate(-50%);background:#000}.cutout-notch{top:0;width:160px;height:32px;border-radius:0 0 20px 20px}.cutout-island{top:11px;width:124px;height:36px;border-radius:20px}.cutout-punch{top:8px;width:12px;height:12px;border-radius:50%}.device-viewport{position:absolute;left:0;right:0}.homebar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#fff}.homebar span{width:36%;height:5px;border-radius:3px;background:#111}.device-punch .homebar span,.device-tablet .homebar span{width:28%;height:4px}.dialog{border:0;border-radius:18px;padding:24px;width:min(520px,calc(100vw - 32px));box-shadow:0 30px 80px #0f172a59}.dialog::backdrop{background:#0f172a73}.dialog h2{margin:0 0 6px;font-size:20px}.dialog-lead{margin:0 0 14px;color:var(--muted);font-size:14px}.qr-box{display:flex;justify-content:center;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px}.qr-box img{width:min(440px,60vh);max-width:100%;height:auto;image-rendering:pixelated}.qr-box img[hidden]{display:none}.qr-warn{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:#fff7e6;color:#8a5300;font-size:13px}.qr-url{display:flex;gap:8px;margin-top:12px}.qr-url input{flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--muted)}.qr-url .btn,.dialog-actions .btn{color:var(--text);border-color:var(--line);background:#fff}.dialog-actions .btn-primary{color:#fff;background:var(--brand);border-color:transparent}.dialog-note{margin:12px 0 0;font-size:12px;color:var(--muted)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#10203f;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;transition:.2s;z-index:50;max-width:calc(100vw - 32px)}.toast.show{opacity:1;transform:translate(-50%)}body[data-mode=mobile] .workspace{grid-template-columns:minmax(0,1fr)}body[data-mode=mobile] .pane-code{position:relative}body[data-mode=mobile] .splitter,body[data-mode=mobile][data-pane=code] .pane-preview,body[data-mode=mobile][data-pane=preview] .pane-code,body[data-mode=mobile] .preview-bar{display:none}body[data-mode=mobile] .stage{padding:0}body[data-mode=mobile] .mobile-switch{display:flex;background:#ffffff1a;border-radius:9px;padding:3px}body[data-mode=mobile] .seg{border:0;background:none;color:#cbd5e1;padding:6px 12px;border-radius:7px;cursor:pointer;font-size:14px}body[data-mode=mobile] .seg.active{background:#fff;color:var(--text);font-weight:700}body[data-mode=mobile] .brand-name,body[data-mode=mobile] .toggle,body[data-mode=mobile] .hint,body[data-mode=mobile] .btn span{display:none}body[data-mode=mobile] .btn{padding:0 10px}body[data-mode=mobile] .actions{gap:6px}body[data-mode=mobile] .bottom[data-open=true]{position:absolute;left:0;right:0;bottom:0;height:min(60%,420px);z-index:20;box-shadow:0 -12px 30px #0f172a2e;border-radius:14px 14px 0 0}body[data-mode=mobile] .editor .cm-editor{font-size:14px}@media(max-width:1100px){.toggle span{display:none}}.line-hint{flex:none;padding:7px 14px;font-size:13px;border-top:1px solid var(--line);background:#fff5e6;color:#7a4a00}.line-hint.error{background:#fdecea;color:#a1231a}.line-hint[hidden]{display:none}.keybar{display:none;flex:none;gap:6px;padding:6px 8px;overflow-x:auto;background:#eef1f6;border-top:1px solid var(--line);-webkit-overflow-scrolling:touch;scrollbar-width:none}.keybar button{flex:none;min-width:40px;height:38px;padding:0 10px;border:1px solid #cfd6e1;border-radius:8px;background:#fff;font:600 17px ui-monospace,Menlo,monospace;color:var(--text);touch-action:manipulation}.keybar button:active{background:#dbe6ff}@media(pointer:coarse){.keybar{display:flex}.hint{display:none}.filetab,.btab{min-height:40px}.editor .cm-gutters{min-width:0}}body.editing .bottom,body.editing .line-hint{display:none}@media(max-height:540px){body[data-mode=mobile]{--top-h: 44px}body[data-mode=mobile] .filetab{height:32px;min-height:32px;font-size:13px}body[data-mode=mobile] .filetabs{padding-top:4px}body[data-mode=mobile] .keybar{padding:4px 6px}body[data-mode=mobile] .keybar button{height:32px;min-width:36px;font-size:15px}body.editing .topbar,body.editing .filetabs{display:none}}.workspace,.pane,.editor,.keybar{min-width:0}.btoggle{margin-left:auto}.bsummary+.hint{margin-left:0}.problem .pmsg{min-width:0;overflow-wrap:anywhere}body[data-mode=mobile] .problem{grid-template-columns:auto 1fr;row-gap:3px}body[data-mode=mobile] .problem .pmsg{grid-column:1 / -1}