/* How we think · the cards demo. Every rule is scoped to the mount. */
.demo-cards{ --card-w:300px; --card-h:420px; position:relative; min-height:760px; overflow:hidden; padding:clamp(20px,3vw,38px); color:var(--paper); }
.demo-cards .cards-screen,
.demo-cards .cards-summary{ width:min(100%,1120px); margin:0 auto; }
.demo-cards .cards-top{ display:flex; justify-content:space-between; align-items:end; gap:20px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.demo-cards .cards-eyebrow,
.demo-cards .cards-count,
.demo-cards .cards-level,
.demo-cards .cards-key-title,
.demo-cards .cards-panel-level,
.demo-cards .cards-slot-label{ margin:0; font:400 11px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.demo-cards .cards-eyebrow{ color:var(--paper-faint); }
.demo-cards .cards-capability{ margin:3px 0 0; font:600 15px/1.35 var(--sans); }
.demo-cards .cards-count{ flex:none; color:var(--signal-text); }
.demo-cards .cards-dimension{ margin:17px 0 0; font:600 clamp(28px,4vw,42px)/1 var(--display); text-transform:uppercase; }
.demo-cards .cards-dimension:focus,
.demo-cards .cards-summary-title:focus{ outline:none; }
.demo-cards .cards-prompt{ margin:6px 0 0; color:var(--paper-dim); font:15px/1.4 var(--sans); }
.demo-cards .cards-shortcuts{ margin:4px 0 16px; color:var(--paper-faint); font:10px/1.45 var(--mono); }
.demo-cards .cards-board{ display:grid; grid-template-columns:minmax(490px,1fr) 360px; gap:clamp(22px,4vw,48px); align-items:start; }
.demo-cards .cards-play{ min-width:0; display:grid; grid-template-columns:var(--card-w) minmax(142px,170px); gap:clamp(16px,2.4vw,28px); align-items:start; }
.demo-cards .cards-deck-column{ width:var(--card-w); display:flex; flex-direction:column; align-items:center; }
.demo-cards .cards-deck-stage{ position:relative; width:var(--card-w); height:calc(var(--card-h) + 10px); perspective:1100px; }
.demo-cards .cards-playing-card{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:14px; }
.demo-cards .cards-card-face{ color:#16191c; background-color:#f6f1e6; background-image:radial-gradient(circle at 18% 21%,rgba(22,25,28,.035) 0 1px,transparent 1.4px),radial-gradient(circle at 73% 66%,rgba(22,25,28,.025) 0 1px,transparent 1.3px),linear-gradient(118deg,rgba(255,255,255,.18),transparent 42%,rgba(22,25,28,.025)); background-size:13px 17px,19px 23px,100% 100%; box-shadow:inset 0 0 0 1px rgba(22,25,28,.18),inset 0 0 0 8px #f6f1e6,inset 0 0 0 9px rgba(22,25,28,.35); }
.demo-cards .cards-card-back{ background-color:var(--signal); background-image:repeating-linear-gradient(45deg,transparent 0 5px,var(--ink-on-sig) 5px 6px,transparent 6px 11px); box-shadow:inset 0 0 0 1px var(--ink-on-sig),inset 0 0 0 8px var(--signal),inset 0 0 0 10px var(--ink-on-sig),inset 0 0 0 14px var(--signal),inset 0 0 0 15px var(--ink-on-sig); }
.demo-cards .cards-back-frame{ position:absolute; inset:22px; border:1px solid var(--ink-on-sig); border-radius:5px; opacity:.72; }
.demo-cards .cards-deck-back,
.demo-cards .cards-shuffle-half,
.demo-cards .cards-active-wrap{ position:absolute; inset:0; width:var(--card-w); height:var(--card-h); }
.demo-cards .cards-deck-back{ box-shadow:0 13px 22px var(--ink-3); }
.demo-cards .cards-deck-back.is-1{ z-index:1; transform:translate(1px,8px) rotate(-3deg); }
.demo-cards .cards-deck-back.is-2{ z-index:2; transform:translate(4px,7px) rotate(2deg); }
.demo-cards .cards-deck-back.is-3{ z-index:3; transform:translate(2px,5px) rotate(-1deg); }
.demo-cards .cards-deck-back.is-4{ z-index:4; transform:translate(4px,4px) rotate(.5deg); }
.demo-cards .cards-shuffle-half{ z-index:8; opacity:0; pointer-events:none; }
.demo-cards .cards-shuffle-half.is-left{ clip-path:inset(-30px 50% -30px -80px); }
.demo-cards .cards-shuffle-half.is-right{ clip-path:inset(-30px -80px -30px 50%); }
.demo-cards .cards-active-wrap{ z-index:6; filter:drop-shadow(0 14px 14px var(--ink-3)); transform-style:preserve-3d; }
.demo-cards .cards-card-rotor{ position:absolute; inset:0; width:100%; height:100%; transform-style:preserve-3d; }
.demo-cards .cards-card-rotor.is-back{ transform:rotateY(180deg); }
.demo-cards .cards-card-rotor > .cards-playing-card{ position:absolute; inset:0; backface-visibility:hidden; }
.demo-cards .cards-card-rotor > .cards-card-back{ transform:rotateY(180deg); }
.demo-cards .cards-corner{ position:absolute; z-index:2; top:15px; left:16px; width:34px; display:grid; justify-items:center; color:#16191c; }
.demo-cards .cards-corner.is-bottom{ inset:auto 16px 15px auto; transform:rotate(180deg); }
.demo-cards .cards-corner-number{ font:700 28px/.82 var(--display); }
.demo-cards .cards-card-centre{ position:absolute; inset:42px 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.demo-cards .cards-mark{ display:block; flex:none; overflow:visible; }
.demo-cards .cards-mark-hero{ width:88px; height:88px; margin-bottom:12px; }
.demo-cards .cards-mark-corner{ width:22px; height:22px; }
.demo-cards .cards-mark-key{ width:24px; height:24px; }
.demo-cards .cards-mark-panel{ width:42px; height:42px; }
.demo-cards .cards-road{ fill:none; stroke:var(--paper); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.demo-cards .cards-dash{ fill:none; stroke:var(--paper-faint); stroke-width:3; stroke-linecap:round; stroke-dasharray:3 6; }
.demo-cards .cards-ring{ fill:var(--ink-2); stroke:var(--paper); stroke-width:3; }
.demo-cards .cards-hook{ fill:none; stroke:var(--paper); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.demo-cards .cards-dot{ fill:var(--signal); }
.demo-cards .cards-card-face .cards-road,
.demo-cards .cards-card-face .cards-hook{ stroke:#16191c; }
.demo-cards .cards-card-face .cards-dash{ stroke:rgba(22,25,28,.55); }
.demo-cards .cards-card-face .cards-ring{ fill:#f6f1e6; stroke:#16191c; }
.demo-cards .cards-card-face .cards-dot{ fill:#16191c; }
.demo-cards .cards-level{ color:#16191c; }
.demo-cards .cards-statement{ margin:15px 0 0; color:#16191c; font:600 clamp(18px,1.55vw,20px)/1.35 var(--sans); text-wrap:balance; }
.demo-cards .cards-actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
.demo-cards .cards-button{ min-height:42px; padding:9px 11px; border:1px solid var(--line); border-radius:3px; color:var(--paper); background:none; font:600 12px/1.2 var(--sans); cursor:pointer; }
.demo-cards .cards-button:hover:not(:disabled){ border-color:var(--signal); }
.demo-cards .cards-button:disabled{ opacity:.35; cursor:not-allowed; }
.demo-cards .cards-button-fill{ border-color:var(--signal); background:var(--signal); color:var(--ink-on-sig); }
.demo-cards .cards-read,
.demo-cards .cards-close{ min-height:40px; border:0; border-bottom:1px solid currentColor; padding:8px 2px 4px; background:none; color:var(--paper-dim); font:12px/1.3 var(--mono); cursor:pointer; }
.demo-cards .cards-read{ margin-top:8px; }
.demo-cards button:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.demo-cards .cards-key{ min-width:0; padding-top:3px; }
.demo-cards .cards-key-title{ margin:0 0 8px; color:var(--paper-dim); }
.demo-cards .cards-key-row{ position:relative; width:100%; min-height:78px; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:8px; margin:-2px 0 0; padding:7px 6px; border:0; border-radius:8px; color:#16191c; background:#f6f1e6; box-shadow:inset 0 0 0 1px rgba(22,25,28,.3),inset 0 0 0 5px #f6f1e6,inset 0 0 0 6px rgba(22,25,28,.2),0 4px 9px var(--ink-3); text-align:left; cursor:pointer; transition:transform .25s ease-out; }
.demo-cards .cards-key-row:nth-of-type(1){ transform:rotate(-1.2deg); }
.demo-cards .cards-key-row:nth-of-type(2){ transform:rotate(.7deg); }
.demo-cards .cards-key-row:nth-of-type(3){ transform:rotate(-.4deg); }
.demo-cards .cards-key-row:nth-of-type(4){ transform:rotate(.9deg); }
.demo-cards .cards-key-row:nth-of-type(5){ transform:rotate(-.7deg); }
.demo-cards .cards-key-row:hover{ z-index:2; transform:translateY(-4px); }
.demo-cards .cards-key-row.is-current{ z-index:3; transform:translateY(-7px) rotate(0); box-shadow:inset 0 0 0 2px var(--signal),inset 0 0 0 5px #f6f1e6,inset 0 0 0 6px rgba(22,25,28,.22),0 10px 14px var(--ink-3); }
.demo-cards .cards-key-index{ display:grid; justify-items:center; align-content:center; }
.demo-cards .cards-key-number{ font:700 23px/.8 var(--display); }
.demo-cards .cards-key-index .cards-road,
.demo-cards .cards-key-index .cards-hook{ stroke:#16191c; }
.demo-cards .cards-key-index .cards-dash{ stroke:rgba(22,25,28,.55); }
.demo-cards .cards-key-index .cards-ring{ fill:#f6f1e6; stroke:#16191c; }
.demo-cards .cards-key-index .cards-dot{ fill:#16191c; }
.demo-cards .cards-key-copy{ min-width:0; display:grid; gap:2px; }
.demo-cards .cards-key-name{ font:600 11px/1.2 var(--mono); }
.demo-cards .cards-key-copy small{ font:10px/1.25 var(--sans); }
.demo-cards .cards-key-hint{ margin:8px 2px 0; color:var(--paper-faint); font:10px/1.35 var(--mono); }
.demo-cards .cards-table{ display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; padding-top:3px; }
.demo-cards .cards-slot{ min-width:0; }
.demo-cards .cards-slot-label{ margin:0 0 6px 3px; color:var(--paper-dim); }
.demo-cards .cards-slot-footprint{ position:relative; width:100%; aspect-ratio:5/7; border:1px dashed var(--line); border-radius:10px; background:var(--ink-1); }
.demo-cards .cards-slot-footprint::after{ content:""; position:absolute; inset:7px; border:1px solid var(--line-soft); border-radius:6px; }
.demo-cards .cards-slot-card{ position:absolute; z-index:2; inset:5%; filter:drop-shadow(0 7px 7px var(--ink-3)); }
.demo-cards .cards-slot-card.is-face{ transform:rotate(-3deg); }
.demo-cards .cards-slot:nth-child(2) .cards-slot-card{ transform:rotate(2deg); }
.demo-cards .cards-slot:nth-child(3) .cards-slot-card{ transform:rotate(-1deg); }
.demo-cards .cards-slot:nth-child(4) .cards-slot-card{ transform:rotate(3deg); }
.demo-cards .cards-slot-card .cards-card-centre{ inset:20px 17px; }
.demo-cards .cards-slot-card .cards-mark-hero{ width:44px; height:44px; margin-bottom:5px; }
.demo-cards .cards-slot-card .cards-level{ font-size:8px; }
.demo-cards .cards-slot-card .cards-statement{ display:none; }
.demo-cards .cards-slot-card .cards-corner{ top:8px; left:8px; width:22px; }
.demo-cards .cards-slot-card .cards-corner.is-bottom{ inset:auto 8px 8px auto; }
.demo-cards .cards-slot-card .cards-corner-number{ font-size:18px; }
.demo-cards .cards-slot-card .cards-mark-corner{ width:14px; height:14px; }
.demo-cards .cards-question-sticker{ position:absolute; z-index:2; top:50%; left:50%; width:54px; height:54px; display:grid; place-items:center; border-radius:50%; color:#16191c; background:#f6f1e6; box-shadow:0 3px 8px var(--ink-3); font:700 35px/1 var(--display); transform:translate(-50%,-50%) rotate(-7deg); }
.demo-cards .cards-panel{ padding:clamp(16px,3vw,28px); border:1px solid var(--line); background:var(--ink-2); }
.demo-cards .cards-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.demo-cards .cards-panel-head h3{ margin:0; font:600 20px/1.3 var(--sans); }
.demo-cards .cards-panel-row{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:13px; align-items:center; padding:12px 9px; border-bottom:1px solid var(--line-soft); }
.demo-cards .cards-panel-row.is-current{ background:var(--signal-dim); }
.demo-cards .cards-panel-row:last-child{ border-bottom:0; }
.demo-cards .cards-panel-level{ color:var(--signal-text); }
.demo-cards .cards-panel-statement{ margin:3px 0 0; color:var(--paper); font:14px/1.4 var(--sans); }
.demo-cards .cards-flight{ position:absolute; z-index:30; pointer-events:none; filter:drop-shadow(0 16px 14px var(--ink-3)); transform-origin:center; }
.demo-cards .cards-summary-title{ margin:0; font:600 clamp(34px,5vw,52px)/1 var(--display); text-transform:uppercase; }
.demo-cards .cards-summary-intro{ margin:10px 0 22px; color:var(--paper-dim); font:16px/1.45 var(--sans); }
.demo-cards .cards-hand{ position:relative; width:min(100%,720px); height:470px; margin:0 auto; }
.demo-cards .cards-hand-card{ position:absolute; top:14px; left:50%; width:170px; height:238px; transform-origin:50% 115%; filter:drop-shadow(0 11px 10px var(--ink-3)); }
.demo-cards .cards-hand-card.is-1{ transform:translateX(-215px) rotate(-14deg); }
.demo-cards .cards-hand-card.is-2{ transform:translateX(-150px) rotate(-7deg); }
.demo-cards .cards-hand-card.is-3{ transform:translateX(-85px) rotate(0deg); }
.demo-cards .cards-hand-card.is-4{ transform:translateX(-20px) rotate(7deg); }
.demo-cards .cards-hand-card.is-5{ transform:translateX(45px) rotate(14deg); }
.demo-cards .cards-hand-card .cards-card-centre{ inset:25px 22px; }
.demo-cards .cards-hand-card .cards-mark-hero{ width:48px; height:48px; margin-bottom:5px; }
.demo-cards .cards-hand-card .cards-level{ font-size:8px; }
.demo-cards .cards-hand-card .cards-statement{ display:none; }
.demo-cards .cards-hand-card .cards-corner{ top:9px; left:9px; width:23px; }
.demo-cards .cards-hand-card .cards-corner.is-bottom{ inset:auto 9px 9px auto; }
.demo-cards .cards-hand-card .cards-corner-number{ font-size:19px; }
.demo-cards .cards-hand-card .cards-mark-corner{ width:15px; height:15px; }
.demo-cards .cards-hand-name,
.demo-cards .cards-whole-name{ position:absolute; z-index:3; right:12px; bottom:9px; left:12px; margin:0; color:#16191c; font:600 9px/1.2 var(--mono); text-align:center; text-transform:uppercase; }
.demo-cards .cards-hand-card > .cards-card-back + .cards-hand-name{ color:var(--ink-on-sig); }
.demo-cards .cards-whole-card{ position:absolute; z-index:8; top:190px; left:50%; width:200px; height:280px; filter:drop-shadow(0 14px 13px var(--ink-3)); transform:translateX(-50%) rotate(-1deg); }
.demo-cards .cards-whole-card .cards-card-centre{ inset:35px 28px; }
.demo-cards .cards-whole-card .cards-mark-hero{ width:58px; height:58px; margin-bottom:6px; }
.demo-cards .cards-whole-card .cards-statement{ margin-top:9px; font-size:14px; }
.demo-cards .cards-hand.is-arriving .cards-hand-card{ animation:cards-fan-in .42s cubic-bezier(.2,.8,.2,1) both; }
.demo-cards .cards-hand.is-arriving .cards-whole-card{ animation:cards-whole-in .44s .2s cubic-bezier(.2,.8,.2,1) both; }
.demo-cards .cards-restart{ display:block; margin:12px 0 0 auto; }
.demo-cards .cards-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@keyframes cards-fan-in{ from{ opacity:0; translate:0 -70px; rotate:0deg; scale:.75; } to{ opacity:1; translate:0 0; scale:1; } }
@keyframes cards-whole-in{ from{ opacity:0; translate:0 -100px; scale:.8; } to{ opacity:1; translate:0 0; scale:1; } }

@media (max-width:970px){
  .demo-cards .cards-board{ grid-template-columns:1fr; }
  .demo-cards .cards-table{ width:min(100%,620px); grid-template-columns:repeat(4,1fr); margin-top:18px; }
}

@media (max-width:620px){
  .demo-cards{ --card-w:min(300px,calc(100vw - 52px)); --card-h:calc(var(--card-w) * 1.4); min-height:690px; padding:18px 12px 24px; }
  .demo-cards .cards-shortcuts{ display:none; }
  .demo-cards .cards-play{ grid-template-columns:1fr; justify-items:center; }
  .demo-cards .cards-key{ width:100%; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:8px; }
  .demo-cards .cards-key-title,
  .demo-cards .cards-key-hint{ grid-column:1/-1; }
  .demo-cards .cards-key-row{ min-height:72px; grid-template-columns:1fr; justify-items:center; padding:5px 2px; }
  .demo-cards .cards-key-row.is-current{ transform:translateY(-5px); }
  .demo-cards .cards-key-copy{ text-align:center; }
  .demo-cards .cards-key-copy small{ display:none; }
  .demo-cards .cards-key-name{ font-size:8px; }
  .demo-cards .cards-table{ grid-template-columns:1fr 1fr; width:100%; }
  .demo-cards .cards-card-centre{ inset:38px 34px; }
  .demo-cards .cards-mark-hero{ width:72px; height:72px; }
  .demo-cards .cards-statement{ font-size:18px; }
  .demo-cards .cards-panel{ padding:13px 7px; }
  .demo-cards .cards-panel-head h3{ font-size:17px; }
  .demo-cards .cards-panel-row{ grid-template-columns:40px minmax(0,1fr); gap:7px; padding:10px 5px; }
  .demo-cards .cards-mark-panel{ width:34px; height:34px; }
  .demo-cards .cards-hand{ height:420px; transform:scale(.82); transform-origin:top center; margin-bottom:-70px; }
}

@media (prefers-reduced-motion:reduce){
  .demo-cards .cards-key-row{ transition:none; }
  .demo-cards .cards-hand.is-arriving .cards-hand-card,
  .demo-cards .cards-hand.is-arriving .cards-whole-card{ animation:none; }
}
.demo-cards .cards-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;list-style:none;margin:18px 0 0;padding:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.demo-cards .cards-legend li{display:flex;gap:8px}
.demo-cards .cards-legend-dim{color:var(--paper-faint);text-transform:uppercase}
.demo-cards .cards-legend-level{color:var(--paper)}