/* ═══════════════════════════════════════════════════════════
   Please Sit — design system
   One committed visual world: warm, joyful, wedding-paper.
   Every colour painted explicitly so it holds on any host.
   ═══════════════════════════════════════════════════════════ */
:root{
  --cream:#FFF9F3; --panel:#FFFFFF; --panel2:#FFF2E9; --panel3:#FDEBE1;
  --ink:#3A2A38; --ink-soft:#8B7386; --ink-faint:#B9A6B2;
  --rose:#E4577B; --rose-deep:#C23A61; --rose-soft:#FBE3EA;
  --coral:#F49E6B; --coral-soft:#FDEADA;
  --lilac:#9D7BD8; --lilac-soft:#EFE7FB;
  --sage:#7FA886; --sage-soft:#E4F0E6;
  --gold:#E9B94E; --gold-soft:#FBF0D7; --gold-ink:#96751F;
  --sky:#7FB8E0; --sky-soft:#E2F0FA;
  --danger:#E0526B; --danger-soft:#FBE2E6;
  --grey-thread:#B9BCD0;
  --rule-blue:#2563EB; --rule-blue-soft:#E9F0FF;
  --rule-green:#07835D; --rule-green-soft:#E1F6EC;
  --rule-red:#E33F55; --rule-red-soft:#FFE5EA;
  --guest-border:#CFC4CC;
  --shadow-s:0 4px 14px rgba(58,42,56,.07);
  --shadow:0 10px 30px rgba(58,42,56,.10);
  --shadow-l:0 24px 60px rgba(58,42,56,.16);
  --r-s:14px; --r:22px; --r-l:30px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
  /* Motion durations. motion.js mirrors these in DUR so a JS animation and
     its CSS sibling can never drift apart. */
  --dur-xs:120ms; --dur-s:220ms; --dur-m:380ms; --dur-l:520ms; --dur-xl:780ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Nunito","Segoe UI",system-ui,Arial,sans-serif;
  font-size:16px;line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:8px}
.fr{font-family:"Fraunces",Georgia,serif}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ── top bar ────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:12px 20px;background:var(--cream);border-bottom:1px solid var(--panel3);
}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.1rem}
.logo .dots{display:flex}
.logo .dots i{width:14px;height:14px;border-radius:50%;display:block}
.logo .dots i:first-child{background:var(--rose)}
.logo .dots i:last-child{background:var(--gold);margin-left:-5px}
.bar .spacer{flex:1}
.iconbtn{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;
  background:var(--panel);box-shadow:var(--shadow-s);transition:transform .25s var(--spring);
}
.iconbtn:hover{transform:translateY(-2px) scale(1.08)}
.iconbtn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.iconbtn.app-only{display:none}
body.in-app .iconbtn.app-only{display:grid}
.privacy-settings{display:none;padding:8px 10px;border:1px solid var(--panel3);border-radius:999px;background:var(--panel);color:var(--ink-soft);font-size:.7rem;font-weight:900;white-space:nowrap}.privacy-settings:hover{border-color:#D9C3CE;color:var(--ink)}body.in-app .privacy-settings{display:inline-flex}
.bar-cta{
  background:var(--rose);color:#fff;font-weight:800;
  padding:10px 20px;border-radius:999px;box-shadow:0 6px 16px rgba(228,87,123,.28);
  transition:transform .2s var(--ease);white-space:nowrap;
}
.bar-cta:hover{transform:translateY(-1px)}
.bar-cta.owned{background:var(--sage);box-shadow:none}
.lang-switch{
  color:var(--ink-soft);font-size:.76rem;font-weight:900;letter-spacing:.04em;
  padding:8px 10px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s;
}
.lang-switch:hover{background:var(--panel2);color:var(--rose)}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;z-index:1;text-align:center;padding:60px 20px 34px;max-width:780px;margin:0 auto}
.hero h1{
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(2.1rem,5.6vw,3.4rem);
  line-height:1.08;margin:0 0 14px;text-wrap:balance;color:var(--ink);
}
.hero p{color:var(--ink-soft);font-weight:700;font-size:1.08rem;margin:0 0 24px}
.hero .go{
  font-size:1.12rem;font-weight:900;color:#fff;padding:16px 38px;border-radius:999px;
  background:var(--rose);box-shadow:0 10px 24px rgba(228,87,123,.28);
  transition:transform .2s var(--ease);
}
.hero .go:hover{transform:translateY(-1px)}
.hero .hint{margin-top:14px;font-size:.85rem;color:var(--ink-soft);font-weight:700}
.hero .founder{margin:8px 0 0;font-size:.82rem;color:var(--ink-faint);font-weight:700}
.hero-preview{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px auto 0;max-width:520px;
  pointer-events:none;
}
.hero-preview .chip{box-shadow:var(--shadow-s)}
.hero .rules{margin:18px 0 0;font-size:.86rem;font-weight:800;color:var(--ink-soft)}
/* The hero photograph breaks out of the 780px hero column: `left:50%` puts its
   left edge on the hero centre, the translate re-centres it on the page. Both
   html and body already clip overflow-x, so the wider box cannot scroll. The
   aspect-ratio is pinned per breakpoint to match whichever <source> wins, so
   the reserved box is always the box the photo lands in — no layout shift. */
.hero-photo{
  position:relative;left:50%;transform:translateX(-50%);
  width:min(1040px,92vw);margin:34px 0 0;
  aspect-ratio:3/2;border-radius:var(--r-l);overflow:hidden;
  background:var(--panel3);box-shadow:var(--shadow-l);
}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:700px){.hero-photo{aspect-ratio:1600/746}}

/* ── closing note ───────────────────────────────────────── */
.proof{
  position:relative;z-index:1;display:grid;align-items:center;gap:26px;
  grid-template-columns:minmax(0,460px) minmax(0,1fr);
  width:min(980px,92vw);margin:10px auto 0;
}
.proof-photo{
  margin:0;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;
  background:var(--panel3);box-shadow:var(--shadow);
}
.proof-photo img{display:block;width:100%;height:100%;object-fit:cover}
.proof-kicker{
  margin:0 0 8px;font-size:.74rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rose);
}
.proof-copy h2{
  margin:0 0 10px;font-weight:700;line-height:1.15;color:var(--ink);
  font-size:clamp(1.35rem,3.2vw,1.9rem);text-wrap:balance;
}
.proof-copy p{margin:0;color:var(--ink-soft);font-weight:700;font-size:.98rem;line-height:1.55}
body.in-app .proof{display:none}
@media (max-width:820px){
  .proof{grid-template-columns:1fr;gap:18px;text-align:center}
}
.site-foot{position:relative;z-index:1;text-align:center;padding:28px 16px 36px;font-weight:800;font-size:.82rem}
.site-foot a{color:var(--ink-faint)}
.site-foot a:hover{color:var(--rose)}
.site-foot .photo-credit{margin:10px 0 0;font-size:.68rem;font-weight:600;color:var(--ink);opacity:.9}
body.in-app .site-foot{display:none}

/* ── stepper ────────────────────────────────────────────── */
.stepper{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;padding:6px 12px 20px;flex-wrap:wrap}
.stepper button{display:flex;align-items:center;gap:9px;color:var(--ink-soft);font-weight:800;font-size:.88rem;padding:6px 14px 6px 6px;border-radius:999px;transition:background .3s,color .3s}
.stepper .dot{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;
  background:var(--panel);box-shadow:var(--shadow-s);transition:transform .35s var(--spring),background .3s;
}
.stepper button.on .dot{transform:scale(1.1)}
.stepper button.done .dot::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--sage);transform:translate(14px,-14px);border:2px solid var(--cream)}
.stepper .dot{position:relative}

/* ── stage / panels ─────────────────────────────────────── */
.stage{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 16px 140px}
.panel{
  display:none;background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow-l);
  padding:24px 24px 26px;
}
.panel.show{display:block;animation:segue .55s var(--ease) both}
.panel.show.back{animation:segueBack .55s var(--ease) both}
@keyframes segue{from{opacity:0;transform:translateX(46px) rotate(.6deg) scale(.985)}to{opacity:1;transform:none}}
@keyframes segueBack{from{opacity:0;transform:translateX(-46px) rotate(-.6deg) scale(.985)}to{opacity:1;transform:none}}
/* The outgoing step used to be cut to display:none on the same frame the
   next one began, which read as a blink. It now leaves on its own arc,
   stacked under the arriving panel so the page never grows mid-move. */
.panel.leaving{display:block;position:absolute;left:16px;right:16px;z-index:0;pointer-events:none;
  animation:segueOut var(--dur-s) var(--ease) both}
.panel.leaving.back{animation:segueOutBack var(--dur-s) var(--ease) both}
@keyframes segueOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-24px) scale(.99)}}
@keyframes segueOutBack{from{opacity:1;transform:none}to{opacity:0;transform:translateX(24px) scale(.99)}}
.phead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.phead h2{font-family:"Fraunces",Georgia,serif;font-size:1.45rem;margin:0}
.phead .sub{color:var(--ink-soft);font-weight:700;font-size:.9rem;margin:3px 0 0}
.phead .grow{flex:1}
.hearts{display:inline-block}
.hearts.grow{animation:heartbump .5s var(--spring)}
@keyframes heartbump{0%{transform:scale(1)}38%{transform:scale(1.34) rotate(-6deg)}100%{transform:scale(1)}}
.sample-cta{display:inline-flex;align-items:center;gap:7px;align-self:center;padding:9px 13px;border:1px solid #E7DDEA;border-radius:999px;background:linear-gradient(135deg,#FFF8E8,#F4EDFF);color:#765D79;font-size:.76rem;font-weight:900;box-shadow:var(--shadow-s);transition:transform .22s var(--spring),box-shadow .22s}
.sample-cta:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 10px 22px rgba(126,91,149,.16)}

/* tooltips */
.tip{
  display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--lilac-soft);color:var(--lilac);font-size:.72rem;font-weight:900;
  position:relative;cursor:help;vertical-align:2px;margin-left:5px;flex:none;
}
.tip::after{
  content:attr(data-t);position:absolute;bottom:135%;left:50%;transform:translateX(-50%) scale(.9);
  background:var(--ink);color:#FFF9F3;font-size:.76rem;font-weight:700;padding:9px 13px;border-radius:11px;
  width:max-content;max-width:240px;text-align:center;line-height:1.35;
  opacity:0;pointer-events:none;transition:.25s var(--spring);z-index:9;
}
.tip:hover::after,.tip:focus::after{opacity:1;transform:translateX(-50%) scale(1)}

