/* COPIED FROM mockups/brand-v3.html, word for word: tokens, shared pieces, the hero and the app. */
/* Violet, lavender and lime. Lavender is the quiet colour: the unlit dots, the tints, the paper. Lime is the light. */
:root{
  /* Field: the brand's ground. On paper, the main action and the selected state. */
  --field-50:#F3EFFF; --field-100:#E7DFFF; --field-200:#D0C3FF; --field-300:#B09CFF; --field-400:#8A66FA;
  --field-500:#6A2EF5; --field-600:#5A22DE; --field-700:#4818B8;
  /* Light: it means "found" and nothing else. */
  --light-500:#C6FA4F; --light-400:#D5FC7A;
  /* Ink: all text on paper, and ordinary links. */
  --ink-900:#1B1533; --ink-700:#372F5C; --ink-500:#5E5782; --ink-400:#827BA6; --ink-300:#B8B1D6;
  /* Paper: where reading happens. */
  --paper-0:#FFFFFF; --paper-50:#F6F3FF; --paper-100:#ECE6FF; --line:#E1DAF8;
  /* On the field */
  --on-field:#FFFFFF; --on-field-2:#E9E3FF; --field-tint:rgba(255,255,255,.13); --field-line:rgba(255,255,255,.24);
  /* Quiet: the unlit dots and the tinted sections. Action: the one solid button on paper. */
  --mark-quiet:#CDC2FF; --paper-tint:#E7DFFF; --tint-line:#CFC3F5; --action:#6A2EF5; --action-hover:#5A22DE;
}
/* Plum: the same family at night. The field goes dark, and the text on it, the quiet colour and the ink steps shift with it. Violet stays the action colour. Set data-pal="plum" on a block. */
[data-pal="plum"]{
  --field-50:#F1EDFB; --field-100:#E4DDF6; --field-200:#CBC0EC; --field-300:#A397D0; --field-400:#6C6196;
  --field-500:#1F1838; --field-600:#352B5C; --field-700:#120D24;
  --light-500:#C6FA4F; --light-400:#D5FC7A;
  --ink-900:#1F1838; --ink-700:#3A325E; --ink-500:#615A85; --ink-400:#857EA8; --ink-300:#BAB3D8;
  --paper-0:#FFFFFF; --paper-50:#F6F3FF; --paper-100:#ECE6FF; --line:#E1DAF8;
  --on-field:#F6F3FF; --on-field-2:#CFC5F7; --field-tint:rgba(205,194,255,.14); --field-line:rgba(205,194,255,.26);
  --mark-quiet:#B7A8FF; --paper-tint:#E7DFFF; --tint-line:#CFC3F5; --action:#6A2EF5; --action-hover:#5A22DE;
}
:root{
  /* Type: two voices. Alan Sans speaks for us. Martian Mono speaks for the machine. */
  --sans:"Alan Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --display:"Alan Sans",ui-sans-serif,system-ui,sans-serif;
  --d-weight:800; --d-track:-.02em; --d-word:.04em; --d-lead:.9; --d-scale:.98; --d-case:none; --d-stretch:100%;
  --t-weight:700; --t-track:-.012em;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-quick:160ms; --t-base:320ms; --t-slow:900ms;

  --shadow-sheet:0 1px 0 rgba(10,15,51,.04),0 14px 34px -14px rgba(10,15,51,.22);
  --shadow-window:0 50px 110px -34px rgba(3,7,44,.62),0 0 0 1px rgba(255,255,255,.24);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-50);color:var(--ink-900);font:400 15px/1.5 var(--sans);word-spacing:var(--b-word,0);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.nb{white-space:nowrap}
::selection{background:var(--light-500);color:var(--ink-900)}
.mono{font-family:var(--mono)}

/* ---------- shared pieces ---------- */
/* the logo. Vector paths, no font. At rest: eight quiet dots, one lit, and a lime dot on the i.
   --s0 and --h0 scale a dot back to the equal size the scan starts from */
.brand{display:inline-flex;align-items:center;line-height:1;flex:none}
.lg{display:block;overflow:visible;flex:none;--quiet:var(--mark-quiet);--light:var(--light-500);--on:var(--on-field)}
.lg .d{color:var(--quiet)}
.lg .hit{color:var(--light)}
.lg .q,.lg .lit,.lg .ch{fill:currentColor}
.lg .tt{fill:var(--light-500)}
.lg--tilelock .tt,.lg--paper .tt{fill:var(--action)}
.lg .tl{fill:var(--field-500)}
.lg .d,.lg .hit,.lg .q,.lg .lit{transform-box:fill-box;transform-origin:center}
/* only the mark moves, and it loops always. Timings are concept 02 of the round 2 board: a 5s loop,
   one dot checked every 200ms in reading order, then the find lights and the rest step back */
