:root{color:#171713;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#171713;--muted:#77746c;--line:#d9d4ca;--paper:#f8f6f1;--canvas:#f4f1ea;--accent:#ff5c35;background:#e9e5dd;font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100vh}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #ff5c3559}.app-shell{background:var(--paper);min-height:100vh}.topbar{border-bottom:1px solid var(--ink);z-index:5;background:#f8f6f1f0;grid-template-columns:1fr auto 1fr;align-items:center;height:66px;padding:0 18px 0 22px;display:grid;position:relative}.brand{color:var(--ink);letter-spacing:-.03em;align-items:center;gap:10px;font-weight:800;text-decoration:none;display:flex}.brand-mark{color:#fff;background:var(--ink);border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.brand-index{letter-spacing:.08em;color:var(--muted);margin-left:4px;font:500 10px/1 DM Mono,monospace}.topbar-status{color:var(--muted);align-items:center;gap:7px;font-size:12px;display:flex}.status-dot{background:#40a66b;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px #40a66b1f}.primary-button,.dark-button,.ghost-button{cursor:pointer;border:0;justify-content:center;align-items:center;gap:8px;font-weight:700;display:inline-flex}.primary-button{color:#fff;background:var(--accent);border-radius:999px;justify-self:end;padding:11px 16px;box-shadow:inset 0 -2px #0000001f}.primary-button:hover{background:#e94e2b}.workspace{grid-template-columns:260px minmax(460px,1fr) 296px;min-height:calc(100vh - 66px);display:grid}.panel{background:var(--paper);min-width:0;padding:18px}.tool-panel{border-right:1px solid var(--ink)}.inspector-panel{border-left:1px solid var(--ink);overflow-y:auto}.panel-heading{border-bottom:1px solid var(--line);letter-spacing:.14em;color:var(--muted);justify-content:space-between;padding-bottom:15px;font:500 10px/1 DM Mono,monospace;display:flex}.control-section{border-bottom:1px solid var(--line);padding:18px 0}.control-section>label,.label-row label{align-items:center;gap:6px;margin-bottom:10px;font-size:12px;font-weight:700;display:flex}.upload-card{cursor:pointer;text-align:left;background:#f1ede5;border:1px dashed #aaa59b;border-radius:12px;align-items:center;gap:11px;width:100%;padding:13px;transition:all .15s;display:flex}.upload-card:hover{border-color:var(--accent);transform:translateY(-1px)}.upload-icon{background:#fff;border-radius:9px;place-items:center;width:39px;height:39px;display:grid;box-shadow:0 4px 15px #1d191414}.upload-copy{gap:2px;display:grid}.upload-copy strong{font-size:13px}.upload-copy small{color:var(--muted);font:400 9px/1.3 DM Mono,monospace}.file-chip{color:#4e4a43;background:#ebe7de;border-radius:7px;align-items:center;gap:6px;margin-top:9px;padding:7px 9px;font-size:10px;display:flex;overflow:hidden}.file-chip span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.visually-hidden{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch,.custom-color{cursor:pointer;border:1px solid #17171333;border-radius:50%;place-items:center;width:29px;height:29px;display:grid}.swatch.active{outline:2px solid var(--ink);outline-offset:2px}.custom-color{background:#fff;font-weight:500;position:relative;overflow:hidden}.custom-color input{opacity:0;cursor:pointer;width:50px;height:50px;position:absolute}.custom-color span{pointer-events:none}.segmented{background:#ebe7de;border-radius:9px;grid-template-columns:1fr 1fr;padding:3px;display:grid}.segmented button{cursor:pointer;background:0 0;border:0;border-radius:7px;padding:8px;font-size:11px}.segmented button.active{background:#fff;font-weight:700;box-shadow:0 2px 8px #221e1917}.note-card{color:#666159;align-items:flex-start;gap:10px;display:flex}.note-card svg{color:var(--accent);flex:none}.note-card p{margin:0;font-size:10px;line-height:1.6}.stage-column{background:var(--canvas);grid-template-rows:52px minmax(520px,1fr) 42px;min-width:0;display:grid}.stage-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:0 14px;display:flex}.view-tabs{background:#e6e1d8;border-radius:9px;padding:3px;display:flex}.view-tabs button{cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:6px;padding:7px 11px;font-size:11px;display:flex}.view-tabs button.active{background:var(--ink);color:#fff}.stage-meta{color:var(--muted);letter-spacing:.07em;font:500 9px/1 DM Mono,monospace}.stage-frame{min-height:0;position:relative;overflow:hidden}.stage-view{position:absolute;inset:0}.stage-view.hidden{visibility:hidden;pointer-events:none}.pattern-shell,.three-shell{width:100%;height:100%;position:relative;overflow:hidden}.stage-loading{width:100%;height:100%;color:var(--muted);place-items:center;font:500 11px/1 DM Mono,monospace;display:grid}.canvas-badge{color:#fff;letter-spacing:.06em;pointer-events:none;background:#171713db;border-radius:999px;padding:6px 9px;font:500 9px/1 DM Mono,monospace;position:absolute;bottom:14px;left:14px}.stage-footer{border-top:1px solid var(--line);color:var(--muted);align-items:center;gap:20px;padding:0 15px;font-size:9px;display:flex}.stage-footer span{align-items:center;gap:6px;display:flex}.stage-footer span:last-child{margin-left:auto}.legend-line{border-top:1px dashed var(--accent);width:16px;height:0}.legend-line.center{border-color:#777}.size-grid{grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.size-grid button{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:7px;min-width:0;padding:7px 0;font:500 9px/1 DM Mono,monospace}.size-grid button.active{color:#fff;background:var(--ink);border-color:var(--ink)}.microcopy{color:var(--muted);margin:8px 0 0;font-size:9px}.measurement-card{background:#ebe7de;border-radius:10px;grid-template-columns:1fr 1fr;gap:11px 13px;margin:15px 0 0;padding:12px;display:grid}.measurement-card div{gap:3px;display:grid}.measurement-card span{color:var(--muted);font-size:9px}.measurement-card strong{font:500 10px/1 DM Mono,monospace}.sliders{gap:9px;display:grid}.label-row{justify-content:space-between;align-items:center;margin-top:3px;display:flex}.label-row label{margin:0}.label-row output{color:var(--muted);font:500 9px/1 DM Mono,monospace}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:14px;margin:0 0 4px}.stacked-options{gap:6px;display:grid}.stacked-options button{text-align:left;border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:9px;justify-content:space-between;align-items:center;width:100%;padding:9px;display:flex}.stacked-options button span{gap:2px;display:grid}.stacked-options button strong{font-size:10px}.stacked-options button small{color:var(--muted);font-size:8px}.stacked-options button.active{border-color:var(--accent);background:#ff5c350f}.stacked-options button.active svg{color:var(--accent)}.inspector-actions{grid-template-columns:1fr 1fr;gap:7px;padding-top:16px;display:grid}.ghost-button,.dark-button{border-radius:9px;padding:10px;font-size:10px}.ghost-button{border:1px solid var(--line);background:0 0}.dark-button{background:var(--ink);color:#fff}@media (width<=1050px){.workspace{grid-template-columns:220px minmax(420px,1fr) 260px}.brand-index,.stage-footer span:last-child{display:none}}@media (width<=820px){.topbar{grid-template-columns:1fr auto}.topbar-status{display:none}.workspace{flex-direction:column;display:flex}.tool-panel,.inspector-panel{border:0}.tool-panel{border-top:1px solid var(--ink);order:2;grid-template-columns:1.3fr 1fr 1fr;gap:14px;display:grid}.tool-panel .panel-heading,.tool-panel .note-card{display:none}.tool-panel .control-section{border:0;padding:4px 0}.stage-column{order:1;grid-template-rows:52px minmax(500px,1fr) 36px;min-height:70svh}.inspector-panel{border-top:1px solid var(--ink);order:3;overflow:visible}.inspector-panel .control-section,.measurement-card{max-width:680px;margin-left:auto;margin-right:auto}}@media (width<=560px){.topbar{height:58px;padding:0 12px}.brand-mark{width:31px;height:31px}.primary-button{padding:9px 12px;font-size:11px}.tool-panel{grid-template-columns:1fr}.stage-column{min-height:calc(100svh - 58px)}.stage-meta,.stage-footer{display:none}.stage-column{grid-template-rows:48px minmax(480px,1fr)}.panel{padding:15px}.size-grid{gap:3px}.measurement-card{grid-template-columns:repeat(4,1fr)}.measurement-card strong{font-size:9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}