/* Design files & handoff: closing block of My approach, before About.
   Reuses the site's fonts, background, lavender text and #C24CF7 accent; cyan
   is kept for the technical annotations (selection, spacing, 9-slice guides),
   echoing the hero selection. The file view is an illustration (role="img"):
   nothing inside is focusable or clickable. Global rules, visible with and
   without the ?hero parameter. */

.handoff{--hf-line:#ffffff17;--hf-accent:#c24cf7;--hf-accent-text:#d68cff;
  position:relative;margin-top:104px;padding-top:72px;border-top:1px solid var(--hf-line);
  background:radial-gradient(48% 46% at 76% 40%,#8f2bd21c,transparent 72%)}
.handoff-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}

/* Intro */
.handoff-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;color:var(--muted);
  font:500 14px/1.3 var(--body);letter-spacing:.11em;text-transform:uppercase}
.handoff-eyebrow .icon{width:28px;height:28px;color:var(--hf-accent);stroke-width:1.6}
.handoff-title{font-size:clamp(36px,3.75vw,52px);line-height:1.08;letter-spacing:-.025em;color:var(--text)}
.handoff-title span{display:block;color:var(--hf-accent)}
.handoff-lede{max-width:520px;margin-top:22px;color:var(--muted);font-size:18px;line-height:1.7}
.handoff-points{display:grid;gap:28px;margin:40px 0 0;padding:0;list-style:none}
/* Icons sit in a soft, darker lilac aura; the text block drops so the title
   lines up with the centre of the circle. */
