/* ==========================================================================
   design.html: the Design studio in Tino (shipped in 1.0.2). Same build as deck.html.
   1 hero (light: the Design window in Vibe, twelve logo directions)   2 Tino in the file (dark)
   3 Vibe and Pro: one window that morphs (dark)   4 make it once (light cards)   5 carousel frames
   6 made in Design   7 features   8 close.
   Page classes are dn-. The windows are drawn here, sized in container units (cqw of the window),
   so a window is the same picture at any width. Every picture in them is a real render from the
   app's Inspiration designs (img/design, made with app/scripts/inspiration-designs/render.mjs).
   ========================================================================== */

body { background: var(--surface); }

/* ------------------------------------------------------------ Shared bits */
.dn-kicker { font-size: var(--t-19); line-height: 1.2; font-weight: var(--w-semibold); letter-spacing: -0.012em; color: var(--ink-3); }
.studio .dn-kicker { color: var(--studio-text-3); }
.dn-head > * + * { margin-top: 10px; }
.dn-head-center { text-align: center; margin-inline: auto; max-width: 820px; }
.dn-h3 { font-size: var(--t-24); line-height: var(--lh-24); letter-spacing: var(--tr-24); font-weight: var(--w-semibold); }
.dn-h4 { font-size: var(--t-19); line-height: 1.3; letter-spacing: -0.014em; font-weight: var(--w-semibold); }
.dn-p { margin-top: 8px; color: var(--ink-3); font-size: var(--t-17); line-height: var(--lh-17); text-wrap: pretty; }
.studio .dn-p { color: var(--studio-text-2); }
.dn-lead { max-width: 34em; margin-inline: auto; font-size: var(--t-19); line-height: var(--lh-19); letter-spacing: var(--tr-19); }
.dn-head .dn-lead { margin-top: 18px; }
.dn-cap { display: grid; justify-items: center; margin-top: 22px; font-size: var(--t-14); line-height: var(--lh-14); color: var(--ink-3); text-align: center; text-wrap: balance; }
.studio .dn-cap { color: var(--studio-text-3); }

/* ------------------------------------------------------------------- Hero */
.dn-hero { padding-top: clamp(48px, 6vw, 80px); padding-bottom: calc(var(--section-y) * 1.1); }
.dn-hero-copy { text-align: center; }
.dn-eyebrow { font-size: var(--t-24); line-height: 1.2; font-weight: var(--w-semibold); letter-spacing: -0.02em; color: var(--ink); }
.dn-h1 { margin-top: 14px; }
.dn-sub { max-width: 34em; margin: 22px auto 0; font-size: var(--t-19); line-height: var(--lh-19); letter-spacing: var(--tr-19); color: var(--ink-2); text-wrap: balance; }
.dn-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 34px; }
.dn-actions .btn-link { font-size: var(--t-17); }
.dn-free { margin-top: 16px; font-size: var(--t-14); color: var(--ink-3); }
.dn-hero-shot { width: 100%; max-width: calc(1280px + var(--gutter) * 2); margin: clamp(48px, 6vw, 80px) auto 0; padding-inline: var(--gutter); }
@media (max-width: 733px) {
  .dn-actions { flex-direction: column; gap: 18px; }
  .dn-eyebrow { font-size: 19px; }
  .dn-sub { margin-top: 16px; }
}

/* ============================================================ The window
   Drawn at 1200 wide: 1cqw = 12 px of the real window. */
