/* ==========================================================================
   saera.ai — site.css（全ページ共通・ゲーム Worker の HTML も同じファイルを読む）
   正本: scratchpad/renewal/DESIGN-SPEC.md §2〜§4（＋ADDENDUM）
   構成: 1 トークン / 2 リセット・基本 / 3 タイポ / 4 レイアウト / 5 ヘッダー
         6 ゲームのサブナビ・タブ / 7 フッター / 8 page head / 9 カード
         10 ボタン・リンク / 11 チップ / 12 details / 13 行組みの表
         14 そのほかの部品（§3.11） / 15 モーション（opt-in）
   ルール: 動かす指定は @media (prefers-reduced-motion:no-preference) の内側だけ。
           クラスの削除・改名は同じリリースでしない（追加だけ。§6.4）。
   ========================================================================== */

/* ---------- 1. トークン（§2。値を変えるときはスタイルガイドのコントラスト表も見る） ---------- */
:root{
  --paper:#FFFCFE;
  --mist:#F3EEFF;
  --blush:#FDEAF1;
  --ink:#2B2141;        /* paper 14.8:1 */
  --ink-2:#5E5475;      /* paper 6.9:1 / mist 6.2:1 */
  --ink-3:#6E6487;      /* paper 5.4:1 / mist 4.8:1 */
  --rule:#E4DDF2;
  --line:rgba(43,33,65,.12);
  --cream:#F6EEDD;      /* 蔵書票の生成り */

  /* 装飾専用。文字に使わない */
  --lav:#B8A9E8; --lav-100:#EEE7FF; --lav-200:#DDD1FA;
  --pink:#F5C2D0;
  --grad-brand:linear-gradient(100deg,#9C8BE6 0%,#C7A6F0 45%,#F2A9C4 100%);
  --grad-soft:linear-gradient(135deg,#F3EEFF 0%,#FDEAF1 100%);
  --glitch:#6FE0D0;
  --wood:#8C5B3D; --wood-dk:#5C3A27;

  --lav-ink:#6A56B5;    /* paper 5.7:1 / mist 5.1:1 */
  --pink-ink:#B2436F;   /* paper 5.3:1 / blush 4.6:1 */

  /* チップ上で 4.5:1 を満たす値 */
  --ok:#2C7857;  --ok-bg:#E6F4EC;
  --ng:#BA404B;  --ng-bg:#FDECEE;
  --live:#B2436F;
  --stale:#8A809E;      /* 装飾のみ。文字は --ink-2 */

  --cat-birth-bg:#FBE3EB; --cat-birth:#8A3F59;
  --cat-feat-bg:#ECE6FF;  --cat-feat:#5B48A6;
  --cat-work-bg:#E0F3EC;  --cat-work:#2F6B55;
  --cat-voice-bg:#FFF0DA; --cat-voice:#80520F;
  --cat-inc-bg:#FDE6E2;   --cat-inc:#9A3B30;
  --cat-infra-bg:#E4EFFA; --cat-infra:#2F5E86;

  --f-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-latin:"Syne","Zen Maru Gothic",sans-serif;
  --f-pixel:"DotGothic16","Zen Maru Gothic",monospace;
  --f-hand:"Klee One","Zen Maru Gothic",sans-serif;
  --f-mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --f-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; /* curl など長いコード */

  --t-xs:.8125rem;
  --t-s:.9375rem;
  --t-m:clamp(1rem,.96rem + .2vw,1.0625rem);
  --t-l:1.3125rem;
  --t-xl:1.6875rem;
  --t-2xl:clamp(1.625rem,1.2rem + 1.6vw,2.125rem);
  --t-3xl:clamp(2rem,1.2rem + 3.2vw,3.25rem);
  --t-display:clamp(2.75rem,11vw,8rem);
  --t-mast:clamp(6rem,22vw,20rem);
  --lh-body:1.85; --lh-head:1.35;

  --r-s:10px; --r-m:20px; --r-l:32px; --r-pill:999px;
  --sh-1:0 1px 0 rgba(43,33,65,.05),0 10px 30px -18px rgba(106,86,181,.45);
  --sh-2:0 40px 80px -40px rgba(106,86,181,.55),0 2px 0 rgba(43,33,65,.04);
  --px-frame:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink);
  --px-frame-wood:0 -6px 0 var(--wood),0 6px 0 var(--wood),-6px 0 0 var(--wood),6px 0 0 var(--wood);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --section:clamp(64px,8vw,112px);
  --gutter:clamp(16px,4vw,64px);
  --max:1320px;
  --read:760px;
  --head-h:64px;
  --sub-h:48px;          /* ゲームのサブナビ */

  --z-float:40;          /* ページ側の浮遊物の上限（トップのペットなど） */
  --z-toc:30;            /* モバイルの章目次（sticky） */
  --z-subnav:55;         /* ゲームのサブナビ（sticky） */
  --z-header:60;         /* 共通ヘッダー（sticky） */
  --z-skip:200;          /* スキップリンク（旧ページのモーダル 100 より上） */

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-1:.16s; --dur-2:.32s; --dur-3:.6s;

  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1H0V1h1z'/%3E%3C/svg%3E");

  color-scheme:light;
}
@media (max-width:760px){ :root{ --head-h:56px } }

.theme-night{
  --paper:#211A36; --mist:#2E2549; --blush:#3A2C52;
  --ink:#F4F0FF; --ink-2:#CFC6EC; --ink-3:#B3A8D6;
  --rule:rgba(244,240,255,.16); --line:rgba(244,240,255,.12);
  --lav-ink:#CDBBFF; --pink-ink:#F6BCD3;
  --screen:#B9F1E4; --gold:#F2CB6E;
  --live:#F6BCD3; --stale:#8A809E;
  background:var(--paper); color:var(--ink);
  color-scheme:dark;
}
.theme-light{
  --paper:#FFFCFE; --mist:#F3EEFF; --blush:#FDEAF1;
  --ink:#2B2141; --ink-2:#5E5475; --ink-3:#6E6487;
  --rule:#E4DDF2; --line:rgba(43,33,65,.12);
  --lav-ink:#6A56B5; --pink-ink:#B2436F; --live:#B2436F;
  color:var(--ink);
  color-scheme:light;
}
.theme-press{
  --paper:#F7F1E3; --mist:#EFE6D2;
  --ink:#2E2A24; --ink-2:#6B5F4E; --ink-3:#6B5F4E;
  --rule:#CBBE9F;
  --stamp:#3F8A5A;  /* 3.7:1。20px 以上の太字と記号だけ */
  --f-head:var(--f-mincho);
  background:var(--paper); color:var(--ink);
}

/* ---------- 2. リセット・基本 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px)}
html:has(.subnav){scroll-padding-top:calc(var(--head-h) + var(--sub-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-jp);font-weight:500;
  font-size:var(--t-m);line-height:var(--lh-body);letter-spacing:.03em;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto}
svg{flex:none}
h1,h2,h3,h4{margin:0;font-weight:700;font-feature-settings:"palt";letter-spacing:.04em;line-height:var(--lh-head);
  text-wrap:balance;word-break:auto-phrase}
h1{font-weight:900}
p{margin:0;text-wrap:pretty}
a{color:var(--lav-ink);text-underline-offset:.25em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
code,kbd,samp,pre{font-family:var(--f-mono);font-size:.92em}
:focus-visible{outline:3px solid var(--lav-ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--lav-200);color:var(--ink)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:fixed;left:var(--s-3);top:var(--s-3);z-index:var(--z-skip);display:inline-flex;align-items:center;min-height:44px;padding:0 1.1em;border-radius:var(--r-pill);
  background:var(--ink);color:var(--paper);font:700 var(--t-s)/1.2 var(--f-jp);text-decoration:none;
  transform:translateY(-200%)}
.skip:focus,.skip:focus-visible{transform:none}

/* ---------- 3. タイポ ---------- */
.px,.num{font-family:var(--f-pixel);font-weight:400;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
.hand{font-family:var(--f-hand);font-weight:600}
.lat{font-family:var(--f-latin);font-weight:700;letter-spacing:0}
.lead{font-size:var(--t-l);line-height:1.75;color:var(--ink-2)}
.note{font-size:var(--t-xs);color:var(--ink-3);line-height:1.7}
.muted{color:var(--ink-2)}
.h-1,.h-2,.h-3,.h-4{font-weight:700;font-feature-settings:"palt";letter-spacing:.04em;line-height:var(--lh-head);
  text-wrap:balance;word-break:auto-phrase}
.h-1{font-size:var(--t-3xl);font-weight:900}
.h-2{font-size:var(--t-2xl)}
.h-3{font-size:var(--t-xl)}
.h-4{font-size:var(--t-l)}
.nw{white-space:nowrap}

.display-word{margin:0;font-family:var(--f-latin);font-weight:800;font-size:var(--t-display);line-height:.9;
  letter-spacing:-.04em;white-space:nowrap;max-inline-size:100%;padding-bottom:.06em;margin-left:-.04em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-user-select:none;user-select:none}


.prose>*+*{margin-top:1em}
.prose h2{font-size:var(--t-2xl);margin-top:2.2em}
.prose h3{font-size:var(--t-xl);margin-top:1.8em}
.prose h4{font-size:var(--t-l);margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.35em}
.prose :not(pre)>code{font-size:.9em;padding:.1em .4em;border-radius:6px;background:var(--mist);overflow-wrap:anywhere}
.prose blockquote{margin-inline:0;padding:.2em 0 .2em 1em;border-left:3px solid var(--lav-200);color:var(--ink-2)}
.prose hr{border:0;border-top:1px solid var(--rule);margin-block:2em}

.codeblock{position:relative;margin:0;padding:var(--s-4) var(--s-5);border-radius:var(--r-s);background:var(--mist);
  color:var(--ink);font:400 var(--t-s)/1.7 var(--f-mono);letter-spacing:0;overflow-x:auto;white-space:pre;tab-size:2}
.codeblock code{font:inherit}

/* ---------- 4. レイアウト ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--read{max-width:calc(var(--read) + var(--gutter) * 2)}
.section{padding-block:var(--section)}
.section+.section{padding-top:0}
.sec-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
.sec-head h2{font-size:var(--t-2xl)}
.sec-head p{color:var(--ink-2)}
.stack>*+*{margin-top:var(--stack,var(--s-4))}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster,var(--s-3))}
.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,280px)),1fr))}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-4);margin:0}
.kv dt{color:var(--ink-2);font-weight:700}
.kv dd{margin:0}
main:focus{outline:none}

/* ---------- 5. ヘッダー（§3.2・全ページ共通・sticky） ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-header);height:var(--head-h);margin:0;padding:0;text-align:left;
  font-family:var(--f-jp);line-height:1.2;
  background:color-mix(in srgb,var(--paper) 97%,transparent);border-bottom:1px solid var(--rule);
  view-transition-name:site-header}
/* 下の太字でナビが読みにくくなるため、スクロール後は不透明 */
.site-header.is-scrolled{background:var(--paper);box-shadow:0 8px 24px -20px rgba(106,86,181,.6)}
.site-header__in{display:flex;align-items:center;gap:var(--s-5);height:100%}

/* err は clip-path の外で残すため .era の兄弟。同名 view-transition は複数あると止まるためヘッダーだけ */
.logo{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;font:900 1.75rem/1 var(--f-jp);letter-spacing:-.01em;
  text-decoration:none}
.site-header .logo{view-transition-name:saera-logo}
.logo .sa,.logo .era{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .sa{background-size:250% 100%;background-position:0 0}
.logo .era-w{position:relative;display:inline-block}
.logo .era{position:relative;display:inline-block;background-size:167% 100%;background-position:100% 0}
.logo .err{position:absolute;left:0;top:0;color:var(--pink-ink);opacity:0;pointer-events:none}
.logo .era::after{content:attr(data-text);position:absolute;inset:0;color:var(--glitch);-webkit-text-fill-color:var(--glitch);background:none;clip-path:inset(100% 0 0 0)}
.logo--lg{font-size:2.25rem}

.gnav{display:flex;align-items:center;gap:2px;margin-left:var(--s-2)}
.gnav a{position:relative;z-index:0;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font:700 var(--t-s)/1 var(--f-jp);letter-spacing:.04em;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.gnav a::before{content:"";position:absolute;inset:5px 0;z-index:-1;border-radius:var(--r-pill);background:transparent}
.gnav a:hover{color:var(--ink)}
.gnav a:hover::before{background:var(--mist)}
.gnav a[aria-current="page"]{color:var(--ink)}
.gnav a[aria-current="page"]::before{background:var(--mist)}
.gnav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:1px;width:7px;height:6px;margin-left:-3.5px;
  background:var(--pink-ink);-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}

.hdr-sns{display:flex;gap:0;margin:0 0 0 auto;padding:0;list-style:none}
.hdr-sns a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-2);text-decoration:none}
.hdr-sns a:hover{background:var(--mist);color:var(--ink)}
.hdr-sns svg,.sns-ico{width:18px;height:18px;fill:currentColor}

@media (max-width:760px){
  .site-header__in{gap:var(--s-2)}
  .logo{font-size:1.5rem}
  .gnav{margin-left:auto;gap:0}
  .gnav a{padding:0 10px;font-size:.875rem}
  .gnav a[aria-current="page"]::after{bottom:3px}
  .hdr-sns{display:none}
}
@media (max-width:359px){
  .logo{font-size:1.25rem}
  .gnav a{padding:0 8px}
}

/* ---------- 6. ゲームのサブナビ（§3.3・/game/ 配下だけ）とタブ ---------- */
.subnav{position:sticky;top:var(--head-h);z-index:var(--z-subnav);height:var(--sub-h);font-family:var(--f-jp);line-height:1.2;
  background:var(--paper);border-bottom:1px solid var(--rule)}
.subnav__in{display:flex;align-items:center;gap:2px;height:100%;overflow-x:auto;scrollbar-width:none}
.subnav__in::-webkit-scrollbar{display:none}
/* 見た目36px、::before でタップ領域44px */
.subnav a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);
  font:700 var(--t-s)/1 var(--f-jp);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.subnav a:hover{background:var(--mist);color:var(--ink)}
