/* Japanese handwriting: 夜の手書きフォント Yorutegaki by 夜 (https://x.com/gnash15_), subset to the characters the site uses.
   Re-run the subset (see CLAUDE.md) when new Japanese handwritten copy is added. */
@font-face{font-family:"Yorutegaki";src:url("/fonts/yorutegaki.woff2") format("woff2");font-weight:400;font-display:swap}
/* Niina's Lab — stylesheet
   Direction: a film lab's contact sheet. White space, ink type, films in viewfinder frames,
   prompts taped underneath. Sakura only as tape, dots and pencil marks (about 5%).

   Design rules (Niina, 2026-09-29) — use only these values:
   - Headings, golden ratio 1.618: 16 → 26 → 42 → 68 → 110 (one step smaller on phones)
   - UI text, 1.25: 13 → 16 → 20 → 25
   - Spacing, Fibonacci × 8: 8, 16, 24, 40, 64, 104, 168, 272
   - Frames 8:5 (≈ golden rectangle). Corners: squircle where supported (corner-shape), soft radius otherwise
   - Motion: spring, stiffness 150 / damping 22 (settles in ~0.7s, barely overshoots)
   - One 12-column grid for every page (8 on tablets, 4 on phones)
   Readability: body 16px / 1.75, lines ≤ 62ch (JA 34em), left-aligned, no italics, text ≥ 4.5:1. */

:root{
  --white:#FAFAF7; --paper:#F3F1EC; --ink:#111111; --line:#E4E1DA;
  --pencil:#8A8782; --pencil-text:#67635D; --text-2:#34322E;
  --sakura:#EDA9C0; --sakura-light:#F1B4C9; --sakura-deep:#E89FB7; --sakura-ink:#5E3A47;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --sans:"Instrument Sans","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --hand:"Reenie Beanie","Segoe Print","Bradley Hand",cursive;
  --latin-hand:"Reenie Beanie","Segoe Print","Bradley Hand",cursive;

  /* spacing: Fibonacci × 8 */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:168px; --s8:272px;
  /* headings (phone values; desktop below) */
  --h-display:68px; --h1:42px; --h2:26px; --h3:20px;
  /* UI */
  --t-lg:25px; --t-md:20px; --t-base:16px; --t-sm:13px;
  /* grid */
  --cols:4; --gutter:var(--s2); --pad:var(--s2); --max:1360px; --measure:62ch;
  /* corners (fallback) */
  --r-lg:8px; --r-md:8px; --r-sm:6px;
  /* motion */
  --spring:linear(0, 0.05, 0.163, 0.298, 0.434, 0.557, 0.663, 0.75, 0.819, 0.872, 0.912, 0.941, 0.962, 0.976, 0.986, 0.993, 0.997, 0.999, 1.001, 1.001, 1.002, 1.002, 1.001, 1.001, 1.001);
  --spring-t:.7s;
}
@media (min-width:640px){:root{--cols:8;--gutter:var(--s3);--pad:var(--s4)}}
@media (min-width:1024px){:root{--cols:12;--pad:var(--s5);--h-display:110px;--h1:68px;--h2:42px;--h3:26px}}
@supports (corner-shape:squircle){:root{--r-lg:12px;--r-md:11px;--r-sm:8px}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:var(--t-base);line-height:1.75;letter-spacing:.012em;word-spacing:.06em;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
p{margin:0 0 var(--s2)}
h1,h2,h3{font-weight:500;margin:0}
button{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--pencil-text);word-spacing:0;line-height:1.5}
.small{font-size:var(--t-sm);line-height:1.7;color:var(--pencil-text);margin:var(--s2) 0 0}
.small a{color:inherit;text-underline-offset:.2em}
.lead{font-size:var(--t-base);line-height:1.75;color:var(--text-2);max-width:var(--measure)}
@media (min-width:1024px){.lead{font-size:var(--t-md)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-only:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;background:var(--ink);color:var(--white);padding:8px 16px;z-index:100}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.phrase{display:inline-block}
.sakura{position:relative;background:linear-gradient(160deg,var(--sakura-light) 0%,var(--sakura) 50%,var(--sakura-deep) 100%);isolation:isolate}
.sakura::after{content:"";position:absolute;inset:0;background-image:var(--grain);mix-blend-mode:soft-light;opacity:.5;pointer-events:none;z-index:-1;border-radius:inherit}

/* squircle corners where the browser can draw them */
@supports (corner-shape:squircle){
  .frame,.player,.strip,.make,.soon-card,.kv,.field,.reel-card,.film-dialog video,.status,.card,.plan,.dev-note{corner-shape:squircle}
}

/* ---------- 12-column grid ---------- */
.grid12{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.grid12>[class*="span-"]{grid-column:1/-1}
@media (min-width:640px){
  .grid12>.span-2{grid-column:span 2}
  .grid12>.span-4,.grid12>.span-6{grid-column:span 4}
}
@media (min-width:1024px){
  .grid12>.span-2{grid-column:span 2}.grid12>.span-4{grid-column:span 4}.grid12>.span-5{grid-column:span 5}
  .grid12>.span-6{grid-column:span 6}.grid12>.span-7{grid-column:span 7}.grid12>.span-8{grid-column:span 8}
  .grid12>.span-10{grid-column:span 10}.grid12>.span-12{grid-column:span 12}
}
.cards{row-gap:var(--s5)}

/* ---------- buttons, links, tags ---------- */
.btn{font-size:var(--t-base);font-weight:500;letter-spacing:.005em;border-radius:var(--r-sm);padding:var(--s2) var(--s3);cursor:pointer;border:1px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);text-decoration:none;transition:transform var(--spring-t) var(--spring),background .2s ease;min-height:48px;white-space:nowrap;line-height:1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary .dot{width:8px;height:8px;border-radius:50%;background:var(--sakura);flex:none}
.btn-secondary{background:transparent;color:var(--ink)}
.btn-secondary:hover{background:var(--paper)}
.btn-sm{padding:var(--s1) var(--s2);min-height:40px;font-size:var(--t-sm)}
.btn-block{width:100%}
.link-scribble{position:relative;text-decoration:none;font-weight:500;padding:4px 2px;display:inline-block}
.link-scribble svg{position:absolute;left:-4px;bottom:-5px;width:calc(100% + 8px);height:12px;overflow:visible}
.link-scribble path{fill:none;stroke:var(--sakura-deep);stroke-width:3;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset .5s ease}
.link-scribble:hover path,.link-scribble:focus-visible path{stroke-dashoffset:0}
.text-btn{font-size:var(--t-base);background:none;border:none;padding:var(--s1) 0;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--pencil);text-underline-offset:5px;text-decoration-thickness:1.5px;display:inline-flex;align-items:center;gap:var(--s1)}
.text-btn:hover{text-decoration-color:var(--sakura-deep)}
.tag{font-family:var(--mono);font-size:var(--t-sm);padding:2px var(--s1);border:1px solid currentColor;border-radius:2px;text-transform:uppercase;letter-spacing:.04em;display:inline-block;line-height:1.5}
.more{font-size:var(--t-base);font-weight:500;text-decoration:none}
.more:hover{text-decoration:underline;text-decoration-color:var(--sakura-deep);text-underline-offset:5px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(250,250,247,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-header>.wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--s2)}
.brand img{height:32px;width:auto}
.nav{display:none;gap:var(--s4);font-size:var(--t-base)}
.nav a,.nav-mobile a{text-decoration:none;color:var(--ink);text-underline-offset:8px;text-decoration-thickness:2px}
.nav a:hover,.nav a[aria-current],.nav-mobile a[aria-current]{text-decoration:underline;text-decoration-color:var(--sakura-deep)}
.header-actions{display:flex;align-items:center;gap:var(--s2)}
.nav-mobile{display:flex;gap:var(--s3);overflow-x:auto;padding:0 var(--pad) var(--s2);font-size:var(--t-base);scrollbar-width:none}
.nav-mobile::-webkit-scrollbar{display:none}
.nav-mobile a{white-space:nowrap}
@media (max-width:400px){.nav-mobile{gap:var(--s2);font-size:var(--t-sm)}}
@media (min-width:1024px){.nav{display:flex}.nav-mobile{display:none}}
.lang-switch{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;flex:none}
.lang-switch a{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.06em;text-decoration:none;color:var(--pencil-text);padding:6px 10px;border-radius:var(--r-sm);line-height:1;min-width:36px;text-align:center;transition:background .2s ease,color .2s ease}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.on{background:var(--ink);color:var(--white)}

/* ---------- hero reel (motion design) ----------
   1 film · 2 prompt on frosted glass, copied · 3 glass generation screen → paste → generate → develops
   finale: film seen only through giant letters, camera dives into the M → back to 1 */
.reel{position:relative;width:100%;height:calc(100svh - var(--s6));min-height:600px;max-height:760px;overflow:hidden;background:var(--ink);color:var(--white);isolation:isolate}
@media (min-width:768px){.reel{height:min(92svh,56.25vw);min-height:560px;max-height:none}}
.reel-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.reel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(17,17,17,.55),rgba(17,17,17,0) 55%);transition:opacity .5s ease;pointer-events:none}

/* letters: rise one by one on a spring, blur → sharp; leaving words slip upwards */
.reel .ch{display:inline-block;will-change:transform}
.reel .sp{display:inline-block;width:.24em}
.reel-words{position:absolute;z-index:4;left:var(--s4);right:var(--s4);bottom:calc(var(--s5) + var(--s3));margin:0;height:1.12em;overflow:hidden;font-size:clamp(44px,11.5vw,var(--h-display));font-weight:500;font-stretch:78%;line-height:1.05;letter-spacing:-.035em;color:var(--white);transition:color .5s ease;pointer-events:none}
@media (min-width:1024px){.reel-words{left:var(--s5);bottom:var(--s6)}}
.reel-words .w{position:absolute;left:0;bottom:0;white-space:nowrap}
.reel-words .ch{transform:translateY(115%) rotate(10deg);filter:blur(8px);opacity:0;transition:transform .9s var(--spring),filter .6s ease,opacity .35s ease;transition-delay:calc(var(--i) * 38ms)}
.reel[data-scene="1"] .w1 .ch,.reel[data-scene="2"] .w2 .ch,.reel[data-scene="3"] .w3 .ch{transform:none;filter:none;opacity:1;transition-delay:calc(var(--i) * 38ms + .18s)}
.reel[data-scene="2"] .w1 .ch,.reel[data-scene="3"] .w1 .ch,.reel[data-scene="3"] .w2 .ch,.reel[data-phase="knock"] .w3 .ch{transform:translateY(-115%) rotate(-6deg);filter:blur(6px);opacity:0;transition-duration:.5s,.4s,.4s;transition-timing-function:cubic-bezier(.5,0,.75,0);transition-delay:calc(var(--i) * 22ms)}

/* 2 · prompt on frosted glass over the film */
.reel-pop{position:absolute;z-index:3;right:var(--s4);top:50%;width:min(420px,calc(100% - var(--s4) * 2));background:rgba(250,250,247,.5);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.55);color:var(--ink);border-radius:var(--r-md);padding:var(--s3);opacity:0;transform:translateY(calc(-50% + var(--s5))) scale(.94);transition:opacity .4s ease,transform .9s var(--spring)}
@media (min-width:1024px){.reel-pop{right:var(--s6)}}
@media (max-width:767px){.reel-pop{top:auto;bottom:calc(var(--s6) + var(--s5));transform:translateY(var(--s5)) scale(.94)}}
.reel-pop .mono{color:var(--text-2)}
.reel-pop p{font-family:var(--mono);font-size:var(--t-base);line-height:1.6;letter-spacing:0;word-spacing:0;margin:var(--s1) 0 var(--s2);clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.2,.7,.2,1) .2s}
.pop-copy{display:inline-flex;align-items:center;gap:var(--s1);border:1px solid var(--ink);border-radius:var(--r-sm);padding:var(--s1) var(--s2);font-size:var(--t-sm);font-weight:500;background:rgba(255,255,255,.6);transition:background .25s,color .25s}
.pop-copy svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pop-copy .check-icon,.pop-b{display:none}
.reel[data-phase="pop"] .reel-pop,.reel[data-phase="copied"] .reel-pop{opacity:1;transform:translateY(-50%)}
@media (max-width:767px){.reel[data-phase="pop"] .reel-pop,.reel[data-phase="copied"] .reel-pop{transform:none}}
.reel[data-phase="pop"] .reel-pop p,.reel[data-phase="copied"] .reel-pop p{clip-path:inset(0 0 0 0)}
.reel[data-phase="copied"] .pop-copy{background:var(--ink);color:var(--white)}
.reel[data-phase="copied"] .pop-copy .copy-icon,.reel[data-phase="copied"] .pop-a{display:none}
.reel[data-phase="copied"] .pop-copy .check-icon{display:block;stroke:var(--sakura)}
.reel[data-phase="copied"] .check-icon path{stroke-dasharray:30;stroke-dashoffset:30;animation:drawline .35s ease-out forwards}
.reel[data-phase="copied"] .pop-b{display:inline}

/* 3 · generation screen on glass; the film keeps playing, blurred, behind it */
.reel-app{position:absolute;inset:0;z-index:2;background:rgba(243,241,236,.62);-webkit-backdrop-filter:blur(28px) saturate(1.1);backdrop-filter:blur(28px) saturate(1.1);display:grid;place-items:center;
  padding:calc(var(--s5) + var(--s4)) var(--pad) calc(var(--s5) + var(--s3) + clamp(44px,11.5vw,var(--h-display)) + var(--s3));opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s;pointer-events:none}