@keyframes flash{0%{fill:var(--light);scale:1.3}4%,100%{fill:currentColor;scale:1}}
@keyframes settle{0%,38%{color:var(--on);transform:scale(var(--s0))}46%,90%{color:var(--quiet);transform:scale(1)}97%,100%{color:var(--on);transform:scale(var(--s0))}}
@keyframes found{0%,20%{color:var(--on);transform:translateX(var(--hx)) scale(var(--h0))}21%,24%{color:var(--light);transform:translateX(var(--hx)) scale(calc(var(--h0)*1.3))}25%,38%{color:var(--on);transform:translateX(var(--hx)) scale(var(--h0));animation-timing-function:var(--ease-spring)}47%,90%{color:var(--light);transform:translateX(0) scale(1)}97%,100%{color:var(--on);transform:translateX(var(--hx)) scale(var(--h0))}}
.is-loop .q{animation:flash 5s linear infinite;animation-delay:calc(var(--i)*.2s)}
.is-loop .d{animation:settle 5s infinite}
.is-loop .hit{animation:found 5s infinite}
body.still .is-loop .q,body.still .is-loop .d,body.still .is-loop .hit{animation:none!important}

.light{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--light-500);margin-left:.045em;position:relative}
.light::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ring 4.5s 2.4s infinite}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:var(--r-full);border:0;font:600 15px/1 var(--sans);letter-spacing:-.012em;white-space:nowrap;cursor:pointer;transition:transform var(--t-quick) var(--ease-out),background var(--t-quick),box-shadow var(--t-quick)}
.btn svg{width:1em;height:1em;flex:none}
.btn:active{transform:translateY(1px)}
.btn-light{background:var(--light-500);color:var(--ink-900)}
.btn-light:hover{background:var(--light-400);transform:translateY(-1px)}
.btn-onfield{background:var(--field-tint);color:var(--on-field);box-shadow:inset 0 0 0 1px var(--field-line)}
.btn-onfield:hover{background:color-mix(in srgb,var(--on-field) 20%,transparent)}
.btn-plain-onfield{color:var(--on-field);padding:0 10px}
.btn-plain-onfield:hover svg{transform:translateX(3px)}
.btn-plain-onfield svg{transition:transform var(--t-quick) var(--ease-out)}
.btn-field{background:var(--action);color:#FFFFFF}
.btn-field:hover{background:var(--action-hover)}
.btn-line{background:var(--paper-0);color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--line)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink-300)}
.btn-text{color:var(--ink-900);padding:0 8px;font-weight:550;gap:5px}
.btn-text svg{width:.8em;height:.8em}
.btn-text:hover{text-decoration:underline;text-underline-offset:3px}
.btn-lg{height:58px;padding:0 30px;font-size:17px}
.btn-sm{height:36px;padding:0 15px;font-size:13.5px}
.btn-xl{height:52px;padding:0 24px;font-size:16px}

.chip-light{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--r-full);background:var(--light-500);color:var(--ink-900);font:600 12.5px/1 var(--sans);letter-spacing:-.005em}
.chip-line{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-700);font:500 11.5px/1 var(--sans)}

.status{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--mono);letter-spacing:.03em;color:var(--on-field-2);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--light-500);position:relative;flex:none}
.status i::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ring-s 2.4s infinite}