.subnav a::before{content:"";position:absolute;inset:-4px 0}
.subnav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.subnav__sep{flex:none;width:1px;height:18px;margin:0 6px;background:var(--rule)}
@media (max-width:760px){
  .subnav a{padding:0 10px;font-size:.875rem}
  .subnav__long{display:none}
  .subnav__sep{margin:0 2px}
}
@media (max-width:399px){
  .subnav__in{gap:0;padding-inline:8px}
  .subnav a{padding:0 8px}
  .subnav__sep{margin:0}
}
/* JS なしでは399px以下を常時フェード */
.subnav__in.is-overflow{-webkit-mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent)}
@media (max-width:399px){
  html:not(.js) .subnav__in{-webkit-mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent)}
}

/* リンクは aria-current、role=tab は aria-selected */
.tabs{display:flex;gap:var(--s-1);margin:0;padding:0;list-style:none;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.tabs a,.tabs [role="tab"]{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);
  border:0;background:none;cursor:pointer;font:700 var(--t-s)/1.2 var(--f-jp);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tabs a::after,.tabs [role="tab"]::after{content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:-1px;height:3px;
  background:var(--pink-ink);transform:scaleX(0);transform-origin:50% 50%}
.tabs a:hover,.tabs [role="tab"]:hover{color:var(--ink)}
.tabs a[aria-current="page"],.tabs [role="tab"][aria-selected="true"]{color:var(--ink)}
.tabs a[aria-current="page"]::after,.tabs [role="tab"][aria-selected="true"]::after{transform:scaleX(1)}
.tabpanel:focus-visible{outline-offset:6px}
/* ピルのフォーカスリングは上下の欠けを避けて内側 */
.gnav a:focus-visible,.subnav a:focus-visible,.tabs a:focus-visible,.tabs [role="tab"]:focus-visible{outline-offset:-2px;border-radius:var(--r-pill)}

/* ---------- 7. フッター（§3.4・「玄関」） ---------- */
.site-footer{position:relative;overflow:hidden;margin:var(--section) 0 0;padding:0;text-align:left;font-family:var(--f-jp);
  font-size:var(--t-s);line-height:1.8;color:var(--ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--mist) 0%,transparent),var(--mist) 22%,var(--lav-100))}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{color:var(--lav-ink);text-decoration:underline}