@media (min-width:1024px){.reel-app{padding:var(--s6) var(--s6) calc(var(--s6) + var(--h-display) + var(--s2))}}
.app-win{width:min(980px,100%);background:rgba(255,255,255,.92);border:1px solid rgba(17,17,17,.12);border-radius:var(--r-lg);color:var(--ink);overflow:hidden;opacity:0;transform:translateY(var(--s5)) scale(.95);transition:transform 1s var(--spring),opacity .4s ease}
.app-bar{display:flex;align-items:center;gap:6px;padding:var(--s1) var(--s2);border-bottom:1px solid var(--line)}
.app-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.app-bar .mono{margin-left:var(--s1)}
.app-body{position:relative;display:grid;grid-template-columns:1fr;gap:var(--s3);padding:var(--s3)}
@media (min-width:768px){.app-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.app-left{display:flex;flex-direction:column;gap:var(--s1)}
.app-box{position:relative;min-height:calc(1.6em * 4 + var(--s2) * 2);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2);font-family:var(--mono);font-size:var(--t-sm);line-height:1.6;letter-spacing:0;word-spacing:0;transition:border-color .25s,box-shadow .25s,background .8s}
@media (min-width:1024px){.app-box{font-size:var(--t-base)}}
.app-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.reel.pasted .app-text{animation:unroll .6s cubic-bezier(.2,.7,.2,1)}
@keyframes unroll{from{clip-path:inset(0 0 100% 0);transform:translateY(6px)}to{clip-path:inset(0 0 0 0);transform:none}}
.app-placeholder{position:absolute;left:var(--s2);top:var(--s2);color:#8F8B84}
.caret{display:none;width:2px;height:1.1em;background:var(--ink);vertical-align:-.2em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.reel[data-phase="focus"] .app-box,.reel.pasted[data-phase="focus"] .app-box{border-color:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--sakura-deep)}
.reel[data-phase="focus"] .caret{display:inline-block}
.reel.pasted .app-placeholder,.reel[data-phase="focus"] .app-placeholder{display:none}
.reel.pasted[data-phase="focus"] .app-box{background:rgba(241,180,201,.18)}
.app-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);margin-top:var(--s1)}
.app-chip{font-family:var(--mono);font-size:var(--t-sm);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 12px}
.app-gen{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s1);background:var(--ink);color:var(--white);border-radius:var(--r-sm);padding:10px var(--s3);font-size:var(--t-sm);font-weight:500}
.app-gen .dot{width:8px;height:8px;border-radius:50%;background:var(--sakura)}
.gen-b{display:none}
.reel[data-phase="gen"] .gen-a,.reel[data-phase="reveal"] .gen-a{display:none}
.reel[data-phase="gen"] .gen-b,.reel[data-phase="reveal"] .gen-b{display:inline}
.reel[data-phase="gen"] .app-gen .dot{animation:blink .8s steps(1) infinite}
.app-preview{position:relative;aspect-ratio:16/9;border-radius:var(--r-sm);background:var(--paper);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2)}
/* the new film "develops": pale and soft first, then sharp */
.preview-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(16px) grayscale(1) brightness(1.5);transform:scale(1.05);transition:opacity .5s ease,filter 1.4s ease,transform 1.4s ease}
.reel[data-phase="reveal"] .preview-film{opacity:1;filter:none;transform:none}
.app-preview .reel-count{font-size:var(--t-base);color:var(--pencil-text);opacity:0;transition:opacity .3s}
.app-preview .reel-count b{color:var(--ink);font-weight:500}
.reel-bar{display:block;width:min(200px,60%);height:8px;border:1px solid var(--ink);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.reel-bar i{display:block;height:100%;width:0}
.reel[data-phase="gen"] .reel-count,.reel[data-phase="gen"] .reel-bar{opacity:1}
.reel[data-phase="gen"] .reel-bar i,.reel[data-phase="reveal"] .reel-bar i{width:100%;transition:width 1.8s steps(12)}
@media (max-width:767px){
  .app-right{position:absolute;inset:var(--s3);opacity:0;transition:opacity .3s}
  .app-preview{height:100%;aspect-ratio:auto}
  .reel[data-phase="gen"] .app-right,.reel[data-phase="reveal"] .app-right{opacity:1;background:#fff}
}
.keycap{position:absolute;left:50%;bottom:calc(var(--s6) + var(--s3));transform:translate(-50%,var(--s2)) scale(.9);background:var(--ink);color:var(--white);border-radius:var(--r-sm);padding:var(--s1) var(--s2);font-size:var(--t-base);letter-spacing:.08em;opacity:0;transition:opacity .2s,transform .6s var(--spring)}
.reel.key-on .keycap{opacity:1;transform:translate(-50%,0)}
.reel[data-scene="3"]:not([data-phase="knock"]) .reel-app{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.reel[data-scene="3"]:not([data-phase="knock"]) .app-win{opacity:1;transform:none;transition-delay:.08s}
.reel[data-scene="3"]:not([data-phase="knock"]) .reel-film{transform:scale(1.08)}
.reel[data-scene="3"]::before{opacity:0}

/* finale: knockout letters (white page with the film showing through the type) */
.reel-knock{position:absolute;inset:0;z-index:5;background:var(--white);mix-blend-mode:screen;display:grid;place-items:center;padding:0 var(--s3);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.knock-text{color:#000;font-weight:600;font-stretch:75%;font-size:22vw;line-height:.88;letter-spacing:-.045em;text-align:center}
@media (min-width:768px){.knock-text{font-size:min(15.5vw,34vh);white-space:nowrap}}
.knock-text .ch{transform:translateY(45%) scale(.92);opacity:0;transition:transform 1s var(--spring),opacity .4s ease;transition-delay:calc(var(--i) * 32ms)}
.reel.knock-on .reel-knock{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.reel.knock-on .knock-text .ch{transform:none;opacity:1}
.reel.dive .reel-knock{transform:scale(80);opacity:0;transition:transform 1.05s cubic-bezier(.7,0,.84,0),opacity .25s ease .85s,visibility 0s linear 1.1s}
.reel.knock-on .reel-pause{color:var(--ink);border-color:rgba(17,17,17,.4)}

/* cursor: X and Y ease differently, so it travels on a gentle curve */
.cur-x{position:absolute;z-index:6;left:0;top:0;transition:transform 1s cubic-bezier(.45,0,.25,1);pointer-events:none}
.cur-y{display:block;transition:transform 1s cubic-bezier(.15,.75,.3,1)}
.cursor{display:block;width:28px;height:28px;margin:-3px 0 0 -4px;opacity:0;transition:opacity .35s ease,scale .15s ease;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.cursor path{fill:var(--ink);stroke:var(--white);stroke-width:1.4;stroke-linejoin:round}
.reel.cur-on .cursor{opacity:1}
.reel.cur-down .cursor{scale:.84}
.click-ring{position:absolute;z-index:5;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid var(--sakura-deep);border-radius:50%;opacity:0;pointer-events:none}
.click-ring.go{animation:ring .55s ease-out}
@keyframes ring{from{opacity:1;scale:.3}to{opacity:0;scale:1.5}}

/* frame, labels, steps */
.reel-vf{position:absolute;z-index:4;inset:var(--s3);width:calc(100% - var(--s3) * 2);height:calc(100% - var(--s3) * 2);pointer-events:none;overflow:visible}
@media (min-width:1024px){.reel-vf{inset:var(--s4);width:calc(100% - var(--s4) * 2);height:calc(100% - var(--s4) * 2)}}
.reel-vf path{fill:none;stroke:rgba(250,250,247,.85);stroke-width:1.5;transition:stroke .5s ease}
.reel-top{position:absolute;z-index:4;top:var(--s4);left:var(--s4);right:var(--s4);display:flex;justify-content:space-between;gap:var(--s2);color:rgba(250,250,247,.9);transition:color .5s ease}
@media (min-width:1024px){.reel-top{top:var(--s5);left:var(--s5);right:var(--s5)}}
.reel-label{min-width:12ch;text-align:right}
.reel[data-scene="3"] .reel-words,.reel[data-scene="3"] .reel-steps{color:var(--ink)}
.reel[data-scene="3"] .reel-top{color:var(--pencil-text)}
.reel[data-scene="3"] .reel-vf path{stroke:rgba(17,17,17,.3)}
.reel[data-scene="3"] .reel-steps i{background:rgba(17,17,17,.15)}
.reel[data-scene="3"] .reel-pause{color:var(--ink);border-color:rgba(17,17,17,.4)}
.reel-steps{position:absolute;z-index:4;left:var(--s4);bottom:var(--s4);margin:0;padding:0;list-style:none;display:flex;gap:var(--s3);color:rgba(250,250,247,.9);transition:color .5s ease}
@media (min-width:1024px){.reel-steps{left:auto;right:calc(var(--s5) + var(--s5));bottom:var(--s5)}}
.reel-steps li{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-sm)}
.reel-steps i{position:relative;display:block;width:64px;height:2px;background:rgba(250,250,247,.3);overflow:hidden}
.reel-steps i::after{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left}
.reel[data-scene="1"] .st1 i::after{animation:fill 3.9s linear forwards}
.reel[data-scene="2"] .st1 i::after,.reel[data-scene="3"] .st1 i::after,.reel[data-scene="3"] .st2 i::after{transform:none}
.reel[data-scene="2"] .st2 i::after{animation:fill 2.1s linear forwards}
.reel[data-scene="3"] .st3 i::after{animation:fill 8.7s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.reel-pause{position:absolute;z-index:7;right:var(--s4);bottom:calc(var(--s4) - 12px);width:40px;height:40px;border-radius:50%;border:1px solid rgba(250,250,247,.6);background:transparent;color:var(--white);display:grid;place-items:center;cursor:pointer;transition:color .4s,border-color .4s}
@media (min-width:1024px){.reel-pause{right:var(--s5);bottom:calc(var(--s5) - 8px)}}
.reel-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.reel-pause .i-play{display:none;fill:currentColor;stroke:none}
.reel.is-paused .i-pause{display:none}.reel.is-paused .i-play{display:block}
.reel-pause:focus-visible{outline-color:currentColor}
/* no motion: film and all three words, nothing moving */
.reel-static .reel-words{height:auto}
.reel-static .reel-words .w{position:static;display:block}
.reel-static .reel-words .ch{transform:none;filter:none;opacity:1}
.reel-static .reel-steps,.reel-static .reel-pause,.reel-static .reel-pop,.reel-static .reel-app,.reel-static .cur-x,.reel-static .reel-knock{display:none}

/* ---------- intro under the reel ---------- */
.intro{padding-top:var(--s6);row-gap:var(--s2);align-items:start}
@media (max-width:1023px){.intro{padding-top:var(--s5)}}
.hello-hand{font-family:var(--latin-hand);font-size:var(--h1);line-height:1;transform:rotate(-6deg);transform-origin:left center;margin:0}
.intro .lead:last-child{margin-bottom:0}
.intro-cta{display:flex}
@media (min-width:1024px){.intro-cta{justify-content:flex-end;padding-top:var(--s1)}}

/* ---------- blocks ---------- */
.block{padding-top:var(--s6)}
@media (max-width:1023px){.block{padding-top:var(--s5)}}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s4)}
.block-head h2{font-size:var(--h2);font-stretch:85%;letter-spacing:-.02em;line-height:1.05}

/* ---------- film frame ---------- */
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);aspect-ratio:8/5;color:var(--white)}
.frame .loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vf{position:absolute;inset:var(--s2);width:calc(100% - var(--s4) + var(--s1));height:calc(100% - var(--s4) + var(--s1));pointer-events:none;overflow:visible}
.vf path{fill:none;stroke:rgba(250,250,247,.9);stroke-width:1.5}
.frame-no,.frame-time{position:absolute;top:var(--s3);color:rgba(250,250,247,.95);text-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.frame-no{left:calc(var(--s3) + var(--s1))}.frame-time{right:calc(var(--s3) + var(--s1))}
.play{position:absolute;left:var(--s3);bottom:var(--s3);width:56px;height:56px;border-radius:50%;border:none;background:var(--white);display:grid;place-items:center;cursor:pointer;transition:transform var(--spring-t) var(--spring)}
.play:hover{transform:scale(1.08)}
.play:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.play-icon{width:20px;height:20px;margin-left:3px}
.play-icon path{fill:var(--ink)}
.frame-empty{background:var(--paper);color:var(--ink);display:grid;place-items:center}
.frame-empty .vf path{stroke:var(--pencil)}
.frame-empty .frame-no{color:var(--pencil-text);text-shadow:none}
.frame-note{color:var(--pencil-text)}

/* ---------- prompt strip: same height everywhere ---------- */
.strip{position:relative;background:#fff;border:1px solid var(--ink);border-radius:var(--r-md)}
.tape{position:absolute;top:-10px;right:30%;width:72px;height:18px;transform:rotate(-4deg);border-radius:1px;opacity:.92;z-index:1}
.strip-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);padding:var(--s1) var(--s1) var(--s1) var(--s2);border-bottom:1px solid var(--line);min-height:56px}
.strip pre{margin:0;padding:var(--s2) var(--s2) 0;border-bottom:var(--s2) solid transparent;font-family:var(--mono);font-size:var(--t-base);line-height:1.6;letter-spacing:0;word-spacing:0;white-space:pre-wrap;word-break:break-word;
  height:calc(1.6em * 5 + var(--s2) * 2);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.strip-full pre{height:auto;display:block;-webkit-line-clamp:unset;padding-bottom:var(--s2);border-bottom:0}
.copy{display:inline-flex;align-items:center;gap:var(--s1);min-height:40px;padding:0 var(--s2);border:1px solid var(--ink);border-radius:var(--r-sm);background:#fff;font-size:var(--t-sm);font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease,transform var(--spring-t) var(--spring)}
.copy:hover{background:var(--paper)}
.copy:active{transform:scale(.95)}
.copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.copy .check-icon{display:none}
.copy.copied{background:var(--ink);color:var(--white)}
.copy.copied .copy-icon{display:none}
.copy.copied .check-icon{display:block;stroke:var(--sakura)}
.copy.copied .check-icon path{stroke-dasharray:30;stroke-dashoffset:30;animation:drawline .35s ease-out forwards}

/* ---------- prompt card: title → film → prompt ---------- */
.pcard,.wcard{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.wcard{text-decoration:none;gap:var(--s2)}
.pcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.hand-title{font-family:var(--latin-hand);font-size:var(--h1);font-weight:400;line-height:1;letter-spacing:.01em;margin:0}
@media (min-width:1024px){.hand-title{font-size:calc(var(--h2) * 1.25)}}
.hand-title a{text-decoration:none}
.hand-title a:hover,.wcard:hover .hand-title{text-decoration:underline;text-decoration-color:var(--sakura-deep);text-decoration-thickness:2px;text-underline-offset:6px}
.pcard-foot{display:flex;justify-content:space-between;gap:var(--s2)}

/* ---------- Higgsfield card ---------- */
.make{background:var(--paper);border-radius:var(--r-md);padding:var(--s3)}
.make .mono{display:block}
.make-model{display:block;font-size:var(--t-lg);font-weight:500;letter-spacing:-.01em;line-height:1.2;margin:var(--s1) 0 var(--s2)}
.make p{color:var(--text-2)}
.make .btn{width:100%;white-space:normal;text-align:center}

/* ---------- tools + workflow ---------- */
.tools{list-style:none;margin:0;padding:0}
.tools li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line)}
.tools li:last-child{border-bottom:1px solid var(--line)}
.tools b{font-size:var(--t-md);font-weight:500}
.tools a{text-decoration:none}
.tools a:hover b{text-decoration:underline;text-decoration-color:var(--sakura-deep);text-underline-offset:5px}
.soon-col{padding-top:var(--s5)}
@media (min-width:1024px){.soon-col{padding-top:calc(var(--h2) * 1.05 + var(--s4))}}
.soon-card{position:relative;background:var(--paper);border-radius:var(--r-lg);padding:var(--s4) var(--s3) var(--s3)}
.soon-card h3{font-size:var(--h3);letter-spacing:-.01em;line-height:1.25;margin:0 0 var(--s1)}
.soon-card p{color:var(--text-2);margin:0}
.soon-tag{position:absolute;top:-12px;left:var(--s3);transform:rotate(-3deg);background:linear-gradient(160deg,var(--sakura-light),var(--sakura-deep));border-color:transparent;color:var(--sakura-ink);padding:4px 10px}

/* ---------- inner pages ---------- */
.page-head{padding:var(--s5) 0 var(--s4);row-gap:var(--s2)}
@media (min-width:1024px){.page-head{padding:var(--s6) 0 var(--s5)}}
.page-head h1{font-size:var(--h1);font-stretch:85%;letter-spacing:-.025em;line-height:1.05}
.page-head .lead{margin:0}
.page-head h1.hand-h1{font-family:var(--latin-hand);font-weight:400;font-size:var(--h1);font-stretch:100%;letter-spacing:.01em;line-height:1}
@media (min-width:1024px){.page-head h1.hand-h1{font-size:var(--h-display)}}
.player{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.player video{position:absolute;inset:0;width:100%;height:100%}
.detail{margin-top:var(--s5);row-gap:var(--s4);align-items:start}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.kv div{background:#fff;padding:var(--s2)}
.kv b{display:block;font-weight:500;font-size:var(--t-base)}
.tip{padding-left:var(--s2);border-left:3px solid var(--sakura-deep)}
.tip p{margin:var(--s1) 0 0;color:var(--text-2)}
.prose p{color:var(--text-2)}
.thesis{position:relative;font-size:var(--h2);font-weight:500;font-stretch:88%;letter-spacing:-.02em;line-height:1.2;margin:0 0 var(--s5)}
.thesis-scrib{display:inline-block;width:.9em;height:.7em;vertical-align:-.05em;margin-left:.15em}
.pillars{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s3) 0 var(--s4)}
.faq details{border-top:1px solid var(--line);padding:var(--s3) 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:var(--t-md);font-weight:500;line-height:1.5;list-style:none;display:flex;justify-content:space-between;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--pencil-text)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:var(--s2) 0 0;color:var(--text-2)}
.legal section{padding:var(--s3) 0;border-top:1px solid var(--line)}
.legal h2{font-size:var(--t-md);line-height:1.4;margin:0 0 var(--s1)}
.legal p{color:var(--text-2)}
.legal>.mono{display:block;padding-top:var(--s3);border-top:1px solid var(--line)}

/* ---------- forms ---------- */
.flabel{font-size:var(--t-base);font-weight:500;color:var(--ink);padding:0}
.field{font:inherit;font-size:var(--t-base);width:100%;padding:var(--s2);border:1px solid var(--ink);border-radius:var(--r-sm);background:#fff;color:var(--ink);min-height:56px;-webkit-appearance:none;appearance:none;letter-spacing:.01em;transition:box-shadow .2s ease}
textarea.field{line-height:1.75;resize:vertical}
.field::placeholder{color:#8F8B84}
.field:focus{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--sakura-deep)}
.form-error{margin:var(--s1) 0 0;font-size:var(--t-base);color:var(--ink);display:flex;gap:var(--s1);align-items:baseline}
.form-error::before{content:"\2715";font-family:var(--mono);font-size:11px;color:var(--sakura-ink);font-weight:500}
.wobble{animation:wobble .42s ease-in-out}
@keyframes wobble{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-.6deg)}45%{transform:translateX(5px) rotate(.5deg)}70%{transform:translateX(-3px)}}
.contact-form{row-gap:var(--s4)}
.field-group{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.field-group[hidden],.choice-set[hidden]{display:none}
.choice-set{border:none;margin:0;padding:0;min-width:0}
.choice-set legend{margin-bottom:var(--s2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:var(--s1) var(--s2);min-height:44px;line-height:26px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:var(--t-base);transition:background .2s ease,color .2s ease,border-color .2s ease,transform var(--spring-t) var(--spring)}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.chip input:active+span{transform:scale(.96)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
.form-foot .small{margin:0}
.thanks-head .hand{margin-bottom:var(--s1)}

/* busy buttons: the dot becomes a tiny scribble being drawn */
.mini-scribble{display:none;width:22px;height:17px}
.mini-scribble path{fill:none;stroke:var(--sakura);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.3s ease-in-out infinite}
.text-btn .mini-scribble path{stroke:var(--sakura-deep)}
.is-busy .dot{display:none}
.is-busy .mini-scribble{display:block}
.is-busy{cursor:progress}

/* ---------- sign in ---------- */
.auth{max-width:440px;margin:0 auto;padding:var(--s4) 0 var(--s3)}
.auth-top{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:var(--s1);margin-bottom:var(--s4)}
.hand-wrap{display:flex;align-items:flex-start;gap:var(--s1);min-height:64px}
.hand-wrap .arrow-down{width:40px;height:40px;margin-top:var(--s3);flex:none}
.hand-wrap .s-a{width:16px;height:16px;margin:-4px 0 0 var(--s1)}
.hand-wrap .s-b{width:10px;height:10px;margin-top:var(--s3);animation-delay:.7s}
.auth-title{font-size:var(--h1);font-stretch:88%;letter-spacing:-.02em;line-height:1.1;margin:var(--s2) 0 var(--s2)}
.auth-sub{color:var(--text-2);margin:0 0 var(--s3)}
.auth-sub b{font-weight:500;color:var(--ink)}
.auth-form{display:flex;flex-direction:column;gap:var(--s1)}
.auth-form label{color:var(--ink)}
.auth-form .btn-block{margin-top:var(--s1);min-height:56px}
.code-field{font-family:var(--mono);font-size:var(--t-lg);letter-spacing:.42em;text-align:center;padding-left:calc(16px + .42em)}
.auth-foot{margin-top:var(--s4);color:var(--text-2)}
.auth-alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s2);margin-top:var(--s3)}
.countdown{display:flex;gap:var(--s1);align-items:baseline;margin:calc(var(--s2) * -1) 0 var(--s3)}
.countdown b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.countdown.is-over b{color:var(--sakura-ink)}
.dev-note{position:relative;display:flex;flex-direction:column;gap:var(--s1);background:var(--paper);border:1px dashed var(--pencil);border-radius:var(--r-sm);padding:var(--s3) var(--s2) var(--s2);margin:0 0 var(--s3);transform:rotate(-1.2deg)}
.dev-note .tape{top:-9px;left:50%;right:auto;width:80px;margin-left:-40px;transform:rotate(3deg)}
.dev-code{font-family:var(--mono);font-size:var(--t-lg);font-weight:500;letter-spacing:.18em;color:var(--ink);user-select:all}
.dev-small{text-transform:none;letter-spacing:0}

/* ---------- hand-drawn bits ---------- */
.hand{font-family:var(--hand);font-weight:400;line-height:1;margin:0;color:var(--ink);letter-spacing:.01em}
.hand-lg{font-size:var(--h1);transform:rotate(-3deg);transform-origin:left bottom}
.hand-xl{font-size:clamp(64px,18vw,var(--h-display));transform:rotate(-4deg)}
.write{display:inline-block;clip-path:inset(-20% 100% -20% 0);animation:write 1.1s cubic-bezier(.6,.1,.3,1) .15s forwards}
@keyframes write{to{clip-path:inset(-20% -5% -20% 0)}}
.star{width:14px;height:14px;display:inline-block;flex:none}
.star path{fill:var(--ink);stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.twinkle{animation:twinkle 2.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:rotate(0) scale(1)}40%{transform:rotate(18deg) scale(.82)}70%{transform:rotate(-8deg) scale(1.06)}}
.doodle-arrow path{fill:none;stroke:var(--sakura-deep);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:drawline .6s ease-out 1.05s forwards}
.doodle-arrow path+path{animation-delay:1.5s}
@keyframes drawline{to{stroke-dashoffset:0}}
.loader{width:120px;height:90px}
.loader path{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:600}55%{stroke-dashoffset:0}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* ---------- member entrance (/lab, not linked yet) ---------- */
.lab section{padding-top:var(--s6)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--s1) var(--s2);border-top:1px solid var(--ink);padding-top:var(--s2);margin-bottom:var(--s4)}
.sec-head h2{font-size:var(--h2);letter-spacing:-.01em;line-height:1.2}
.sec-head .left{display:flex;gap:var(--s2);align-items:baseline}
.lab-hero{padding-top:var(--s4)}
.lab-hero-top{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.lab-stage{position:relative;padding:var(--s4) 0 var(--s1)}
.lab-stage .hand{display:inline-block}
.floaters{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.floaters .f{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-sm);animation:bob 4s ease-in-out infinite}
.floaters .f2{animation-delay:-1s}.floaters .f3{animation-delay:-2s}.floaters .f4{animation-delay:-3s}.floaters .f5{animation-delay:-1.5s}
.floaters .f .star{width:11px;height:11px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (min-width:1024px){
  .lab-stage{min-height:272px;display:flex;align-items:center;justify-content:center;padding:0}
  .floaters{position:absolute;inset:0;margin:0;display:block}
  .floaters .f{position:absolute;flex-direction:column-reverse;gap:4px}
  .floaters .f1{left:14%;top:16%}.floaters .f2{right:18%;top:10%}.floaters .f3{left:6%;bottom:22%}
  .floaters .f4{right:8%;bottom:30%}.floaters .f5{left:44%;bottom:2%}
}
.lab-lead{max-width:var(--measure);color:var(--text-2);margin:var(--s3) 0 0}
.status{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:var(--s3);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);max-width:680px}
.status p{margin:0;color:var(--text-2)}
.grid{display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.shelves{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card .media{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;aspect-ratio:8/5;padding:var(--s2)}
.card .media.paper{background:var(--paper)}
.card .media .soon{position:absolute;top:var(--s2);right:var(--s2)}
.card .body{padding:var(--s2) var(--s2) var(--s3)}
.card h3{font-size:var(--t-md);line-height:1.35;margin:4px 0 var(--s1)}
.card p{color:var(--text-2);margin:0}
.shelf-count{font-family:var(--mono);font-size:var(--h2);line-height:1;color:var(--pencil-text);letter-spacing:-.02em}
.account{max-width:680px;margin-bottom:var(--s3)}
.break{overflow-wrap:anywhere}
.account-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.account-actions form{margin:0}
.help-line{margin-top:var(--s3);text-transform:none;letter-spacing:0}
.enter-overlay{position:fixed;inset:0;z-index:50;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);animation:lift .5s cubic-bezier(.7,0,.3,1) 1.35s forwards;pointer-events:none}
.enter-overlay .loader path{animation-duration:1.4s;animation-iteration-count:1;animation-fill-mode:forwards}
.enter-overlay .counter b{color:var(--ink);font-weight:500}
@keyframes lift{to{transform:translateY(-100%);visibility:hidden}}
.plan{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s2)}
.plan.featured{border:1.5px solid var(--ink)}
.plan h3{font-size:var(--t-md)}
.plan .amt{font-size:var(--h2);font-weight:500;letter-spacing:-.02em}
.plan .amt small{font-size:var(--t-sm);color:var(--pencil-text);font-weight:400}
.plan ul{margin:0;padding-left:18px;color:var(--text-2)}
.plan .btn{margin-top:auto}

/* ---------- film dialog ---------- */
.film-dialog{border:none;padding:0;background:transparent;width:min(1100px,94vw);max-height:90vh;overflow:visible}
.film-dialog::backdrop{background:rgba(17,17,17,.88)}
.film-dialog video{width:100%;max-height:84vh;border-radius:var(--r-lg);background:var(--ink)}
.film-dialog form{position:absolute;top:calc(var(--s5) * -1);right:0;margin:0}
.dialog-close{width:40px;height:40px;border-radius:50%;border:none;background:var(--white);font-size:24px;line-height:1;cursor:pointer}

/* ---------- footer ---------- */
.site-footer{margin-top:var(--s7);border-top:1px solid var(--ink);padding:var(--s4) 0}
@media (max-width:1023px){.site-footer{margin-top:var(--s6)}}
.footer-cols{row-gap:var(--s4)}
.site-footer img{height:88px;width:auto}
.footer-tag{color:var(--text-2);margin:var(--s2) 0 0;max-width:320px}
.site-footer ul{list-style:none;margin:var(--s1) 0 0;padding:0;line-height:2.1}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .fine{display:flex;justify-content:space-between;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}

/* ---------- Japanese pages ---------- */
html[lang=ja]{--sans:"Instrument Sans","Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;--hand:"Yorutegaki","Reenie Beanie",cursive;--measure:34em}
html[lang=ja] body{line-height:1.9;letter-spacing:.04em;word-spacing:0;font-feature-settings:"palt"}
html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3,html[lang=ja] .thesis{letter-spacing:.01em;word-break:auto-phrase}
html[lang=ja] p,html[lang=ja] li,html[lang=ja] summary{word-break:auto-phrase;line-break:strict}
html[lang=ja] .page-head h1{font-size:calc(var(--h1) * .8);line-height:1.3}
html[lang=ja] .page-head h1.hand-h1{font-size:var(--h1);line-height:1}
@media (min-width:1024px){html[lang=ja] .page-head h1.hand-h1{font-size:var(--h-display)}}
html[lang=ja] .block-head h2{font-size:calc(var(--h2) * .8);line-height:1.3}
html[lang=ja] .thesis{font-size:calc(var(--h2) * .75);line-height:1.6}
html[lang=ja] .auth-title{font-size:calc(var(--h1) * .7);line-height:1.3}
html[lang=ja] .hand-lg{font-size:calc(var(--h2) * 1.1)}
html[lang=ja] .hand-xl{font-size:clamp(44px,12vw,var(--h1))}
html[lang=ja] .lead,html[lang=ja] .prose p,html[lang=ja] .faq p,html[lang=ja] .legal p{line-height:1.95}
html[lang=ja] [lang=en]{letter-spacing:.012em}

@media (max-width:400px){.brand img{height:28px}.lang-switch a{padding:6px 8px;min-width:32px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.write{clip-path:none}.doodle-arrow path{stroke-dashoffset:0}.enter-overlay{display:none}html{scroll-behavior:auto}}
.strip-head .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.copy svg{flex:none}
.copy{flex:none}
@media (max-width:639px){.reel-top span:first-child{display:none}.reel-top{justify-content:flex-end}.knock-text{font-size:30vw;line-height:.86}}
.reel .wd{display:inline-block;white-space:nowrap}

/* ---------- scroll reveal: sections rise gently into place ---------- */
.js [data-reveal]{opacity:0;transform:translateY(var(--s5));transition:opacity .8s ease,transform 1.1s var(--spring);transition-delay:calc(var(--rd, 0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none}


@media (min-width:1024px){.grid12>.span-3{grid-column:span 3}}

/* ---------- lab hero: explainer motion (src/lab-reel.tsx) ----------
   A fixed design stage scaled as one piece. L = 1600×900, P = 900×1200 (phones).
   Moves: --snap (expo-out: very fast start, soft landing) for entrances, --suck (ease-in) for exits. */
.lx{--snap:cubic-bezier(.16,1,.3,1);--suck:cubic-bezier(.7,0,.84,0);position:relative;margin-top:var(--s3);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.lx-stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;color:var(--ink);background:#fff;overflow:hidden}
.lx[data-layout="P"] .lx-stage{width:900px;height:1200px}
.lx-stage.reset,.lx-stage.reset *{transition:none!important;animation:none!important}
.lx-grid{position:absolute;inset:0;background-image:radial-gradient(circle,#DEDAD2 1.4px,transparent 1.6px);background-size:32px 32px;background-position:16px 16px}
.lx-cross{position:absolute;width:22px;height:22px}
.lx-cross::before,.lx-cross::after{content:"";position:absolute;background:var(--pencil)}
.lx-cross::before{left:10px;top:0;width:1.5px;height:22px}.lx-cross::after{top:10px;left:0;height:1.5px;width:22px}
.x1{left:28px;top:28px}.x2{right:28px;top:28px}.x3{left:28px;bottom:28px}.x4{right:28px;bottom:28px}
.lx-hud-top,.lx-hud-bottom{position:absolute;left:72px;right:72px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--pencil-text)}
.lx-hud-top{top:44px}.lx-hud-bottom{bottom:52px}
.lx[data-layout="P"] .lx-hud-top,.lx[data-layout="P"] .lx-hud-bottom{left:60px;right:60px;font-size:18px}
.lx-tc{font-variant-numeric:tabular-nums}
.lx-progress{position:absolute;left:0;right:0;bottom:-18px;height:2px;background:var(--line);overflow:hidden}
.lx-progress::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.lx:not(.paused) .lx-stage:not([data-s="0"]) .lx-progress::after{animation:lxprog 19s linear forwards}
@keyframes lxprog{to{transform:scaleX(1)}}

.lx-mask{display:block;overflow:hidden;padding:0 0 .1em}
.lx-up{display:inline-block;transform:translateY(112%);transition:transform .7s var(--snap);transition-delay:var(--d,0ms)}

/* 1 · Welcome in. */
.lx-welcome{position:absolute;left:0;right:0;top:330px;text-align:center;font-size:176px;font-weight:500;font-stretch:78%;letter-spacing:-.045em;line-height:1;transition:transform .4s var(--suck),opacity .4s var(--suck),filter .4s}
.lx[data-layout="P"] .lx-welcome{top:470px;font-size:132px}
.lx-ch{display:inline-block;white-space:pre;transform:translateY(108%);transition:transform .8s var(--snap);transition-delay:calc(var(--i) * 30ms)}
.lx-uline{display:block;width:540px;height:10px;margin:22px auto 0;border-radius:5px;background:linear-gradient(90deg,var(--sakura-light),var(--sakura-deep));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--snap) .5s}
.lx[data-layout="P"] .lx-uline{width:420px}
.lx-stage[data-s="1"] .lx-ch{transform:none}
.lx-stage[data-s="1"] .lx-uline{transform:scaleX(1)}
.lx-stage:not([data-s="0"]):not([data-s="1"]) .lx-welcome{transform:translateY(-90px);opacity:0;filter:blur(8px)}

/* 2 · three pictures */
.lx-head{position:absolute;left:120px;top:104px}
.lx[data-layout="P"] .lx-head{left:60px;top:104px}
.lx-small{font-size:34px;color:var(--pencil-text);letter-spacing:-.005em}
.lx-big{font-size:96px;font-weight:500;font-stretch:80%;letter-spacing:-.035em;line-height:1}
.lx[data-layout="P"] .lx-big{font-size:84px}
.lx-stage:is([data-s="2"],[data-s="3"]) .lx-head .lx-up{transform:none}
.lx-stage:is([data-s="4"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]) .lx-head .lx-up{transform:translateY(-112%);transition-duration:.4s;transition-timing-function:var(--suck)}

.lx-card{position:absolute;top:330px;width:275px;height:440px;border-radius:22px;overflow:hidden;background:#F4F4F2;border:1px solid var(--line);
  opacity:0;transform:translateX(1100px) rotate(10deg);filter:blur(16px);
  transition:transform .8s var(--snap) var(--d),opacity .25s ease var(--d),filter .55s ease var(--d),outline-offset .5s var(--snap);outline:3px solid transparent;outline-offset:18px}
.lx-card img{width:100%;height:100%;display:block}
.lx-card.c1{left:120px;--cx:542px;--cy:-100px}.lx-card.c2{left:425px;--cx:237px;--cy:-100px}.lx-card.c3{left:730px;--cx:-67px;--cy:-100px}
.lx[data-layout="P"] .lx-card{top:290px;width:240px;height:384px}
.lx[data-layout="P"] .lx-card.c1{left:60px;--cx:270px;--cy:118px}.lx[data-layout="P"] .lx-card.c2{left:330px;--cx:0px;--cy:118px}.lx[data-layout="P"] .lx-card.c3{left:600px;--cx:-270px;--cy:118px}
.lx-pill{position:absolute;left:14px;bottom:14px;padding:7px 13px;border-radius:var(--r-sm);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--mono);font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);scale:.6;opacity:0;transition:scale .5s var(--snap),opacity .2s}
.lx-stage:is([data-s="2"],[data-s="3"]) .lx-card{opacity:1;transform:none;filter:none}
.lx-stage:is([data-s="2"],[data-s="3"]) .lx-pill{scale:1;opacity:1;transition-delay:calc(var(--d) + .55s)}
.lx-stage:is([data-s="4"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]) .lx-card{opacity:0;transform:translate(var(--cx),var(--cy)) scale(.08);filter:blur(4px);transition:transform .5s var(--suck) var(--d),opacity .35s ease calc(var(--d) + .15s),filter .5s}
/* the input a prompt word points to lights up */
.lx-stage[data-s="3"] .lx-card{outline-color:var(--sakura-deep);outline-offset:6px;transition:transform .8s var(--snap),opacity .25s,filter .55s,outline-color .2s ease var(--hit),outline-offset .6s var(--snap) var(--hit)}

.lx-count{position:absolute;left:1065px;top:318px;opacity:0;transform:translateY(40px);transition:transform .6s var(--snap),opacity .3s}
.lx-count b{display:block;font-family:var(--mono);font-size:230px;font-weight:500;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.lx-count span{font-family:var(--mono);font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--pencil-text)}
.lx[data-layout="P"] .lx-count{left:60px;top:720px}
.lx[data-layout="P"] .lx-count b{font-size:180px}
.lx-stage[data-s="2"] .lx-count{opacity:1;transform:none;transition-delay:.45s}
.lx-stage:is([data-s="3"],[data-s="4"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]) .lx-count{opacity:0;transform:translateY(-60px);transition:transform .35s var(--suck),opacity .3s}

/* 3 · the prompt streams in; linked words light up */
.lx-prompt{position:absolute;left:1065px;top:330px;width:415px;height:440px;border-radius:22px;background:var(--ink);color:var(--white);padding:26px 28px;overflow:hidden;
  opacity:0;transform:translateX(120px);filter:blur(12px);transition:transform .7s var(--snap),opacity .3s,filter .5s}
.lx[data-layout="P"] .lx-prompt{left:60px;top:730px;width:780px;height:390px}
.lx-phead{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,247,.6);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(250,250,247,.15)}
.lx-prompt p{margin:0;font-family:var(--mono);font-size:20px;line-height:1.6;letter-spacing:0;word-spacing:0}
.lx[data-layout="P"] .lx-prompt p{font-size:23px}
.pw{opacity:0;transition:opacity .2s ease}
.tk{border-radius:4px;padding:0 3px;margin:0 -3px;background:linear-gradient(90deg,var(--sakura-light),var(--sakura-deep)) no-repeat;background-size:0% 100%}
.lx-stage[data-s="3"] .lx-prompt{opacity:1;transform:none;filter:none}
.lx-stage[data-s="3"] .pw{opacity:1;transition-delay:calc(150ms + var(--n) * 28ms)}
.lx-stage[data-s="3"] .tk{background-size:100% 100%;color:var(--ink);transition:opacity .2s ease calc(150ms + var(--n) * 28ms),background-size .45s var(--snap) calc(270ms + var(--n) * 28ms),color .2s ease calc(300ms + var(--n) * 28ms)}
.lx-stage:is([data-s="4"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]) .lx-prompt{opacity:0;transform:translate(-472px,-100px) scale(.08);transition:transform .5s var(--suck) .18s,opacity .35s ease .33s}
.lx[data-layout="P"] .lx-stage:is([data-s="4"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]) .lx-prompt{transform:translate(0,-325px) scale(.08)}
.lx-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lx-lines path{fill:none;stroke:var(--sakura-deep);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.lx-lines circle{fill:var(--sakura-deep);transform-box:fill-box;transform-origin:center;scale:0;transition:scale .4s var(--snap)}
.lx-stage[data-s="3"] .lx-lines path{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--snap) var(--hit)}
.lx-stage[data-s="3"] .lx-lines circle{scale:1;transition-delay:calc(var(--hit) + .4s)}
.lx-stage:not([data-s="3"]) .lx-lines{opacity:0;transition:opacity .2s}

/* 4–6 · Generate pill → progress bar → the film */
.lx-gen{position:absolute;left:800px;top:450px;width:260px;height:76px;border-radius:38px;background:var(--ink);overflow:hidden;translate:-50% -50%;scale:0;opacity:0;
  transition:width .7s var(--snap),height .7s var(--snap),border-radius .7s var(--snap),left .8s var(--snap),top .8s var(--snap),background .3s ease,scale .55s var(--snap),opacity .3s}
.lx[data-layout="P"] .lx-gen{left:450px;top:600px}
.lx-gen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.lx-gen-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--white);font-size:26px;font-weight:500;transition:opacity .15s}
.lx-gen-label i{width:12px;height:12px;border-radius:50%;background:var(--sakura)}
.lx-bar{position:absolute;inset:0;opacity:0}
.lx-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sakura-light),var(--sakura-deep))}
.lx-rc{position:absolute;left:50%;top:50%;translate:-50% -90px;font-family:var(--mono);font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--pencil-text);white-space:nowrap;opacity:0;transition:opacity .2s}
.lx-rc b{color:var(--ink);font-weight:500}
.lx-film-tag{position:absolute;left:22px;bottom:20px;font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--white);opacity:0;transition:opacity .3s ease .5s;text-shadow:0 0 12px rgba(0,0,0,.4)}
.lx-stage[data-s="4"] .lx-gen{scale:1;opacity:1;transition-delay:.45s}
.lx-stage[data-s="5"] .lx-gen{scale:1;opacity:1;width:820px;height:16px;border-radius:8px;background:var(--line);overflow:visible}
.lx-stage[data-s="5"] .lx-gen-label{opacity:0}
.lx-stage[data-s="5"] .lx-bar{opacity:1;border-radius:8px;overflow:hidden}
.lx-stage[data-s="5"] .lx-bar i{width:100%;transition:width 1.2s steps(12) .25s}
.lx-stage[data-s="5"] .lx-rc{opacity:1;transition-delay:.2s}
.lx-stage:is([data-s="6"],[data-s="7"]) .lx-gen{scale:1;opacity:1;width:1040px;height:585px;border-radius:24px}
.lx[data-layout="P"] .lx-stage:is([data-s="6"],[data-s="7"]) .lx-gen{width:780px;height:439px}
.lx-stage:is([data-s="6"],[data-s="7"]) .lx-gen video{opacity:1;transition-delay:.3s}
.lx-stage:is([data-s="6"],[data-s="7"]) .lx-gen-label{opacity:0}
.lx-stage:is([data-s="6"],[data-s="7"]) .lx-film-tag{opacity:1}
.lx-stage[data-s="7"] .lx-gen{left:510px;top:470px;width:780px;height:439px}
.lx[data-layout="P"] .lx-stage[data-s="7"] .lx-gen{left:450px;top:370px}
.lx-stage[data-s="8"] .lx-gen{scale:1;left:510px;top:470px;width:780px;height:439px;border-radius:24px;opacity:0;translate:-50% calc(-50% - 80px);transition:opacity .35s var(--suck),translate .45s var(--suck)}
.lx[data-layout="P"] .lx-stage[data-s="8"] .lx-gen{left:450px;top:370px}
.lx-stage[data-s="8"] .lx-gen video{opacity:1}

