:root{
  color-scheme: light;

  --paper:       #F2F1EC;
  --paper-2:     #E7E5DE;
  --surface:     #FBFAF7;
  --ink:         #16161A;
  --ink-2:       #3C3C42;
  --ink-soft:    #6E6E75;
  --line:        #D8D5CC;
  --line-strong: #B4B0A4;

  --accent:      #1F3FD0;
  --on-accent:   #FFFFFF;

  --ok:   #1C6B47;  --ok-bg:   #E0EDE6;
  --warn: #86610F;  --warn-bg: #F3ECDC;
  --crit: #A32718;  --crit-bg: #F5E2DE;
  --info: #1F3FD0;  --info-bg: #E2E6F8;

  --r-s: 0px;
  --r-m: 0px;
  --r-btn: 0px;

  --shadow-s: none;
  --shadow-m: 0 8px 26px rgba(22,22,26,.09);
  --shadow-l: -14px 0 44px rgba(22,22,26,.20);

  --rail: 78px;
  --sheet: 560px;
  --gap: 12px;

  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.3,1);
  --t: 240ms;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#121216; --paper-2:#191920; --surface:#1B1B22;
    --ink:#EDEDF0; --ink-2:#C9C9D2; --ink-soft:#8E8E99;
    --line:#2B2B34; --line-strong:#3E3E4A;
    --accent:#8AA0FF; --on-accent:#0C0C14;
    --ok:#6CC49A;  --ok-bg:#162B21;
    --warn:#D9B06A; --warn-bg:#2E2614;
    --crit:#EE8A7A; --crit-bg:#361A16;
    --info:#8AA0FF; --info-bg:#191F3A;
    --shadow-m: 0 8px 26px rgba(0,0,0,.5);
    --shadow-l: -14px 0 44px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#121216; --paper-2:#191920; --surface:#1B1B22;
  --ink:#EDEDF0; --ink-2:#C9C9D2; --ink-soft:#8E8E99;
  --line:#2B2B34; --line-strong:#3E3E4A;
  --accent:#8AA0FF; --on-accent:#0C0C14;
  --ok:#6CC49A;  --ok-bg:#162B21;
  --warn:#D9B06A; --warn-bg:#2E2614;
  --crit:#EE8A7A; --crit-bg:#361A16;
  --info:#8AA0FF; --info-bg:#191F3A;
  --shadow-m: 0 8px 26px rgba(0,0,0,.5);
  --shadow-l: -14px 0 44px rgba(0,0,0,.65);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width:100%; }
[hidden]{ display:none !important; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.018em; text-wrap:balance; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
a{ color:inherit; text-underline-offset:3px; }
button, input, textarea, select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
::selection{ background: var(--accent); color: var(--on-accent); }

.dim{ color: var(--ink-soft); }
.skip{ position:absolute; left:-9999px; top:8px; z-index:99; background: var(--ink); color: var(--paper); padding:10px 16px; text-decoration:none; }
.skip:focus{ left:8px; }

.shell{ display:flex; height:100dvh; overflow:hidden; }

.rail{
  width: var(--rail); flex:0 0 var(--rail);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 0 14px; background: var(--paper-2);
}
.rail__logo{
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-display); font-size:19px; font-weight:600;
  letter-spacing:.24em; text-decoration:none; padding:6px 0 14px;
}
.rail__tabs{ display:flex; flex-direction:column; gap:4px; width:100%; align-items:center; }
.rail__foot{ margin-top:auto; display:flex; flex-direction:column; gap:4px; align-items:center; }

.railbtn{
  width:58px; padding:9px 0 7px; border:0; background:transparent; color: var(--ink-2);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.railbtn:hover{ color: var(--ink); background: var(--surface); }
.railbtn__svg{ width:20px; height:20px; display:block; }
.railbtn__l{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; }
.railbtn--tab.is-on{ background: var(--ink); color: var(--paper); }

.stage{ flex:1; position:relative; overflow:hidden; min-width:0; }

.mosaic{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  padding: 0 var(--gap) 28px;
}
.filterbar{
  position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:6px;
  padding:14px 2px; margin-bottom:2px;
  background: linear-gradient(var(--paper) 62%, color-mix(in oklab, var(--paper) 0%, transparent));
}
.chip{
  display:inline-flex; align-items:center; height:32px; padding:0 14px;
  border:1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft);
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition: all var(--t) var(--ease);
}
.chip:hover{ border-color: var(--ink); color: var(--ink); }
.chip.is-on{ background: var(--ink); border-color: var(--ink); color: var(--paper); }