.porch{display:flex;align-items:flex-end;gap:var(--s-4);padding-top:var(--s-7)}
.porch .chibi{--w:84px}
.porch .bubble{margin-bottom:var(--s-7)}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-7);
  padding-block:var(--s-6) var(--s-7);border-top:1px solid var(--rule)}
.foot-brand .logo{font-size:2rem}
.foot-about{margin-top:var(--s-3);color:var(--ink-2);max-inline-size:24em;word-break:auto-phrase}
.foot-col__h{display:flex;align-items:center;gap:.45em;margin:0 0 var(--s-3);padding:0;border:0;
  font:700 var(--t-s)/1.4 var(--f-jp);letter-spacing:.06em;color:var(--ink-2)}
.foot-col__h .ph{color:var(--pink-ink)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot-col li a{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-weight:700}
.foot-col .handle{font-family:var(--f-pixel);font-weight:400;color:var(--ink-2);font-size:var(--t-xs)}
.capsule{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border-radius:var(--r-m);background:var(--paper);box-shadow:var(--sh-1);max-inline-size:22em}
.capsule__h{font-weight:700;font-size:var(--t-xs);color:var(--pink-ink);display:flex;align-items:center;gap:.4em}
.capsule__n{font-weight:700;color:var(--ink)}
.capsule__n .num{font-size:var(--t-xl);color:var(--lav-ink);margin-inline:.15em}
.capsule__s{font-size:var(--t-xs);color:var(--ink-2)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 var(--s-5);
  padding-block:var(--s-2) var(--s-4);border-top:1px solid var(--rule);font-size:var(--t-xs);color:var(--ink-2)}
.foot-legal>span{display:inline-flex;align-items:center;gap:.3em;min-height:44px}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;color:var(--ink-2);text-decoration:underline}
.foot-mast{margin:-.12em 0 -.1em -.04em;padding:0 var(--gutter);font:900 clamp(7.5rem,32vw,26rem)/.72 var(--f-jp);letter-spacing:-.03em;
  white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--lav);-webkit-user-select:none;user-select:none;pointer-events:none}
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .porch{gap:var(--s-3);padding-top:var(--s-4)}
  .porch .chibi{--w:60px}
  .porch .bubble{margin-bottom:var(--s-5)}
  .foot-grid{gap:var(--s-4);padding-block:var(--s-5) var(--s-4)}
  .foot-brand .logo{font-size:1.75rem}
  .foot-about{margin-top:0;line-height:1.7}
  .capsule{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 var(--s-3);
    margin-top:var(--s-3);padding:var(--s-2) var(--s-4) var(--s-3);max-inline-size:none}
  .capsule__h,.capsule__n{white-space:nowrap}
  .capsule__n{line-height:1.5}
  .capsule__s{flex-basis:100%;line-height:1.6;word-break:auto-phrase;text-wrap:balance}
  .foot-col__h{margin-bottom:var(--s-1)}
  .foot-col--sns{grid-column:1/-1}
  .foot-col--sns ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)}
  .foot-legal{padding-block:var(--s-1) var(--s-2)}
  .foot-mast{font-size:clamp(5rem,24vw,26rem)}
}
@media (max-width:420px){
  .porch .bubble{font-size:var(--t-s);max-inline-size:calc(100vw - var(--gutter) * 2 - 72px)}
  .capsule__n .num{font-size:var(--t-l)}
}