/* 7 · inside the lab */
.lx-inside{position:absolute;left:980px;top:236px;width:520px}
.lx[data-layout="P"] .lx-inside{left:60px;top:630px;width:780px}
.lx-kicker{font-family:var(--mono);font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--pencil-text);margin-bottom:10px}
.lx-inside ul{list-style:none;margin:0;padding:0}
.lx-inside li{display:flex;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:34px;font-weight:500;letter-spacing:-.015em;line-height:1.2;
  opacity:0;transform:translateX(70px);filter:blur(8px);transition:transform .6s var(--snap),opacity .25s,filter .45s}
.lx[data-layout="P"] .lx-inside li{font-size:32px;padding:12px 0}
.lx-check{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(160deg,var(--sakura-light),var(--sakura-deep));scale:0;transition:scale .5s var(--snap)}
.lx-check::after{content:"";position:absolute;left:11px;top:7px;width:8px;height:14px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;rotate:45deg}
.lx-stage[data-s="7"] .lx-inside .lx-up{transform:none;transition-delay:.35s}
.lx-stage[data-s="7"] .lx-inside li{opacity:1;transform:none;filter:none;transition-delay:calc(.5s + var(--i) * 110ms)}
.lx-stage[data-s="7"] .lx-check{scale:1;transition-delay:calc(.7s + var(--i) * 110ms)}
.lx-stage[data-s="8"] .lx-inside{opacity:0;transform:translateY(-60px);transition:transform .45s var(--suck),opacity .35s var(--suck)}

