:root { color-scheme: light; --ink: oklch(18% .018 350); --ink-soft: oklch(29% .018 350); --muted: oklch(45% .018 350); --canvas: oklch(98% .007 350); --surface: oklch(100% 0 0); --wash: oklch(94.5% .014 350); --line: oklch(85% .016 350); --accent: oklch(42% .13 8); --accent-hover: oklch(34% .13 8); --danger: oklch(48% .18 27); --success: oklch(42% .09 150); --radius: 14px; --content: 1120px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; } body { min-width: 320px; margin: 0; background: var(--canvas); color: var(--ink); } button, input, select { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .48; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid oklch(65% .15 8); outline-offset: 3px; } a { color: inherit; } .shell { width: min(100%, var(--content)); min-height: 100dvh; margin: auto; padding: max(18px, env(safe-area-inset-top)) 18px calc(36px + env(safe-area-inset-bottom)); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-bottom:clamp(30px, 7vw, 68px); } .brand img { display:block; width:112px; height:auto; } .top-actions { display:flex; align-items:center; gap:14px; } .quiet-link { min-height:42px; display:inline-flex; align-items:center; background:transparent; border:0; text-decoration:none; color:var(--ink-soft); font-size:.9rem; font-weight:700; } .count { display:grid; place-items:center; min-width:22px; height:22px; margin-left:7px; border-radius:999px; background:var(--ink); color:white; font-size:.72rem; }
.stage { width:min(100%, 820px); animation:rise .22s cubic-bezier(.16,1,.3,1); } .hero { padding-top:clamp(5vh, 11vh, 132px); max-width:660px; } .eyebrow { margin:0 0 12px; color:var(--accent); font-size:.82rem; font-weight:780; } h1,h2,h3,p { margin-top:0; } h1 { max-width:15ch; margin-bottom:16px; font-size:clamp(2.65rem, 8vw, 5rem); line-height:.98; letter-spacing:-.04em; text-wrap:balance; } h2 { margin-bottom:8px; font-size:1.25rem; letter-spacing:-.02em; } h3 { font-size:1rem; } .intro, .note, .field-help { max-width:58ch; color:var(--muted); line-height:1.55; text-wrap:pretty; } .intro { font-size:1.05rem; } .footer-note { margin-top:22px; font-size:.82rem; color:var(--muted); }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 17px; border:1px solid transparent; border-radius:10px; font-weight:760; text-decoration:none; transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .button:hover { transform:translateY(-1px); } .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); } .button.secondary { background:var(--surface); border-color:var(--ink); color:var(--ink); } .button.secondary:hover { border-color:var(--accent); color:var(--accent-hover); } .button.text { padding-inline:0; background:transparent; color:var(--ink-soft); text-decoration:underline; text-underline-offset:4px; } .button.danger { color:var(--danger); } .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.stage-head { margin-bottom:24px; } .steps { display:flex; gap:8px; margin-bottom:18px; color:var(--muted); font-size:.78rem; font-weight:700; } .steps span[aria-current="step"] { color:var(--accent); } .guide { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; list-style:none; } .guide li { padding:7px 10px; border-radius:999px; background:var(--wash); color:var(--ink-soft); font-size:.8rem; font-weight:650; }
.upload-panel { padding:clamp(20px, 5vw, 36px); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .upload-choice { display:grid; gap:14px; } .file-label { min-height:155px; display:grid; place-items:center; padding:22px; border:1.5px dashed oklch(57% .055 8); border-radius:12px; background:var(--canvas); text-align:center; cursor:pointer; } .file-label strong,.file-label span { display:block; } .file-label strong { font-size:1.05rem; } .file-label span { margin-top:5px; color:var(--muted); font-size:.88rem; } .file-label:hover { background:oklch(95% .025 8); border-color:var(--accent); } .file-label input { position:absolute; width:1px; height:1px; opacity:0; } .camera { overflow:hidden; border-radius:12px; background:var(--ink); } .camera video { display:block; width:100%; max-height:520px; object-fit:cover; } .camera p { margin:0; padding:11px 14px; color:#fff; font-size:.85rem; } .preview { margin:18px 0 0; overflow:hidden; border-radius:12px; background:var(--wash); } .preview img { display:block; width:100%; max-height:560px; object-fit:contain; } .preview figcaption { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 14px; background:var(--surface); font-size:.86rem; font-weight:700; }
.filters { display:grid; gap:13px; margin:18px 0; } .filter-group { display:flex; gap:8px; overflow-x:auto; padding:2px 0; scrollbar-width:none; } .chip { flex:0 0 auto; min-height:37px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink-soft); font-size:.81rem; font-weight:700; } .chip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:#fff; } .gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .style { overflow:hidden; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); text-align:left; } .style:hover { border-color:var(--accent); } .style[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:0; } .style img { display:block; width:100%; aspect-ratio: .86; object-fit:cover; background:var(--wash); } .style-copy { display:block; padding:10px; } .style-name { display:block; font-size:.91rem; font-weight:780; } .style-meta { display:block; margin-top:4px; color:var(--muted); font-size:.74rem; line-height:1.35; } .selection { display:flex; align-items:center; gap:12px; margin-top:20px; padding:12px; background:var(--wash); border-radius:12px; } .selection img { width:54px; height:54px; border-radius:8px; object-fit:cover; } .selection p { margin:3px 0 0; color:var(--muted); font-size:.83rem; }
.loading { display:flex; align-items:flex-start; gap:14px; margin-top:clamp(18vh, 27vh, 260px); padding:20px 0; border-block:1px solid var(--line); } .loading p { margin:0; color:var(--muted); line-height:1.5; } .loader { width:26px; height:26px; flex:none; border:2px solid oklch(77% .04 8); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; } .message { margin:14px 0; color:var(--danger); font-weight:650; line-height:1.45; }
.result-title { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:18px; } .result-title p { margin:3px 0 0; color:var(--muted); } .comparison { --reveal:50%; position:relative; overflow:hidden; width:100%; aspect-ratio:3/4; border-radius:var(--radius); background:var(--wash); isolation:isolate; } .comparison img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--wash); } .comparison .after { clip-path:inset(0 calc(100% - var(--reveal)) 0 0); } .comparison::after { content:""; position:absolute; inset:0 auto 0 var(--reveal); width:2px; background:#fff; box-shadow:0 0 0 1px rgb(0 0 0/.16); transform:translateX(-1px); pointer-events:none; } .compare-control { position:absolute; inset:auto 12px 16px; z-index:1; } .compare-control input { width:100%; accent-color:var(--accent); } .label { position:absolute; top:12px; padding:5px 8px; border-radius:999px; background:rgb(0 0 0/.62); color:#fff; font-size:.72rem; font-weight:750; } .label.before { left:12px; }.label.after-label{right:12px}.result-note { margin:14px 0 0; color:var(--muted); font-size:.88rem; line-height:1.5; }
.shortlist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } .look { overflow:hidden; border-radius:12px; background:var(--surface); } .look img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--wash); } .look p { margin:9px 10px 12px; color:var(--muted); font-size:.78rem; } .disclaimer { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); line-height:1.5; font-size:.9rem; }
.admin { width:min(100%,760px); } .admin-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:22px 0; } .stat { padding:16px; background:var(--surface); border-radius:12px; } .stat strong,.stat span { display:block; } .stat strong { font-size:1.65rem; letter-spacing:-.04em; } .stat span { margin-top:3px; color:var(--muted); font-size:.8rem; } .form-row { display:grid; gap:8px; margin:12px 0; } label { color:var(--ink-soft); font-size:.86rem; font-weight:700; } input { min-height:46px; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); }
.session-list { display:grid; gap:8px; margin:12px 0; padding:0; list-style:none; }.session-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }.session-list strong,.session-list small { display:block; }.session-list small { margin-top:3px; color:var(--muted); font-size:.78rem; }
.legal { max-width:70ch; }.legal h1{font-size:2.5rem}.legal h2{margin-top:28px}.legal p,.legal li{color:var(--ink-soft);line-height:1.62}.legal small{color:var(--muted)}
@keyframes spin { to { transform:rotate(360deg) } } @keyframes rise { from { opacity:0;transform:translateY(5px) } to { opacity:1;transform:translateY(0) } } @media(min-width:700px){.shell{padding-inline:32px}.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.shortlist{grid-template-columns:repeat(3,minmax(0,1fr))}.upload-choice{grid-template-columns:1fr 1fr}.file-label{min-height:190px}.button.primary.wide{min-width:230px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}