/* ---------- 8. ページ見出し（§3.5） ---------- */
.page-head{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--s-8) var(--s-7)}
.page-head__atmos{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.page-head__atmos::before,.page-head__atmos::after{content:"";position:absolute;width:60vmax;aspect-ratio:1;border-radius:50%}
.page-head__atmos::before{left:-20vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(196,180,255,.45),transparent)}
.page-head__atmos::after{right:-24vmax;top:-10vmax;background:radial-gradient(closest-side,rgba(255,196,221,.4),transparent)}
.page-head__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-5) var(--s-7);align-items:end}
.page-head__grid>.display-word{grid-column:1/-1}
.page-head__text{display:grid;gap:var(--s-4);min-width:0;align-content:end}
.page-head__text h1{font-size:var(--t-3xl)}
.page-head__visual{position:relative;margin:0;display:flex;justify-content:flex-end;align-items:flex-end;gap:var(--s-3);min-width:0}
.page-head__visual .crop{width:var(--crop-w,300px);max-width:100%}
.page-head .lead{word-break:auto-phrase;text-wrap:pretty}
/* 見出し語〜場所の札の空きをページ間でそろえる: 右の visual が文字の列より高くても、文字の列は上端から始める
   （align-items:end のままだと文字の列が下へ押され、見出し語の下に白い帯ができる）。
   見出し語は全幅のまま（Timeline・Game などの長い語を1列目に押し込むとグラデの文字が切れる） */
