:root{--bg: #efefef;--panel: #ffffff;--line: #d1d6dd;--line-strong: #b5bdc8;--text: #1a2a3a;--muted: #65758a;--accent: #1b8ad8;--accent-soft: #e3f2fc;--code-bg: #f7f9fc;--sidebar-width: 40px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,Helvetica Neue,Arial,sans-serif}#app-shell{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr) 360px;grid-template-rows:56px minmax(0,1fr);width:100%;height:100%;transition:grid-template-columns .18s ease}body.code-collapsed #app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr) 0}.topbar{grid-column:1 / 4;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px #0000000a;z-index:6}.brand{display:flex;align-items:center;gap:10px}.brand h1{margin:0;font-size:1.02rem;font-weight:700;color:#245d8f}.github-brand-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:#24292f;text-decoration:none;flex:0 0 auto}.github-brand-link:hover,.github-brand-link:focus-visible{background:#f0f4f8;outline:none}.github-brand-link .btn-icon{color:currentColor}.doc-name{display:inline-flex;align-items:center;min-width:72px;max-width:220px;min-height:28px;padding:3px 7px;border:1px solid transparent;border-radius:8px;font-size:.86rem;color:var(--muted);outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-name:hover,.doc-name:focus{border-color:var(--line-strong);background:#f9fcff;color:var(--text)}.actions{display:flex;align-items:center;gap:8px}button{border:1px solid var(--line-strong);background:#fff;color:var(--text);border-radius:8px;min-height:34px;padding:7px 10px;font-size:.84rem;cursor:pointer}button:hover{border-color:var(--accent);background:#f9fcff}button.active{border-color:var(--accent);background:var(--accent-soft)}.sidebar{position:relative;background:var(--panel);border-right:1px solid var(--line);overflow:hidden}.sidebar-scroll-content{height:100%;padding:6px 4px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;gap:5px}.sidebar-scroll-content::-webkit-scrollbar{display:none}.sidebar-scroll-control{position:absolute;left:4px;z-index:3;width:100%;width:32px;min-height:22px;padding:0;border-color:transparent;background-color:#ffffffe0;background-position:center;background-repeat:no-repeat;background-size:22px 10px;opacity:0;pointer-events:none;transition:opacity .12s ease}.sidebar-scroll-control:hover{border-color:transparent;background-color:#fffffff5}.sidebar .sidebar-scroll-control{background-position:center;background-repeat:no-repeat;background-size:22px 10px}.sidebar .sidebar-scroll-up{top:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M3 9 L12 3 L21 9' fill='none' stroke='%231b8ad8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.sidebar .sidebar-scroll-down{bottom:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M3 3 L12 9 L21 3' fill='none' stroke='%231b8ad8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.sidebar.can-scroll-up .sidebar-scroll-up,.sidebar.can-scroll-down .sidebar-scroll-down{opacity:1;pointer-events:auto}.sidebar h2{width:100%;height:1px;margin:10px 0 4px;border-top:1px solid var(--line);color:transparent;font-size:0;line-height:0}.sidebar h2:first-of-type{display:none}.tool-grid,.selection-grid,.scene-ops{width:100%;display:grid;grid-template-columns:1fr;gap:6px}.viewport-wrap{position:relative;min-width:0;min-height:0;background:#d8d8d8}#viewport{width:100%;height:100%;display:block}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--accent)}.btn-icon svg{display:block;width:100%;height:100%}.tool-btn,.selection-grid .icon-btn,.scene-ops .icon-btn{width:32px;min-height:32px;padding:3px;border-radius:8px;border-color:transparent;justify-self:center}.tool-btn:hover,.selection-grid .icon-btn:hover,.scene-ops .icon-btn:hover,.tool-btn.active,.selection-grid .icon-btn.active,.scene-ops .icon-btn.active{border-color:var(--accent)}.tool-btn .btn-label,.selection-grid .btn-label,.scene-ops .btn-label{display:none}.actions .icon-btn{border:1px solid var(--line-strong);background:#fff;color:var(--text);border-radius:8px;padding:0 10px;min-height:32px;text-decoration:none}.actions .icon-btn:hover{border-color:var(--accent);background:#f9fcff}.actions .icon-btn:disabled{cursor:not-allowed;opacity:.45}.actions .btn-icon{width:16px;height:16px}.actions .btn-label{font-weight:600}.actions .code-toggle{width:34px;min-width:34px;padding:0}.actions .code-toggle .btn-label{display:none}.export-menu-wrap{position:relative;display:inline-flex}.export-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:12;min-width:160px;padding:5px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;box-shadow:0 10px 28px #14233229}.export-menu[hidden]{display:none}.export-menu button{display:block;width:100%;min-height:32px;padding:7px 9px;border-color:transparent;text-align:left;white-space:nowrap}.export-menu button:hover{border-color:transparent;background:var(--accent-soft)}#overlay{position:absolute;left:10px;bottom:10px;min-width:260px;padding:10px;border-radius:8px;border:1px solid #c9d1dc;background:#ffffffe6;font-size:.76rem;color:#2a3a4f}#overlay strong{color:#1b8ad8}.code-panel{min-width:0;background:#fff;border-left:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px;transition:opacity .14s ease;overflow:hidden}body.code-collapsed .code-panel{opacity:0;pointer-events:none;padding:0;border-left:none;overflow:hidden}.code-panel h2{margin:2px 0 0;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:#4f6580}.panel-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.panel-tab{min-height:32px;padding:6px 10px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.panel-page{display:none;min-height:0}.panel-page.active{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-height:0}.panel-page.active[data-panel-page-content=settings]{overflow-y:auto;overscroll-behavior:contain;padding-right:2px}.code-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.code-header h2{margin:2px 0 0}.code-actions{display:flex;align-items:center;gap:6px}.code-tool-btn{min-height:28px;min-width:32px;padding:4px 7px}.code-tool-btn .btn-label{display:none}.code-tool-btn.copied,.code-tool-btn.compressed{border-color:#1f9b62;background:#e8f8ef}.code-tool-btn.copy-failed,.code-tool-btn.copy-empty{border-color:#d06a6a;background:#fff0f0}#code-view{margin:0;flex:1 1 auto;min-height:0;border:1px solid var(--line);border-radius:8px;background:var(--code-bg);padding:10px;font-size:.76rem;line-height:1.35;white-space:pre-wrap;word-break:break-word;overflow:auto}.settings-list{display:grid;grid-template-columns:1fr;gap:12px}.settings-btn{display:inline-flex;align-items:center;width:100%;justify-content:flex-start;font-weight:600}.settings-field{display:grid;grid-template-columns:1fr;gap:6px;color:#4f6580;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.settings-field select,.settings-field input[type=range]{width:100%}.settings-field select{min-height:34px;border:1px solid #b7c4d3;border-radius:8px;background:#fff;color:var(--ink);padding:6px 8px;font:inherit;text-transform:none;letter-spacing:normal}.settings-field output{color:#1f7fc8;font-size:.72rem;text-transform:none}@media (max-width: 1120px){#app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) 260px}.topbar{grid-column:1 / 3}.code-panel{grid-column:1 / 3;border-left:none;border-top:1px solid var(--line)}body.code-collapsed #app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr);grid-template-rows:56px minmax(0,1fr)}body.code-collapsed .code-panel{display:none}}@media (max-width: 760px){html,body{overflow:hidden}#app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr);grid-template-rows:auto minmax(260px,1fr) auto;height:100dvh;overflow:hidden}.topbar{grid-column:1 / 3}.sidebar{grid-column:1;grid-row:2}.viewport-wrap{grid-column:2;grid-row:2}.code-panel{grid-column:1 / 3;grid-row:3}.topbar{min-height:44px;gap:6px;padding:5px 6px}.brand{flex:0 0 auto;gap:6px;min-width:0}.brand h1{max-width:78px;font-size:.76rem;line-height:1.05}.doc-name,.actions .btn-label{display:none}.actions{flex:1 1 auto;justify-content:flex-end;gap:4px;min-width:0}.actions .icon-btn,.actions button{min-width:32px;min-height:30px;padding:5px 7px;font-size:.72rem}.sidebar{border-right:1px solid var(--line);border-bottom:none;overflow:hidden}.sidebar-scroll-content{gap:4px;padding:5px 4px}.sidebar h2{margin:8px 0 2px}.tool-grid,.selection-grid,.scene-ops{gap:4px}.tool-grid,.selection-grid,.scene-ops{grid-template-columns:1fr}.tool-btn,.selection-grid .icon-btn,.scene-ops .icon-btn{width:30px;min-height:30px;padding:2px}.viewport-wrap{min-height:260px}.actions .code-toggle{width:30px;min-width:30px;padding:0}.code-panel{max-height:36dvh;padding:6px;overflow:auto}body.code-collapsed #app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr);grid-template-rows:auto minmax(260px,1fr)}.panel-tabs{gap:4px}.panel-tab{min-height:28px;padding:5px 8px;font-size:.68rem}.panel-page.active{flex:0 1 auto;gap:6px}#code-view{max-height:28dvh}.settings-list{gap:7px}.settings-btn{min-height:30px;padding:5px 8px;font-size:.72rem}.settings-field{gap:4px;font-size:.66rem}.settings-field select{min-height:30px;padding:5px 7px}}