.grid{ columns: 4; column-gap: var(--gap); }
.tile{
  break-inside: avoid; margin-bottom: var(--gap); position:relative;
  display:block; cursor:pointer; background: var(--surface);
}
.tile__art{ position:relative; overflow:hidden; background: var(--surface); }
.tile--tall   .tile__art{ aspect-ratio: 3/4; }
.tile--square .tile__art{ aspect-ratio: 1/1; }
.tile--wide   .tile__art{ aspect-ratio: 4/3; }

.tile__no{
  position:absolute; left:12px; top:10px; z-index:2;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; color: var(--ink-soft);
}
.plate__l1, .plate__l2, .plate__l3{ position:absolute; border:1.5px solid var(--a); border-radius:50%; }

.plate--1 .plate__l1{ left:20%; top:16%; width:58%; height:58%; }
.plate--1 .plate__l2{ left:34%; top:32%; width:32%; height:54%; transform: rotate(18deg); }
.plate--1 .plate__l3{ left:14%; top:48%; width:44%; height:26%; transform: rotate(-24deg); }

.plate--2 .plate__l1{ left:16%; top:12%; width:68%; height:68%; }
.plate--2 .plate__l2{ left:32%; top:28%; width:36%; height:36%; background: var(--a); border-color: var(--a); }
.plate--2 .plate__l3{ left:8%; top:56%; width:84%; height:34%; border-radius:50% 50% 0 0 / 100% 100% 0 0; border-bottom:0; }

.plate--3 .plate__l1{ left:10%; top:28%; width:80%; height:46%; transform: rotate(-12deg); }
.plate--3 .plate__l2{ left:27%; top:10%; width:46%; height:80%; transform: rotate(14deg); }
.plate--3 .plate__l3{ display:none; }

.tile__cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 16px 14px;
  display:flex; flex-direction:column; gap:4px;
  background: linear-gradient(to top, color-mix(in oklab, var(--paper) 96%, transparent), color-mix(in oklab, var(--paper) 0%, transparent));
  opacity:0; transform: translateY(8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.tile:hover .tile__cap, .tile:focus-visible .tile__cap, .tile:focus-within .tile__cap{ opacity:1; transform:none; }
.tile__tag{ font-family: var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); }
.tile__t{ font-size:18px; }
.tile__d{ font-size:13.5px; color: var(--ink-2); }

.mosaic__foot{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-family: var(--font-mono); font-size:11px; color: var(--ink-soft);
}

.scrim{
  position:absolute; inset:0; z-index:8; background: rgba(22,22,26,.34);
  opacity:0; pointer-events:none; transition: opacity var(--t) var(--ease);
}
.scrim.is-on{ opacity:1; pointer-events:auto; }

.sheet{
  position:absolute; top:0; right:0; bottom:0; z-index:9;
  width: min(var(--sheet), 100%);
  display:flex; flex-direction:column;
  background: var(--surface); box-shadow: var(--shadow-l);
  transform: translateX(101%); pointer-events:none;
  transition: transform var(--t) var(--ease);
}

.sheet.is-open{ transform:none; pointer-events:auto; }

.sheet__top{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; border-bottom:1px solid var(--ink);
}
.sheet__h{ font-size:26px; }
.sheet__x{
  width:38px; height:38px; flex:none; border:1px solid var(--line-strong);
  background:transparent; color: var(--ink); cursor:pointer; font-size:15px; line-height:1;
}
.sheet__x:hover{ border-color: var(--accent); color: var(--accent); }

.sheet__body{ flex:1; overflow-y:auto; padding:22px; }
.sheet__lead{ font-family: var(--font-display); font-size:18px; line-height:1.45; margin-bottom:16px; }
.sheet__p{ color: var(--ink-2); font-size:15px; margin-bottom:14px; }

.mark{
  width:92px; height:92px; display:grid; place-items:center; margin-bottom:18px;
  border:1px solid var(--ink); background: var(--paper);
  font-family: var(--font-display); font-size:34px; font-weight:600; color: var(--accent);
}

.facts{ display:flex; flex-direction:column; margin:18px 0; }
.facts li, .facts > div{ padding:11px 0; border-top:1px solid var(--line); font-size:14.5px; color: var(--ink-2); }
.facts b{ font-family: var(--font-mono); font-size:12px; color: var(--accent); font-weight:400; margin-right:12px; }
.facts--dl dt{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-bottom:5px; }
.facts--dl dd{ font-size:15px; color: var(--ink); }

.pull{
  margin:22px 0; padding:20px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  font-family: var(--font-display); font-style:italic; font-size:19px; line-height:1.34;
}
.pull cite{ display:block; margin-top:12px; font-style:normal; font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }

.qa{ border-top:1px solid var(--line); }
.qa summary{ cursor:pointer; list-style:none; padding:14px 30px 14px 0; position:relative; font-family: var(--font-display); font-size:16.5px; font-weight:600; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-family: var(--font-ui); font-size:18px; color: var(--accent); }
.qa[open] summary::after{ content:"–"; }
.qa p{ padding:0 8% 16px 0; color: var(--ink-soft); font-size:14.5px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border:1px solid var(--ink); border-radius:0;
  font-size:15px; font-weight:500; text-decoration:none; cursor:pointer; white-space:nowrap;
  background:transparent; color: var(--ink);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn:hover{ background: var(--ink); color: var(--paper); }
.btn--solid{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--solid:hover{ background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--ghost{ border-color: var(--line-strong); }
.btn--sm{ min-height:36px; padding:0 14px; font-size:13.5px; }
.btn[disabled]{ opacity:.35; cursor:not-allowed; }

.pgroup{ margin-bottom:26px; }
.pgroup__h{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink-soft); padding-bottom:8px; border-bottom:1px solid var(--ink);
}
.prow{
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  gap:3px 18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line);
}
.prow:hover .prow__n{ color: var(--accent); }
.prow__n{ font-family: var(--font-display); font-size:18px; font-weight:600; transition: color var(--t) var(--ease); }
.prow__p{ grid-column:2/3; grid-row:1/2; font-family: var(--font-display); font-size:19px; font-weight:600; white-space:nowrap; font-variant-numeric: tabular-nums; }
.prow__t{ grid-column:1/2; font-family: var(--font-mono); font-size:11.5px; color: var(--ink-soft); }
.prow__d{ grid-column:1/-1; font-size:14px; color: var(--ink-soft); }
.prow__go{
  grid-column:2/3; justify-self:end; background:none; border:0; padding:0; cursor:pointer;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--accent); border-bottom:1px solid currentColor;
}

.wizard{ display:flex; flex-direction:column; gap:0; }
.steps{ display:grid; grid-template-columns: repeat(4,1fr); border-bottom:1px solid var(--ink); }
.step{
  display:flex; align-items:center; gap:7px; padding:10px 8px; border-right:1px solid var(--line);
  font-family: var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft);
}
.step:last-child{ border-right:0; }
.step span{ width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center; border:1px solid currentColor; font-size:10px; }
.step.is-on{ color: var(--accent); }
.step.is-on span{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.step.is-done span{ background: var(--ink-soft); color: var(--surface); border-color: var(--ink-soft); }

.wizard__body{ padding:20px 0; min-height:300px; }
.pane{ display:none; }
.pane.is-on{ display:block; }

.pickgrid{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); }
.pick{
  text-align:left; cursor:pointer; padding:14px 16px; background:transparent;
  border:0; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px; transition: background var(--t) var(--ease);
}
.pick:hover{ background: var(--paper-2); }
.pick.is-on{ background: var(--accent); color: var(--on-accent); }
.pick.is-on .pick__d{ color: inherit; opacity:.82; }
.pick.is-on .pick__f b{ color: inherit; }
.pick__t{ font-family: var(--font-display); font-size:17px; font-weight:600; }
.pick__d{ font-size:13.5px; color: var(--ink-soft); }
.pick__f{ display:flex; gap:14px; margin-top:3px; font-family: var(--font-mono); font-size:12px; font-variant-numeric: tabular-nums; }
.pick__f b{ color: var(--accent); font-weight:500; }