@media (min-width:761px){
  .page-head__grid>.page-head__text{align-self:start}
}
/* 広幅でも離れないよう、ちびは切り抜き基準 */
.page-head__visual .chibi{position:absolute;left:auto;right:calc(min(100%,var(--crop-w,300px)) - var(--chibi-in,28px));bottom:-6px;--w:72px}
.place{display:inline-flex;align-items:center;gap:.45em;margin:0;font:700 var(--t-xs)/1.4 var(--f-jp);letter-spacing:.08em;color:var(--pink-ink)}
.place::before{content:"";width:.9em;height:.78em;background:currentColor;-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.place .px{font-size:1.05em}
.crumb{font-size:var(--t-s);color:var(--ink-2)}
.crumb a{font-weight:700;text-decoration:none}
.crumb a:hover{text-decoration:underline}
@media (max-width:760px){
  .page-head{padding-block:var(--s-6) var(--s-6)}
  .page-head__grid{grid-template-columns:minmax(0,1fr)}
  .page-head__visual{justify-content:flex-start}
  .page-head__visual .crop{width:auto;height:200px}
  .page-head__visual .chibi{left:var(--chibi-x,8%);right:auto}
  .page-head--no-visual-m .page-head__visual{display:none}
}

/* ---------- 9. カード（§3.6） ---------- */
.card{position:relative;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-m);
  box-shadow:var(--sh-1);padding:var(--s-5)}
.card>*+*{margin-top:var(--s-3)}
.card__label{display:flex;align-items:center;gap:.45em;font:700 var(--t-xs)/1.4 var(--f-jp);letter-spacing:.06em;color:var(--pink-ink)}
.card__title{font-size:var(--t-l)}
.card--link:hover{background:var(--mist)}
.card--link:focus-within{outline:3px solid var(--lav-ink);outline-offset:3px}
.card--link :is(h2,h3,h4) a,.card--link .card__link{color:inherit;text-decoration:none}
.card--link :is(h2,h3,h4) a::after,.card--link .card__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card--link :is(h2,h3,h4) a:focus-visible,.card--link .card__link:focus-visible{outline:none}
.card--feature{box-shadow:var(--sh-2);border-radius:var(--r-l);padding:var(--s-6)}
.card--night{border-color:transparent}
.card--soft{background:var(--grad-soft);border-color:transparent;box-shadow:none}
@media (max-width:760px){.card--feature{padding:var(--s-5)}}

/* ---------- 10. ボタン・テキストリンク（§3.7） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.7em 1.4em;
  border-radius:var(--r-pill);font:700 var(--t-s)/1.2 var(--f-jp);letter-spacing:.06em;text-decoration:none;text-align:center;
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);cursor:pointer}
.btn:hover{color:var(--paper);text-decoration:none}
.btn--ghost,.btn--ghost:hover{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--mist)}
.btn--sm{position:relative;min-height:36px;padding:.45em 1em;font-size:var(--t-xs)}
/* 見た目36px、::before でタップ領域44px */
.btn--sm::before{content:"";position:absolute;inset:-4px}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--mist);color:var(--ink-2);border-color:var(--rule);opacity:1;cursor:not-allowed}
.btn svg{width:1.1em;height:1.1em;fill:currentColor}
.more{display:inline-flex;align-items:center;min-height:44px;color:var(--lav-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.more:hover{color:var(--pink-ink)}

/* ---------- 11. チップ・バッジ（§3.8） ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.25em .8em;border-radius:var(--r-pill);
  font:700 var(--t-xs)/1.4 var(--f-jp);letter-spacing:.04em;background:var(--mist);color:var(--ink-2);white-space:nowrap}
.chip.pink{background:var(--blush);color:var(--pink-ink)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.ng{background:var(--ng-bg);color:var(--ng)}
.chip.stale{background:transparent;border:1px solid var(--rule);color:var(--ink-2)}
.chip.ink{background:var(--ink);color:var(--paper)}
.chip .num{letter-spacing:.02em}
.theme-night .chip.ok{background:color-mix(in srgb,var(--screen) 16%,transparent);color:var(--screen)}
.theme-night .chip.ng{background:color-mix(in srgb,var(--pink-ink) 16%,transparent);color:var(--pink-ink)}
.live-dot{display:inline-block;width:8px;height:8px;margin-right:.4em;background:var(--live);vertical-align:.08em}
.live{display:inline-flex;align-items:center;font-weight:700;color:var(--live)}
.chip.cat-birth{background:var(--cat-birth-bg);color:var(--cat-birth)}
.chip.cat-feat{background:var(--cat-feat-bg);color:var(--cat-feat)}
.chip.cat-work{background:var(--cat-work-bg);color:var(--cat-work)}
.chip.cat-voice{background:var(--cat-voice-bg);color:var(--cat-voice)}
.chip.cat-inc{background:var(--cat-inc-bg);color:var(--cat-inc)}
.chip.cat-infra{background:var(--cat-infra-bg);color:var(--cat-infra)}

/* ---------- 12. details／アコーディオン（§3.9） ---------- */
.fold{border-top:1px solid var(--rule)}
.fold:last-of-type{border-bottom:1px solid var(--rule)}
.fold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1em;
  min-height:44px;padding:.8em 0;font-weight:700}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";width:12px;height:12px;flex:none;background:currentColor;
  clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%)}
