/* The page around the film. App tokens (DocnestStyle, SF system font, DocnestMotion) on one system:
   page sides 48 (16 on phones), one inner inset of 16, vertical rhythm 10 / 20 / 40 / 80, concentric radii 24 → 8.
   Every color leans very slightly toward the Beam blue (one hue, tuned here). Each token holds its light and its dark
   value, light-dark(light, dark); color-scheme picks one: the system's, or the header switch's (data-theme on <html>,
   set by assets/theme.js before the first paint). */
:root{
  color-scheme:dark light;
  --hue:262;                                   /* Beam blue, the hue of DocnestStyle.accent / brand */
  --bg:light-dark(oklch(0.977 0.004 var(--hue)),oklch(0.205 0.013 var(--hue)));          /* ≈ #f6f7fa · #14171d */
  --surface:light-dark(oklch(0.993 0.002 var(--hue)),oklch(0.245 0.016 var(--hue)));     /* · ≈ #1c2128 */
  --glass:light-dark(oklch(0.99 0.002 var(--hue)),oklch(0.232 0.015 var(--hue)));        /* the shelf panel */
  --raised:light-dark(oklch(0.952 0.006 var(--hue)),oklch(0.295 0.019 var(--hue)));      /* ≈ #edeff3 · #272d36 */
  --line:light-dark(oklch(0.918 0.009 var(--hue)),oklch(0.36 0.022 var(--hue)));         /* hairlines */
  --line-strong:light-dark(oklch(0.895 0.013 var(--hue)),oklch(0.42 0.027 var(--hue)));  /* ≈ #d8dde5 · #454d5c (border) */
  --text:light-dark(oklch(0.27 0.024 var(--hue)),oklch(0.965 0.005 var(--hue)));         /* ≈ #202732 · #f2f3f7 */
  --text-2:light-dark(oklch(0.45 0.025 var(--hue)),oklch(0.82 0.019 var(--hue)));       /* · ≈ #bdc4d1 (secondary) */
  --text-3:light-dark(oklch(0.5 0.022 var(--hue)),oklch(0.71 0.022 var(--hue)));         /* AA on --bg and --surface */
  --accent:light-dark(oklch(0.52 0.17 var(--hue)),oklch(0.80 0.10 var(--hue)));          /* ≈ #295dce · #9dbfff */
  --button:light-dark(oklch(0.52 0.165 var(--hue)),oklch(0.81 0.088 var(--hue)));        /* · ≈ #a2c1ff (primary) */
  --button-hover:light-dark(oklch(0.47 0.16 var(--hue)),oklch(0.86 0.07 var(--hue)));
  --button-text:light-dark(oklch(0.985 0.002 var(--hue)),oklch(0.25 0.055 var(--hue))); /* · ≈ #14213b */
  --brand:oklch(0.57 0.19 var(--hue));         /* #3670e7 */
  --brand-soft:light-dark(oklch(0.57 0.19 var(--hue) / .1),oklch(0.57 0.19 var(--hue) / .16));
  --selected:light-dark(oklch(0.95 0.011 var(--hue)),oklch(0.335 0.027 var(--hue)));     /* · ≈ #2f3745 (selectedNavigation) */
  --me:light-dark(oklch(0.55 0.17 var(--hue)),oklch(0.52 0.17 var(--hue)));              /* my chat bubble */
  --violet:light-dark(oklch(0.5 0.17 290),oklch(0.72 0.14 290));                         /* the conversation accent of the app */
  --violet-soft:oklch(0.62 0.16 290 / .14);
  --orange:light-dark(oklch(0.58 0.15 60),oklch(0.74 0.16 70));
  --green:light-dark(oklch(0.52 0.14 150),oklch(0.72 0.15 150));
  --red:light-dark(oklch(0.53 0.18 28),oklch(0.66 0.17 28));
  --shadow:light-dark(oklch(0.3 0.024 var(--hue) / .12),oklch(0.12 0.018 var(--hue) / .55));
  --film-bg:light-dark(oklch(0.9 0.015 var(--hue)),oklch(0.22 0.018 var(--hue)));       /* the scene's desktop */
  --ridge-1:light-dark(oklch(0.84 0.021 var(--hue)),oklch(0.33 0.027 var(--hue)));
  --ridge-2:light-dark(oklch(0.8 0.024 var(--hue)),oklch(0.28 0.024 var(--hue)));
  --ridge-3:light-dark(oklch(0.76 0.027 var(--hue)),oklch(0.24 0.021 var(--hue)));
  --mark-filter:invert(1);                     /* the black menu-bar template, drawn white on a dark menu bar */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --mono:"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --side:48px;
  --spring:cubic-bezier(.18,.68,.22,1);        /* DocnestMotion.reveal */
}
:root[data-theme="light"]{color-scheme:light;--mark-filter:none}
:root[data-theme="dark"]{color-scheme:dark}
/* the one value light-dark() cannot hold (it takes colors only): system light, no dark choice */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--mark-filter:none}}
:lang(ko){--sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","SF Pro Text","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif}
:lang(ja){--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","SF Pro Text","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",sans-serif}
:lang(th){--sans:-apple-system,BlinkMacSystemFont,"Sukhumvit Set","Thonburi","SF Pro Text","Leelawadee UI","Noto Sans Thai",sans-serif}
:lang(ru),:lang(mn){--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif}

html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:20px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.005em}
:lang(ko) body,:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{word-break:keep-all}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{word-break:auto-phrase;line-break:strict}
:lang(th) body{line-height:1.6}
*,*::before,*::after{box-sizing:border-box}
p,h1,h2,h3,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.ic,.ag,.ty,.fb{display:block;flex:none}
img.ag{border-radius:5px;object-fit:cover}
.skiplink{position:absolute;left:16px;top:-80px;z-index:50;padding:10px 16px;border-radius:8px;background:var(--button);color:var(--button-text);font-weight:600;text-decoration:none}
.skiplink:focus{top:16px}

.page{max-width:1440px;margin:0 auto;padding:20px var(--side) 0}
@media (max-width:759px){:root{--side:16px}}

/* ---------- header: brand left, system and language right (position unchanged) ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:36px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:16px;text-decoration:none;letter-spacing:-.01em}
.brand img{display:block;width:28px;height:28px}
.top-r{display:flex;align-items:center;gap:20px;font:12px/1 var(--mono);letter-spacing:.04em;color:var(--text-2)}
.top-guide{font:500 14px/1 var(--sans);letter-spacing:0;color:var(--text);text-decoration:none;padding:10px 0}
.top-guide:hover{color:var(--accent)}
/* phones: brand and the controls (download · theme · language) share the first row; Guide and What's new sit on their own row below */
@media (max-width:679px){.top-r .os{display:none}.top{flex-wrap:wrap;justify-content:flex-start;column-gap:10px;row-gap:2px}.top-r{display:contents}
  .top .hd-btn,.top .theme{order:1;margin-left:auto}.top .hd-btn+.theme{margin-left:0}.top .langs{order:1}.top::after{content:"";order:2;flex-basis:100%}
  .top-guide{order:3;font-size:13px;padding:8px 0;color:var(--text-2)}.top-guide+.top-guide{margin-left:8px}}

