:root { --ink:#1b1b19; --paper:#f4f1eb; --line:rgba(27,27,25,.17); --muted:#74736e; --accent:#e54b2d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:Manrope, Arial, sans-serif; overflow-x:hidden; }
.noise { position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.13; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.header { height:77px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:0 clamp(20px, 5vw, 76px); font:11px 'DM Mono', monospace; letter-spacing:.04em; }
.logo { color:inherit; font:600 15px Manrope,sans-serif; letter-spacing:-.06em; text-decoration:none; }.logo span{color:var(--accent)}.header-note{text-align:center;color:var(--muted);margin:0}.counter{text-align:right}
main { max-width:1260px; margin:auto; padding:clamp(70px,11vw,145px) clamp(20px,5vw,76px) 70px; }
.intro { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; gap:20px; margin-bottom:clamp(70px,9vw,125px); }.eyebrow { font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; margin:0 0 13px; align-self:start; }.eyebrow::before{content:'✦'; color:var(--accent); margin-right:8px}.intro h1 { font-size:clamp(48px,7.1vw,98px); line-height:.94; letter-spacing:-.075em; margin:0; font-weight:700; }.intro h1 i{font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.07em}.description{max-width:265px; margin:0 0 3px; font-size:13px; line-height:1.6; color:#5f5f59}
.roulette { border-top:1px solid var(--ink); }.brief-row { display:grid; grid-template-columns:25.5% 1fr; min-height:105px; border-bottom:1px solid var(--line); }.row-label { padding:20px 10px 20px 0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; display:flex; gap:13px; align-items:center; }.row-label span { font:10px 'DM Mono',monospace; color:var(--accent); }.slot { overflow:hidden; display:flex; align-items:center; min-width:0; }.slot-value { font-size:clamp(25px,3.2vw,45px); font-weight:600; line-height:1.1; letter-spacing:-.065em; transform:translateY(0); }.name-value { font-family:'Playfair Display',serif; font-size:clamp(30px,4vw,54px); font-style:italic; letter-spacing:-.055em; }.mood-row .brief-row{}.mood-row { min-height:128px; }.mood-row .slot-value { font-size:clamp(21px,2.7vw,37px); }
.palette-slot{padding:16px 0}.palette { display:flex; width:min(100%,480px); height:64px; border-radius:2px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.08); }.swatch { width:50%; padding:9px 11px; display:flex; align-items:end; font:10px 'DM Mono', monospace; transition:background .5s ease; }.swatch span{background:rgba(255,255,255,.76); color:#222; padding:3px 5px; border-radius:2px;}.swatch-two span{background:rgba(0,0,0,.16);color:#fff}
.actions { display:flex; align-items:center; gap:22px; padding-top:33px; }.spin-button { border:0; color:white; background:var(--ink); border-radius:100px; padding:16px 26px; font:600 13px Manrope,sans-serif; cursor:pointer; transition:transform .25s ease, background .25s ease; display:flex; align-items:center; gap:12px; }.spin-button:hover{transform:translateY(-3px);background:var(--accent)}.spin-button:active{transform:translateY(0) scale(.97)}.spin-icon{font:24px 'DM Mono'; line-height:11px}.copy-button{border:0;background:none; padding:8px 0; display:flex;gap:8px;align-items:center;font:11px 'DM Mono',monospace;color:var(--muted);cursor:pointer}.copy-button:hover{color:var(--ink)}.copy-button svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.5}
footer { border-top:1px solid var(--line); padding:22px clamp(20px,5vw,76px); display:flex; justify-content:space-between; color:var(--muted); font:10px 'DM Mono',monospace; }
.rolling { animation:roll .12s linear infinite; opacity:.5; }.landed { animation:land .5s cubic-bezier(.18,.89,.32,1.18); } @keyframes roll{50%{transform:translateY(-7px)}}@keyframes land{0%{transform:translateY(-25px);opacity:0}100%{transform:translateY(0);opacity:1}}
@media(max-width:650px){.header{grid-template-columns:1fr auto}.header-note{display:none}.intro{display:block}.eyebrow{margin-bottom:28px}.intro h1{font-size:57px}.description{margin:32px 0 0}.brief-row{grid-template-columns:103px 1fr;min-height:94px}.row-label{font-size:10px;gap:7px;align-items:start;padding-top:25px}.row-label span{font-size:9px}.slot-value{font-size:26px}.mood-row .slot-value{font-size:22px}.palette{height:56px}.actions{gap:14px}.spin-button{padding:15px 20px}.copy-button span{display:none}footer{font-size:9px}.niche-row{min-height:114px}}

/* Controls extend the original editorial system: quiet rules, mono labels, no panels. */
.intensity {
  display:grid;
  grid-template-columns:25.5% 1fr;
  align-items:center;
  gap:0;
  padding:14px 0 18px;
  border-top:1px solid var(--line);
}
.intensity-heading { display:flex; flex-direction:column; gap:4px; font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.intensity-note { color:var(--muted); text-transform:none; letter-spacing:0; line-height:1.35; max-width:255px; }
.intensity-switch { display:flex; align-items:center; gap:5px; }
.intensity-option { border:1px solid var(--line); color:var(--muted); background:transparent; border-radius:100px; padding:8px 13px; font:10px 'DM Mono',monospace; cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; }
.intensity-option:hover { color:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
.intensity-option.is-active { color:var(--paper); border-color:var(--ink); background:var(--ink); }

.brief-row { grid-template-columns:25.5% minmax(0,1fr) 82px; transition:background .25s ease; }
.brief-row.is-locked { background:rgba(27,27,25,.035); }
.row-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; opacity:.42; transition:opacity .2s ease; }
.brief-row:hover .row-actions,.brief-row:focus-within .row-actions,.brief-row.is-locked .row-actions { opacity:1; }
.row-action { width:34px; height:34px; border:1px solid transparent; border-radius:50%; color:var(--muted); background:transparent; display:grid; place-items:center; cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; }
.row-action:hover { color:var(--ink); border-color:var(--line); transform:translateY(-1px); }
.row-action:active { transform:scale(.93); }
.row-action:disabled { opacity:.3; cursor:default; transform:none; }
.row-action span { font:20px 'DM Mono',monospace; line-height:1; }
.row-action svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.45; }
.lock-field[aria-pressed="true"] { color:var(--paper); border-color:var(--accent); background:var(--accent); }
.spin-button:disabled { opacity:.62; cursor:wait; transform:none; }

.actions { position:relative; flex-wrap:wrap; }
.copy-button { transition:color .2s ease,opacity .2s ease; }
.copy-button.is-saved { color:var(--accent); }
.export-wrap { position:relative; }
.export-menu { position:absolute; left:-18px; top:calc(100% + 14px); z-index:12; width:246px; padding:9px; color:var(--paper); background:var(--ink); border-radius:3px; box-shadow:0 18px 45px rgba(0,0,0,.2); }
.export-menu::before { content:''; position:absolute; left:28px; top:-5px; width:10px; height:10px; background:var(--ink); transform:rotate(45deg); }
.export-menu button { position:relative; width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.12); padding:11px 8px; color:inherit; background:none; text-align:left; font:11px Manrope,sans-serif; cursor:pointer; }
.export-menu button:last-child { border-bottom:0; }
.export-menu button:hover { color:#fff; background:rgba(255,255,255,.08); }
.export-menu button span { display:inline-block; width:29px; color:#9c9b96; font:9px 'DM Mono',monospace; }

.saved { margin-top:clamp(85px,11vw,145px); padding-top:28px; border-top:1px solid var(--ink); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:36px; }
.section-index { margin:0 0 8px; color:var(--accent); font:9px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.section-heading h2,.dialog-heading h2 { margin:0; font-size:clamp(29px,3.3vw,45px); line-height:1; letter-spacing:-.055em; }
.compare-controls { display:flex; flex-wrap:wrap; align-items:center; gap:15px; color:var(--muted); font:9px 'DM Mono',monospace; text-transform:uppercase; }
.outline-button { border:1px solid var(--ink); border-radius:100px; padding:10px 16px; color:var(--ink); background:transparent; font:600 10px Manrope,sans-serif; cursor:pointer; transition:color .2s ease,background .2s ease,opacity .2s ease; }
.outline-button:hover:not(:disabled) { color:var(--paper); background:var(--ink); }
.outline-button:disabled { opacity:.3; cursor:default; }
.saved-empty { margin:0; padding:35px 0 45px; border-top:1px solid var(--line); color:var(--muted); font:11px 'DM Mono',monospace; }
.saved-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.saved-card { position:relative; min-width:0; border-top:1px solid var(--line); padding-top:15px; }
.saved-card-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:25px; }
.compare-check { display:flex; align-items:center; gap:8px; color:var(--muted); font:9px 'DM Mono',monospace; text-transform:uppercase; cursor:pointer; }
.compare-check input { width:14px; height:14px; margin:0; accent-color:var(--accent); }
.card-tools { display:flex; align-items:center; gap:3px; }
.card-tool { border:0; padding:5px; color:var(--muted); background:transparent; font:16px 'DM Mono',monospace; cursor:pointer; }
.card-tool:hover { color:var(--ink); }
.card-tool svg { display:block; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
.saved-share-wrap { position:relative; display:flex; }
.saved-export-menu { left:auto; right:-39px; top:calc(100% + 10px); z-index:20; }
.saved-export-menu::before { left:auto; right:45px; }
.collection-export-wrap { position:relative; }
.collection-export-menu { left:auto; right:0; top:calc(100% + 11px); z-index:21; }
.collection-export-menu::before { left:auto; right:54px; }
.saved-niche { min-height:42px; margin:0 0 14px; font-size:15px; line-height:1.35; font-weight:600; }
.saved-name { margin:0 0 12px; font:italic 600 30px/1 'Playfair Display',serif; letter-spacing:-.04em; }
.saved-mood { min-height:37px; margin:0 0 20px; color:var(--muted); font-size:11px; line-height:1.55; }
.saved-palette { display:flex; height:43px; border-radius:2px; overflow:hidden; }
.saved-palette span { flex:1; display:flex; align-items:end; padding:6px; color:#fff; font:8px 'DM Mono',monospace; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.saved-meta { display:flex; justify-content:space-between; margin-top:9px; color:var(--muted); font:8px 'DM Mono',monospace; text-transform:uppercase; }

.compare-dialog { width:min(1120px,calc(100% - 40px)); max-height:calc(100vh - 40px); margin:auto; padding:clamp(25px,4vw,55px); border:0; color:var(--ink); background:var(--paper); box-shadow:0 25px 90px rgba(0,0,0,.28); }
.compare-dialog::backdrop { background:rgba(20,20,18,.62); backdrop-filter:blur(3px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:start; gap:25px; padding-bottom:28px; border-bottom:1px solid var(--ink); }
.dialog-close { border:0; padding:0; color:var(--ink); background:none; font:36px/1 Manrope,sans-serif; cursor:pointer; }
.comparison { overflow-x:auto; }
.comparison-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.comparison-table th,.comparison-table td { padding:21px 17px; border-bottom:1px solid var(--line); border-left:1px solid var(--line); text-align:left; vertical-align:top; }
.comparison-table th:first-child,.comparison-table td:first-child { width:125px; border-left:0; padding-left:0; color:var(--muted); font:9px 'DM Mono',monospace; text-transform:uppercase; }
.comparison-table th { font:italic 600 clamp(23px,3vw,34px)/1 'Playfair Display',serif; }
.comparison-table td { font-size:13px; line-height:1.5; }
.comparison-palette { display:flex; height:45px; min-width:120px; }
.comparison-palette i { flex:1; }

.toast { position:fixed; left:50%; bottom:28px; z-index:30; padding:11px 17px; border-radius:100px; color:var(--paper); background:var(--ink); box-shadow:0 8px 30px rgba(0,0,0,.18); font:10px 'DM Mono',monospace; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .25s ease,transform .25s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.print-card,.print-collection { display:none; }

@media(max-width:900px) {
  .saved-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:650px) {
  .intro h1 { font-size:clamp(46px,13.3vw,52px); }
  .intro h1 i { display:block; }
  .intensity { display:block; padding:13px 0 16px; }
  .intensity-heading { margin-bottom:13px; }
  .intensity-note { display:none; }
  .intensity-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .intensity-option { min-width:0; padding:8px 2px; font-size:8px; white-space:nowrap; }
  .brief-row { position:relative; grid-template-columns:91px minmax(0,1fr); }
  .brief-row .slot { padding-right:64px; }
  .row-actions { position:absolute; z-index:2; right:0; top:50%; gap:1px; padding-left:8px; opacity:1; background:linear-gradient(90deg,transparent 0,var(--paper) 22%); transform:translateY(-50%); }
  .brief-row.is-locked .row-actions { background:linear-gradient(90deg,transparent 0,#efede6 22%); }
  .row-action { width:30px; height:30px; }
  .row-label { padding-right:5px; }
  .brief-row .palette-slot { padding-right:69px; }
  .mood-row .slot-value { font-size:20px; }
  .actions { align-items:center; gap:12px 14px; }
  .copy-button span { display:none; }
  .export-menu { left:auto; right:-8px; }
  .export-menu::before { left:auto; right:17px; }
  .section-heading { display:block; }
  .compare-controls { justify-content:space-between; margin-top:20px; }
  .saved-grid { grid-template-columns:1fr; gap:35px; }
  .saved-niche,.saved-mood { min-height:0; }
  .compare-dialog { width:calc(100% - 20px); padding:24px 18px; }
  .comparison-table { min-width:590px; }
  .comparison-table th:first-child,.comparison-table td:first-child { width:95px; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

@media print {
  @page { size:A4 portrait; margin:0; }
  body { background:#f4f1eb!important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  body:not(.printing-collection) > *:not(.print-card) { display:none!important; }
  body.printing-collection > *:not(.print-collection) { display:none!important; }
  .print-card { width:210mm; height:297mm; padding:20mm; display:flex!important; flex-direction:column; color:#1b1b19; background:#f4f1eb; }
  body.printing-collection .print-card { display:none!important; }
  .print-brand { padding-bottom:8mm; border-bottom:.3mm solid #1b1b19; font:600 16pt Manrope,sans-serif; letter-spacing:-.06em; }
  .print-brand span { color:#e54b2d; }
  .print-kicker { margin:20mm 0 8mm; color:#e54b2d; font:9pt 'DM Mono',monospace; text-transform:uppercase; }
  .print-content { flex:1; border-top:.3mm solid #1b1b19; }
  .print-content > div { display:grid; grid-template-columns:35mm 1fr; align-items:center; min-height:46mm; border-bottom:.2mm solid rgba(27,27,25,.25); }
  .print-content span { font:8pt 'DM Mono',monospace; text-transform:uppercase; }
  .print-content strong { font:600 25pt/1.12 Manrope,sans-serif; letter-spacing:-.055em; }
  .print-content .print-name { font:italic 600 34pt/1 'Playfair Display',serif; }
  .print-palette { display:flex; height:27mm; }
  .print-palette i { flex:1; }
  body.printing-collection .print-collection { width:210mm; display:block!important; color:#1b1b19; background:#f4f1eb; }
  .collection-print-card { width:210mm; min-height:297mm; padding:20mm; display:flex; flex-direction:column; background:#f4f1eb; break-after:page; page-break-after:always; }
  .collection-print-card:last-child { break-after:auto; page-break-after:auto; }
  .collection-print-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:8mm; border-bottom:.3mm solid #1b1b19; font:600 16pt Manrope,sans-serif; letter-spacing:-.06em; }
  .collection-print-head b { color:#e54b2d; font:9pt 'DM Mono',monospace; letter-spacing:.04em; }
  .collection-print-kicker { margin:20mm 0 4mm; color:#e54b2d; font:9pt 'DM Mono',monospace; text-transform:uppercase; }
  .collection-print-card h1 { margin:0 0 16mm; font:italic 600 38pt/1 'Playfair Display',serif; letter-spacing:-.045em; }
  .collection-print-row { display:grid; grid-template-columns:35mm 1fr; align-items:start; padding:9mm 0; border-top:.2mm solid rgba(27,27,25,.25); }
  .collection-print-row > span { padding-top:2mm; font:8pt 'DM Mono',monospace; text-transform:uppercase; }
  .collection-print-row strong { font:600 21pt/1.15 Manrope,sans-serif; letter-spacing:-.045em; }
  .collection-print-row p { margin:0; font:600 17pt/1.3 Manrope,sans-serif; letter-spacing:-.035em; }
  .collection-print-palette { display:flex; height:26mm; }
  .collection-print-palette i { flex:1; }
}