/* Clean View site. White only. The film's bloom and overlay type are the one decoration. */

@font-face{font-family:"Inter Display";src:url(/assets/fonts/InterDisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Display";src:url(/assets/fonts/InterDisplay-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Display";src:url(/assets/fonts/InterDisplay-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#0b0b10;--text:#202329;--body:#364152;--mute:#526070;--line:rgba(11,11,16,.09);--wash:#f5f5f7;
  --blue:#2a5bf5;--blue-d:#1f49d6;--green:#157a41;--green-b:#1f9d55;--amber:#f5a524;--rose:#ff6b6b;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --display:"Inter Display",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-pop:cubic-bezier(.34,1.3,.64,1);
  --m-fast:160ms;--m-ui:240ms;--m-enter:700ms;
  --sh-sm:0 2px 3px -1px rgba(0,0,0,.1),0 1px 0 0 rgba(25,28,33,.02),0 0 0 1px rgba(25,28,33,.08);
  --sh-md:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 3px 3px -1.5px rgba(0,0,0,.06),0 6px 6px -3px rgba(0,0,0,.06),0 12px 12px -6px rgba(0,0,0,.06),0 24px 24px -12px rgba(0,0,0,.06);
  --sh-lg:0 2.8px 2.2px rgba(0,0,0,.034),0 6.7px 5.3px rgba(0,0,0,.048),0 12.5px 10px rgba(0,0,0,.06),0 22.3px 17.9px rgba(0,0,0,.072),0 41.8px 33.4px rgba(0,0,0,.086),0 100px 80px rgba(0,0,0,.12);
  --gut:clamp(16px,4vw,48px);
  --nav-h:76px;
  --h2:700 clamp(34px,3.75vw,54px)/1.05 var(--display);--h2-ls:-.03em;
  --h3:600 clamp(22px,2vw,28px)/1.15 var(--display);--h3-ls:-.025em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);background:#fff;overflow-x:clip}
body{margin:0;background:#fff;color:var(--body);font:400 18px/1.6 var(--ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--blue);text-underline-offset:3px}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
kbd{font:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-64px;z-index:100;background:#fff;color:var(--ink);padding:12px 18px;border-radius:12px;box-shadow:var(--sh-md);transition:top var(--m-fast)}
.skip:focus{top:12px}
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Bloom: the film's three blurred ellipses. Type in overlay blend takes its colours. ── */
.bloom{--bw:clamp(860px,84vw,1700px);position:absolute;left:50%;top:var(--y,50%);width:0;height:0;pointer-events:none;opacity:var(--o,1);transform:scale(var(--sx,1),var(--sy,1));z-index:0}
.bloom i{position:absolute;width:var(--bw);aspect-ratio:768/546;left:calc(var(--bw)*-.5);top:calc(var(--bw)*-.3555);background-size:100% 100%;background-repeat:no-repeat;animation:drift 11s var(--ease-io) infinite alternate;animation-play-state:paused}
.bloom.live i{animation-play-state:running}
.bloom .m{background-image:url(/assets/glow/magenta.webp);translate:calc(var(--bw)*-.139) calc(var(--bw)*-.043)}
.bloom .c{background-image:url(/assets/glow/coral.webp);translate:calc(var(--bw)*.139) calc(var(--bw)*-.024);animation-delay:-3s;animation-duration:13s}
.bloom .b{background-image:url(/assets/glow/blue.webp);translate:calc(var(--bw)*-.017) calc(var(--bw)*.042);animation-delay:-6s;animation-duration:9s}
.bloom.soft{--o:.3;--sx:1.3;--sy:1.05}
@keyframes drift{from{transform:translate(-1.4%,.8%)}to{transform:translate(1.4%,-.8%)}}

/* Blooms are larger than their sections: fade them out before the section edge so no hard line shows. */
.super::after,.verbs-stick::after,.dl::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#fff,rgba(255,255,255,0) 130px,rgba(255,255,255,0) calc(100% - 130px),#fff)}

/* Overlay type: no ancestor between it and the bloom may have its own transform, opacity or filter. */
.type{position:relative;z-index:1;color:#000;mix-blend-mode:overlay;font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.08;text-align:center}
.js .type[data-type]:not(.ready),.js .type[data-verb]:not(.ready),.js .type[data-verb-line]:not(.ready){visibility:hidden}
.type-wrap{position:relative;display:grid;justify-items:center}
.type-wrap>.type{grid-area:1/1}
.type-copy{pointer-events:none;user-select:none;-webkit-user-select:none}
.t-hero{font-size:clamp(44px,6.6vw,92px)}
.t-big{font-size:clamp(38px,6.4vw,104px)}
.t-xl{font-size:clamp(56px,10.5vw,168px);line-height:1}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;opacity:0;transform:translateY(.12em);filter:blur(.06em);transition:opacity 120ms linear,transform 120ms linear,filter 120ms linear}
.ch.on{opacity:1;transform:none;filter:none}
.caret{display:inline-block;position:relative;width:0;height:.84em;vertical-align:-.08em}
.caret::before{content:"";position:absolute;left:.03em;top:0;bottom:0;width:max(3px,.05em);border-radius:2px;background:currentColor}
.caret.idle::before{animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── Buttons, text ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:600 17px/1 var(--ui);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background var(--m-fast),box-shadow var(--m-fast),color var(--m-fast)}
.btn-primary{color:#fff;background:linear-gradient(90deg,#1460e0,#2a6ff0);box-shadow:inset 0 -2px 4px rgba(10,40,130,.22),inset 0 1px 1px rgba(255,255,255,.34),0 8px 22px rgba(30,100,240,.26)}
.btn-primary:hover{background:linear-gradient(90deg,#0f54cb,#1f62e2)}
.btn-primary:active{box-shadow:inset 0 2px 5px rgba(10,40,130,.35)}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.88);box-shadow:var(--sh-sm)}
.btn-ghost:hover{background:#fff}
.btn-ghost .i{color:var(--blue)}
.btn-lg{min-height:56px;padding:0 28px;font-size:18px}
.btn-xl{min-height:72px;padding:0 44px;font-size:22px;gap:14px;font-family:var(--display);font-weight:600}
.btn-block{width:100%}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--body);max-width:40em}
.meta{font-size:16px;color:var(--mute)}
.fine{font-size:16px;line-height:1.55;color:var(--mute)}
.caption{font-size:17px;color:var(--mute);text-align:center;margin-top:24px}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:17px;color:var(--blue);text-decoration:none}
.tlink .i{transition:transform var(--m-fast)}
.tlink:hover .i,.post:hover .tlink .i{transform:translateX(3px)}
.reveal{transition:opacity var(--m-enter) var(--ease),transform var(--m-enter) var(--ease)}
.js:not(.rm) .reveal:not(.in){opacity:0;transform:translateY(20px)}

/* ── Nav ── */
.nav{position:fixed;left:0;right:0;top:12px;z-index:50;padding:0 var(--gut);pointer-events:none}
.nav-bar{pointer-events:auto;display:flex;align-items:center;gap:24px;max-width:1120px;height:60px;margin:0 auto;padding:0 10px 0 14px;border-radius:20px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:var(--sh-sm)}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 19px/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:9px 13px;border-radius:10px;font-size:16px;font-weight:500;color:var(--text);text-decoration:none;transition:background var(--m-fast)}
.nav-links a:hover{background:rgba(11,11,16,.06)}
.btn-nav{min-height:42px;padding:0 16px;font-size:16px;gap:8px}
.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;color:var(--ink)}
.nav-sheet{pointer-events:auto;max-width:1120px;margin:8px auto 0;padding:8px;border-radius:18px;background:#fff;box-shadow:var(--sh-md)}
.nav-sheet a{display:block;padding:14px 14px;border-radius:12px;font-size:18px;font-weight:500;color:var(--ink);text-decoration:none}
.nav-sheet a:hover{background:var(--wash)}

/* ── Hero ── */
.hero{position:relative;isolation:isolate;background:#fff;overflow:clip;padding:calc(var(--nav-h) + clamp(28px,5.5vh,72px)) var(--gut) clamp(56px,8vw,112px)}
.hero-top{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.hero-top .bloom{--y:clamp(60px,9vw,120px);--sx:.94;--sy:.66;--o:.62}
.hero-lede,.hero-cta,.hero-meta{position:relative;z-index:1}
.hero-lede{max-width:33em;color:var(--text)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.hero-device{position:relative;z-index:1;max-width:1240px;margin:clamp(28px,2.6vw,36px) auto 0}

/* ── MacBook, same frame as the film ── */
.mac{position:relative;width:100%;margin-inline:auto;container-type:inline-size}
.mac-lid{position:relative;aspect-ratio:1548/1024;padding:1.16cqw 1.16cqw 1.55cqw;border-radius:2cqw 2cqw .9cqw .9cqw;background:#0c0c0e;box-shadow:0 0 0 .13cqw #2a2a2e,0 0 0 .22cqw #b9bbc2,0 2.6cqw 7.6cqw rgba(30,20,80,.22)}
.mac-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:.8cqw .8cqw .26cqw .26cqw;background:#6d7681;display:flex;flex-direction:column}
.mac-notch{position:absolute;left:50%;top:1.1cqw;width:12.3cqw;height:1.95cqw;margin-left:-6.15cqw;border-radius:0 0 .8cqw .8cqw;background:#0c0c0e;z-index:3}
.mac-notch::after{content:"";position:absolute;left:50%;top:.62cqw;width:.58cqw;height:.58cqw;margin-left:-.29cqw;border-radius:50%;background:#1c2230;box-shadow:inset 0 0 .13cqw #3c4b6b}
.mac-base{position:relative;width:112%;left:-6%;height:1.9cqw;margin-top:-1px;border-radius:.26cqw .26cqw 1.7cqw 1.7cqw/.26cqw .26cqw 1.4cqw 1.4cqw;background:linear-gradient(180deg,#e9eaee 0%,#c9cbd1 45%,#9c9ea6 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.18)}
.mac-base i{position:absolute;left:50%;top:0;width:18cqw;height:.7cqw;margin-left:-9cqw;border-radius:0 0 .8cqw .8cqw;background:linear-gradient(180deg,#a5a7ae,#c8cad0)}
.mac-base::after{content:"";position:absolute;left:6%;right:6%;top:100%;height:4cqw;background:radial-gradient(closest-side,rgba(30,25,70,.26),transparent);pointer-events:none}
.menubar{flex:none;display:flex;align-items:center;gap:1.3cqw;height:1.72cqw;padding:0 .95cqw;font:500 .9cqw/1 var(--ui);color:#111;background:linear-gradient(90deg,rgba(186,212,255,.95),rgba(214,196,255,.95) 60%,rgba(255,214,236,.95));position:relative;z-index:2}
.menubar b{font-weight:700}
.menubar em{margin-left:auto;font-style:normal}

/* ── Viewer ── */
.vw{position:relative;flex:1;min-height:0;overflow:hidden;background:#6d7681;outline-offset:-3px;--th-w:7.4cqw;--th-h:5cqw;--th-gap:1.05cqw;--rail-b:2.95cqw;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.vw:focus-visible{outline:3px solid #fff;border-radius:0}
.vw-fallback{width:66%;margin:6% auto 0;box-shadow:0 2cqw 5cqw rgba(0,0,0,.28)}
.vw-bg{position:absolute;inset:-12%;filter:blur(2.4cqw) saturate(1.25)}
.vw-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 420ms linear}
.vw-bg img.on{opacity:1}
.vw-tint{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.05),rgba(20,24,32,.28) 85%),rgba(104,112,124,.42)}
.vw-stage{position:absolute;left:0;right:0;top:0;bottom:17.5%;display:flex;align-items:center;justify-content:center}
.vw-photo{position:relative;width:min(66%,calc(82cqh * 1.5));aspect-ratio:3/2;cursor:zoom-in}
.vw.is-zoomed .vw-photo{cursor:grab}
.vw.is-drag .vw-photo{cursor:grabbing}
.vw.is-zoomed{touch-action:none}
.vw-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;box-shadow:0 2cqw 5.4cqw rgba(0,0,0,.3);-webkit-user-drag:none;pointer-events:none;opacity:0;transform:translateX(3.5%) scale(1.02);transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.vw-photo img.on{opacity:1;transform:none}
.vw-photo img.off{opacity:0;transform:translateX(-3.5%) scale(.98)}
.vw-photo img.back{transform:translateX(-3.5%) scale(.98)}
.vw-photo img.off.back{transform:translateX(3.5%) scale(.98)}
.vw-load{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:8px 14px;border-radius:10px;background:rgba(20,20,24,.72);color:#fff;font:600 14px/1 var(--ui);white-space:nowrap;opacity:0;transition:opacity var(--m-fast);pointer-events:none}
.vw-load.on{opacity:1}
.vw-zoom{position:absolute;right:2cqw;bottom:15.5%;font:600 .85cqw/1 var(--ui);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.94)}
.vw-strip{position:absolute;left:0;right:0;bottom:3.2%;height:calc(var(--th-h) + 1.2cqw);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vw-track{position:absolute;left:50%;top:.6cqw;display:flex;gap:var(--th-gap);transform:translateX(calc((var(--th-w) + var(--th-gap)) * var(--i,0) * -1 - var(--th-w) / 2));transition:transform 340ms var(--ease)}
.th{position:relative;flex:none;width:var(--th-w);height:var(--th-h);border-radius:.46cqw;overflow:hidden;background:rgba(255,255,255,.2);box-shadow:0 0 0 .1cqw rgba(255,255,255,.22),0 .4cqw 1cqw rgba(0,0,0,.25);transition:box-shadow var(--m-ui),transform var(--m-ui) var(--ease);animation:breathe .85s var(--ease-io) infinite alternate}
.th.loaded{animation:none}
.th img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 240ms linear}
.th.loaded img{opacity:1}
.th.on{transform:scale(1.04);box-shadow:0 0 0 .2cqw #fff,0 .4cqw 1cqw rgba(0,0,0,.25)}
@keyframes breathe{from{opacity:.55}to{opacity:1}}
.vw-count{position:absolute;left:0;right:0;bottom:.8%;text-align:center;font:600 .74cqw/1 var(--ui);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.88)}
.vw-rail{position:absolute;right:1.6cqw;top:2.6cqw;display:flex;flex-direction:column;gap:.66cqw;z-index:3}
.vw-btn{position:relative;display:grid;place-items:center;width:var(--rail-b);height:var(--rail-b);border-radius:50%;background:rgba(255,255,255,.93);color:#1d1d1f;box-shadow:0 .26cqw .9cqw rgba(0,0,0,.18);transition:background var(--m-fast),color var(--m-fast),transform var(--m-fast) var(--ease)}
.vw-btn .i{width:52%;height:52%;stroke-width:1.6}
.vw-btn:hover{background:#fff}
.vw-btn.hi{background:#fff;color:var(--blue);transform:scale(1.08)}
.vw-btn.hi::after{content:"";position:absolute;inset:-.46cqw;border-radius:50%;border:.13cqw dashed #fff}
.vw-tip{position:absolute;right:calc(1.6cqw + var(--rail-b) + .8cqw);padding:6px 11px;border-radius:8px;background:rgba(20,20,24,.82);color:#fff;font:600 14px/1.2 var(--ui);white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity var(--m-fast),transform var(--m-fast);pointer-events:none;z-index:4}
.vw-tip.on{opacity:1;transform:none}
.vw-pop{position:absolute;right:calc(1.6cqw + var(--rail-b) + .9cqw);top:2.6cqw;width:clamp(230px,20cqw,290px);padding:8px;border-radius:14px;background:rgba(246,246,248,.98);color:#1d1d1f;box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.12);font:400 14px/1.35 var(--ui);opacity:0;transform:translateX(12px) scale(.97);transform-origin:right top;visibility:hidden;transition:opacity var(--m-ui) var(--ease),transform var(--m-ui) var(--ease),visibility 0s linear var(--m-ui);z-index:5}
.vw-pop.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.vw-pop-t{padding:8px 10px 2px;font-size:14px;font-weight:600;color:#55555c}
.pop-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;font-size:14px;font-weight:500;text-align:left;color:inherit}
.pop-row .i{width:18px;height:18px;color:var(--blue)}
.pop-row:hover,.pop-row.pick{background:var(--blue);color:#fff}
.pop-row:hover .i,.pop-row.pick .i{color:#fff}
.pop-sep{height:1px;margin:4px 8px;background:rgba(0,0,0,.08)}
.info-h{display:flex;align-items:center;gap:8px;padding:8px 10px 0;font-size:16px;font-weight:700}
.info-h button{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:var(--blue)}
.info-h button:hover{background:rgba(42,91,245,.1)}
.info-h .i{width:16px;height:16px}
.info-s{padding:0 10px;font-size:13px;color:#55555c}
.info-r{display:flex;justify-content:space-between;gap:12px;padding:5px 10px;font-size:13px}
.info-r span:first-child{color:#55555c}
.info-r span:last-child{font-weight:500;text-align:right}
.info-l{padding:8px 10px 6px;font-size:13px;font-weight:600;color:var(--blue)}

/* Under the demo */
.try-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(36px,4.5vw,56px)}
.try-copy{font-size:17px;color:var(--mute)}
.try-keys{display:flex;align-items:center;gap:8px}
.try-label{font-size:16px;font-weight:500;color:var(--text);margin:0 12px 0 4px}
.try-label:last-child{margin-right:0}
.key,.kk kbd{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:10px;background:linear-gradient(180deg,#fff,#eef0f5);box-shadow:0 3px 0 #c9ccd6,0 6px 12px rgba(20,20,60,.12),inset 0 0 0 1px rgba(0,0,0,.05);font:600 18px/1 var(--ui);color:var(--ink);transition:transform 90ms,box-shadow 90ms}
.key.down,.key:active,.kk kbd.down{transform:translateY(3px);box-shadow:0 0 0 #c9ccd6,0 2px 4px rgba(20,20,60,.12),inset 0 0 0 1px rgba(0,0,0,.08)}
.key kbd{pointer-events:none}
.key-play{margin-left:4px;color:var(--ink)}
.key-play .i{width:18px;height:18px}

/* ── Wordmark + film dialog ── */
.wordmark{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.26em;font:700 clamp(44px,6.8vw,104px)/1 var(--display);letter-spacing:-.035em;color:var(--ink);margin-top:clamp(8px,1.5vw,24px)}
.wordmark img{width:1.08em;height:1.08em}
.film-dialog{width:min(1280px,calc(100vw - 32px));padding:0;border:0;border-radius:20px;overflow:visible;background:#000;box-shadow:var(--sh-lg)}
.film-dialog::backdrop{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.film-dialog video{width:100%;height:auto;border-radius:20px;background:#000}
.film-close{position:absolute;right:10px;top:10px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:var(--sh-sm)}

/* ── Superpower + library ── */
.super{position:relative;isolation:isolate;background:#fff;overflow:clip;padding:clamp(72px,10vw,150px) var(--gut) clamp(56px,7vw,110px)}
.super-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.2vw,18px)}
.super-top .bloom{--y:42%;--sx:1.12;--sy:.72;--o:.62}
.t-super{font-size:clamp(46px,8.2vw,136px)}
.super-sub{position:relative;z-index:1;transition-delay:.85s;font:600 clamp(24px,3.2vw,48px)/1.15 var(--display);letter-spacing:-.03em;color:var(--ink);text-align:center}
.lib-wrap{position:relative;z-index:1}
.lib{--side:232px;position:relative;display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:620px;border-radius:clamp(20px,2vw,28px);overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05),0 0 0 1px rgba(16,24,40,.03);font:400 14px/1.3 var(--ui);color:#1d1d1f}
.lib-fallback{grid-column:1/-1;width:100%}
.lib-side{display:flex;flex-direction:column;min-width:0;padding:14px 12px 14px;background:#e9e9ed;border-right:1px solid rgba(0,0,0,.06)}
.lights{display:flex;gap:8px;padding:2px 4px 18px}
.lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.lights i:nth-child(2){background:#febc2e}
.lights i:nth-child(3){background:#28c840}
.lib-brand{display:flex;align-items:center;gap:9px;padding:0 6px 16px;font:700 18px/1 var(--ui);letter-spacing:-.02em}
.lib-brand img{width:28px;height:28px}
.lib-nav a,.lib-nav button{display:flex;align-items:center;gap:11px;width:100%;min-height:36px;padding:0 11px;border-radius:8px;font-size:15px;font-weight:500;color:inherit;text-decoration:none;text-align:left;transition:background var(--m-fast)}
.lib-nav a:hover,.lib-nav button:hover{background:rgba(0,0,0,.05)}
.lib-nav .on{background:rgba(42,91,245,.12);color:var(--blue-d)}
.lib-nav .i{width:19px;height:19px;color:#3a3a40}
.lib-nav .on .i{color:var(--blue-d)}
.lib-tree-h{display:flex;justify-content:space-between;align-items:center;margin:18px 11px 6px;font-size:13px;font-weight:600;color:#55555c}
.lib-tree-h .i{width:15px;height:15px}
.lib-tree li{display:flex;align-items:center;gap:7px;min-height:30px;padding:0 8px;font-size:14px;color:#3a3a40;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-tree .i{width:16px;height:16px;color:#6e6e73}
.lib-tree .i.ch-i{width:12px;height:12px;color:#6b6b72}
.lib-foot{margin-top:auto;padding-top:14px}
.lib-scan{display:flex;align-items:center;gap:8px;padding:0 8px 12px;font-size:14px;font-weight:600;color:var(--blue-d)}
.lib-scan .i{width:17px;height:17px}
.lib-me{display:flex;align-items:center;gap:9px;padding:0 4px;font-size:14px;font-weight:500}
.lib-me .av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#c6c6cf;color:#fff}
.lib-me .av .i{width:18px;height:18px}
.lib-me>.i{margin-left:auto;width:17px;height:17px;color:#55555c}
.lib-main{display:flex;flex-direction:column;min-width:0}
.lib-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:32px 30px 0}
.lib-head h4{margin:0;font:700 28px/1.1 var(--ui);letter-spacing:-.02em}
.lib-head p{margin-top:5px;font-size:14px;color:#55555c}
.lib-open{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 15px;border-radius:17px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
.lib-open .i{width:15px;height:15px}
.lib-tools{display:flex;align-items:center;gap:10px;padding:16px 30px 0;flex-wrap:wrap}
.lib-search{display:flex;align-items:center;gap:7px;flex:1 1 200px;max-width:280px;height:34px;padding:0 10px;border-radius:8px;background:#e6e6ea;color:#55555c}
.lib-search .i{width:16px;height:16px}
.lib-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 15px/1 var(--ui);color:#1d1d1f}
.lib-search input::placeholder{color:#55555c}
.lib-search:focus-within{box-shadow:0 0 0 2px var(--blue)}
.lib-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 11px;border-radius:7px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);font-size:14px;white-space:nowrap}
.lib-chip i{display:grid;place-items:center;width:17px;height:17px;border-radius:4px;background:var(--blue);color:#fff}
.lib-chip .i{width:12px;height:12px}
.lib-sp{flex:1}
.lib-link{font-size:14px;font-weight:500;color:var(--blue-d);padding:6px}
.lib-grid{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 16px;align-content:start;padding:18px 30px 22px}
.lc{position:relative;display:block;width:100%;text-align:left;border-radius:11px;min-width:0}
.lc-thumb{position:relative;display:block;aspect-ratio:1/.72;padding:8px;border-radius:11px;background:#e6e6ea;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);transition:box-shadow var(--m-fast)}
.lc-thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.lc-tick{position:absolute;right:7px;top:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);background:rgba(0,0,0,.14);color:#fff;transition:background var(--m-fast),border-color var(--m-fast)}
.lc-tick .i{width:12px;height:12px;stroke-width:3.4;opacity:0}
.lc.sel .lc-thumb{box-shadow:0 0 0 3px var(--blue)}
.lc.sel .lc-tick{background:var(--blue);border-color:var(--blue)}
.lc.sel .lc-tick .i{opacity:1}
.lc-n{display:block;margin-top:8px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-s{display:block;margin-top:2px;font-size:13px;color:#55555c}
.lib-none{grid-column:1/-1;padding:44px 0;text-align:center;font-size:16px;color:#55555c}
.lib-bar{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 30px;border-top:1px solid rgba(0,0,0,.06);background:#fafafc;font-size:14px;color:#3a3a44;flex-wrap:wrap}
.lib-bar span{font-variant-numeric:tabular-nums}
.lib-act{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border-radius:7px;background:#ececf0;font-size:14px;color:#6b6b72;transition:background var(--m-fast),color var(--m-fast)}
.lib-act .i{width:15px;height:15px}
.lib.has-sel .lib-act{background:#fff;color:#1d1d1f;box-shadow:0 0 0 .5px rgba(0,0,0,.14)}
.lib.has-sel .lib-act.trash{color:#c62a20}

/* ── Bento ── */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.s-5{grid-column:span 5}
.s-6{grid-column:span 6}
.s-7{grid-column:span 7}
.card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:clamp(20px,2vw,28px);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05),0 0 0 1px rgba(16,24,40,.03);scroll-margin-top:calc(var(--nav-h) + 16px)}
.card-t{padding:clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px) 0}
.card-t h3{font:var(--h3);letter-spacing:var(--h3-ls);color:var(--ink)}
.card-t p{margin-top:6px;font-size:18px;line-height:1.4;color:var(--mute)}
.card-v{flex:1;display:flex;flex-direction:column;min-width:0;padding:clamp(16px,1.8vw,24px) clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px)}
.card-v-bleed{padding:clamp(16px,1.8vw,24px) 0 0}
.card-note{margin:calc(clamp(20px,2.2vw,30px)*-.5) clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px);font-size:16px;line-height:1.45;color:var(--mute)}
.h-tag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tag-early{padding:.32em .6em;border-radius:.6em;background:linear-gradient(90deg,#7a2be6,#2a5bf5);color:#fff;font:700 15px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.stage-fallback{width:100%;border-radius:12px;box-shadow:var(--sh-sm)}

/* Viewer cards */
.mv,.rd{position:relative;flex:1;min-height:clamp(280px,27vw,360px);margin-top:clamp(16px,1.8vw,24px);overflow:hidden;background:#6d7681}
.mv-bg{position:absolute;inset:-12%;width:124%;height:124%;max-width:none;object-fit:cover;filter:blur(26px) saturate(1.25)}
.mv-tint{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.05),rgba(20,24,32,.28) 85%),rgba(104,112,124,.42)}
.mv-photo{position:absolute;left:50%;top:44%;width:min(62%,calc(66% * 1.5 * 1));max-height:70%;object-fit:cover;translate:-50% -50%;aspect-ratio:3/2;box-shadow:0 18px 44px rgba(0,0,0,.3)}
.mv-strip{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px}
.mv-strip img{width:clamp(44px,5vw,64px);aspect-ratio:3/2;object-fit:cover;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.24)}
.mv-strip img.on{box-shadow:0 0 0 2.5px #fff;transform:scale(1.04)}

.zd{position:relative;flex:1;display:flex;flex-direction:column;margin-top:clamp(16px,1.8vw,24px);min-height:clamp(280px,27vw,360px)}
.zd-view{position:relative;flex:1;min-height:0;overflow:hidden;background:#3c4a2c}
.zd-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:30% 42%}
.zd-chip{position:absolute;right:14px;bottom:70px;padding:.3em .6em;border-radius:.55em;background:rgba(255,255,255,.94);font:700 clamp(18px,1.8vw,24px)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.zd-range{flex:none;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 clamp(20px,2.2vw,30px);font-size:16px;font-weight:500;color:var(--text)}
.zd-range input{flex:1;min-width:0;height:28px;accent-color:var(--blue);cursor:pointer}

.fk{position:relative;flex:1;display:flex;flex-direction:column;margin-top:clamp(16px,1.8vw,24px);min-height:clamp(280px,27vw,360px)}
.fk-fallback{width:100%}
.fk-stage{position:relative;flex:1;min-height:210px;overflow:hidden;background:#6d7681}
.fk-photo{position:absolute;left:50%;top:40%;width:min(58%,300px);aspect-ratio:3/2;translate:-50% -50%;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.fk-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 280ms var(--ease)}
.fk-photo img.on{opacity:1}
.fk-strip{position:absolute;left:0;right:0;bottom:12px;height:48px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fk-track{position:absolute;left:50%;top:5px;display:flex;gap:8px;transform:translateX(calc(-1 * var(--i,0) * 64px - 28px));transition:transform 320ms var(--ease)}
.fk-th{flex:none;width:56px;height:38px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.24);transition:box-shadow var(--m-ui),transform var(--m-ui) var(--ease)}
.fk-th img{width:100%;height:100%;object-fit:cover}
.fk-th.on{box-shadow:0 0 0 2.5px #fff;transform:scale(1.05)}
.fk-keys{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:66px}
.fk-keys span{margin-left:6px;font-size:16px;color:var(--mute)}

.rd-photo{position:absolute;left:clamp(16px,4%,40px);top:50%;width:min(52%,380px);aspect-ratio:3/2;object-fit:cover;translate:0 -50%;box-shadow:0 18px 44px rgba(0,0,0,.3)}
.rd-rail{position:absolute;right:14px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:8px;z-index:2}
.rd-rail button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.93);color:#1d1d1f;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:background var(--m-fast),color var(--m-fast),transform var(--m-fast) var(--ease)}
.rd-rail button .i{width:21px;height:21px;stroke-width:1.6}
.rd-rail button:hover{background:#fff}
.rd-rail button.on{background:#fff;color:var(--blue);transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,255,255,.6),0 4px 14px rgba(0,0,0,.18)}
.rd-pop{position:absolute;right:70px;top:50%;width:216px;padding:8px;border-radius:14px;background:rgba(246,246,248,.98);color:#1d1d1f;box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.12);font-size:14px;line-height:1.3;translate:0 -50%;opacity:0;transform:translateX(10px) scale(.97);visibility:hidden;transition:opacity var(--m-ui) var(--ease),transform var(--m-ui) var(--ease),visibility 0s linear var(--m-ui);z-index:2}
.rd-pop.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.rd-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-weight:500}
.rd-row .i{width:18px;height:18px;color:var(--blue)}
.rd-row.pick{background:var(--blue);color:#fff}
.rd-row.pick .i{color:#fff}
.rd-head{padding:6px 10px 4px;font-weight:600;color:#55555c}
.rd-name{padding:6px 10px;font-size:15px;font-weight:700}
.rd-kv{display:flex;justify-content:space-between;gap:10px;padding:4px 10px}
.rd-kv span:first-child{color:#55555c}
.rd-kv span:last-child{font-weight:500}
.rd-link{padding:7px 10px 5px;font-weight:600;color:var(--blue-d)}
.rd-tip{width:auto;padding:6px 11px;background:rgba(20,20,24,.86);color:#fff;font-weight:600;border-radius:8px}

/* Shared demo parts */
.demo-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;min-height:52px;margin-top:auto;padding-top:14px}
.demo-foot [hidden]{display:none}
.do-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;font:600 16px/1.15 var(--ui);color:#fff;background:var(--blue);transition:background var(--m-fast),opacity var(--m-fast)}
.do-btn .i{width:18px;height:18px}
.do-btn:hover{background:var(--blue-d)}
.do-btn[disabled]{background:#c9ccd6;cursor:default;color:#3a3a44}
.do-btn.danger{background:#d9342b}
.do-btn.danger:hover{background:#c02a22}
.do-btn.quiet{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.do-btn.ok{background:var(--green)}
.result{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:600 clamp(16px,1.4vw,18px)/1.2 var(--display);letter-spacing:-.01em;color:var(--green)}
.result .i{width:20px;height:20px;stroke-width:2.6}
.sample{padding:3px 8px;border-radius:8px;background:#f1f1f4;font:600 14px/1.2 var(--ui);letter-spacing:0;color:#55555c}
.res-in{animation:resIn 420ms var(--ease-pop)}
@keyframes resIn{from{opacity:0;transform:translateY(10px) scale(.95)}}
.trash-tile{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:#f5f5f7;color:#3a3a44}
.trash-tile .i{width:24px;height:24px;stroke-width:1.6}
.trash-tile.bump{animation:bump 360ms var(--ease-io)}
@keyframes bump{50%{transform:scale(1.16)}}

/* Duplicates */
.dups{flex:1;display:flex;flex-direction:column}
.dp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-block:auto;padding-top:14px}
.dp{min-width:0}
.dp-stack{position:relative;display:block;aspect-ratio:3/2}
.dp-card{position:absolute;inset:0;padding:4px;border-radius:10px;background:#fff;box-shadow:0 8px 20px rgba(40,20,90,.16),0 0 0 1px rgba(0,0,0,.04)}
.dp-card img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.dp-copy{transform:translate(8%,-11%) rotate(5deg)}
.dp-check{position:absolute;right:-7px;top:-7px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green-b);color:#fff;box-shadow:0 5px 12px rgba(31,157,85,.4);transform:scale(0);transition:transform 420ms var(--ease-pop)}
.dp-check .i{width:16px;height:16px;stroke-width:3}
.dp-n{display:block;margin-top:10px;font-size:15px;font-weight:600;color:#1d1d1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-s{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:3px;font-size:14px;color:#55555c}
.tagc{padding:1px 7px;border-radius:6px;font-size:14px;font-weight:700;background:rgba(42,91,245,.1);color:var(--blue-d)}
.tagc.keep{background:rgba(31,157,85,.12);color:var(--green)}
.dups.done .dp-copy,.dups.done .dp-extra{visibility:hidden}
.dups.done .dp-check{transform:scale(1)}

/* Large files */
.lg{flex:1;display:flex;flex-direction:column}
.lg-top{font-size:17px;color:var(--mute)}
.lg-top b{font:700 clamp(26px,2.4vw,32px)/1 var(--display);letter-spacing:-.025em;color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.lg-bar{display:flex;gap:2px;height:10px;margin-top:10px;border-radius:5px;overflow:hidden;background:#eef0f5}
.lg-bar i{display:block;height:100%;transition:width 620ms var(--ease-io)}
.lg-row{padding-top:18px;margin-block:0 auto}
.lf{display:block;width:100%;min-width:0;text-align:left;border-radius:10px;transition:opacity 300ms linear,transform 300ms var(--ease-io)}
.lf-th{position:relative;display:block;aspect-ratio:3/2;padding:4px;border-radius:10px;background:#fff;box-shadow:0 8px 20px rgba(40,20,90,.14),0 0 0 1px rgba(0,0,0,.04);transition:box-shadow var(--m-fast)}
.lf-th img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.lf.sel .lf-th{box-shadow:0 8px 20px rgba(40,20,90,.14),0 0 0 3px var(--blue)}
.lf-doc{display:grid;place-items:center;width:100%;height:100%;border-radius:7px;background:#f0f0f4}
.lf-doc s{display:block;width:34%;height:76%;border-radius:3px;background:linear-gradient(#d0d0d8 0 0) 16% 70%/68% 5% no-repeat,linear-gradient(#d0d0d8 0 0) 16% 84%/44% 5% no-repeat,linear-gradient(#8fb2ff,#c4a6ff) 0 0/100% 48% no-repeat,#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.lf-tick{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.24);box-shadow:inset 0 0 0 1.5px #fff;color:#fff;transition:background var(--m-fast)}
.lf-tick .i{width:14px;height:14px;stroke-width:3;opacity:0}
.lf.sel .lf-tick{background:var(--blue);box-shadow:none}
.lf.sel .lf-tick .i{opacity:1}
.lf-s{display:block;margin-top:3px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--c)}
.lf.gone{opacity:0;transform:scale(.9);pointer-events:none}

/* Drive */
.drv{flex:1;display:flex;flex-direction:column;gap:12px}
.drv-card{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.drv-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(160deg,#e9f0ff,#d7e3ff);color:var(--blue)}
.drv-ico .i{width:26px;height:26px;stroke-width:1.7}
.drv-t{flex:1;min-width:130px}
.drv-t b{display:block;font-size:16px;font-weight:700;color:#1d1d1f}
.drv-t span{display:block;font-size:15px;color:#55555c}
.drv-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dg{position:relative;aspect-ratio:3/2;border-radius:6px;overflow:hidden;background:#e9eaef;animation:breathe .85s var(--ease-io) infinite alternate}
.dg img{width:100%;height:100%;object-fit:cover;opacity:0}
.drv.on .dg{animation:none}
.drv.on .dg img{opacity:1}
.seg{display:inline-flex;align-self:flex-start;gap:2px;padding:3px;border-radius:10px;background:#f1f1f4}
.seg button{min-height:34px;padding:0 12px;border-radius:7px;font-size:15px;font-weight:500;color:var(--text);transition:background var(--m-fast),color var(--m-fast)}
.seg button[aria-pressed=true]{background:#fff;color:var(--blue-d);box-shadow:var(--sh-sm)}
.seg[hidden]{display:none}

/* Folders */
.fm{flex:1;display:grid;grid-template-columns:clamp(214px,42%,240px) minmax(0,1fr);border-top:1px solid rgba(0,0,0,.07);background:#f5f5f7;color:#1d1d1f}
.fm-side{padding:12px 10px;background:#e9e9ed;min-width:0}
.fm-h{display:flex;align-items:center;justify-content:space-between;padding:0 6px 6px;font-size:15px;font-weight:600;color:#55555c}
.fm-add{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--blue-d)}
.fm-add:hover{background:rgba(0,0,0,.06)}
.fm-add .i{width:18px;height:18px}
.fm-tree button{display:flex;align-items:center;gap:6px;width:100%;min-height:34px;padding:0 6px;border-radius:8px;font-size:15px;text-align:left;color:#2f2f35;white-space:nowrap;overflow:hidden}
.fm-tree button span{overflow:hidden;text-overflow:ellipsis}
.fm-tree button:hover{background:rgba(0,0,0,.05)}
.fm-tree button.on{background:rgba(42,91,245,.14);color:var(--blue-d);font-weight:600}
.fm-tree .i{width:16px;height:16px;color:#6e6e73}
.fm-tree .on .i{color:var(--blue-d)}
.fm-tree .tw{width:11px;height:11px;transition:transform var(--m-fast);color:#6b6b72}
.fm-tree .open>.tw{transform:rotate(90deg)}
.fm-tree ul{padding-left:14px}
.fm-tree li.new>button{animation:resIn 420ms var(--ease-pop)}
.fm-main{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px clamp(14px,1.6vw,20px)}
.fm-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 10px}
.fm-title b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.fm-title span{font-size:14px;color:#55555c}
.fm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start;min-height:150px}
.fm-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:7px;background:#e6e6ea}
.fm-empty{grid-column:1/-1;align-self:center;padding:18px 6px;text-align:center;font-size:15px;color:#55555c}

/* ── Verbs: the one sticky scroll on the page ── */
.verbs{position:relative;height:480vh;background:#fff}
.verbs-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;isolation:isolate;overflow:clip;background:#fff;padding-top:calc(var(--nav-h) + clamp(8px,2vh,24px))}
.verbs-stick>.bloom{--y:24%;--sx:1.6;--sy:.72;--o:.72}
.verb-row{position:relative;flex:none;display:flex;justify-content:center;gap:clamp(20px,3vw,48px);padding:0 var(--gut)}
.verb{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.2vh,14px)}
.verb-chip{position:relative;z-index:1;display:grid;place-items:center;width:clamp(48px,6.4vh,72px);height:clamp(48px,6.4vh,72px);border-radius:28%;background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 12px 30px rgba(60,30,140,.16);transition:transform 520ms var(--ease-pop),opacity 240ms linear}
.verb-chip .i{width:54%;height:54%;stroke-width:1.7}
.js:not(.rm) .verb:not(.in) .verb-chip{transform:translateY(16px) scale(.4);opacity:.25}
.t-verb{font-size:clamp(38px,5.2vw,92px);white-space:nowrap}
.verb-stage{position:relative;z-index:1;flex:1;min-height:0;margin:clamp(6px,1.6vh,18px) var(--gut) 0}
.vc{position:absolute;left:50%;top:50%;width:var(--cw,240px);aspect-ratio:3/2;margin-left:calc(var(--cw,240px)/-2);margin-top:calc(var(--cw,240px)/-3);padding:calc(var(--cw,240px)*.012);border-radius:calc(var(--cw,240px)*.026);background:#fff;box-shadow:0 2vw 5vw rgba(40,20,90,.18);will-change:transform,opacity;opacity:0}
.vc img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--cw,240px)*.016)}
.vc-tick{position:absolute;right:-2%;top:-3%;display:grid;place-items:center;width:calc(var(--cw,240px)*.09);height:calc(var(--cw,240px)*.09);border-radius:50%;background:var(--green-b);color:#fff;opacity:0;box-shadow:0 6px 14px rgba(31,157,85,.4)}
.vc-tick .i{width:60%;height:60%;stroke-width:3}
.vf,.vt{position:absolute;left:50%;top:50%;opacity:0;will-change:transform,opacity}
.vf{display:inline-flex;align-items:center;gap:7px;height:38px;margin:-19px 0 0 -70px;width:140px;justify-content:center;border-radius:11px;background:#fff;box-shadow:var(--sh-sm);font-size:15px;font-weight:600;color:var(--ink)}
.vf .i{width:18px;height:18px;color:var(--blue)}
.vt{display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:18px;background:#fff;color:#3a3a44;box-shadow:0 12px 30px rgba(40,20,90,.16)}
.vt .i{width:32px;height:32px;stroke-width:1.6}
.verb-cap{position:relative;z-index:1;flex:none;min-height:3em;padding:clamp(6px,1.4vh,14px) var(--gut) clamp(10px,2.4vh,26px);text-align:center;font-size:clamp(18px,1.5vw,21px);line-height:1.35;color:var(--text)}
.verb-final{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--gut);pointer-events:none}

/* ── Plain sections ── */
.section{position:relative;isolation:isolate;background:#fff;overflow:clip;padding:clamp(44px,4.2vw,60px) 0}
.band{background:var(--wash);border-radius:clamp(24px,3.4vw,48px);margin-inline:clamp(8px,1vw,14px)}
.bento-feat{margin-top:clamp(12px,1.5vw,20px)}
.wrap{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(24px,3vw,40px)}
.sec-head h2{font:var(--h2);letter-spacing:var(--h2-ls);color:var(--ink)}
.sec-head.center{align-items:center;text-align:center}
.sec-split{flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.keys-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px clamp(24px,4vw,64px)}
.kr{display:flex;align-items:center;gap:18px;min-height:68px;border-bottom:1px solid var(--line);font-size:18px;color:var(--text)}
.kk{display:inline-flex;gap:6px;flex:none;min-width:150px}
.kk kbd{min-width:42px;height:42px;font-size:17px}
/* Benefits */
.bene{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.bene-in{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;height:100%}
.b-formats{grid-column:span 4}
.b-local{grid-column:span 2;grid-row:span 2;background:linear-gradient(170deg,#f4f1ff 0%,#eef4ff 46%,#fff 100%)}
.b-small{grid-column:span 2}
.b-small:nth-of-type(3),.b-small:nth-of-type(4){grid-column:span 2}
.bene h3{font:var(--h3);letter-spacing:var(--h3-ls);color:var(--ink)}
.bene p{margin-top:6px;font-size:18px;line-height:1.4;color:var(--mute)}
.bene .fine{font-size:15px;color:var(--mute);margin-top:auto;padding-top:14px}
.bene .chips{margin:14px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{padding:6px 11px;border-radius:10px;background:#f5f5f7;font-size:15px;font-weight:500;color:var(--text)}
.bene-ico{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:12px;background:#eef2ff;color:var(--blue)}
.bene-ico .i{width:23px;height:23px}
.bene-ico-lg{width:60px;height:60px;border-radius:18px;background:#fff;box-shadow:var(--sh-sm)}
.bene-ico-lg .i{width:32px;height:32px}
.local-list{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding-top:18px}
.local-list li{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:500;color:var(--text)}
.local-list .i{width:19px;height:19px;color:var(--blue);stroke-width:2.4}

/* Download */
.dl{position:relative;isolation:isolate;background:#fff;overflow:clip;padding:clamp(56px,6.4vw,92px) var(--gut);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.1vw,14px)}
.dl>.bloom{--y:40%;--o:.42;--sx:1.05;--sy:.66}
.dl>:not(.bloom){position:relative;z-index:1}
.dl>.dl-side{position:absolute;top:0;bottom:0;width:clamp(230px,25vw,400px)}
.dl-l{left:max(var(--gut),calc(50% - 720px))}
.dl-r{right:max(var(--gut),calc(50% - 720px))}
.dl-ph{position:absolute;display:block;object-fit:cover;border-radius:clamp(12px,1.3vw,18px);background:var(--wash);box-shadow:var(--sh-md)}
.dl-ph.a{width:64%;aspect-ratio:3/2;top:13%;left:4%;rotate:-5deg}
.dl-ph.b{width:42%;aspect-ratio:4/5;top:35%;left:54%;rotate:4deg;z-index:1}
.dl-ph.c{width:56%;aspect-ratio:3/2;top:62%;left:0;rotate:3deg}
.dl-ph.d{width:42%;aspect-ratio:4/5;top:10%;left:54%;rotate:5deg}
.dl-ph.e{width:64%;aspect-ratio:3/2;top:37%;left:2%;rotate:-4deg;z-index:1}
.dl-ph.f{width:54%;aspect-ratio:3/2;top:63%;left:44%;rotate:3deg}
.dl-bdg{position:absolute;z-index:2;display:grid;place-items:center;width:clamp(40px,3.6vw,52px);aspect-ratio:1;border-radius:clamp(11px,1vw,14px);background:#fff;box-shadow:var(--sh-md)}
.dl-bdg .i{width:56%;height:56%}
.dl-l .dl-bdg{top:9%;left:60%;rotate:7deg;color:var(--blue)}
.dl-r .dl-bdg{top:59%;left:36%;rotate:-6deg;color:var(--green)}
.dl-icon{width:clamp(60px,5.4vw,76px);height:auto}
.dl h2{font:var(--h2);letter-spacing:var(--h2-ls);color:var(--ink)}
.dl .lede{color:var(--text)}
.dl .btn{margin-top:8px}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:clamp(14px,1.8vw,26px)}
.steps li{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500;color:var(--text)}
.step-n{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm);font:700 15px/1 var(--display);color:var(--blue-d)}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;font:600 18px/1.3 var(--ui);color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-right:6px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--m-ui) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq p{padding:0 0 20px;font-size:18px;line-height:1.6;color:var(--body);max-width:38em}

/* Journal */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.post{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit}
.post-img{display:block;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--wash);box-shadow:var(--sh-md);margin-bottom:14px}
.post-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 520ms var(--ease)}
.post:hover .post-img img{transform:scale(1.03)}
.post-cat{font-size:16px;font-weight:500;color:var(--mute)}
.post-title{margin:4px 0 10px;font:600 clamp(20px,1.7vw,24px)/1.15 var(--display);letter-spacing:var(--h3-ls);color:var(--ink)}

/* End card: the library hangs from the top */
.endcard{position:relative;isolation:isolate;background:#fff;overflow:clip;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(14px,1.6vw,22px);padding:0 var(--gut) clamp(64px,8vw,112px)}
.endcard>.bloom{--y:clamp(120px,14vw,220px);--sx:1.3;--sy:.78;--o:.55}
.end-hang{position:relative;z-index:1;width:min(100%,1120px);height:clamp(150px,20vw,290px);overflow:hidden;border-radius:0 0 18px 18px;box-shadow:0 50px 70px -30px rgba(40,20,100,.3),0 10px 24px -12px rgba(40,20,100,.18)}
.end-hang .lib{position:absolute;left:0;right:0;bottom:0;min-height:0;border-radius:0;box-shadow:none;pointer-events:none}
.wordmark-end{margin-top:clamp(24px,3vw,48px);font-size:clamp(46px,6.4vw,100px)}
.end-lede{position:relative;z-index:1;color:var(--text)}
.endcard .btn{position:relative;z-index:1}
.endcard .meta{position:relative;z-index:1}

/* Footer */
.foot{padding:clamp(32px,4vw,56px) 0 calc(28px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px 48px}
.foot-brand p{margin-top:10px;max-width:24em;font-size:16px;color:var(--mute)}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 8px;align-content:flex-start}
.foot-nav a{padding:8px 10px;font-size:16px;font-weight:500;color:var(--text);text-decoration:none;border-radius:8px}
.foot-nav a:hover{background:var(--wash)}
.foot-legal{margin-top:20px}
.foot-legal p{font-size:15px;color:var(--mute)}

/* ── Static fallbacks: no JS, or reduced motion. Everything is simply laid out. ── */
html:not(.js) .bloom{--o:1}
html:not(.js) .verbs,.rm .verbs{height:auto}
html:not(.js) .verbs-stick,.rm .verbs-stick{position:relative;height:auto;gap:clamp(40px,6vw,80px);padding:clamp(64px,8vw,120px) var(--gut)}
html:not(.js) .verbs-stick>.bloom,.rm .verbs-stick>.bloom{--y:50%;--sy:1.1}
html:not(.js) .verb-stage,.rm .verb-stage,html:not(.js) .verb-cap,.rm .verb-cap{display:none}
html:not(.js) .verb-final,.rm .verb-final{position:relative;inset:auto}
.rm *,.rm *::before,.rm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.rm{scroll-behavior:auto}

/* ── Responsive: change the layout, don't shrink the text ── */
@media (max-width:1080px){
  .lib{--side:200px}
  .lib-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .faq-wrap{grid-template-columns:1fr}
  .s-5,.s-7{grid-column:span 6}
  .bene .b-formats{grid-column:span 6}
  .bene .b-local{grid-column:span 6;grid-row:auto}
  .bene .b-small{grid-column:span 3}
  .bene .b-small:last-child{grid-column:span 6}
  .dl>.dl-side{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:min(100%,460px)}
  .dl-l{display:flex;justify-content:center;align-items:center;order:-1;margin-bottom:10px}
  .dl-r,.dl-bdg,.dl-icon{display:none}
  .dl-ph.a,.dl-ph.b,.dl-ph.c{position:relative;top:auto;left:auto}
  .dl-ph.a{width:37%;margin-right:-5%;rotate:-6deg}
  .dl-ph.b{width:30%}
  .dl-ph.c{width:37%;margin-left:-5%;rotate:6deg}
}
@media (max-width:880px){
  .nav-links{display:none}
  .btn-nav{margin-left:auto}
  .nav-toggle{display:inline-flex}
  .s-5,.s-6,.s-7{grid-column:span 12}
}
@media (max-width:760px){
  :root{--nav-h:68px}
  .nav{top:8px}
  .nav-bar{height:56px;gap:6px;padding:0 6px 0 12px;border-radius:18px}
  .nav-long{display:none}
  .hero-top .bloom{--y:70px;--sx:.96;--sy:.8}
  .cta-row .btn{width:100%}
  .cta-row{width:100%;max-width:340px}

  /* Device becomes a tall card: the viewer stays usable at phone width */
  .mac{container-type:normal}
  .mac-base,.mac-notch,.menubar{display:none}
  .mac-lid{aspect-ratio:auto;height:min(132vw,calc(100svh - 150px));padding:0;border-radius:22px;box-shadow:var(--sh-lg);background:#6d7681}
  .mac-screen{border-radius:22px}
  .vw{--th-w:62px;--th-h:44px;--th-gap:8px;--rail-b:42px;container-type:size}
  .vw-photo{width:92%;max-height:100%}
  .vw-stage{top:62px;bottom:96px}
  .vw-rail{left:0;right:0;top:12px;flex-direction:row;justify-content:center;gap:8px}
  .vw-btn.hi::after{inset:-5px;border-width:2px}
  .vw-strip{bottom:26px;height:56px}
  .vw-track{top:6px}
  .vw-count{bottom:8px;font-size:13px}
  .vw-zoom{right:14px;bottom:88px;font-size:13px}
  .th{border-radius:6px}
  .th.on{box-shadow:0 0 0 2.5px #fff,0 4px 10px rgba(0,0,0,.25)}
  .vw-pop{left:12px;right:12px;top:64px;width:auto;transform-origin:top center}
  .vw-tip{top:62px!important;right:auto;left:50%;translate:-50% 0}
  .try-row{flex-direction:column;text-align:center;margin-top:24px}
  .try-keys{flex-wrap:wrap;justify-content:center}

  /* Cards */
  .band{margin-inline:0;border-radius:24px}
  .rd-photo{width:62%;left:12px;top:30%}
  .rd-rail{flex-direction:row;top:auto;bottom:12px;right:auto;left:50%;translate:-50% 0}
  .rd-pop{top:12px;right:12px;translate:0;width:min(62%,216px)}
  .rd{min-height:340px}
  .fm{grid-template-columns:1fr}
  .fm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg-key{font-size:15px}

  /* Library */
  .lib{display:flex;flex-direction:column;min-height:0}
  .lib-side{padding:12px;border-right:0;border-bottom:1px solid rgba(0,0,0,.06)}
  .lights{padding-bottom:10px}
  .lib-brand{padding-bottom:10px}
  .lib-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px}
  .lib-nav::-webkit-scrollbar{display:none}
  .lib-nav a,.lib-nav button{width:auto;flex:none;white-space:nowrap}
  .lib-tree-h,.lib-tree,.lib-foot{display:none}
  .lib-head{padding:18px 14px 0}
  .lib-head h4{font-size:24px}
  .lib-tools{padding:12px 14px 0}
  .lib-search{max-width:none;flex-basis:100%}
  .lib-sp{display:none}
  .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}
  .lib-bar{padding:8px 14px}
  .end-hang .lib-side{display:none}

  /* Verbs */
  .verbs{height:420vh}
  .verbs-stick>.bloom{--y:22%;--sx:1;--sy:.8}
  .verb-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 6px;width:100%}
  .t-verb{font-size:clamp(32px,10vw,52px)}
  .verb-chip{width:44px;height:44px}
  .vf{width:96px;margin-left:-48px;height:34px;margin-top:-17px;font-size:14px;gap:4px}
  .vf .i{width:15px;height:15px}

  .keys-grid{grid-template-columns:1fr}
  .kk{min-width:128px}
  .bene .b-small,.bene .b-small:last-child{grid-column:span 6}
  .posts{grid-template-columns:1fr}
  .btn-xl{width:100%;max-width:340px;font-size:20px;min-height:64px;padding:0 20px}
}
@media (max-width:360px){
  .brand span{font-size:17px}
  .btn-nav{padding:0 12px}
  .t-verb{font-size:30px}
}