:root{--paper:#f5f4ef;--white:#fffefa;--ink:#2e352e;--muted:#687066;--line:#d9ded3;--green:#3e513e;--soft:#e7ece1;--danger:#a33427}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 "Segoe UI",Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button,a,input,select{touch-action:manipulation}button{border:1px solid transparent;border-radius:6px;padding:9px 14px;background:none;color:inherit;font-weight:500}button:disabled{opacity:.42;cursor:not-allowed}button:not(:disabled):hover{background:var(--soft)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7b9370;outline-offset:3px}button.primary{background:var(--green);color:white}button.primary:not(:disabled):hover{background:#2e402e}.outline{border-color:#b8c2af;background:var(--white)}.quiet{border-color:var(--line);font-size:12px;background:var(--white)}a{color:var(--green)}[hidden]{display:none!important}
.masthead{max-width:1600px;margin:auto;padding:22px 32px 20px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.back{text-decoration:none;font-size:12px;color:var(--muted)}h1{font-family:Georgia,serif;font-size:30px;font-weight:400;margin:4px 0 0;letter-spacing:-.8px}h1 span{font:13px "Segoe UI",Arial,sans-serif;letter-spacing:0;color:var(--muted);margin-left:8px}.file-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.storage-status{font-size:11px;color:var(--muted);margin-right:10px}.storage-status::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#758b66;margin-right:6px}.storage-status.memory::before{background:#af8150}main{max-width:1600px;margin:auto;padding:25px 32px 0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:30px;align-items:start}.room-nav{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:21px}.room-nav button{font-size:13px;padding:9px 13px;border-color:var(--line)}.room-nav button[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}.view-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:600;margin:0 0 4px}h2{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.65px;margin:0}.mode-switch{display:flex;border:1px solid var(--line);border-radius:7px;padding:3px;background:var(--white)}.mode-switch button{font-size:11px;padding:6px 10px;border-radius:4px}.mode-switch button[aria-pressed=true]{background:var(--soft);color:var(--green)}.image-stage{position:relative;background:#deddd6;border-radius:8px;overflow:hidden;line-height:0}.image-stage canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1.5;background:#eeede6ed;color:var(--muted)}.view-thumbs{display:flex;gap:9px;margin-top:12px;min-height:0}.angle{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border:1px solid var(--line);background:var(--white);font-size:11px}.angle img{width:62px;height:35px;object-fit:cover;border-radius:3px}.angle[aria-pressed=true]{border-color:var(--green);background:var(--soft)}.selection-summary{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}.summary-item{display:flex;gap:8px;align-items:center;min-width:125px}.summary-swatch{width:25px;height:25px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1px #00000013}.summary-item strong{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.9px;font-weight:500;color:var(--muted)}.summary-item span{font-size:11px}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:17px}.preview-footer p{margin:0;max-width:550px;font-size:12px;color:var(--muted)}.preview-footer button{flex-shrink:0;font-size:12px}.accuracy-note{color:var(--muted);font-size:10px;margin:13px 0 0}.palette-panel{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:21px 18px 18px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-heading h2{font-size:23px}.active-chip{width:40px;height:40px;border-radius:50%;border:1px solid #00000013;background:repeating-linear-gradient(135deg,#eee 0px,#eee 6px,#faf9f4 6px,#faf9f4 12px)}.surface-switch{display:flex;background:var(--paper);border-radius:6px;padding:3px;margin-top:18px}.surface-switch button{flex:1;font-size:12px;padding:8px 4px}.surface-switch button[aria-pressed=true]{background:var(--green);color:white}.surface-note{font-size:11px;min-height:32px;color:var(--muted);margin:9px 0 7px}.surface-options{display:flex;align-items:center;justify-content:space-between;gap:8px}.original-choice{display:flex;align-items:center;gap:6px;border:1px solid var(--line);padding:6px 10px;font-size:11px}.original-choice[aria-pressed=true]{border-color:var(--green);background:var(--soft)}.original-mark{width:16px;height:16px;border-radius:50%;border:1px solid #ccc;background:repeating-linear-gradient(135deg,#eee 0px,#eee 3px,#faf9f4 3px,#faf9f4 6px)}.frame-link{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}.frame-link input{accent-color:var(--green);width:16px;height:16px}.palette{margin-top:12px}.palette-group-label{font-size:10px;color:var(--muted);font-weight:500;margin:11px 0 5px;letter-spacing:.3px}.swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.swatch{min-width:0;text-align:left;padding:0 0 4px;border:2px solid transparent;border-radius:5px;background:#faf9f5;overflow:hidden;position:relative}.swatch:not(:disabled):hover{border-color:#a8b59e;background:#f3f4ee}.swatch[aria-pressed=true]{border-color:var(--green);background:var(--soft)}.swatch-color{height:26px;display:block;border-bottom:1px solid #00000006}.swatch-name{font-size:11px;display:block;line-height:1.3;margin:4px 4px 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatch-code{display:block;font-size:9px;letter-spacing:.1px;color:#676d62;margin:0 4px;line-height:1.25}.swatch[aria-pressed=true]::after{content:"✓";position:absolute;right:3px;top:2px;background:var(--green);color:white;width:17px;height:17px;border-radius:50%;font-size:11px;text-align:center;line-height:17px}.palette-footer{margin-top:16px;border-top:1px solid var(--line);padding-top:13px}.palette-footer>span{display:block;font-size:12px;min-height:20px;margin-bottom:8px}.palette-footer button{width:100%;font-size:12px}.schemes-section{border-top:1px solid var(--line);margin-top:30px;padding-top:26px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.section-heading h2{font-family:Georgia,serif;font-weight:400;font-size:27px}.section-heading>p{font-size:12px;color:var(--muted);margin:0}.scheme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.scheme-card{padding:17px 18px;background:var(--white);border:1px solid var(--line);border-radius:8px;min-width:0}.scheme-top{display:flex;align-items:center;gap:10px}.scheme-number{font:italic 21px Georgia,serif;color:#8b967f}.scheme-name{border:0;border-bottom:1px solid var(--line);padding:6px 0;background:transparent;min-width:0;width:100%;font-size:14px;color:var(--ink);border-radius:0}.scheme-colors{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:27px;margin:13px 0 10px}.scheme-color{display:inline-flex;width:20px;height:20px;border-radius:50%;border:1px solid #00000010}.scheme-colors small{font-size:10px;color:var(--muted);margin-left:2px}.scheme-buttons{display:flex;gap:7px;flex-wrap:wrap}.scheme-buttons button{font-size:11px;padding:7px 10px}.scheme-buttons .save{background:var(--soft)}.notice{font-size:12px;color:var(--green);min-height:24px;margin-top:16px}.error{border:1px solid #e0bdb3;border-radius:6px;background:#fff0eb;padding:13px;color:var(--danger);margin:12px 0}.site-footer{padding:20px 0 25px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:10px;border-top:1px solid var(--line);margin-top:12px}.site-footer span:first-child{letter-spacing:1.4px}.comparison-pickers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}.comparison-pickers label{font-size:11px;color:var(--muted)}select{display:block;width:100%;padding:8px;margin-top:4px;background:var(--white);border:1px solid var(--line);border-radius:5px;color:var(--ink)}.comparison-images{display:grid;grid-template-columns:1fr 1fr;gap:12px}.comparison-images figure{margin:0;min-width:0}.comparison-images canvas{display:block;width:100%;height:auto;border-radius:7px}.comparison-images figcaption{font-size:11px;padding-top:6px;color:var(--muted);overflow-wrap:anywhere}
@media(min-width:821px){.view-section{position:sticky;top:16px}.palette-panel{position:sticky;top:16px;max-height:calc(100vh - 32px);display:flex;flex-direction:column}.palette{overflow-y:auto;min-height:120px;padding-right:3px}.panel-heading,.surface-switch,.surface-note,.surface-options,.palette-footer{flex-shrink:0}}
@media(min-width:1450px){.workspace{grid-template-columns:minmax(0,1fr) 380px}.swatch-color{height:32px}.swatch-name{font-size:12px}.swatch-code{font-size:10px}}
@media(max-width:1080px){.masthead,main{padding-left:20px;padding-right:20px}.workspace{gap:20px;grid-template-columns:minmax(0,1fr) 320px}.view-heading{align-items:flex-start;flex-direction:column;gap:12px}.file-actions .storage-status{width:100%;text-align:right}.room-nav{gap:5px}.room-nav button{padding:8px;font-size:11px}.summary-item{min-width:110px}}
@media(max-width:820px){.workspace{grid-template-columns:1fr}.view-heading{flex-direction:row;align-items:center}.palette-panel{padding:20px}.swatch-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.swatch-color{height:35px}.palette-group-label{font-size:12px}.surface-note{min-height:0}.palette-footer{display:flex;justify-content:space-between;align-items:center;gap:15px}.palette-footer>span{margin:0}.palette-footer button{width:auto}.surface-switch{max-width:430px}.surface-options{justify-content:flex-start;gap:20px}.scheme-grid{gap:10px}.scheme-card{padding:14px}.section-heading{align-items:flex-start;flex-direction:column;gap:8px}h1 span{display:none}}
@media(max-width:560px){.masthead{padding:16px;align-items:flex-start;gap:10px}.file-actions{gap:5px}.file-actions button{font-size:10px;padding:6px 8px}.storage-status{font-size:10px;margin:0}main{padding:18px 16px 0}h1{font-size:26px}.back{font-size:11px}.view-heading{flex-direction:column;align-items:flex-start}.view-heading h2{font-size:21px}.room-nav{padding-bottom:16px}.room-nav button{min-height:44px}.mode-switch button{min-height:36px;padding:7px 13px}.swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.swatch-name{font-size:12px}.swatch-code{font-size:10px}.swatch-color{height:36px}.surface-switch button{min-height:44px}.surface-note{min-height:32px}.palette-footer{align-items:stretch;flex-direction:column;gap:8px}.palette-footer button{width:100%;min-height:44px}.scheme-grid{grid-template-columns:1fr}.scheme-card{padding:18px}.scheme-buttons button{min-height:40px}.scheme-name{font-size:16px}.preview-footer{flex-wrap:wrap;gap:12px}.preview-footer button{min-height:44px}.selection-summary{gap:12px}.summary-item{min-width:100px}.comparison-images,.comparison-pickers{grid-template-columns:1fr}.comparison-pickers{gap:8px}.angle{min-height:44px}.accuracy-note{font-size:11px}.site-footer{gap:6px}.scheme-colors small{font-size:11px}}
.swatch-code{font-size:10px}
.palette-panel>.palette{max-height:clamp(260px,45vh,540px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
.palette-panel>.palette .swatch-name{white-space:normal;overflow:visible;text-overflow:clip;min-height:2.6em}
.image-stage canvas{aspect-ratio:3/2}.angle img{height:41px}.surface-switch button{letter-spacing:.05em}body{font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif}h1{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:28px}.section-heading h2{font-family:inherit;font-size:25px}.eyebrow{letter-spacing:1px}.file-actions .storage-status{white-space:nowrap}
@media(max-width:560px){.masthead{flex-direction:column;gap:12px}.file-actions{justify-content:flex-start}.file-actions .storage-status{width:auto;text-align:left;order:3}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}