.whenwrap{ display:flex; flex-direction:column; gap:22px; }
.cal__bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.cal__m{ font-family: var(--font-display); font-size:18px; font-weight:600; text-transform:capitalize; }
.cal__nav{ display:flex; gap:5px; }
.cal__nav button{ width:30px; height:30px; border:1px solid var(--line-strong); background:transparent; color: var(--ink); cursor:pointer; line-height:1; }
.cal__nav button:hover:not([disabled]){ border-color: var(--accent); color: var(--accent); }
.cal__nav button[disabled]{ opacity:.3; cursor:not-allowed; }
.cal__dow, .cal__grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:3px; }
.cal__dow span{ text-align:center; font-family: var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); padding-bottom:5px; }
.cal__d{
  aspect-ratio:1; border:1px solid var(--line); background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family: var(--font-mono); font-size:12.5px; font-variant-numeric: tabular-nums; color: var(--ink);
  transition: background var(--t) var(--ease);
}
.cal__d:hover:not([disabled]){ background: var(--paper-2); }
.cal__d[disabled]{ border-color:transparent; color: color-mix(in oklab, var(--ink-soft) 45%, transparent); cursor:not-allowed; }
.cal__d.is-empty{ border-color:transparent; cursor:default; }
.cal__d.is-today{ border-color: var(--ink); }
.cal__d.is-on{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cal__dot{ width:4px; height:4px; background: var(--accent); }
.cal__d.is-on .cal__dot{ background: var(--on-accent); }
.cal__d.is-full .cal__dot{ background: var(--ink-soft); }

.slots__head h3{ font-family: var(--font-display); font-size:18px; font-weight:600; }
.slots__hint{ font-size:13.5px; color: var(--ink-soft); margin-top:5px; }
.slots__list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.slot{
  min-width:72px; height:38px; padding:0 12px; cursor:pointer;
  border:1px solid var(--line-strong); background:transparent; color: var(--ink);
  font-family: var(--font-mono); font-size:13px; font-variant-numeric: tabular-nums;
  transition: all var(--t) var(--ease);
}
.slot:hover{ border-color: var(--accent); color: var(--accent); }
.slot.is-on{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slot[disabled]{ opacity:.3; cursor:not-allowed; text-decoration: line-through; }
.slots__empty{ padding:16px; border:1px dashed var(--line-strong); color: var(--ink-soft); font-size:14px; }

.form{ display:grid; grid-template-columns:1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field > label{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }
.req{ color: var(--accent); }
.field input[type="text"], .field input[type="tel"], .field textarea{
  width:100%; padding:12px 14px; background: var(--paper); color: var(--ink);
  border:1px solid var(--line-strong); border-radius:0; font-size:15.5px;
}
.field input:focus, .field textarea:focus{ border-color: var(--accent); }
.field textarea{ resize:vertical; font-family: var(--font-ui); }
.field.is-bad input, .field.is-bad textarea{ border-color: var(--crit); }
.hint{ font-size:13px; color: var(--ink-soft); }
.err{ font-size:13px; color: var(--crit); }
.form__err{ padding:12px 16px; background: var(--crit-bg); color: var(--crit); border:1px solid var(--crit); font-size:14.5px; }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color: var(--ink-2); cursor:pointer; text-transform:none; letter-spacing:0; }
.check input{ margin-top:2px; width:17px; height:17px; accent-color: var(--accent); }

.confirm{ display:flex; flex-direction:column; gap:22px; }
.summary{ display:flex; flex-direction:column; border-top:1px solid var(--ink); }
.summary__row{ display:grid; grid-template-columns:120px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.summary__row dt{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); padding-top:3px; }
.summary__row dd{ font-size:15.5px; }
.summary__total{ display:flex; align-items:baseline; justify-content:space-between; padding-top:14px; }
.summary__total b{ font-family: var(--font-display); font-size:28px; font-weight:600; font-variant-numeric: tabular-nums; }
.rules{ padding:18px; border:1px solid var(--line); background: var(--paper); }
.rules h4{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-bottom:12px; }
.rules li{ font-size:14px; color: var(--ink-2); padding-left:18px; position:relative; margin-bottom:9px; }
.rules li::before{ content:"—"; position:absolute; left:0; top:0; color: var(--accent); }

.done{ text-align:center; padding:20px 0 8px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.done__mark{ width:56px; height:56px; display:grid; place-items:center; border:1px solid var(--accent); color: var(--accent); font-size:25px; }
.done h3{ font-size:28px; }
.done p{ color: var(--ink-soft); }
.done__code{ font-family: var(--font-mono); font-size:15px; letter-spacing:.18em; padding:10px 20px; border:1px dashed var(--line-strong); }

.wizard__foot{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--ink); }
.wizard__state{ flex:1; font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; color: var(--ink-soft); text-align:center; }

[data-variant="calm"] .grid{ columns: 3; }
[data-variant="calm"] .tile__cap{ opacity:1; transform:none; position:static; background:none; padding:12px 2px 0; }
[data-variant="calm"] .tile__cap .tile__d{ display:none; }

@media (max-width: 1500px){ .grid{ columns: 3; } [data-variant="calm"] .grid{ columns:2; } }
@media (max-width: 1080px){ .grid{ columns: 2; } [data-variant="calm"] .grid{ columns:2; } }

@media (max-width: 760px){
  .shell{ flex-direction:column-reverse; }
  .rail{
    width:100%; flex:0 0 auto; flex-direction:row; justify-content:space-around;
    gap:0; padding:0; border-top:1px solid var(--ink);
  }
  .rail__logo{ display:none; }
  .rail__tabs{ flex-direction:row; width:auto; gap:0; }
  .rail__foot{ margin-top:0; flex-direction:row; gap:0; }
  .railbtn{ width:auto; min-width:64px; padding:9px 10px 8px; }
  .stage{ flex:1; }
  .grid{ columns: 2; }
  [data-variant="calm"] .grid{ columns:1; }
  .sheet{ width:100%; }
  .tile__cap{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:1ms !important; transition-duration:1ms !important; }
  .sheet{ transition:none; }
}