:root{color:#172028;--canvas-stage-size:360px;--canvas-column-gap:.55rem;--canvas-row-gap:.9rem;--space-toolbar-width:450px;background:linear-gradient(120deg,#eef7ff,#f6fff3 40%,#fff6ec);font-family:IBM Plex Sans,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}.page{max-width:1280px;margin:0 auto;padding:2rem 1rem 3rem}.header h1{margin:0;font-size:2rem}.header p{color:#334155;margin:.5rem 0 0}.subtle{font-size:.9rem}.panel,.card{background:#ffffffd9;border:1px solid #0f172a14;border-radius:14px}.panel{margin-top:0;padding:1rem}.form{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;display:grid}.field{flex-direction:column;gap:.4rem;display:flex}.field span{color:#334155;font-size:.9rem}.hex-input-label{align-items:center;gap:.4rem;display:inline-flex}.hex-input-label .candidate-dot{width:14px;height:14px}.field input{border:1px solid #cbd5e1;border-radius:8px;padding:.6rem .7rem;font-size:1rem}.checkbox{color:#334155;grid-column:1/-1;align-items:center;gap:.5rem;display:flex}.metric-toggle{border:1px solid #dbe3ee;border-radius:10px;grid-column:1/-1;align-items:center;gap:1rem;margin:0;padding:.45rem .7rem .65rem;display:flex}.metric-toggle legend{color:#334155;padding:0 .3rem;font-size:.9rem}.metric-toggle label{color:#334155;align-items:center;gap:.35rem;display:flex}.metric-toggle .metric-checkbox{white-space:nowrap;margin-left:auto}.error{color:#b42318;grid-column:1/-1;margin:0;font-size:.92rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem;display:grid}.nearest-grid{grid-template-columns:minmax(0,560px)}.inspector-wide{margin-top:1rem}.inspector-wide .card{width:100%}.slice-layout{flex-direction:column;gap:.9rem;margin-top:1.25rem;display:flex}.space-section{margin-top:1.3rem}.space-section h2{margin:0 0 .5rem}.space-section p{margin:0 0 .7rem}.space-control{max-width:360px;margin-bottom:.8rem}.canvas-box-control{max-width:none;margin-top:0}.space-toolbar{width:min(100%, var(--space-toolbar-width));flex-direction:column;flex:0 0 min(100%, var(--space-toolbar-width));gap:.7rem;margin-top:0;display:flex}.space-slider-stack{background:#ffffffc7;border:1px solid #0f172a14;border-radius:14px;padding:.8rem}.space-slider-stack .space-control{max-width:none}.space-slider-stack .inline-control{grid-template-columns:220px minmax(0,1fr);align-items:center;column-gap:.75rem;display:grid}.space-slider-stack .inline-control span{margin:0}.space-help{margin-top:0;padding:.7rem .8rem}.space-help h3{margin:0 0 .35rem;font-size:.95rem}.space-help-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem .7rem;display:grid}.space-help-grid p{margin:0;font-size:.82rem;line-height:1.25}.color-space-controls .inline-control span{align-items:baseline;gap:.35rem;display:inline-flex}.color-space-controls .slice-l-value{margin-left:.1rem}.compact-ui .compact-panel{margin-top:0;padding:.7rem}.compact-ui .card{padding:.75rem}.compact-ui .form{gap:.55rem .8rem}.compact-ui .field input{padding:.45rem .55rem}.compact-ui .metric-toggle{padding:.35rem .55rem .45rem}.space-layout-row{align-items:flex-start;gap:.7rem;display:flex}.space-visual-column{width:min(100%, calc(var(--canvas-stage-size) * 2 + var(--canvas-column-gap)));flex-direction:column;display:flex}.space-visual-column .space-slider-stack{width:100%;margin-bottom:.55rem}.space-visual-column .space-help{margin-bottom:.55rem}.space-canvas-grid{grid-template-columns:repeat(2, minmax(0, var(--canvas-stage-size)));column-gap:var(--canvas-column-gap);row-gap:var(--canvas-row-gap);justify-content:start;align-items:start;display:grid}.space-canvas-grid .canvas-panel,.space-canvas-grid .slice-view-block{flex-direction:column;display:flex}.space-canvas-grid .canvas-with-overlay{width:100%;margin:0}.space-canvas-grid .canvas-panel .canvas-box-control{width:100%;margin:0 0 .55rem}.space-canvas-grid h3{color:#334155;margin:0 0 .45rem;font-size:1rem}.oklab-space-canvas{aspect-ratio:1;border:1px solid #0f172a33;border-radius:14px;width:100%;min-height:0;max-height:none;overflow:hidden}.oklab-space-canvas canvas{width:100%;height:100%;display:block}.space-canvas-placeholder{color:#64748b;background:#ffffffb3;place-items:center;font-size:.86rem;display:grid}.canvas-with-overlay{position:relative}.canvas-selection-overlay{z-index:2;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#ffffffe6;border:1px solid #0f172a2e;border-radius:10px;align-items:center;gap:.55rem;max-width:calc(100% - 20px);padding:.4rem .5rem;display:flex;position:absolute;top:10px;left:10px}.overlay-swatch{border:1px solid #0f172a40;border-radius:4px;flex:none;width:24px;height:24px}.overlay-meta{color:#0f172a;min-width:0;font-size:.78rem;line-height:1.25}.overlay-meta code{font-size:.75rem}.canvas-static-caption{z-index:2;color:#0f172a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#ffffffe0;border:1px solid #0f172a2e;border-radius:10px;max-width:min(72%,250px);padding:.4rem .5rem;position:absolute;bottom:10px;right:10px}.canvas-static-caption-title{letter-spacing:.01em;font-size:.74rem;font-weight:700}.canvas-static-caption-body{margin-top:.12rem;font-size:.7rem;line-height:1.25}.slice-main h2{margin:0 0 .65rem}.slice-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.slice-view-block p{margin:0 0 .6rem}.slice-canvas{aspect-ratio:1;touch-action:none;cursor:crosshair;border:1px solid #0f172a33;border-radius:14px;width:100%;max-width:none;display:block}#top-nearest-colors{border:none}.slice-side{flex-direction:column;gap:1rem;display:flex}.slice-controls-below{width:100%;margin-top:.45rem}.slice-controls-below .card{width:100%}.card{padding:1rem}.card h2{margin:0 0 .75rem;font-size:1.1rem}.grid-top{margin-top:1rem}.oklab-panel{grid-column:1/-1}.oklab-current{color:#334155;margin:0 0 .75rem}.oklab-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;display:grid}.oklab-actions{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.8rem;display:flex}.oklab-actions button{color:#1e3a8a;cursor:pointer;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:.45rem .7rem}.oklab-preview{color:#475569;font-size:.9rem}.badge{color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:.12rem .6rem;font-size:.82rem}.swatches{gap:1rem;display:flex}.swatch-block{flex-direction:column;gap:.35rem;display:flex}.swatch{border:1px solid #cbd5e1;border-radius:10px;width:120px;height:120px}.nearest-compact .swatch{width:72px;height:72px}.nearest-row{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.nearest-meta{flex:1;gap:.28rem;min-width:260px;max-width:420px;margin:0}.swatch-empty{background:repeating-linear-gradient(45deg,#e2e8f0,#e2e8f0 10px,#f8fafc 10px 20px)}.meta{gap:.4rem;margin:1rem 0 0;display:grid}.meta div{justify-content:space-between;gap:.5rem;display:flex}.meta dt{color:#475569}.meta dd{margin:0;font-family:IBM Plex Mono,Menlo,monospace}.candidate-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.candidate-item{border:1px solid #e2e8f0;border-radius:10px;flex-direction:column;align-items:flex-start;gap:.24rem;padding:.65rem .75rem;display:flex}.candidate-main{align-items:center;gap:.5rem;font-size:.92rem;display:flex}.candidate-main-top span{color:#475569;font-size:.84rem}.candidate-subline{color:#475569;align-items:baseline;gap:.55rem;font-size:.84rem;display:flex}.candidate-dot{border:1px solid #cbd5e1;border-radius:4px;width:18px;height:18px}code{font-family:IBM Plex Mono,Menlo,monospace}.badge-line{color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:.35rem .5rem;font-size:.88rem}.inspector-lead{align-items:center;gap:.55rem;font-size:.92rem;display:flex}.inspector-divider{border:0;border-top:1px solid #dbe3ee;margin:.65rem 0 .75rem}.inspector-compare{flex-wrap:wrap;align-items:flex-start;gap:.75rem;display:flex}.inspector-color-block{min-width:240px}.inspector-label{color:#334155;font-size:.86rem}.inspector-swatch{width:72px;height:72px}@media (width<=840px){.grid,.slice-layout,.slice-main,.space-canvas-grid{grid-template-columns:1fr}.space-layout-row{flex-direction:column}.space-toolbar{margin-top:0}.space-visual-column{width:min(100%, var(--canvas-stage-size))}.slice-controls-below{width:100%}}@media (width<=560px){.form,.oklab-fields{grid-template-columns:1fr}.swatches,.nearest-row{flex-direction:column}.metric-toggle .metric-checkbox{width:100%;margin-left:0}.space-slider-stack .inline-control{grid-template-columns:1fr;row-gap:.35rem}}