/* language menu (native disclosure: keyboard and screen readers work without script) */
.langs,.theme{position:relative;font:14px/1 var(--sans);letter-spacing:0}
.langs summary,.theme summary{list-style:none;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border-radius:8px;background:var(--raised);color:var(--text);cursor:pointer;white-space:nowrap;user-select:none}
.langs summary::-webkit-details-marker,.theme summary::-webkit-details-marker{display:none}
.langs summary .ic:last-child{color:var(--text-2)}
.langs .ln-code{display:none;font:12px/1 var(--mono)}
/* phones: the code instead of the name, and no chevron, so the theme switch fits beside it at 320 */
@media (max-width:420px){.langs .ln-name{display:none}.langs .ln-code{display:inline}.langs summary{padding:0 10px}.langs summary .ic:last-child{display:none}}
.langs-list{position:absolute;right:0;top:calc(100% + 10px);z-index:30;width:min(340px,calc(100vw - 32px));padding:8px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 20px 50px var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:2px 4px}
.langs-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding:0 10px;border-radius:8px;color:var(--text);text-decoration:none}
.langs-list a:hover{background:var(--raised)}
.langs-list a[aria-current]{background:var(--selected)}
.langs-list .ic{color:var(--accent)}
/* theme switch: one quiet square showing the current choice; System · Light · Dark below it (native radios) */
.theme summary{width:36px;padding:0;justify-content:center;color:var(--text-2)}
.theme summary:hover{color:var(--text)}
.theme summary .ic{display:none}
:root:not([data-theme]) .theme .th-system,:root[data-theme="light"] .theme .th-light,:root[data-theme="dark"] .theme .th-dark{display:block}
.theme-list{position:absolute;right:0;top:calc(100% + 10px);z-index:30;min-width:180px;margin:0;padding:8px;border:0;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 20px 50px var(--shadow);display:flex;flex-direction:column;gap:2px}
.theme-list label{position:relative;display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;color:var(--text);cursor:pointer;white-space:nowrap}
.theme-list label span{flex:1}
.theme-list label .ic{color:var(--text-2)}
.theme-list label .ic:last-child{visibility:hidden;color:var(--accent)}
.theme-list input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.theme-list input:checked~.ic:last-child{visibility:visible}
.theme-list label:hover{background:var(--raised)}
.theme-list label:has(input:checked){background:var(--selected)}
.theme-list label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- headline: two lines, the second quieter ---------- */
.hero{margin:40px 0;font-weight:650;font-size:clamp(30px,4.4vw,56px);line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.hero span{display:block}
.hero .hv[hidden]{display:none}
.hero .h2{color:var(--text-2)}
:lang(th) .hero{line-height:1.3;letter-spacing:0}
:lang(ja) .hero,:lang(ko) .hero{letter-spacing:-.01em}
@media (max-width:759px){.hero{margin:40px 0 20px}}
.film{margin-inline:0}

/* ---------- sections ---------- */
.blk{padding-top:80px}
.blk h2{font-weight:650;font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
:lang(th) .blk h2{line-height:1.35;letter-spacing:0}
.sub,.lead{margin-top:10px;font-size:18px;line-height:1.5;color:var(--text-2);max-width:640px}

/* app tags: New document · Edited +N −M · Read later (and the Skip mark of the reader) */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.tag.new{color:oklch(0.68 0.15 var(--hue));background:var(--brand-soft)}
.tag.mod{color:var(--orange);background:oklch(0.74 0.16 70 / .14)}
.tag.mod b{color:var(--green);font-weight:600}.tag.mod i{color:var(--red);font-style:normal}
.tag.later{color:var(--text-2);background:light-dark(oklch(0.45 0.025 var(--hue) / .1),oklch(0.82 0.019 var(--hue) / .14))}
.tag.later .ic{color:var(--accent)}
.tag.skip{color:var(--text-3);background:oklch(0.71 0.022 var(--hue) / .12)}
.tag.done{color:var(--accent);background:var(--brand-soft)}
.tag.done .ic{color:var(--accent)}
.tag.kind{color:var(--text-2);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
.ai{position:relative;flex:none;width:24px;height:24px;display:block}
.ai .ag{width:100%;height:100%}
.ai .fb{position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;padding:1px;border-radius:4px;background:var(--glass)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- per-person shelves (W1) ---------- */
.people .sub{margin-bottom:20px}
.kinds .tag{font-size:13px;line-height:20px;padding:4px 12px}
.people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1179px){.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{display:flex;flex-direction:column;min-width:0}
.person h3{font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.2;margin-bottom:20px}
.shelf{border-radius:24px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px var(--shadow);padding:16px 8px;display:flex;flex-direction:column;min-width:0}
.shelf-head{padding:0 8px 10px}
.seg{display:inline-flex;max-width:100%;gap:2px;padding:3px;border-radius:10px;background:var(--raised);font-size:12px;font-weight:600}
.seg span{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;color:var(--text-2);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.seg .on{background:var(--line-strong);color:var(--text)}
.seg .dot{width:6px;height:6px;border-radius:50%;background:var(--violet);flex:none}
.shelf-day{padding:10px 8px;font-size:12px;font-weight:600;color:var(--text-3)}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px;border-radius:8px;min-width:0}
.row .ti{flex:1;min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tm{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:2px;padding:3px;margin-bottom:20px;border-radius:10px;background:var(--raised)}
.tabs button{flex:1;min-width:0;height:36px;padding:0 6px;border:0;border-radius:8px;background:none;color:var(--text-2);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs button[aria-selected="true"]{background:var(--line-strong);color:var(--text)}
html.tabbed .people h2{margin-bottom:20px}
html.tabbed .people-grid{grid-template-columns:minmax(0,1fr)}
html.tabbed .person[hidden]{display:none}
html.tabbed .person h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- the story: an opening chat (W7), then documents read one at a time as you scroll ---------- */
.story-head{max-width:760px}
.chat{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:640px}
.msg{display:flex;align-items:flex-end;gap:10px;max-width:100%;font-size:15px;line-height:1.45}
.bubble{min-width:0;padding:10px 16px;border-radius:16px;background:var(--raised)}
.msg.me{align-self:flex-end}
.msg.me .bubble{background:var(--me);color:oklch(0.98 0.006 var(--hue))}
.msg.bot .ai{width:20px;height:20px}
.sys{align-self:center;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--brand-soft);color:var(--accent);font-size:14px;font-weight:600}
.sys img{display:block}
.sread{margin-top:40px;position:relative}
.read-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:40px;align-items:center}
.read-side{display:flex;flex-direction:column;gap:20px}
.read-list{display:flex;flex-direction:column;gap:2px}
.read-list li{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:8px;font-size:15px;color:var(--text-2)}
.read-list li>span:first-of-type{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.read-list li.is-cur{background:var(--selected);color:var(--text)}
.tally{display:flex;flex-wrap:wrap;gap:10px 20px;padding:0 16px;font-size:15px;color:var(--text-2)}
.tally [data-tally="missed"]{color:var(--accent);font-weight:600}
.read-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.read-mode{display:flex}
.read-mode span{padding:4px 12px;border-radius:999px;background:var(--raised);font-size:12px;font-weight:600;color:var(--text-2)}
.read-view{position:relative}
.stack .doc{position:relative}
.doc .stamp,.read-list li .tag{display:none}
.doc[data-decision="done"] .stamp.done,.doc[data-decision="later"] .stamp.later,.doc[data-decision="skip"] .stamp.skip,
.read-list li[data-decision="done"] .tag.done,.read-list li[data-decision="later"] .tag.later,.read-list li[data-decision="skip"] .tag.skip{display:inline-flex}
.stack article{border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;height:100%}
.pg-flow{padding:16px;display:flex;flex-direction:column;gap:10px}
.pg-head{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.pg-head .tag{margin-left:auto}
html:not(.story-live) .pg-head .tag,html.story-live .doc.decided .pg-head .tag{visibility:hidden}
.stack h3{font-size:24px;font-weight:650;letter-spacing:-.015em;line-height:1.2}
.pg-path{margin-top:-6px;font:12px/1.4 var(--mono);color:var(--text-3)}
.pg-sum{border-radius:8px;background:var(--raised);padding:10px 16px;display:flex;flex-direction:column;gap:4px}
.pg-sum span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent)}
.pg-sum p{font-size:15px;line-height:1.5}
.pg-body{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.pg-body b{font-size:15px;font-weight:650}
.pg-body .ln{display:flex;flex-direction:column;gap:10px}
.pg-body .ln i{display:block;height:6px;border-radius:3px;background:var(--line)}
.stamp{position:absolute;right:20px;top:20px;z-index:2;padding:10px 20px;border-radius:14px;font-size:20px;font-weight:700;transform:rotate(-6deg);box-shadow:0 10px 30px var(--shadow);pointer-events:none}
.stamp.done{background:var(--button);color:var(--button-text)}
.stamp.later{background:var(--brand-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stamp.skip{background:var(--raised);color:var(--text)}
.read-dots{display:none}
.read-bar{display:none}

/* static: all four at once with their marks (reduced motion, no script, or before the script runs) */
html:not(.story-live) .read-stage{grid-template-columns:minmax(0,1fr)}
html:not(.story-live) .read-side{order:2}
html:not(.story-live) .read-list{display:none}
html:not(.story-live) .stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
html:not(.story-live) .pg-body .more{display:none}
@media (max-width:759px){html:not(.story-live) .stack{grid-template-columns:minmax(0,1fr)}.chat{max-width:100%}.msg{font-size:14px}}

/* live: a sticky reader; the section's own height is the scroll track (set by site.js) */
html.story-live .read-stage{position:sticky;top:0;height:100vh;height:100svh;padding:20px 0}
html.story-live .read-view{height:min(520px,calc(100svh - 220px));display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:10px}
html.story-live .stack{position:relative;height:100%;overflow:hidden;border-radius:24px}
html.story-live .stack .doc{position:absolute;inset:0;will-change:transform}
html.story-live .stack .doc:not(.on){visibility:hidden}
html.story-live .stamp{opacity:0}
html.story-live .doc.decided .stamp{opacity:1}
html.story-live .read-dots{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
html.story-live .read-dots i{display:block;width:5px;height:5px;border-radius:3px;background:var(--line-strong);transition:height .3s var(--spring),background .3s}
html.story-live .read-dots i.is-cur{height:22px;background:var(--accent)}
html.story-live .read-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:var(--raised)}
html.story-live .read-list li .tag{visibility:hidden}
html.story-live .read-list li.done .tag{visibility:visible}
html.story-live .tally span{opacity:.4}
html.story-live .tally span.on{opacity:1}
.read-bar .ib{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:none;color:var(--text-2);cursor:pointer}
.read-bar .ib:hover{background:var(--line)}
.read-bar .ib:disabled{opacity:.35;cursor:default}
.read-bar .star[aria-pressed="true"]{color:var(--accent)}
.read-count{font-size:12px;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.read-gap{flex:1}
.read-bar .db{height:32px;padding:0 16px;border:0;border-radius:999px;background:var(--line);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.read-bar .db.go{background:var(--button);color:var(--button-text)}
@media (max-width:899px){
  .read-stage{grid-template-columns:minmax(0,1fr)!important;gap:20px}
  html.story-live .read-side{order:0}
  html.story-live .read-list{display:none}
  html.story-live .read-view{height:min(460px,calc(100svh - 240px))}
  .tally{padding:0}
}

/* ---------- formats + the conversation a document came from ---------- */
.formats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:40px;align-items:start}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:40px}
.tile{border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile b{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.tile span{font:12px/1.4 var(--mono);color:var(--text-3)}
.tile.opt{background:none;box-shadow:inset 0 0 0 1px var(--line);border:0;outline:1px dashed var(--line-strong);outline-offset:-1px}
.note{margin-top:20px;font-size:14px;color:var(--text-3)}
.lock{margin-top:40px;display:flex;align-items:center;gap:10px;font-size:17px;color:var(--text-2)}
.lock .ic{color:var(--accent)}
.convo{border-radius:24px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;font-size:13px;min-width:0}
.cp-head{display:flex;align-items:center;gap:10px;color:var(--accent);font-weight:600}
.cp-back{font-size:12.5px;white-space:nowrap}
.cp-t{display:flex;flex-direction:column;min-width:0;flex:1}
.cp-t b{color:var(--text);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-t small{color:var(--text-3);font-weight:500;font-size:11.5px}
.cp-pin{display:grid;grid-template-columns:16px auto minmax(0,1fr);gap:6px 8px;align-items:start;border-radius:8px;padding:10px;background:var(--violet-soft);box-shadow:inset 0 0 0 1px oklch(0.62 0.16 290 / .35);line-height:1.45}
.cp-pin .ic{color:var(--violet);margin-top:1px}
.cp-pin b{color:var(--violet);font-size:12px;white-space:nowrap}
@media (max-width:479px){.cp-pin{grid-template-columns:16px minmax(0,1fr)}.cp-pin span{grid-column:1/-1}}
.cp-tool{align-self:center;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2);background:var(--raised);border-radius:999px;padding:4px 10px;max-width:100%}
.convo .msg{max-width:92%;font-size:13px}
.convo .bubble{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:14px}
.av{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--sans);font-style:normal;color:oklch(0.98 0.006 var(--hue))}
.av.fe{background:oklch(0.52 0.09 160)}.av.re{background:oklch(0.55 0.13 50)}
.n1{color:oklch(0.82 0.1 160);font-size:11.5px}.n2{color:oklch(0.8 0.11 55);font-size:11.5px}
.convo .bubble em{align-self:flex-start;margin-top:4px;font-size:10.5px;font-style:normal;font-weight:700;color:oklch(0.82 0.1 160);background:oklch(0.82 0.1 160 / .16);border-radius:6px;padding:1px 6px}
.cp-doc{display:flex;align-items:center;gap:10px;margin-left:34px;border-radius:8px;padding:8px 10px;box-shadow:inset 0 0 0 1.5px var(--violet);background:var(--violet-soft)}
.cp-doc span{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-doc b{font-size:13px}.cp-doc small{font-size:11.5px;color:var(--text-3)}
@media (max-width:959px){.formats{grid-template-columns:minmax(0,1fr)}}
@media (max-width:519px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- pricing: one card, Buy with the trial as a text link under it (W4) ---------- */
.stk{position:relative;max-width:560px;margin-inline:auto;padding-bottom:20px}
.stk>i{position:absolute;left:16px;right:16px;bottom:10px;height:40px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.stk>i+i{left:32px;right:32px;bottom:0;background:var(--glass)}
.pcard{position:relative;z-index:1;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 20px 50px var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px}
.pc-name{padding-top:10px;font-size:24px;font-weight:650;letter-spacing:-.015em}
.pc-scope{margin-top:-6px;font-size:14px;color:var(--text-2)}
.pc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:10px 0}
.pc-price .now{font-size:64px;font-weight:650;letter-spacing:-.03em;line-height:1}
.pc-price s{font-size:24px;color:var(--text-3)}
.pc-price .pill{margin-left:auto;align-self:center;max-width:220px;font-size:12px;line-height:1.35;font-weight:600;color:var(--accent);background:var(--brand-soft);border-radius:8px;padding:6px 10px}
.pc-btns{display:grid;padding-top:10px}
/* what 2 or 3 Macs save, under the price; the line keeps its height on one Mac so the card doesn't jump */
.pc-save{display:grid;min-height:1.4em;margin-top:-6px;font-size:15px;line-height:1.4;font-weight:600;color:var(--accent)}
.pc-save>span{grid-area:1/1}
.pc-alt{text-align:center}
.pc-try{display:inline-block;padding:10px 8px;border:0;background:none;color:var(--text-2);font:inherit;font-size:15px;line-height:1.4;text-wrap:balance;text-decoration:none;cursor:pointer}
.pc-try .nw{white-space:nowrap}
.pc-try .ic{display:inline-block;margin-left:6px;vertical-align:-3px}
.pc-try:hover{color:var(--text)}
.pc-try:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* Mac picker: three segments like a macOS segmented control. The radios sit ahead of the price rows and Buy buttons,
   so the chosen count's row and button show with CSS alone (no script, any browser) */
.pc-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:6px;padding:4px;border-radius:14px;background:var(--raised)}
.pc-seg label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 4px;border-radius:10px;font-size:15px;font-weight:600;line-height:1.2;color:var(--text-2);text-align:center;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.pc-seg label:hover{color:var(--text)}
#pc-m1:checked~.pc-seg [for=pc-m1],#pc-m2:checked~.pc-seg [for=pc-m2],#pc-m3:checked~.pc-seg [for=pc-m3]{color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0 2px 6px var(--shadow)}
#pc-m1:focus-visible~.pc-seg [for=pc-m1],#pc-m2:focus-visible~.pc-seg [for=pc-m2],#pc-m3:focus-visible~.pc-seg [for=pc-m3]{outline:2px solid var(--accent);outline-offset:2px}
#pc-m1:checked~[data-m]:not([data-m="1"]),#pc-m1:checked~* [data-m]:not([data-m="1"]),
#pc-m2:checked~[data-m]:not([data-m="2"]),#pc-m2:checked~* [data-m]:not([data-m="2"]),
#pc-m3:checked~[data-m]:not([data-m="3"]),#pc-m3:checked~* [data-m]:not([data-m="3"]){display:none}
/* the savings lines share one cell and the unchosen ones only go invisible, so the tallest (a long language
   wrapping on a phone) sets the height and the card keeps its size whichever count is chosen */
#pc-m1:checked~.pc-save [data-m],#pc-m2:checked~.pc-save [data-m]:not([data-m="2"]),#pc-m3:checked~.pc-save [data-m]:not([data-m="3"]){display:block;visibility:hidden}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:0;border-radius:8px;background:var(--raised);color:var(--text);font-size:15px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--button);color:var(--button-text)}
.btn:disabled{cursor:default;opacity:.7}
.pc-status:empty{display:none}
.pc-status{font-size:14px;color:var(--accent)}
.pc-note,.pc-sandbox{font-size:12px;color:var(--text-3);text-align:center}
.pc-sandbox{margin-top:-6px}

.pc-btns .btn span{text-wrap:balance;text-align:center}
@media (max-width:419px){.pc-price .pill{margin-left:0}}

/* phone: a sticky Buy bar while the film and the story scroll by */
.sticky{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 10px 30px var(--shadow);font-size:15px;font-weight:600}
.sticky>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{min-height:40px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:40px}
@media (min-width:760px){.sticky{display:none!important}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;gap:20px;padding:20px 0;cursor:pointer;font-size:18px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary .ic{color:var(--text-2)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details p{padding-bottom:20px;max-width:640px;font-size:16px;color:var(--text-2)}
.faq details a{color:var(--accent);text-underline-offset:3px}
@media (max-width:899px){.faq{grid-template-columns:minmax(0,1fr);gap:20px}.faq summary{font-size:16px}}

/* ---------- footer ---------- */
.foot{margin-top:80px;padding:40px 0 80px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;font-size:14px;color:var(--text-2)}
.foot-l{display:flex;flex-direction:column;gap:20px;align-items:flex-start;min-width:0}
.foot-brand{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.foot-brand .brand img{width:24px;height:24px}
.foot-brand span{color:var(--text-3)}
.foot-legal{display:flex;flex-wrap:wrap;gap:10px 20px}
.foot-legal a,.foot-l a{color:var(--text);text-underline-offset:3px}
.foot-co{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;color:var(--text-3)}
.company-brand{display:inline-flex}
.company-brand .sanmaru-mark{display:block;width:135px;height:24px;background:var(--text-2);-webkit-mask:url("sanmaru-logo-light.svg") no-repeat left center/contain;mask:url("sanmaru-logo-light.svg") no-repeat left center/contain}
.tm{max-width:760px;font-size:12px;color:var(--text-3)}
.foot-langs ul{display:grid;grid-template-columns:repeat(2,auto);gap:10px 40px}
.foot-langs a{color:var(--text-2);text-decoration:none}
.foot-langs a:hover{color:var(--text)}
.foot-langs a[aria-current]{color:var(--text);font-weight:600}
body.home .foot{padding-bottom:120px}
@media (max-width:759px){.foot{grid-template-columns:minmax(0,1fr)}}

/* ---------- legal drafts and 404 ---------- */
.legal-doc{max-width:760px;padding:40px 0 0;display:flex;flex-direction:column;gap:20px}
.legal-doc .draft{padding:16px;border-radius:8px;background:oklch(0.74 0.16 70 / .14);color:var(--orange);font-weight:600}
.legal-doc h1{font-size:clamp(30px,4vw,44px);font-weight:650;letter-spacing:-.02em}
.legal-doc .meta{color:var(--text-3);font-size:14px}
.legal-doc h2{padding-top:20px;font-size:20px;font-weight:650}
.legal-doc p{color:var(--text-2)}
.legal-doc a{color:var(--accent)}
.nf{padding:80px 0 0;display:flex;flex-direction:column;gap:20px;max-width:760px}
.nf-code{font:14px/1 var(--mono);color:var(--text-3)}
.nf h1{font-size:clamp(30px,4vw,56px);font-weight:650;letter-spacing:-.025em}
.nf p{color:var(--text-2)}
.nf-links{display:flex;flex-wrap:wrap;gap:10px}
.nf-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:8px;background:var(--raised);color:var(--text);text-decoration:none}

/* motion only when the visitor has not asked for less */
@media (prefers-reduced-motion:no-preference){
  .btn,.tabs button,.langs summary,.theme summary,.read-bar .db,.read-bar .ib{transition:background-color .12s ease-out,color .12s ease-out}
  .btn.primary:hover{background:var(--button-hover)}
  .faq summary .ic{transition:transform .22s var(--spring)}
  html.story-live .stamp{transition:opacity .2s ease-out}
  .sticky{transition:transform .34s var(--spring),opacity .2s ease-out}
  .sticky.away{transform:translateY(140%);opacity:0}
}
@media (prefers-reduced-motion:reduce){.sticky.away{display:none}}

/* ---------- the story scene: a short film in the film's language (assets/scene.js sets --u and every position) ---------- */
.scene{margin:40px 0 0}
.sc-stage{position:relative;width:100%;aspect-ratio:2/1;border-radius:24px;overflow:hidden;background:var(--film-bg);box-shadow:inset 0 0 0 1px var(--line);--u:1.12px;font:calc(var(--u)*14)/1.45 var(--sans);color:oklch(0.95 0.006 var(--hue));contain:layout paint}
.sc-stage.tall{aspect-ratio:5/8}
.sc-ridges{position:absolute;inset:0;width:100%;height:100%}
.sc-ridges path:nth-child(1){fill:var(--ridge-1)}.sc-ridges path:nth-child(2){fill:var(--ridge-2)}.sc-ridges path:nth-child(3){fill:var(--ridge-3)}
.sc-stage>*:not(.sc-ridges){position:absolute;left:0;top:0;margin:0}
.sc-term{border-radius:calc(var(--u)*12);overflow:hidden;background:oklch(0.19 0.007 var(--hue));box-shadow:0 0 0 1px oklch(0.1 0.012 var(--hue)),0 calc(var(--u)*20) calc(var(--u)*50) oklch(0.1 0.018 var(--hue) / .55)}
.sc-bar{position:relative;height:calc(var(--u)*28);display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*12);font-weight:600;color:oklch(0.68 0.006 var(--hue));background:oklch(0.27 0.007 var(--hue))}
.sc-lights{position:absolute;left:calc(var(--u)*12);display:flex;gap:calc(var(--u)*7)}
.sc-lights i{width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:50%;background:oklch(0.68 0.19 25)}.sc-lights i+i{background:oklch(0.82 0.15 85)}.sc-lights i+i+i{background:oklch(0.74 0.17 145)}
.sc-body{padding:calc(var(--u)*14) calc(var(--u)*18);font:calc(var(--u)*13.5)/1.55 var(--mono);color:oklch(0.9 0.005 var(--hue));display:flex;flex-direction:column;gap:calc(var(--u)*4)}
:lang(ko) .sc-body,:lang(ja) .sc-body,:lang(th) .sc-body{font-family:var(--mono),var(--sans)}
.sc-welcome{align-self:flex-start;border:1px solid oklch(0.66 0.13 40);border-radius:calc(var(--u)*6);padding:calc(var(--u)*3) calc(var(--u)*10);margin-bottom:calc(var(--u)*6)}
.sc-welcome i,.sc-r i{font-style:normal;color:oklch(0.66 0.13 40)}
.sc-l i{font-style:normal;color:oklch(0.62 0.006 var(--hue))}
.sc-w{color:oklch(0.78 0.006 var(--hue))}.sc-w b{color:oklch(0.95 0.006 var(--hue))}
.sc-think{padding:calc(var(--u)*10) calc(var(--u)*16);border-radius:calc(var(--u)*18);background:light-dark(oklch(0.99 0.002 var(--hue)),oklch(0.96 0.006 var(--hue)));color:oklch(0.25 0.018 var(--hue));font-size:calc(var(--u)*15);font-weight:600;white-space:nowrap;box-shadow:0 calc(var(--u)*8) calc(var(--u)*24) oklch(0.1 0.018 var(--hue) / .4)}
.sc-think::after{content:"";position:absolute;left:calc(var(--u)*26);bottom:calc(var(--u)*-12);width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:50%;background:inherit;box-shadow:calc(var(--u)*-12) calc(var(--u)*12) 0 calc(var(--u)*-3) oklch(0.96 0.006 var(--hue))}
.sc-pile{position:absolute;inset:0}
.sc-doc{position:absolute;left:0;top:0;display:flex;align-items:center;gap:calc(var(--u)*8);width:calc(var(--u)*280);height:calc(var(--u)*40);padding:0 calc(var(--u)*12);border-radius:calc(var(--u)*8);background:oklch(0.97 0.005 var(--hue));color:oklch(0.27 0.021 var(--hue));font-size:calc(var(--u)*14);font-weight:600;box-shadow:0 calc(var(--u)*3) calc(var(--u)*10) oklch(0.1 0.018 var(--hue) / .35);will-change:transform,opacity}
.sc-doc .ty{width:calc(var(--u)*16);height:calc(var(--u)*16)}
.sc-doc>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-count{padding:calc(var(--u)*4) calc(var(--u)*10);border-radius:calc(var(--u)*6);background:oklch(0.82 0.15 85);color:oklch(0.25 0.05 70);font:700 calc(var(--u)*15)/1.3 var(--sans);transform-origin:0 50%;white-space:nowrap}
.sc-line{width:calc(var(--u)*4);border-radius:calc(var(--u)*2);background:var(--accent)}
.sc-shelf{border-radius:calc(var(--u)*24);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 calc(var(--u)*24) calc(var(--u)*60) var(--shadow);padding:calc(var(--u)*14) calc(var(--u)*8);color:var(--text);font-size:calc(var(--u)*13);transform-origin:100% 50%}
.sc-shelf .shelf-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*8);padding:0 calc(var(--u)*6) calc(var(--u)*8)}
.sc-shelf .seg{font-size:calc(var(--u)*11);padding:calc(var(--u)*2)}
.sc-shelf .seg span{padding:calc(var(--u)*3) calc(var(--u)*8)}
.sc-review{font-size:calc(var(--u)*11);font-weight:600;color:var(--accent);background:var(--brand-soft);border-radius:999px;padding:calc(var(--u)*3) calc(var(--u)*8);white-space:nowrap}
.sc-shelf .row{height:calc(var(--u)*34);gap:calc(var(--u)*8);padding:0 calc(var(--u)*6)}
.sc-shelf .row .ti{font-size:calc(var(--u)*13)}
.sc-shelf .ai{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.sc-shelf .ai .fb{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.sc-shelf .tag{font-size:calc(var(--u)*10);padding:calc(var(--u)*1) calc(var(--u)*6);line-height:1.5}
.sc-toast{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*8) calc(var(--u)*14);border-radius:999px;background:var(--button);color:var(--button-text);font-size:calc(var(--u)*14);font-weight:650;white-space:nowrap}
.sc-toast .ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.sc-next{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*15);font-weight:600;color:light-dark(var(--text),oklch(0.95 0.006 var(--hue)));white-space:nowrap}
.sc-next .ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.sc-rail{display:flex;align-items:flex-start;gap:20px;margin-top:20px;padding:0 2px}
.sc-rail ol{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sc-rail li{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-3)}
.sc-rail li.on{color:var(--text)}
.sc-rail .bar{display:block;height:2px;background:var(--line);overflow:hidden}
.sc-rail .bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.sc-replay{display:inline-flex;align-items:center;gap:8px;flex:none;height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--raised);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
@media (max-width:759px){.sc-rail{flex-direction:column}.sc-rail ol{grid-template-columns:minmax(0,1fr);gap:10px;width:100%}}
/* reduced motion or no script: three still frames, one per beat, with their captions */
.scene.board .sc-boards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.scene.board .sc-boards>div{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-2)}
.scene.board .sc-boards .sc-stage{border-radius:16px}
.scene.board>.sc-stage,.scene.board .sc-rail{display:none}
@media (max-width:759px){.scene.board .sc-boards{grid-template-columns:minmax(0,1fr)}}

/* ---------- guide and support: a one-column page list at the left (a disclosure on phones), prev / next at the end ---------- */
.doc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;padding-top:40px}
.doc-nav{position:sticky;top:20px}
.doc-nav summary{list-style:none;font-size:13px;font-weight:600;color:var(--text-3);padding:10px 0;cursor:default}
.doc-nav summary::-webkit-details-marker{display:none}
.doc-nav ol{display:flex;flex-direction:column;gap:2px}
.doc-nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--text-2);text-decoration:none;font-size:15px}
.doc-nav a:hover{background:var(--raised);color:var(--text)}
.doc-nav a[aria-current]{background:var(--selected);color:var(--text);font-weight:600}
.doc-body{max-width:720px;min-width:0;display:flex;flex-direction:column;gap:20px}
.doc-body h1{font-size:clamp(30px,4vw,44px);font-weight:650;letter-spacing:-.02em;line-height:1.15}
.doc-body h2{padding-top:20px;font-size:24px;font-weight:650;letter-spacing:-.01em;scroll-margin-top:20px}
.doc-body h3{font-size:18px;font-weight:650;scroll-margin-top:20px}
.doc-body p,.doc-body li{color:var(--text-2);line-height:1.65}
.doc-body strong{color:var(--text);font-weight:600}
.doc-body a{color:var(--accent);text-underline-offset:3px}
.doc-body ul,.doc-body ol{display:flex;flex-direction:column;gap:10px;padding-left:20px}
.doc-body ul{list-style:disc}.doc-body ol{list-style:decimal}
.doc-body code{font:13px/1.4 var(--mono);padding:2px 6px;border-radius:6px;background:var(--raised);color:var(--text);overflow-wrap:anywhere}
.doc-body .table{overflow-x:auto;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.doc-body table{width:100%;border-collapse:collapse;font-size:14px}
.doc-body th{text-align:left;font-weight:600;color:var(--text);background:var(--raised)}
.doc-body th,.doc-body td{padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text-2)}
.doc-body tr:last-child td{border-bottom:0}
.callout,.upcoming{border-radius:16px;padding:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.upcoming{display:flex;flex-direction:column;gap:4px;background:none;box-shadow:inset 0 0 0 1px var(--line);border-left:0}
.upcoming b{font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--text-3)}
.upcoming p,.callout p{font-size:14px}
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 10px 30px var(--shadow)}
.shot-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:21/9;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:20px;text-align:center;color:var(--text-3);font-size:13px}
.shot-frame img{opacity:.6}
.untranslated{padding:10px 16px;border-radius:8px;background:var(--raised);font-size:14px}
.doc-pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:40px;border-top:1px solid var(--line);margin-top:20px}
.pn{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);color:var(--text)!important;text-decoration:none;font-weight:600}
.pn small{font-size:12px;font-weight:500;color:var(--text-3)}
.pn.next{text-align:right}
.pn:hover{background:var(--raised)}
@media (max-width:959px){
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:20px}
  .doc-nav{position:static;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:0 10px}
  .doc-nav summary{cursor:pointer;padding:16px 6px;color:var(--text)}
  .doc-nav summary::after{content:"+";float:right;color:var(--text-3)}
  .doc-nav details[open] summary::after{content:"−"}
  .doc-nav ol{padding-bottom:10px}
  /* tables with more than two columns read as cards on a phone */
  .doc-body .table.wide{box-shadow:none;border-radius:0;overflow:visible}
  .doc-body .table.wide thead{display:none}
  .doc-body .table.wide table,.doc-body .table.wide tbody,.doc-body .table.wide tr,.doc-body .table.wide td{display:block}
  .doc-body .table.wide tr{border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:10px 0;margin-bottom:10px}
  .doc-body .table.wide td{border:0;padding:4px 16px}
  .doc-body .table.wide td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--text-3)}
}
@media (max-width:420px){.doc-pn{grid-template-columns:minmax(0,1fr)}.pn.next{text-align:left}}

