/* KSHF site
   Shape rule: page frames 28px, cards 18px, icon tiles 16px, buttons 12px. Only chips and labels are full pills.
   Colour rule: neutrals + one accent (Witness blue). Green / amber / red only for real record state.
   Product icon tiles carry their own brand colour, the way the reference shows partner logos. */

:root{
  --canvas:#FAFAFA; --frame:#F2F2F3; --dot:rgba(20,20,22,.09);
  --surface:#FFFFFF; --surface-2:#F6F6F7;
  --ink:#141416; --ink-2:#4A4A51; --ink-3:#6C6C74; --ink-soft:#8A8A92;
  --line:rgba(20,20,22,.08); --line-2:rgba(20,20,22,.14);
  --accent:#1F6FEB; --accent-hover:#185ED0; --accent-soft:rgba(31,111,235,.09); --on-accent:#FFFFFF;
  --witness:#1F6FEB; --release:#0F6E74; --clear:#E4572E;
  --ok:#1A7F4E; --ok-soft:rgba(26,127,78,.1); --warn:#99600A; --warn-soft:rgba(214,146,20,.14); --risk:#BF3A2F; --risk-soft:rgba(191,58,47,.09);
  --note:#FBEA8E; --note-ink:#3A3415;
  --shadow-s:0 1px 2px rgba(22,24,38,.06),0 4px 12px -4px rgba(22,24,38,.1);
  --shadow:0 1px 2px rgba(22,24,38,.05),0 18px 40px -16px rgba(22,24,38,.22);
  --shadow-l:0 2px 4px rgba(22,24,38,.05),0 30px 60px -20px rgba(22,24,38,.28);
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --hand:"Caveat","Bradley Hand",cursive;
  --ease:cubic-bezier(.23,1,.32,1); --ease-move:cubic-bezier(.65,0,.35,1); --ease-settle:cubic-bezier(.22,1.2,.36,1);
  --r-frame:28px; --r-card:18px; --r-tile:16px; --r-btn:12px;
  --nav-h:72px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --canvas:#0C0C0E; --frame:#131316; --dot:rgba(255,255,255,.07);
  --surface:#1A1A1E; --surface-2:#212126;
  --ink:#F2F2F4; --ink-2:#B6B6BD; --ink-3:#8F8F97; --ink-soft:#6F6F78;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --accent:#4C8DF6; --accent-hover:#6A9FF8; --accent-soft:rgba(76,141,246,.14); --on-accent:#0C0C0E;
  --witness:#3D7FF0; --release:#1E8E94; --clear:#F0703F;
  --ok:#57CC92; --ok-soft:rgba(87,204,146,.13); --warn:#E9B04F; --warn-soft:rgba(233,176,79,.14); --risk:#F07B70; --risk-soft:rgba(240,123,112,.14);
  --note:#E6D372; --note-ink:#2E2A12;
  --shadow-s:0 1px 2px rgba(0,0,0,.4),0 4px 12px -4px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7);
  --shadow-l:0 2px 4px rgba(0,0,0,.4),0 30px 60px -20px rgba(0,0,0,.8);
  --edge:inset 0 1px 0 rgba(255,255,255,.06);
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--canvas);color:var(--ink);font:16.5px/1.55 var(--font);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:var(--accent-soft)}
svg{display:block}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:500;color:var(--ink)}
.ph{line-height:1}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.display{font-size:clamp(44px,7vw,92px);line-height:1.02;letter-spacing:-.045em}
.h2{font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.04em}
.h3{font-size:clamp(22px,2.1vw,28px);line-height:1.15;letter-spacing:-.025em}
.soft{color:var(--ink-soft)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);letter-spacing:-.012em}
.body{color:var(--ink-2);max-width:60ch}
.meta{font-size:13px;color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:.88em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.sec{padding:clamp(88px,11vw,140px) 0}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border-radius:var(--r-btn);border:1px solid transparent;font-size:16px;font-weight:500;white-space:nowrap;
  transition:transform 140ms var(--ease),background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.btn:active:not(:disabled){transform:scale(.97);transition-duration:90ms}
.btn:focus-visible,.mini-btn:focus-visible{border-radius:var(--r-btn)}
.btn:disabled,.mini-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-danger{background:var(--risk);color:#fff}
.btn-quiet{background:transparent;color:var(--ink-2)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 2px rgba(31,111,235,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-line{background:var(--surface);border-color:var(--line-2);color:var(--ink);box-shadow:var(--shadow-s)}
.btn-sm{height:42px;padding:0 18px;font-size:15px}
.btn .ph{font-size:17px;transition:transform 200ms var(--ease)}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:500}
.link .ph{transition:transform 200ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover:not(:disabled){background:var(--accent-hover)}
  .btn-line:hover:not(:disabled){border-color:var(--ink-soft);background:var(--surface-2)}
  .btn-quiet:hover{background:var(--surface-2);color:var(--ink)}
  .btn-danger:hover:not(:disabled){filter:brightness(1.06)}
  .mini-btn:hover:not(:disabled){background:var(--accent-hover)}
  .btn:hover .ph-arrow-right,.link:hover .ph-arrow-right{transform:translateX(3px)}
}

/* Pill label (used sparingly) */
.pill-label{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s),var(--edge);font-size:15px;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.risk{background:var(--risk-soft);color:var(--risk)} .chip.accent{background:var(--accent-soft);color:var(--accent)}

/* Nav */
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);background:color-mix(in srgb,var(--canvas) 78%,transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
.nav-in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:21px;font-weight:600;letter-spacing:-.03em;justify-self:start}
.brand-mark{width:30px;height:30px;color:var(--ink)}
.nav-links{display:flex;gap:6px}
.nav-links a{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);padding:8px 14px;border-radius:10px;transition:color 160ms ease,background-color 160ms ease}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--ink)}}
.nav-end{justify-self:end;display:flex;gap:10px;align-items:center}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);place-items:center;font-size:20px;transition:transform 120ms var(--ease)}
.menu-btn:active{transform:scale(.95)}
.sheet{position:fixed;z-index:39;top:calc(var(--nav-h) - 4px);left:12px;right:12px;padding:8px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-l);transform-origin:top right;
  opacity:0;transform:scale(.96) translateY(-4px);pointer-events:none;transition:opacity 140ms ease,transform 160ms var(--ease)}