.dn-win {
  --u: calc(100cqw / 1200);
  position: relative; container-type: inline-size;
  border-radius: 14px; overflow: hidden;
  background: #1C1C1C; color: var(--studio-text);
  font-family: var(--font);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.5), 0 40px 100px -20px rgba(17,17,20,0.36), 0 12px 32px rgba(17,17,20,0.14);
}
.studio .dn-win { box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 40px 90px rgba(0,0,0,0.5); }
.dn-win svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.dn-bar {
  display: flex; align-items: center; gap: calc(14 * var(--u));
  height: calc(52 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(16 * var(--u));
  font-size: calc(13 * var(--u)); white-space: nowrap;
}
.dn-lights { display: inline-flex; gap: calc(8 * var(--u)); }
.dn-lights i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #FF5F57; }
.dn-lights i:nth-child(2) { background: #FEBC2E; }
.dn-lights i:nth-child(3) { background: #28C840; }
.dn-seg { display: inline-flex; padding: calc(2 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255,255,255,0.075); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.10); }
.dn-seg span { padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); color: var(--studio-text-2); line-height: 1; }
.dn-seg .is-on { background: rgba(255,255,255,0.14); color: var(--studio-text); font-weight: var(--w-semibold); }
.dn-doc { display: inline-flex; align-items: baseline; gap: calc(8 * var(--u)); min-width: 0; overflow: hidden; }
.dn-doc b { font-weight: var(--w-semibold); letter-spacing: -0.01em; }
.dn-doc small { color: var(--studio-text-3); font-size: calc(12 * var(--u)); }
.dn-bar-end { margin-left: auto; display: inline-flex; gap: calc(8 * var(--u)); }
.dn-pill {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(13 * var(--u));
  border-radius: calc(16 * var(--u)); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.12);
}
.dn-pill.is-strong { background: rgba(255,255,255,0.12); font-weight: var(--w-medium); }
.dn-pill svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.dn-pill svg.is-dim { opacity: .4; }
.dn-tools {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u));
  border-radius: calc(16 * var(--u)); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.12);
}
.dn-tools svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); padding: calc(5 * var(--u)); border-radius: calc(8 * var(--u)); color: var(--studio-text-2); }
.dn-tools svg.is-on { background: rgba(255,255,255,0.14); color: var(--studio-text); }

.dn-body { position: relative; display: flex; height: calc(700 * var(--u)); border-top: 0.5px solid rgba(255,255,255,0.08); }
.dn-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; display: grid; place-items: center; }
.dn-zoom { position: absolute; right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255,255,255,0.08); font-size: calc(12 * var(--u)); font-weight: var(--w-medium); }

/* Tino's dot and label: the app's own (pink dot, quiet label of what it's doing) */
.dn-dot { position: absolute; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(219,52,242,0.22); }
.dn-label {
  position: absolute; white-space: nowrap; font-style: normal;
  padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u));
  background: rgba(30,30,32,0.94); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.16), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,0.35);
  font-size: calc(12 * var(--u)); line-height: 1.2; color: var(--studio-text-2);
}
.dn-label b { color: var(--studio-text); font-weight: var(--w-semibold); }

/* The Tino panel */
.dn-panel { flex: none; width: calc(340 * var(--u)); display: flex; flex-direction: column; background: var(--studio-panel); box-shadow: inset 1px 0 0 rgba(255,255,255,0.08); font-size: calc(13 * var(--u)); line-height: 1.4; }
.dn-panel-head { display: flex; align-items: baseline; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)); box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.08); }
.dn-wm { font-size: calc(26 * var(--u)); font-weight: var(--w-semibold); letter-spacing: -0.04em; line-height: 1; }
.dn-status { color: var(--studio-text-2); }
.dn-feed { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u)); padding: calc(18 * var(--u)); overflow: hidden; }
.dn-who { font-size: calc(11 * var(--u)); color: var(--studio-text-3); margin-top: calc(8 * var(--u)); }
.dn-who-tino { align-self: flex-start; color: var(--studio-text); font-weight: var(--w-semibold); }
.dn-you { max-width: 88%; padding: calc(9 * var(--u)) calc(13 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255,255,255,0.08); }
.dn-tino { align-self: flex-start; color: var(--studio-text); }
.dn-chg { align-self: stretch; display: flex; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255,255,255,0.04); box-shadow: inset calc(2 * var(--u)) 0 0 var(--pink); }
.dn-chg span { color: var(--studio-text-2); }
.dn-wait { font-size: calc(11 * var(--u)); color: var(--studio-text-3); }
.dn-ask { margin: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); color: var(--studio-text-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }

/* Hero canvas: the twelve directions, 4 by 3 */
.dn-logos { display: grid; grid-template-columns: repeat(4, calc(150 * var(--u))); gap: calc(34 * var(--u)) calc(22 * var(--u)); }
.dn-logos figure { position: relative; }
.dn-logos span { position: absolute; bottom: 100%; left: 0; padding-bottom: calc(4 * var(--u)); font-size: calc(10 * var(--u)); color: var(--studio-text-3); white-space: nowrap; }
.dn-logos img { display: block; width: 100%; height: auto; box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,0.35); }
.dn-logos .is-tino img { outline: calc(1.5 * var(--u)) solid var(--pink); outline-offset: 0; }
.dn-logos .is-tino .dn-dot { right: calc(-7 * var(--u)); top: calc(-7 * var(--u)); animation: dn-breathe 2.4s var(--ease) infinite; }
.dn-logos .is-tino span { visibility: hidden; }
.dn-logos .is-tino .dn-label { left: calc(-2 * var(--u)); bottom: calc(100% + 2 * var(--u)); top: auto; }   /* the label takes the frame name's place */
@keyframes dn-breathe { 50% { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(219,52,242,0.10); } }

/* Phones: the canvas alone, cropped to the first six directions */
@media (max-width: 733px) {
  .dn-hero-win .dn-panel, .dn-hero-win .dn-doc small, .dn-hero-win .dn-bar-end .dn-pill:not(.is-strong) { display: none; }
  .dn-hero-win .dn-body { height: calc(980 * var(--u)); }
  .dn-hero-win .dn-logos { grid-template-columns: repeat(3, calc(300 * var(--u))); gap: calc(60 * var(--u)) calc(40 * var(--u)); }
  .dn-hero-win .dn-logos figure:nth-child(-n+3), .dn-hero-win .dn-logos figure:nth-child(n+10) { display: none; }   /* 04 to 09: Tino's frame in the middle */
  .dn-hero-win .dn-logos span, .dn-hero-win .dn-label { font-size: calc(22 * var(--u)); }
  .dn-win { --u: calc(100cqw / 1000); }
  .dn-hero-win .dn-bar { font-size: calc(22 * var(--u)); height: calc(84 * var(--u)); }
  .dn-hero-win .dn-dot { width: calc(22 * var(--u)); height: calc(22 * var(--u)); right: calc(-11 * var(--u)); top: calc(-11 * var(--u)); }
}

/* ====================================================== 2. Tino in the file */
.dn-dark .studio-band + .studio-band .studio { padding-top: 0; }
@media (min-width: 734px) {
  .dn-dark .studio-band:first-child .studio { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .dn-dark .studio-band + .studio-band .studio { border-top-left-radius: 0; border-top-right-radius: 0; }
}
.dn-with-stage { max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; }
.dn-follow { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--pink), 0 0 0 1px rgba(255,255,255,0.10), 0 40px 90px rgba(0,0,0,0.5) !important; }
.dn-follow-pill {
  position: absolute; z-index: 3; left: 50%; top: calc(18 * var(--u)); transform: translateX(-50%);
  padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); white-space: nowrap;
  background: rgba(36,36,38,0.96); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.16);
  font-size: calc(13 * var(--u)); color: var(--studio-text-2);
}
.dn-follow-pill b { color: var(--studio-text); font-weight: var(--w-semibold); }
.dn-follow-pill small { margin-left: calc(8 * var(--u)); color: var(--studio-text-3); font-size: calc(12 * var(--u)); }
.dn-follow-canvas { display: grid; place-items: center; height: calc(640 * var(--u)); background: #1C1C1C; }
.dn-poster { position: relative; width: calc(390 * var(--u)); }
.dn-poster img { display: block; width: 100%; height: auto; box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.5); }
/* The walk: sun, headline, dates, placed in % of the poster (measured on the render). Labels change with each stop. */
.dn-walk { position: absolute; left: 68%; top: 21%; width: 0; height: 0; font-style: normal; animation: dn-walk 9s cubic-bezier(.32,.72,0,1) infinite; }
.dn-walk .dn-dot { left: calc(-7 * var(--u)); top: calc(-7 * var(--u)); }
.dn-walk .dn-label { left: calc(14 * var(--u)); top: calc(-30 * var(--u)); opacity: 0; animation: 9s step-end infinite; }
.dn-walk .dn-l2 { top: calc(-8 * var(--u)); }   /* beside the T, off the dotted rule */
.dn-walk .dn-l3 { top: calc(14 * var(--u)); left: calc(-60 * var(--u)); }   /* under the dot: the dates stay readable */
.dn-l1 { animation-name: dn-l1 !important; }
.dn-l2 { animation-name: dn-l2 !important; }
.dn-l3 { animation-name: dn-l3 !important; }
@keyframes dn-walk {
  0%, 30%   { left: 68%; top: 21%; }
  36%, 63%  { left: 77%; top: 54%; }
  69%, 96%  { left: 46%; top: 95.5%; }
  100%      { left: 68%; top: 21%; }
}
@keyframes dn-l1 { 0% { opacity: 1; } 31% { opacity: 0; } }
@keyframes dn-l2 { 0% { opacity: 0; } 36% { opacity: 1; } 64% { opacity: 0; } }
@keyframes dn-l3 { 0% { opacity: 0; } 69% { opacity: 1; } 97% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dn-walk { animation: none; left: 77%; top: 54%; }
  .dn-walk .dn-label { animation: none !important; }
  .dn-walk .dn-l2 { opacity: 1; }
  .dn-logos .is-tino .dn-dot { animation: none; }
}
.dn-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; }
@media (max-width: 733px) { .dn-three { grid-template-columns: 1fr; gap: 24px; } }

