*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f5f5f7;--sidebar-bg: #ffffff;--surface: #f0f0f2;--surface-hover: #e5e5ea;--border: #d1d1d6;--text: #1d1d1f;--text-secondary: #6e6e73;--text-tertiary: #aeaeb2;--accent: #0071e3;--accent-hover: #0077ed;--accent-text: #ffffff;--canvas-bg: #e8e8ed;--shadow-sm: 0 1px 3px rgba(0,0,0,.06);--shadow-md: 0 4px 12px rgba(0,0,0,.08);--radius: 10px;--radius-sm: 6px;--upload-bg: rgba(0,113,227,.04);--upload-border: rgba(0,113,227,.25);--hint-bg: rgba(0,0,0,.65);--hint-text: #ffffff;--track-bg: #d1d1d6;--track-fill: var(--accent)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0d0d0d;--sidebar-bg: #161618;--surface: #1c1c1e;--surface-hover: #2c2c2e;--border: #38383a;--text: #f5f5f7;--text-secondary: #98989d;--text-tertiary: #636366;--accent: #2997ff;--accent-hover: #4dabff;--accent-text: #ffffff;--canvas-bg: #111113;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 12px rgba(0,0,0,.4);--upload-bg: rgba(41,151,255,.06);--upload-border: rgba(41,151,255,.3);--hint-bg: rgba(0,0,0,.8);--hint-text: #d1d1d6;--track-bg: #38383a}}:root[data-theme=dark]{--bg: #0d0d0d;--sidebar-bg: #161618;--surface: #1c1c1e;--surface-hover: #2c2c2e;--border: #38383a;--text: #f5f5f7;--text-secondary: #98989d;--text-tertiary: #636366;--accent: #2997ff;--accent-hover: #4dabff;--accent-text: #ffffff;--canvas-bg: #111113;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 12px rgba(0,0,0,.4);--upload-bg: rgba(41,151,255,.06);--upload-border: rgba(41,151,255,.3);--hint-bg: rgba(0,0,0,.8);--hint-text: #d1d1d6;--track-bg: #38383a}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:grid;grid-template-columns:320px 1fr;height:100vh}.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.sidebar-header{display:flex;align-items:flex-start;justify-content:space-between}h1{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;line-height:1.2}.subtitle{font-size:.78rem;color:var(--text-tertiary);margin-top:2px;font-weight:400}.icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:background .15s,color .15s,border-color .15s;flex-shrink:0}.icon-btn:hover{background:var(--surface-hover);color:var(--text)}.icon-sun{display:none}.icon-moon{display:block}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .icon-sun{display:block}:root:not([data-theme=light]) .icon-moon{display:none}}:root[data-theme=dark] .icon-sun{display:block}:root[data-theme=dark] .icon-moon{display:none}:root[data-theme=light] .icon-sun{display:none}:root[data-theme=light] .icon-moon{display:block}.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);background:transparent;transition:border-color .2s,background .2s,box-shadow .2s}.upload-zone:hover{border-color:var(--accent);background:var(--upload-bg)}.upload-zone.dragover{border-color:var(--accent);background:var(--upload-bg);box-shadow:0 0 0 3px #0071e31f}.upload-zone.has-file{border-color:var(--accent);border-style:solid;background:var(--upload-bg)}.upload-zone input[type=file]{display:none}.upload-zone label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;cursor:pointer;text-align:center}.upload-icon-svg{color:var(--text-tertiary);margin-bottom:2px;transition:color .2s}.upload-zone:hover .upload-icon-svg,.upload-zone.dragover .upload-icon-svg{color:var(--accent)}.upload-text{font-size:.88rem;font-weight:500;color:var(--text)}.upload-hint{font-size:.72rem;color:var(--text-tertiary)}.controls{display:flex;flex-direction:column;gap:4px}.control-section{background:var(--surface);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:14px}.section-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--text-tertiary)}.control-group{display:flex;flex-direction:column;gap:6px}.control-header{display:flex;justify-content:space-between;align-items:baseline}.control-header label{font-size:.82rem;font-weight:500;color:var(--text-secondary)}.value-label{font-size:.75rem;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--track-bg);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--sidebar-bg);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .1s,box-shadow .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:var(--shadow-md)}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.05)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--sidebar-bg);box-shadow:var(--shadow-sm);cursor:pointer}.checkbox-group label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.82rem;color:var(--text-secondary);padding:6px 0}.checkbox-group input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}.checkbox-label{font-weight:400}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;font-size:.78rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s}.btn-secondary:hover{background:var(--surface-hover);color:var(--text)}#download-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--accent);color:var(--accent-text);border:none;border-radius:var(--radius);padding:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,opacity .15s,transform .1s}#download-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}#download-btn:active:not(:disabled){transform:translateY(0)}#download-btn:disabled{opacity:.3;cursor:not-allowed}.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:10px}.status{font-size:.75rem;color:var(--text-tertiary);text-align:center;line-height:1.4}.viewport{position:relative;overflow:hidden;background:var(--canvas-bg)}.viewport canvas{display:block;width:100%;height:100%}.viewport-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:var(--hint-bg);color:var(--hint-text);font-size:.75rem;font-weight:500;padding:8px 16px;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .3s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}.viewport-hint.visible{opacity:1}@media(max-width:700px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);max-height:45vh}.viewport{min-height:55vh}}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}