/* Smart suggestions page. Page prefix: sg-.
   Shared parts (ui-win, ui-head, ui-chip, ui-k, av, live, mini-deck, mock)
   come from /assets/site/site.css. Panel UI uses px and reflows with
   container queries; paper slides and capability fragments scale with
   container units. Loops animate transform and opacity only, stop off
   screen and are static under reduced motion. */

/* ---------- Shared bits ---------- */
.sg-spk{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px rgba(183,168,255,.28)}
.sg-spk svg{width:19px;height:19px}
.sg-spk.is-quiet{opacity:.6}
.sg-act{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 13px;border-radius:999px;background:var(--violet);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);font:500 13px/1 var(--sans);color:#fff;white-space:nowrap}
.sg-act.is-ghost{background:none;box-shadow:inset 0 0 0 1px rgba(183,168,255,.42);color:var(--paper)}
.sg-btns{display:flex;flex-wrap:wrap;gap:8px}
.sg-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:999px;font:500 13px/1 var(--sans);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(183,168,255,.38);white-space:nowrap}
.sg-btn.is-pri{background:var(--violet);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);color:#fff}

/* ---------- Paper slides that scale as one picture ---------- */
.sg-sl{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;border-radius:9px;background:var(--paper);container:sg-sl / inline-size;box-shadow:0 22px 40px -22px rgba(0,0,0,.9)}
.sg-sl-k{position:absolute;left:7cqw;top:7cqw;display:flex;align-items:center;gap:1.6cqw;font:500 max(6.5px,2.7cqw)/1 var(--sans);letter-spacing:.12em;color:var(--violet);white-space:nowrap}
.sg-sl-k svg{flex:none;width:max(9px,4.2cqw);height:max(9px,4.2cqw);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sg-sl-n{position:absolute;right:6cqw;top:7cqw;font:500 max(6.5px,2.6cqw)/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.5)}
.sg-sl-t{position:absolute;left:7cqw;top:15cqw;width:64cqw;font:600 max(9px,6.2cqw)/1.08 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.sg-sl-d{position:absolute;left:7cqw;top:32cqw;width:56cqw;font:400 max(7px,2.9cqw)/1.4 var(--sans);color:var(--ink-2)}
.sg-sl-steps{position:absolute;left:7cqw;right:7cqw;bottom:7cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw}
.sg-sl-steps::before{content:"";position:absolute;left:2.5cqw;right:calc(33.3% - 2cqw);top:2.25cqw;height:.5cqw;border-radius:1cqw;background:linear-gradient(90deg,var(--violet),var(--lav))}
.sg-sl-steps i{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1.4cqw;min-width:0}
.sg-sl-steps b{display:grid;place-items:center;width:5cqw;height:5cqw;border-radius:50%;background:var(--violet);box-shadow:0 0 0 .7cqw var(--paper);font:600 max(6px,2.5cqw)/1 var(--display);color:#fff}
.sg-sl-steps span{display:block;font:500 max(7.5px,2.6cqw)/1.25 var(--sans);color:var(--ink)}
.sg-sl-steps em{display:block;margin-bottom:.6cqw;font:600 max(6.5px,2.1cqw)/1.1 var(--sans);letter-spacing:.1em;color:var(--violet)}
.sg-sl-add{position:absolute;left:4.5cqw;right:4.5cqw;bottom:4cqw;height:17cqw;border-radius:2.4cqw;background:rgba(123,92,255,.1);box-shadow:inset 0 0 0 max(1px,.35cqw) rgba(123,92,255,.55)}
.sg-sl.is-market .sg-sl-t{width:56cqw;font-size:max(9px,6.4cqw)}
.sg-sl-rings{position:absolute;right:6cqw;bottom:8cqw;width:30cqw;aspect-ratio:1}
.sg-sl-rings i{position:absolute;bottom:0;left:50%;border-radius:50%}
.sg-sl-rings i:nth-child(1){width:100%;height:100%;margin-left:-50%;background:rgba(183,168,255,.38)}
.sg-sl-rings i:nth-child(2){width:66%;height:66%;margin-left:-33%;background:rgba(183,168,255,.85)}
.sg-sl-rings i:nth-child(3){width:34%;height:34%;margin-left:-17%;background:var(--violet)}
@container sg-sl (max-width:299px){
  .sg-sl-d{display:none}
}
@container sg-sl (max-width:219px){
  .sg-sl-k{font-size:2.7cqw}
  .sg-sl-k svg{width:4.2cqw;height:4.2cqw}
  .sg-sl-n{font-size:2.6cqw}
  .sg-sl-t,.sg-sl.is-market .sg-sl-t{font-size:6.4cqw}
  .sg-sl-steps span{font-size:2.6cqw}
  .sg-sl-steps b{font-size:2.5cqw}
}

/* ---------- Hero: the suggestion feed ---------- */
.sg-hero{container-name:sg-hero}
.sg-feed{overflow:hidden}
.sg-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(183,168,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.sg-tab{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 6px 0 11px;border-radius:999px;font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap}
.sg-tab b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:rgba(183,168,255,.14);font:600 13px/1 var(--display);color:var(--paper)}
.sg-tab.is-on{background:rgba(123,92,255,.3);box-shadow:inset 0 0 0 1px rgba(183,168,255,.38);color:var(--paper)}
.sg-tab.is-on b{background:var(--violet)}
.sg-feed-sub{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--muted)}
.sg-feed-deck{flex:1;min-width:0;font-weight:500;color:var(--paper)}
.sg-feed-upd{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sg-list{list-style:none;margin:0;padding:10px;display:grid;gap:8px}
.sg-item{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line)}
.sg-item.is-new{background:linear-gradient(90deg,rgba(123,92,255,.22),rgba(123,92,255,.06));box-shadow:inset 0 0 0 1px rgba(183,168,255,.44)}
.sg-item.is-new::after{content:"";position:absolute;inset:-4px;border-radius:20px;box-shadow:0 0 0 2px rgba(183,168,255,.28);opacity:0;pointer-events:none}
.sg-item > .av{justify-self:center}
.sg-item-main{display:grid;gap:3px;min-width:0}
.sg-kind{display:flex;align-items:center;gap:7px;font:500 13px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lav)}
.sg-kind::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--lav)}
.sg-kind.is-ver{color:var(--paper)}
.sg-kind.is-ver::before{border-radius:2px;background:none;box-shadow:inset 0 0 0 1.5px var(--paper)}
.sg-item-main b{font:600 15px/1.3 var(--display);letter-spacing:-.01em;color:var(--paper)}
.sg-item-main > span:last-child{font-size:13px;line-height:1.45;color:var(--muted)}
.sg-th{position:relative;display:block;width:36px;height:26px;border-radius:5px;background:var(--paper);box-shadow:0 0 0 2px rgba(183,168,255,.3)}
.sg-th i{position:absolute;left:5px;height:3px;border-radius:2px}
.sg-th i:nth-child(1){top:6px;width:10px;background:var(--violet)}
.sg-th i:nth-child(2){top:12px;width:17px;background:rgba(18,15,46,.7)}
.sg-th b{position:absolute;right:3px;bottom:3px;width:11px;height:11px;border-radius:50%;background:var(--lav)}
.sg-feed-foot{display:flex;align-items:flex-start;gap:9px;padding:12px 18px 14px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--muted)}
.sg-feed-foot svg{flex:none;width:15px;height:15px;margin-top:1px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

@container sg-hero (max-width:519px){
  .sg-feed-sub{padding:10px 14px}
  .sg-list{padding:8px}
  .sg-item{grid-template-columns:32px minmax(0,1fr);column-gap:12px;row-gap:10px;padding:12px}
  .sg-item > .av{width:30px;height:30px;font-size:13px}
  .sg-th{width:32px;height:23px}
  .sg-item .sg-act{grid-column:2;justify-self:start}
  .sg-feed-foot{padding:12px 14px}
}

/* ---------- Two kinds of card: two lanes ---------- */
.sg-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:899px){
  .sg-lanes{grid-template-columns:minmax(0,1fr)}
}
.sg-lane{container:sg-lane / inline-size;display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px;border-radius:var(--radius);border:1px solid var(--line-2);box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.sg-lane.is-rep{background:linear-gradient(180deg,rgba(123,92,255,.14),rgba(123,92,255,0) 45%),var(--night-2)}
.sg-lane.is-ver{background:
  radial-gradient(70% 50% at 80% 0%,rgba(123,92,255,.16),transparent 70%),
  radial-gradient(rgba(183,168,255,.11) 1px,transparent 1.5px) 0 0 / 20px 20px,
  var(--night)}
.sg-lane-h{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 2px 4px}
.sg-lane-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(123,92,255,.2);box-shadow:inset 0 0 0 1px rgba(183,168,255,.32)}
.sg-lane-ic svg{width:21px;height:21px;fill:none;stroke:var(--lav);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sg-lane-t{display:grid;gap:3px;min-width:0}
.sg-lane-t b{font:600 18px/1.25 var(--display);letter-spacing:-.02em;color:var(--paper)}
.sg-lane-t span{font-size:14px;line-height:1.35;color:var(--muted)}
.sg-lane-t b .soon{font-size:13px;line-height:1.2;color:var(--lav)}
.sg-lane-n{display:grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:rgba(183,168,255,.1);font:600 16px/1 var(--display);color:var(--paper)}
.sg-rc,.sg-vc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.sg-rc li{flex:1;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;border-radius:16px;background:rgba(18,15,46,.86);box-shadow:inset 0 0 0 1px var(--line)}
.sg-rc-main{display:grid;gap:8px;min-width:0}
.sg-rc-main b,.sg-vc-main b{font:600 15px/1.3 var(--display);letter-spacing:-.01em;color:var(--paper)}
.sg-facts{display:flex;flex-wrap:wrap;gap:6px}
.sg-facts i{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;line-height:1;color:var(--paper);white-space:nowrap}
.sg-vc li{flex:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center;gap:16px;padding:12px;border-radius:16px;background:rgba(18,15,46,.9);box-shadow:inset 0 0 0 1px var(--line)}
.sg-vc-pg{min-width:0}
.sg-vc-main{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.sg-vc-deck{font-size:13px;line-height:1.3;color:var(--lav)}
.sg-vc-d{font-size:13px;line-height:1.45;color:var(--muted)}
.sg-vc-main .sg-act{margin-top:4px}

@container sg-lane (max-width:479px){
  .sg-lane-h{grid-template-columns:40px minmax(0,1fr)}
  .sg-lane-n{display:none}
  .sg-rc li{grid-template-columns:32px minmax(0,1fr);row-gap:12px;padding:12px}
  .sg-rc .sg-act{grid-column:2;justify-self:start}
  .sg-vc li{grid-template-columns:minmax(0,.75fr) minmax(0,1fr);align-items:start;gap:12px}
}

/* ---------- Card anatomy ---------- */
.sg-anat{container-name:sg-anat}
.sg-acard{overflow:hidden;border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2) 46%);border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
.sg-acard-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(123,92,255,.18),rgba(123,92,255,0) 70%)}
.sg-acard-who{display:grid;gap:3px;min-width:0}
.sg-acard-who b{font:600 18px/1.25 var(--display);letter-spacing:-.02em;color:var(--paper)}
.sg-acard-who span{font-size:13px;line-height:1.35;color:var(--muted)}
.sg-arows{list-style:none;margin:0;padding:6px 20px 14px;display:grid}
.sg-arows li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:12px 0}
.sg-arows li:not(:last-child)::before{content:"";position:absolute;left:13px;top:42px;bottom:-10px;width:2px;border-radius:2px;background:rgba(183,168,255,.32);transform-origin:50% 0}
.sg-an{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 1.5px var(--lav);font:600 13px/1 var(--display);color:var(--paper)}
.sg-arows li.is-you .sg-an{background:var(--violet);box-shadow:0 0 0 4px rgba(123,92,255,.25)}
.sg-ab{display:grid;gap:7px;min-width:0;padding-top:5px}
.sg-ab > .ui-k{margin:0}
.sg-ap{font-size:14px;line-height:1.5;color:var(--paper)}
.sg-ev{display:flex;flex-wrap:wrap;gap:6px}
.sg-ev i{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;background:rgba(183,168,255,.1);font-size:13px;line-height:1;color:var(--paper);white-space:nowrap}
.sg-lim{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;color:var(--muted)}
.sg-lim::before{content:"";flex:none;width:12px;height:12px;margin-top:3px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--lav);background:linear-gradient(90deg,transparent 45%,var(--lav) 45% 55%,transparent 55%)}
@container sg-anat (max-width:419px){
  .sg-acard-h{padding:14px 16px}
  .sg-arows{padding:4px 16px 12px}
}