/* ---------- the story told as one flowing message, the pile still waiting, the weekly reset, spaced review ---------- */
.story h2.flow{max-width:880px;font-size:clamp(22px,2.4vw,32px);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--text-2)}
:lang(th) .story h2.flow{line-height:1.6}
.pile{position:relative;display:flex;align-items:center;gap:10px;max-width:560px;margin-top:40px;padding:16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong)}
.pile b{flex:1;font-size:16px;font-weight:600}
.pile-n{min-width:32px;height:32px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--button);color:var(--button-text);font-weight:700;font-variant-numeric:tabular-nums}
.pile-paper{position:absolute;left:16px;right:16px;bottom:-10px;height:10px;z-index:-1}
.pile-paper i{position:absolute;left:10px;right:10px;bottom:0;height:20px;border-radius:0 0 12px 12px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.pile-paper i+i{left:20px;right:20px;bottom:-8px}
.pile-paper i+i+i{left:30px;right:30px;bottom:-16px}
.pile{z-index:0;margin-bottom:20px}
.beat{margin-top:80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:center}
.beat h3{font-size:clamp(20px,2.2vw,28px);font-weight:600;line-height:1.35;letter-spacing:-.01em}
.beat p{margin-top:10px;font-size:16px;color:var(--text-2);max-width:620px}
.setcard{border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 20px 50px var(--shadow);padding:16px;display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.set-row span{display:flex;flex-direction:column;gap:2px}
.set-row small{font-size:12px;color:var(--text-3)}
.set-pop{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:var(--raised);font-weight:600;font-size:13px}
.set-time{font:600 14px/1 var(--mono);padding:6px 10px;border-radius:8px;background:var(--raised)}
.set-rule{margin:10px 0 0!important;font-size:13px!important;color:var(--text-3)!important}
.beat.later{grid-template-columns:minmax(0,1fr)}
.curve{display:flex;align-items:center;flex-wrap:wrap;gap:10px 0;margin-top:20px}
.curve li{display:flex;align-items:center;font-size:14px;color:var(--text-2);white-space:nowrap}
.curve li i{display:block;width:40px;height:2px;margin:0 10px;background:var(--line-strong)}
.curve li span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.curve li.start span{box-shadow:none}
.curve li.done{margin-left:10px}
.curve li.done span{display:inline-flex;align-items:center;gap:6px;background:var(--button);color:var(--button-text);box-shadow:none;font-weight:600}
@media (max-width:899px){.beat{grid-template-columns:minmax(0,1fr);gap:20px}}
/* phone: the same steps as a vertical timeline, joined by short lines */
@media (max-width:759px){.curve{flex-direction:column;align-items:flex-start;gap:0}.curve li{flex-direction:column;align-items:flex-start}
  .curve li i,.curve li.done::before{display:block;width:2px;height:12px;margin:4px 0 4px 20px;background:var(--line-strong)}
  .curve li.done{margin-left:0}.curve li.done::before{content:""}}
.pricing h2{margin-bottom:40px}
@media (min-width:760px){.pricing h2{text-align:center}}
/* phones: the reader's bar keeps every control on screen: arrows and count on one row, the three choices and the star below */
@media (max-width:479px){
  html.story-live .read-bar{flex-wrap:wrap;border-radius:16px;row-gap:6px}
  html.story-live .read-gap{flex-basis:100%;height:0}
  .read-bar .db{flex:1 1 0;min-width:0;padding:6px;height:auto;min-height:32px;white-space:normal;line-height:1.2;border-radius:12px}
}

/* ---------- hero: S1 option 6 — centered title + two CTA buttons ---------- */
.hero-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 0 40px}
.hero-wrap .hero{margin:0;font-size:clamp(32px,3.5vw,50px);max-width:1200px}
.hero-wrap .hero .hv span{display:inline-block}
.hero-wrap .hero span{display:block}
.hero-wrap .hero .h2{color:var(--text-2)}
.hero-wrap .hero .hv[hidden]{display:none}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.hero-dl{gap:8px;padding-left:18px}
.apple-logo{display:block;flex:none;width:13px;height:16px;background:currentColor;-webkit-mask:url("agents/apple-logo.png") center/contain no-repeat;mask:url("agents/apple-logo.png") center/contain no-repeat}
.hero-pr{gap:8px}
:lang(ko) .hero-wrap .hero,:lang(ja) .hero-wrap .hero{letter-spacing:-.01em}
:lang(th) .hero-wrap .hero{line-height:1.3;letter-spacing:0}
@media (max-width:759px){.hero-wrap{padding-top:32px}.hero-wrap .hero{font-size:clamp(26px,6vw,40px)}.hero-btns{gap:10px}}
@media (max-width:419px){.hero-btns{flex-direction:column;align-items:stretch}.hero-btns .btn{width:100%}}

/* header compact download button */
.hd-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:8px;background:var(--raised);color:var(--text);font:600 14px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;letter-spacing:0}
.hd-btn .apple-logo{flex:none}
.hd-btn:hover{background:var(--line)}
@media (max-width:679px){.hd-btn{width:36px;padding:0;justify-content:center}.hd-btn span:not(.apple-logo){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ---------- kinds: waterfall of document-kind chips (S2 폭포 낙하) ---------- */
.kinds .sub{max-width:600px}
.kinds-fall{position:relative;margin-top:40px;display:flex;gap:10px;align-items:flex-start;min-height:200px;max-width:100%;overflow:hidden}
/* static (reduced motion or no JS): chips wrap as a flex row */
.kinds-fall:not(.kinds-static) .kind-chip:not(.wf-chip){display:none}
.kinds-fall.kinds-static .kind-chip{display:inline-flex}
.kinds-fall.kinds-static{flex-wrap:wrap;position:static;height:auto!important}
/* animated columns */
.wf-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:1 1 0;min-width:0}
.wf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.4;max-width:100%;opacity:0;animation:wfDrop 3.6s ease-in-out infinite}
.wf-chip .ic{flex:none;color:var(--text-3)}
.wf-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes wfDrop{
  0%{opacity:0;transform:translateY(-32px)}
  12%{opacity:1;transform:translateY(0)}
  72%{opacity:1;transform:translateY(0)}
  88%{opacity:0;transform:translateY(16px)}
  100%{opacity:0;transform:translateY(16px)}
}
@media (prefers-reduced-motion:reduce){.wf-chip{animation:none}}
@media (max-width:419px){.wf-chip{font-size:12px;padding:5px 10px;gap:5px}}