/* 8 · the point */
.lx-final{position:absolute;left:0;right:0;top:282px;text-align:center}
.lx[data-layout="P"] .lx-final{top:360px;padding:0 60px}
.f1{font-size:46px;color:var(--pencil-text);letter-spacing:-.01em}
.f2{font-size:132px;font-weight:500;font-stretch:78%;letter-spacing:-.04em;line-height:1.02;margin-top:12px}
.lx[data-layout="P"] .f2{font-size:108px}
.f3{font-size:26px;color:var(--text-2);margin-top:40px}
.lx[data-layout="P"] .f3{font-size:30px}
.lx-mark{background:linear-gradient(transparent 58%,var(--sakura-light) 58%,var(--sakura-deep) 94%,transparent 94%) no-repeat;background-size:0% 100%;padding:0 .06em;transition:background-size .6s var(--snap)}
.lx-stage[data-s="8"] .lx-final .lx-up{transform:none;transition-delay:calc(var(--d,0ms) + .45s)}
.lx-stage[data-s="8"] .lx-mark{background-size:100% 100%;transition-delay:1.5s}

.lx-play{position:absolute;right:14px;bottom:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.lx-play svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lx-play .i-play{display:none;fill:currentColor;stroke:none}
.lx.paused .i-pause{display:none}.lx.paused .i-play{display:block}
.lx.rm .lx-play{display:none}

/* lab hero: crayon strokes (Welcome in. underline, "think" marker) — same sakura, drawn like a crayon */
.lx-defs{position:absolute;width:0;height:0;overflow:hidden}
.lx .cr{fill:none;stroke:url(#lx-sakura);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.lx-uline{display:block;width:540px;height:34px;margin:12px auto 0;overflow:visible;background:none;transform:none;border-radius:0}
.lx[data-layout="P"] .lx-uline{width:420px}
.lx-uline .cr{stroke-width:20}
.lx-stage[data-s="1"] .lx-uline{transform:none}
.lx-stage[data-s="1"] .lx-uline .cr{stroke-dashoffset:0;transition:stroke-dashoffset .75s var(--snap) .5s}
.lx-mark{position:relative;display:inline-block;isolation:isolate;background:none!important;padding:0}
.lx-mark-t{position:relative;z-index:1}
.lx-mark-svg{position:absolute;z-index:0;left:-.1em;bottom:.02em;width:calc(100% + .2em);height:.55em;overflow:visible}
.lx-mark .cr{stroke-width:40;opacity:1}
.lx-mark .cr2{stroke-width:22;opacity:.8}
.lx-stage[data-s="8"] .lx-mark .cr{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.6,0,.3,1) 1.5s}
.lx-stage[data-s="8"] .lx-mark .cr2{transition-delay:1.85s}

/* ---------- crayon v2: waxy passes over paper tooth; the "think" mark sits behind the letters ---------- */
.lx-uline .cr{stroke-width:11;opacity:.85}
.lx-uline .p2{stroke-width:9;opacity:.7}
.lx-uline .p3{stroke-width:7;opacity:.75}
.lx-stage[data-s="1"] .lx-uline .p2{transition-delay:.62s}
.lx-stage[data-s="1"] .lx-uline .p3{transition-delay:.74s}
.lx-mark{position:relative;z-index:0;display:inline-block;isolation:auto}
.lx-mark-t{position:static;z-index:auto}
.lx-mark-svg{z-index:-1;left:-.12em;bottom:-.06em;width:calc(100% + .24em);height:.5em}
.lx-mark .cr{stroke-width:20;opacity:.8}
.lx-mark .p2{stroke-width:18;opacity:.7}
.lx-mark .p3{stroke-width:14;opacity:.75}
.lx-stage[data-s="8"] .lx-mark .p2{transition-delay:1.72s}
.lx-stage[data-s="8"] .lx-mark .p3{transition-delay:1.94s}

/* inside-the-lab list: longer, clearer lines */
.lx-inside{left:940px;width:600px}
.lx-inside li{font-size:30px}
.lx[data-layout="P"] .lx-inside li{font-size:29px}

/* ---------- My Lab: why join ---------- */
.lab-why{padding-top:var(--s6);row-gap:var(--s5);align-items:start}
.why-text h2{font-size:var(--h1);font-weight:500;font-stretch:80%;letter-spacing:-.03em;line-height:1.02;margin:var(--s2) 0 var(--s3)}
html[lang=ja] .why-text h2{font-size:calc(var(--h1) * .72);line-height:1.3;letter-spacing:.01em}
.why-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s4)}
.why-cta .small{margin:0}
.why-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.why-points li{background:var(--paper);border-radius:var(--r-lg);padding:var(--s3) var(--s4) var(--s3) var(--s3);position:relative}
.why-points li::before{content:"";position:absolute;left:var(--s3);top:calc(var(--s3) + 10px);width:10px;height:10px;border-radius:50%;background:linear-gradient(160deg,var(--sakura-light),var(--sakura-deep))}
.why-points h3{font-size:var(--t-lg);font-weight:500;line-height:1.3;margin:0 0 var(--s1);padding-left:var(--s3)}
.why-points p{margin:0;color:var(--text-2);padding-left:var(--s3)}