/* ---------- Preview the change: the diff ---------- */
.sg-diff{container-name:sg-diff}
.sg-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sg-steps li{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 5px;border-radius:999px;background:rgba(183,168,255,.06);box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap}
.sg-steps i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(183,168,255,.16);font:600 13px/1 var(--display);color:var(--paper)}
.sg-steps svg{width:12px;height:12px;fill:none;stroke:var(--night);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sg-steps .is-done i{background:var(--lav)}
.sg-steps .is-on{background:rgba(123,92,255,.28);box-shadow:inset 0 0 0 1px rgba(183,168,255,.45);color:var(--paper)}
.sg-steps .is-on i{background:var(--violet);color:#fff}
.sg-diff-body{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) minmax(0,264px);gap:18px;align-items:start;padding:20px}
.sg-dcol{display:grid;gap:12px;min-width:0}
.sg-dlab{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.2;color:var(--muted)}
.sg-dtag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:rgba(183,168,255,.12);font:500 13px/1 var(--sans);color:var(--paper)}
.sg-dtag.is-draft{background:var(--violet);color:#fff}
.sg-dcol.is-draft .sg-sl{box-shadow:0 0 0 2px var(--lav),0 0 0 7px rgba(183,168,255,.14),0 22px 40px -22px rgba(0,0,0,.9)}
.sg-darrow{position:relative;align-self:center;width:30px;height:30px;margin-top:36px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 1px rgba(183,168,255,.4)}
.sg-darrow::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;background:var(--lav)}
.sg-darrow::after{content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-top:2px solid var(--lav);border-right:2px solid var(--lav);transform:rotate(45deg)}
.sg-dside{display:grid;gap:18px;min-width:0;padding:16px;border-radius:16px;background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.sg-dblock{display:grid;gap:10px;min-width:0}
.sg-dblock > .ui-k{margin:0}
.sg-chg,.sg-you{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sg-chg li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:13px;line-height:1.45;color:var(--paper)}
.sg-chg b{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(183,168,255,.12);font:600 14px/1 var(--display);color:var(--paper)}
.sg-chg .is-add b{background:var(--violet);color:#fff}
.sg-chg svg{width:13px;height:13px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sg-chg .is-flag span{color:var(--muted)}
.sg-you li{position:relative;padding-left:14px;font-size:13px;line-height:1.45;color:var(--paper)}
.sg-you li::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:linear-gradient(var(--violet),var(--lav))}
.sg-diff-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 20px 16px;border-top:1px solid var(--line)}
.sg-diff-foot p{flex:1 1 240px;display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45;color:var(--muted)}
.sg-diff-foot svg{flex:none;width:15px;height:15px;margin-top:1px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

@container sg-diff (max-width:899px){
  .sg-diff-body{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}
  .sg-dside{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@container sg-diff (max-width:559px){
  .sg-diff-body{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px}
  .sg-darrow{justify-self:center;margin-top:0;transform:rotate(90deg)}
  .sg-dside{grid-template-columns:minmax(0,1fr)}
  .sg-diff-foot{padding:14px}
}

/* ---------- What Decktrace will not guess ---------- */
.sg-nots{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.sg-nots li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.sg-nots li::before{content:"";grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;background:rgba(183,168,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B7A8FF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 5l6 6M11 5l-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}
.sg-nots h3{margin:2px 0 0;font:600 18px/1.3 var(--display);letter-spacing:-.015em;color:var(--paper)}
.sg-nots p{margin-top:4px;font-size:16px;line-height:1.55;color:var(--muted)}

.sg-thin{container-name:sg-thin}
.sg-canvas{display:grid;gap:14px;padding:20px;border-radius:var(--radius);border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9);background:
  radial-gradient(60% 55% at 30% 30%,rgba(123,92,255,.16),transparent 72%),
  radial-gradient(rgba(183,168,255,.12) 1px,transparent 1.5px) 0 0 / 20px 20px,
  var(--night)}
.sg-sum{display:grid;gap:12px;padding:16px;border-radius:18px;background:linear-gradient(180deg,var(--night-3),var(--night-2));box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -30px rgba(0,0,0,.9)}
.sg-sum > .ui-k{margin:0}
.sg-sum-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sg-sum-t{flex:1;display:grid;gap:3px;min-width:0}
.sg-sum-t b{font:600 15px/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
.sg-sum-t span{font-size:13px;line-height:1.3;color:var(--muted)}
.sg-sum-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sg-sum-rows li{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;grid-template-areas:"av main pages st";align-items:center;gap:8px 12px;padding:12px;border-radius:14px;background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.sg-sum-rows .av{grid-area:av}
.sg-sr-main{grid-area:main;display:grid;min-width:0}
.sg-sr-main b{font-weight:500;font-size:14px;line-height:1.3;color:var(--paper)}
.sg-sr-main span{font-size:13px;line-height:1.35;color:var(--muted)}
.sg-sr-pages{grid-area:pages;display:flex;gap:3px}
.sg-sr-pages i{width:12px;height:16px;border-radius:3px;background:var(--lav);opacity:.75}
.sg-sr-pages i.off{background:none;opacity:1;box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}
.sg-sr-st{grid-area:st;min-width:116px;font-size:13px;line-height:1.3;color:var(--paper);text-align:right;white-space:nowrap}
.sg-sum-note{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:16px;border:1.5px dashed rgba(183,168,255,.38);background:rgba(14,12,36,.55)}
.sg-sum-note p{font-size:14px;line-height:1.5;color:var(--muted)}
.sg-sum-note b{font-weight:500;color:var(--paper)}
.sg-sum-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 2px}
.sg-sum-facts span{margin-right:6px;font-size:13px;line-height:1.2;color:var(--lav)}
.sg-sum-facts i{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:1;color:var(--paper)}
@container sg-thin (max-width:519px){
  .sg-canvas{padding:14px}
  .sg-sum{padding:14px}
  .sg-sum-rows li{grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:"av main pages" "av main st"}
  .sg-sr-st{min-width:0}
}

/* ---------- Capability fragments (sized with --q from .cap-visual) ---------- */
.sg-cv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--q) * 12);padding:calc(var(--q) * 20)}

.sg-cv-mw{display:grid;width:calc(var(--q) * 286);border-radius:calc(var(--q) * 16);background:rgba(18,15,46,.94);box-shadow:inset 0 0 0 1px rgba(183,168,255,.32),0 calc(var(--q) * 20) calc(var(--q) * 40) calc(var(--q) * -24) rgba(0,0,0,.9);overflow:hidden}
.sg-cv-mrow{display:flex;align-items:center;gap:calc(var(--q) * 10);padding:calc(var(--q) * 11) calc(var(--q) * 14);border-bottom:1px solid var(--line);font-size:calc(var(--q) * 13);line-height:1.2;color:var(--muted);white-space:nowrap}
.sg-cv-mrow > span{flex:none;width:calc(var(--q) * 54)}
.sg-cv-mrow b{flex:1;min-width:0;font-weight:500;color:var(--paper)}
.sg-cv-mrow em{flex:none;padding:calc(var(--q) * 4) calc(var(--q) * 8);border-radius:99px;background:rgba(183,168,255,.16);font:500 calc(var(--q) * 12)/1 var(--sans);color:var(--lav)}
.sg-cv-mlines{display:grid;gap:calc(var(--q) * 8);padding:calc(var(--q) * 14)}
.sg-cv-mlines i{height:calc(var(--q) * 7);border-radius:99px;background:rgba(183,168,255,.2)}
.sg-cv-mlines i:nth-child(2){width:86%}
.sg-cv-mlines i:nth-child(3){width:58%}

.sg-cv-link{gap:calc(var(--q) * 16)}
.sg-cv-pill{display:inline-flex;align-items:center;gap:calc(var(--q) * 8);height:calc(var(--q) * 34);padding:0 calc(var(--q) * 15) 0 calc(var(--q) * 12);border-radius:999px;background:var(--violet);font:500 calc(var(--q) * 14)/1 var(--sans);color:#fff;white-space:nowrap}
.sg-cv-pill svg{width:calc(var(--q) * 16);height:calc(var(--q) * 16);fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sg-cv-pages{display:flex;gap:calc(var(--q) * 6)}
.sg-cv-pages i{width:calc(var(--q) * 30);height:calc(var(--q) * 20);border-radius:calc(var(--q) * 4);background:rgba(183,168,255,.3)}
.sg-cv-pages i.is-stop{background:none;box-shadow:inset 0 0 0 calc(var(--q) * 2) var(--lav)}
.sg-cv-pages i.is-to{background:var(--paper);box-shadow:0 0 0 calc(var(--q) * 2) var(--violet),0 0 0 calc(var(--q) * 6) rgba(123,92,255,.25)}
.sg-cv-cap{display:flex;justify-content:space-between;gap:calc(var(--q) * 12);width:calc(var(--q) * 246);font-size:calc(var(--q) * 12.5);line-height:1.2;color:var(--muted)}
.sg-cv-cap span:last-child{color:var(--paper)}

.sg-cv-lang{gap:calc(var(--q) * 10)}
.sg-cv-tl{display:grid;gap:calc(var(--q) * 8);width:calc(var(--q) * 286);padding:calc(var(--q) * 12) calc(var(--q) * 14);border-radius:calc(var(--q) * 14);background:rgba(18,15,46,.94);box-shadow:inset 0 0 0 1px rgba(183,168,255,.36)}
.sg-cv-tltop{display:flex;align-items:center;gap:calc(var(--q) * 8);font:500 calc(var(--q) * 11.5)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lav)}
.sg-cv-tltop em{padding:calc(var(--q) * 4) calc(var(--q) * 6);border-radius:calc(var(--q) * 6);background:var(--violet);font:600 calc(var(--q) * 11.5)/1 var(--display);letter-spacing:0;color:#fff}
.sg-cv-tltx{font-size:calc(var(--q) * 13.5);line-height:1.45;color:var(--paper)}
.sg-cv-appr{display:flex;gap:calc(var(--q) * 8)}
.sg-cv-ab{display:grid;place-items:center;height:calc(var(--q) * 30);padding:0 calc(var(--q) * 14);border-radius:99px;box-shadow:inset 0 0 0 1px rgba(183,168,255,.4);font:500 calc(var(--q) * 13)/1 var(--sans);color:var(--paper)}
.sg-cv-ab.is-pri{background:var(--violet);box-shadow:none;color:#fff}

.sg-cv-aside{gap:calc(var(--q) * 14)}
.sg-cv-card{display:grid;gap:calc(var(--q) * 4);width:calc(var(--q) * 270);padding:calc(var(--q) * 14) calc(var(--q) * 16);border-radius:calc(var(--q) * 14);background:rgba(18,15,46,.9);box-shadow:inset 0 0 0 1px var(--line-2);transform:rotate(-2deg)}
.sg-cv-card.is-dim{opacity:.6}
.sg-cv-card b{font:600 calc(var(--q) * 15)/1.3 var(--display);color:var(--paper)}
.sg-cv-card span{font-size:calc(var(--q) * 13);line-height:1.3;color:var(--muted)}
.sg-cv-kept{display:inline-flex;align-items:center;gap:calc(var(--q) * 8);height:calc(var(--q) * 32);padding:0 calc(var(--q) * 14) 0 calc(var(--q) * 10);border-radius:99px;background:rgba(183,168,255,.12);box-shadow:inset 0 0 0 1px rgba(183,168,255,.36);font:500 calc(var(--q) * 13)/1 var(--sans);color:var(--paper);white-space:nowrap}
.sg-cv-kept svg{width:calc(var(--q) * 15);height:calc(var(--q) * 15);fill:none;stroke:var(--lav);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sg-cv-ev{gap:calc(var(--q) * 14)}
.sg-cv-evt{font:600 calc(var(--q) * 17)/1.2 var(--display);letter-spacing:-.015em;color:var(--paper)}
.sg-cv-evp{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--q) * 8);width:calc(var(--q) * 290)}
.sg-cv-evp i{position:relative;display:inline-flex;align-items:center;height:calc(var(--q) * 30);padding:0 calc(var(--q) * 12);border-radius:calc(var(--q) * 9);background:rgba(18,15,46,.9);box-shadow:inset 0 0 0 1px rgba(183,168,255,.4);font-size:calc(var(--q) * 13);line-height:1;color:var(--paper);white-space:nowrap}
.sg-cv-evp i:first-child{background:rgba(123,92,255,.28)}
.sg-cv-ev::before{content:"";width:calc(var(--q) * 2);height:calc(var(--q) * 18);margin:calc(var(--q) * -6) 0;order:1;background:repeating-linear-gradient(180deg,var(--lav) 0 calc(var(--q) * 3),transparent calc(var(--q) * 3) calc(var(--q) * 6))}
.sg-cv-evp{order:2}

.sg-cv-decks{gap:calc(var(--q) * 8)}
.sg-cv-deck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--q) * 12);width:calc(var(--q) * 290);padding:calc(var(--q) * 10) calc(var(--q) * 12);border-radius:calc(var(--q) * 12);background:rgba(18,15,46,.88);box-shadow:inset 0 0 0 1px var(--line)}
.sg-cv-deck.is-on{box-shadow:inset 0 0 0 1px rgba(183,168,255,.48),0 0 0 calc(var(--q) * 4) rgba(123,92,255,.12)}
.sg-cv-deck:not(.is-on) .mini-deck{opacity:.7}
.sg-cv-dn{overflow:hidden;font:500 calc(var(--q) * 13)/1.2 var(--sans);color:var(--paper);white-space:nowrap;text-overflow:ellipsis}
.sg-cv-deck em{display:grid;place-items:center;min-width:calc(var(--q) * 24);height:calc(var(--q) * 24);padding:0 calc(var(--q) * 7);border-radius:99px;background:var(--violet);font:600 calc(var(--q) * 12.5)/1 var(--display);color:#fff}
.sg-cv-deck em.is-sum{background:rgba(183,168,255,.14);font:500 calc(var(--q) * 12)/1 var(--sans);color:var(--lav)}

/* ---------- Entrances: section visuals assemble when they reveal ---------- */
.js .sg-rc li,.js .sg-vc li{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .sg-rc li{transition-delay:calc(300ms + var(--k) * 180ms)}
.js .sg-vc li{transition-delay:calc(500ms + var(--k) * 220ms)}
.js .is-in .sg-rc li,.js .is-in .sg-vc li{opacity:1;transform:none}

.js .sg-arows li{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(300ms + var(--k) * 240ms)}
.js .sg-arows li:not(:last-child)::before{transform:scaleY(0);transition:transform .5s var(--ease);transition-delay:calc(550ms + var(--k) * 240ms)}
.js .is-in .sg-arows li{opacity:1;transform:none}
.js .is-in .sg-arows li:not(:last-child)::before{transform:none}

.js .sg-dcol.is-draft,.js .sg-darrow,.js .sg-dside{opacity:0;transition:opacity .6s var(--ease)}
.js .sg-darrow{transition-delay:.4s}
.js .sg-dcol.is-draft{transition-delay:.7s}
.js .sg-dside{transition-delay:1.1s}
.js .sg-sl-add{opacity:0;transition:opacity .6s var(--ease) 1.5s}
.js .is-in .sg-dcol.is-draft,.js .is-in .sg-darrow,.js .is-in .sg-dside,.js .is-in .sg-sl-add{opacity:1}

.js .sg-sum-rows li,.js .sg-sum-note,.js .sg-sum-facts{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .sg-sum-rows li:nth-child(1){transition-delay:.3s}
.js .sg-sum-rows li:nth-child(2){transition-delay:.5s}
.js .sg-sum-note{transition-delay:.9s}
.js .sg-sum-facts{transition-delay:1.2s}
.js .is-in .sg-sum-rows li,.js .is-in .sg-sum-note,.js .is-in .sg-sum-facts{opacity:1;transform:none}

/* ---------- Loops (paused off screen by site.js, static under reduced motion) ---------- */
@keyframes sg-halo{0%,100%{opacity:0}50%{opacity:1}}
@keyframes sg-turn{0%,70%,100%{transform:scale(1)}80%{transform:scale(.8)}90%{transform:scale(1.1)}}

@media (prefers-reduced-motion:no-preference){
  .sg-item{animation:intro .7s var(--ease) both;animation-delay:calc(520ms + var(--k) * 170ms)}
  .sg-item.is-new::after{animation:sg-halo 3s ease-in-out 1.6s infinite}
  .sg-feed .ui-title .sg-spk svg{animation:sg-turn 4.5s var(--ease) infinite}
}

@media (prefers-reduced-motion:reduce){
  .js .sg-rc li,.js .sg-vc li,.js .sg-arows li,.js .sg-sum-rows li,.js .sg-sum-note,.js .sg-sum-facts{opacity:1;transform:none}
  .js .sg-arows li:not(:last-child)::before{transform:none}
  .js .sg-dcol.is-draft,.js .sg-darrow,.js .sg-dside,.js .sg-sl-add{opacity:1}
}