/* ========================================================== 3. Vibe and Pro */
.dn-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 200px; margin: 32px auto 0; padding: 3px; border-radius: 20px; background: rgba(255,255,255,0.08); }
.dn-switch button { position: relative; z-index: 1; height: 34px; border: 0; border-radius: 17px; background: none; color: var(--studio-text-2); font: inherit; font-size: 15px; font-weight: var(--w-medium); cursor: pointer; transition: color 300ms var(--ease); }
.dn-switch button[aria-selected="true"] { color: var(--studio-ground); }
.dn-switch button:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.dn-switch-plate { position: absolute; left: 3px; top: 3px; width: calc(50% - 3px); height: 34px; border-radius: 17px; background: var(--studio-text); transition: transform 420ms cubic-bezier(.32,.72,0,1); }
.dn-modes.is-pro .dn-switch-plate { transform: translateX(100%); }
.dn-modes-stage { max-width: 1280px; margin: 36px auto 0; }

.dn-vp .dn-body { height: calc(680 * var(--u)); }
.dn-vp .dn-pro-only, .dn-vp .dn-vibe-only { transition: opacity 420ms var(--ease); }
.dn-vp.is-vibe .dn-pro-only { opacity: 0; pointer-events: none; }
.dn-vp.is-pro .dn-vibe-only { opacity: 0; pointer-events: none; }
.dn-vp.is-vibe .dn-m-vibe, .dn-vp.is-pro .dn-m-pro { background: rgba(255,255,255,0.14); color: var(--studio-text); font-weight: var(--w-semibold); }
/* The side panels slide in and out; the canvas between them stays put */
.dn-layers, .dn-insp { position: absolute; top: 0; bottom: 0; width: calc(240 * var(--u)); background: var(--studio-panel); font-size: calc(12.5 * var(--u)); line-height: 1.3; transition: opacity 420ms var(--ease), transform 520ms cubic-bezier(.32,.72,0,1); }
.dn-layers { left: 0; box-shadow: inset -1px 0 0 rgba(255,255,255,0.08); }
.dn-insp { right: 0; padding: calc(16 * var(--u)) calc(16 * var(--u)); box-shadow: inset 1px 0 0 rgba(255,255,255,0.08); }
.dn-vp.is-vibe .dn-layers { transform: translateX(-30%); }
.dn-vp.is-vibe .dn-insp { transform: translateX(30%); }
.dn-vp .dn-panel { position: absolute; top: 0; bottom: 0; right: 0; transition: opacity 420ms var(--ease), transform 520ms cubic-bezier(.32,.72,0,1); }
.dn-vp.is-pro .dn-panel { transform: translateX(30%); }
.dn-vp-canvas { position: absolute; inset: 0 calc(340 * var(--u)) 0 0; transition: inset 520ms cubic-bezier(.32,.72,0,1); }
.dn-vp.is-pro .dn-vp-canvas { inset: 0 calc(240 * var(--u)); }
.dn-sec-h { padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)); font-weight: var(--w-semibold); color: var(--studio-text-2); }
.dn-insp .dn-sec-h { padding: 0 0 calc(8 * var(--u)); }
.dn-row { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(14 * var(--u)); color: var(--studio-text-2); }
.dn-row.is-on { color: var(--studio-text); }
.dn-row.is-sel { background: rgba(219,52,242,0.16); color: var(--studio-text); }
.dn-row small { color: var(--studio-text-3); font-size: inherit; }
.dn-lv1 { padding-left: calc(30 * var(--u)); }
.dn-li { width: calc(11 * var(--u)); height: calc(11 * var(--u)); flex: none; border: calc(1.2 * var(--u)) solid currentColor; opacity: .8; }
.dn-li-frame { border-style: dashed; }
.dn-li-text { border: 0; border-top: calc(1.4 * var(--u)) solid currentColor; height: calc(9 * var(--u)); background: linear-gradient(currentColor, currentColor) 50% 0 / calc(1.4 * var(--u)) 100% no-repeat; }
.dn-li-comp { transform: rotate(45deg) scale(.82); border-radius: calc(1 * var(--u)); }
.dn-li-bool { border-radius: 50%; box-shadow: calc(4 * var(--u)) 0 0 calc(-1 * var(--u)) currentColor; }
.dn-li-path { border-radius: 50% 50% 50% 0; }
.dn-li-group { border-radius: calc(2 * var(--u)); border-style: dotted; }
.dn-li-rect { border-radius: calc(1.5 * var(--u)); }
.dn-insp-k { color: var(--studio-text-3); }
.dn-insp-t { display: block; margin: calc(2 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(15 * var(--u)); font-weight: var(--w-semibold); }
.dn-isec { padding: calc(12 * var(--u)) 0; box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08); }
.dn-irow { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); }
.dn-dim { color: var(--studio-text-3); }
.dn-f { flex: 1; padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(255,255,255,0.06); font-variant-numeric: tabular-nums; }
.dn-f.is-wide { flex: 2.2; }
.dn-chip { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(5 * var(--u)); flex: none; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.3); }

