:root{color:#17312b;font-synthesis:none;text-rendering:optimizelegibility;color-scheme:light;background:#edf3ef;font-family:Inter,PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html{background:#edf3ef;min-width:320px}body{background:radial-gradient(circle at 6% 0,#daefe5db,#0000 30rem),linear-gradient(135deg,#edf3ef 0%,#e8efeb 52%,#f6f8f5 100%);min-width:320px;min-height:100vh;margin:0}button,textarea,input{font:inherit}button{cursor:pointer}button:focus-visible,textarea:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #1f8a7552}.app-shell{flex-direction:column;min-height:100vh;padding:0 24px 18px;display:flex}.topbar{justify-content:space-between;align-items:center;gap:24px;width:100%;max-width:1440px;min-height:78px;margin:0 auto;display:flex}.brand-lockup{align-items:center;gap:13px;min-width:0;display:flex}.brand-mark{background:linear-gradient(145deg,#dff0e8,#eef7f2);border:1px solid #c1d7cd;border-radius:12px;flex:none;place-items:center;width:42px;height:42px;display:grid;box-shadow:0 8px 22px #285c4d1a}.brand-mark svg,.global-actions svg,.run-button svg,.format-button svg,.device svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:20px;height:20px}.brand-mark svg{color:#197967}.brand-lockup h1{color:#142a25;letter-spacing:-.02em;margin:0;font-size:17px;font-weight:800}.brand-lockup p{color:#70817a;margin:4px 0 0;font-size:12px}.global-actions{align-items:center;gap:8px;display:flex}.icon-button{color:#3f5650;background:#ffffffbd;border:1px solid #d5ded9;border-radius:11px;place-items:center;width:38px;height:38px;padding:0;transition:border-color .16s,background .16s,color .16s,transform .16s;display:grid;box-shadow:0 5px 15px #24493e0a}.icon-button:hover:not(:disabled){color:#167765;background:#fff;border-color:#8bb8aa;transform:translateY(-1px)}.icon-button:disabled{cursor:not-allowed;opacity:.38}.workspace{flex:1;grid-template-columns:minmax(176px,210px) minmax(370px,.94fr) minmax(440px,1.24fr);gap:18px;width:100%;max-width:1440px;min-height:0;margin:0 auto;display:grid}.tool-rail,.editor-pane,.preview-pane{background:#ffffffd1;border:1px solid #d0dcd6f2;border-radius:14px;box-shadow:0 15px 38px #22453a14}.tool-rail{flex-direction:column;align-self:stretch;gap:5px;padding:10px;display:flex}.tool-button{color:#263c36;text-align:left;background:0 0;border:1px solid #0000;border-radius:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;min-height:76px;padding:14px 12px;transition:background .16s,border-color .16s,transform .16s;display:flex}.tool-button:hover{background:#f4faf7;border-color:#c8ded4;transform:translate(2px)}.tool-button.is-active{color:#145d52;background:linear-gradient(135deg,#eaf7f0,#e4f2ed);border-color:#badacf;box-shadow:inset 0 0 0 1px #fff9}.tool-button span{font-size:14px;font-weight:800}.tool-button small{color:#75847e;font-size:11px}.editor-pane,.preview-pane{flex-direction:column;min-width:0;display:flex;overflow:hidden}.editor-head,.preview-head{background:#ffffffa8;justify-content:space-between;align-items:flex-start;gap:14px;padding:17px 17px 13px;display:flex}.editor-head{border-bottom:1px solid #e6ece8;min-height:87px}.eyebrow{color:#268475;letter-spacing:.16em;margin:0 0 5px;font-size:10px;font-weight:800}.editor-head h2{color:#1b2c28;letter-spacing:-.03em;margin:0;font-size:19px}.editor-head p:last-child{color:#718079;max-width:380px;margin:5px 0 0;font-size:12px;line-height:1.55}.editor-actions{flex:none;align-items:center;gap:8px;display:flex}.toggle{color:#576d65;user-select:none;background:#f8fbf9;border:1px solid #d9e4de;border-radius:10px;align-items:center;gap:7px;min-height:38px;padding:0 10px;font-size:12px;display:inline-flex}.toggle input{opacity:0;width:1px;height:1px;position:absolute}.toggle-box{background:#fff;border:1px solid #a9bdb4;border-radius:4px;width:16px;height:16px;display:inline-block;position:relative}.toggle-box:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:9px;transition:transform .14s;position:absolute;top:1px;left:4px;transform:rotate(45deg)scale(0)}.toggle input:checked+.toggle-box{background:#237b6c;border-color:#237b6c}.toggle input:checked+.toggle-box:after{transform:rotate(45deg)scale(1)}.run-button{color:#fff;background:#237d6d;border:1px solid #247e6d;border-radius:10px;justify-content:center;align-items:center;gap:6px;min-height:38px;padding:0 13px;font-size:12px;font-weight:800;transition:background .16s,transform .16s;display:inline-flex;box-shadow:0 7px 14px #237d6d2b}.run-button:hover{background:#176a5c;transform:translateY(-1px)}.run-button svg{fill:currentColor;stroke:none;width:15px;height:15px}.subtools{background:#fbfdfc;border-bottom:1px solid #e9efeb;align-items:center;gap:6px;min-height:43px;padding:7px 12px;display:none;overflow-x:auto}.subtools.is-visible{display:flex}.chip,.format-button{color:#6a7b74;background:0 0;border:1px solid #0000;border-radius:7px;flex:none;place-items:center;min-width:34px;height:29px;padding:0 9px;font-size:11px;font-weight:800;transition:background .14s,border-color .14s,color .14s;display:inline-grid}.chip:hover,.format-button:hover{color:#1b7665;background:#eef8f3;border-color:#c4ddd1}.chip.is-active{color:#1b6f60;background:#e4f2ec;border-color:#b7d9cc}.format-button{min-width:30px;padding:0 6px;font-size:13px}.format-button svg{width:15px;height:15px}.format-italic{font-family:Georgia,serif;font-style:italic}.code-wrap{background:#111a1b;flex:1;grid-template-columns:46px minmax(0,1fr);min-height:430px;display:grid;overflow:hidden}.line-numbers,#codeEditor{tab-size:2;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:13px;line-height:1.72}.line-numbers{color:#6d7e7b;text-align:right;white-space:pre;user-select:none;background:#151f20;border-right:1px solid #273333;padding:17px 12px 17px 0;overflow:hidden}#codeEditor{resize:none;color:#e6f1ed;caret-color:#64d6bd;background:#111819;border:0;outline:0;width:100%;min-width:0;min-height:100%;padding:17px 17px 24px;overflow:auto}#codeEditor::selection{background:#58c4aa47}.statusbar{color:#91a29e;background:#151f20;border-top:1px solid #263333;justify-content:space-between;align-items:center;gap:10px;min-height:34px;padding:0 13px;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;display:flex}.preview-pane{background:#fafdfbb8}.preview-head{border-bottom:1px solid #e4ece7;align-items:center;min-height:87px}.preview-title{flex-direction:column;gap:4px;min-width:0;display:flex}.preview-title strong{color:#1d2d29;font-size:14px}.preview-title span{color:#7a8d84;font-size:11px}.preview-title span.is-error{color:#b95445}.device-switch{background:#eef5f0;border:1px solid #dce8e1;border-radius:10px;align-items:center;gap:2px;padding:4px;display:flex}.device{color:#657b72;background:0 0;border:1px solid #0000;border-radius:7px;place-items:center;width:34px;height:32px;padding:0;transition:background .14s,border-color .14s,color .14s;display:grid}.device svg{width:17px;height:17px}.device:hover,.device.is-active{color:#276f62;background:#fff;border-color:#d0e1d8;box-shadow:0 3px 8px #26564714}.preview-stage{background-color:#e3ebe5;background-image:linear-gradient(45deg,#ffffff7a 25%,#0000 25%),linear-gradient(-45deg,#ffffff7a 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ffffff7a 75%),linear-gradient(-45deg,#0000 75%,#ffffff7a 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;flex:1;justify-content:center;align-items:center;min-height:550px;padding:12px;display:flex;overflow:auto}#webPreview,.preview-surface{background:#fff;border:1px solid #d4ded8;border-radius:11px;width:100%;height:100%;min-height:526px;transition:width .2s,min-height .2s;display:block;box-shadow:0 11px 26px #274b3f1c}#webPreview{border:0}.preview-stage[data-size=desktop]>#webPreview,.preview-stage[data-size=desktop]>.preview-surface{width:min(1024px,100% - 2px)}.preview-stage[data-size=tablet]>#webPreview,.preview-stage[data-size=tablet]>.preview-surface{width:min(768px,100% - 2px)}.preview-stage[data-size=mobile]>#webPreview,.preview-stage[data-size=mobile]>.preview-surface{width:min(390px,100% - 2px)}.preview-surface{overflow:auto}.surface-pad{justify-content:center;align-items:center;width:100%;min-height:100%;padding:24px;display:flex}.surface-message{text-align:center;background:#f9fdfaeb;border:1px solid #d8e9df;border-radius:18px;max-width:360px;padding:28px}.surface-message.error{background:#fff8f6;border-color:#f0d3cd}.surface-message h3{color:#285e51;margin:0;font-size:16px}.surface-message.error h3{color:#a84d42}.surface-message p{color:#75867e;margin:8px 0 0;font-size:12px;line-height:1.65}.svg-preview{object-fit:contain;width:min(100%,720px);height:auto;max-height:100%;display:block}.diagram-box{background:#fff;border:1px solid #dbe8e0;border-radius:14px;justify-content:center;align-items:center;width:100%;min-height:300px;padding:14px;display:flex;overflow:auto}.diagram-box svg,.mermaid-slot svg{max-width:100%;height:auto;margin:0 auto;display:block}.document-preview{color:#263d36;background:#fff;border:1px solid #e0ebe4;border-radius:18px;width:min(880px,100%);margin:0 auto;padding:clamp(20px,4vw,40px);font-size:14px;line-height:1.78;box-shadow:0 12px 26px #2a544412}.document-preview h1,.document-preview h2,.document-preview h3{color:#18352d;letter-spacing:-.03em;line-height:1.24}.document-preview h1{margin:0 0 18px;font-size:clamp(27px,4vw,38px)}.document-preview h2{margin:28px 0 10px;font-size:22px}.document-preview h3{font-size:18px}.document-preview p,.document-preview ul,.document-preview ol{margin:10px 0}.document-preview a{color:#187865;text-underline-offset:3px}.document-preview blockquote{color:#5d746a;background:#f2f9f5;border-left:3px solid #72b5a1;margin:18px 0;padding:8px 16px}.document-preview code{color:#236a5c;background:#edf5f0;border-radius:5px;padding:2px 5px;font-family:SFMono-Regular,Consolas,monospace;font-size:.9em}.document-preview pre{color:#e8faf3;background:#122323;border-radius:12px;margin:18px 0;padding:16px;overflow:auto}.document-preview pre code{color:inherit;background:0 0;padding:0}.document-preview table{border-collapse:collapse;width:100%;margin:16px 0;font-size:13px}.document-preview th,.document-preview td{text-align:left;border:1px solid #dce9e2;padding:8px 10px}.document-preview th{color:#285e50;background:#f0f8f3}.document-preview hr{border:0;border-top:1px solid #dce9e2;margin:24px 0}.mermaid-slot{text-align:center;background:#fbfefc;border:1px dashed #c7ded3;border-radius:12px;min-height:120px;margin:18px 0;padding:12px}.mermaid-slot span{color:#70857b;font-size:12px}.mermaid-slot.has-error{color:#a84d42;background:#fff8f6;border-color:#edc6bd}.footer-note{color:#789088;justify-content:center;align-items:center;gap:8px;min-height:38px;font-size:11px;display:flex}.local-dot{background:#37a488;border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 0 4px #37a4881f}.footer-separator{color:#b0c0b9}.is-hidden{display:none!important}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=1160px){.workspace{grid-template-columns:178px minmax(340px,.95fr) minmax(390px,1.2fr);gap:12px}.app-shell{padding-left:14px;padding-right:14px}}@media (width<=960px){.workspace{grid-template-columns:190px minmax(0,1fr)}.preview-pane{grid-column:1/-1;min-height:540px}.editor-pane{min-height:620px}}@media (width<=680px){.app-shell{padding:0 10px 10px}.topbar{flex-direction:column;align-items:flex-start;gap:13px;padding:14px 2px 8px}.global-actions{justify-content:flex-end;align-self:stretch}.workspace{flex-direction:column;gap:10px;display:flex}.tool-rail{flex-direction:row;align-items:stretch;padding:7px;overflow-x:auto}.tool-button{justify-content:center;align-items:flex-start;min-width:148px;min-height:66px;padding:10px}.tool-button:hover{transform:translateY(-1px)}.editor-pane{min-height:540px}.preview-pane{min-height:480px}.editor-head,.preview-head{padding:14px 13px 11px}.editor-head{flex-direction:column}.editor-actions{justify-content:flex-end;align-self:stretch}.preview-stage{min-height:440px;padding:8px}#webPreview,.preview-surface{min-height:424px}.surface-pad{padding:12px}.footer-note{text-align:center;flex-wrap:wrap;padding:8px 0 2px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}