.fold[open]>summary::after{rotate:45deg}
.fold>summary:hover{color:var(--lav-ink)}
.fold__body{padding:0 0 var(--s-5)}
.fold__body>*+*{margin-top:var(--s-3)}

/* ---------- 13. 行組みの表（§3.10。デスクトップは表、モバイルは行カード） ---------- */
.rows{--cols:4rem minmax(0,1fr) repeat(3,7rem) 7rem;--cols-m:2.5rem minmax(0,1fr) auto;
  list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.rows__head,.rows summary,.rows .row__line{display:grid;grid-template-columns:var(--cols);align-items:center;gap:var(--s-3)}
.rows__head{min-height:40px;font-size:var(--t-xs);font-weight:700;color:var(--ink-3);border-bottom:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule)}
.rows summary,.rows .row__line{min-height:52px;padding-block:var(--s-2);list-style:none;cursor:pointer}
.rows .row__line{cursor:auto}
.rows summary::-webkit-details-marker{display:none}
.rows summary:hover{background:var(--mist)}
.rows .num,.rows .c-num{text-align:right;font-family:var(--f-pixel);font-variant-numeric:tabular-nums}
.rows .c-rank{text-align:left;font-family:var(--f-pixel);font-size:var(--t-l);color:var(--lav-ink)}
.rows .c-name{font-weight:700;overflow-wrap:anywhere;min-width:0}
.rows .c-name a{color:var(--ink)}
.rows .c-score{text-align:right;font-family:var(--f-pixel);font-size:var(--t-l)}
.rows__head .num,.rows__head .c-num,.rows__head .c-score{text-align:right;font-family:var(--f-jp);font-size:inherit}
.rows .row:first-of-type .c-rank,.rows__head+.row .c-rank{color:var(--pink-ink)}
.row__more{display:none;margin:0}
.row__more dt{color:var(--ink-2);font-weight:700}
.row__more dd{margin:0}
@media (max-width:640px){
  .rows__head,.rows summary,.rows .row__line{grid-template-columns:var(--cols-m)}
  .rows .opt,.rows__head{display:none}
  .row__more{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:0 0 12px 2.5rem;font-size:var(--t-s)}
  .rows summary{position:relative;padding-right:18px}
  .rows summary::after{content:"";position:absolute;right:2px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--ink-3);
    clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%)}
  .rows details[open] summary::after{rotate:45deg}
}
@media (min-width:641px){ .rows details>summary{pointer-events:none;cursor:auto} .rows details>summary a{pointer-events:auto} .rows summary:hover{background:transparent} }

/* ---------- 14. そのほかの部品（§3.11） ---------- */
.ph{display:inline-block;width:.9em;height:.78em;flex:none;background:currentColor;vertical-align:-.02em;
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.ph-list{list-style:none;padding:0;margin:0}
.ph-list>li{position:relative;padding-left:1.4em}
.ph-list>li+li{margin-top:.4em}
.ph-list>li::before{content:"";position:absolute;left:0;top:.62em;width:.8em;height:.7em;background:var(--pink-ink);
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}

.pxframe{box-shadow:var(--px-frame)}
.pxframe--wood{box-shadow:var(--px-frame-wood)}

.crop{display:block;background:url("/assets/images/room-bg.png") no-repeat;background-size:var(--bs) auto;
  background-position:var(--bx) var(--by);image-rendering:pixelated;aspect-ratio:var(--ar,1)}
.crop--window{--bs:376.5%;--bx:3.97%;--by:17%;--ar:255/250}
.crop--shelf{--bs:446%;--bx:88%;--by:43%;--ar:215/400}
.crop--desk{--bs:356%;--bx:59%;--by:71%;--ar:270/260}
.crop--door{--bs:800%;--bx:98.3%;--by:33.3%;--ar:1/2}  /* 右端の木枠は除外 */

/* 横長シートは --rows:1;--row:0、--cols はコマ数 */
.chibi{--cols:8;--rows:9;--row:0;--f:6;--dur:1.2s;position:relative;flex:none;width:var(--w,84px);aspect-ratio:192/208;overflow:hidden}
.chibi>img{position:absolute;left:0;top:0;width:calc(100% * var(--cols));height:calc(100% * var(--rows));max-width:none;
  transform:translate(0,calc(-100% * var(--row) / var(--rows)))}
.chibi--wave{--row:3;--f:4;--dur:.9s}
/* フッターは582KBの全体シートを避け、32KBの行3切り出しを使う */
.chibi--waving{--cols:4;--rows:1;--row:0;--f:4;--dur:.9s}
.chibi--wait{--row:6;--f:6;--dur:1.2s}

.bubble{position:relative;display:inline-block;max-inline-size:26em;margin:0;padding:.6em 1.05em;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-radius:var(--r-m);font:600 var(--t-m)/1.65 var(--f-hand);letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--lav-200);word-break:auto-phrase;text-wrap:balance}
/* auto-phrase 非対応の Safari 向け */
.bubble__ph{white-space:nowrap}
.bubble::after{content:"";position:absolute;left:24px;bottom:-8px;width:12px;height:12px;background:inherit;
  border:2px solid var(--ink);border-top:0;border-left:0;rotate:45deg}
