:root{--bg: #f4f2ef;--panel: #ffffff;--panel-2: #faf9f7;--ink: #1b1a18;--ink-2: #4c4844;--ink-3: #8b8680;--ink-4: #b5b0a8;--line: #e6e2db;--line-strong: #c9c3ba;--accent: #c3272b;--accent-soft: #f6e7e7;--good: #2f7d4f;--ok: #4a7c59;--warn: #a8791c;--bad: #b23b3b;--radius: 10px;--radius-sm: 6px;--shadow-sm: 0 1px 2px rgba(28, 25, 20, .06);--shadow: 0 2px 10px rgba(28, 25, 20, .08);--shadow-lg: 0 12px 34px rgba(28, 25, 20, .14);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);font-size:14px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}h1,h2,h3,h4{margin:0;font-weight:600}p{margin:0}button{font-family:inherit;font-size:inherit;cursor:pointer}input{font-family:inherit;font-size:inherit}.mono{font-family:var(--mono);font-size:.92em}.dim{color:var(--ink-3)}.hint{color:var(--ink-3);font-size:12px;line-height:1.65}.empty{color:var(--ink-3);padding:28px 4px;font-size:13px;line-height:1.9}.empty b{color:var(--ink-2)}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:20px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}.brand{display:flex;align-items:center;gap:10px;min-width:220px}.brand-mark{width:26px;height:26px;border-radius:8px;flex:0 0 auto;background:radial-gradient(circle at 32% 34%,#c3272b 0 38%,transparent 39%),radial-gradient(circle at 68% 66%,#6a8d8c 0 38%,transparent 39%),#2a2724}.brand h1{font-size:15px;letter-spacing:.01em}.brand p{font-size:11px;color:var(--ink-3)}.tabs{display:flex;gap:2px;flex:1 1 auto}.tabs button{border:0;background:transparent;color:var(--ink-2);padding:7px 14px;border-radius:var(--radius-sm);font-weight:500;transition:background .12s,color .12s}.tabs button:hover{background:var(--panel-2);color:var(--ink)}.tabs button.is-active{background:var(--ink);color:#fff}.topbar-actions{display:flex;gap:8px}.body{display:flex;flex:1 1 auto;min-height:0}.main{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 20px 28px}.panel-host{max-width:1100px}.app.is-lib-closed .library{display:none}.btn{border:1px solid transparent;border-radius:var(--radius-sm);padding:6px 12px;background:var(--panel-2);color:var(--ink-2);transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.btn:hover{background:#f0eeea;color:var(--ink)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:#33302c;color:#fff}.btn-ghost{background:transparent;border-color:var(--line)}.btn-ghost:hover{background:var(--panel-2)}.btn-outline{background:var(--panel);border-color:var(--line)}.btn-outline:hover{border-color:var(--line-strong);background:var(--panel-2)}.btn-tiny{padding:3px 9px;font-size:12px;border-color:var(--line);background:var(--panel)}.btn-danger{color:var(--bad);border-color:#e8d2d2}.btn-danger:hover{background:#fbf1f1}.linkish{border:0;background:none;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:inherit}.linkish:hover{color:#9c1f22}button.linkish.mono{font-family:var(--mono)}.file-btn{position:relative;overflow:hidden;display:inline-block}.file-btn input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.library{flex:0 0 336px;width:336px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.library-head{padding:14px 14px 10px}.library-head h2{font-size:13px;color:var(--ink-2);margin-bottom:8px;letter-spacing:.04em}.library-search,.mini-picker-input{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;background:var(--panel-2);outline:none}.library-search:focus,.mini-picker-input:focus{border-color:var(--line-strong);background:var(--panel)}.library-sources{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}.source-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:4px 10px 4px 5px;color:var(--ink-2);font-size:12px}.source-chip[data-dim=true]{opacity:.42}.source-chip.is-on{border-color:var(--ink);color:var(--ink);background:var(--panel-2)}.source-chip.is-reset{padding:4px 10px;color:var(--ink-3)}.source-badge{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;display:grid;place-items:center;flex:0 0 auto}.source-chip[data-dim=true] .source-badge{background:var(--ink-4)}.source-count{color:var(--ink-4);font-family:var(--mono);font-size:11px}.library-families{padding:0 14px 8px;border-bottom:1px solid var(--line)}.families-toggle{width:100%;display:flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;color:var(--ink-2);font-size:12px}.families-toggle em{color:var(--ink-3);font-style:normal;font-family:var(--mono);font-size:11px;margin-left:auto}.family-groups{max-height:236px;overflow-y:auto;padding-bottom:6px;margin-top:2px}.family-group{margin-bottom:7px}.family-group:last-child{margin-bottom:0}.family-group-head{font-size:10.5px;color:var(--ink-4);letter-spacing:.06em;padding:3px 2px 4px;position:sticky;top:0;background:var(--panel);z-index:1}.family-list{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.family-chip{display:flex;align-items:center;gap:6px;text-align:left;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--panel-2);padding:4px 7px;font-size:12px;color:var(--ink-2)}.family-chip i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;box-shadow:inset 0 0 0 1px #0000001a}.family-chip em{margin-left:auto;color:var(--ink-4);font-style:normal;font-family:var(--mono);font-size:10px}.family-chip:hover{background:#f0eeea}.family-chip.is-on{border-color:var(--ink);background:var(--panel)}.library-result-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 6px;font-size:12px;color:var(--ink-3)}.library-result-head strong{color:var(--ink);font-family:var(--mono)}.library-grid{flex:1 1 auto;overflow-y:auto;padding:0 14px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:4px;align-content:start;grid-auto-rows:52px}.lib-cell{position:relative;border:0;border-radius:var(--radius-sm);padding:0;overflow:hidden;width:100%;height:100%;box-shadow:inset 0 0 0 1px #0000000f;transition:box-shadow .1s,filter .1s}.lib-cell:hover{filter:brightness(1.1);box-shadow:inset 0 0 0 2px var(--ink)}.lib-cell.is-picked{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--ink)}.lib-cell-label{position:absolute;inset:auto 0 0 0;padding:2px 4px 3px;display:flex;flex-direction:column;line-height:1.25;background:linear-gradient(to top,rgba(0,0,0,.42),transparent);color:#fff;text-align:left}.lib-cell-label em{font-style:normal;font-size:10px}.lib-cell-label i{font-style:normal;font-family:var(--mono);font-size:8px;opacity:.75}.library-foot{padding:8px 14px 12px;border-top:1px solid var(--line)}.main-column{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0}.pickbar{flex:0 0 auto;display:flex;align-items:center;gap:15px;padding:14px 20px 15px;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -4px 14px #1c19140d;position:relative;z-index:5;flex-wrap:wrap}.pickbar.is-dragging{box-shadow:0 -6px 22px #1c19141f}.pickbar-lead{display:flex;flex-direction:column;flex:0 0 auto;line-height:1.45}.pickbar-title{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}.pickbar-hint{font-size:10.5px;color:var(--ink-4);white-space:nowrap}.pickbar-slots{display:flex;gap:8px;flex:1 1 380px;align-items:stretch}.pickbar-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}.pick-slot{position:relative;flex:1 1 0;min-width:100px;max-width:200px;min-height:66px;border-radius:var(--radius);padding:13px 28px 13px 13px;display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:left;box-shadow:var(--shadow-sm);transition:transform .16s cubic-bezier(.2,.8,.3,1),opacity .16s;touch-action:none;cursor:grab;outline:none}.pick-slot:focus-visible{box-shadow:0 0 0 2px var(--ink)}.pick-slot.is-empty{background:var(--panel-2);border:1px dashed var(--line-strong);color:var(--ink-4);font-size:12px;align-items:center;justify-content:center;cursor:pointer;padding:12px 14px}.pick-slot.is-empty:hover{border-color:var(--ink-3);color:var(--ink-2)}.pick-slot-role{font-style:normal;font-size:10px;opacity:.72;letter-spacing:.04em}.pick-slot-main{border:0;background:none;padding:0;text-align:left;color:inherit;display:block;cursor:inherit;min-width:0}.pick-slot-main strong{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pick-slot-line{display:flex;align-items:baseline;gap:7px;min-width:0}.pick-slot-hex{font-family:var(--mono);font-size:11.5px;opacity:.82;flex:0 0 auto}.pick-slot-src{font-style:normal;font-size:10px;opacity:.55;margin-left:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pick-slot-remove{position:absolute;top:4px;right:5px;border:0;background:none;color:inherit;opacity:.45;font-size:15px;line-height:1;padding:2px 6px;cursor:pointer}.pick-slot-remove:hover{opacity:1}.pick-slot-grip{position:absolute;left:50%;bottom:4px;transform:translate(-50%);width:18px;height:3px;border-radius:2px;opacity:.3;background-image:radial-gradient(circle,currentColor 40%,transparent 45%);background-size:5px 3px;background-repeat:repeat-x;pointer-events:none}.pick-slot.is-gap{border:1.5px dashed var(--line-strong);background:var(--panel-2);box-shadow:none;display:grid;place-items:center;cursor:grabbing}.pick-slot-gap-label{font-size:11px;color:var(--ink-4);letter-spacing:.06em}.pick-slot.is-floating{position:fixed;margin:0;z-index:200;pointer-events:none;flex:none;max-width:none;justify-content:center;transform:rotate(-2.5deg) scale(1.07);box-shadow:0 16px 34px #1c191457;transition:none;will-change:left,top}.pick-slot-float-name{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pick-slot-float-hex{display:block;font-family:var(--mono);font-size:11.5px;opacity:.82}.pickbar-drawer{flex:1 1 100%;display:flex;align-items:center;gap:14px;padding-top:11px;margin-top:3px;border-top:1px dashed var(--line);flex-wrap:wrap}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#1816136b;display:grid;place-items:center;padding:24px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{background:var(--panel);border-radius:14px;box-shadow:var(--shadow-lg);width:min(880px,100%);max-height:min(760px,92vh);display:flex;flex-direction:column;overflow:hidden}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px 12px;border-bottom:1px solid var(--line)}.modal-head h3{font-size:15px;margin-bottom:3px}.modal-head .hint{max-width:66ch}.modal-close{border:0;background:none;font-size:22px;line-height:1;color:var(--ink-3);padding:0 4px;cursor:pointer}.modal-close:hover{color:var(--ink)}.modal-body{padding:16px 20px;overflow-y:auto;flex:1 1 auto}.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-top:1px solid var(--line);background:var(--panel-2);flex-wrap:wrap}.modal-foot-actions{display:flex;gap:8px}.dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--radius);background:var(--panel-2);min-height:168px;display:grid;place-items:center;padding:12px;cursor:pointer;transition:border-color .12s,background .12s}.dropzone:hover,.dropzone.is-over{border-color:var(--ink);background:var(--panel)}.dropzone-empty{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}.dropzone-empty strong{font-size:14px;color:var(--ink-2)}.dropzone-empty span{font-size:12px;color:var(--ink-3)}.dropzone-empty em{font-style:normal;font-size:10.5px;color:var(--ink-4)}.dropzone-thumb{max-width:100%;max-height:260px;border-radius:var(--radius-sm);box-shadow:var(--shadow);display:block}.extract-controls{display:flex;align-items:flex-end;gap:18px;margin-top:14px;flex-wrap:wrap}.extract-controls .tweak{flex:0 0 200px}.extract-controls .hint{flex:1 1 320px}.extract-list{display:flex;flex-direction:column;gap:8px}.extract-row{display:flex;gap:12px;align-items:stretch}.extract-swatch{flex:0 0 132px;border:0;border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:left;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px #0000001a}.extract-swatch strong{font-family:var(--mono);font-size:13px}.extract-swatch em{font-style:normal;font-size:11px;opacity:.8}.extract-add{font-size:10px;opacity:.85;margin-top:2px}.extract-swatch:hover{box-shadow:inset 0 0 0 2px var(--ink)}.extract-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}.extract-flags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.extract-matches{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.extract-matches-label{font-size:11px;color:var(--ink-4)}.extract-match{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:3px 10px 3px 4px;cursor:pointer;font-size:11.5px}.extract-match:hover{border-color:var(--ink);background:var(--panel-2)}.extract-match i{width:15px;height:15px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px #0000001f}.extract-match span{display:flex;flex-direction:column;line-height:1.25}.extract-match strong{font-size:11.5px;font-weight:500}.extract-match em{font-style:normal;font-size:9.5px;color:var(--ink-4)}.extract-match b{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-4)}.extract-match b.is-near{color:var(--warn)}.extract-match b.is-close{color:var(--good)}.error-text{color:var(--bad);font-size:12.5px;margin-top:10px}.panel{display:flex;flex-direction:column;gap:18px}.section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 18px;box-shadow:var(--shadow-sm)}.section.is-dense{padding:14px 16px 16px}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}.section-head h3{font-size:14px}.section-hint{font-size:12px;color:var(--ink-3);margin-top:3px;max-width:74ch;line-height:1.65}.section-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.segmented{display:inline-flex;flex-wrap:wrap;gap:3px;background:var(--panel-2);padding:3px;border-radius:8px}.segmented button{border:0;background:transparent;color:var(--ink-2);padding:5px 11px;border-radius:var(--radius-sm);font-size:12.5px}.segmented button:hover{background:#eceae5}.segmented button.is-active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:500}.badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:1px 9px;font-size:11px;line-height:1.7;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}.badge-good{background:#eaf4ee;border-color:#cfe4d7;color:var(--good)}.badge-ok{background:#eef3ef;border-color:#d6e2d9;color:var(--ok)}.badge-warn{background:#fbf4e4;border-color:#ecdcb6;color:var(--warn)}.badge-bad{background:#fbeeee;border-color:#eed3d3;color:var(--bad)}.slider{display:block;margin-top:12px}.slider-label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);margin-bottom:4px}.slider-label em{font-style:normal;font-family:var(--mono);color:var(--ink-3)}.slider input[type=range]{width:100%;accent-color:var(--ink)}.check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);cursor:pointer}.check input{accent-color:var(--ink)}.color-input{display:flex;align-items:center;gap:10px}.color-input>label{font-size:12px;color:var(--ink-3)}.color-input-row{display:flex;align-items:center;gap:6px}.color-input-native{width:38px;height:30px;padding:2px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);cursor:pointer}.color-input-text{width:110px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 9px;font-family:var(--mono);background:var(--panel-2);outline:none}.color-input-text:focus{border-color:var(--line-strong);background:var(--panel)}.code-block{background:#1f1d1a;color:#e8e3da;border-radius:var(--radius-sm);padding:12px 14px;font-family:var(--mono);font-size:12px;overflow-x:auto;margin:0;cursor:pointer;white-space:pre-wrap;word-break:break-all}.code-block:hover{background:#2a2724}.ramp{display:flex;border-radius:var(--radius);overflow:hidden;box-shadow:inset 0 0 0 1px #00000014}.ramp-step{flex:1 1 0;border:0;min-height:132px;padding:8px 6px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28)}.ramp-step-top em{font-style:normal;font-size:12px;font-weight:600}.ramp-step-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.ramp-step-bottom i{font-style:normal;font-family:var(--mono);font-size:9px;opacity:.9}.ramp-step-bottom b{font-weight:500;font-size:9px;opacity:.75}.ramp-step:hover{filter:brightness(1.06)}.curve{margin-top:14px}.curve-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-4);font-family:var(--mono)}.seed-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.table{display:flex;flex-direction:column;border-top:1px solid var(--line)}.table-row{display:grid;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:12.5px}.table-head{color:var(--ink-3);font-size:11px;letter-spacing:.02em}.table-row>span{display:flex;align-items:center;gap:6px;min-width:0}.table-row .dot{width:14px;height:14px;border-radius:4px;flex:0 0 auto;box-shadow:inset 0 0 0 1px #0000001f}.risk-low{color:var(--good)}.risk-medium{color:var(--warn)}.risk-high{color:var(--bad)}.risk-none{color:var(--ink-3)}.table-row:not(.table-head){grid-template-columns:1.1fr 1fr .8fr .8fr .9fr 1.3fr}.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 20px}.kv{display:flex;gap:10px;font-size:12.5px}.kv-k{color:var(--ink-3);flex:0 0 62px}.kv-v{color:var(--ink-2)}.contrast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px}.contrast-row{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:var(--radius-sm);background:var(--panel-2);font-size:12px}.contrast-row.tone-bad{background:#fbeeee}.contrast-row.tone-warn{background:#fbf4e4}.contrast-pair{display:flex;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}.contrast-pair i{width:16px;height:16px}.contrast-names{flex:1 1 auto;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.filter-slider{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-2)}.filter-slider input{width:160px;accent-color:var(--ink)}.pair-hero{display:flex;gap:18px;flex-wrap:wrap}.pair-hero-swatches{display:flex;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);flex:0 0 auto}.pair-hero-swatches div{width:128px;height:128px}.pair-hero-meta{flex:1 1 320px;display:flex;flex-direction:column;gap:8px}.pair-hero-names{display:flex;gap:24px}.pair-hero-names strong{font-size:15px}.pair-hero-stats{display:flex;gap:6px;flex-wrap:wrap}.pair-hero-verdict{font-size:12.5px;color:var(--ink-2)}.match-list{display:flex;flex-direction:column;gap:4px;max-height:560px;overflow-y:auto}.match-row{display:flex;align-items:center;gap:12px;padding:6px 10px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--panel-2);text-align:left}.match-row:hover{border-color:var(--line-strong);background:var(--panel)}.match-row.is-current{border-color:var(--ink)}.match-swatches{display:flex;border-radius:4px;overflow:hidden;flex:0 0 auto}.match-swatches i{width:22px;height:30px}.match-name{display:flex;flex-direction:column;min-width:96px}.match-name strong{font-size:13px}.match-name em{font-style:normal;font-size:10.5px;color:var(--ink-3)}.match-hex{color:var(--ink-3)}.match-score{font-family:var(--mono);font-size:13px;font-weight:600;margin-left:auto}.match-badges{display:flex;gap:4px}.third-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:6px}.third-card{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);text-align:left}.third-card:hover{border-color:var(--line-strong);background:var(--panel)}.third-swatches{display:flex;border-radius:4px;overflow:hidden;flex:0 0 auto}.third-swatches i{width:9px;height:26px}.third-name{display:flex;flex-direction:column;min-width:0}.third-name strong{font-size:12.5px}.third-name em{font-style:normal;font-size:10px;color:var(--ink-3)}.third-score{margin-left:auto;font-family:var(--mono);font-size:12px}.ratio-list{display:flex;flex-direction:column;gap:12px}.ratio-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ratio-bar{display:flex;flex:1 1 320px;min-width:240px;height:40px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 0 0 1px #00000014}.ratio-bar span{display:grid;place-items:center}.ratio-bar b{font-family:var(--mono);font-size:10px;color:#0000006b}.ratio-meta{flex:0 1 320px;display:flex;flex-direction:column;line-height:1.5}.ratio-meta strong{font-size:12.5px}.ratio-meta em{font-style:normal;font-size:11.5px;color:var(--ink-3)}.ratio-meta span{font-size:11px}.gradient-hero{height:148px;border-radius:var(--radius);box-shadow:var(--shadow)}.gradient-band{display:flex;margin-top:10px;border-radius:var(--radius-sm);overflow:hidden;height:34px;box-shadow:inset 0 0 0 1px #00000014}.band-cell{flex:1 1 0;border:0;padding:0}.band-cell:hover{outline:2px solid var(--ink);outline-offset:-2px}.gradient-stops{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}.gradient-stop{display:flex;align-items:center;gap:8px}.gradient-stop i{width:34px;height:34px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px #0000001a}.gradient-stop span{display:flex;flex-direction:column}.gradient-stop strong{font-size:12.5px}.gradient-stop em{font-style:normal;color:var(--ink-3)}.space-compare{margin-top:14px}.space-rows{display:flex;flex-direction:column;gap:4px;margin-top:8px}.space-row{display:flex;align-items:center;gap:10px;padding:5px 10px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--panel-2);text-align:left}.space-row:hover{border-color:var(--line-strong)}.space-row.is-best{background:#eaf4ee;border-color:#cfe4d7}.space-name{flex:0 0 126px;font-size:12.5px}.space-bar{flex:1 1 auto;height:6px;border-radius:3px;background:#e8e5e0;overflow:hidden}.space-bar i{display:block;height:100%;background:var(--warn)}.space-row.is-best .space-bar i{background:var(--good)}.space-val{flex:0 0 40px;text-align:right;color:var(--ink-3)}.direction-grid{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.direction-cell{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);padding:4px;display:flex;flex-direction:column;align-items:center;gap:3px;width:62px}.direction-cell.is-active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.direction-preview{width:48px;height:30px;border-radius:4px}.direction-cell em{font-style:normal;font-size:10px;color:var(--ink-3)}.mid-controls{display:flex;flex-direction:column;gap:10px}.mid-manual{display:flex;align-items:center;gap:10px}.mid-swatches{display:flex;gap:5px;align-items:center}.mid-swatch{width:26px;height:26px;border-radius:var(--radius-sm);border:1px solid var(--line)}.mid-swatch.is-active{box-shadow:0 0 0 2px var(--ink);border-color:var(--ink)}.sample-table{display:flex;gap:2px;align-items:flex-end}.sample-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px}.sample-col i{width:100%;height:46px;border-radius:3px;box-shadow:inset 0 0 0 1px #0000000f}.sample-col em{font-style:normal;font-size:8px;color:var(--ink-3)}.sample-col b{font-weight:400;font-size:8px;color:var(--ink-4)}.css-extras{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.auto-partner-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.auto-partner-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);padding:5px 8px;display:flex;align-items:center;gap:5px}.auto-partner-card:hover{border-color:var(--line-strong)}.auto-partner-card span{width:20px;height:26px;border-radius:3px}.auto-partner-card em{font-style:normal;font-size:11.5px;margin-left:4px}.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:7px}.recipe-card{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);padding:9px 10px}.recipe-card:hover{border-color:var(--line-strong);background:var(--panel)}.recipe-card.is-active{border-color:var(--ink);background:var(--panel);box-shadow:0 0 0 1px var(--ink)}.recipe-card-strip{display:flex;height:20px;border-radius:4px;overflow:hidden;margin-bottom:5px;box-shadow:inset 0 0 0 1px #00000014}.recipe-card-strip i{flex:1 1 0}.recipe-card strong{font-size:13px}.recipe-card em{font-style:normal;font-size:11px;color:var(--ink-3)}.recipe-card-need{font-size:10.5px;color:var(--warn);margin-top:2px}.recipe-card-need.is-ok{color:var(--good)}.slot-list{display:flex;flex-direction:column;gap:5px}.slot-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);padding:6px 10px}.slot-row.is-auto{background:#f7f6f3}.slot-row.is-overridden{border-color:var(--line-strong)}.slot-main{flex:1 1 300px;display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;padding:0}.slot-swatch{width:34px;height:34px;border-radius:var(--radius-sm);flex:0 0 auto;box-shadow:inset 0 0 0 1px #0000001a}.slot-info{display:flex;flex-direction:column;min-width:0}.slot-info strong{font-size:13px;display:flex;align-items:center;gap:6px}.slot-info em{font-style:normal;font-size:11px;color:var(--ink-3)}.slot-hex{margin-left:auto;color:var(--ink-2)}.slot-editor{flex:1 1 100%;display:flex;flex-direction:column;gap:7px;padding-top:8px;border-top:1px dashed var(--line)}.slot-editor-custom{display:flex;align-items:center;gap:8px}.mini-picker{display:flex;flex-direction:column;gap:6px}.mini-picker-grid{display:flex;flex-wrap:wrap;gap:3px;max-height:130px;overflow-y:auto}.mini-swatch{width:26px;height:26px;border-radius:4px;border:0;box-shadow:inset 0 0 0 1px #0000001f}.mini-swatch:hover{outline:2px solid var(--ink);outline-offset:1px}.preview-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.stage{position:relative;width:100%;max-width:520px;margin:0 auto;display:grid;place-items:center;padding:34px}.stage-inner{position:relative;width:100%;max-width:380px}.mock-frame{border-radius:12px}.mock-frame-inner{position:relative;border-radius:5px;padding:24px 22px 26px;display:flex;flex-direction:column;gap:3px;min-height:190px}.mock-eyebrow{font-size:10px;letter-spacing:.18em}.mock-title{font-size:38px;font-weight:700;letter-spacing:.1em;line-height:1.2;margin:6px 0 10px}.mock-line{font-size:13px;letter-spacing:.06em}.mock-line-sub{font-size:11px;opacity:.75;letter-spacing:.04em}.mock-brand{font-size:10px;letter-spacing:.16em;margin-top:auto}.mock-seal{position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:5px;display:grid;place-items:center;font-size:15px;font-weight:600}.mock-card{border-radius:10px;border:1px solid;padding:26px 24px;display:flex;flex-direction:column;gap:3px;min-height:200px}.mock-bands{display:flex;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}.mock-band{flex:1 1 0;padding:28px 14px;display:flex;flex-direction:column;gap:4px;align-items:center}.mock-band em{font-style:normal;font-size:10px;opacity:.7;letter-spacing:.1em}.mock-band strong{font-size:30px;font-weight:700}.mock-band span{font-family:var(--mono);font-size:9px;opacity:.7}.mock-paper{border-radius:8px;border:1px solid;padding:30px 26px;display:flex;flex-direction:column;gap:2px;min-height:240px;position:relative;box-shadow:var(--shadow)}.mock-paper-rule{height:2px;width:46px;margin-bottom:12px}.mock-paper-rule.thin{height:1px;width:100%;margin-top:auto;margin-bottom:0}.mock-stack{display:flex;flex-direction:column;gap:0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}.mock-stack-mass{padding:30px 24px 24px;display:flex;flex-direction:column;gap:4px}.mock-stack-text{padding:18px 24px 22px;display:flex;flex-direction:column;gap:3px}.mock-overlay{position:absolute;top:34px;right:34px;bottom:34px;left:34px;border-radius:10px;opacity:.88}.mock-on-gradient{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;padding:26px 24px;max-width:300px}.mock-field{border-radius:10px;padding:30px 26px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)}.mock-stripe{height:8px;border-radius:4px;margin:12px 0 6px}.exportbar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}.exportbar-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}.exportbar-head h4{font-size:13px}.exportbar-grid{display:flex;flex-wrap:wrap;gap:6px}.exportbar-quick{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}.exportbar-note{margin-top:10px}.saved-list{display:flex;flex-direction:column;gap:6px}.saved-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);flex-wrap:wrap}.saved-strip{display:flex;border-radius:4px;overflow:hidden;flex:0 0 auto;box-shadow:inset 0 0 0 1px #00000014}.saved-strip i{width:20px;height:30px}.saved-grad{width:40px;height:30px}.saved-meta{flex:1 1 240px;display:flex;flex-direction:column;gap:2px;min-width:0}.saved-title{border:1px solid transparent;background:transparent;font-size:13px;font-weight:500;padding:2px 4px;border-radius:4px;width:100%;outline:none;color:var(--ink)}.saved-title:hover{border-color:var(--line)}.saved-title:focus{border-color:var(--line-strong);background:var(--panel)}.saved-sub{display:flex;align-items:center;gap:7px}.saved-sub em{font-style:normal;font-size:10.5px}.saved-actions{display:flex;gap:5px}.backup-row{display:flex;gap:8px;flex-wrap:wrap}.about{position:relative;background:var(--panel);border-bottom:1px solid var(--line);padding:16px 22px 14px;flex:0 0 auto}.about-close{position:absolute;top:10px;right:14px;border:0;background:none;font-size:18px;color:var(--ink-3)}.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.about-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.about-card-head strong{font-size:13px}.about-card-head span{font-size:11px;color:var(--ink-3)}.about-card p{font-size:11.5px;color:var(--ink-2);margin-top:3px}.about-card dl{margin:6px 0 0;display:grid;grid-template-columns:34px 1fr;gap:2px 8px;font-size:11px}.about-card dt{color:var(--ink-3)}.about-card dd{margin:0;color:var(--ink-2)}.about-foot{font-size:11px;color:var(--ink-3);margin-top:14px;line-height:1.7}.style-picks{display:flex;gap:10px;flex-wrap:wrap}.style-pick{min-width:108px;border-radius:var(--radius);padding:8px 12px;display:flex;flex-direction:column;gap:1px;box-shadow:inset 0 0 0 1px #00000014}.style-pick em{font-style:normal;font-size:10px;opacity:.72;letter-spacing:.04em}.style-pick strong{font-size:14px}.style-pick span{font-size:11px;opacity:.8}.style-wall-controls{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.shape-chip{border:1px solid var(--line);border-radius:999px;background:var(--panel-2);padding:3px 11px;font-size:12px;color:var(--ink-2)}.shape-chip.is-on{border-color:var(--ink);background:var(--panel);color:var(--ink)}.shape-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}.shape-wall-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 6px;border-radius:var(--radius);background:var(--panel-2);border:1px solid var(--line)}.shape-wall-label{font-size:11px;color:var(--ink-3)}.style-canvas{display:block;border-radius:6px}.style-group{margin-top:18px}.style-group:first-of-type{margin-top:0}.style-group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}.style-group-head h4{font-size:13px}.style-group-head .hint{flex:1 1 320px}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:7px}.style-card{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);padding:8px 9px 9px}.style-card:hover{border-color:var(--line-strong);background:var(--panel)}.style-card.is-active{border-color:var(--ink);background:var(--panel);box-shadow:0 0 0 1px var(--ink)}.style-card-canvas{display:grid;place-items:center;background:var(--panel);border-radius:4px;padding:4px}.style-card strong{font-size:12.5px;line-height:1.35}.style-card em{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.45}.style-hero{display:grid;place-items:center;padding:20px;background:linear-gradient(45deg,#eeece8 25%,transparent 25%,transparent 75%,#eeece8 75%) 0 0 / 16px 16px,linear-gradient(45deg,#eeece8 25%,transparent 25%,transparent 75%,#eeece8 75%) 8px 8px / 16px 16px,var(--panel-2);border-radius:var(--radius);margin-bottom:14px}.style-tweaks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 14px;padding-top:14px;border-top:1px solid var(--line)}.tweak{display:flex;flex-direction:column;gap:4px}.tweak-label{font-size:11px;color:var(--ink-3);letter-spacing:.02em}.tweak select,.tweak input[type=range]{border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 8px;background:var(--panel-2);color:var(--ink);outline:none;font-size:12.5px}.tweak select:focus{border-color:var(--line-strong);background:var(--panel)}.tweak input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--ink)}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%) translateY(8px);background:var(--ink);color:#fff;padding:8px 18px;border-radius:999px;font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;box-shadow:var(--shadow-lg);z-index:100}.toast:not(:empty){opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:1080px){.library{flex-basis:280px;width:280px}.library-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}}@media(max-width:860px){.body{flex-direction:column}.library{flex:0 0 auto;width:100%;max-height:42vh;border-right:0;border-bottom:1px solid var(--line)}.topbar{flex-wrap:wrap;gap:10px}.tabs{order:3;width:100%;overflow-x:auto}.main{padding:14px 14px 20px}.pickbar{padding:8px 12px;gap:10px}.pickbar-lead{display:none}.pickbar-slots{flex-wrap:wrap;flex-basis:100%;order:1}.pickbar-actions{order:2;margin-left:auto}.pick-slot{min-width:78px;max-width:none;padding:7px 24px 7px 9px}.pick-slot-src{display:none}.table-row:not(.table-head){grid-template-columns:1fr 1fr}.ramp-step{min-height:96px}.modal{max-height:94vh}.extract-row{flex-direction:column}.extract-swatch{flex:0 0 auto}}@media print{.library,.topbar,.pickbar,.exportbar,.about{display:none!important}body{background:#fff}.section{break-inside:avoid;box-shadow:none}}