*,*:before,*:after{box-sizing:border-box}html,body{height:100%}:root{color-scheme:light;--bg: #ffffff;--text: #111111;--text-muted: #6a6a6a;--text-subtle: #4a4a4a;--border: #e5e5e5;--border-muted: #d4d4d4;--surface: #fafafa;--surface-strong: #ffffff;--surface-muted: #f7f7f7;--surface-soft: #f5f5f5;--surface-hover: #f3f4f6;--accent: #111111;--accent-contrast: #ffffff;--overlay-surface: rgba(255, 255, 255, .95);--overlay-chip: rgba(255, 255, 255, .8);--muted-disabled: #d1d5db;--viewer-bg: #ffffff;--viewer-face: #f5f5f5;--viewer-wire: #777777;--viewer-wire-active: #1e4ed8;--viewer-grid: #eeeeee;--viewer-grid-center: #cccccc;--viewer-guide: #888888;--viewer-axis-major: #22c55e;--viewer-axis-minor: #ef4444;--viewer-axis-bounds: #9ca3af}[data-theme=dark]{color-scheme:dark;--bg: #0f1115;--text: #f3f4f6;--text-muted: #9ca3af;--text-subtle: #cbd5e1;--border: #2a2f3a;--border-muted: #3a3f4a;--surface: #151a22;--surface-strong: #0f1115;--surface-muted: #1d2330;--surface-soft: #1b202a;--surface-hover: #1f2532;--accent: #f3f4f6;--accent-contrast: #111111;--overlay-surface: rgba(15, 17, 21, .95);--overlay-chip: rgba(15, 17, 21, .8);--muted-disabled: #4b5563;--viewer-bg: #0f1115;--viewer-face: #e2e8f0;--viewer-wire: #9ca3af;--viewer-wire-active: #60a5fa;--viewer-grid: #2a2f3a;--viewer-grid-center: #3f4756;--viewer-guide: #94a3b8;--viewer-axis-major: #4ade80;--viewer-axis-minor: #f87171;--viewer-axis-bounds: #94a3b8}body{margin:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;color:var(--text);background:var(--bg)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.brand{font-size:18px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.app-shell{flex:1;display:grid;grid-template-columns:220px 1fr;min-height:0;height:100%}.sidebar{border-right:1px solid var(--border);padding:32px 24px;display:grid;gap:24px;align-content:start}.theme-toggle{border:1px solid var(--border);background:var(--surface-strong);color:var(--text);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;cursor:pointer;width:fit-content}.theme-toggle:hover{border-color:var(--accent)}.nav{display:grid;gap:12px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}.nav a{padding:6px 0;border-bottom:1px solid transparent;color:inherit}.nav a.active{border-bottom-color:var(--accent)}.app-main{flex:1;padding:48px 64px;display:grid;gap:24px;width:100%;height:100%;min-width:0;min-height:0}.intro{display:grid;gap:24px;max-width:960px}.app-main h1{margin:0;font-size:48px;font-weight:600;letter-spacing:-.02em}.app-main p{margin:0;font-size:16px;color:var(--text-subtle)}.card{border:1px solid var(--border);padding:24px;display:grid;gap:12px;background:var(--surface)}.home-viewer{display:grid;gap:12px;height:100%;min-height:0}.home-viewer-frame{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;border:1px solid var(--border);background:var(--surface-strong)}.home-viewer-frame canvas{display:block;width:100%;height:100%}.home-viewer-overlay{position:absolute;inset:0;pointer-events:none}.home-viewer-fps{position:absolute;right:12px;bottom:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--overlay-chip);padding:4px 6px;border-radius:6px;pointer-events:none}.home-viewer-caption{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.card h2{margin:0;font-size:20px}.card p{margin:0;color:var(--text-subtle)}.widget-library{display:grid;gap:20px;width:100%}.section-header{display:grid;gap:8px}.section-header h2{margin:0;font-size:24px}.section-header p{margin:0;color:var(--text-subtle)}.widget-layout{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:start}.widget-menu{display:grid;gap:12px;padding:8px 0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;position:sticky;top:24px;align-self:start}.widget-menu a{border-bottom:1px solid transparent;padding-bottom:4px}.widget-menu a:hover{border-bottom-color:var(--accent);text-decoration:none}.widget-list{display:grid;gap:24px}.widget-row{display:grid;gap:12px}.widget-heading{margin:0;font-size:16px;text-transform:uppercase;letter-spacing:.08em}.widget-card{border:1px solid var(--border);padding:20px;display:grid;gap:10px;background:var(--surface-strong)}.widget-title{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.widget-content{font-size:20px;color:var(--text)}.widget-meta{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.viewer-frame{width:100%;min-height:240px;aspect-ratio:16 / 9;border:1px solid var(--border);background:var(--surface-strong)}.viewer-frame canvas{display:block;width:100%;height:100%}.code-block{margin:0;padding:16px;border:1px solid var(--border);background:var(--surface-muted);font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre;color:var(--text)}@media(max-width:900px){.widget-layout{grid-template-columns:1fr}.widget-menu{position:static;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}.primary{padding:10px 18px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-contrast);font-size:14px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;width:fit-content}.primary:hover{background:var(--bg);color:var(--accent)}.app-footer{padding:16px 48px;border-top:1px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.page{display:grid;gap:24px}.page-full{height:100vh;margin:-48px -64px;min-height:0}.page-header h1{margin:0;font-size:36px;letter-spacing:-.02em}.page-header p{margin:0;color:var(--text-subtle)}.page-card{border:1px solid var(--border);padding:24px;display:grid;gap:12px;background:var(--surface);max-width:640px}.home-view{position:relative;min-height:0;min-width:0;height:100%;overflow:hidden}.toolbox{position:absolute;top:24px;left:24px;width:320px;max-height:calc(100% - 48px);overflow:auto;border:1px solid var(--border);background:var(--overlay-surface);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;gap:16px;padding:16px}.toolbox-actions{left:auto;right:24px;top:24px;width:auto;min-width:120px;padding:8px;align-content:start;justify-items:center;border-radius:12px}.toolbox-actions-grid{display:flex;gap:10px;justify-content:center}.action-button{width:36px;height:36px;border-radius:10px;border:none;background:var(--surface-strong);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,background .2s ease}.action-button svg{width:18px;height:18px;fill:none;stroke:var(--text-muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.action-label{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-muted)}.action-button[data-active=true]{background:var(--accent)}.action-button[data-active=true] svg{stroke:var(--accent-contrast)}.action-button[data-active=true] .action-label{color:var(--accent-contrast)}.action-button:hover{background:var(--surface-hover)}.action-button[data-active=true]:hover{background:var(--accent)}.toolbox-header{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.toolbox-content{display:grid;gap:16px}.camera-view{display:grid;gap:8px}.camera-view-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.camera-view-frame{width:100%;aspect-ratio:1 / 1;border:1px solid var(--border);border-radius:12px;background:var(--surface-strong);overflow:hidden}.toolbox-tabs{display:flex;gap:8px;flex-wrap:nowrap}.tab{border:1px solid var(--border);background:var(--surface-strong);color:var(--text);text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding:6px 10px;cursor:pointer;min-width:0;flex:0 0 auto}.tab.active{border-color:var(--accent);background:var(--accent);color:var(--accent-contrast)}.toolbox .page-card{max-width:none;padding:16px;background:var(--surface-strong)}.form-grid{display:grid;gap:12px}.form-field{display:grid;gap:6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.form-field.checkbox{grid-template-columns:1fr auto;align-items:center}.form-field.checkbox input{width:16px;height:16px}.form-field input,.form-field select{border:1px solid var(--border);background:var(--surface-strong);color:var(--text);padding:8px 10px;font-size:14px;text-transform:none;letter-spacing:normal}.form-field input:focus,.form-field select:focus{outline:none;border-color:var(--accent)}.point-widget{display:grid;gap:8px}.point-widget-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.point-widget-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.point-field{display:grid;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.point-field input{border:1px solid var(--border);background:var(--surface-strong);color:var(--text);padding:6px 8px;font-size:13px;width:100%;min-width:0}.point-field input:focus{outline:none;border-color:var(--accent)}.list{display:grid;gap:8px;padding-top:8px;font-size:12px;color:var(--text-subtle)}.list-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.shape-list{display:grid;gap:4px}.shape-list-box{padding:8px;border:1px solid var(--border);background:var(--surface-soft);border-radius:8px}.shape-actions-bar{display:flex;justify-content:flex-end;gap:8px;padding-bottom:6px}.shape-actions-bar .action-button:disabled svg{stroke:var(--muted-disabled)}.shape-divider{height:1px;background:var(--border)}.shape-list-item{border:1px solid var(--border);background:var(--surface-strong);color:var(--text);padding:6px 8px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.shape-list-item[data-active=true]{border-color:var(--accent);background:var(--accent);color:var(--accent-contrast)}.shape-list-item:hover{border-color:var(--accent)}.secondary{padding:6px 12px;border:1px solid var(--accent);background:var(--surface-strong);color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.secondary:disabled{border-color:var(--border-muted);color:var(--text-muted);cursor:not-allowed}.secondary:disabled:hover{background:var(--surface-strong);color:var(--text-muted)}.secondary:hover{background:var(--accent);color:var(--accent-contrast)}@media(max-width:960px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);grid-template-columns:1fr}.nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:6px}.toolbox{position:static;width:100%;max-height:none}.toolbox-actions{width:100%;justify-items:start}.toolbox-actions-grid{justify-items:start;grid-auto-flow:column}}