.bubble--left::after{left:-8px;bottom:auto;top:50%;margin-top:-6px;border:2px solid var(--ink);border-top:0;border-right:0;rotate:45deg}
.bubble--plain{display:block;max-inline-size:none;font:500 var(--t-m)/var(--lh-body) var(--f-jp);letter-spacing:.03em;
  background:var(--mist);border-color:transparent;box-shadow:none}
.bubble--plain::after{border-color:transparent}
/* 可変長文は句折りで崩れるため通常組み */
.bubble--plain{word-break:normal;text-wrap:wrap}
.bubble--plain p{text-wrap:pretty;line-break:strict}
.voice{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s-3);align-items:start}
.voice>img{width:48px;height:48px;border-radius:50%;background:var(--grad-soft);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--rule)}
.voice .bubble--plain{border-radius:4px var(--r-m) var(--r-m) var(--r-m);padding:var(--s-3) var(--s-4)}
.voice .bubble--plain::after{display:none}
.voice__label{font:700 var(--t-xs)/1.4 var(--f-jp);color:var(--pink-ink);letter-spacing:.06em;margin-bottom:.3em}

.empty{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--r-m);
  border:1.5px dashed var(--lav);background:color-mix(in srgb,var(--mist) 55%,transparent)}
.empty .chibi{--w:56px}
.empty p{font-size:var(--t-s);color:var(--ink-2)}
.empty strong{display:block;color:var(--ink);font-size:var(--t-m)}

.pola{display:inline-block;margin:0;padding:10px 10px 12px;background:var(--paper);box-shadow:var(--sh-1);border:1px solid var(--rule);
  rotate:var(--tilt,-2deg);max-inline-size:100%}
.pola:nth-child(even){--tilt:1.6deg}
.pola img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover;object-position:var(--pos,50% 18%)}   /* 頭切れを防ぐ上寄せ。--pos で上書き可 */
.pola figcaption{margin-top:8px;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5}
.pola time{display:block;font-family:var(--f-pixel);color:var(--lav-ink)}

/* site.js がフッター表示中だけ付与 */
#pet-wrap.is-hidden-by-footer{opacity:0;pointer-events:none}
/* 旧 transition を保つため上書きせず、reduce 時だけ停止。z-index は --z-float 以下 */
@media (prefers-reduced-motion:reduce){#pet-wrap{transition:none}}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);counter-reset:st}
.steps>li{position:relative;padding:var(--s-5) var(--s-3) var(--s-3) 0;border-top:2px solid var(--ink);counter-increment:st}
.steps>li::before{content:counter(st);display:block;margin-bottom:var(--s-3);font:400 var(--t-3xl)/1 var(--f-pixel);color:var(--lav-ink)}
.steps h3{font-size:var(--t-l)}
.steps p{margin-top:6px;font-size:var(--t-s);color:var(--ink-2)}
@media (max-width:760px){
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .steps>li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--s-3);padding:var(--s-4) 0}
  .steps>li::before{grid-row:1/4;margin:0;font-size:var(--t-2xl)}
}

.ticker{display:flex;align-items:stretch;overflow:hidden;border-block:1px solid var(--ink);background:var(--paper)}
.ticker__label{flex:none;display:flex;align-items:center;padding:0 var(--s-4);background:var(--ink);color:var(--paper);font:700 var(--t-xs)/1.2 var(--f-jp);letter-spacing:.06em;white-space:nowrap}
.ticker__viewport{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent)}
.ticker__track{display:flex;gap:2.5rem;width:max-content;margin:0;padding:.7em 0;list-style:none}
.ticker__track>li{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;font-size:var(--t-s)}
.ticker__track a{display:inline-flex;align-items:center;min-height:44px;margin-block:-8px;color:var(--ink);text-decoration:none}
.ticker__track a:hover{text-decoration:underline}
.ticker__track .num{color:var(--lav-ink)}
.ticker__track .ph{color:var(--pink-ink)}

.toc{position:sticky;top:calc(var(--head-h) + var(--s-4));align-self:start;font-size:var(--t-s)}
html:has(.subnav) .toc{top:calc(var(--head-h) + var(--sub-h) + var(--s-4))}
.toc__h{font:700 var(--t-xs)/1.4 var(--f-jp);color:var(--ink-2);letter-spacing:.08em;padding-bottom:var(--s-2);border-bottom:1.5px solid var(--ink);margin-bottom:var(--s-2)}
.toc ol,.toc ul{list-style:none;margin:0;padding:0}
.toc a{display:flex;gap:var(--s-3);align-items:baseline;min-height:44px;padding:var(--s-2) 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-weight:700}
.toc a .num{color:var(--lav-ink);min-width:1.4em;font-size:var(--t-l);line-height:1.2}
.toc a small{display:block;margin-top:2px;font-size:var(--t-xs);font-weight:500;line-height:1.5;color:var(--ink-2)}
.toc a:hover,.toc a[aria-current="true"],.toc a[aria-current="location"]{color:var(--pink-ink)}
.toc a[aria-current="true"] .num,.toc a[aria-current="location"] .num{color:var(--pink-ink)}
@media (max-width:760px){
  .toc{top:var(--head-h)}
  html:has(.subnav) .toc{top:calc(var(--head-h) + var(--sub-h))}
  .toc{z-index:var(--z-toc);margin-inline:calc(var(--gutter) * -1);padding:var(--s-2) var(--gutter);
    background:var(--paper);border-bottom:1px solid var(--rule)}
  .toc__h{display:none}
  .toc ol,.toc ul{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 24px),transparent);padding-right:24px}
  .toc ol::-webkit-scrollbar,.toc ul::-webkit-scrollbar{display:none}
  .toc a{flex:none;min-height:44px;padding:0 var(--s-4);border:1px solid var(--rule);border-radius:var(--r-pill);align-items:center;white-space:nowrap;font-size:.875rem}
  .toc a .num{font-size:inherit;line-height:inherit}
  .toc a small{display:none}
  .toc a[aria-current="true"],.toc a[aria-current="location"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .toc a[aria-current="true"] .num,.toc a[aria-current="location"] .num{color:var(--paper)}   /* ink の地で lav-ink は 2.6:1 しかない。番号も paper（夜のテーマでも反転して読める） */
}