/* ---------- My Lab: library (video-site layout) ---------- */
.lab-lib{padding-top:var(--s6)}
.lib-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s4)}
.lib-head h2{font-size:var(--h2);font-stretch:85%;letter-spacing:-.02em;line-height:1.05}
.lib-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.lib-tabs button{border:none;background:none;padding:var(--s1) var(--s2);border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:500;color:var(--pencil-text);cursor:pointer;transition:background .2s,color .2s}
.lib-tabs button.on{background:var(--ink);color:var(--white)}
.lib-top{row-gap:var(--s4);align-items:start}
.vcard{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:var(--ink)}
.vcard[hidden]{display:none}
.vthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#F4F4F2}
.vthumb img{width:100%;height:100%;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.vcard:hover .vthumb img{transform:scale(1.04)}
.vbadge{position:absolute;right:var(--s2);bottom:var(--s2);background:rgba(17,17,17,.8);color:var(--white);padding:3px var(--s1);border-radius:6px;font-size:12px;letter-spacing:.04em}
.vlock{position:absolute;left:var(--s2);top:var(--s2);display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:5px 10px;border-radius:var(--r-sm);font-size:12px;color:var(--ink)}
.vlock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vplay{position:absolute;left:50%;top:50%;translate:-50% -50%;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;transition:scale .5s cubic-bezier(.16,1,.3,1)}
.vcard:hover .vplay{scale:1.08}
.vplay svg{width:26px;height:26px;margin-left:4px;fill:var(--ink)}
.vmeta{display:flex;flex-direction:column;gap:4px;min-width:0}
.vmeta b{font-weight:500;font-size:var(--t-md);line-height:1.35}
.vcard-lg .vmeta b{font-size:var(--t-lg)}
.upnext{display:flex;flex-direction:column;gap:var(--s3)}
.upnext .vcard{flex-direction:row;align-items:flex-start;gap:var(--s2)}
.upnext .vthumb{width:48%;flex:none;border-radius:var(--r-md)}
.upnext .vmeta b{font-size:var(--t-base)}
.upnext .vbadge{right:var(--s1);bottom:var(--s1);font-size:11px}
.upnext .vlock{left:var(--s1);top:var(--s1);padding:3px 8px;font-size:11px}
.lib-grid{margin-top:var(--s5);row-gap:var(--s4)}

/* ---------- My Lab: account, as one quiet bar ---------- */
.acct-bar{margin-top:var(--s6);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);padding:var(--s3);background:var(--paper);border-radius:var(--r-lg)}
.acct-who{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3)}
.acct-state{display:inline-flex;align-items:center;gap:var(--s1);font-weight:500}
.acct-state i{width:8px;height:8px;border-radius:50%;background:var(--pencil)}
.acct-state.on i{background:var(--sakura-deep)}
.acct-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.lab .help-line{margin-top:var(--s2)}

/* ---------- Work: films only, Pinterest-like ---------- */
.masonry{columns:3 300px;column-gap:var(--gutter)}
.mcard{display:block;break-inside:avoid;margin-bottom:var(--gutter);border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.mcard video{display:block;width:100%;height:auto;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mcard:hover video{transform:scale(1.03)}
.upnext .vlock{display:none}

/* ---------- About: photo + words; a crayon circle around the key words ---------- */
.about{padding-top:var(--s5);row-gap:var(--s5);align-items:start}
@media (min-width:1024px){.about{padding-top:var(--s6)}}
.about-photo{position:relative;margin:0}
.about-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg)}
.about-photo .tape{top:-10px;left:var(--s4);right:auto;width:88px}
@media (min-width:1024px){.about-photo{position:sticky;top:calc(64px + var(--s4))}}
@supports (corner-shape:squircle){.about-photo img{corner-shape:squircle}}
.about-text h1{font-size:var(--h1);font-stretch:85%;letter-spacing:-.025em;line-height:1.05;margin:0 0 var(--s4)}
.about-text .thesis{margin-bottom:var(--s5)}
.circle-it{position:relative;display:inline-block;white-space:nowrap;z-index:0}
.crayon-circle{position:absolute;z-index:-1;left:-9%;top:-48%;width:120%;height:196%;overflow:visible;pointer-events:none}
.crayon-circle path{fill:none;stroke:var(--sakura-deep);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.js .crayon-circle path{stroke-dasharray:1;stroke-dashoffset:1}
.js .thesis.in .crayon-circle path,.js .thesis:not([data-reveal]) .crayon-circle path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.25,1) .6s}
.crayon-circle,.lx-mark-svg,.lx-uline,.link-scribble svg{max-width:none}

/* ---------- 2026-09-29 round 2: about, intro, prompt tiles, prompt page ---------- */
.about-photo .tape{left:50%;right:auto;margin-left:-44px;transform:rotate(-3deg)}
.about-text h1.thesis{font-size:var(--h2);line-height:1.4;letter-spacing:.01em;font-stretch:100%;margin:0 0 var(--s5);text-wrap:balance;word-break:auto-phrase}
.about-hello{font-size:var(--t-md);line-height:1.6;color:var(--ink)!important}
.about-hello b{font-weight:600}
.about-links{margin-top:var(--s4)}

.intro-body{display:flex;flex-direction:column;align-items:flex-start}
.intro-body .hello-hand{margin:0 0 var(--s3)}
.intro-body .lead{margin:0 0 var(--s2)}
.intro-body .btn{margin-top:var(--s3)}

/* contact: company · name · email on one row on desktop, stacked below */
@media (max-width:1023px){.grid12>.trio{grid-column:1/-1}}

/* prompt library = the Work masonry, plus a small "see the prompt" pill */
.ptile{position:relative}
.ptile-empty{display:block;aspect-ratio:16/9}
.ptile-see{position:absolute;left:var(--s2);bottom:var(--s2);display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 var(--s2);border-radius:var(--r-sm);background:rgba(250,250,247,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);font-size:var(--t-sm);font-weight:500;transition:transform var(--spring-t) var(--spring),background .2s ease}
.ptile:hover .ptile-see,.ptile:focus-visible .ptile-see{background:#fff;transform:translateY(-2px)}

/* prompt page: film left, the two steps right, both visible on open */
.pd{padding-top:var(--s4);row-gap:var(--s3);align-items:start}
@media (min-width:1024px){.pd{padding-top:var(--s5)}.pd-side{position:sticky;top:calc(64px + var(--s4))}}
.pd-side{display:flex;flex-direction:column;align-items:stretch}
.pd-title{font-family:var(--latin-hand);font-weight:400;font-size:var(--h1);line-height:1;letter-spacing:.01em;margin:var(--s1) 0 var(--s3)}
.how{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.how li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:var(--s2)}
.how-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--ink);color:var(--ink);letter-spacing:0}
.how-btn{width:100%;min-height:56px;white-space:normal;text-align:left;justify-content:space-between;padding:var(--s2) var(--s3)}
.how-btn.btn-primary{justify-content:center;gap:var(--s1)}
.how-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.how-btn .check-icon{display:none}
.how-btn.copied .copy-icon{display:none}.how-btn.copied .check-icon{display:block;stroke:var(--sakura)}
/* Higgsfield's own lime, used only where Higgsfield is meant */
.btn-higgs{--higgs:#D4FF3F;background:var(--higgs);border-color:var(--ink);color:var(--ink);font-weight:600}
.btn-higgs:hover{background:#C8F72A}
.made-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);margin-top:var(--s4);padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--paper);text-decoration:none;color:var(--ink)}
.made-in .mono{flex-basis:100%}
.higgs-mark{display:inline-block;padding:4px 10px;border-radius:6px;background:#111;color:#D4FF3F;font-weight:700;font-size:var(--t-base);letter-spacing:-.01em;line-height:1.2}
.made-model{font-size:var(--t-sm);color:var(--text-2)}
.aff-note{margin-top:var(--s2)}
@supports (corner-shape:squircle){.made-in{corner-shape:squircle}}
.about-text h1.thesis .crayon-circle{left:-7%;width:112%}

/* contact: note on the left, send on the right */
.form-foot{justify-content:space-between;flex-wrap:nowrap}
.form-foot .btn{flex:none}
@media (max-width:639px){.form-foot{flex-direction:column-reverse;align-items:stretch}.form-foot .btn{width:100%}}

/* ---------- Work: client covers + pop-up ---------- */
.wk-tile{position:relative;padding:0;border:0;width:100%;cursor:pointer;background:var(--paper);text-align:left;font:inherit;color:inherit}
.wk-tile img,.wk-tile video{display:block;width:100%;height:auto;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.wk-tile:hover img,.wk-tile:hover video{transform:scale(1.03)}
.wk-name{position:absolute;left:var(--s2);bottom:var(--s2);display:inline-flex;gap:4px;align-items:center;min-height:36px;padding:0 var(--s2);border-radius:var(--r-sm);background:rgba(250,250,247,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:var(--t-sm);color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .5s var(--spring)}
.wk-name b{font-weight:600}
.wk-tile:hover .wk-name,.wk-tile:focus-visible .wk-name{opacity:1;transform:none}
@media (hover:none){.wk-name{opacity:1;transform:none}}
.wk-tile:focus-visible{outline:2px solid var(--sakura-deep);outline-offset:3px}

.wk-dialog{border:0;padding:0;margin:auto;width:min(1100px,100vw - 32px);max-height:calc(100dvh - 32px);background:var(--white);color:var(--ink);border-radius:var(--r-lg);overflow:auto;overscroll-behavior:contain}
.wk-dialog::backdrop{background:rgba(17,17,17,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wk-dialog[open]{animation:wk-in .6s var(--spring)}
@keyframes wk-in{from{opacity:0;transform:translateY(var(--s5)) scale(.98)}}
@supports (corner-shape:squircle){.wk-dialog{corner-shape:squircle}}
.wk-sheet{padding:var(--s3)}
@media (min-width:1024px){.wk-sheet{padding:var(--s5)}}
.wk-head{position:sticky;top:calc(var(--s3) * -1);z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);background:var(--white);padding:var(--s2) 0;margin-top:calc(var(--s2) * -1)}
@media (min-width:1024px){.wk-head{top:calc(var(--s5) * -1)}}
.wk-head h2{font-size:var(--h2);letter-spacing:-.02em;line-height:1.1;margin:var(--s1) 0 0}
.wk-close{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--ink);background:#fff;cursor:pointer;display:grid;place-items:center;transition:transform var(--spring-t) var(--spring)}
.wk-close:hover{transform:rotate(90deg)}
.wk-close svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.wk-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s2) 0 var(--s4)}
.wk-meta div{min-width:0}
.wk-meta dd{margin:4px 0 0;font-size:var(--t-base);color:var(--text-2)}
.wk-meta:empty{display:none}
.wk-gallery{columns:2 280px;column-gap:var(--s2)}
.wk-gallery img,.wk-gallery video{display:block;width:100%;height:auto;margin-bottom:var(--s2);border-radius:var(--r-md);background:var(--paper);break-inside:avoid}
textarea.field{field-sizing:content;min-height:9lh;max-height:70vh}
.wk-head h2{display:flex;align-items:center;gap:var(--s2)}
.ig{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);transition:background .2s ease,transform var(--spring-t) var(--spring)}
.ig:hover{background:var(--paper);transform:scale(1.08)}
.ig svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.ig svg .dot{fill:currentColor;stroke:none}
/* pop-up gallery: two balanced columns in reading order; one list on phones */
.wk-gallery{columns:auto;display:flex;gap:var(--s2);align-items:flex-start}
.wk-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.wk-item img,.wk-item video{margin:0}
@media (max-width:639px){.wk-gallery{flex-direction:column;align-items:stretch}.wk-col{display:contents}}
/* the pop-up is "taped" like the prompt strip and the About photo */
.wk-sheet{position:relative}
.wk-tape{top:8px;left:50%;right:auto;margin-left:-44px;width:88px;transform:rotate(-3deg);z-index:3}
.wk-close:focus:not(:focus-visible){outline:none}

/* ---------- Works pop-up v2: a real pop-up over the list ----------
   The dialog covers the screen (so a tap outside closes it) and holds one panel.
   The panel keeps its rounded corners; the header with × stays put and only the pictures scroll.
   The list stays visible behind a light veil, so closing clearly returns you to it. */
.wk-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;border-radius:0;display:none;align-items:center;justify-content:center}
.wk-dialog[open]{display:flex;animation:none}
@supports (corner-shape:squircle){.wk-dialog{corner-shape:round}}
.wk-dialog::backdrop{background:rgba(17,17,17,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:wk-fade .35s ease}
.wk-panel{position:relative;display:flex;flex-direction:column;width:min(1040px,100vw - 48px);max-height:calc(100dvh - 104px);background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 1px rgba(17,17,17,.06);animation:wk-rise .6s var(--spring)}
@supports (corner-shape:squircle){.wk-panel{corner-shape:squircle}}
.wk-head{position:static;flex:none;margin:0;padding:var(--s3) var(--s3) var(--s2);border-bottom:1px solid transparent;transition:border-color .2s ease}
@media (min-width:1024px){.wk-head{padding:var(--s4) var(--s5) var(--s2)}}
.wk-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--s3) var(--s3)}
@media (min-width:1024px){.wk-body{padding:0 var(--s5) var(--s5)}}
.wk-meta{margin:0 0 var(--s4)}
.wk-dialog.closing .wk-panel{animation:wk-drop .28s ease forwards}
.wk-dialog.closing::backdrop{animation:wk-fade .28s ease reverse forwards}
@keyframes wk-fade{from{opacity:0}}
@keyframes wk-rise{from{opacity:0;transform:translateY(var(--s5)) scale(.97)}}
@keyframes wk-drop{to{opacity:0;transform:translateY(var(--s4)) scale(.98)}}
/* phones: a bottom sheet, the list peeking above it */
@media (max-width:639px){
  .wk-dialog{align-items:flex-end}
  .wk-panel{width:100%;max-height:calc(100dvh - 56px);border-radius:var(--r-lg) var(--r-lg) 0 0}
  @keyframes wk-rise{from{transform:translateY(100%)}}
  @keyframes wk-drop{to{transform:translateY(100%)}}
}
@media (prefers-reduced-motion:reduce){.wk-panel,.wk-dialog::backdrop,.wk-dialog.closing .wk-panel{animation:none}}
.wk-tape{display:none}
.wk-item video[controls]{background:var(--ink)}