/* ---------- review: several AIs write at once, the visitor reads one, sets one aside, swipes the rest ---------- */
.review .sub{max-width:640px}
.review-stage{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:28px;align-items:stretch}
.rv-agents{position:relative;min-height:420px}
.rv-win{position:absolute;border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 18px 44px var(--shadow);font-size:12.5px;line-height:1.5;transition:box-shadow .3s}
.rv-win.busy{box-shadow:inset 0 0 0 1px var(--line-strong),0 0 0 3px var(--brand-soft),0 18px 44px var(--shadow)}
.rv-wbar{display:flex;align-items:center;gap:10px;height:30px;padding:0 12px;background:var(--raised);color:var(--text-3);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden}
.rv-lights{display:flex;gap:6px;flex:none}.rv-lights i{width:10px;height:10px;border-radius:50%}
.rv-lights i:nth-child(1){background:oklch(0.68 0.19 25)}.rv-lights i:nth-child(2){background:oklch(0.82 0.15 85)}.rv-lights i:nth-child(3){background:oklch(0.74 0.17 145)}
.rv-wbody{position:relative;height:calc(100% - 30px);overflow:hidden}
.rv-out p,.rv-in{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-out p{color:var(--text-2)}
.rv-out p.in{animation:rvLineIn .3s var(--spring)}
.rv-cur{display:inline-block;width:7px;height:13px;margin-left:1px;vertical-align:-2px;background:var(--text-3);animation:rvBlink 1s steps(1) infinite}
/* Claude Code: a terminal */
.rv-term{left:0;top:0;width:62%;height:200px;background:#1d1e22;box-shadow:inset 0 0 0 1px #34363d,0 18px 44px var(--shadow)}
.rv-term .rv-wbar{background:#2a2c31;color:#9a9ca3}
.rv-term .rv-wbody{padding:10px 14px;font-family:var(--mono);font-size:12px;color:#e6e6e6}
.rv-term .rv-out p{color:#c9cad0}
.rv-cl-hi{margin:0 0 6px;padding:6px 10px;border:1px solid #d77757;border-radius:6px;color:#e6e6e6}
.rv-cl-hi b{color:#d77757}
.rv-term .rv-pr{color:#d77757}.rv-term .rv-cur{background:#e6e6e6}
/* Codex: a desktop agent app */
.rv-app{right:0;top:64px;width:56%;height:190px}
.rv-app .rv-wbody{display:flex}
.rv-app-side{flex:none;width:44px;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--raised);border-right:1px solid var(--line)}
.rv-app-side i{width:22px;height:6px;border-radius:3px;background:var(--line-strong)}.rv-app-side i.on{background:var(--brand)}
.rv-app-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:10px 12px}
.rv-box{padding:6px 10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text)}
/* Gemini: a plugin panel inside an editor */
.rv-ide{left:8%;bottom:0;width:70%;height:180px}
.rv-ide .rv-wbody{display:flex}
.rv-code{flex:1;min-width:0;padding:12px;display:flex;flex-direction:column;gap:9px;background:light-dark(oklch(0.97 0.004 var(--hue)),oklch(0.22 0.012 var(--hue)))}
.rv-code i{display:block;height:6px;border-radius:3px;background:var(--line-strong)}
.rv-code i:nth-child(3n+2){margin-left:16px;background:light-dark(oklch(0.75 0.08 var(--hue)),oklch(0.5 0.08 var(--hue)))}
.rv-plug{flex:none;width:46%;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-left:1px solid var(--line)}
.rv-plug-h{margin:0;font-weight:650;color:var(--text)}.rv-plug-h b{color:#3f73e6}
.rv-plug .rv-out{flex:1;min-height:0;overflow:hidden}
/* the reading window opens beside the shelf, like the app's side window */
.rv-peek{position:absolute;right:-12px;top:36px;z-index:3;width:min(300px,86%);padding:14px 16px 16px;border-radius:16px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-strong),0 24px 60px var(--shadow);transform-origin:100% 30%;opacity:0;transform:scale(.94);pointer-events:none}
.rv-peek.on{opacity:1;transform:none;transition:opacity .25s ease-out,transform .4s var(--spring)}
.rv-peek-h{display:flex;align-items:center;gap:8px;font-size:14px}.rv-peek-h b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-peek-ai{margin:12px 0 6px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:650;color:var(--accent)}
.rv-peek-l{margin:0 0 10px;display:flex;flex-direction:column;gap:6px}
.rv-peek-l i{display:block;height:6px;border-radius:3px;background:var(--line-strong)}
.rv-peek-l+.rv-peek-l i{background:var(--line)}
.rv-peek-ok{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 12px;border-radius:999px;background:var(--button);color:var(--button-text);font-size:12px;font-weight:650;transition:transform .15s}
.rv-peek-ok.press{transform:scale(.94)}
/* the shelf: rows swipe like the app (right on blue sets aside, left on graphite skips) */
@media (prefers-reduced-motion:no-preference){.rv-shelf{min-height:420px}}
.rv-shelf .shelf-head{display:flex;align-items:center;gap:8px}
.rv-count{margin-left:auto;font-size:12px;font-weight:650;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.rv-rows{position:relative;display:flex;flex-direction:column}
.rv-row{position:relative;height:42px;border-radius:9px;overflow:hidden;flex:none}
.rv-row.enter{animation:rvRowIn .45s var(--spring)}
.rv-row.out{height:0;opacity:0;transition:height .3s ease-in .12s,opacity .2s ease-in .12s}
.rv-row::before{content:attr(data-under);position:absolute;inset:0;display:flex;align-items:center;padding:0 14px;font-size:12px;font-weight:650;opacity:0}
.rv-row.swipe-skip::before{opacity:1;justify-content:flex-end;background:light-dark(oklch(0.45 0.02 var(--hue)),oklch(0.42 0.02 var(--hue)));color:#fff}
.rv-row.swipe-later::before{opacity:1;background:var(--button);color:var(--button-text)}
.rv-in-row{position:relative;display:flex;align-items:center;gap:10px;height:100%;padding:0 8px;background:var(--glass);transition:transform .34s cubic-bezier(.5,0,.75,0)}
.rv-row.swipe-skip .rv-in-row{transform:translateX(-104%)}
.rv-row.swipe-later .rv-in-row{transform:translateX(104%)}
.rv-row.reading .rv-in-row{background:var(--brand-soft)}
.rv-in-row .ti{flex:1;min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes rvRowIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes rvLineIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rvBlink{50%{opacity:0}}
/* Context: reset + later timeline */
.rv-context{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rv-ctx-item{display:flex;flex-direction:column;padding:20px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.rv-ctx-title{font-size:15px;font-weight:600;line-height:1.4}
.rv-ctx-note{margin-top:6px;font-size:14px;color:var(--text-2)}
/* Reset card: the app's count capsule (newest AIs stacked, the count below). The count rolls down to 0, the icons
   leave, and the capsule shrinks back into the edge line, which glows once and rests. Plays while .rv-context.on. */
.rv-reset-anim{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 0 4px}
.rv-cap-wrap{position:relative;width:44px;height:92px}
.rv-cap{position:absolute;top:0;left:0;width:44px;height:92px;border-radius:22px;overflow:hidden;
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 6px 18px var(--shadow)}
.rv-cap-in{position:absolute;left:0;top:0;width:44px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.rv-cap-ics{display:flex;flex-direction:column;align-items:center}
.rv-cap-ics img{box-sizing:content-box;width:20px;height:20px;padding:2px;border-radius:8px;background:var(--surface);display:block}
.rv-cap-ics img:first-child{position:relative;z-index:1}
.rv-cap-ics img+img{margin-top:-6px}
.rv-cap-cnt{display:block;height:18px;overflow:hidden;font:700 15px/18px ui-rounded,var(--sans,system-ui);color:var(--text);font-variant-numeric:tabular-nums}
.rv-cap-roll{display:flex;flex-direction:column}
.rv-cap-roll i{font-style:normal;height:18px;text-align:center}
.rv-cap-roll i:last-child{color:var(--text-2)}
.rv-context.on .rv-cap{animation:rvCap 8s ease-in-out infinite}
.rv-context.on .rv-cap-in{animation:rvCapIn 8s ease-in-out infinite}
.rv-context.on .rv-cap-ics{animation:rvCapIcs 8s ease-in-out infinite}
.rv-context.on .rv-cap-roll{animation:rvCapRoll 8s ease-in-out infinite}
@keyframes rvCapRoll{0%,8%{transform:none}10%,15%{transform:translateY(-18px)}17%,22%{transform:translateY(-36px)}
  24%,29%{transform:translateY(-54px)}31%,36%{transform:translateY(-72px)}38%,43%{transform:translateY(-90px)}
  45%,89%{transform:translateY(-108px)}90%,100%{transform:none}}
@keyframes rvCapIcs{0%,44%{opacity:1}49%,90%{opacity:0}97%,100%{opacity:1}}
@keyframes rvCapIn{0%,50%{opacity:1}55%,90%{opacity:0}97%,100%{opacity:1}}
@keyframes rvCap{
  0%,54%{top:0;left:0;width:44px;height:92px;border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 6px 18px var(--shadow)}
  60%{top:26px;left:20px;width:4px;height:40px;border-radius:2px;background:var(--line-strong);box-shadow:inset 0 0 0 1px transparent,0 0 0 transparent}
  64%,70%{top:26px;left:20px;width:4px;height:40px;border-radius:2px;background:var(--brand);box-shadow:inset 0 0 0 1px transparent,0 0 10px var(--brand)}
  80%,88%{top:26px;left:20px;width:4px;height:40px;border-radius:2px;background:var(--line-strong);box-shadow:inset 0 0 0 1px transparent,0 0 0 transparent}
  96%,100%{top:0;left:0;width:44px;height:92px;border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 6px 18px var(--shadow)}
}
/* Later card: the app's Read later list, grouped by the day each comes back. The first row comes back to the top
   with Back again; the 1 · 3 · 7 steps stay readable below. */
.rv-later-anim{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.rv-la{padding:6px 6px 8px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 12px 30px var(--shadow)}
.rv-la .shelf-day{padding:8px 8px 6px}
.rv-la .rv-row{height:40px}
.rv-la-swap{display:grid}
.rv-la-swap>*{grid-area:1/1;min-width:0}
.rv-la-swap>.b{opacity:0}
.rv-la .rv-row.b .rv-in-row{background:var(--brand-soft)}
.tag.ret{color:var(--accent);background:var(--glass)}
.rv-context.on .rv-la-swap>.a{animation:rvLaA 7s ease-in-out infinite}
.rv-context.on .rv-la-swap>.b{animation:rvLaB 7s ease-in-out infinite}
@keyframes rvLaA{0%,36%{opacity:1;transform:none}46%,90%{opacity:0;transform:translateX(24px)}98%,100%{opacity:1;transform:none}}
@keyframes rvLaB{0%,48%{opacity:0;transform:translateY(-10px)}58%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
.rv-la-tl{display:flex;align-items:center;gap:0;padding:0 4px}
.rv-la-dot{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.rv-la-dot i{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.rv-la-dot span{font-size:10px;color:var(--text-2);white-space:nowrap}
.rv-la-seg{flex:1;height:2px;background:var(--line);min-width:12px;margin-bottom:18px}
@media (prefers-reduced-motion:reduce){.rv-context.on .rv-cap,.rv-context.on .rv-cap-in,.rv-context.on .rv-cap-ics,.rv-context.on .rv-cap-roll,.rv-context.on .rv-la-swap>.a,.rv-context.on .rv-la-swap>.b{animation:none}}
@media (max-width:899px){.review-stage{grid-template-columns:minmax(0,1fr);gap:16px}.rv-agents{min-height:300px}
  .rv-term{width:74%;height:150px}.rv-app{width:66%;top:48px;height:150px}.rv-ide{width:80%;left:4%;height:140px}.rv-peek{top:auto;bottom:8px;right:0}}
@media (max-width:599px){.rv-agents{min-height:270px}.rv-win{font-size:11.5px}.rv-term{width:72%;height:132px}.rv-app{width:62%;top:40px;height:132px}
  .rv-ide{width:76%;left:6%;height:118px}.rv-code{display:none}.rv-plug{width:100%;border-left:0}.rv-cl-hi{display:none}.rv-app-side{width:30px}
  .rv-peek{width:min(270px,84%)}}
@media (max-width:599px) and (prefers-reduced-motion:no-preference){.rv-shelf{min-height:410px}}
@media (max-width:759px){.rv-context{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.rv-cur{animation:none}}

/* ---------- changelog page ---------- */
.clog-doc{max-width:760px;padding:40px 0 0;display:flex;flex-direction:column;gap:32px}
.clog-version{display:flex;flex-direction:column;gap:8px}
.clog-ver-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.clog-ver-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:650;letter-spacing:-.02em}
.clog-tag{display:inline-flex;padding:4px 12px;border-radius:8px;font-size:12px;font-weight:650;letter-spacing:.03em}
.clog-tag.prerelease{background:oklch(0.82 0.15 85 / .18);color:var(--orange)}
.clog-build{font:13px/1 var(--mono);color:var(--text-3);margin-top:4px}
.clog-build-n{margin-left:8px}
.clog-section{display:flex;flex-direction:column;gap:12px;padding-top:8px;border-top:1px solid var(--line)}
.clog-section h2{font-size:18px;font-weight:650;letter-spacing:-.01em}
.clog-section ul{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc}
.clog-section li{font-size:15px;color:var(--text-2);line-height:1.6}
.clog-back{margin-bottom:8px}
.clog-back a{font-size:14px;color:var(--accent);text-underline-offset:3px}