/* ---------- 15. モーション（§4。動かす指定は必ずこの中だけ） ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:var(--ease-out)}

@media (prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}

  /* 同時発火を避け、既定はヘッダーだけ。見本は .logo--glitch */
  :is(.site-header .logo,.logo--glitch) .era{animation:era-slice 8s steps(1) 1s infinite}
  :is(.site-header .logo,.logo--glitch) .err{animation:era-err 8s steps(1) 1s infinite}
  :is(.site-header .logo,.logo--glitch) .era::after{animation:era-shift 8s steps(1) 1s infinite}
  :is(.site-header .logo,.logo--glitch):hover .era,:is(.site-header .logo,.logo--glitch):hover .err,
  :is(.site-header .logo,.logo--glitch):hover .era::after{animation-duration:1.2s}

  .btn{transition:transform var(--dur-1) var(--ease-spring),background-color var(--dur-1),color var(--dur-1)}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.98)}
  .btn[disabled]:hover,.btn[aria-disabled="true"]:hover{transform:none}

  .card--link,.gnav a::before,.subnav a,.hdr-sns a{transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1)}
  .site-header{transition:box-shadow var(--dur-2) var(--ease-out)}

  .fold::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-2) var(--ease-out),content-visibility var(--dur-2) allow-discrete}
  .fold[open]::details-content{block-size:auto}
  .fold>summary::after{transition:rotate var(--dur-1) var(--ease-out)}

  .tabs a::after,.tabs [role="tab"]::after{transition:transform var(--dur-1) var(--ease-out)}

  /* site.js の .is-playing は2周、--loop は常時 */
  .chibi.is-playing>img{animation:sprite var(--dur) steps(var(--f)) 2}
  .chibi--loop>img{animation:sprite var(--dur) steps(var(--f)) infinite}

  .ticker__track{animation:ticker 60s linear infinite}
  .ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}

  /* site.js が .is-away で停止 */
  .cover__aurora i{animation:drift 40s ease-in-out infinite alternate}
  .cover__aurora i:nth-child(2){animation-duration:48s;animation-direction:alternate-reverse}
  .cover.is-away .cover__aurora i{animation-play-state:paused}
  .cover .rise{animation:rise var(--dur-3) var(--ease-out) both}
  .cover .rise:nth-child(2){animation-delay:.08s}
  .cover .rise:nth-child(3){animation-delay:.16s}

  /* box-shadow は動かさない */
  .room-object .dot::after{animation:ping 2.4s var(--ease-out) infinite;animation-delay:var(--d,0s)}
  .room-object .tag::before{animation:blink 3.2s steps(1) infinite;animation-delay:var(--d,0s)}

  [data-copy][data-state="copied"]{animation:pop var(--dur-2) var(--ease-spring)}
}

@keyframes era-slice{0%,93.9%,98%,100%{transform:none;clip-path:none}94%{transform:translateX(2px);clip-path:inset(0 0 40% 0)}95%{transform:translateX(-2px);clip-path:inset(45% 0 0 0)}96%,97.9%{transform:none;clip-path:inset(0 0 100% 0)}}
@keyframes era-err{0%,95.9%,98%,100%{opacity:0;transform:none;clip-path:none}96%{opacity:1;transform:translateX(-1px)}97%{opacity:1;transform:none;clip-path:inset(35% 0 0 0)}}
@keyframes era-shift{0%,94.4%,95.9%,100%{clip-path:inset(100% 0 0 0);transform:none}94.5%{clip-path:inset(38% 0 36% 0);transform:translateX(.06em)}95.3%{clip-path:inset(55% 0 20% 0);transform:translateX(-.06em)}}
@keyframes sprite{
  from{transform:translate(0,calc(-100% * var(--row) / var(--rows)))}
  to{transform:translate(calc(-100% * var(--f) / var(--cols)),calc(-100% * var(--row) / var(--rows)))}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.1)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes ping{0%{opacity:.8;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.6)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pop{50%{transform:scale(1.06)}}

/* reduce では全アニメーションを停止 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .ticker{overflow-x:auto}
  .ticker__viewport{overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,black 90%,transparent);mask-image:linear-gradient(90deg,black 90%,transparent)}   /* 手で動かすので左端はフェードしない */
  .ticker__track [aria-hidden="true"]{display:none}
}