/* About: the crayon circle sits behind "with AI" (letters on top, lighter stroke) */
.circle-txt{position:relative;z-index:1}
.about-text h1.thesis .crayon-circle{left:-10%;top:-62%;width:122%;height:224%}
.about-text h1.thesis .crayon-circle path{stroke:var(--sakura);opacity:.75;stroke-width:6}

/* About: two next steps as clear cards */
.about-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s5)}
@media (max-width:639px){.about-next{grid-template-columns:1fr}}
.next-card{position:relative;display:flex;flex-direction:column;gap:var(--s1);min-height:120px;padding:var(--s3);padding-right:calc(var(--s3) + 32px);border:1px solid var(--ink);border-radius:var(--r-md);text-decoration:none;color:var(--ink);background:#fff;transition:transform var(--spring-t) var(--spring),background .2s ease}
.next-card b{font-size:var(--t-md);font-weight:600;line-height:1.35;margin-top:auto}
.next-card .next-arrow{position:absolute;right:var(--s3);bottom:var(--s3);font-size:var(--t-md);transition:transform var(--spring-t) var(--spring)}
.next-card:hover{transform:translateY(-3px)}
.next-card:hover .next-arrow{transform:translateX(4px)}
.next-card-ink{background:var(--ink);color:var(--white)}
.next-card-ink .mono{color:rgba(250,250,247,.72)}
@supports (corner-shape:squircle){.next-card{corner-shape:squircle}}
.about-text h1.thesis .circle-it{margin:0 0 .4em .15em}
.about-text h1.thesis .crayon-circle{left:-9%;top:-26%;width:120%;height:156%}
/* the one handwritten English word in the About headline */
.thesis-hand{font-family:var(--latin-hand);font-weight:400;font-size:1.45em;line-height:.8;letter-spacing:.02em;margin:0 .08em;display:inline-block;transform:rotate(-4deg) translateY(.04em);color:var(--ink)}
.thesis-hand{font-size:1.6em;-webkit-text-stroke:.6px currentColor}

/* ---------- One corner for everything (Niina, 2026-09-29) ----------
   Buttons, chips, tabs, pills and the EN/JA switch share the small squircle corner (--r-sm), like the fields and pictures.
   Only true dots and the round "play" on films stay circles. */
.lang-switch a{border-radius:calc(var(--r-sm) - 3px)}
.wk-close,.dialog-close,.ig,.reel-pause{border-radius:var(--r-sm)}
@supports (corner-shape:squircle){.btn,.chip span,.copy,.lang-switch,.lang-switch a,.ptile-see,.wk-name,.lib-tabs,.lib-tabs button,.wk-close,.dialog-close,.ig,.reel-pause,.pop-copy,.app-chip,.app-gen,.tag{corner-shape:squircle}}

/* About: next steps are plain site buttons, set a little apart from the text */
.about-next{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.site-footer .fine{justify-content:flex-end}
/* a tiny, neutral "PR" mark on links that carry the Higgsfield referral (required disclosure, kept quiet) */
.pr-tag{display:inline-block;margin-left:var(--s1);padding:1px 5px;border:1px solid currentColor;border-radius:4px;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.06em;line-height:1.4;opacity:.6;vertical-align:.15em}
.btn-higgs .pr-tag{margin-left:auto;margin-right:var(--s1)}
/* the "paste into Higgsfield" step wraps to two lines in Japanese: give it room */
.how-btn{line-height:1.5}
/* Niina's Instagram: footer (under the logo) and About (next to the buttons) */
.ig-glyph{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
.ig-glyph .dot{fill:currentColor;stroke:none}
.footer-ig{display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s3);font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.footer-ig:hover span{text-decoration:underline;text-decoration-color:var(--sakura-deep);text-underline-offset:4px}
.site-footer .span-4:first-child{display:flex;flex-direction:column;align-items:flex-start}
.btn-icon{width:48px;padding:0}

/* About: her latest Instagram posts, full width */
.about-ig{margin-top:var(--s6)}
.about-ig-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.about-ig-head .more{display:inline-flex;align-items:center;gap:var(--s1)}
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1)}
@media (max-width:1023px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ig-grid a{display:block;overflow:hidden;border-radius:var(--r-sm);background:var(--paper)}
.ig-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.ig-grid a:hover img{transform:scale(1.04)}
@supports (corner-shape:squircle){.ig-grid a{corner-shape:squircle}}

/* Works pop-up: the Instagram mark sits on the name's baseline */
.wk-head h2{align-items:baseline;gap:var(--s1)}
.wk-head h2 .ig{width:auto;height:auto;padding:0;border-radius:0;align-self:baseline;transform:translateY(1px)}
.wk-head h2 .ig svg{width:22px;height:22px;display:block}
.wk-head h2 .ig:hover{background:none;transform:translateY(1px) scale(1.1)}

/* ---------- My Lab: "what is My Lab" (text left, a small workflow loop right) ---------- */
.why-points{display:none}
.why-inside-title{margin:var(--s4) 0 var(--s2);font-weight:400}
.why-inside{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s3)}
@media (max-width:639px){.why-inside{grid-template-columns:1fr}}
.why-inside li{position:relative;padding-left:var(--s3);color:var(--ink);line-height:1.6}
.why-inside li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--sakura-deep)}
.why-belief{margin:var(--s4) 0 0;color:var(--text-2);max-width:var(--measure)}
.why-free{margin-top:var(--s3)}


.wk-head h2{gap:12px}
/* My Lab: right column "take a peek" */
.why-peek{background:var(--paper);border-radius:var(--r-lg);padding:var(--s4)}
@media (min-width:1024px){.why-peek{padding:var(--s5)}}
@supports (corner-shape:squircle){.why-peek{corner-shape:squircle}}
.why-peek-title{font-family:var(--hand);font-weight:400;font-size:var(--h2);line-height:1.2;margin:0 0 var(--s4);transform:rotate(-2deg);transform-origin:left}
html[lang=ja] .why-peek-title{font-family:var(--ja-hand, var(--hand));font-size:calc(var(--h2) * .72);line-height:1.5}
.why-peek .why-inside{grid-template-columns:1fr;gap:var(--s2)}
.why-peek .why-inside li{font-size:var(--t-base);padding-bottom:var(--s2);border-bottom:1px dashed rgba(17,17,17,.15)}
.why-peek .why-inside li:last-child{border-bottom:0;padding-bottom:0}
.why-peek-title{white-space:pre-line;text-wrap:balance;word-break:auto-phrase}

/* "Workflows, coming soon": a square sticky note, taped on at a slight angle */
.soon-col{display:flex;justify-content:center;align-items:flex-start}
.soon-card{width:min(100%,340px);aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;gap:var(--s2);padding:var(--s4);border-radius:2px;background:linear-gradient(170deg,#FFF6D6 0%,#FBECB8 100%);box-shadow:0 1px 0 rgba(17,17,17,.04),0 14px 24px -18px rgba(17,17,17,.35);transform:rotate(-3deg);transition:transform var(--spring-t) var(--spring)}
.soon-card:hover{transform:rotate(-1deg) translateY(-3px)}
@supports (corner-shape:squircle){.soon-card{corner-shape:round}}
.soon-card::after{content:"";position:absolute;right:0;bottom:0;width:28px;height:28px;background:linear-gradient(135deg,rgba(17,17,17,.06) 50%,transparent 50%);border-top-left-radius:2px}
.soon-tape{top:-12px;left:50%;right:auto;margin-left:-40px;width:80px;transform:rotate(2deg)}
.soon-tag{position:static;transform:none;background:none;border:0;padding:0;color:var(--pencil-text);font-size:var(--t-sm)}
.soon-card h3{font-family:var(--hand);font-weight:400;font-size:var(--h2);line-height:1.2;letter-spacing:.01em;margin:0}
html[lang=ja] .soon-card h3{font-size:calc(var(--h2) * .72);line-height:1.5}
.soon-card p{font-size:var(--t-base);line-height:1.7}
/* the tilt uses `rotate` so the scroll-reveal (which animates `transform`) doesn't cancel it */
.soon-card{rotate:-3deg}
.soon-card,.soon-card:hover{transform:none}
.soon-card:hover{rotate:-1deg;translate:0 -3px}
.soon-card{transition:rotate var(--spring-t) var(--spring),translate var(--spring-t) var(--spring),opacity .8s ease,transform 1.1s var(--spring)}

/* ---------- "Workflows coming soon" v2: ruled paper note with crayon doodles (like a flip-book sticky note) ---------- */
.soon-card{width:min(100%,340px);aspect-ratio:1;justify-content:flex-end;gap:var(--s1);padding:var(--s4) var(--s4) calc(var(--s4) + 4px);
  background:
    linear-gradient(transparent 0 0),
    repeating-linear-gradient(to bottom,transparent 0 27px,rgba(92,150,190,.28) 27px 28px) 0 22px/100% calc(100% - 22px) no-repeat,
    #F7E4CF;
  box-shadow:0 1px 1px rgba(17,17,17,.06),0 10px 18px -14px rgba(90,60,30,.45);
  border-radius:0;
  clip-path:polygon(0.6% 1.2%,34% 0,70% 0.8%,99.4% 0,100% 38%,99.2% 72%,100% 99.3%,62% 100%,28% 99.2%,0 100%,0.8% 64%,0 30%)}
.soon-card::after{display:none}
.soon-tape{display:none}
.note-doodles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.soon-tag{position:relative;font-family:var(--hand);font-size:var(--t-md);color:#E0443A;letter-spacing:.02em;text-transform:none}
.soon-card h3{position:relative;font-family:var(--hand);font-size:calc(var(--h2) * .95);line-height:1.15;color:#1E3F2A}
html[lang=ja] .soon-card h3{font-size:calc(var(--h2) * .8);line-height:1.4}
.soon-card p{position:relative;font-family:var(--hand);font-size:var(--t-md);line-height:1.4;color:#2B3A4A}
html[lang=ja] .soon-card p{font-size:17px;line-height:28px}
/* flip-book wobble: the face and doodles jump between a few poses */
.note-face{transform-origin:98px 70px;animation:note-face 1.2s steps(1) infinite}
.note-loop{animation:note-jit 0.9s steps(1) infinite}
.note-spark{transform-origin:270px 272px;animation:note-spark 1.6s steps(1) infinite}
.note-spray{animation:note-jit 1.1s steps(1) infinite reverse}
@keyframes note-face{0%{transform:rotate(0)}25%{transform:rotate(-4deg) translate(1px,-1px)}50%{transform:rotate(2deg) translate(-1px,1px)}75%{transform:rotate(-1deg) scale(1.02)}}
@keyframes note-jit{0%{transform:translate(0,0)}33%{transform:translate(1px,-1px)}66%{transform:translate(-1px,1px)}}
@keyframes note-spark{0%{transform:scale(1) rotate(0)}25%{transform:scale(.8) rotate(12deg)}50%{transform:scale(1.1) rotate(-6deg)}75%{transform:scale(.9) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.note-face,.note-loop,.note-spark,.note-spray{animation:none}}
.soon-card{justify-content:flex-start;padding:38% var(--s4) var(--s4)}
.soon-tag{position:absolute;left:52%;top:17%;rotate:-6deg}
.soon-card p{padding-right:var(--s2)}
.note-doodles{inset:0 0 auto 0;height:auto;aspect-ratio:300/120}
.note-foot{inset:auto 0 0 0;aspect-ratio:300/60}
.soon-card{aspect-ratio:auto;min-height:min(340px,90vw);padding:30% var(--s4) calc(var(--s5) + 12px)}
.soon-tag{top:14%}
/* note v3 (Niina): paper almost white (kinari), tilted down to the right, no face */
.soon-card{background:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(92,150,190,.24) 27px 28px) 0 22px/100% calc(100% - 22px) no-repeat,#FCF9F0;rotate:3deg;padding-top:22%}
.soon-card:hover{rotate:1deg}
.soon-tag{left:var(--s4);top:9%;rotate:-4deg}
.soon-card{background:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(92,150,190,.24) 27px 28px) 0 22px/100% calc(100% - 22px) no-repeat,#FBF6E8;
  clip-path:none;box-shadow:0 0 0 1px rgba(120,100,60,.08),0 2px 3px rgba(90,70,40,.06),0 16px 26px -18px rgba(90,70,40,.45);padding-top:15%}
/* note v4: whiter kinari, plain ink text, bigger reading size */
.soon-card{background:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(92,150,190,.22) 31px 32px) 0 22px/100% calc(100% - 22px) no-repeat,#FDFAF2}
.soon-card h3,.soon-card p{color:var(--ink)}
.soon-card p{font-size:var(--t-lg);line-height:32px}
html[lang=ja] .soon-card p{font-size:21px;line-height:32px}
html[lang=ja] .soon-card h3{font-size:30px;line-height:40px}
.soon-tag{font-size:var(--t-lg)}
/* note v5: one tone whiter, true yellow (not orange), very light shadow */
.soon-card{background:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(92,150,190,.22) 31px 32px) 0 22px/100% calc(100% - 22px) no-repeat,#FEFDF4;
  box-shadow:0 0 0 1px rgba(17,17,17,.06),0 6px 14px -10px rgba(17,17,17,.18)}
/* small "← Home" at the top left of every page but home */
.back-home-row{padding-top:var(--s3)}
.back-home{display:inline-flex;align-items:center;gap:var(--s1);font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.04em;color:var(--pencil-text);text-decoration:none;padding:6px 0;transition:color .2s ease}
.back-home span{transition:transform var(--spring-t) var(--spring)}
.back-home:hover{color:var(--ink)}
.back-home:hover span{transform:translateX(-3px)}
.back-home-row + .wrap > .page-head:first-child,.back-home-row + .wrap > .grid12:first-child{padding-top:var(--s4)}
@media (min-width:1024px){.back-home-row + .wrap > .page-head:first-child,.back-home-row + .wrap > .grid12:first-child{padding-top:var(--s5)}}
main .back-home-row + .wrap > .page-head:first-child,main .back-home-row + .wrap > .grid12:first-child{padding-top:var(--s3)}
@media (min-width:1024px){main .back-home-row + .wrap > .page-head:first-child,main .back-home-row + .wrap > .grid12:first-child{padding-top:var(--s4)}}

/* ---------- Work with Niina (/production) ---------- */
.prod-intro{max-width:var(--measure);font-size:var(--t-md);line-height:1.7;color:var(--ink);margin:0 0 var(--s6);padding-left:var(--s3);border-left:3px solid var(--sakura-deep)}
.prod-sec{margin-top:var(--s6)}
.prod-sec h2{font-size:var(--h2);font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:0 0 var(--s3)}
.prod-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.prod-sec-head h2{margin:0}
.svc-group{margin-top:var(--s5)}
.svc-group-name{font-family:var(--hand);font-weight:400;font-size:var(--h3);margin:0 0 var(--s2);color:var(--ink)}
html[lang=ja] .svc-group-name{font-size:24px}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
@media (max-width:1023px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.svc-grid{grid-template-columns:1fr}}
.svc h4{font-size:var(--t-md);font-weight:600;margin:var(--s2) 0 var(--s1)}
.svc p{margin:0;color:var(--text-2);font-size:15px;line-height:1.75}
.svc-pic{aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--paper);display:grid;place-items:center}
.svc-pic img,.svc-pic video{width:100%;height:100%;object-fit:cover;display:block}
.svc-soon{color:var(--pencil-text)}
@supports (corner-shape:squircle){.svc-pic{corner-shape:squircle}}
.prod-two{row-gap:var(--s5);align-items:start}
.prod-text{color:var(--text-2);max-width:var(--measure);margin:0 0 var(--s3)}
.case-list,.auto-list,.prep-list{list-style:none;margin:0;padding:0}
.case-list li{border-top:1px solid var(--line)}
.case-list li:last-child{border-bottom:1px solid var(--line)}
.case-list a{display:flex;flex-direction:column;gap:4px;padding:var(--s2) 0;text-decoration:none;color:var(--ink)}
.case-list b{font-size:var(--t-md);font-weight:600}
.case-list span{color:var(--text-2);font-size:15px}
.case-list a:hover b{text-decoration:underline;text-decoration-color:var(--sakura-deep);text-underline-offset:5px}
.auto-list li,.prep-list li{position:relative;padding:var(--s1) 0 var(--s1) var(--s3);line-height:1.6}
.auto-list li::before,.prep-list li::before{content:"";position:absolute;left:2px;top:calc(var(--s1) + .7em);width:8px;height:8px;border-radius:50%;background:var(--sakura-deep)}
.prod-works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
@media (max-width:1023px){.prod-works{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prod-work{display:block;text-decoration:none;color:var(--ink)}
.prod-work img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-md);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.prod-work:hover img{transform:scale(1.02)}
.prod-work span{display:block;margin-top:var(--s1);font-size:15px;font-weight:500}
.flow{list-style:none;margin:0;padding:0}
.flow li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line)}
.flow li:last-child{border-bottom:1px solid var(--line)}
.flow-n{color:var(--pencil-text);padding-top:3px}
.flow b{font-weight:600}
.flow p{margin:4px 0 0;color:var(--text-2)}
.flow + .small{margin-top:var(--s2)}
.prod-faq{max-width:none}
.prod-cta{margin:var(--s6) 0 var(--s5);padding:var(--s5) var(--s4);background:var(--paper);border-radius:var(--r-lg);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.prod-cta p{margin:0;font-size:var(--t-md)}
@supports (corner-shape:squircle){.prod-cta{corner-shape:squircle}}
.svc-group-name{font-size:32px}html[lang=ja] .svc-group-name{font-size:30px}

/* ---------- Work with Niina v2: one column, one idea per section ---------- */
.prod-intro{display:none}
.psec{margin-top:var(--s7)}
.prod .page-head + .psec{margin-top:var(--s5)}
.psec-head{max-width:var(--measure);margin-bottom:var(--s4)}
.psec-head .mono{display:block;margin-bottom:var(--s1)}
.psec-head h2{font-size:var(--h2);font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:0}
.psec-head p{margin:var(--s2) 0 0;color:var(--text-2);line-height:1.8}
.psec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s4)}
.psec-row .psec-head{margin-bottom:0}
.svc-group{margin-top:var(--s5)}
.svc-group:first-of-type{margin-top:0}
.svc-group-name{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3)}
.svc-group-name::after{content:"";flex:1;height:1px;background:var(--line)}
.other-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (max-width:767px){.other-grid{grid-template-columns:1fr}}
.other{background:var(--paper);border-radius:var(--r-lg);padding:var(--s4)}
@supports (corner-shape:squircle){.other{corner-shape:squircle}}
.other h3{font-size:var(--t-lg);font-weight:600;margin:0 0 var(--s2)}
.other > p{color:var(--text-2);margin:0 0 var(--s3);line-height:1.8}
.other .case-list li,.other .case-list li:last-child{border-color:rgba(17,17,17,.1)}
.chip-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip-list li{padding:6px var(--s2);border:1px solid rgba(17,17,17,.15);border-radius:var(--r-sm);background:#fff;font-size:15px;line-height:1.5}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);counter-reset:none}
@media (max-width:1023px){.steps{grid-template-columns:1fr}}
.steps li{position:relative;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;display:flex;flex-direction:column;gap:var(--s1)}
@supports (corner-shape:squircle){.steps li{corner-shape:squircle}}
.steps b{font-size:var(--t-md);font-weight:600}
.steps p{margin:0;color:var(--text-2);font-size:15px;line-height:1.7}
@media (min-width:1024px){.steps li:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:50%;transform:translateY(-50%);color:var(--pencil);font-size:14px;z-index:1}}
.prep{margin-top:var(--s3);padding:var(--s3) var(--s4);background:var(--paper);border-radius:var(--r-md)}
@supports (corner-shape:squircle){.prep{corner-shape:squircle}}
.prep h3{font-size:var(--t-base);font-weight:600;margin:0 0 var(--s2)}
/* the tape sits in the middle of the prompt strip */
.strip > .tape{left:50%;right:auto;margin-left:-36px}
/* Works: "work with Niina" button beside the lead */
.work-hire{display:flex;align-items:flex-end}
@media (min-width:1024px){.work-hire{justify-content:flex-end}}