/* The ad on the canvas: the note in Vibe; the moon's path in Pro */
.dn-ad { position: relative; width: calc(400 * var(--u)); }
.dn-ad img { display: block; width: 100%; height: auto; box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.5); }
.dn-note-pin { position: absolute; left: 80%; top: 19%; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: calc(-9 * var(--u)); border-radius: 50% 50% 50% 0; background: #FFFFFF; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,0.4); }
.dn-note { position: absolute; left: calc(80% + 16 * var(--u)); top: calc(19% - 9 * var(--u)); width: calc(150 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: #FFFFFF; color: #111114; font-size: calc(12 * var(--u)); line-height: 1.35; box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,0.4); }
.dn-note b { display: block; font-weight: var(--w-semibold); }
/* The moon, measured on the render: its box in the ad, then the selection and its path inside it */
.dn-moon { position: absolute; left: 69.6%; top: 10.8%; width: 17%; height: 15%; }
.dn-sel, .dn-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.dn-sel { box-shadow: 0 0 0 calc(1 * var(--u)) var(--pink-on-dark); }
.dn-sel i { position: absolute; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin: calc(-3.5 * var(--u)); background: #fff; box-shadow: 0 0 0 calc(1 * var(--u)) var(--pink-on-dark); }
.dn-sel i:nth-child(1) { left: 0; top: 0; } .dn-sel i:nth-child(2) { left: 100%; top: 0; } .dn-sel i:nth-child(3) { left: 0; top: 100%; } .dn-sel i:nth-child(4) { left: 100%; top: 100%; }
.dn-path { overflow: visible; }
.dn-path path { stroke: var(--pink-on-dark); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dn-path line { stroke: rgba(255,255,255,0.7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dn-pt, .dn-h { position: absolute; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: calc(-4 * var(--u)); }
.dn-pt { background: #fff; box-shadow: 0 0 0 calc(1 * var(--u)) var(--pink-on-dark); }
.dn-pt.is-on { background: var(--pink); }
.dn-h { border-radius: 50%; background: #1C1C1C; box-shadow: 0 0 0 calc(1 * var(--u)) rgba(255,255,255,0.8); }

.dn-modes-copy { display: grid; max-width: 34em; margin: 32px auto 0; text-align: center; }
.dn-mode-text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s 400ms; }
.dn-mode-text.is-on { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease); }

@media (max-width: 733px) {
  .dn-vp .dn-panel, .dn-vp .dn-layers { display: none; }
  .dn-vp-canvas, .dn-vp.is-pro .dn-vp-canvas { inset: 0; }
  .dn-vp.is-pro .dn-vp-canvas { right: calc(380 * var(--u)); }
  .dn-vp .dn-insp { width: calc(380 * var(--u)); font-size: calc(22 * var(--u)); }
  .dn-vp .dn-insp-t { font-size: calc(26 * var(--u)); }
  .dn-vp .dn-body { height: calc(1100 * var(--u)); }
  .dn-ad { width: calc(560 * var(--u)); }
  .dn-vp .dn-bar { height: calc(84 * var(--u)); font-size: calc(22 * var(--u)); }
  .dn-vp .dn-tools, .dn-vp .dn-doc, .dn-vp .dn-bar-end { display: none; }
  .dn-note { width: calc(230 * var(--u)); font-size: calc(20 * var(--u)); left: calc(80% - 250 * var(--u)); top: calc(19% + 24 * var(--u)); }   /* below-left of the pin: the moon stays in view */
  .dn-follow-canvas { height: calc(1100 * var(--u)); }
  .dn-poster { width: calc(640 * var(--u)); }
  .dn-follow-pill, .dn-label { font-size: calc(22 * var(--u)); }
}

/* ================================================================ 4. Cards */
.dn-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 56px); }
.dn-card { padding: 20px 20px 28px; border-radius: 24px; background: var(--surface-2); }
.dn-card .dn-h4 { margin-top: 22px; }
.dn-mini { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 0.5px rgba(17,17,20,0.08); overflow: hidden; }
.dn-btns { display: grid; gap: 10px; justify-items: center; }
.dn-b { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 20px; background: #F2C46D; color: #111114; font-size: 13px; font-weight: var(--w-semibold); box-shadow: 0 0 0 1px rgba(181,107,255,0.0); }
.dn-b + .dn-b { box-shadow: 0 0 0 1.5px rgba(124,94,255,0.38); }
.dn-b.is-main { box-shadow: 0 0 0 1.5px #7C5EFF; }
.dn-diamond { width: 8px; height: 8px; background: #7C5EFF; transform: rotate(45deg); border-radius: 1px; }
.dn-key { position: absolute; right: 14px; bottom: 12px; padding: 4px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; color: var(--ink-3); }
.dn-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 86%; }
.dn-board { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; aspect-ratio: 3 / 4; padding: 10px; border-radius: 6px; background: #F7F4EE; box-shadow: 0 1px 3px rgba(17,17,20,0.10); }
.dn-board b { flex-basis: 100%; font-size: 10px; font-weight: var(--w-semibold); color: #6A6E77; }
.dn-sw { width: 20px; height: 20px; border-radius: 50%; background: var(--c); }
.dn-aa { font-style: normal; font-size: 30px; line-height: 1; font-family: Georgia, serif; color: #1C1E22; margin-top: 8px; }
.dn-arch { width: 34px; height: 40px; margin: 10px auto 0; border: 7px solid #1C1E22; border-bottom: 0; border-radius: 20px 20px 0 0; }
.dn-upd { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 16px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 0.5px rgba(17,17,20,0.12), 0 8px 24px rgba(17,17,20,0.10); }
.dn-upd span { display: grid; font-size: 13px; }
.dn-upd b { font-weight: var(--w-semibold); }
.dn-upd small { color: var(--ink-3); font-size: 12px; }
.dn-upd em { font-style: normal; padding: 6px 12px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13px; font-weight: var(--w-medium); }
.dn-mini-update { align-content: center; gap: 14px; background: var(--surface-2); }
.dn-upd-undo { font-size: 12px; color: var(--ink-3); }
/* As Deck: two up on tablets, the third card across both; one column on phones */
@media (max-width: 1068px) { .dn-trio { grid-template-columns: 1fr 1fr; } .dn-trio > :last-child { grid-column: 1 / -1; } .dn-trio > :last-child .dn-mini { aspect-ratio: 3 / 1; } }
@media (max-width: 733px) { .dn-trio { grid-template-columns: 1fr; } .dn-trio > :last-child .dn-mini { aspect-ratio: 4 / 3; } }

/* ============================================================= 5. Carousel */
.dn-strip { margin-top: clamp(40px, 5vw, 64px); }
.dn-slices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; transition: gap 900ms cubic-bezier(.32,.72,0,1); }
.dn-slices img { display: block; width: 100%; height: auto; transition: border-radius 900ms var(--ease), box-shadow 900ms var(--ease); }
.dn-slices img:first-child { border-radius: 6px 0 0 6px; }
.dn-slices img:last-child { border-radius: 0 6px 6px 0; }
.dn-strip.is-split .dn-slices { gap: clamp(8px, 1.6vw, 20px); }
.dn-strip.is-split .dn-slices img { border-radius: 8px; box-shadow: 0 10px 30px rgba(17,17,20,0.12); }
.dn-strip .dn-cap > span { grid-area: 1 / 1; transition: opacity 500ms var(--ease); }
.dn-cap-b, .dn-strip.is-split .dn-cap-a { opacity: 0; }
.dn-strip.is-split .dn-cap-b { opacity: 1; }
@media (max-width: 733px) { .dn-slices { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dn-slices img { border-radius: 0 !important; } .dn-strip.is-split .dn-slices img { border-radius: 6px !important; } }

/* ================================================================ 6. Made */
/* Captions share a line per row: the poster and the ad are 3:4, the moodboard fills their height, the two wide pieces share one ratio */
.dn-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 56px); }
.dn-g { margin: 0; display: flex; flex-direction: column; }
.dn-g:not(.dn-g-wide) img { aspect-ratio: 3 / 4; object-fit: cover; }
.dn-g-wide:not(.dn-g-fill) img { aspect-ratio: 1.95; object-fit: cover; }
.dn-g-fill img { flex: 1 1 0; min-height: 0; object-fit: cover; }
.dn-g img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(17,17,20,0.08), 0 16px 40px -12px rgba(17,17,20,0.22); }
.dn-g-wide { grid-column: span 2; }
.dn-g figcaption { margin-top: 12px; font-size: var(--t-14); color: var(--ink-3); }
@media (max-width: 733px) { .dn-gallery { grid-template-columns: 1fr 1fr; } .dn-g-wide { grid-column: 1 / -1; } .dn-g-fill img { flex: none; aspect-ratio: 1.6; } }

/* ============================================================= 7. Features */
.dn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; }
.dn-grid h3 { font-size: var(--t-19); line-height: 1.3; letter-spacing: -0.014em; font-weight: var(--w-semibold); }
.dn-grid p { margin-top: 6px; color: var(--ink-3); font-size: var(--t-17); line-height: var(--lh-17); }
.dn-grid .btn-link { display: inline-block; margin-top: 8px; }
@media (max-width: 733px) { .dn-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ================================================================= 8. Close */
.dn-close-icon { margin-inline: auto; }
.dn-close h2 { margin-top: 24px; }