.handoff-points li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:20px;align-items:start}
.handoff-points .icon,.nine-slice-copy>.icon{box-sizing:content-box;padding:14px;border-radius:50%;color:var(--hf-accent);stroke-width:1.6;
  background:radial-gradient(circle,#a02ad040 0%,#a02ad01f 62%,#a02ad00d 100%);box-shadow:inset 0 0 0 1px #c24cf71c}
.handoff-points .icon{width:26px;height:26px}
.handoff-points li>div{padding-top:13px}
.handoff-points h4{margin:0 0 6px;font:400 23px/1.15 var(--display);color:var(--text)}
.handoff-points p{color:var(--muted);font-size:16px;line-height:1.6}

/* File view */
.file-preview{min-width:0;overflow:hidden;border:1px solid #ffffff1f;border-radius:16px;background:#11051d;
  box-shadow:0 40px 90px -50px #000c}
.fp-bar{display:flex;align-items:center;gap:16px 24px;padding:16px 22px;border-bottom:1px solid var(--hf-line)}
.fp-dots{display:flex;gap:9px;flex:none}
.fp-dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.fp-dots i:nth-child(2){background:#febc2e}
.fp-dots i:nth-child(3){background:#28c840}
.fp-path{margin-left:24px;color:var(--text);font:500 16px/1.3 var(--body)}
.fp-path span{margin-inline:4px;color:var(--subtle)}
.fp-note{color:var(--muted);font:400 14px/1.3 var(--body)}
.fp-bar .fp-note{margin-left:auto}
.fp-body{position:relative;display:grid;grid-template-columns:164px minmax(0,1fr)}
.fp-pages{padding:24px 10px;border-right:1px solid var(--hf-line)}
.fp-pages>.fp-label{display:block;margin:0 0 14px 12px;color:var(--text);font-size:16px}
/* Pages are real tabs (mouse, touch, keyboard). */
.fp-tabs{display:grid;gap:4px}
.fp-tab{display:block;width:100%;min-height:40px;padding:10px 12px;border:0;border-radius:8px;background:transparent;
  color:var(--muted);font:400 14px/1.3 var(--body);text-align:left;white-space:nowrap;cursor:pointer;
  transition:background-color .22s ease-out,color .22s ease-out}
.fp-tab:hover{background:#ffffff0a;color:var(--text)}
.fp-tab[aria-selected="true"]{background:#a02ad02e;color:var(--hf-accent-text)}
.fp-tab:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.fp-canvas{min-width:0;padding:24px 24px 26px;display:grid;container-type:inline-size}

/* Scenes share one grid cell, so the panel keeps the height of the tallest
   one and never jumps. Changes are a 220ms fade with a 6px rise. */
.fp-scene{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;translate:0 6px;
  transition:opacity .22s ease-out,translate .22s ease-out,visibility 0s linear .22s}
.fp-scene.is-active{opacity:1;visibility:visible;translate:0 0;transition:opacity .22s ease-out .06s,translate .22s ease-out .06s,visibility 0s}

/* Illustrated cursor: decorative, inside the panel, never catches clicks. */
.fp-cursor{position:absolute;top:0;left:0;z-index:3;width:21px;height:25px;pointer-events:none;
  translate:var(--cx,70%) var(--cy,80%);transition:translate .65s cubic-bezier(.45,0,.2,1),scale .14s ease-out}
.fp-cursor.is-pressing{scale:.88}

/* Bar control: pause / play the demo. */
.fp-toggle{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;margin-left:-8px;
  border:1px solid #ffffff2e;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;
  transition:background-color .19s ease-out,border-color .19s ease-out}
.fp-toggle::before{content:"";position:absolute;inset:-6px}
.fp-toggle:hover{background:#ffffff12;border-color:#c9a1e5b3}
.fp-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fp-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fp-toggle .i-play{display:none;fill:currentColor;stroke-width:1.5}
.fp-toggle.is-paused .i-pause{display:none}
.fp-toggle.is-paused .i-play{display:block}
.fp-heading{display:flex;align-items:center;gap:10px;color:var(--text);font:400 19px/1.2 var(--display)}
.fp-heading svg{width:20px;height:20px;fill:none;stroke:var(--hf-accent);stroke-width:2;stroke-linejoin:round}
.fp-label{color:var(--muted);font-size:14px;line-height:1.3}
.fp-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:14px 0 30px}
.fp-state{display:flex;flex-direction:column;gap:8px;min-width:0}
.fp-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 10px;border-radius:8px;
  background:var(--btn-primary-bg,#a02ad0);color:#fff;font:500 16px/1.2 var(--body);white-space:nowrap}
.fp-btn{transition:background-color .25s ease-out,color .25s ease-out}
.fp-btn.is-hover,.fp-btn.is-hovered{background:#e2b8ff;color:#1b0a2e}
.fp-btn.is-disabled{background:#ffffff1c;color:#b3a6c4}
.fp-component-head{display:flex;align-items:center;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-bottom:24px}

/* Selected component: the hero's selection language (1.5px cyan outline,
   square nodes) plus two spacing callouts. */
.fp-selection{position:relative;margin-left:12px;outline:1.5px solid var(--cyan);transition:outline-color .3s ease-out,box-shadow .3s ease-out}
/* Brief highlight: a slightly wider cyan edge, no glow. */
.fp-selection.is-highlighted{box-shadow:0 0 0 2px #36d5e859}
.fp-selection>i{position:absolute;width:9px;height:9px;background:var(--cyan)}
.fp-selection>i:nth-child(1){top:-4.5px;left:-4.5px}
.fp-selection>i:nth-child(2){top:-4.5px;right:-4.5px}
.fp-selection>i:nth-child(3){bottom:-4.5px;left:-4.5px}
.fp-selection>i:nth-child(4){bottom:-4.5px;right:-4.5px}
.fp-space{position:absolute;z-index:1;padding:2px 5px;border-radius:3px;background:var(--cyan);color:#10051e;font:600 14px/1.15 var(--body)}
.fp-space-top{top:0;left:50%;translate:-50% -50%}
.fp-space-left{top:50%;left:0;translate:-50% -50%}
.fp-card{display:flex;gap:18px;align-items:center;padding:16px 18px 16px 16px;background:#190a2b}
.fp-thumb{display:grid;place-items:center;flex:none;width:92px;height:92px;border-radius:10px;background:#2a1745}
.fp-thumb svg{width:52px;height:52px;fill:#8d63cf}
.fp-card-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.fp-card-title{color:var(--text);font:400 21px/1.15 var(--display)}
.fp-card-text{color:var(--muted);font-size:15px;line-height:1.55}
.fp-card-link{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--hf-accent-text);font:500 15px/1.3 var(--body)}
.fp-card-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fp-vars{display:flex;flex-direction:column;margin-top:10px}
.fp-var{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:16px;padding:11px 0;
  border-bottom:1px solid #ffffff10;color:var(--muted);font-size:15px;line-height:1.3}
.fp-var:last-child{border-bottom:0;padding-bottom:0}
.fp-var>span:last-child{color:var(--text);font-variant-numeric:tabular-nums}
.fp-var svg{width:24px;height:24px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fp-swatch{width:24px;height:24px;border-radius:50%;background:var(--hf-accent)}

/* Foundations: changing space/card from 16 to 24 pads the linked card; its
   outer size stays the same. */
.fp-var{border-radius:6px;transition:background-color .25s ease-out,box-shadow .25s ease-out}
.fp-var.is-editing{background:#a02ad024;box-shadow:-8px 0 0 #a02ad024,8px 0 0 #a02ad024}
.fp-var-value{display:grid;justify-items:end}
.fp-var-value>span{grid-area:1/1;transition:opacity .22s ease-out,translate .22s ease-out}
.fp-val-b{opacity:0;translate:0 6px}
.is-24 .fp-val-a{opacity:0;translate:0 -6px}
.is-24 .fp-val-b{opacity:1;translate:0 0}
.fp-linked{margin-top:20px}
.fp-linked-label{display:block;margin-bottom:10px;color:var(--muted);font-size:14px}
.fp-var-card{--pad:16px;position:relative;height:118px;border-radius:14px;background:#190a2b;outline:1px solid #ffffff17;overflow:hidden}
.fp-var-card.is-24{--pad:24px}
.fp-pad-guide{position:absolute;inset:0;border:var(--pad) solid #36d5e824;border-radius:14px;transition:border-width .5s cubic-bezier(.33,1,.68,1);pointer-events:none}
.fp-var-card-inner{position:absolute;inset:var(--pad);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 4px;
  outline:1px dashed #36d5e866;transition:inset .5s cubic-bezier(.33,1,.68,1)}

/* Screens: the frame narrows and the card reflows from a row to a column via
   a container query; text keeps its size. */
.fp-sub{display:block;margin-top:4px;color:var(--muted);font-size:14px}
.fp-flex-stage{margin-top:18px}
.fp-flex-frame{position:relative;width:var(--fw,100%);max-width:100%;container-type:inline-size;outline:1.5px solid var(--cyan);
  transition:width 1.2s cubic-bezier(.45,0,.25,1)}
.fp-flex-handle{position:absolute;top:50%;right:-5px;z-index:1;width:9px;height:9px;translate:0 -50%;background:var(--cyan)}
.fp-flex-card{display:flex;gap:16px;align-items:center;padding:16px;background:#190a2b}
.fp-flex-card .fp-thumb{width:84px;height:84px}
.fp-flex-card .fp-thumb svg{width:44px;height:44px}
@container (max-width:300px){
  .fp-flex-card{flex-direction:column;align-items:flex-start}
  .fp-flex-card .fp-thumb{width:100%;height:72px}
}

/* Handoff: a simplified card with numbered notes and the file structure. */
.fp-handoff{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:18px}
.fp-spec-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:14px;background:#190a2b;outline:1px solid #ffffff17}
.fp-spec-card .fp-thumb{position:relative;width:100%;height:70px}
.fp-spec-card .fp-thumb svg{width:40px;height:40px}
.fp-spec-btn{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:8px;
  background:var(--btn-primary-bg,#a02ad0);color:#fff;font:500 15px/1.2 var(--body)}
.fp-mark{position:absolute;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cyan);color:#10051e;
  font:600 14px/1 var(--body)}
.fp-thumb>.fp-mark,.fp-spec-btn>.fp-mark{top:-8px;right:-8px}
.fp-mark-pad{top:4px;left:4px}
[data-region]{transition:box-shadow .25s ease-out}
[data-region].is-flagged{box-shadow:0 0 0 2px var(--cyan)}
.fp-spec-card[data-region].is-flagged{box-shadow:inset 0 0 0 24px #36d5e81f,0 0 0 1.5px var(--cyan)}
.fp-handoff-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.fp-notes,.fp-layers{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.fp-notes li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;color:var(--text);font-size:14px;line-height:1.3;
  transition:background-color .25s ease-out}
.fp-notes li.is-pointed{background:#36d5e81a}
.fp-notes b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--cyan);color:#10051e;font:600 14px/1 var(--body)}
.fp-layers{padding-top:14px;border-top:1px solid var(--hf-line)}
.fp-layers li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.fp-layers svg{width:18px;height:18px;fill:none;stroke:var(--hf-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@container (max-width:380px){
  .fp-handoff{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .fp-scene,.fp-scene.is-active,.fp-cursor,.fp-btn,.fp-var,.fp-var-value>span,.fp-pad-guide,.fp-var-card-inner,.fp-flex-frame,[data-region],.fp-notes li,.fp-tab{transition:none}
}

/* Game UI: the same SVG asset drawn twice through border-image, a real
   9-slice. Corners (32px) never scale; only edges and centre stretch. */
.nine-slice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center;
  margin-top:72px;padding-top:44px;border-top:1px solid var(--hf-line)}
.nine-slice-copy{display:flex;gap:22px;align-items:flex-start}
.nine-slice-copy>.icon{width:28px;height:28px}
.nine-slice-copy>div{padding-top:5px}
.nine-slice-copy .handoff-eyebrow{margin-bottom:10px}
.nine-slice-copy h4{margin:0 0 8px;font:400 clamp(26px,2.3vw,31px)/1.12 var(--display);color:var(--text)}
.nine-slice-copy p:last-child{color:var(--muted);font-size:17px;line-height:1.6}
.nine-slice-copy .nowrap{white-space:nowrap}
.nine-slice-demo{display:flex;align-items:flex-start;gap:26px;min-width:0}
.slice-sample{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;min-width:0}
.slice-sample.is-resized{flex:1}
.slice-frame{position:relative;display:block;width:100%}
.slice-panel{display:block;box-sizing:border-box;height:96px;border:32px solid transparent;
  border-image:url("/assets/nine-slice-panel.svg") 32 fill / 32px stretch}
.is-original .slice-frame,.is-original .slice-panel{width:168px}
.slice-frame i{position:absolute;border:0 dashed var(--cyan);opacity:.8;pointer-events:none}
.slice-frame .g-v1,.slice-frame .g-v2{top:-10px;bottom:-10px;border-left-width:1px}
.slice-frame .g-v1{left:32px}
.slice-frame .g-v2{right:32px}
.slice-frame .g-h1,.slice-frame .g-h2{left:-10px;right:-10px;border-top-width:1px}
.slice-frame .g-h1{top:32px}
.slice-frame .g-h2{bottom:32px}
.slice-sample figcaption{color:var(--muted);font-size:14px}
.slice-arrow{flex:none;width:28px;height:28px;margin-top:34px;fill:none;stroke:var(--subtle);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Narrower screens: one column, in reading order (intro, points, file view,
   game UI). */
@media(max-width:1099px){
  .handoff-main,.nine-slice{grid-template-columns:1fr;gap:48px}
  .handoff-intro{max-width:640px}
  .file-preview{width:100%;max-width:820px}
  .nine-slice{gap:32px}
}
@media(max-width:800px){
  .handoff{margin-top:72px;padding-top:56px;background:radial-gradient(70% 30% at 50% 58%,#8f2bd21a,transparent 72%)}
  .handoff-eyebrow{gap:12px;margin-bottom:18px;letter-spacing:.09em}
  .handoff-eyebrow .icon{width:24px;height:24px}
  .handoff-lede{font-size:17px}
  .handoff-points{gap:24px;margin-top:32px}
  .handoff-points li{grid-template-columns:46px minmax(0,1fr);gap:16px}
  .handoff-points .icon{width:22px;height:22px;padding:12px}
  .handoff-points li>div{padding-top:11px}
  .handoff-points h4{font-size:21px}

  .fp-bar{flex-wrap:wrap;gap:10px;padding:14px 16px}
  .fp-dots{gap:7px}
  .fp-dots i{width:10px;height:10px}
  .fp-path{margin-left:8px;font-size:15px}
  .fp-bar .fp-note{order:3;flex-basis:100%;margin-left:0}
  .fp-toggle{order:2;margin-left:auto}
  .fp-body{grid-template-columns:1fr}
  .fp-pages{padding:14px 16px;border-right:0;border-bottom:1px solid var(--hf-line)}
  .fp-pages>.fp-label{display:none}
  .fp-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .fp-tab{min-height:44px;padding:8px 12px}
  .fp-canvas{padding:20px 16px 22px}
  .fp-buttons{gap:10px;margin-bottom:26px}
  .fp-btn{min-height:44px;padding:0 6px;font-size:15px}
  .fp-card{gap:14px;align-items:flex-start;padding:16px 14px 16px 16px}
  .fp-thumb{width:64px;height:64px;border-radius:8px}
  .fp-thumb svg{width:34px;height:34px}
  .fp-card-title{font-size:19px}
  .fp-var{gap:12px}

  .nine-slice{margin-top:56px;padding-top:36px}
  .nine-slice-copy{gap:16px}
  .nine-slice-copy>.icon{width:22px;height:22px;padding:12px}
  .nine-slice-copy>div{padding-top:2px}
  .nine-slice-copy p:last-child{font-size:16px}
  .nine-slice-demo{flex-direction:column;align-items:center;gap:18px;padding-inline:10px}
  .slice-sample.is-resized{align-self:stretch}
  .slice-arrow{margin:0;rotate:90deg}
}
@media(max-width:420px){
  .fp-btn{padding:0 4px;font-size:14px}
  .fp-card{flex-direction:column;gap:12px}
  .fp-thumb{width:56px;height:56px}
  .fp-space-left{top:44px}
  .fp-thumb svg{width:30px;height:30px}
}

/* Game UI as a showcase card: its own surface with a
   live demo inside, so it reads as a different kind of block from the list
   above. The panel stretches by itself while on screen; the slider lets
   people stretch it too (and stops the automatic loop). */
.nine-slice.ns-card{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;margin-top:88px;padding:40px;
  border:1px solid #c24cf733;border-radius:22px;
  background:radial-gradient(70% 90% at 100% 0%,#8f2bd22e,transparent 60%),radial-gradient(50% 70% at 0% 100%,#36d5e80d,transparent 70%),linear-gradient(160deg,#1f0b36,#140726 70%)}
.ns-card .handoff-eyebrow{margin-bottom:16px}
/* Game icon: no background, in the brand cyan, a bit larger than the label and
   optically centred with it (the pad glyph sits low in its 24px box). */
.ns-card .handoff-eyebrow{gap:12px}
.ns-card .handoff-eyebrow .icon{box-sizing:content-box;flex:none;width:26px;height:26px;padding:0;background:none;box-shadow:none;
  color:var(--cyan);stroke-width:1.7;translate:0 -2px}
.ns-copy h4{margin:0 0 14px;font:400 clamp(36px,3.7vw,54px)/1.02 var(--display);color:var(--text)}
.ns-copy h4 .nowrap{white-space:nowrap}
.ns-copy>p:not(.handoff-eyebrow){color:var(--muted);font-size:18px;line-height:1.6}
/* The slider lives under the copy: it fills that column and reads as "try it". */
.ns-copy .ns-control{margin-top:32px;padding:0}
.ns-demo{display:flex;flex-direction:column;gap:16px;min-width:0}
.ns-stage{display:flex;flex-direction:column;gap:28px;padding:30px 30px 22px;border:1px solid #ffffff14;border-radius:16px;
  background:radial-gradient(#ffffff12 1px,transparent 1.2px) 0 0/18px 18px,#0e0419}
.ns-row{display:flex;align-items:flex-start;gap:24px;min-width:0}
.ns-row .slice-sample{align-items:flex-start;gap:12px}
.ns-row-resized .slice-sample{flex:1;min-width:0}
.ns-row-resized .slice-frame,.ns-row-resized .slice-panel{width:var(--ns-w,100%);max-width:100%}
.ns-note{display:flex;align-items:center;gap:8px;margin-top:36px;color:var(--muted);font-size:14px}
.ns-note b{padding:2px 6px;border-radius:3px;background:var(--cyan);color:#10051e;font:600 14px/1.15 var(--body)}
.ns-size{position:absolute;top:-30px;right:0;padding:2px 6px;border-radius:3px;background:var(--cyan);color:#10051e;font:600 14px/1.15 var(--body);font-variant-numeric:tabular-nums}
.ns-control{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:0 4px}
.ns-control label,.ns-output{color:var(--muted);font-size:14px}
.ns-output{min-width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.ns-control input{width:100%;height:44px;margin:0;background:transparent;accent-color:#c24cf7;cursor:pointer}
.ns-control input:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
@media(max-width:1099px){.nine-slice.ns-card{grid-template-columns:1fr;gap:28px}}
@media(max-width:800px){
  .nine-slice.ns-card{margin-top:56px;padding:24px 18px}
  .ns-stage{padding:28px 16px 18px;gap:44px}
  .ns-row-original{flex-direction:column;gap:10px}
  .ns-note{margin-top:0}
  .ns-card .nine-slice-demo,.ns-card .slice-arrow{display:none}
}

/* Real screen recording in place of the animated demo: same window frame
   (dots, path, note, pause button), the video fills the body edge to edge. */
.file-video{margin:0}
.fp-video{display:block;width:100%;height:auto;aspect-ratio:1280/776;background:#0b0412}

/* Wider stage for the Figma block on large screens: it keeps the page's left
   edge (text aligned with every other section) and grows to the right, up to
   120px past the column and never closer than 40px to the viewport edge, so
   the recording reads bigger. The Game UI card takes the same width. */
@media(min-width:1100px){
  .handoff-main,.nine-slice.ns-card{width:calc(100% + min(120px,(100vw - 100%) / 2 - 40px));margin-left:0;margin-right:0}
  .handoff-main{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px}
  .file-video{max-width:none}
}

/* Real asset: Cami's 9-slice Play button. The background (nine image pieces)
   stretches through border-image with the slices taken from the file itself
   (corners 61.68 x 78.67 of a 559 x 164 asset); the "PLAY" label is a
   separate image centred on top, so it never stretches either. Drawn at 50%
   scale (40% on phones); guides sit on the real slice lines. */
.ns-card{--s:.5}
.ns-card .slice-panel{height:calc(164px * var(--s));border-style:solid;border-color:transparent;
  border-width:calc(78.6681px * var(--s)) calc(61.6829px * var(--s));
  border-image:url("/assets/play-button-9slice.svg") 78.6681 61.6829 fill / calc(78.6681px * var(--s)) calc(61.6829px * var(--s)) stretch}
.ns-card .is-original .slice-frame,.ns-card .is-original .slice-panel{width:calc(559px * var(--s))}
.ns-card .slice-frame .g-v1{left:calc(61.6829px * var(--s))}
.ns-card .slice-frame .g-v2{right:calc(61.6829px * var(--s))}
.ns-card .slice-frame .g-h1{top:calc(78.6681px * var(--s))}
.ns-card .slice-frame .g-h2{bottom:calc(78.6681px * var(--s))}
.ns-card .slice-frame i{z-index:2}
.slice-label{position:absolute;left:50%;top:50%;z-index:1;width:auto;height:calc(58px * var(--s));translate:-50% -50%;pointer-events:none}
.ns-card .ns-note{gap:10px}
.ns-card .ns-note i{width:8px;height:8px;background:var(--cyan);flex:none}
@media(max-width:800px){.ns-card{--s:.4}}