/* ---------- Work with Niina v3: minimal + hand-made (crayon scribbles, crayon marks, torn pink paper) ---------- */
.psec-head .mono{display:none}
.psec-head h2{position:relative;display:inline-block;z-index:0}
.scrib-wrap{position:absolute;z-index:-1;left:-28px;top:50%;width:110px;height:80px;transform:translateY(-50%) rotate(-8deg);pointer-events:none}
.scrib{width:100%;height:100%;overflow:visible;max-width:none}
.scrib path{fill:none;stroke:var(--sakura);stroke-width:5;stroke-linecap:round;opacity:.8;stroke-dasharray:1;stroke-dashoffset:1}
.psec.in .scrib path,.js .psec:not([data-reveal]) .scrib path,html:not(.js) .scrib path{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.45,0,.25,1) .3s}
.other{background:none;padding:0;border-radius:0}
.other h3{font-size:var(--t-lg);margin-bottom:var(--s2)}
.other-grid{gap:var(--s6)}
.mark-list{list-style:none;margin:0;padding:0}
.mark-list li{position:relative;padding:6px 0 6px 30px;line-height:1.6}
.mark-list li::before{content:"";position:absolute;left:0;top:calc(6px + .45em);width:20px;height:9px;background:var(--sakura);border-radius:40% 60% 55% 45%/60% 40% 60% 40%;transform:rotate(-8deg);opacity:.85}
.mark-inline{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.prep{background:none;padding:0;margin-top:var(--s5);border-radius:0}
.prep h3{font-family:var(--hand);font-weight:400;font-size:26px;margin:0 0 var(--s1)}
/* flow: numbers on a wavy line, no boxes */
.steps-wrap{position:relative}
.steps-line{position:absolute;left:0;right:0;top:22px;width:100%;height:40px;max-width:none}
.steps-line path{fill:none;stroke:var(--sakura);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 10;vector-effect:non-scaling-stroke}
@media (max-width:1023px){.steps-line{display:none}}
.steps{gap:var(--s3)}
.steps li{border:0;background:none;padding:0;border-radius:0;gap:6px}
.steps li::after{display:none}
.step-n{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--white);font-family:var(--latin-hand);font-size:48px;line-height:1;color:var(--sakura-deep);position:relative;z-index:1;margin-bottom:var(--s1)}
@media (max-width:1023px){.steps li{display:grid;grid-template-columns:64px 1fr;column-gap:var(--s2)}.steps li .step-n{grid-row:span 2}}
/* torn pink paper band */
.torn{margin-top:var(--s7);padding:calc(var(--s6) + 14px) 0;text-align:center}
.torn-in{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.torn-note{margin:0;font-family:var(--hand);font-size:32px;line-height:1.3;color:var(--ink)}
html[lang=ja] .torn-note{font-size:28px}
.prod-cta{display:none}
.prod + .site-footer,.prod ~ footer{margin-top:0}
.psec-head{max-width:none}
.psec-head p{max-width:var(--measure)}
.scrib-wrap{left:-44px;width:170px;height:120px;transform:translateY(-50%) rotate(-10deg)}
.scrib path{stroke:var(--sakura-deep);stroke-width:6;opacity:.75}
.svc-pic:has(.svc-soon){background:none;border:1.5px dashed rgba(232,159,183,.7)}
/* the torn pink band runs straight into the footer */
body:has(.prod .torn) .site-footer{margin-top:0;border-top:0}
.torn{margin-bottom:0}
/* footer: the new logo mark */
.footer-logo{width:120px;height:auto;display:block}
/* "helpful to have": five equal columns, a short word + a short hint each */
.prep-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin:var(--s2) 0 0}
@media (max-width:1023px){.prep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.prep-grid{grid-template-columns:1fr}}
.prep-grid div{position:relative;padding-left:30px}
.prep-grid div::before{content:"";position:absolute;left:0;top:.55em;width:20px;height:9px;background:var(--sakura);border-radius:40% 60% 55% 45%/60% 40% 60% 40%;transform:rotate(-8deg);opacity:.85}
.prep-grid dt{font-weight:600;font-size:var(--t-base);line-height:1.5}
.prep-grid dd{margin:4px 0 0;color:var(--text-2);font-size:15px;line-height:1.6}
.footer-logo{width:150px}
.brand img{height:44px}@media (max-width:400px){.brand img{height:38px}}