@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--light-500) 55%,transparent)}55%,100%{box-shadow:0 0 0 .2em color-mix(in srgb,var(--light-500) 0%,transparent)}}
@keyframes ring-s{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--light-500) 60%,transparent)}70%,100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--light-500) 0%,transparent)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lineUp{from{transform:translateY(112%)}to{transform:none}}
@keyframes litOn{0%{transform:scale(0)}62%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes stageUp{from{opacity:0;transform:translateY(110px)}to{opacity:1;transform:none}}

/* intro choreography: runs when a view gets .is-in */
.is-in .a-rise{animation:rise var(--t-slow) var(--ease-out) both;animation-delay:calc(var(--d,0)*1ms)}
.is-in .a-fade{animation:fade 700ms ease both;animation-delay:calc(var(--d,0)*1ms)}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln>span{display:inline-block}
.is-in .ln>span{animation:lineUp 1000ms var(--ease-out) both;animation-delay:calc(var(--d,0)*1ms)}
.ln.done{overflow:visible}
.is-in .a-lit{animation:litOn 620ms var(--ease-spring) both;animation-delay:calc(var(--d,0)*1ms)}
body.still *,body.still *::before,body.still *::after{animation-delay:-30s!important;animation-play-state:paused!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ============================================================
   LANDING HERO
   ============================================================ */
.lp{background:var(--field-500);color:var(--on-field);position:relative;container-type:inline-size}
.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px;padding:0 clamp(20px,4cqw,56px);max-width:1480px;margin:0 auto}
.lp-nav .brand{font-size:25px}
.lp-links{display:flex;gap:34px;font:500 15px/1 var(--sans);color:var(--on-field-2)}
.lp-links a:hover{color:var(--on-field)}
.lp-hero{text-align:center;padding:clamp(20px,3.2vh,36px) 20px 0}
.pill{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 15px 0 13px;border-radius:var(--r-full);background:var(--field-tint);box-shadow:inset 0 0 0 1px var(--field-line)}
.pill .status{color:var(--on-field);text-transform:uppercase;letter-spacing:.07em;font-size:11.5px}
.pill b{font-weight:500;display:inline-block;white-space:nowrap;clip-path:inset(-8px 0);transition:opacity .25s,transform .25s var(--ease-out),width .34s var(--ease-out)}
.pill b.out{opacity:0;transform:translateY(-5px)}
.display{margin:22px 0 0;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(clamp(52px,10.6cqw,152px)*var(--d-scale));line-height:var(--d-lead)}
.lit-word{color:var(--light-500);font-weight:inherit}
.display .ln>span{white-space:nowrap}
.lp-sub{margin:clamp(18px,2.1cqw,26px) auto 0;max-width:min(calc(100cqw - 40px),37em);text-wrap:balance;font:400 clamp(16px,1.5cqw,21px)/1.42 var(--sans);letter-spacing:-.012em;color:var(--on-field-2)}
.lp-cta{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:clamp(20px,2.3cqw,28px)}
.lp-price{margin:15px auto 0;max-width:calc(100cqw - 40px);text-wrap:balance;line-height:1.5;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--on-field-2)}
.lp-picks{max-width:1236px;margin:0 auto -170px;padding:clamp(20px,3vh,32px) clamp(14px,4cqw,28px) 0;position:relative;z-index:2;text-align:left;color:var(--ink-900);font:400 14px/1.45 var(--sans)}
.lp-picks-h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 4px 14px;font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--on-field-2)}
.lp-picks-h .status{text-transform:uppercase;letter-spacing:.05em}
.lp-picks .acts{margin:0;padding:0}
.lp-picks .ocard{cursor:default}
.lp-picks .ocard:hover{transform:none;box-shadow:var(--shadow-sheet)}
.is-in .lp-picks .ocard{animation-delay:calc(1050ms + var(--i)*120ms)}
.is-in .lp-picks-h{animation:fade 700ms ease both;animation-delay:950ms}
.lp-facts{background:var(--paper-tint);color:var(--ink-900);padding:clamp(236px,21vw,280px) clamp(20px,4vw,56px) 130px}
.lp-facts-in{max-width:1180px;margin:0 auto}
.lp-facts h2{margin:0;max-width:16ch;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(clamp(34px,4.6vw,60px)*var(--d-scale));line-height:.98}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--ink-900)}
.fact{padding:22px 24px 0 0}
.fact+.fact{padding-left:24px;border-left:1px solid var(--tint-line)}
.fact b{display:block;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(clamp(30px,3.4vw,46px)*var(--d-scale));line-height:1;white-space:nowrap}
.fact p{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--ink-700);max-width:24ch}
.lp-note{margin:30px 0 0;font:400 12px/1.5 var(--mono);color:var(--ink-500)}
@container (max-width:860px){
  .lp-links{display:none}.lp-sub br{display:none}.lp-picks .acts{grid-template-columns:1fr}.lp-picks-h span:last-child{display:none}
}
@media (max-width:860px){
  .facts{grid-template-columns:1fr 1fr}.fact:nth-child(3){padding-left:0;border-left:0}.fact:nth-child(n+3){margin-top:22px;border-top:1px solid var(--tint-line)}
  .lp-facts{padding-top:226px}
}
/* the same hero, held still inside a frame */
.frame>.lp--static{min-height:100%}