/* ── pill toolbar ───────────────────────────────────────── */
.toolrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tool{
  display:flex;align-items:center;gap:7px;font-weight:800;font-size:.85rem;padding:9px 16px;
  border-radius:999px;background:var(--panel2);transition:transform .25s var(--spring),box-shadow .2s;
}
.tool:hover{transform:translateY(-2px)}
.tool.on{box-shadow:0 0 0 2.5px currentColor inset;transform:scale(1.05)}
.tool.gold{color:var(--gold-ink);background:var(--gold-soft)}
.tool.grey{color:#6C6F8A;background:#ECECF4}
.tool.red{color:var(--danger);background:var(--danger-soft)}
.tool.plain{color:var(--ink-soft);background:var(--panel2)}
.thread-line{width:20px;height:0;border-top:3px solid currentColor;border-radius:3px;flex:none}
.tool.grey .thread-line{border-top-style:dotted}
.tool.red .thread-line{border-top-style:dashed}
.addrow{display:flex;gap:8px;margin-left:auto}
.addrow input{
  border:2px solid var(--panel2);background:var(--cream);border-radius:999px;padding:9px 18px;
  font-weight:700;width:150px;transition:border .2s,width .3s;
}
.addrow input:focus{outline:none;border-color:var(--rose);width:180px}
.round{
  width:40px;height:40px;border-radius:50%;background:var(--rose);color:#fff;font-size:1.25rem;
  font-weight:800;display:grid;place-items:center;flex:none;transition:transform .3s var(--spring);
}
.round:hover{transform:rotate(90deg) scale(1.1)}

/* ── guests: people first, rules as a playful graph ─────── */
:root{--guest-card-min:280px}
.people-actions{display:flex;align-items:center;gap:9px;flex:1;min-width:0}.people-actions[hidden],.rule-dock[hidden]{display:none}
.guest-filter{display:flex;align-items:center;gap:7px;min-width:min(100%,260px);padding:2px 5px 2px 12px;border:2px solid var(--panel2);border-radius:999px;background:var(--cream);color:var(--ink-soft);transition:border-color .2s,box-shadow .2s}.guest-filter:focus-within{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-soft)}.guest-filter-icon{font-size:1.1rem;line-height:1}.guest-filter input{width:170px;min-width:0;border:0;outline:0;background:transparent;padding:7px 0;font-weight:750;color:var(--ink)}.guest-filter button{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:1.25rem;line-height:1;color:var(--ink-soft)}.guest-filter button:hover{background:var(--rose-soft);color:var(--rose)}.guest-filter-count{font-size:.74rem;font-weight:900;color:var(--ink-faint);white-space:nowrap}
.rule-dock{width:100%;display:flex;align-items:center;gap:12px;padding:10px 11px 10px 15px;border:1px solid #E8DDE4;border-radius:20px;background:linear-gradient(105deg,#FFF8FB,#F8FBFF);box-shadow:var(--shadow-s);animation:dockin .45s var(--ease) both}
@keyframes dockin{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.rule-dock-copy{display:flex;flex-direction:column;gap:1px;min-width:160px;max-width:220px}
.rule-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.075em;font-weight:900;color:var(--ink-soft)}
.rule-hint{font-size:.76rem;line-height:1.25;font-weight:800;color:var(--ink)}
.rule-tools{display:flex;gap:7px;align-items:center;flex:1;flex-wrap:wrap}

.rule-face{font-size:1.02rem;line-height:1}
.rule-done{flex:none;border-radius:999px;padding:10px 15px;font-size:.82rem;font-weight:900;color:#fff;background:var(--ink);box-shadow:0 7px 16px rgba(58,42,56,.16);transition:transform .25s var(--spring)}
.rule-done:hover{transform:translateY(-2px) scale(1.04)}

.tray{position:relative;min-height:270px;padding:8px 0 4px;isolation:isolate}
.tray > svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:12;overflow:visible}
.guest-cluster{position:relative;z-index:3}
.guest-cluster[hidden]{display:none}
.cluster-head{display:flex;align-items:center;gap:7px;margin:4px 0 10px;color:var(--ink-soft)}
.cluster-head h3{margin:0;font-size:.78rem;letter-spacing:.075em;text-transform:uppercase;font-weight:900}
.cluster-dot{width:10px;height:10px;border-radius:50%;background:var(--rule-blue);box-shadow:0 0 0 6px var(--rule-blue-soft)}
.cluster-dot.quiet{background:var(--ink-faint);box-shadow:0 0 0 6px var(--panel2)}
.cluster-count{font-size:.75rem;font-weight:900;color:var(--ink-faint)}
.linked-groups{display:grid;gap:22px}
.linked-group{position:relative;padding:14px 16px 16px;border:1px solid #F0E8EC;border-radius:22px;background:linear-gradient(140deg,rgba(255,249,243,.88),rgba(255,255,255,.92));box-shadow:0 12px 28px rgba(58,42,56,.055);animation:groupin .52s var(--ease) both;animation-delay:var(--group-delay)}
@keyframes groupin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.group-caption{margin:0 0 12px;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint)}
.group-cards,.chips{position:relative;z-index:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--guest-card-min)),1fr));gap:20px 24px;align-items:stretch;padding:4px 0 12px}
.group-cards{justify-items:stretch;min-height:0}.group-pair .group-cards,.group-small .group-cards,.group-hub .group-cards{grid-template-areas:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--guest-card-min)),1fr));gap:20px 24px;min-height:0}.group-small .group-cards .chip:first-child,.group-hub .group-cards .chip:nth-child(n){grid-area:auto;grid-column:auto;justify-self:stretch;width:100%}
.chip{position:relative;z-index:3;width:100%;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;background:#FFFDFC;border:3px solid var(--guest-border);border-radius:22px;padding:10px 12px;box-shadow:0 9px 22px rgba(58,42,56,.10);font-weight:800;font-size:.92rem;transition:transform .28s var(--spring),box-shadow .28s,border-color .25s;animation:popin .5s var(--spring) both}
@keyframes popin{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
/* A card that was already on screen is moved by FLIP, not re-introduced.
   Leaving its entrance running would fight that transform. */
.chip.no-entrance,.linked-group.no-entrance{animation:none}
.hero-preview .chip{width:auto;min-width:auto;border-width:0;border-radius:999px;padding:7px 8px 7px 7px;background:var(--cream)}
.chip:hover{transform:translateY(-3px) rotate(-.45deg);box-shadow:0 16px 30px rgba(58,42,56,.16)}
.chip .face{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:1.02rem;font-weight:900;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.hero-preview .chip .face{width:34px;height:34px;border-radius:50%;font-size:.85rem}
.guest-copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:1px}
.chip .nm{display:block;max-width:100%;overflow-wrap:anywhere;word-break:normal;white-space:normal;font-size:1rem;line-height:1.2}
.guest-meta{display:flex;align-items:center;flex-wrap:wrap;gap:3px 5px;min-width:0;max-width:100%;color:var(--ink-soft);font-size:.74rem;font-weight:900;white-space:normal}.guest-meta .rsvp{font-size:.72rem}.guest-meta .meta-sep{color:#C7BBC3}.guest-meta .hearts{letter-spacing:-2px;color:var(--rose);font-size:.7rem;overflow-wrap:anywhere}
.picked-context{position:relative;z-index:14;display:flex;align-items:center;gap:8px;margin:0 0 13px;padding:9px 12px;border:1px solid #C9DAFF;border-radius:15px;background:var(--rule-blue-soft);color:#1F4CA8;font-size:.8rem;font-weight:900}.picked-context::before{content:'✓';display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--rule-blue);color:#fff;flex:none}
.connector-nub{position:absolute;right:-8px;top:50%;width:12px;height:12px;border:3px solid var(--guest-border);border-radius:50%;background:#FFFDFC;transform:translateY(-50%);opacity:0;transition:opacity .2s,transform .25s var(--spring)}
.guest-playground[data-mode="rules"] .chip{cursor:crosshair;touch-action:none}.guest-playground[data-mode="rules"] .chip:hover{border-color:#948690}.guest-playground[data-mode="rules"] .chip:hover .connector-nub,.guest-playground[data-mode="rules"] .chip.picked .connector-nub{opacity:1;transform:translateY(-50%) scale(1.15)}
.chip.picked{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-soft),0 13px 28px rgba(228,87,123,.23);transform:translateY(-4px) scale(1.025)}
.chip.drag-origin{border-color:var(--rule-blue);box-shadow:0 0 0 5px var(--rule-blue-soft),0 14px 30px rgba(37,99,235,.22)}
.chip.declined{opacity:.58}.chip.declined .nm{text-decoration:line-through;text-decoration-color:var(--ink-faint)}
.thread-under{opacity:.96}.thread-line{filter:drop-shadow(0 2px 2px rgba(58,42,56,.12));opacity:.96}.thread-preview{opacity:.9;stroke-dasharray:7 8;animation:threadmarch .6s linear infinite}.thread-energy{stroke-dasharray:10 82;animation:threadcharge 1s ease-out both}@keyframes threadmarch{to{stroke-dashoffset:-30}}@keyframes threadcharge{from{stroke-dashoffset:100;opacity:0}25%{opacity:1}to{stroke-dashoffset:0;opacity:0}}
.chip.link-formed.formed-gold{border-color:var(--rule-blue);box-shadow:0 0 0 5px var(--rule-blue-soft),0 0 26px rgba(37,99,235,.55)}.chip.link-formed.formed-grey{border-color:var(--rule-green);box-shadow:0 0 0 5px var(--rule-green-soft),0 0 26px rgba(7,131,93,.48)}.chip.link-formed.formed-red{border-color:var(--rule-red);box-shadow:0 0 0 5px var(--rule-red-soft),0 0 28px rgba(227,63,85,.54)}
.chip.seesaw-left{animation:seesawLeft .78s ease-in-out 2}.chip.seesaw-right{animation:seesawRight .78s ease-in-out 2}@keyframes seesawLeft{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.3deg) translateY(-4px)}75%{transform:rotate(2.3deg) translateY(1px)}}@keyframes seesawRight{0%,100%{transform:rotate(0)}25%{transform:rotate(2.3deg) translateY(1px)}75%{transform:rotate(-2.3deg) translateY(-4px)}}
.link-reaction{position:absolute;z-index:20;pointer-events:none;transform:translate(-50%,-50%);width:1px;height:1px}.reaction-face,.reaction-particle{position:absolute;display:grid;place-items:center;opacity:0}.reaction-face{font-size:2rem;left:-16px;top:-18px;filter:drop-shadow(0 5px 6px rgba(58,42,56,.2))}.reaction-particle{font-size:1.1rem;left:-7px;top:-8px}.link-reaction.play .reaction-face{animation:faceburst .9s var(--spring) both}.link-reaction.play .p0{animation:particle0 .95s ease-out both}.link-reaction.play .p1{animation:particle1 .95s ease-out both}.link-reaction.play .p2{animation:particle2 .95s ease-out both}.link-reaction.play .p3{animation:particle3 .95s ease-out both}@keyframes faceburst{0%{opacity:0;transform:scale(.2) rotate(-18deg)}35%{opacity:1;transform:scale(1.35) rotate(8deg)}100%{opacity:0;transform:scale(.9) translateY(-24px)}}@keyframes particle0{25%{opacity:1}100%{opacity:0;transform:translate(-38px,-38px) rotate(35deg)}}@keyframes particle1{25%{opacity:1}100%{opacity:0;transform:translate(40px,-31px) rotate(-35deg)}}@keyframes particle2{25%{opacity:1}100%{opacity:0;transform:translate(44px,28px) rotate(45deg)}}@keyframes particle3{25%{opacity:1}100%{opacity:0;transform:translate(-38px,29px) rotate(-45deg)}}
.empty{color:var(--ink-faint);font-weight:700;padding:36px 0;text-align:center}

/* ── room canvas ────────────────────────────────────────── */
.room{
  --u:1;                       /* one dial sizes everything inside */
  position:relative;height:440px;border-radius:18px;overflow:hidden;touch-action:none;
  transition:height .4s var(--ease);
  background:radial-gradient(circle at 50% 20%,#FFF3E4 0%,#FDE9EC 55%,#F4E6F7 100%);
}
@media (max-width:640px){.room{--mob:.8}}
.room.compact{height:400px}
.room .rings{position:absolute;inset:0;width:100%;height:100%}
.tbl{position:absolute;transform:translate(-50%,-50%);text-align:center;transition:transform .35s var(--spring);z-index:2}
.tbl:hover{transform:translate(-50%,-50%) scale(1.05)}
.tbl.dragging{transition:none;z-index:5;cursor:grabbing}
.tbl{--s:calc(var(--u) * var(--mob,1))}
.tbl .disc{
  width:calc(88px * var(--s));height:calc(88px * var(--s));border-radius:50%;margin:0 auto;
  display:grid;place-items:center;gap:1px;
  background:#fff;box-shadow:0 10px 24px rgba(58,42,56,.14);font-weight:900;
  font-size:calc(.76rem * max(.82, var(--s)));
  cursor:grab;padding:calc(6px * var(--s));line-height:1.15;
}
.tbl.table-node .disc{width:calc(var(--table-w, 88px) * var(--s));height:calc(var(--table-d, 88px) * var(--s));min-width:calc(64px * var(--s));min-height:calc(64px * var(--s));transform:rotate(var(--table-rotation,0deg))}.tbl.table-node.rect-table .disc{border-radius:18px}.tbl.table-node .disc>span{transform:rotate(calc(-1 * var(--table-rotation,0deg)))}
.tbl .disc .cap{font-size:calc(.66rem * max(.82, var(--s)));font-weight:800;color:var(--ink-faint)}
.tbl.head .disc{
  width:calc(118px * var(--s));height:calc(72px * var(--s));border-radius:40px;color:#fff;
  background:linear-gradient(120deg,var(--rose),var(--coral));animation:glowpulse 3s ease-in-out infinite;
}
@keyframes glowpulse{0%,100%{box-shadow:0 10px 24px rgba(228,87,123,.35)}50%{box-shadow:0 10px 40px rgba(228,87,123,.6)}}
.tbl .stars{position:relative;z-index:4;font-size:calc(.82rem * max(.75, var(--s)));margin-top:5px;user-select:none;display:inline-block;padding:2px 6px;border-radius:999px;transition:transform .3s var(--spring);cursor:pointer}
.tbl .stars:hover{transform:scale(1.18);background:#fff8}
.tbl .stars .off{opacity:.24}
.tbl .tx{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:#fff;
  color:var(--ink-faint);font-size:.8rem;display:grid;place-items:center;box-shadow:var(--shadow-s);opacity:0;transition:.2s;
}
.tbl:hover .tx{opacity:1}
.tbl .tx:hover{background:var(--danger-soft);color:var(--danger)}
.seats{position:absolute;inset:0;pointer-events:none;z-index:3}
.seat{
  position:absolute;transform:translate(-50%,-50%);background:#fff;border-radius:999px;
  --ss:calc(var(--u,1) * var(--mob,1));
  font-size:calc(.68rem * max(.72, var(--ss)));font-weight:800;
  padding:calc(4px * max(.75, var(--ss))) calc(9px * max(.75, var(--ss)));box-shadow:0 5px 14px rgba(58,42,56,.18);
  white-space:nowrap;pointer-events:auto;cursor:pointer;transition:transform .2s var(--spring);
}
.seat:hover{transform:translate(-50%,-50%) scale(1.12)}
/* A name chip shrinks to fit a busy map, which can leave it ~16px tall — far
   under a comfortable thumb. On touch devices only, grow the *hit* area: the
   pill looks exactly the same, it is simply easier to land on with a finger.
   Desktop keeps the tight box so neighbouring chips never steal a click. */
@media (pointer:coarse){
  .seat::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:max(100%,40px);border-radius:inherit}
}
.seat.land{animation:seatland .6s var(--spring) both}
/* Chair mode stages its names with the same delays as table mode; without
   this rule that whole staircase of animation simply never played. */
.tbl.seat1 .disc .who.land{animation:seatland .6s var(--spring) both}
@keyframes seatland{
  0%{transform:translate(-50%,-160%) scale(.3) rotate(-10deg);opacity:0}
  60%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
}
.seat.locked{filter:blur(5px);user-select:none;pointer-events:none}
.lockbadge{
  position:absolute;transform:translate(-50%,-50%);z-index:4;cursor:pointer;
  background:var(--ink);color:#fff;font-weight:800;font-size:.72rem;
  padding:7px 13px;border-radius:999px;box-shadow:var(--shadow);
}
@keyframes lockin{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
.lockbadge{animation:lockin .42s var(--spring) both}
.lockbadge:hover{animation:none;transform:translate(-50%,-50%) scale(1.12)}
.tscore-in{font-weight:900 !important;animation:popin .5s var(--spring) both}
.tscore-in.good{color:var(--sage) !important}
.tscore-in.mid{color:var(--gold-ink) !important}
.tscore-in.low{color:var(--danger) !important}
.tscore{
  position:absolute;transform:translate(-50%,-50%);z-index:4;font-size:.66rem;font-weight:900;
  padding:3px 9px;border-radius:999px;background:#fff;box-shadow:var(--shadow-s);animation:popin .5s var(--spring) both;
}
.tscore.good{color:var(--sage)} .tscore.mid{color:var(--gold-ink)} .tscore.low{color:var(--danger)}

/* ── solve header ───────────────────────────────────────── */
.tada-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.solvebtn{
  font-size:1.06rem;font-weight:900;color:#fff;padding:14px 32px;border-radius:999px;
  background:var(--ink);box-shadow:var(--shadow);
  transition:transform .2s var(--ease);position:relative;
}
.solvebtn:hover{transform:translateY(-1px)}
.solvebtn.solving{animation:shake .4s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(1.4deg)}75%{transform:rotate(-1.4deg)}}
.meter{flex:1;min-width:210px}
.meter .lab{font-size:.74rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:baseline}
.meter .lab b{color:var(--rose);font-size:1.05rem;font-variant-numeric:tabular-nums}
.meter .track{height:13px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:5px}
.meter .fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--coral),var(--rose));transition:width 1.5s var(--ease)}

/* ── magic bar ──────────────────────────────────────────── */
.magic{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  width:min(660px,calc(100% - 24px));background:var(--ink);border-radius:999px;
  padding:7px 7px 7px 18px;display:flex;align-items:center;gap:9px;
  box-shadow:0 18px 44px rgba(58,42,56,.4);animation:magicin 1s .7s var(--spring) both;
}
@keyframes magicin{from{opacity:0;transform:translate(-50%,80px)}to{opacity:1;transform:translate(-50%,0)}}
.magic .spark{font-size:1.1rem;flex:none}
.magic input{flex:1;background:none;border:none;color:#FFF6EE;font-weight:700;font-size:.94rem;min-width:0}
.magic input::placeholder{color:#B8A3B3}
.magic input:focus{outline:none}
/* Owning the Pass clears every PRO badge at once. Hiding them element by
   element used to miss the room toolbar, so buyers still saw locks. */
body.is-owner .pro,body.is-owner #intake-file-pro{display:none !important}

/* motion.js sparkles — a small win, dropped over any element. */
.mo-sparkles{position:absolute;pointer-events:none;z-index:80}
.mo-sparkles i{position:absolute;width:7px;height:7px;border-radius:50%;opacity:0;
  animation:moSpark .72s var(--ease) var(--sd,0ms) forwards}
@keyframes moSpark{
  0%{opacity:0;transform:translate(0,0) scale(.3)}
  30%{opacity:1;transform:translate(calc(var(--sx) * .45),calc(var(--sy) * .45)) scale(1)}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.24)}
}

.pro{
  font-size:.63rem;font-weight:900;letter-spacing:.1em;color:#4A2F14;flex:none;
  background:var(--gold-soft);padding:5px 10px;border-radius:999px;
}
.magic .send,.magic .cam{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:transform .25s var(--spring);
}
.magic .cam{background:#4C3B49;color:#FFE9D6;font-size:1rem}
.magic .send{background:linear-gradient(120deg,var(--rose),var(--lilac));color:#fff;font-size:1.05rem}
.magic .send:hover,.magic .cam:hover{transform:scale(1.12) rotate(-8deg)}
.magic.busy .spark{opacity:.55}
.parsed{
  position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:59;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:min(660px,calc(100% - 24px));
}
.pchip{
  background:#fff;border-radius:999px;padding:8px 15px;font-weight:800;font-size:.84rem;
  box-shadow:0 10px 26px rgba(58,42,56,.22);animation:popin .5s var(--spring) both;
}

/* ── modal ──────────────────────────────────────────────── */
.veil{position:fixed;inset:0;z-index:80;background:rgba(58,42,56,.45);backdrop-filter:blur(6px);display:none;place-items:center;padding:18px;overflow-y:auto}
.veil.show{display:grid;animation:fadein .3s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--panel);border-radius:var(--r-l);max-width:430px;width:100%;padding:32px 28px;text-align:center;
  animation:springin .55s var(--spring) both;box-shadow:var(--shadow-l);margin:auto;
}
.modal.wide{max-width:560px;text-align:left}
@keyframes springin{from{opacity:0;transform:scale(.7) translateY(40px)}to{opacity:1;transform:none}}
.modal .big{font-size:2.5rem}
.modal .big[hidden]{display:none}
.modal h3{font-family:"Fraunces",Georgia,serif;font-size:1.4rem;margin:10px 0 8px}
.modal p{color:var(--ink-soft);font-weight:700;font-size:.92rem;margin:0 0 16px}
.modal .price{font-family:"Fraunces",Georgia,serif;font-size:2.2rem;font-weight:700;color:var(--rose)}
.modal .once{font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin-bottom:16px}
.perks{list-style:none;margin:0 0 20px;padding:0;text-align:left;font-weight:700;font-size:.89rem;display:flex;flex-direction:column;gap:7px}
.perks li{padding:6px 0;border-bottom:1px solid var(--panel2)}
.perks li:last-child{border-bottom:none}
.buy{
  width:100%;font-size:1.03rem;font-weight:900;color:#fff;padding:15px;border-radius:999px;
  background:var(--rose);box-shadow:0 8px 20px rgba(228,87,123,.28);
  transition:transform .2s var(--ease);
}
.buy:hover{transform:scale(1.04)}
.fine a{color:var(--rose)}
.later{margin-top:11px;font-weight:800;font-size:.84rem;color:var(--ink-soft)}
.later:hover{color:var(--rose)}
.ta{
  width:100%;min-height:150px;border:2px solid var(--panel2);border-radius:var(--r-s);padding:13px;
  background:var(--cream);font-weight:600;resize:vertical;line-height:1.5;
}
.ta:focus{outline:none;border-color:var(--rose)}
.modal .row{display:flex;gap:9px;margin-top:14px}
.modal .row .buy{flex:1}
.ghost{
  font-weight:800;padding:15px 22px;border-radius:999px;background:var(--panel2);color:var(--ink-soft);
  transition:transform .25s var(--spring);
}
.ghost:hover{transform:scale(1.04);color:var(--ink)}

/* ── floor-plan review ─────────────────────────────────── */
.floorplan-modal{max-width:760px;max-height:min(90dvh,900px);overflow:auto}.floorplan-modal>h3{margin-top:2px}.floorplan-preview-wrap{display:grid;place-items:center;min-height:150px;max-height:270px;margin:12px 0;border:1px solid #EEE1E7;border-radius:18px;overflow:hidden;background:var(--panel2)}.floorplan-preview-wrap img{display:block;max-width:100%;max-height:268px;object-fit:contain;transition:transform .35s var(--ease)}.floorplan-review-actions{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}.floorplan-review-actions .tool{font-size:.75rem;padding:7px 11px}.floorplan-warnings{display:grid;gap:6px;margin:0 0 10px}.floorplan-warning{padding:8px 10px;border-radius:12px;background:var(--gold-soft);color:var(--gold-ink);font-size:.77rem;font-weight:800}.floorplan-stage-row{margin:0 0 10px;padding:8px 10px;border:1px solid #E9DFE5;border-radius:12px;color:var(--ink-soft);font-size:.78rem;font-weight:800}.floorplan-table-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px;max-height:260px;overflow:auto;padding:2px}.floorplan-table{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 9px;border:1px solid #E9DFE5;border-radius:12px;background:#FFFDFC;font-size:.76rem;font-weight:900;text-align:left}.floorplan-table input{accent-color:var(--rose);flex:none}.floorplan-table span{min-width:0;overflow-wrap:anywhere}.floorplan-table small{display:block;margin-top:2px;color:var(--ink-faint);font-size:.64rem;font-weight:800}.floorplan-table.marked{opacity:.62;background:#FFF7F8;text-decoration:line-through}.floorplan-confirm-actions{position:sticky;bottom:0;padding-top:12px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 22%)}

/* Each detected table remains editable before a scan can replace the room. */
.floorplan-table{align-items:flex-start}.floorplan-table .scan-include{accent-color:var(--rose);flex:none;margin-top:7px}.floorplan-table span{flex:1}.scan-table-name{width:100%;border:0;border-bottom:1px solid transparent;outline:0;background:transparent;padding:3px 0;color:var(--ink);font:inherit;font-weight:900}.scan-table-name:focus{border-bottom-color:var(--rose)}.floorplan-table small{display:flex;align-items:center;gap:4px}.scan-table-cap{width:42px;border:1px solid #E9DFE5;border-radius:7px;background:#fff;padding:3px 4px;color:var(--ink);font:inherit;font-size:.7rem;font-weight:900}.floorplan-table.marked{text-decoration:none}.floorplan-table.marked .scan-table-name{text-decoration:line-through}

/* ── first-run guest intake ─────────────────────────────── */
.intake-modal{max-width:620px;padding:26px 38px 24px;text-align:center;overflow:hidden}
.intake-orbit{position:relative;width:124px;height:62px;margin:0 auto 2px}
.intake-avatar,.intake-list{position:absolute;display:grid;place-items:center;border-radius:50%;font-weight:900;box-shadow:0 7px 18px rgba(58,42,56,.12)}
.intake-avatar{width:38px;height:38px;color:#fff;top:13px;font-size:.83rem;animation:intakebob 2.8s ease-in-out infinite}
.intake-avatar.a1{left:1px;background:var(--rose);animation-delay:-.2s}.intake-avatar.a2{left:29px;background:var(--lilac);animation-delay:-.8s}.intake-avatar.a3{left:57px;background:var(--gold);animation-delay:-1.35s}
.intake-list{right:0;top:3px;width:58px;height:58px;background:#fff;color:var(--rose);font-size:1.7rem;transform:rotate(7deg);border:2px solid var(--rose-soft);animation:intakelist 3s var(--spring) infinite}
.intake-orbit i{position:absolute;width:16px;height:3px;border-radius:9px;background:var(--gold);left:77px;top:29px;transform:rotate(-21deg)}.intake-orbit i:nth-of-type(2){left:78px;top:36px;width:12px;background:var(--rose);transform:rotate(18deg)}.intake-orbit i:nth-of-type(3){left:74px;top:42px;width:10px;background:var(--lilac);transform:rotate(42deg)}
@keyframes intakebob{50%{transform:translateY(-5px) rotate(4deg)}}@keyframes intakelist{50%{transform:rotate(-5deg) translateY(-2px)}}
.intake-eyebrow{margin:0 0 2px!important;color:var(--rose)!important;text-transform:uppercase;letter-spacing:.13em;font-size:.7rem!important;font-weight:900!important}.intake-modal h3{font-size:clamp(1.55rem,4vw,2rem);margin:0 0 5px}.intake-lead{max-width:460px;margin:0 auto 15px!important;text-wrap:balance}
.intake-textarea{min-height:138px;text-align:left;border-color:#F1DFE5;background:linear-gradient(135deg,#FFF9F3,#FFFDFB);resize:vertical}.intake-textarea:focus{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-soft)}
.intake-upload{display:flex;align-items:center;gap:10px;width:100%;margin-top:9px;padding:10px 12px;border:1.5px dashed #DFC9D2;border-radius:16px;background:#FFFBF8;color:var(--ink-soft);text-align:left;transition:border-color .2s,background .2s,transform .2s var(--spring)}.intake-upload:hover{border-color:var(--rose);background:#FFF5F5;transform:translateY(-1px)}.intake-upload:focus-visible{outline:3px solid var(--rose-soft);outline-offset:2px}.intake-upload:disabled{cursor:wait;opacity:.68;transform:none}.intake-upload-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;background:var(--rose-soft);color:var(--rose);font-size:1.15rem;font-weight:900}.intake-upload-copy{display:flex;min-width:0;flex:1;flex-direction:column}.intake-upload-copy strong{color:var(--ink);font-size:.84rem}.intake-upload-copy small{font-size:.7rem;font-weight:750}.intake-upload .pro{flex:none}.intake-file-status{min-height:17px;margin:5px 0 0!important;color:var(--ink-soft)!important;font-size:.68rem!important}.intake-file-status.error{color:#A53B57!important}.intake-preview{min-height:34px;display:flex;justify-content:center;align-items:center;margin:7px 0 -1px}.intake-preview-empty{font-size:1.05rem;opacity:.55}.intake-preview .face{display:grid;place-items:center;width:30px;height:30px;margin-left:-7px;border:2px solid #fff;border-radius:50%;color:#fff;font-size:.68rem;font-weight:900;box-shadow:0 3px 7px rgba(58,42,56,.13)}.intake-preview .face:first-child{margin-left:0}.intake-preview-more{margin-left:7px;color:var(--ink-soft);font-size:.77rem;font-weight:900}
.intake-count{min-height:21px;margin:0 0 10px!important;color:var(--ink-soft)!important;font-size:.8rem!important}.intake-count:not(.ready){opacity:.65}.intake-start:disabled{opacity:.48;cursor:not-allowed;box-shadow:none;transform:none}.intake-start.ready{animation:intakeReady .62s var(--spring) both}@keyframes intakeReady{40%{transform:scale(1.045);filter:brightness(1.06)}}
.intake-secondary{display:flex;justify-content:center;align-items:center;gap:6px;width:max-content;max-width:100%;margin:10px auto 0;padding:10px 16px;border:1px solid #EADFE4;border-radius:999px;background:var(--panel2);color:var(--ink-soft);font-weight:900;font-size:.84rem;transition:transform .22s var(--spring),background .22s}.intake-secondary:hover{transform:translateY(-2px);background:#FCECF1;color:var(--rose)}.intake-explore{display:block;margin:10px auto 0}
.restart-modal{max-width:470px}.restart-actions{display:grid;gap:9px;margin-top:17px}.restart-actions .ghost{width:100%}
#tray.personalizing{pointer-events:none}#tray.personalizing .chip{animation:sampleOut .34s var(--ease) both}@keyframes sampleOut{to{opacity:0;transform:translateY(-12px) scale(.9)}}#tray.personalized .chip{animation:personalIn .5s var(--spring) both}@keyframes personalIn{from{opacity:0;transform:translateY(13px) scale(.9)}to{opacity:1;transform:none}}

/* ── toast / confetti ───────────────────────────────────── */
.toast{
  position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:90;opacity:0;
  background:var(--ink);color:#FFF6EE;font-weight:800;font-size:.89rem;padding:12px 22px;border-radius:999px;
  box-shadow:0 14px 34px rgba(58,42,56,.35);transition:.4s var(--spring);pointer-events:none;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#confetti{position:fixed;inset:0;z-index:70;pointer-events:none}

/* ── nav buttons ────────────────────────────────────────── */
.pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.next{
  font-weight:900;color:#fff;padding:13px 28px;border-radius:999px;background:var(--ink);
  transition:transform .25s var(--spring);
}
.next:hover{transform:translateX(4px) scale(1.04)}
.prev{font-weight:800;color:var(--ink-soft);padding:13px 8px}
.prev:hover{color:var(--rose)}

/* ── seat explain popover ───────────────────────────────── */
.explain{
  position:fixed;z-index:75;background:var(--ink);color:#FFF6EE;font-weight:700;font-size:.82rem;
  padding:11px 15px;border-radius:14px;max-width:250px;box-shadow:0 14px 34px rgba(58,42,56,.4);
  animation:popin .35s var(--spring) both;pointer-events:none;line-height:1.4;
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:520px){
  .bar{padding:10px 12px;gap:7px}
  .logo{font-size:.92rem;white-space:nowrap}
  .logo .dots i{width:11px;height:11px}
  .iconbtn{width:34px;height:34px;font-size:.88rem}
  .bar-cta{padding:9px 13px;font-size:.78rem}
  .lang-switch{padding:8px 7px;font-size:.69rem}
  .chips{gap:8px}
  .chip{font-size:.84rem;padding:5px 7px 5px 5px;gap:7px}
  .chip .face{width:28px;height:28px;font-size:.85rem}
  .chip .hearts{font-size:.7rem;padding:3px 4px}
  .chip .x{opacity:1;width:20px;height:20px}
  .toolrow{gap:7px}
  .tool{padding:8px 13px;font-size:.8rem}
  .magic{padding:6px 6px 6px 14px}
  .magic input{font-size:.86rem}
  .magic .send,.magic .cam{width:36px;height:36px}
  .pro{font-size:.58rem;padding:4px 7px}
}
@media (max-width:640px){
  .stage{padding:0 10px 130px}
  .panel{padding:18px 14px 20px;border-radius:var(--r-s)}
  .room{height:360px}
  .addrow{margin-left:0;width:100%}
  .addrow input{flex:1;width:auto}
  .addrow input:focus{width:auto}
  .stepper button span:not(.dot){display:none}
  .stepper button{padding:6px}
  .hero{padding:40px 16px 26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ── share modal ────────────────────────────────────────── */
.qrwrap{display:flex;justify-content:center;padding:14px;background:var(--panel2);border-radius:var(--r-s);margin-bottom:14px}
.qrwrap canvas{max-width:220px;width:100%;height:auto;border-radius:8px;background:#fff}
.linkrow{display:flex;gap:8px;margin-top:10px}
.linkfield{
  flex:1;min-width:0;border:2px solid var(--panel2);background:var(--cream);border-radius:999px;
  padding:10px 16px;font-weight:700;font-size:.82rem;color:var(--ink-soft);
}
.linkfield:focus{outline:none;border-color:var(--rose)}
.fine{font-size:.78rem;color:var(--ink-faint);font-weight:700;margin:6px 2px 0}

/* ── print picker ───────────────────────────────────────── */
.perks.pick li{padding:0;background:none;border:none}
.perks.pick button{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--panel2);border-radius:12px;padding:12px 15px;font-weight:800;
  transition:transform .25s var(--spring),background .2s;
}
.perks.pick button:hover{transform:translateX(4px);background:var(--rose-soft)}
.perks.pick span{font-weight:700;font-size:.79rem;color:var(--ink-soft)}

/* ── paper ──────────────────────────────────────────────── */
.print-sheet{display:none}
@media print{
  @page{margin:14mm}
  body{background:#fff!important}
  body > *:not(.print-sheet){display:none!important}
  .print-sheet{display:block!important;color:#2B2129;font-family:"Nunito",Arial,sans-serif}
  .print-sheet h1{font-size:30pt;margin:0 0 2pt;text-align:center;font-weight:700}
  .print-sheet .psub{
    text-align:center;margin:0 0 18pt;font-size:8pt;font-weight:800;
    letter-spacing:.22em;text-transform:uppercase;color:#8B7386;
  }
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10pt}
  .pcard{border:.6pt solid #E5DAD3;border-radius:7pt;padding:9pt 11pt;break-inside:avoid}
  .pcard h2{font-size:12pt;margin:0 0 5pt;padding-bottom:4pt;border-bottom:.6pt solid #E5DAD3}
  .pcard ul{margin:0;padding-left:11pt;font-size:9.5pt;line-height:1.55}
  .plist{width:100%;border-collapse:collapse;font-size:10pt}
  .plist th{text-align:left;padding:0 0 4pt;color:#8B7386;font-size:7.5pt;letter-spacing:.08em;text-transform:uppercase;border-bottom:.8pt solid #D9CCC4}
  .plist td{padding:4.5pt 0;border-bottom:.4pt dotted #D9CCC4}
  .plist .pt{text-align:right;color:#8B7386;font-weight:800;white-space:nowrap}
  .pwarning{padding:7pt 9pt;border:.6pt solid #EAB765;border-radius:6pt;background:#FFF6DD;color:#82641D;font-size:8.5pt;font-weight:800}
  .pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
  .pcardlet{
    height:62mm;border:.4pt dashed #CBBBC4;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:5pt;break-inside:avoid;padding:8pt;
  }
  .pcardlet .pname{font-size:19pt;text-align:center;line-height:1.15}
  .pcardlet .pdiv{color:#A84A63;font-size:9pt}
  .pcardlet .ptable{
    font-size:8.5pt;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8B7386;
  }
}

/* ── rsvp ───────────────────────────────────────────────── */
.chip .rsvp{
  font-size:.78rem;padding:4px 6px;border-radius:999px;line-height:1;transition:background .2s,transform .3s var(--spring);
}
.chip .rsvp:hover{background:var(--sage-soft);transform:scale(1.15)}
.chip.declined{opacity:.5}
.chip.declined .nm{text-decoration:line-through;text-decoration-color:var(--ink-faint)}

/* ── saved venues ───────────────────────────────────────── */
.venues{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.venue-library-head{display:flex;align-items:center;gap:10px;width:100%;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}.venue-library-head label{margin-left:auto}.venue-library-head input{width:180px;border:1px solid #EADFE4;border-radius:999px;background:#fff;padding:7px 11px;font-family:inherit;font-weight:800;font-size:.75rem;color:var(--ink)}.venue-library-head input:focus{outline:none;border-color:var(--rose)}.venue-scope{display:flex;padding:2px;border-radius:999px;background:var(--panel2)}.venue-scope button{padding:5px 9px;border-radius:999px;font-family:inherit;font-weight:900;font-size:.65rem;color:var(--ink-soft)}.venue-scope button.on{background:#fff;color:var(--rose);box-shadow:var(--shadow-s)}.venue-list{display:flex;flex-wrap:wrap;gap:8px;width:100%}.venue-empty{color:var(--ink-faint);font-size:.78rem;font-weight:800}.venue-share{padding:6px 9px;border-radius:999px;background:var(--lilac-soft);color:var(--lilac);font-size:.68rem;font-weight:900;white-space:nowrap}
.venue{
  display:flex;align-items:center;background:var(--sage-soft);border-radius:999px;
  padding:2px 4px 2px 2px;font-weight:800;font-size:.82rem;color:#4C6252;
  transition:transform .25s var(--spring);
}
.venue:hover{transform:translateY(-2px)}
.venue .vname{padding:6px 8px 6px 12px}
.venue .vx{width:22px;height:22px;border-radius:50%;color:#7d9184;font-size:.75rem}
.venue .vx:hover{background:var(--danger-soft);color:var(--danger)}

/* ── tables ⇄ seats switch ──────────────────────────────── */
.modeswitch{display:flex;gap:3px;background:var(--panel2);border-radius:999px;padding:3px;flex:none}
.modeswitch button{
  font-weight:800;font-size:.83rem;padding:8px 15px;border-radius:999px;color:var(--ink-soft);
  transition:background .3s,color .3s,transform .3s var(--spring);white-space:nowrap;
}
.modeswitch button.on{background:var(--panel);color:var(--rose);box-shadow:var(--shadow-s);transform:scale(1.03)}
.modeswitch button:hover:not(.on){color:var(--ink)}

/* ── a single chair ─────────────────────────────────────── */
.tbl.seat1 .disc{
  width:calc(74px * var(--s));height:calc(56px * var(--s));
  border-radius:calc(14px * var(--s)) calc(14px * var(--s)) calc(9px * var(--s)) calc(9px * var(--s));
  padding:calc(4px * var(--s));gap:0;
  background:linear-gradient(180deg,#fff 62%,var(--panel2) 62%);
  box-shadow:0 5px 14px rgba(58,42,56,.13);
}
.tbl.seat1 .disc .num{font-size:calc(.6rem * max(.8, var(--s)));font-weight:900;color:var(--ink-faint);letter-spacing:.04em}
.tbl.seat1 .disc .who{
  font-size:calc(.62rem * max(.78, var(--s)));font-weight:900;line-height:1.15;
  max-width:calc(68px * var(--s));color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
}
.tbl.seat1.taken .disc{background:linear-gradient(180deg,var(--rose-soft) 62%,var(--panel3) 62%)}
.tbl.seat1.taken .disc .num{color:var(--rose)}
.tbl.seat1 .stars{font-size:calc(.62rem * max(.75, var(--s)));margin-top:2px}
.tbl.seat1 .who.locked{filter:blur(4px);user-select:none}
.tbl.seat1.hidden-seat .disc{cursor:pointer}
.room.seatmode .rings{opacity:.55}
@media (max-width:640px){
  .modeswitch button{padding:7px 11px;font-size:.78rem}
}


/* ── the ＋ chair that grows a row ───────────────────────── */
.tbl.addseat{padding:0;background:none}
.tbl.addseat .disc{
  background:none;border:2px dashed var(--ink-faint);box-shadow:none;cursor:pointer;
  color:var(--ink-faint);font-size:calc(1.05rem * var(--s));display:grid;place-items:center;
  transition:border-color .25s,color .25s;
}
.tbl.addseat:hover{transform:translate(-50%,-50%) scale(1.1)}
.tbl.addseat:hover .disc{border-color:var(--rose);color:var(--rose)}

/* ── room size dial ─────────────────────────────────────── */
.zoomctl{display:flex;gap:3px;background:var(--panel2);border-radius:999px;padding:3px;margin-left:auto}
.zoomctl button{
  width:34px;height:34px;border-radius:50%;font-weight:900;font-size:1rem;color:var(--ink-soft);
  display:grid;place-items:center;transition:background .2s,color .2s,transform .25s var(--spring);
}
.zoomctl button:hover{background:var(--panel);color:var(--rose);transform:scale(1.1)}

/* ── edit sheet ─────────────────────────────────────────── */
.field{
  width:100%;border:2px solid var(--panel2);background:var(--cream);border-radius:999px;
  padding:13px 20px;font-weight:800;font-size:1rem;text-align:center;
}
.field:focus{outline:none;border-color:var(--rose)}
.caprow{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.caprow .lab{font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.caprow button{
  width:38px;height:38px;border-radius:50%;background:var(--panel2);font-size:1.15rem;font-weight:900;
  color:var(--ink-soft);transition:transform .25s var(--spring),background .2s;
}
.caprow button:hover{background:var(--rose-soft);color:var(--rose);transform:scale(1.1)}
.caprow [data-edit-stars]{width:auto;min-width:38px;padding:0 8px;color:#C69A2A}.caprow [data-edit-stars]:not(.on){opacity:.3;filter:grayscale(1)}
.caprow b{font-family:"Fraunces",Georgia,serif;font-size:1.5rem;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}

/* ── guest detail sheet and graph breakpoints ───────────── */
.guest-sheet{position:relative;text-align:left;max-width:500px}.sheet-close{position:absolute;top:12px;right:14px;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);font-size:1.6rem;transition:background .2s,color .2s}.sheet-close:hover{background:var(--panel2);color:var(--rose)}
.guest-sheet-head{display:flex;align-items:center;gap:12px;margin:2px 32px 18px 0}.guest-sheet-head .face{width:50px;height:50px;border-radius:17px;color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.2rem}.eyebrow{margin:0 !important;color:var(--ink-faint) !important;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem !important;font-weight:900 !important}.guest-sheet h3{margin:0}.sheet-label{display:block;margin:0 0 6px 2px;color:var(--ink-soft);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.guest-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.guest-choice{margin:0;padding:11px;border:1px solid #EEE4E9;border-radius:15px;min-width:0}.guest-choice legend{padding:0 4px;color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:900}.choice-row{display:flex;gap:5px;flex-wrap:wrap}.choice-row button{border-radius:10px;padding:7px 8px;color:var(--ink-soft);font-size:.74rem;font-weight:900;background:var(--panel2);transition:transform .22s var(--spring),background .2s,color .2s}.choice-row button:hover{transform:translateY(-1px)}.choice-row button.on{color:var(--rose);background:var(--rose-soft);box-shadow:0 0 0 2px #F6C8D7 inset}.heart-choice button{letter-spacing:-3px;font-size:.78rem}.sheet-note{margin:14px 1px 0 !important;font-size:.78rem !important}.danger-ghost{color:var(--danger)}.sheet-actions{align-items:center}.sheet-actions .ghost{flex:none}

@media (max-width:820px){
  .rule-tools{flex:1 1 100%}.rule-done{margin-left:auto}
  .group-hub .group-cards{grid-template-columns:1fr;gap:15px}
}
@media (max-width:640px){
  .people-actions{width:100%;flex-wrap:wrap}.people-actions .tool{flex:none}.people-actions .addrow{flex:1;min-width:190px}
  .tray{min-height:250px;padding-top:4px}.linked-groups{gap:16px}.linked-group{padding:11px 10px 14px;border-radius:18px;overflow:visible}.group-caption{margin-bottom:9px}
  .group-cards,.group-pair .group-cards,.group-small .group-cards,.group-hub .group-cards{grid-template-columns:1fr;grid-template-areas:none;gap:15px;padding-inline:0;min-height:0}
  .group-cards .chip{min-height:67px;padding:9px 12px;gap:10px;border-radius:19px;font-size:.9rem}.group-cards .chip .face{width:42px;height:42px;border-radius:14px;font-size:.9rem}.group-cards .chip .nm{font-size:.98rem}.group-cards .guest-meta{gap:3px 5px;font-size:.72rem}.group-cards .guest-meta .hearts{font-size:.65rem}
  #threads .thread-under{stroke-width:14px}#threads .thread-line{stroke-width:6px;filter:drop-shadow(0 2px 3px rgba(58,42,56,.2))}
  .chips{grid-template-columns:1fr;gap:15px;padding:0 0 12px}.chip{min-height:67px;padding:9px 12px;border-radius:19px;font-size:.9rem}.chip .face{width:42px;height:42px}.chip .nm{font-size:.98rem}.guest-meta{font-size:.72rem}.guest-meta .hearts{font-size:.65rem}.connector-nub{right:-7px}.rule-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}.rule-done{width:100%;margin:0}.guest-detail-grid{grid-template-columns:1fr}.guest-sheet{padding:25px 18px}.choice-row button{flex:1}.guest-filter{order:-1;width:100%;min-width:0}.guest-filter input{flex:1;width:auto}.guest-filter-count{width:100%;padding-left:4px}
  .sample-cta{width:100%;justify-content:center;order:4}.intake-veil{align-items:end;padding:0}.intake-modal{width:100%;max-width:none;max-height:100dvh;min-height:0;margin:0;padding:20px 18px max(20px,env(safe-area-inset-bottom));border-radius:25px 25px 0 0;overflow-y:auto}.intake-orbit{transform:scale(.86);margin-top:-8px;margin-bottom:-5px}.intake-modal h3{font-size:1.55rem}.intake-lead{font-size:.86rem!important;margin-bottom:11px!important}.intake-textarea{min-height:112px;padding:11px}.intake-upload{padding:8px 10px}.intake-secondary{margin-top:8px}.intake-explore{margin-top:7px}.restart-modal{margin-bottom:0;border-radius:25px 25px 0 0}
  #floorplan-veil{align-items:end;padding:0}.floorplan-modal{width:100%;max-width:none;max-height:92dvh;margin:0;padding:22px 17px max(18px,env(safe-area-inset-bottom));border-radius:25px 25px 0 0}.floorplan-table-list{grid-template-columns:1fr;max-height:220px}.floorplan-confirm-actions{flex-direction:column}.floorplan-confirm-actions .ghost{width:100%}
}
@media (max-width:390px){.rule-tools{grid-template-columns:1fr}.group-cards,.group-pair .group-cards,.group-small .group-cards,.group-hub .group-cards{padding-inline:0;gap:13px}.chip .face{width:39px;height:39px}.guest-meta{font-size:.68rem}.guest-meta .hearts{font-size:.62rem}}

/* ── polished controls and mixed-room canvas ─────────────── */
svg{display:block}
.iconbtn svg,.stepper .dot svg,.tool svg,.zoomctl svg,.magic svg,.collab-mark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iconbtn{color:var(--ink-soft);border:1px solid rgba(139,115,134,.12)}
.iconbtn:hover{color:var(--rose);border-color:var(--rose-soft)}
.stepper .dot{font-size:0;color:var(--ink-soft)}
.stepper button.on .dot{color:var(--rose)}
.stepper button.done .dot{color:var(--sage)}
.layout-status{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #EDE1E6;border-radius:999px;background:linear-gradient(120deg,#FFF8EF,#F8F4FF);color:var(--ink-soft);font-size:.77rem;font-weight:900;white-space:nowrap}
.layout-status > span:first-child{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--lilac));box-shadow:0 0 0 4px var(--rose-soft)}
.room-add svg,.tool.plain>svg{width:17px;height:17px;color:var(--rose);flex:none}
.zoomctl button{font-size:0}.zoomctl button svg{width:17px;height:17px}
.stage-node{position:absolute;transform:translate(-50%,-50%);z-index:2;cursor:grab;touch-action:none}
.stage-node.dragging{cursor:grabbing;z-index:8}
.stage-node .stage-disc{min-width:130px;padding:10px 14px;border-radius:16px;background:linear-gradient(135deg,var(--coral),var(--rose));color:#fff;box-shadow:0 14px 26px rgba(228,87,123,.28);font-size:.76rem;font-weight:900;text-align:center}
.stage-node .stage-disc svg{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:5px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbl.table-node .disc{border:2px solid rgba(255,255,255,.75)}
.tbl.table-node .quality{display:none}
.tbl.seat1 .quality{display:none}
.room .object-node .disc{width:calc(var(--object-w, 88px) * var(--s));height:calc(var(--object-d, 42px) * var(--s));border-radius:14px;background:rgba(58,42,56,.09);box-shadow:none;border:2px dashed rgba(58,42,56,.25);color:var(--ink-soft);font-size:.68rem;transform:rotate(var(--object-rotation, 0deg));transition:transform .2s var(--ease),background .2s}.room .object-node .item-kind{z-index:2}
.tbl .item-kind{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:3px 7px;background:var(--ink);color:#fff;border-radius:999px;font-size:.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;opacity:0;transition:opacity .2s}
.tbl:hover .item-kind{opacity:1}
.manual-panel{display:flex;align-items:center;gap:16px;margin-top:14px;padding:14px 16px;border:1px solid #F0E2E7;border-radius:18px;background:linear-gradient(105deg,#FFF9F5,#F7F3FF);animation:rise .4s var(--ease) both}
.manual-panel[hidden]{display:none}.manual-panel>div{flex:1}.manual-panel strong{display:block;font-size:.91rem}.manual-panel p{margin:2px 0 0;color:var(--ink-soft);font-size:.78rem;font-weight:700}.seat.manual-pick{box-shadow:0 0 0 4px var(--gold-soft),0 9px 20px rgba(233,185,78,.3);background:#fff9e7}.tbl.drop-target .disc{outline:3px solid var(--gold);outline-offset:5px}.seating-title{display:flex;align-items:center;gap:11px}.seating-title .eyebrow{white-space:nowrap}
.magic{border:1px solid rgba(255,255,255,.12);border-radius:22px;padding-left:12px;gap:7px}
.magic-label{display:flex;align-items:center;gap:6px;color:#FFE9D6;font-size:.72rem;font-weight:900;white-space:nowrap}.magic-label svg{width:17px;height:17px;color:#FFC76D}
.magic .send{width:auto;padding:0 13px;gap:6px;border-radius:15px;font-size:.77rem;font-weight:900}.magic .send svg{width:17px;height:17px}.magic .cam{font-size:0}.magic.busy .magic-label{opacity:.55}
.collab-mark{display:grid;place-items:center;width:52px;height:52px;margin:0 auto;border-radius:18px;background:var(--lilac-soft);color:var(--lilac)}.collab-mark svg{width:27px;height:27px}.collab-note{display:flex;flex-direction:column;gap:3px;margin:18px 0;padding:13px;border-radius:14px;background:var(--panel2);color:var(--ink-soft);font-size:.82rem;font-weight:700;text-align:left}.collab-note b{color:var(--ink);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.collab-links{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;text-align:left}.collab-link-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--panel2);font-size:.76rem;font-weight:900;color:var(--ink)}.collab-link-row span{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collab-link-row small{color:var(--ink-soft);font-size:.66rem;font-weight:700}.collab-link-row button{flex:none;padding:6px 9px;font-size:.66rem}.collab-link-row button:disabled{opacity:.55;cursor:default}
@media (max-width:640px){.layout-status{order:3;width:100%;justify-content:center}.room-add span{display:none}.room-add{width:40px;justify-content:center;padding:10px}.manual-panel{align-items:flex-start;flex-direction:column}.magic-label span{display:none}.magic-label{padding-left:2px}.magic .send span{display:none}.magic .send{width:36px;padding:0;border-radius:50%}.bar #collaborate{display:inline-flex!important;width:40px;min-width:40px;padding:9px;justify-content:center}.bar #collaborate span{display:none}}

/* ── four-step workflow, composer, and contextual command dock ─────── */
.stepper{max-width:1160px;margin:0 auto;padding:10px 16px 18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
.stepper button{position:relative;min-width:0;justify-content:flex-start;padding:11px 13px;border:1px solid #E9DFE5;border-radius:18px;background:rgba(255,253,252,.86);box-shadow:0 5px 14px rgba(58,42,56,.045);color:var(--ink-soft);text-align:left}
.stepper button::after{content:"";position:absolute;z-index:-1;left:calc(50% + 31px);right:calc(-50% + 31px);top:28px;height:2px;background:#E7DDE3}.stepper button:last-child::after{display:none}.stepper button.on{background:linear-gradient(135deg,#FFF3F6,#FFFDFC);color:var(--rose);border-color:#F0B9C9;box-shadow:0 9px 23px rgba(228,87,123,.13);transform:translateY(-2px)}.stepper button.done{color:var(--sage)}.stepper button.done::after{background:var(--sage)}.stepper button.skipped{color:var(--ink-faint)}
.stepper .dot{position:relative;z-index:1;width:34px;height:34px;flex:none;background:#fff;border:1px solid #E8DCE3;box-shadow:none;color:inherit;font-size:.82rem}.stepper button.on .dot{background:var(--rose);color:#fff;transform:none}.stepper button.done .dot{background:var(--sage);color:#fff;border-color:var(--sage);font-size:0}.stepper button.done .dot::after{content:"✓";position:static;display:block;width:auto;height:auto;transform:none;border:0;background:transparent;font-size:.88rem}.stepper .step-copy{min-width:0;display:flex!important;flex-direction:column;gap:1px}.stepper .step-copy strong{font-size:.84rem;line-height:1.1}.stepper .step-copy small{font-size:.66rem;font-weight:800;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stepper button.on .step-copy small{color:#B85B78}
.workflow-eyebrow{margin:0 0 4px;font-size:.67rem;font-weight:900;letter-spacing:.13em;color:var(--rose);text-transform:uppercase}.guest-search-shared{display:flex;align-items:center;gap:8px;min-width:0}.guest-search-shared .guest-filter{min-width:260px}.rule-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.rule-main{min-width:0}.rule-main .rule-dock{margin-bottom:13px}.rule-guide{display:flex;align-items:center;gap:10px;margin:0 0 13px;padding:10px 13px;border:1px solid #E9E0E8;border-radius:15px;background:linear-gradient(105deg,#FFF8FB,#F7FBFF);color:var(--ink-soft);font-weight:800;font-size:.8rem}.rule-guide>span:first-child{color:var(--rule-blue);letter-spacing:.05em}.rule-summary{padding:9px 12px;border-radius:999px;background:var(--panel2);font-weight:900;font-size:.73rem;color:var(--ink-soft);white-space:nowrap}
.rule-composer{position:sticky;top:14px;padding:16px;border:1px solid #EACFD9;border-radius:22px;background:linear-gradient(145deg,#FFF8FB,#FCFCFF);box-shadow:0 16px 34px rgba(73,49,68,.11);animation:composerIn .32s cubic-bezier(.2,.8,.2,1) both}.rule-composer[hidden]{display:none}@keyframes composerIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}.composer-person{display:flex;align-items:center;gap:9px;margin:8px 0 11px;padding:10px;border:1px solid #F0D8E0;border-radius:17px;background:#fff;box-shadow:0 0 0 0 var(--rose-soft);animation:composerHalo 1.8s ease-in-out 2}.composer-person .face,.suggestion-card .face{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:900;flex:none}.composer-person span:nth-child(2),.suggestion-card span:nth-child(2){min-width:0;display:flex;flex:1;flex-direction:column}.composer-person strong,.suggestion-card strong{overflow-wrap:anywhere}.composer-person small,.suggestion-card small{font-size:.67rem;font-weight:800;color:var(--ink-faint)}@keyframes composerHalo{50%{box-shadow:0 0 0 7px var(--rose-soft)}}.composer-rule{display:inline-flex;border-radius:999px;padding:6px 10px;background:var(--rule-blue-soft);color:var(--rule-blue);font-size:.72rem;font-weight:900}.composer-instruction{margin:12px 0 7px;font-size:.81rem;font-weight:900}.composer-suggestions{margin-top:13px}.composer-suggestions-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.74rem}.text-action{padding:5px 0;border-radius:7px;background:transparent;color:var(--rose);font-size:.72rem;font-weight:900;text-decoration:underline;text-underline-offset:3px}.text-action:hover{color:var(--coral)}.rule-suggestions{display:grid;gap:7px;margin-top:8px}.suggestion-card{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:1px solid #EEE4E8;border-radius:14px;background:#fff;text-align:left;transition:transform .2s var(--spring),box-shadow .2s}.suggestion-card:hover{transform:translateX(3px);box-shadow:0 8px 16px rgba(58,42,56,.1)}.cancel-connection{margin-top:13px}.party-groups{margin:0 0 13px;padding:12px;border:1px solid #E9E0E8;border-radius:16px;background:#FFFCF6}.party-heading{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink-soft);margin-bottom:7px}.party-heading span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#FFF0C8;color:#876419;font-size:.65rem}.party-group{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #F1E8E7;font-size:.73rem;font-weight:800}.party-group>span:first-child{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.party-actions{display:flex;gap:7px}.party-actions button{font-size:.65rem;font-weight:900;color:var(--rose);text-decoration:underline;text-underline-offset:2px}
.magic{display:grid;grid-template-columns:1fr;gap:6px;width:min(760px,calc(100% - 32px));bottom:max(14px,env(safe-area-inset-bottom));padding:10px 12px;border-radius:20px;background:linear-gradient(145deg,#392B38,#2E2530);border-color:rgba(255,255,255,.16)}.magic::before{content:"";position:absolute;top:0;left:15px;right:15px;height:3px;border-radius:99px;background:var(--rose)}.magic-context{display:flex;align-items:center;gap:6px;color:#FDEADA;font-size:.68rem;font-weight:900;letter-spacing:.03em}.magic-context svg{width:15px;height:15px;color:#FFC76D}.magic-context b{color:#fff;margin-left:2px}.magic-main{display:flex;align-items:center;gap:8px}.magic input{min-height:46px;padding:0 5px;color:#fff}.magic .send{width:auto;min-width:92px;height:42px;padding:0 13px;border-radius:13px}.scan-floor{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 11px;border-radius:13px;background:#4B3A49;color:#FFE9D6;font-size:.73rem;font-weight:900;white-space:nowrap}.scan-floor svg{width:16px;height:16px}.magic-examples{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}.magic-examples::-webkit-scrollbar{display:none}
/* The suggestion chips live in a horizontally scrolling rail, which clips any
   pseudo-element, so grow the real box on touch rather than fake the area. */
.magic-example{flex:none;padding:6px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#F4DEEB;background:rgba(255,255,255,.07);font-size:.69rem;font-weight:800;white-space:nowrap}.magic-example:hover{background:rgba(255,255,255,.14)}@media (pointer:coarse){.magic-example{padding-top:12px;padding-bottom:12px}}.magic-handoff{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px;border-radius:12px;background:#FFF5E7;color:var(--ink);font-size:.73rem;font-weight:800}.magic-handoff>span:last-child{display:flex;gap:6px;flex:none}.magic-handoff .tool{padding:6px 8px;font-size:.67rem;background:var(--rose);color:#fff}.magic-handoff .tool.plain{background:var(--panel2);color:var(--ink-soft)}.privacy-choice{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:70;width:min(430px,calc(100% - 36px));padding:15px;border:1px solid #E9DDE4;border-radius:20px;background:#fffdfb;box-shadow:0 18px 44px rgba(58,42,56,.2);animation:composerIn .32s var(--ease) both}.privacy-choice strong{font-family:"Fraunces",Georgia,serif}.privacy-choice p{margin:4px 0 11px;color:var(--ink-soft);font-size:.78rem;font-weight:700;line-height:1.35}.privacy-choice-actions{display:flex;justify-content:flex-end;gap:7px}.privacy-choice-actions .tool:not(.plain){background:var(--ink);color:#fff}body.consent-pending .stage{padding-bottom:calc(var(--consent-h,190px) + 58px)}body.consent-pending .step .next,body.consent-pending .step-actions{scroll-margin-bottom:calc(var(--consent-h,190px) + 40px)}
@media (max-width:820px){.stepper{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.stepper button{padding:9px 8px;gap:6px}.stepper .step-copy strong{font-size:.74rem}.stepper .step-copy small{font-size:.58rem}.stepper button::after{left:calc(50% + 24px);right:calc(-50% + 24px);top:25px}.stepper .dot{width:30px;height:30px}.rule-workspace{grid-template-columns:1fr}.rule-composer{position:sticky;bottom:calc(142px + env(safe-area-inset-bottom));top:auto;z-index:18}.rule-suggestions{grid-auto-flow:column;grid-auto-columns:minmax(180px,75%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:3px}.suggestion-card{scroll-snap-align:start}.party-group{align-items:flex-start;flex-direction:column}.party-actions{align-self:flex-end}}
@media (max-width:640px){.privacy-settings{display:none!important}.stepper{position:sticky;top:0;z-index:45;padding:7px 9px 10px;background:rgba(255,249,243,.94);backdrop-filter:blur(12px)}.stepper button{min-height:58px;padding:7px 5px;border-radius:13px;align-items:flex-start}.stepper button span:not(.dot){display:flex}.stepper .step-copy{gap:0}.stepper .step-copy strong{font-size:.62rem;white-space:normal}.stepper .step-copy small{display:none!important}.stepper .dot{width:26px;height:26px;font-size:.68rem}.stepper button::after{left:calc(50% + 18px);right:calc(-50% + 18px);top:20px}.stage{padding-bottom:210px}.guest-search-shared{width:100%;flex-wrap:wrap}.guest-search-shared .guest-filter{width:100%;min-width:0}.rule-summary{width:100%;white-space:normal}.rule-composer{bottom:calc(156px + env(safe-area-inset-bottom));padding:12px;border-radius:18px}.magic{width:calc(100% - 16px);bottom:max(8px,env(safe-area-inset-bottom));border-radius:17px;padding:8px}.magic-context{font-size:.63rem}.magic-main{gap:6px}.magic input{min-width:0;font-size:.82rem}.magic .send{min-width:74px;padding:0 8px;font-size:.72rem}.scan-floor{min-width:0;padding:0 8px;font-size:.67rem}.scan-floor span{white-space:nowrap}.magic-handoff{align-items:flex-start;flex-direction:column}.privacy-choice{right:8px;bottom:8px;width:calc(100% - 16px)}body.consent-pending .stage{padding-bottom:calc(var(--consent-h,190px) + 218px)}}

/* ── remediation: clear hierarchy, reliable hidden state, and rule motion ── */
.demo-state{display:flex;align-items:center;align-self:center;gap:8px;min-width:0}.demo-badge,.demo-replace{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;font-size:.73rem;font-weight:900;white-space:nowrap}.demo-badge{padding:7px 10px;background:#F4EDFF;color:#745B95}.demo-replace{padding:7px 12px;border:1px solid #E7DDEA;background:#FFFDFC;color:#765D79;box-shadow:var(--shadow-s)}.demo-replace:hover{border-color:#D7C2DD;color:var(--rose);transform:translateY(-1px)}

.guest-toolbar{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:14px;padding:10px 11px;border:1px solid #EEE3E8;border-radius:20px;background:linear-gradient(110deg,#FFFDFC,#FCF8FA);box-shadow:0 7px 19px rgba(58,42,56,.045)}.people-actions{flex:0 1 auto;gap:8px}.guest-add-field{display:flex;align-items:center;min-width:0;height:44px;padding:0 13px;border:2px solid #F0E5E8;border-radius:14px;background:#FFFDFC;transition:border-color .2s,box-shadow .2s}.guest-add-field:focus-within{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-soft)}.guest-add-field input{width:150px;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font-weight:800}.guest-add-action,.paste-list{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;font-size:.78rem;font-weight:900;white-space:nowrap}.guest-add-action{padding:0 14px;background:linear-gradient(135deg,var(--rose),#D94F76);box-shadow:0 8px 18px rgba(228,87,123,.18);color:#fff}.guest-add-action:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(228,87,123,.28)}.paste-list{padding:0 13px;border:1px solid #EEE1E7;background:#FFF6EF;color:var(--ink-soft)}.paste-list:hover{border-color:#E6C9D5;color:var(--rose)}.guest-add-action svg,.paste-list svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.guest-toolbar-search{margin-left:auto;min-width:0;max-width:100%}.guest-toolbar-search .guest-search-shared{max-width:100%}.guest-toolbar-search .guest-filter{min-width:0;max-width:100%}.guest-filter-count{white-space:normal;overflow-wrap:anywhere;line-height:1.2}.addrow,.round{display:none!important}

.rule-dock{align-items:stretch;gap:13px;padding:14px;border-color:#E8DDE4;background:linear-gradient(120deg,#FFF9FC,#F8FBFF)}.rule-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}.rule-mode{position:relative;min-width:0;min-height:112px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;padding:10px 11px;border:1px solid currentColor;border-radius:16px;background:#fff;color:var(--ink-soft);text-align:left;opacity:.78;transition:transform .22s var(--spring),box-shadow .22s,background .22s,opacity .22s}.rule-mode:hover{transform:translateY(-2px);opacity:1}.rule-mode.gold{color:var(--rule-blue);background:linear-gradient(145deg,#FBFDFF,var(--rule-blue-soft))}.rule-mode.grey{color:var(--rule-green);background:linear-gradient(145deg,#FCFFFD,var(--rule-green-soft))}.rule-mode.red{color:var(--rule-red);background:linear-gradient(145deg,#FFFDFE,var(--rule-red-soft))}.rule-mode.on{opacity:1;box-shadow:0 0 0 3px currentColor inset,0 10px 22px color-mix(in srgb,currentColor 18%,transparent);transform:translateY(-2px) scale(1.012)}.rule-mode-top{display:flex;align-items:center;width:100%;gap:6px}.rule-mode .rule-face{font-size:1rem;line-height:1}.rule-mode-check{display:grid;place-items:center;width:19px;height:19px;margin-left:auto;border:1px solid currentColor;border-radius:50%;font-size:.7rem;font-weight:900;opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s var(--spring)}.rule-mode.on .rule-mode-check{opacity:1;transform:scale(1);background:currentColor;color:#fff}.rule-mode strong{font-size:.76rem;line-height:1.15}.rule-mode small{font-size:.66rem;font-weight:800;line-height:1.24;color:var(--ink-soft)}.rule-dock[data-connection-mode="gold"],#p1[data-connection-mode="gold"]{--mode-color:var(--rule-blue);--mode-soft:var(--rule-blue-soft)}.rule-dock[data-connection-mode="grey"],#p1[data-connection-mode="grey"]{--mode-color:var(--rule-green);--mode-soft:var(--rule-green-soft)}.rule-dock[data-connection-mode="red"],#p1[data-connection-mode="red"]{--mode-color:var(--rule-red);--mode-soft:var(--rule-red-soft)}.rule-workspace{position:relative;isolation:isolate}.rule-workspace::before{content:"";position:absolute;inset:-8px;border-radius:24px;background:var(--mode-soft,transparent);opacity:.08;pointer-events:none;z-index:-1;transition:background .25s,opacity .25s}

.stepper{isolation:isolate}.stepper-connector{position:absolute;z-index:0;height:2px;border-radius:999px;background:#E7DDE3;pointer-events:none;transition:left .24s var(--ease),width .24s var(--ease),top .24s var(--ease),background .24s}.stepper-connector.done{background:var(--sage)}.stepper button{z-index:1}.stepper button.on{z-index:2}.stepper button::after{display:none!important}

.rule-composer{min-width:0;overflow:visible}.composer-close{position:absolute;z-index:4;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #EBD9E1;border-radius:14px;background:#FFFDFC;color:var(--ink-soft);font-size:1.45rem;line-height:1;transition:color .2s,transform .22s var(--spring),box-shadow .2s}.composer-close:hover{color:var(--rose);transform:rotate(7deg) scale(1.04);box-shadow:var(--shadow-s)}.rule-composer>.eyebrow{padding-right:48px}.composer-person{position:relative;isolation:isolate;animation:composerAlive 1.45s ease-in-out infinite,composerHalo 1.8s ease-in-out infinite}.composer-person::after{content:"";position:absolute;z-index:-1;inset:-3px;padding:3px;border-radius:20px;background:conic-gradient(from 0deg,transparent 0 24%,var(--mode-color,var(--rule-blue)) 34%,transparent 44% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;animation:composerGlint 2.3s linear infinite;pointer-events:none}@keyframes composerAlive{0%,100%{transform:translateY(0) rotate(0) scale(1)}22%{transform:translateY(-3px) rotate(-.45deg) scale(1.008)}48%{transform:translateY(-1px) rotate(.18deg) scale(1.004)}72%{transform:translateY(1px) rotate(.55deg) scale(1.002)}}@keyframes composerGlint{to{transform:rotate(1turn)}}.composer-rule{background:var(--mode-soft,var(--rule-blue-soft));color:var(--mode-color,var(--rule-blue))}.composer-search-slot,.rule-composer .guest-search-shared{width:100%;max-width:100%;flex-wrap:wrap;align-items:flex-start}.rule-composer .guest-filter{width:100%;min-width:0;max-width:100%}.rule-composer .guest-filter input{width:0;flex:1}.rule-composer .guest-filter-count{width:100%;padding:2px 4px 0;font-size:.68rem}.existing-rules{display:grid;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid #EEE1E7}.existing-rules h3,.composer-imported-groups>strong{margin:0;color:var(--ink-soft);font-size:.71rem;text-transform:uppercase;letter-spacing:.075em}.existing-rule-list{display:grid;gap:6px}.existing-rule,.composer-imported-group{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 8px;border-radius:12px;background:#FFFDFC;border:1px solid #EEE4E8}.existing-rule>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.existing-rule strong,.composer-imported-group>span:nth-child(2){overflow-wrap:anywhere}.existing-rule small{color:var(--ink-faint);font-size:.65rem;font-weight:800}.existing-rule .thread-line,.composer-imported-group .thread-line{width:18px;color:var(--mode-color,var(--rule-blue))}.existing-red .thread-line{color:var(--rule-red)}.existing-grey .thread-line{color:var(--rule-green)}.remove-all-rules{min-height:38px;padding:7px 9px;border:1px solid #F2C4CE;border-radius:11px;background:#FFF7F8;color:var(--danger);font-size:.69rem;font-weight:900;text-align:left}.composer-imported-groups{display:grid;gap:6px;padding-top:3px}.composer-imported-group>span:nth-child(2){min-width:0;flex:1;font-size:.7rem;font-weight:800}.composer-imported-group .thread-line{border-top-style:solid}.composer-imported-group .text-action{flex:none}

.rule-aura{position:absolute;z-index:11;left:0;top:0;width:1px;height:1px;pointer-events:none;opacity:0;transition:opacity .15s}.rule-aura.visible{opacity:1}.rule-aura i{position:absolute;left:0;top:0;width:26px;height:26px;border:2px solid var(--mode-color,var(--rule-blue));border-radius:50%;transform:translate(-50%,-50%) scale(.25);opacity:0;animation:ruleAuraRing 1.2s ease-out infinite}.rule-aura i:nth-child(2){animation-delay:.58s}@keyframes ruleAuraRing{12%{opacity:.65}100%{transform:translate(-50%,-50%) scale(2.25);opacity:0}}.rule-aura.pressed i{animation:ruleAuraPress .36s ease-out both}@keyframes ruleAuraPress{0%{opacity:.8;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}.rule-touch-ripple{position:absolute;z-index:13;width:14px;height:14px;border:2px solid var(--mode-color,var(--rule-blue));border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.3);animation:ruleTouchRipple .46s ease-out both}@keyframes ruleTouchRipple{20%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}

.magic,.magic-main,.magic-main>*{min-width:0;max-width:100%}.magic-main{align-items:center}.magic input,.magic .send,.scan-floor{min-height:44px;height:44px;line-height:1}.magic .send,.scan-floor{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}.magic .send svg,.scan-floor svg{width:17px;height:17px;flex:none}.magic .send span{display:inline}.scan-floor{flex:none}.magic-examples{max-width:100%}

/* A connected hub reads best as one clear anchor with its companions below.
   Besides avoiding crossed lines, this gives every incoming thread its own
   nearest border port instead of making two relationships compete for a row. */
@media (min-width:641px){.group-hub .group-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.group-hub .group-cards .chip:first-child{grid-column:1 / -1}}

@media (max-width:820px){.guest-toolbar{align-items:stretch;flex-wrap:wrap}.people-actions{flex:1 1 100%}.guest-toolbar-search{width:100%;margin-left:0}.guest-toolbar-search .guest-search-shared{width:100%}.rule-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.rule-mode{min-height:105px}.stepper-connector{height:2px}}
@media (max-width:760px){.people-actions{flex-wrap:wrap}.guest-add-field{flex:1 1 180px}.guest-toolbar-search .guest-filter{flex:1}.guest-toolbar-search .guest-filter input{width:0;flex:1}.rule-tools{flex:1 1 100%}}
@media (max-width:520px){.guest-toolbar{padding:9px;border-radius:17px}.people-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.guest-add-field{grid-column:1 / -1;width:100%}.guest-add-action,.paste-list{width:100%;padding-inline:9px}.guest-toolbar-search .guest-search-shared{gap:5px}.demo-state{width:100%;justify-content:space-between}.demo-replace{min-width:0;white-space:normal;text-align:center}.rule-tools{grid-template-columns:1fr}.rule-mode{min-height:82px}.rule-mode small{display:none}.rule-mode{flex-direction:row;align-items:center}.rule-mode-top{width:auto;flex:none}.rule-mode strong{flex:1}.magic-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.magic .scan-floor{grid-column:1 / -1;width:100%}.magic .send{min-width:82px;padding:0 11px}.magic .send span{display:inline}.scan-floor span{display:inline!important;white-space:nowrap}.magic{padding:9px}.magic input{width:100%;font-size:.79rem}.stepper-connector{display:block}.rule-composer{bottom:calc(172px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.composer-person,.composer-person::after,.rule-aura i,.rule-touch-ripple{animation:none!important}.composer-person{box-shadow:0 0 0 4px var(--mode-color,var(--rule-blue))}.rule-aura{display:none}.rule-workspace::before{opacity:.12}}

/* ── floor-plan scan progress ─────────────────────────────── */
.scan-progress-veil{z-index:92}.scan-progress{max-width:430px;text-align:center;overflow:hidden}.scan-progress-orbit{position:relative;width:78px;height:78px;margin:0 auto 8px;border-radius:50%;background:radial-gradient(circle,#FFFDFB 34%,#FCE7EF 35% 47%,transparent 48%);isolation:isolate}.scan-progress-orbit::before{content:"";position:absolute;inset:8px;border:3px solid transparent;border-top-color:var(--rose);border-right-color:#F19A79;border-radius:50%;animation:scanSpin 1.4s linear infinite}.scan-progress-orbit i{position:absolute;z-index:1;width:10px;height:10px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 5px var(--rose-soft)}.scan-progress-orbit i:nth-child(1){top:3px;left:34px}.scan-progress-orbit i:nth-child(2){right:3px;bottom:19px;background:#F19A79}.scan-progress-orbit i:nth-child(3){left:7px;bottom:15px;background:var(--lilac)}@keyframes scanSpin{to{transform:rotate(1turn)}}.scan-progress>p:not(.eyebrow){margin:7px auto;color:var(--ink-soft);font-size:.86rem;font-weight:750;line-height:1.4}.scan-progress-track{height:10px;margin:18px 8px 5px;overflow:hidden;border-radius:999px;background:var(--panel2);box-shadow:inset 0 1px 2px rgba(58,42,56,.06)}.scan-progress-track span{display:block;width:10%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--coral),var(--rose));transition:width .55s var(--ease)}.scan-progress-percent{margin:0!important;color:var(--rose)!important;font-size:.78rem!important;font-weight:900!important;font-variant-numeric:tabular-nums}.scan-progress-help{max-width:310px;font-size:.74rem!important}.scan-progress-actions{justify-content:center;margin-top:16px}.scan-progress-actions .buy,.scan-progress-actions .ghost{min-width:116px}.scan-progress.is-error .scan-progress-orbit::before{border-top-color:var(--danger);animation:none}.scan-progress.is-error #scan-progress-message{color:var(--danger)}.scan-progress.is-error .scan-progress-track span{background:var(--danger)}
.checkout-recovery{display:grid;gap:7px;margin:10px 0;padding:10px 12px;border:1px solid #F0D8DF;border-radius:13px;background:#FFF8F9;color:var(--ink-soft);font-size:.75rem;font-weight:800;text-align:center}.checkout-recovery[hidden]{display:none}.checkout-recovery>div{display:flex;justify-content:center;gap:10px}.checkout-recovery .later{color:var(--rose);font-weight:900;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.scan-progress-orbit::before{animation:none}.scan-progress-track span{transition:none}}

/* ── motion layer ───────────────────────────────────────── */
/* Late in the file on purpose: these refine rules defined above. */

/* A completed connector fills toward the step it unlocked. */
.stepper-connector.done{background:linear-gradient(90deg,var(--sage),color-mix(in srgb,var(--sage) 55%,#fff))}

/* Every control acknowledges a press. Cheap, and the whole app feels
   physical rather than declarative. */
button:active:not(:disabled),.chip:active,.tool:active{transform:translateY(1px) scale(.985)}
.stepper button,.tool,.round,.zoomctl button{transition:background var(--dur-s),color var(--dur-s),transform var(--dur-s) var(--spring),box-shadow var(--dur-s)}

/* ── connection-mode dock ───────────────────────────────── */
/* One block, replacing the two that used to fight each other. The dock is
   its own grid: a label row, then three equal cards across the full width.
   The old "Active mode: …" line was a third column whose text width
   reserved a tall empty lane — the selected card carries that state now,
   and the wording survives for screen readers in #active-mode. */
.rule-dock{display:grid;grid-template-columns:1fr;align-items:start;gap:9px;
  padding:13px 14px;border:1px solid #E8DDE4;border-radius:20px;
  background:linear-gradient(120deg,#FFF9FC,#F8FBFF);box-shadow:var(--shadow-s)}
.rule-kicker{display:block;color:var(--ink-soft);font-size:.68rem;font-weight:900;
  letter-spacing:.13em;text-transform:uppercase}
.rule-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
  width:100%;flex:none;min-width:0}
.rule-mode{min-height:104px;gap:5px}

/* The specimen is drawn the way the real thread is drawn, so the card is a
   sample of the mark you are about to make rather than a description. */
.mode-spec{width:100%;height:6px;flex:1;min-width:20px;overflow:visible}
.mode-spec path{stroke:currentColor;stroke-width:4;stroke-linecap:round;fill:none}
.rule-mode.on .mode-spec path{animation:threadmarch .6s linear infinite}
.rule-mode.on .rule-face{animation:heartbump .5s var(--spring)}

/* The instruction is the animation: two people, a link, done. */
.guide-demo{width:66px;height:16px;flex:none;overflow:visible}
.guide-demo .guide-thread{stroke:var(--rule-blue);stroke-width:3.4;stroke-linecap:round;fill:none;
  stroke-dasharray:44;stroke-dashoffset:44;animation:guideDraw 2.8s var(--ease) infinite}
.guide-demo .guide-dot{fill:var(--rose)}
.guide-demo .guide-dot.b{fill:var(--lilac);animation:guidePop 2.8s var(--ease) infinite}
.guide-demo .guide-tick{fill:var(--sage);font-size:9px;font-weight:900;opacity:0;
  animation:guideTick 2.8s var(--ease) infinite}
@keyframes guideDraw{0%,12%{stroke-dashoffset:44}46%,78%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:44}}
@keyframes guidePop{0%,20%{transform:scale(.4);transform-origin:55px 8px}40%,84%{transform:scale(1);transform-origin:55px 8px}96%,100%{transform:scale(.4);transform-origin:55px 8px}}
@keyframes guideTick{0%,58%{opacity:0}70%,82%{opacity:1}90%,100%{opacity:0}}

@media (max-width:520px){
  .rule-tools{grid-template-columns:1fr;gap:7px}
  .rule-mode{min-height:0;flex-direction:row;align-items:center;gap:9px;padding:9px 11px}
  .rule-mode-top{width:auto;flex:none;gap:7px}
  .mode-spec{width:34px;flex:none}
  .rule-mode strong{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .guide-demo .guide-thread{stroke-dashoffset:0;animation:none}
  .guide-demo .guide-dot.b,.guide-demo .guide-tick{animation:none}
  .guide-demo .guide-tick{opacity:1}
  .rule-mode.on .mode-spec path{animation:none}
}

/* The composer column exists only while a person is held for connecting. */
.rule-workspace{grid-template-columns:minmax(0,1fr);transition:grid-template-columns var(--dur-m) var(--ease)}
.rule-workspace.composing{grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:820px){.rule-workspace,.rule-workspace.composing{grid-template-columns:1fr}}

/* ── room: a floor plan you draw on ─────────────────────── */
/* A faint dot grid under the existing warm wash, so pieces read as drawn
   onto a real floor rather than floating in a void. */
.room{background:
  radial-gradient(circle,rgba(58,42,56,.055) 1px,transparent 1px) 0 0/24px 24px,
  radial-gradient(circle at 50% 20%,#FFF3E4 0%,#FDE9EC 55%,#F4E6F7 100%)}

/* Scenery. Each piece is drawn as the thing it is; the same paint serves
   the room and the thumbnail-sized pickers. */
.room .object-node .disc{position:relative;overflow:hidden;border:none;background:none;
  box-shadow:0 8px 18px rgba(58,42,56,.13);color:var(--ink);display:grid;place-items:center}
.room .object-node .sc,.mini .sc{position:absolute;inset:0;pointer-events:none}
.room .object-node .obj-name{position:relative;z-index:4;padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.82);color:var(--ink);font-size:.6rem;font-weight:900;
  max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transform:rotate(calc(-1 * var(--object-rotation,0deg)))}
.mini{position:relative;display:block;overflow:hidden;border-radius:7px}

/* Dance floor — parquet with a slow sweep of light. */
.room .obj-dance>.disc,.mini.obj-dance{border-radius:10px;
  background:repeating-conic-gradient(#E7D2B0 0% 25%,#C6A473 0% 50%) 0 0/20px 20px;
  box-shadow:inset 0 0 0 3px rgba(122,88,46,.32),0 8px 18px rgba(58,42,56,.14)}
.sc-shimmer{background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%);
  animation:danceShimmer 5s var(--ease) infinite}
@keyframes danceShimmer{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}

/* Bar — a counter with stools along the front and bottles on top. */
.room .obj-bar>.disc,.mini.obj-bar{border-radius:9px;background:linear-gradient(#8A5C39,#5F3A22);
  box-shadow:0 8px 18px rgba(58,42,56,.2)}
.sc-counter{top:0;bottom:auto;height:38%;background:linear-gradient(#E0BE99,#BC9068);
  border-bottom:2px solid rgba(0,0,0,.2)}
.sc-bottles{top:5%;bottom:auto;left:10%;right:10%;height:28%;display:flex;gap:9%;align-items:flex-end;justify-content:flex-start}
.sc-bottles b{width:4px;height:78%;border-radius:2px 2px 1px 1px;background:#37785C}
.sc-bottles b:nth-child(2){height:58%;background:#8C3550}
.sc-bottles b:nth-child(3){height:88%;background:#3B5B86}
.sc-stools{top:auto;bottom:2%;left:8%;right:8%;height:34%;display:flex;align-items:center;justify-content:space-around}
.sc-stools b{width:22%;max-width:11px;aspect-ratio:1;border-radius:50%;background:rgba(255,240,228,.55);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}

/* DJ booth — two decks and an equaliser that idles. */
.room .obj-dj>.disc,.mini.obj-dj{border-radius:9px;background:linear-gradient(#3B2E46,#221A2B);
  box-shadow:0 8px 18px rgba(34,26,43,.35)}
.sc-decks{top:12%;bottom:auto;left:8%;right:8%;height:52%;display:flex;align-items:center;justify-content:space-between}
.sc-decks b{width:30%;max-width:30px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#F2EAF5 16%,#8A7698 18%,#453556 72%)}
.sc-eq{top:auto;bottom:8%;left:30%;right:30%;height:24%;display:flex;gap:2px;align-items:flex-end;justify-content:center}
.sc-eq b{width:3px;min-height:2px;border-radius:1px;background:#E9B94E;animation:djEq 1.15s ease-in-out infinite}
.sc-eq b:nth-child(2){animation-delay:.16s}.sc-eq b:nth-child(3){animation-delay:.33s}.sc-eq b:nth-child(4){animation-delay:.49s}
@keyframes djEq{0%,100%{height:26%}50%{height:100%}}

/* Aisle — a runner with woven edges. */
.room .obj-aisle>.disc,.mini.obj-aisle{border-radius:7px;background:linear-gradient(#F8ECF1,#EFD9E4);
  box-shadow:inset 0 0 0 2px rgba(196,150,170,.45),0 5px 12px rgba(58,42,56,.1)}
.sc-runner{background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(186,138,162,.3) 9px 11px);
  border-top:2px dashed rgba(178,128,154,.55);border-bottom:2px dashed rgba(178,128,154,.55)}

/* Pillar — solid, shaded, obviously not somewhere to seat anyone. */
.room .obj-blocker>.disc,.mini.obj-blocker{border-radius:9px;background:none;box-shadow:none}
.sc-column{border-radius:9px;background:radial-gradient(ellipse at 33% 26%,#F1EBF1,#9C8EA0 58%,#6B5E70);
  box-shadow:0 11px 15px -7px rgba(58,42,56,.55),inset 0 0 0 1px rgba(255,255,255,.25)}

/* Label — typographic by nature, so it stays a tag. */
.room .obj-label>.disc,.mini.obj-label{border-radius:9px;background:#FFFDFC;
  box-shadow:inset 0 0 0 1.5px var(--guest-border),0 6px 14px rgba(58,42,56,.12)}

/* Blocking finally shows itself. */
.object-node.blocks .disc::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 7px,rgba(224,82,107,.22) 7px 14px)}

/* Stage joins the family: a curtain edge and its own size dials. */
.stage-node{--s:calc(var(--u) * var(--mob,1))}
.stage-node .stage-disc{position:relative;overflow:hidden;
  min-width:calc(var(--stage-w,130px) * var(--s));min-height:calc(var(--stage-d,44px) * var(--s));
  display:grid;place-items:center}
.stage-node .sc-curtain{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 6px,transparent 6px 13px);
  -webkit-mask-image:linear-gradient(#000 0 34%,transparent 62%);mask-image:linear-gradient(#000 0 34%,transparent 62%)}
.stage-node .stage-disc svg,.stage-node .stage-disc{position:relative}

/* ── selecting and shaping a piece ──────────────────────── */
.tbl.selected>.disc,.stage-node.selected>.stage-disc{
  outline:3px solid var(--step-accent,var(--rose));outline-offset:4px}
.tbl.selected{z-index:9}
.stage-node.selected{z-index:9}
/* Selection is also how a touch user reaches the hover-only controls. */
.tbl.selected .tx,.tbl.selected .stars{opacity:1}

.piece-controls{position:absolute;inset:0;pointer-events:none;z-index:12}
.piece-controls>*{pointer-events:auto}

.piece-handle{position:absolute;width:26px;height:26px;padding:0;border-radius:50%;
  background:#fff;border:2px solid var(--step-accent,var(--rose));box-shadow:var(--shadow-s);
  display:grid;place-items:center;color:var(--step-accent,var(--rose));font-size:.7rem;line-height:1;
  animation:handleIn .26s var(--ease) both}
@keyframes handleIn{from{opacity:0}to{opacity:1}}
/* A 26px dot with a 44px reach: small on screen, thumb-sized in practice. */
.piece-handle::after{content:"";position:absolute;inset:-9px;border-radius:50%}
.piece-handle.rotate{left:50%;top:-40px;transform:translateX(-50%);cursor:grab}
.piece-handle.rotate::before{content:"⟳";font-weight:900}
.piece-handle.resize{right:-13px;bottom:-13px;cursor:nwse-resize}
.piece-handle.resize::before{content:"⤡";font-weight:900}
.piece-handle.rotate{box-shadow:0 0 0 1px #fff,var(--shadow-s)}
/* The tether makes the rotate handle read as an arm, not a floating dot. */
.piece-handle.rotate::marker{content:""}
.tbl.selected>.disc::before,.stage-node.selected>.stage-disc::before{content:"";position:absolute;
  left:50%;top:-27px;width:2px;height:27px;background:var(--step-accent,var(--rose));opacity:.55;
  transform:translateX(-50%);pointer-events:none}
.tbl.seat1.selected>.disc::before{display:none}

.piece-readout{position:absolute;left:50%;top:-70px;transform:translateX(-50%);
  padding:3px 8px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:.64rem;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.piece-readout[hidden]{display:none}

.piece-pill{position:absolute;left:50%;bottom:-48px;transform:translateX(-50%);
  display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--panel);
  box-shadow:var(--shadow);white-space:nowrap;animation:pillIn .28s var(--spring) both}
.piece-pill button{width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;
  font-size:.82rem;background:transparent;transition:background var(--dur-xs),transform var(--dur-xs) var(--spring)}
.piece-pill button:hover{background:var(--panel2)}
.piece-pill button.on{background:var(--rose-soft);box-shadow:inset 0 0 0 2px var(--rose)}
.piece-pill button.danger:hover{background:var(--danger-soft)}

.type-picker{position:absolute;left:50%;bottom:-152px;transform:translateX(-50%);
  display:grid;grid-template-columns:repeat(3,46px);gap:6px;padding:8px;border-radius:16px;
  background:var(--panel);box-shadow:var(--shadow-l);z-index:15;animation:pillIn .28s var(--spring) both}
.type-picker button{width:46px;height:34px;padding:0;border:2px solid transparent;border-radius:9px;
  background:none;transition:transform var(--dur-xs) var(--spring),border-color var(--dur-xs)}
.type-picker button:hover{transform:translateY(-2px)}
.type-picker button.on{border-color:var(--rose)}
.type-picker .mini{width:100%;height:100%}

/* A new piece stamps onto the floor rather than blinking into place. Applied
   by class, so it plays on arrival and not on every re-render. */
.tbl.landing{animation:pieceStamp .4s var(--spring) both}
@keyframes pieceStamp{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  62%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .sc-shimmer,.sc-eq b{animation:none}
  .tbl.landing{animation:none}
}

/* The illustration carries the identity, so the name recedes until the
   piece is hovered or selected. A Label piece is its text, so it stays. */
.room .object-node .obj-name{opacity:.72;transition:opacity var(--dur-s)}
.room .object-node:hover .obj-name,.room .object-node.selected .obj-name,
.room .obj-label .obj-name{opacity:1}

/* ── capacity meter ─────────────────────────────────────── */
.capacity-chip{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;
  border:1px solid #EFE2E8;background:var(--panel);box-shadow:var(--shadow-s);text-align:left;
  transition:transform var(--dur-s) var(--spring),box-shadow var(--dur-s),border-color var(--dur-s)}
.capacity-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.capacity-chip .cap-ring{width:34px;height:34px;flex:none;transform:rotate(-90deg)}
.capacity-chip .cap-track,.capacity-chip .cap-fill{fill:none;stroke-width:5;stroke-linecap:round}
.capacity-chip .cap-track{stroke:#F0E4EA}
/* 2πr for r=16, so the dash offset maps straight onto the --cap fraction. */
.capacity-chip .cap-fill{stroke:var(--rose);stroke-dasharray:100.53;
  stroke-dashoffset:calc(100.53 * (1 - var(--cap,0)));
  transition:stroke-dashoffset var(--dur-xl) var(--ease),stroke var(--dur-m)}
.capacity-chip.enough .cap-fill{stroke:var(--sage)}
.capacity-chip.short .cap-fill{stroke:var(--coral)}
.capacity-chip .cap-copy{display:flex;flex-direction:column;line-height:1.15}
.capacity-chip b{font-size:.86rem;font-weight:900;font-variant-numeric:tabular-nums}
.capacity-chip small{font-size:.66rem;font-weight:800;color:var(--ink-soft)}
.capacity-chip.enough small{color:var(--sage)}
.capacity-chip.short small{color:var(--coral)}
.capacity-chip.nudge{animation:capNudge .62s var(--spring)}
@keyframes capNudge{0%,100%{transform:translateX(0)}
  16%{transform:translateX(-5px)}38%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ── Quick Build ────────────────────────────────────────── */
.quick-cta{border-color:var(--rose)!important;color:var(--rose);font-weight:900}
.quick-modal{max-width:460px;text-align:left}
.quick-modal .sub{margin:2px 0 14px;color:var(--ink-soft);font-size:.82rem;font-weight:700}
.quick-presets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.quick-presets button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:11px;
  border:2px solid #EFE2E8;border-radius:16px;background:var(--panel);text-align:left;
  transition:transform var(--dur-s) var(--spring),border-color var(--dur-s),box-shadow var(--dur-s)}
.quick-presets button:hover{transform:translateY(-2px)}
.quick-presets button.on{border-color:var(--rose);box-shadow:0 8px 18px rgba(228,87,123,.16)}
.quick-presets strong{font-size:.8rem}
.quick-presets small{font-size:.66rem;font-weight:800;color:var(--ink-soft);line-height:1.25}
/* The diagram is the label: you pick a shape, not a word. */
.quick-figure{display:grid;width:100%;height:38px;padding:4px;border-radius:10px;background:var(--panel2)}
.quick-figure.banquet{grid-template-columns:repeat(3,1fr);gap:4px;place-items:center}
.quick-figure.banquet i{width:11px;height:11px;border-radius:50%;background:var(--rose);opacity:.72}
.quick-figure.rows{grid-template-columns:repeat(6,1fr);gap:3px;place-items:center}
.quick-figure.rows i{width:7px;height:7px;border-radius:2px;background:var(--lilac);opacity:.72}
.quick-presets button.on .quick-figure i{opacity:1}
.quick-mode{display:flex;gap:8px;margin:12px 0 6px}
.quick-mode button{flex:1;padding:9px;border-radius:12px;border:2px solid #EFE2E8;background:var(--panel);
  font-size:.76rem;font-weight:900;color:var(--ink-soft);transition:border-color var(--dur-s),color var(--dur-s)}
.quick-mode button.on{border-color:var(--rose);color:var(--rose)}
.quick-total{margin:8px 0 0;font-size:.78rem;font-weight:900;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.quick-pro{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:11px 13px;border-radius:14px;
  background:var(--gold-soft);color:var(--gold-ink);font-size:.75rem;font-weight:800;
  animation:rise .32s var(--ease) both}
.quick-pro[hidden]{display:none}
.quick-pro span:first-child{font-size:1.1rem}
.quick-pro button{flex:none;padding:7px 11px;font-size:.7rem}
.clear-choices{display:grid;gap:8px;margin:14px 0}
.clear-choices button{width:100%;padding:11px}

/* Ghost preview of a build, drawn into the real room behind the sheet. */
.ghost-piece{position:absolute;transform:translate(-50%,-50%);width:calc(56px * var(--u,1));
  height:calc(56px * var(--u,1));border-radius:50%;border:2px dashed var(--rose);
  background:rgba(228,87,123,.12);pointer-events:none;z-index:3;
  animation:ghostIn .3s var(--ease) both}
.ghost-piece.chair{width:calc(22px * var(--u,1));height:calc(22px * var(--u,1));border-radius:7px}
@keyframes ghostIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media (max-width:640px){
  .capacity-chip{order:3}
  .quick-presets{grid-template-columns:1fr}
  .quick-cta span:last-child{display:inline!important}
  .quick-cta{width:auto!important;padding:10px 13px!important}
}
@media (prefers-reduced-motion:reduce){.capacity-chip.nudge{animation:none}.ghost-piece{animation:none}}

/* Keep the selection UI inside the room, which clips its own overflow. */
.piece-pill,.type-picker{transform:translateX(calc(-50% + var(--pill-shift,0px)))}
@keyframes pillIn{from{opacity:0;transform:translate(calc(-50% + var(--pill-shift,0px)),6px) scale(.86)}
  to{opacity:1;transform:translate(calc(-50% + var(--pill-shift,0px)),0) scale(1)}}
.piece-controls.up .piece-pill{bottom:auto;top:-48px}
.piece-controls.up .type-picker{bottom:auto;top:-152px}

/* The room toolbar collapses to icons on phones. These two buttons carry an
   emoji rather than an SVG, so it must survive that collapse or the button
   renders completely empty. */
.room-add .tool-glyph{display:inline!important;font-size:1rem;line-height:1}

/* ── per-step accent ────────────────────────────────────── */
/* workflow.js has always carried an accent per step that nothing consumed.
   Tinting the stepper with it gives the four moments their own identity
   without adding a word to the screen. These live at the very end because an
   equal-specificity .stepper rule earlier in the file would otherwise win. */
body[data-step-accent="coral"]{--step-accent:var(--coral);--step-accent-soft:var(--coral-soft)}
body[data-step-accent="violet"]{--step-accent:var(--lilac);--step-accent-soft:var(--lilac-soft)}
body[data-step-accent="gold"]{--step-accent:var(--gold-ink);--step-accent-soft:var(--gold-soft)}
body[data-step-accent="sage"]{--step-accent:var(--sage);--step-accent-soft:var(--sage-soft)}
.stepper button.on{color:var(--step-accent,var(--rose));
  background:color-mix(in srgb,var(--step-accent,var(--rose)) 9%,#FFFDFC);
  border-color:color-mix(in srgb,var(--step-accent,var(--rose)) 32%,#F0E4EA)}
.stepper button.on .dot{background:var(--step-accent,var(--rose));color:#fff}
.stepper button.done .dot{background:var(--sage)}
/* The done tick is an in-flow glyph in the current markup, so it must not be
   transformed into the corner — it only scales in place. */
.stepper button.done .dot::after{animation:dotdone .42s var(--spring) both}
@keyframes dotdone{from{transform:scale(0)}to{transform:scale(1)}}

/* Referenced by .manual-panel and .quick-pro but never defined — both
   entrances were silently doing nothing. */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* The equaliser gets its height from its animation, so a reduced-motion
   reader was left with four 2px stubs instead of a DJ booth. */
@media (prefers-reduced-motion:reduce){.sc-eq b{height:62%}}

/* Track counts are not interpolable, so this only ever snapped. */
.rule-workspace{transition:none}

/* Near the ceiling the rotate arm swings under the piece instead. */
.piece-controls.arm-under .piece-handle.rotate{top:auto;bottom:-40px}
.piece-controls.arm-under .piece-readout{top:auto;bottom:-70px}
.tbl.selected>.disc::before,.stage-node.selected>.stage-disc::before{transition:none}
.piece-controls.arm-under ~ * .tbl.selected>.disc::before{display:none}