/* ---------- My Lab: the eye takes a peek (src/peek-eye.tsx) ---------- */
.why-peek{background:none;padding:0;border-radius:0;display:flex;flex-direction:column;align-items:center}
.why-inside,.why-points{display:none}
.why-inside-text{margin:var(--s3) 0 0;color:var(--ink);line-height:1.9;max-width:var(--measure)}
.why-peek .why-peek-title{margin:var(--s2) 0 0;text-align:center;transform:rotate(-2deg)}
.peek{width:min(100%,420px);aspect-ratio:1}
.peek-svg{width:100%;height:100%;overflow:visible}
.peek-svg *{transform-box:fill-box;transform-origin:center}
.peek{--t:8s}
.peek-open{animation:peek-open var(--t) steps(1) infinite}
.peek-closed{opacity:0;animation:peek-closed var(--t) steps(1) infinite}
.peek-pupil{animation:peek-look var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
.peek-star{animation:peek-star var(--t) ease infinite}
.peek-bulb{opacity:0;animation:peek-bulb var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
.peek-rays{animation:peek-rays var(--t) steps(1) infinite}
.peek-sparks path{opacity:0;animation:peek-spark var(--t) cubic-bezier(.34,1.56,.64,1) infinite}
.peek-sparks .sp2{animation-delay:.15s}
.peek-a{animation:peek-jit .5s steps(1) infinite}
@keyframes peek-open{0%{opacity:1}12%{opacity:0}14%{opacity:1}54%{opacity:0}56%{opacity:1}}
@keyframes peek-closed{0%{opacity:0}12%{opacity:1}14%{opacity:0}54%{opacity:1}56%{opacity:0}}
@keyframes peek-look{0%,17%{transform:translateX(0)}22%,32%{transform:translateX(38px)}37%,46%{transform:translateX(-38px)}50%,100%{transform:translateX(0)}}
@keyframes peek-star{0%,60%{transform:scale(1) rotate(0)}64%{transform:scale(1.7) rotate(45deg)}70%,90%{transform:scale(1.2) rotate(90deg)}96%,100%{transform:scale(1) rotate(90deg)}}
@keyframes peek-bulb{0%,59%{opacity:0;transform:scale(.3) translateY(20px)}64%{opacity:1;transform:scale(1.1)}68%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
@keyframes peek-rays{0%,64%{opacity:0}66%{opacity:1}70%{opacity:.3}74%,90%{opacity:1}}
@keyframes peek-spark{0%,62%{opacity:0;transform:scale(0) rotate(-30deg)}68%{opacity:1;transform:scale(1.2) rotate(10deg)}74%{transform:scale(.9)}80%{transform:scale(1.1)}86%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.6)}}
@keyframes peek-jit{0%{transform:translate(0,0)}50%{transform:translate(.6px,-.6px)}}
@media (prefers-reduced-motion:reduce){
  .peek-open,.peek-pupil,.peek-star,.peek-a,.peek-rays{animation:none}.peek-closed{display:none}
  .peek-bulb,.peek-sparks path{animation:none;opacity:1}
}
/* Work with Niina: each "helpful to have" item in a thin frame */
.prep-grid div{padding:var(--s2) var(--s2) var(--s2) calc(var(--s2) + 28px);border:1px solid rgba(17,17,17,.14);border-radius:var(--r-sm)}
.prep-grid div::before{left:var(--s2);top:calc(var(--s2) + .55em)}

/* back-to-top: pink crayon arrow, bottom right */
.to-top{position:fixed;right:var(--s3);bottom:var(--s3);z-index:40;width:56px;height:56px;padding:6px;border:0;background:none;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s ease,transform .5s var(--spring)}
.to-top.on{opacity:1;pointer-events:auto;transform:none}
.to-top svg{width:100%;height:100%;overflow:visible;stroke:var(--sakura-deep)}
.to-top:hover{transform:translateY(-4px)}
.to-top:focus-visible{outline:2px solid var(--sakura-deep);outline-offset:2px;border-radius:var(--r-sm)}
@media (min-width:1024px){.to-top{right:var(--s4);bottom:var(--s4)}}

/* My Lab "what is My Lab": text and the eye sit level; shorter text */
.lab-why{align-items:center}
.why-free{margin:var(--s3) 0 0;color:var(--text-2)}
.why-free a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--sakura-deep)}
.why-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);margin-top:var(--s4)}
.why-cta .small{margin:0}
/* account page */
.acct-list{margin:0;max-width:640px}
.acct-list div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s2);padding:var(--s3) 0;border-top:1px solid var(--line)}
.acct-list div:last-child{border-bottom:1px solid var(--line)}
@media (max-width:639px){.acct-list div{grid-template-columns:1fr;gap:4px}}
.acct-list dd{margin:0}
.acct-list .small{margin:var(--s1) 0 0}
.acct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.peek-svg .peek-place,.peek-svg .peek-a{transform-box:view-box;transform-origin:0 0}
.why-peek .why-peek-title{margin-top:-22%}.peek{margin-top:-8%}
.why-peek .why-peek-title{margin-top:var(--s2)}.peek{margin-top:0;aspect-ratio:1134/860}
/* a handwritten English link ("Check it out!") with a pink crayon underline */
.hand-link{font-family:var(--latin-hand);font-size:30px;line-height:1;color:var(--ink);text-decoration:none;display:inline-block;margin-left:var(--s1);transform:rotate(-3deg);background:linear-gradient(transparent 70%,rgba(237,169,192,.7) 70% 88%,transparent 88%);padding:0 4px;transition:transform var(--spring-t) var(--spring)}
.hand-link:hover{transform:rotate(-1deg) translateY(-2px)}
.to-top{width:64px;height:64px}.to-top svg{stroke:#EC5A95}
.made-tool{font-weight:700;font-size:var(--t-base)}
/* tall (9:16) films on the prompt page stay within the screen */
.pd-film .frame[style*="9 / 16"]{width:auto;height:min(calc(100dvh - 190px),900px);max-width:100%;margin:0 auto}
/* graffiti arrow: filled, a little slanted */
.to-top svg{color:#EC5A95;stroke:none;transform:rotate(8deg)}
/* the "workflows coming soon" note uses the same dot-grid paper as the My Lab hero */
.soon-card{background:radial-gradient(circle,#DEDAD2 1.4px,transparent 1.6px) 8px 8px/20px 20px,#FFFFFF}
.to-top svg{transform:none}
/* home: the lab in four verbs, handwritten, each with a pink crayon mark under it */
.intro-body .motto{display:flex;flex-wrap:wrap;gap:4px 18px;margin:var(--s4) 0 var(--s1);font-family:var(--hand);font-size:40px;line-height:1.2;color:var(--ink)}
html[lang=ja] .intro-body .motto{font-size:32px;gap:4px 8px}
.motto span{background:linear-gradient(transparent 68%,rgba(237,169,192,.65) 68% 86%,transparent 86%);padding:0 2px}
.motto span:nth-child(odd){transform:rotate(-2deg)}.motto span:nth-child(even){transform:rotate(1.5deg)}
.motto span{display:inline-block}
.intro-body .motto-text{margin:0 0 var(--s1);color:var(--text-2);max-width:var(--measure)}

/* ---------- Home: "Look. Think. Try. Play." — full-width, text-only motion band ----------
   Each word snaps up out of a mask one after another (シュンシュン), a pink marker swipes under it,
   holds, then they leave upwards in the same order. EN big and condensed, JA small underneath. */
.motto-band{margin-top:var(--s6);padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.mw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
@media (max-width:767px){.mw{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s4)}}
.mw li{--d:calc(var(--i) * .28s);display:flex;flex-direction:column;gap:6px}
.mw-en{position:relative;display:block;width:max-content;overflow:hidden;padding:0 .04em .06em;font-size:clamp(48px,8.4vw,120px);font-weight:600;font-stretch:78%;letter-spacing:-.045em;line-height:.95;color:var(--ink)}
.mw-en b{color:var(--sakura-deep);font-weight:600}
.mw-en::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.22em;z-index:-1;background:var(--sakura);opacity:.75;border-radius:40% 60% 50% 50%/60% 40% 60% 40%;transform:scaleX(0);transform-origin:left;animation:mw-mark 7s var(--d) cubic-bezier(.16,1,.3,1) infinite}
.mw-en{isolation:isolate}
.mw-en > *,.mw-en{animation:mw-word 7s var(--d) cubic-bezier(.16,1,.3,1) infinite}
.mw-ja{font-family:var(--hand);font-size:22px;line-height:1.2;color:var(--text-2);opacity:0;animation:mw-ja 7s var(--d) ease infinite}
.mw-note{margin:var(--s4) 0 0;color:var(--text-2);max-width:var(--measure)}
@keyframes mw-word{0%{clip-path:inset(100% 0 0 0);transform:translateY(40%)}7%,76%{clip-path:inset(0 0 0 0);transform:none}84%,100%{clip-path:inset(0 0 100% 0);transform:translateY(-30%)}}
@keyframes mw-mark{0%,6%{transform:scaleX(0);transform-origin:left}14%,74%{transform:scaleX(1);transform-origin:left}75%{transform-origin:right}82%,100%{transform:scaleX(0);transform-origin:right}}
@keyframes mw-ja{0%,8%{opacity:0;transform:translateY(6px)}14%,74%{opacity:1;transform:none}82%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mw-en,.mw-en::after,.mw-ja{animation:none}.mw-en::after{transform:none}.mw-ja{opacity:1}}
.intro-body .motto,.intro-body .motto-text{display:none}
.mw-en{font-size:clamp(46px,7.2vw,104px)}.mw-ja{font-size:26px}

/* ---------- Home: Hi! + films in one section ---------- */
.intro .intro-body{max-width:var(--measure)}
.intro .intro-body .lead:last-child{margin-bottom:0}
.intro-films{margin-top:var(--s5)}
.motto-band{display:none}

/* ---------- Home: "Look Think Try Play" — a thin collage band that drifts sideways ----------
   Four words, four ways of writing (handwriting / condensed bold / typewriter / outline), the Niina's Lab eye
   between them blinking in turn. Low (about 96px), pauses on hover, still for reduced motion. */
.motto{margin-top:var(--s6);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}
.motto-track{display:flex;width:max-content;animation:motto-drift 38s linear infinite}
.motto:hover .motto-track{animation-play-state:paused}
.motto-run{display:flex;align-items:center;gap:var(--s4);padding:var(--s2) var(--s4) var(--s2) 0;height:96px}
.mt{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap}
.mt-ja{font-family:var(--hand);font-size:17px;color:var(--pencil-text);transform:translateY(-.2em)}
.mt-en{line-height:1;color:var(--ink)}
.mt-0 .mt-en{font-family:var(--latin-hand);font-size:62px;transform:rotate(-4deg);display:inline-block}
.mt-1 .mt-en{font-size:52px;font-weight:700;font-stretch:72%;letter-spacing:-.04em;text-transform:uppercase;background:linear-gradient(transparent 58%,var(--sakura) 58% 88%,transparent 88%);padding:0 6px}
.mt-2 .mt-en{font-family:var(--mono);font-size:34px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--ink);padding:6px 10px 4px;transform:rotate(2deg);display:inline-block}
.mt-3 .mt-en{font-size:56px;font-weight:800;font-stretch:80%;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.6px var(--sakura-deep);font-style:normal}
.mt-eye{width:44px;height:30px;flex:none;overflow:visible}
.mt-eye-shut{opacity:0}
.mt-eye-open{transform-box:fill-box;transform-origin:center;animation:mt-blink 5s calc(var(--n) * 1.25s) steps(1) infinite}
.mt-eye-shut{animation:mt-shut 5s calc(var(--n) * 1.25s) steps(1) infinite}
@keyframes motto-drift{to{transform:translateX(-50%)}}
@keyframes mt-blink{0%,93%{opacity:1}94%,97%{opacity:0}98%{opacity:1}}
@keyframes mt-shut{0%,93%{opacity:0}94%,97%{opacity:1}98%{opacity:0}}
.motto-note{margin:0;padding:var(--s2) 0 var(--s2);border-top:1px dashed rgba(17,17,17,.2);color:var(--text-2);font-size:15px;line-height:1.7}
@media (max-width:639px){.motto-run{height:76px;gap:var(--s3)}.mt-0 .mt-en{font-size:48px}.mt-1 .mt-en{font-size:40px}.mt-2 .mt-en{font-size:26px}.mt-3 .mt-en{font-size:44px}}
@media (prefers-reduced-motion:reduce){.motto-track,.mt-eye-open,.mt-eye-shut{animation:none}}
/* reset the earlier ".motto span" styles, then re-apply per word */
.motto span{background:none;padding:0;transform:none;display:inline}
.motto .mt{display:inline-flex}
.motto .mt-0 .mt-en{display:inline-block;transform:rotate(-4deg)}
.motto .mt-1 .mt-en{background:linear-gradient(transparent 58%,var(--sakura) 58% 88%,transparent 88%);padding:0 6px}
.motto .mt-2 .mt-en{display:inline-block;padding:6px 10px 4px;transform:rotate(2deg)}
.motto .mt-ja{display:inline-block;transform:translateY(-.2em)}
.motto-note{margin:0 auto}
.motto-note{border-top:0}

/* Work with Niina: flip-through thumbnails */
.flip{position:relative;width:100%;height:100%}
.flip figure{position:absolute;inset:0;margin:0;opacity:0}
.flip figure.on{opacity:1}
.flip img{width:100%;height:100%;object-fit:cover;display:block}
.flip figcaption{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:var(--r-sm);background:rgba(250,250,247,.85);color:var(--ink);font-size:11px}
.flip-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px}
.flip-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.flip-dots i.on{background:#fff}
/* the "sizes" card runs across the whole row: landscape frame, before shown whole on paper, after fills it */
.svc-grid .svc-wide{grid-column:1/-1}
.svc-wide .svc-pic{aspect-ratio:1600/928}
.svc-wide .flip figure:first-child img{object-fit:contain;background:var(--paper)}
@media (min-width:1024px){.svc-wide{display:grid;grid-template-columns:3fr 1fr;column-gap:var(--s3);align-items:end}.svc-wide .svc-pic{grid-row:span 2}}

/* ---------- Home: "Together with AI, [Look.]" — one thin line (B) ---------- */
.motto{display:none}
.flipline{margin-top:var(--s6);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flipline-in{display:flex;align-items:center;justify-content:center;gap:var(--s3);height:120px}
.fl-lead{font-family:var(--hand);font-size:34px;line-height:1;color:var(--ink);transform:rotate(-3deg)}
html[lang=ja] .fl-lead{font-size:30px}
.fl-slot{position:relative;display:inline-block;width:5.2em;height:1.1em;font-size:58px;perspective:600px}
.fl-word{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;opacity:0;transform-origin:50% 60%;backface-visibility:hidden;animation:fl-flip 8s calc(var(--i) * 2s) cubic-bezier(.16,1,.3,1) infinite}
.fl-word b{font-size:1em;font-weight:700;font-stretch:78%;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.fl-word small{font-family:var(--hand);font-size:18px;color:var(--pencil-text)}
.fl-circle{position:absolute;left:-.35em;top:-.32em;width:3.6em;height:1.75em;overflow:visible;max-width:none;pointer-events:none;z-index:-1}
.fl-slot{isolation:isolate}
.fl-circle path{fill:none;stroke:var(--sakura);stroke-width:5;stroke-linecap:round;opacity:.9;stroke-dasharray:1;stroke-dashoffset:1;animation:fl-draw 2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes fl-flip{0%{opacity:0;transform:rotateX(90deg)}3%{opacity:1}6%,21%{opacity:1;transform:rotateX(0)}24%{opacity:0;transform:rotateX(-90deg)}100%{opacity:0;transform:rotateX(-90deg)}}
@keyframes fl-draw{0%,15%{stroke-dashoffset:1;opacity:.9}55%,85%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@media (max-width:639px){.flipline-in{height:96px;gap:var(--s2)}.fl-lead{font-size:24px}html[lang=ja] .fl-lead{font-size:22px}.fl-slot{font-size:40px}}
@media (prefers-reduced-motion:reduce){.fl-word,.fl-circle path{animation:none}.fl-word:first-child{opacity:1;transform:none}.fl-circle path{stroke-dashoffset:0}}
/* tools: the Higgsfield row carries its offer */
.tools .tool-higgs{flex-wrap:wrap;row-gap:6px}
.tool-offer{flex-basis:100%;font-size:13px;color:var(--sakura-ink);background:rgba(237,169,192,.18);border-radius:var(--r-sm);padding:6px 10px;line-height:1.6}
@media (min-width:1024px){.svc-wide{display:block}.svc-wide .svc-pic{aspect-ratio:1600/700}}
.flip figure{transition:opacity .35s ease}
.flip video{width:100%;height:100%;object-fit:cover;display:block}

/* affiliate offer: the "3 hours" part sits on its own line */
.tool-offer,.aff-note,.make .small{white-space:pre-line}

/* ---------- Home: Hi! (left) + prompt films (right) as one balanced section ---------- */
.intro-grid{row-gap:var(--s5);align-items:start}
.intro .intro-body{max-width:none}
@media (min-width:1024px){.intro .intro-body{position:sticky;top:calc(64px + var(--s4))}}
.intro-welcome{margin:var(--s3) 0 var(--s2);font-size:var(--t-lg);font-weight:500;color:var(--ink)}
.intro-films.intro-films{margin-top:0;columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.intro-films .mcard{margin:0}
.intro-films .mcard video,.intro-films .ptile-empty{aspect-ratio:4/5 !important;width:100%;height:auto;object-fit:cover}
@media (max-width:519px){.intro-films.intro-films{grid-template-columns:1fr}}
/* membership */
.plans{row-gap:var(--s2);align-items:stretch}
.plan-tag{align-self:flex-start;background:var(--sakura);border-color:transparent;color:var(--ink)}
.plan .amt s{font-size:.55em;color:var(--pencil-text);font-weight:400;margin-right:4px}
.plan-note{margin:0}
.plan.featured{border-color:var(--ink)}
.plan-biz{background:var(--paper);border-color:transparent;justify-content:flex-start}
.plan-biz p{margin:0;color:var(--text-2)}
/* home intro: text and films centred against each other */
.intro-grid{align-items:center}
@media (min-width:1024px){.intro .intro-body{position:static}}
/* sizes card: the "before" picture sits on dot-grid paper */
.svc-wide .flip figure:first-child img{background:radial-gradient(circle,#DEDAD2 1.4px,transparent 1.6px) 8px 8px/20px 20px,#fff}
.psec-head p{white-space:pre-line}
.plan-note{font-size:var(--t-base);color:var(--ink)}
/* home + work-with-Niina copy keeps Niina's own line breaks */
.intro .lead,.other > p{white-space:pre-line}
/* waitlist */
.wait-form{max-width:560px;margin:var(--s2) 0 var(--s5)}
.wait-title{font-size:var(--t-lg);font-weight:600;margin:0 0 var(--s2)}
.wait-row{display:flex;gap:var(--s1);margin-top:var(--s1)}
.wait-row .field{flex:1}
@media (max-width:519px){.wait-row{flex-direction:column}}
.wait-done{font-size:var(--t-md);margin:var(--s2) 0 var(--s5);padding:var(--s3);background:rgba(237,169,192,.18);border-radius:var(--r-md);max-width:560px}
.wait-lead{white-space:pre-line}
html .page-head.thanks-head h1{font-size:var(--h2);line-height:1.5;margin-bottom:var(--s2)}