/* ============================================================
   THE APP. One component, used in the Dashboard view and inside the hero window.
   Drawn at 1280px and scaled to fit its container.
   ============================================================ */
.app{width:1280px;background:var(--paper-50);color:var(--ink-900);font:400 14px/1.45 var(--sans);position:relative;overflow:hidden;text-align:left}
.app-band{background:var(--field-500);color:var(--on-field);padding:0 40px;height:386px}
.app-nav{height:70px;display:flex;align-items:center;gap:34px}
.app-nav .brand{font-size:22px}
.app-links{display:flex;gap:2px}
.app-links a{padding:9px 13px;border-radius:var(--r-full);font:500 14px/1 var(--sans);color:var(--on-field-2)}
.app-links a.on{color:var(--on-field);background:var(--field-tint)}
.app-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.avatar{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--on-field) 18%,transparent);display:grid;place-items:center;font:600 12px/1 var(--sans)}
.app-top{display:flex;justify-content:space-between;align-items:center;margin-top:18px;min-height:42px}
.app-hello{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:10px}
.app-eyebrow{font:500 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--on-field-2)}
.app-h1{margin:0;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(60px*var(--d-scale));line-height:.94;white-space:nowrap}
.app-sub{margin:14px 0 0;font-size:15px;color:var(--on-field-2)}
.seg{display:flex;gap:2px;padding:4px;border-radius:var(--r-full);background:var(--field-tint)}
.seg span{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-full);font:500 13.5px/1 var(--sans);color:var(--on-field-2);white-space:nowrap}
.seg span b{font:500 11.5px/1 var(--mono);opacity:.9}
.seg span.on{background:var(--on-field);color:var(--action)}

.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 40px;margin-top:-116px;position:relative}
.ocard{background:var(--paper-0);border-radius:var(--r-lg);padding:20px 20px 16px;box-shadow:var(--shadow-sheet);display:flex;flex-direction:column;min-height:254px;cursor:pointer;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base)}
.ocard:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(10,15,51,.04),0 22px 44px -16px rgba(10,15,51,.3)}
.ocard-top{display:flex;justify-content:space-between;align-items:center}
.ocard-src{font:500 11.5px/1 var(--mono);letter-spacing:.03em;color:var(--ink-500)}
.ocard h3{margin:16px 0 0;font-family:var(--display);font-weight:var(--t-weight);letter-spacing:var(--t-track);font-size:21px;line-height:1.18;text-wrap:balance}
.ocard-meta{margin-top:8px;font-size:13.5px;color:var(--ink-500)}
.ocard-pay{margin-top:auto;padding-top:16px;font-family:var(--display);font-weight:var(--t-weight);letter-spacing:var(--t-track);font-size:21px;line-height:1}
.ocard-pay.na{color:var(--ink-500);font-weight:450}
.ocard-actions{display:flex;align-items:center;gap:4px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.icon-btn{margin-left:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-500)}
.icon-btn:hover{background:var(--paper-100);color:var(--ink-900)}
.icon-btn svg{width:17px;height:17px}

.list{padding:30px 40px 40px}
.list-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px}
.list-head h2{margin:0;font-family:var(--display);font-weight:var(--t-weight);letter-spacing:var(--t-track);font-size:18px;line-height:1}
.list-head b{font:500 12px/1 var(--mono);color:var(--ink-500)}
.list-head span{margin-left:auto;font-size:13px;color:var(--ink-500)}
.sheet{background:var(--paper-0);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,1fr) 160px 160px 190px 112px 16px;gap:18px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:background var(--t-quick)}
.row:hover{background:var(--field-50)}
.row .t{font:550 14.5px/1.3 var(--sans);letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{margin-top:3px;font-size:12.5px;color:var(--ink-500)}
.row .k{font-size:13px;color:var(--ink-700)}
.row .pay{font:550 13.5px/1.3 var(--sans)}
.row .pay.na{color:var(--ink-500);font-weight:400}
.row .act{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-700);white-space:nowrap}
.row .src{display:flex;align-items:center;justify-content:flex-end;gap:5px;font:550 13px/1 var(--sans);color:var(--ink-900)}
.row .src svg{width:12px;height:12px}
.row .chev{color:var(--ink-300)}
.row .chev svg{width:14px;height:14px;display:block}
.more{display:flex;align-items:center;gap:14px;padding:15px 20px;font-size:13.5px;color:var(--ink-500)}
.more strong{font:650 14.5px/1 var(--sans);color:var(--ink-900);letter-spacing:-.012em}
.more .chips{display:flex;gap:6px}
.more a{margin-left:auto;color:var(--ink-900);font-weight:550;text-decoration:underline;text-decoration-color:var(--ink-300);text-underline-offset:3px}