.sheet.open{opacity:1;transform:none;pointer-events:auto;transition:opacity 220ms var(--ease),transform 280ms var(--ease)}
.sheet a{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;font-size:17px;font-weight:500}
.sheet a .ph{font-size:20px;color:var(--ink-3)}
.sheet a .app-icon{width:24px;height:24px;border-radius:6px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mk) 24%,transparent)}
.sheet a:active{background:var(--surface-2)}
@media (max-width:900px){.nav-in{grid-template-columns:1fr auto}.nav-links{display:none}.menu-btn{display:grid}.nav-end .btn{display:none}}

/* Dotted frame (the reference's canvas) */
.frame{position:relative;border-radius:var(--r-frame);background-color:var(--frame);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:16px 16px;border:1px solid var(--line);overflow:hidden;isolation:isolate}

/* Icon tile: the tactile white square */
.tile{display:grid;place-items:center;border-radius:var(--r-tile);background:var(--surface);box-shadow:var(--shadow),var(--edge);border:1px solid var(--line)}
/* Product marks. Adobe-suite logic: a deep tile in the product's own hue, the name cut to two letters
   in the bright version of that hue. Same in light and dark, like any app icon. Rendered by <kshf-mark>. */
.app-icon{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;flex:none;color:var(--mk);background:var(--mk-bg);
  box-shadow:0 8px 18px -8px rgba(22,24,38,.45),inset 0 0 0 1px color-mix(in srgb,var(--mk) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.06)}
