:root { color-scheme: light; --ink:#171717; --muted:#686868; --line:#dededb; --paper:#fff; --soft:#f5f5f2; --yellow:#ffd84a; --blue:#3678f5; --red:#e94b3c; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { min-height:68px; padding:12px clamp(18px,4vw,56px); display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; font-size:21px; }
.brand img { width:34px; height:34px; }
.prototype-tag { padding:5px 9px; background:var(--yellow); font-size:12px; font-weight:800; text-transform:uppercase; }
.home-link { margin-left:auto; color:var(--ink); font-weight:700; }
main { width:min(1440px,100%); margin:auto; padding:clamp(28px,5vw,72px) clamp(16px,4vw,56px) 72px; }
.intro { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:clamp(28px,6vw,96px); align-items:end; margin-bottom:38px; }
.eyebrow { margin:0 0 8px; color:#555; font-size:12px; font-weight:850; text-transform:uppercase; }
h1 { max-width:760px; margin:0; font-size:clamp(38px,6vw,76px); line-height:.98; letter-spacing:0; }
.lede { max-width:720px; margin:22px 0 0; color:var(--muted); font-size:clamp(17px,2vw,21px); line-height:1.55; }
.privacy-callout { border-left:5px solid var(--blue); padding:14px 0 14px 18px; display:grid; gap:6px; line-height:1.4; }
.privacy-callout span { color:var(--muted); }
.setup { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:12px; background:rgba(255,255,255,.96); border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.06); }
.file-action input { position:absolute; opacity:0; pointer-events:none; }
.file-action span,.setup button { min-height:42px; border:1px solid #171717; padding:10px 15px; background:#fff; font-weight:750; cursor:pointer; }
.file-action span { display:inline-flex; align-items:center; background:var(--ink); color:#fff; }
.mode-control { display:flex; }
.mode-control button { border-right:0; }
.mode-control button:last-child { border-right:1px solid #171717; }
.mode-control button.is-active { background:var(--yellow); }
.radius-control { display:flex; align-items:center; gap:9px; margin-left:auto; font-size:13px; font-weight:700; }
.setup .danger { color:#a52620; }
.setup .detect { border-color:var(--blue); color:#225fcf; }
.setup button:disabled { opacity:.4; cursor:not-allowed; }
.workspace { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(330px,.75fr); border:1px solid var(--line); border-top:0; min-height:640px; }
.canvas-panel { padding:22px; min-width:0; border-right:1px solid var(--line); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.panel-head h2 { margin:0; font-size:22px; }
.panel-head > span { color:var(--muted); font-size:13px; }
.panel-head.compact { margin:0; }
.canvas-wrap { position:relative; min-height:520px; display:grid; place-items:center; overflow:hidden; background:#ecece8; }
#photoCanvas { display:block; max-width:100%; max-height:70vh; width:auto; height:auto; cursor:crosshair; touch-action:none; }
.empty-state { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; color:var(--muted); }
.empty-state[hidden] { display:none; }
.empty-icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid #aaa; border-radius:50%; font-size:30px; }
.canvas-help { margin:14px 0 0; color:var(--muted); font-size:14px; }
.analysis-panel { min-width:0; background:var(--soft); }
.calibration-block,.results-head { padding:22px; border-bottom:1px solid var(--line); }
.calibration-block > p { margin:12px 0 0; color:var(--muted); line-height:1.5; }
.status-dot { width:13px; height:13px; border-radius:50%; background:#aaa; }
.status-dot.good { background:#268447; }.status-dot.fair { background:#d59a16; }
.sample-list { max-height:630px; overflow:auto; padding:12px; }
.empty-copy { color:var(--muted); line-height:1.5; }
.sample-card { background:#fff; border:1px solid var(--line); padding:13px; margin-bottom:9px; }
.sample-title { display:grid; grid-template-columns:28px 34px minmax(0,1fr) auto; align-items:center; gap:9px; }
.number { display:grid; place-items:center; width:26px; height:26px; background:var(--ink); color:#fff; font-size:12px; font-weight:800; }
.swatch,.mini-swatch,.cluster-swatch { background:var(--swatch); border:1px solid rgba(0,0,0,.18); }
.swatch { width:34px; height:34px; }.sample-title div { min-width:0; display:grid; }.sample-title small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.distance { color:var(--muted); font-size:12px; }.sample-card summary { margin-top:10px; cursor:pointer; font-size:13px; font-weight:700; }.sample-card ol { margin:10px 0 0; padding:0; list-style:none; }.sample-card li { display:grid; grid-template-columns:18px 1fr auto; gap:8px; padding:6px 0; border-top:1px solid #eee; font-size:13px; }.mini-swatch { width:18px; height:18px; }.sample-card li small { color:var(--muted); }
.clusters-panel { padding:28px 0; }.cluster-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:12px; }.cluster-card { min-height:110px; display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:14px; border:1px solid var(--line); padding:16px; }.cluster-swatch { width:58px; height:58px; border-radius:50%; }.cluster-card div { display:grid; gap:3px; }.cluster-card small,.cluster-card p,.cluster-card > span:last-child { color:var(--muted); font-size:12px; }.cluster-card p { margin:0; }.cluster-card strong { font-size:20px; }
.limitations { margin-top:18px; padding:18px 20px; border:1px solid #e0bd35; background:#fff9d9; }.limitations p { margin:6px 0 0; color:#5e5635; line-height:1.5; }
@media (max-width:900px) { .intro,.workspace { grid-template-columns:1fr; }.canvas-panel { border-right:0; border-bottom:1px solid var(--line); }.setup { position:relative; flex-wrap:wrap; }.radius-control { width:100%; margin:4px 0; }.canvas-wrap { min-height:360px; } }
@media (max-width:560px) { .prototype-tag { display:none; } main { padding-top:30px; }.intro { display:block; }.privacy-callout { margin-top:24px; }.setup { margin-inline:-16px; border-inline:0; }.file-action,.file-action span { width:100%; justify-content:center; }.mode-control { width:100%; }.mode-control button { flex:1; padding-inline:8px; }.setup > .secondary { flex:1; }.workspace { margin-inline:-16px; border-inline:0; }.canvas-panel { padding:16px; }.canvas-wrap { min-height:300px; }.sample-list { max-height:none; }.cluster-grid { grid-template-columns:1fr; } }