/* detail sheet */
.scrim{position:absolute;inset:0;background:rgba(10,15,51,.34);opacity:0;pointer-events:none;transition:opacity var(--t-base);z-index:4}
.drawer{position:absolute;top:0;right:0;bottom:0;width:470px;background:var(--paper-0);z-index:5;padding:26px 28px 24px;display:flex;flex-direction:column;gap:20px;transform:translateX(105%);transition:transform 560ms var(--ease-out);box-shadow:-40px 0 90px -40px rgba(10,15,51,.5)}
.app.open .scrim{opacity:1;pointer-events:auto}
.app.open .drawer{transform:none}
.d-top{display:flex;justify-content:space-between;align-items:center}
.d-kicker{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.d-close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-500);cursor:pointer}
.d-close:hover{background:var(--paper-100);color:var(--ink-900)}
.d-close svg{width:16px;height:16px}
.drawer h3{margin:0;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:30px;line-height:1.08;text-wrap:balance}
.d-quote{margin:0;padding:2px 0 2px 14px;border-left:2px solid var(--field-200);font-size:15px;line-height:1.5;color:var(--ink-700)}
.d-quote small{display:block;margin-top:8px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.d-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.d-fact{background:var(--paper-50);border-radius:var(--r-md);padding:13px 14px}
.d-fact span{display:block;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.d-fact b{display:block;margin-top:9px;font-family:var(--display);font-weight:var(--t-weight);letter-spacing:var(--t-track);font-size:18px;line-height:1.1}
.d-list{display:grid;gap:0;margin:0}
.d-list div{display:grid;grid-template-columns:128px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45}
.d-list dt{font:500 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.d-list dd{margin:0;color:var(--ink-700)}
.d-actions{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.d-actions .btn-field{flex:1}
.d-foot{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ink-700);padding-top:2px}
.d-foot .yn{display:flex;gap:6px}

/* app intro */
.is-in .ocard{animation:rise var(--t-slow) var(--ease-out) both;animation-delay:calc(360ms + var(--i)*90ms)}
.is-in .list{animation:rise var(--t-slow) var(--ease-out) both;animation-delay:640ms}

/* share card */
.social{width:1200px;height:630px;background:var(--field-500);color:var(--on-field);padding:58px 68px 54px;display:flex;flex-direction:column;justify-content:space-between}
.social .brand{font-size:40px}
.social-h{white-space:nowrap;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(150px*var(--d-scale));line-height:var(--d-lead)}
.social-f{display:flex;justify-content:space-between;align-items:center;font:500 22px/1 var(--mono);letter-spacing:.03em;color:var(--on-field-2)}
.social-f .status{font-size:22px;gap:14px}
.social-f .status i{width:14px;height:14px}
/* notification */
.lockscr{background:#17181D;border-radius:26px;padding:20px 14px 18px;display:grid;gap:10px;align-content:start}
.lockscr-t{font:300 54px/1 var(--sans);color:#fff;text-align:center;margin:8px 0 16px;letter-spacing:-.03em}
.notif{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;background:#F4F4F6;border-radius:18px;padding:12px 14px;color:#111;font-family:var(--sans)}
.notif .brand{font-size:17.8px;margin-top:2px}
.notif-top{display:flex;justify-content:space-between;font-size:12px;color:#5a5b61}
.notif-top b{font-weight:600;color:#111}
.notif-t{font:650 14.5px/1.3 var(--sans);margin-top:3px;letter-spacing:-.01em}
.notif-s{font-size:13px;line-height:1.35;color:#3d3e44;margin-top:2px}
/* a fixed-size screen, scaled to fit its box */
.shotw{margin:0;min-width:0}
.shotw figcaption{margin-top:8px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.shot{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--field-500)}
.frame{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}

/* dashboard view frame */
.dash{background:var(--paper-100);padding:28px clamp(12px,3vw,40px) 110px;min-height:calc(100vh - 44px)}
.dash-frame{max-width:1280px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(10,15,51,.45)}
.dash-note{max-width:1280px;margin:14px auto 0;font:400 12px/1.5 var(--mono);color:var(--ink-500)}