.app-icon.clear{--mk:#FF7A4F;--mk-bg:#2B0D05}
.app-icon.witness{--mk:#4D97FF;--mk-bg:#001838}
.app-icon.release{--mk:#2FD4C8;--mk-bg:#00292B}
.app-icon.proof{--mk:#EDEDF0;--mk-bg:#18181B}
/* Small marks beside product links, so a one-word name reads as a product, not an action */
.nav-mk{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mk) 24%,transparent)}
kshf-mark{display:grid}
kshf-mark svg{width:100%;height:100%;display:block}
kshf-mark text{fill:currentColor;font-family:var(--font);font-weight:600;letter-spacing:-.06em}

/* Folder card: card with a tab */
.folder{position:relative;background:var(--surface);border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px;margin-top:14px}
.folder::before{content:"";position:absolute;left:-1px;top:-14px;width:46%;height:22px;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;clip-path:inset(-2px -2px 8px -2px)}
.folder-t{font-size:17px;font-weight:500;letter-spacing:-.02em}

/* Record rows used in mini components */
.rec{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:9px 0;font-size:13.5px}
.rec+.rec{border-top:1px solid var(--line)}
.rec .st{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:13px;border:1.5px solid var(--line-2);color:var(--ink-3);transition:background-color 220ms ease,border-color 220ms ease,color 220ms ease}
.rec.done .st{background:var(--ok);border-color:var(--ok);color:#fff}
.rec.wait .st{border-color:var(--warn);border-style:dashed;color:var(--warn)}
.rec .meta{display:block;font-size:12px}
.mini-btn{height:28px;padding:0 12px;border-radius:9px;border:0;background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:500;transition:transform 120ms var(--ease),background-color 160ms ease}
.mini-btn{position:relative}
.mini-btn::after{content:"";position:absolute;inset:-8px -4px}
.mini-btn:active:not(:disabled){transform:scale(.95);transition-duration:90ms}

/* Segmented control (clip-path highlight; see site.js) */
.seg{position:relative;display:inline-flex;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg>button{position:relative;display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:11px;background:transparent;font-size:14.5px;font-weight:500;color:var(--ink-3);white-space:nowrap;transition:transform 120ms var(--ease)}
.seg>button:active{transform:scale(.97)}
.seg-hl{position:absolute;top:0;left:0;height:100%;pointer-events:none;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);clip-path:inset(4px 100% 4px 0 round 11px);transition:clip-path 260ms var(--ease-move)}
.seg-hl>span{position:absolute;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.seg-instant .seg-hl{transition:none}

/* Toasts: enter from below, leave the same way, faster */
.toasts{position:fixed;z-index:60;right:20px;bottom:20px;display:grid;gap:8px;justify-items:end;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:360px;padding:12px 16px;border-radius:14px;background:var(--ink);color:var(--canvas);font-size:14px;box-shadow:var(--shadow-l);cursor:default;
  transition:opacity 260ms var(--ease),transform 300ms var(--ease)}
@starting-style{.toast{opacity:0;transform:translateY(12px) scale(.98)}}
.toast.leaving{opacity:0;transform:translateY(8px);transition-duration:160ms}
.toast .ph-fill{font-size:18px}
.toast-ok .ph-fill{color:var(--ok)} .toast-warn .ph-fill{color:var(--warn)} .toast-risk .ph-fill{color:var(--risk)}
@media (max-width:760px){.toasts{left:12px;right:12px;bottom:12px;justify-items:stretch}.toast{max-width:none}}

/* Reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 760ms var(--ease),transform 900ms var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}

/* Edge sections: full-bleed frames share one gutter with the hero, so every frame lines up. */
.edge{padding:0 24px 24px}

/* Footer: the closing canvas. Same dotted frame and gutter as the hero, links as arrow rows,
   app tiles hovering over the wordmark. */
.foot{padding:0 24px 24px;font-size:14px;color:var(--ink-3)}
.foot-frame{display:grid}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start;padding:64px clamp(28px,5vw,72px) 0}
.foot a.brand{display:inline-flex;color:var(--ink)}
.foot-h{margin-top:28px;font-size:clamp(34px,4.4vw,60px);line-height:1.04;letter-spacing:-.04em;font-weight:500}
.foot-links{display:grid;grid-template-columns:repeat(2,auto);gap:0 80px;padding-top:62px}
.foot-links ul{list-style:none;margin:0;padding:0}
.foot-links a{display:flex;align-items:center;gap:14px;padding:6px 0;font-size:16px;color:var(--ink);transition:color 160ms ease}
.foot-links a .ph{font-size:15px;color:var(--ink-soft);transition:translate 200ms var(--ease),color 160ms ease}
@media (hover:hover) and (pointer:fine){
  .foot-links a:hover{color:var(--accent)}
  .foot-links a:hover .ph{color:var(--accent);translate:3px 0}
  .foot-links a[data-top]:hover .ph{translate:0 -3px}
}

.foot-stage{position:relative;height:clamp(380px,36vw,520px);margin:24px clamp(28px,5vw,72px) 0;overflow:visible}
.foot-mark{position:absolute;left:50%;bottom:-.2em;translate:-50% 0;font-size:clamp(96px,27vw,420px);font-weight:600;line-height:1;letter-spacing:-.065em;
  color:color-mix(in srgb,var(--ink) 5%,transparent);white-space:nowrap;user-select:none;pointer-events:none}
.ft{position:absolute;z-index:1;left:var(--x);top:var(--y);transform:translate(calc(var(--x) * -1),calc(var(--y) * -1));rotate:var(--r)}
.ft .tile{width:84px;height:84px;font-size:38px;color:var(--ink);border-radius:20px}
.ft .app-icon{width:52px;height:52px;border-radius:14px;font-size:27px}
.ft-sm .tile{width:62px;height:62px;font-size:27px;border-radius:16px;color:var(--ink-2)}
.ft-word .tile{width:auto;height:62px;padding:0 20px;font:500 15px/1 var(--mono);color:var(--ink-2)}
.ft-num .tile,.ft .ft-num{font:600 22px/1 var(--mono);letter-spacing:-.02em;color:var(--ink)}
/* Hovering: a slow bob on the tile itself, so the shadow travels with it */
@media (prefers-reduced-motion:no-preference){
  .ft .tile{animation:bob var(--b,8s) var(--ease-move) infinite alternate;animation-delay:calc(var(--i) * -.9s)}
}
@keyframes bob{to{transform:translateY(-9px)}}
.js .ft{opacity:0;scale:.86;rotate:calc(var(--r) - 14deg);transition:opacity 500ms var(--ease),scale 700ms var(--ease-settle),rotate 900ms var(--ease-settle);transition-delay:calc(var(--i) * 60ms)}
.js .foot-stage.in .ft{opacity:1;scale:1;rotate:var(--r)}

.foot-bot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:0 clamp(28px,5vw,72px);padding:22px 0 26px;border-top:1px solid var(--line);font-size:13px}

/* Laptop. The shell is CSS; the screen is the live app at 1280px, scaled to fit. */
.lap{position:relative;display:block;perspective:1600px;pointer-events:none}
.lap-cta{pointer-events:auto}
.lap-lid{display:block;padding:14px 14px 16px;border-radius:22px 22px 6px 6px;background:#101012;
  box-shadow:0 0 0 2px #CFD0D4,0 0 0 3px rgba(22,24,38,.08),var(--shadow-l);transform-origin:50% 100%}
.lap-screen{position:relative;display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.lap-screen iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;transform:scale(var(--s,.5));pointer-events:none;background:var(--canvas)}
.lap-screen::after{content:"";position:absolute;inset:0;background:#101012;opacity:0;pointer-events:none}
.lap-cta{position:absolute;right:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:var(--r-btn);
  background:var(--ink);color:var(--canvas);font-size:14px;font-weight:500;box-shadow:var(--shadow);transition:opacity 200ms var(--ease),translate 200ms var(--ease),scale 160ms var(--ease)}
.lap-cta:active{scale:.97}
.lap-base{position:relative;display:block;height:clamp(10px,1.4vw,18px);margin:0 -9%;border-radius:2px 2px 18px 18px;
  background:linear-gradient(#E9EAEC,#C3C5CA 60%,#A9ABB1);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 22px 30px -16px rgba(22,24,38,.5)}
.lap-notch{position:absolute;left:50%;top:0;width:15%;height:45%;translate:-50% 0;border-radius:0 0 8px 8px;background:linear-gradient(#B5B7BC,#CDCFD3)}
@media (hover:hover) and (pointer:fine){.lap-cta:hover{background:color-mix(in srgb,var(--ink) 86%,var(--accent))}}
/* Lid: opens when the stage is seen. Where scroll-driven animation exists, the lid instead follows
   the scroll both ways, opening as the stage rises and closing as it leaves. */
.js .lap-lid{transform:rotateX(-84deg);transition:transform 1100ms var(--ease)}
.js .lap-screen::after{opacity:1;transition:opacity 600ms ease 500ms}
.js [data-lap-stage].in .lap-lid{transform:none}
.js [data-lap-stage].in .lap-screen::after{opacity:0}
.js [data-lap-stage]:not(.in) .lap-cta{visibility:hidden;opacity:0}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .js [data-lap-stage]{view-timeline:--lap block}
  .js [data-lap-stage] .lap-lid{transition:none;animation:lidScroll linear both;animation-timeline:--lap;animation-range:cover 0% cover 100%}
  .js [data-lap-stage] .lap-screen::after{transition:none;animation:lidDark linear both;animation-timeline:--lap;animation-range:cover 0% cover 100%}
  .js [data-lap-stage] .lap-cta,.js [data-lap-stage]:not(.in) .lap-cta{visibility:visible;animation:lidCta linear both;animation-timeline:--lap;animation-range:cover 0% cover 100%}
}}
@keyframes lidScroll{0%,10%{transform:rotateX(-84deg)}38%,64%{transform:none}94%,100%{transform:rotateX(-84deg)}}
@keyframes lidDark{0%,22%{opacity:1}40%,62%{opacity:0}82%,100%{opacity:1}}
@keyframes lidCta{0%,34%{visibility:hidden;opacity:0}40%,62%{visibility:visible;opacity:1}68%,100%{visibility:hidden;opacity:0}}
@media (prefers-color-scheme:dark){
  .lap-lid{box-shadow:0 0 0 2px #3C3D42,0 0 0 3px rgba(0,0,0,.4),var(--shadow-l)}
  .lap-base{background:linear-gradient(#6A6B70,#45464B 60%,#2E2F33);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 22px 30px -16px rgba(0,0,0,.8)}
  .lap-notch{background:linear-gradient(#2A2B2F,#3E3F44)}
}

@media (max-width:900px){
  .foot-top{grid-template-columns:1fr;gap:32px;padding:40px 28px 0}
  .foot-links{padding-top:0;gap:0 32px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-stage{margin:16px 20px 0;height:clamp(280px,56vw,400px)}
  .foot-bot{margin:0 28px}
  .ft.m-hide{display:none}
}
@media (max-width:760px){
  .edge,.foot{padding:0 10px 10px}
}
@media (max-width:560px){
  .foot-top{padding:30px 22px 0}
  .foot-links a{font-size:15px;gap:10px}
  .foot-stage{margin:8px 12px 0;height:260px}
  .ft .tile{width:62px;height:62px;font-size:28px;border-radius:16px}
  .ft .app-icon{width:40px;height:40px;border-radius:11px;font-size:21px}
  .ft-sm .tile{width:50px;height:50px;font-size:22px;border-radius:14px}
  .ft-num .tile,.ft .ft-num{font-size:17px}
  .foot-bot{margin:0 22px;flex-direction:column}
  .lap-lid{padding:7px 7px 8px;border-radius:12px 12px 4px 4px}
  .lap-screen{border-radius:5px}
  .lap-cta{right:8px;bottom:8px;height:32px;font-size:13px;padding:0 10px}
}

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{transform:none;transition:opacity 300ms ease}
  .sheet{transform:none}
  .seg-hl{transition:none}
  .toast,.toast.leaving{transform:none}
  .js .ft{transition:opacity 300ms ease;scale:1;rotate:var(--r)}
  .js .lap-lid{transform:none;transition:none}
  .js [data-lap-stage]:not(.in) .lap-cta{visibility:visible;opacity:1}
  .js .lap-screen::after{transition:opacity 300ms ease}
}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--canvas);backdrop-filter:none;-webkit-backdrop-filter:none}}