/* web/tokens.css */
/* 共通部品が使う色と形の決まり。アプリ側で値を上書きして、そのアプリの色にする。
   ui.css はここの名前だけを参照する。値は、アプリごとに変えてよい。 */
:root{
  --ink:#3A3128;      /* 文字・主ボタンの色 */
  --sub:#675B4E;      /* 補助の文字 */
  --card:#FFFDF7;     /* 面の色(副ボタンの背景) */
  --line:#E2D6BF;     /* 線の色 */
  --warn:#B3261E;     /* 削除の赤 */
  --b:#3E8E8A;        /* スイッチのオンの色 */
  --glass:rgba(255,255,255,.30); /* ガラスの丸ボタンの背景 */
  --bar-main:#4A7CE0;     /* 横棒グラフ: 値(取得済み) */
  --bar-supplied:#5BB5E8; /* 横棒グラフ: 補った分 */
  --bar-planned:#4BA56A;  /* 横棒グラフ: 予定 */
  --bar-warn:var(--warn); /* 横棒グラフ: 警告のときの、値の色 */
  --r-ctl:1.375rem;   /* ボタンの角丸(高さの半分) */
}

/* web/ui.css */
/* 共通の部品の見た目(ui.js とセット)。ボタンやスイッチの見た目は、ここだけで決める。
   画面ごとのCSS(style.css)には、ボタンの色・形・大きさを書かない(位置や余白の調整だけにする)。
   種類を直せば、使っている全部の画面が変わる。 */
:root{--u-blue:#4A7CE0}
button.u{font:inherit;font-weight:600;border:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;padding:.625rem 2rem;border-radius:var(--r-ctl);background:var(--ink);color:#fff;white-space:nowrap;line-height:1.25;transition:opacity .15s,transform .15s}
button.u:active,button.u[data-press]{opacity:.6;transform:scale(.98)} /* data-press: 押した状態を、見本で出すため(カタログ) */
button.u .ic{width:1.15rem;height:1.15rem;margin:0}
@media (prefers-reduced-motion:reduce){button.u{transition:none}}
button.u.u-fill{width:100%}
button.u.u-grow{flex:1}

/* 状態つきボタン(保存など。UI.btn の opts.state: true)。押した瞬間に縮み、処理中は文字が消えて丸い回転、終わると、ボタンがチェックの大きさの完全な丸になり、✓が弾んで出て、しばらくして元の形に戻る。
   状態は data-state(idle / busy / done)。UI.run(ボタン, 処理) が切り替える。動きを減らす設定では、回転と弾みを止める(状態の見た目は変わる) */
button.u[data-state]{position:relative;overflow:hidden;transition:transform .1s,background-color .25s,opacity .15s,width .32s cubic-bezier(.2,.9,.3,1),padding .32s cubic-bezier(.2,.9,.3,1)}
button.u[data-state]:active{transform:scale(.95);opacity:1}
button.u[data-state] .u-l{display:inline-flex;align-items:center;gap:.5rem;transition:opacity .15s,transform .2s}
button.u[data-state=busy],button.u[data-state=done]{pointer-events:none}
button.u[data-state=busy] .u-l,button.u[data-state=done] .u-l{opacity:0;transform:scale(.85)}
button.u .u-spin,button.u .u-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
button.u[data-state=busy] .u-spin{opacity:1}
button.u .u-spin::before{content:"";width:1.15rem;height:1.15rem;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:u-spin .7s linear infinite}
button.u .u-ok::before{content:"";width:.55rem;height:1rem;border:solid currentColor;border-width:0 2.75px 2.75px 0;transform:rotate(45deg) translate(-1px,-2px)}
button.u[data-state=busy],button.u[data-state=done]{padding-left:0;padding-right:0} /* 処理中から、幅が高さと同じ(UI.run が決める)になり、完全な丸になる */
button.u[data-state=done]{background:var(--b)}
button.u[data-state=done] .u-ok{opacity:1;animation:u-pop .4s cubic-bezier(.16,1,.3,1)}
@keyframes u-spin{to{transform:rotate(360deg)}}
@keyframes u-pop{from{transform:scale(.4);opacity:0}60%{transform:scale(1.18);opacity:1}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){button.u[data-state],button.u[data-state] .u-l{transition:none}button.u .u-spin::before,button.u[data-state=done] .u-ok{animation:none}}

/* 中身に合わせて伸び縮みする(UI.morph): 文字やアイコンを変えると、背景のボタンが、新しい中身の大きさまで、なめらかに動く。動いている間だけ付ける */
button.u.u-morph{transition:transform .1s,opacity .15s,width .32s cubic-bezier(.2,.9,.3,1),padding .32s cubic-bezier(.2,.9,.3,1);overflow:hidden}
@media (prefers-reduced-motion:reduce){button.u.u-morph{transition:none}}

/* 主: 濃い塗りのピル */
button.u.u-primary{background:var(--ink);color:#fff}
/* 副: 枠線のピル(キャンセルなど) */
button.u.u-secondary{background:var(--card);color:var(--ink);border:1.5px solid var(--line);padding:.625rem 1rem}
/* 削除・解除: 赤いピル */
button.u.u-danger{background:var(--warn);color:#fff}
/* 明るい塗りのピル */
button.u.u-light{background:#fff;color:var(--ink);font-weight:700;min-height:48px;padding:.5rem 1.5rem;border-radius:999px}
/* 小さい枠線のピル */
button.u.u-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:.35rem 1rem;font-size:.9375rem}

/* ガラスの丸いアイコンボタン(設定、閉じる、履歴の開閉)。完了(confirm)は、同じ形の青 */
button.u.u-glass,button.u.u-confirm{width:44px;height:44px;padding:0;border-radius:50%;background:var(--glass);color:var(--ink);border:.5px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(190%) brightness(1.04);backdrop-filter:blur(20px) saturate(190%) brightness(1.04);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(40,32,24,.10),inset 1px 1px 0 rgba(255,255,255,.75),inset -1px -1px 0 rgba(255,255,255,.35);font-size:1.4rem;line-height:1;font-weight:500}
button.u.u-glass:active,button.u.u-confirm:active{transform:none;opacity:.7}
button.u.u-glass .ic,button.u.u-confirm .ic{width:1.15rem;height:1.15rem}
button.u.u-glass.u-big .ic{width:1.3rem;height:1.3rem}
button.u.u-confirm{background:var(--u-blue);color:#fff;box-shadow:0 4px 14px rgba(74,124,224,.38),inset 1px 1px 0 rgba(255,255,255,.45)}

/* 背景なし(文字やアイコンだけ)。u-mute は、うす茶のアイコン */
button.u.u-plain{background:transparent;color:var(--ink);font-weight:500;font-size:1rem;padding:0 .6rem;border-radius:.75rem;gap:.4rem}
button.u.u-plain:active{transform:none;opacity:.7}
button.u.u-plain.u-mute{color:var(--sub)}
button.u.u-plain .ic{width:1.25rem;height:1.25rem}
button.u.u-plain.u-icon{padding:0}
button.u.u-plain.u-big .ic{width:1.5rem;height:1.5rem}
button.u.u-plain .ic.sm{width:1rem;height:1rem}

/* 小さい選択ピル(カテゴリの凡例) */
button.u.u-chip{background:transparent;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:0 .85rem;min-height:2.75rem;font-size:.8125rem;font-weight:500;gap:.4rem}
button.u.u-chip[aria-pressed=true]{border-color:var(--ink);font-weight:700}

/* 色つきの選択ボタン(支払った人など)。--pc その人の色、--pb 選んだときの背景、--pt 選んだときの文字
   選んだほうは、ボタン全体がその人の色になる。選んでいないほうは、枠線だけの控えめな形(人の色は、アイコンだけに残る) */
button.u.u-choice{background:transparent;color:var(--sub);border:1.5px solid var(--line);padding:.625rem 1rem;font-weight:500}
button.u.u-choice .ic{vertical-align:-.3em;margin-right:.25rem;color:var(--pc)}
button.u.u-choice[aria-pressed=true]{background:var(--pb);color:var(--pt);border-color:var(--pb);font-weight:700;box-shadow:0 2px 8px color-mix(in srgb,var(--pb) 45%,transparent)}
button.u.u-choice[aria-pressed=true] .ic{color:currentColor}

/* スイッチ(オン・オフ) */
button.u.u-switch{width:3.5rem;min-width:3.5rem;height:44px;background:none;padding:0;position:relative;flex:none;border-radius:0}
button.u.u-switch:active{transform:none;opacity:1}
button.u.u-switch::before{content:"";position:absolute;left:0;top:50%;width:51px;height:31px;margin-top:-15.5px;border-radius:16px;background:#B9AD99;transition:background .2s}
button.u.u-switch::after{content:"";position:absolute;left:2px;top:50%;width:27px;height:27px;margin-top:-13.5px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0004;transition:transform .2s}
button.u.u-switch[aria-checked=true]::before{background:var(--b)}
button.u.u-switch[aria-checked=true]::after{transform:translateX(20px)}
/* 横棒グラフ(積み上げ。仕様は docs/横棒グラフ.md)。高さ10px、受け皿もフィルも両端が完全な丸み。区間は、すき間なしの直線でつなぐ */
.u-bar{display:flex;height:10px;width:100%;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--line) 40%,transparent)}
.u-bar-fill{display:flex;height:100%;overflow:hidden;border-radius:999px;transform-origin:left;animation:u-bar-grow 600ms var(--ease,cubic-bezier(.4,.1,.2,1));transition:width 450ms var(--ease,cubic-bezier(.4,.1,.2,1))}
.u-bar-seg{height:100%;transition:width 500ms cubic-bezier(.2,.9,.25,1)}
.u-bar-seg.main{background:var(--bar-main)}.u-bar-seg.warn{background:var(--bar-warn)}.u-bar-seg.supplied{background:var(--bar-supplied)}.u-bar-seg.planned{background:var(--bar-planned)}
@keyframes u-bar-grow{from{transform:scaleX(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.u-bar-fill,.u-bar-seg{animation:none;transition:none}}

/* web/chart.css */
/* 積み上げ棒グラフと円グラフの見た目(chart.js とセット)。
   使う変数: --ink 文字と0の線、--sub 補助の文字、--line 線、--b 棒の既定の色。色は変数で変える。
   アニメーションの引き金: 祖先に .ch-anim(棒は下から伸び、円は描かれる)、.ch-anim-pie(円だけ)、.ch-flip(棒⇔円の入れ替えで、ふわっと出る)を付けて描き直す。 */
.chartbox{display:flex;margin-top:.7rem}
.yaxis{position:relative;width:2.6rem;flex:none}
.yaxis span{position:absolute;right:.35rem;transform:translateY(-50%);font-size:.6875rem;color:var(--sub,#666);white-space:nowrap}
.yaxis .bud{font-weight:700;color:var(--ink,#000)}
.chartscroll{flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.2rem}
.chartscroll::-webkit-scrollbar{display:none}
.plot{position:relative;min-width:100%}
.plot .gl{position:absolute;left:0;right:0;border-top:1px solid var(--line,#ddd)}.plot .gl.zero{border-top:2px solid var(--ink,#000)}
.plot .bline{position:absolute;left:0;right:0;border-top:2px dashed var(--ink,#000);pointer-events:none}
/* 棒: カテゴリが、下から積み上がる。選んだカテゴリ以外は、うすくなる */
.plot .bar{position:absolute;bottom:0;z-index:3;display:flex;flex-direction:column-reverse;overflow:hidden;background:none;border-radius:6px 6px 0 0;min-height:2px;margin:0}
.plot .bseg{display:block;flex:none;box-shadow:inset 0 1px 0 rgba(255,253,247,.85);transition:opacity .25s;cursor:pointer}
.plot.has-sel .bseg:not(.sel){opacity:.28}
/* 列を押す場所(棒の上の、すき間も含む)と、下の名前の行 */
button.mcol{position:absolute;top:0;height:calc(100% + 3.2rem);z-index:2;background:none;border:0;border-radius:.75rem;padding:0;min-width:0;min-height:0;color:inherit;cursor:pointer;font:inherit}
.lblrow{display:flex;margin-top:.25rem}
.lc{flex:none;text-align:center;font-size:.6875rem;color:var(--sub,#666);line-height:1.3;pointer-events:none;min-height:2.8rem;cursor:pointer}
.lc.sel{color:var(--ink,#000);font-weight:700}
/* 凡例(カテゴリの選択ピル。形は ui.css の chip) */
.legend{display:flex;flex-wrap:wrap;gap:.25rem .4rem;margin-top:.9rem}
button.lgd i{width:.65rem;height:.65rem;border-radius:50%;background:var(--c);flex:none}

/* 円グラフ(横長の描画領域。項目の名前は、扇から線で伸ばして外に書く)。選んだ扇は、少し外へ伸びる */
.pie{position:relative;width:100%;max-width:26rem;aspect-ratio:110/56;margin:.5rem auto}
.pie svg{width:100%;height:100%;display:block;overflow:visible}
.pie .pt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;pointer-events:none;font-weight:700;font-size:.8125rem;text-align:center}
.pie .pt .pn,.pie .pt .pp{font-size:.6875rem;font-weight:600;color:var(--sub,#6B5F52);max-width:3.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc{cursor:pointer;transition:stroke-width .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s}
.arc.sel{stroke-width:12;transform:translate(var(--dx),var(--dy))}
.pie.has-sel .arc:not(.sel){opacity:.35}
.plab{cursor:pointer;transition:opacity .25s}.plab text{font-size:3.7px;fill:var(--ink,#000);font-weight:500}.plab.sel text{font-weight:700}
.pie.has-sel .plab:not(.sel){opacity:.4}

/* アニメーション */
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sweep{from{stroke-dasharray:0 100}to{stroke-dasharray:100 100}}
@keyframes lab-in{from{opacity:0}to{opacity:1}}
@keyframes ch-flip{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
.ch-anim .plot .bar{transform-origin:bottom;animation:grow .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 35ms)} /* 下から、1本ずつ(35msずつずらして)伸びる */
.ch-flip .chartbox,.ch-flip .pie{animation:ch-flip .28s cubic-bezier(.2,.8,.2,1)} /* 棒⇔円の入れ替え */
.ch-anim .sweep,.ch-anim-pie .sweep{animation:sweep .9s cubic-bezier(.4,0,.2,1)} /* 円は、時計回りに描かれる */
.ch-anim .plab,.ch-anim-pie .plab{animation:lab-in .35s ease-out .6s backwards} /* 名前の札は、あとから出る */
@media (prefers-reduced-motion:reduce){.arc,.plot .bseg,.plab{transition:none}.ch-anim .plot .bar,.ch-flip .chartbox,.ch-flip .pie,.ch-anim .sweep,.ch-anim .plab,.ch-anim-pie .sweep,.ch-anim-pie .plab{animation:none}}

/* web/swipe.css */
/* スワイプの行(swipe.js とセット)。色は変数で変える:
   --swp-edit 編集(青)、--swp-del 削除(赤)、--swp-bg 行の背景、--swp-line 区切り線、--swp-bleed 行を左右に広げる幅(親の余白と同じにする) */
:root{--swp-edit:#4A7CE0;--swp-del:#E5484D;--swp-bg:var(--card,#fff);--swp-line:var(--line,#ddd);--swp-bleed:1rem}
.swp{position:relative;overflow:hidden;margin:0 calc(var(--swp-bleed) * -1)}
.swp>.swp-in{position:relative;padding-left:var(--swp-bleed);padding-right:var(--swp-bleed);border:0;background:var(--swp-bg);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:pointer;isolation:isolate}
.swp-act{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:.6rem;padding:0 .75rem 0 .5rem;box-sizing:border-box}
.swp-b{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:transparent;border:0;border-radius:0;padding:0;min-width:3.25rem;min-height:0;color:var(--sub,#666);font:inherit;font-size:inherit;font-weight:500;cursor:pointer;opacity:var(--p,0);transform:scale(calc(.55 + .45 * var(--p,0)))}
.swp-act.anim .swp-b{transition:opacity .28s,transform .28s cubic-bezier(.2,.8,.2,1)}
.swp-c{width:3.25rem;height:3.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;color:#fff}
.swp-b.edit .swp-c{background:var(--swp-edit)}.swp-b.del .swp-c{background:var(--swp-del)}
.swp-c .ic,.swp-c svg{width:1.4rem;height:1.4rem;color:#fff}
.swp-b small{font-size:.6875rem}
/* 大きくスワイプしたとき、削除が横長の丸(ピル)に広がり、編集は薄れる */
.swp-b.full .swp-c{width:calc(3.25rem + var(--e,0) * 1px);border-radius:999px}
.swp-b.edit{opacity:calc(var(--p,0) * (1 - min(var(--e,0) / 60, 1)))}
/* 行の区切り線: 行といっしょに動かさず、固定する */
.swp::after{content:'';position:absolute;left:var(--swp-bleed);right:var(--swp-bleed);bottom:0;height:1px;background:var(--swp-line);pointer-events:none;z-index:2}
.swp:last-child::after{display:none}
/* スワイプ中、行が丸いカードのようにハイライトされる。中身との間は、上下左右でそろえる */
.swp>.swp-in::before{content:'';position:absolute;z-index:-1;left:-2rem;right:.25rem;top:.2rem;bottom:.2rem;border-radius:1rem;background:color-mix(in srgb,var(--ink,#000) 9%,var(--swp-bg));opacity:0;transition:opacity .18s ease}
.swp>.swp-in.on::before{opacity:1}
@media (prefers-reduced-motion:reduce){.swp-act.anim .swp-b,.swp>.swp-in::before{transition:none}}

/* web/motion.css */
/* 動きの決まり(iOSらしい、押してすぐ反応する動き)。tokens.css とあわせて使う。
   元: 大学生活サポート(unilife)の app/globals.css。ボタンの反応が「ワンテンポ遅い」と感じる原因は、押し込みがゆっくり始まる動き方だった。
   決まり: 出る動き・押した動きは「始まりが速く、あとで減速する」曲線(--ease-out)。押した瞬間は60ms、離したあとは、ゆっくり戻る。 */
:root {
  --ease: cubic-bezier(0.4, 0.1, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 200ms; --dur-2: 450ms; --dur-3: 1200ms;
}
/* 押せるもの。高さ44pt以上(HIG)。押すと少し縮み、ポインターを乗せると少し明るくなる */
.pressable { min-height: 44px; transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.pressable:active:not(:disabled), .pressable[data-press] { opacity: 0.85; transform: scale(0.97); transition-duration: 60ms; transition-timing-function: ease-out; }
@media (hover: hover) { .pressable:hover:not(:disabled) { filter: brightness(1.08); } }
/* 下から出るシート: 出るときはゆっくり、閉じるときは速く */
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-out { to { transform: translateY(40px); opacity: 0; } }
.sheet-panel { animation: sheet-in var(--dur-2) var(--ease-out); }
.sheet-panel.leaving { animation: sheet-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards; }
/* 動きを減らす設定がオンのときは、動きを止める(必須) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* web/gesture.css */
/* 操作の見せ方(gesture.js とセット)。PC は「マウスポインタ」、スマホは「タッチの丸」(Apple の使い方の動画のように、グレーの半透明の丸が押す・動く)。
   丸の動き: タップ=触れた瞬間に少し縮み、離すと消える / 長押し=丸のまわりのリングが一周する / スワイプ・ドラッグ=丸が指の動きどおりに動く。
   使う変数: --ink(.gx-target の文字)、--line(.gx-target の枠)。色は変数で変える。 */
.gx-host{position:relative;isolation:isolate} /* 丸やポインタの重なり順を、この面の中に閉じ込める(上の帯などにはみ出さない) */
.gx{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform,opacity}
.gx.on{opacity:1}
.gx-body{position:relative;transition:transform .12s ease-out,background-color .12s ease-out}

/* マウスポインタ(先端が位置の基準) */
.gx-pc .gx-body{margin:-2px 0 0 -2px;width:22px;height:26px;transform-origin:2px 2px}
.gx-pc svg.gx-cur{display:block;width:22px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.gx-pc.down .gx-body{transform:scale(.9)}
.gx-pulse{position:absolute;left:-6px;top:-6px;width:16px;height:16px;border-radius:50%;border:2px solid rgba(60,60,67,.55);opacity:0;pointer-events:none}
.gx-pc.click .gx-pulse{animation:gx-pulse .45s ease-out}
@keyframes gx-pulse{from{transform:scale(.4);opacity:.8}to{transform:scale(2.2);opacity:0}}

/* タッチの丸(中心が位置の基準) */
.gx-touch .gx-body{margin:-22px 0 0 -22px;width:44px;height:44px;border-radius:50%;background:rgba(112,112,122,.42);border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.gx-touch.down .gx-body{transform:scale(.8);background:rgba(88,88,98,.62)}
/* 長押しのリング */
.gx-ring{position:absolute;left:-10px;top:-10px;width:60px;height:60px;transform:rotate(-90deg);opacity:0;pointer-events:none}
.gx-ring circle{fill:none;stroke:rgba(255,255,255,.95);stroke-width:3;stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176}
.gx.hold .gx-ring{opacity:1}
.gx.hold .gx-ring circle{animation:gx-ring var(--gx-hold,.9s) linear forwards}
@keyframes gx-ring{to{stroke-dashoffset:0}}
/* 丸だけを静止で見せるとき(アセットとして並べる) */
.gx-static{position:static;opacity:1;display:inline-block;width:44px;height:44px}
.gx-static.gx-pc{width:22px;height:26px}
.gx-static .gx-body{margin:0}
.gx-static .gx-ring{opacity:0}
.gx-static.hold .gx-ring{opacity:1}
.gx-static.hold .gx-ring circle{animation:none;stroke-dashoffset:44}

/* 操作の見本の相手(押す・動かす対象)。gesture の見本で使う */
.gx-target{display:inline-flex;align-items:center;justify-content:center;min-width:8rem;min-height:44px;padding:.6rem 1.5rem;border-radius:1.25rem;background:#fff;color:var(--ink,#3A3128);border:1.5px solid var(--line,#E2D6BF);font-weight:600;transition:transform .18s ease-out,opacity .18s ease-out,background-color .18s ease-out;user-select:none}
.gx-target[data-press]{transform:scale(.96);opacity:.78}
.gx-target[data-held]{background:color-mix(in srgb,var(--ink,#3A3128) 10%,#fff);transform:scale(1.04);box-shadow:0 8px 20px rgba(40,32,24,.18)}
.gx-target.gx-pop{animation:gx-pop .38s cubic-bezier(.16,1,.3,1)}
@keyframes gx-pop{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gx,.gx-body,.gx-target{transition:none}.gx-pc.click .gx-pulse,.gx-target.gx-pop,.gx.hold .gx-ring circle{animation:none}.gx.hold .gx-ring circle{stroke-dashoffset:0}}

/* web/apple.css */
/* Apple デザインシステム(web/apple.css)。Claude Design の「Appleデザインシステム」(Apple.com風の言語 + iOS/HIG部品)を、ブラウザ用のクラスにしたもの。
   言語: 白・#f5f5f7・近黒のタイルを全幅で交互に。アクセントは Action Blue(#0066cc)だけ。影は製品画像だけ、グラデーションなし。ぼかしは、固定のナビだけ(saturate(180%) blur(20px))。
   形: 角丸は 0(タイル)/5/8(小)/11(パール)/18(カード)/ピル(ボタン・検索・チップ)。余白は8px基準。押すと scale(.95)(ホバーの定義なし)。フォーカスは2px #0071e3。
   文字: SF Pro(Display ≥20px・600・字間を詰める / Text 17px・行間1.47)。ウェイトは 300/400/600/700(500は使わない)。フォントのファイルは入れず、システムのフォントに任せる(SF Pro は配布できない)。
   iOS: システムカラー(#007aff、緑のトグル)、Dynamic Type の文字スタイル、44pt、インセットのリスト、ガラス風のバー。
   元の仕様からの違い(HIG・コントラストのため): ①補助の文字は #6e6e73(元の #7a7a7a は4.5対1に足りない)②操作部品は高さ44pt以上(元の小さいボタンやセグメントも)③ダークは、元の仕様にない(アクセントの on-dark だけ)ので、Apple.com の暗い配色に合わせて足した(システムの設定に従う)
   ④10pxの文字(micro)は使わない(最小11pt)。motion.css の .pressable とは別(このファイルの .btn などは、自分で押し込みを持つ)。 */
:root{
  color-scheme:light dark;
  --color-primary:#0066cc;--color-primary-focus:#0071e3;--color-link:#0066cc;--color-primary-on-dark:#2997ff;
  --color-canvas:#fff;--color-parchment:#f5f5f7;--color-pearl:#fafafc;
  --color-tile-1:#272729;--color-tile-2:#2a2a2c;--color-tile-3:#252527;--color-black:#000;
  --color-chip:rgba(210,210,215,.64);--color-ink:#1d1d1f;--color-ink-80:#333;--color-ink-48:#7a7a7a;--color-ink-muted:#6e6e73;
  --color-divider-soft:#f0f0f0;--color-hairline:#e0e0e0;--color-search-line:rgba(0,0,0,.08);
  --shadow-product:rgba(0,0,0,.22) 3px 5px 30px 0;
  /* 余白(8px基準)・角丸・ぼかし */
  --space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:17px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-section:80px;
  --radius-none:0;--radius-xs:5px;--radius-sm:8px;--radius-md:11px;--radius-lg:18px;--radius-pill:9999px;
  --blur-frosted:saturate(180%) blur(20px);
  /* iOS(HIG) */
  --sys-blue:#007aff;--sys-green:#34c759;--sys-red:#ff3b30;--sys-orange:#ff9500;--sys-yellow:#ffcc00;--sys-gray:#8e8e93;
  --sys-bg:#fff;--sys-bg-grouped:#f2f2f7;--sys-label-2:rgba(60,60,67,.72);--sys-label-3:rgba(60,60,67,.3);--sys-separator:rgba(60,60,67,.29);--sys-fill:rgba(120,120,128,.12);
  /* 角丸の決まり(1つのサービスで揃える)。元の式: 操作ボタンの高さは44pt = 半径22。ボタンが面の角に、同心円で収まる(丸いボタンの外に、均等な余白)ように、面の角丸を決める。
     ①操作部品(ボタン・チップ・検索欄・セグメント・トグル・入力欄)は、ピルだけ(半径 = 高さの半分 --r-control)
     ②面(カード・シート・ダイアログ)の外側は、1つの値 --r-surface = --r-control + --space-nest(22 + 8 = 30)。シートも、カードも、同じ
     ③面の中の面は、同心円: 内側 = 外側 − 余白。入れ子の余白は --space-nest(8)にそろえるので、内側は --r-nested(30 − 8 = 22 = ボタンの半径)
     ④カードの中の見本の面は、カードの余白 --space-card(22)で、内側 --r-card-inner(30 − 22 = 8)
     ⑤画面のCSSに、角丸の数字を直接書かない。新しいサービスは、最初にこのトークンを決める */
  --r-control:22px;--space-nest:8px;--r-surface:calc(var(--r-control) + var(--space-nest));--r-nested:calc(var(--r-surface) - var(--space-nest));
  --space-card:22px;--r-card-inner:calc(var(--r-surface) - var(--space-card));
  --glass-bg:rgba(249,249,249,.78);--radius-inset-group:10px;--sheet-radius:var(--r-surface);--hit-target:44px;
  --font-display:"SF Pro Display","SF Pro JP",-apple-system,BlinkMacSystemFont,system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;
  --font-text:"SF Pro Text","SF Pro JP",-apple-system,BlinkMacSystemFont,system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tone="light"]){
    --color-link:#2997ff;--color-primary:#0071e3;--color-primary-focus:#2997ff;
    --color-canvas:#000;--color-parchment:#1d1d1f;--color-pearl:#161617;
    --color-chip:rgba(66,66,69,.64);--color-ink:#f5f5f7;--color-ink-80:#d2d2d7;--color-ink-muted:#a1a1a6;
    --color-divider-soft:#2c2c2e;--color-hairline:#424245;--color-search-line:rgba(255,255,255,.16);
    --sys-bg:#000;--sys-bg-grouped:#000;--sys-label-2:rgba(235,235,245,.6);--sys-label-3:rgba(235,235,245,.3);--sys-separator:rgba(84,84,88,.6);--sys-fill:rgba(120,120,128,.36);
    --glass-bg:rgba(30,30,30,.72);
  }
}
:root[data-tone="dark"]{color-scheme:dark;
  --color-link:#2997ff;--color-primary:#0071e3;--color-primary-focus:#2997ff;--color-canvas:#000;--color-parchment:#1d1d1f;--color-pearl:#161617;--color-chip:rgba(66,66,69,.64);--color-ink:#f5f5f7;--color-ink-80:#d2d2d7;--color-ink-muted:#a1a1a6;--color-divider-soft:#2c2c2e;--color-hairline:#424245;--color-search-line:rgba(255,255,255,.16);--sys-bg:#000;--sys-bg-grouped:#000;--sys-label-2:rgba(235,235,245,.6);--sys-label-3:rgba(235,235,245,.3);--sys-separator:rgba(84,84,88,.6);--sys-fill:rgba(120,120,128,.36);--glass-bg:rgba(30,30,30,.72)}
:root[data-tone="light"]{color-scheme:light}
@media (prefers-contrast:more){:root{--color-hairline:#6e6e73;--color-ink-muted:#424245;--color-search-line:rgba(0,0,0,.4)}}

/* 17pt 基準。ブラウザの文字サイズの設定を尊重するため、割合で指定する */
html{font-size:106.25%;-webkit-text-size-adjust:100%}
.apple{margin:0;background:var(--color-canvas);color:var(--color-ink);font:400 1rem/1.47 var(--font-text);letter-spacing:-.022em}
.apple :focus-visible{outline:2px solid var(--color-primary-focus);outline-offset:2px}

/* 文字(Apple.com 風)。見出しは Display・600・字間を詰める */
.t-hero{font:600 3.294rem/1.07 var(--font-display);letter-spacing:-.005em}
.t-display-lg{font:600 2.353rem/1.1 var(--font-display)}
.t-display-md{font:600 2rem/1.25 var(--font-text);letter-spacing:-.022em}
.t-lead{font:400 1.647rem/1.14 var(--font-display);letter-spacing:.007em}
.t-lead-airy{font:300 1.412rem/1.5 var(--font-display)}
.t-tagline{font:600 1.235rem/1.19 var(--font-display);letter-spacing:.011em}
.t-body-strong{font:600 1rem/1.24 var(--font-text);letter-spacing:-.022em}
.t-body{font:400 1rem/1.47 var(--font-text);letter-spacing:-.022em}
.t-caption{font:400 .8235rem/1.43 var(--font-text);letter-spacing:-.016em}
.t-caption-strong{font:600 .8235rem/1.29 var(--font-text);letter-spacing:-.016em}
.t-fine{font:400 .706rem/1.2 var(--font-text);letter-spacing:-.01em}
/* iOS の標準の文字スタイル(Dynamic Type) */
.dt-large-title{font:700 2rem/1.2 var(--font-display);letter-spacing:.011em}
.dt-title2{font:400 1.294rem/1.27 var(--font-display)}
.dt-headline{font:600 1rem/1.3 var(--font-text);letter-spacing:-.024em}
.dt-body{font:400 1rem/1.3 var(--font-text);letter-spacing:-.024em}
.dt-subhead{font:400 .882rem/1.33 var(--font-text);letter-spacing:-.016em}
.dt-footnote{font:400 .765rem/1.38 var(--font-text);letter-spacing:-.006em}
.muted{color:var(--color-ink-muted)}

/* ボタン(ピル形。押すと scale(.95)。高さ44pt以上) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;margin:0;border:1px solid transparent;font:400 1rem/1 var(--font-text);letter-spacing:-.022em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .1s}
.btn:active:not(:disabled){transform:scale(.95)}
.btn:disabled{opacity:.4;cursor:default}
.btn .ic{width:1.05em;height:1.05em;flex:none}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);border-radius:var(--radius-pill);padding:11px 22px}
.btn-secondary{background:transparent;color:var(--color-link);border-color:var(--color-link);border-radius:var(--radius-pill);padding:11px 22px}
.btn-dark{background:var(--color-ink);color:var(--color-canvas);border-color:var(--color-ink);border-radius:var(--radius-sm);padding:8px 15px;font-size:.8235rem;line-height:1.29;letter-spacing:-.016em}
.btn-pearl{background:var(--color-pearl);color:var(--color-ink-80);border:3px solid var(--color-divider-soft);border-radius:var(--radius-md);padding:8px 14px;font-size:.8235rem;line-height:1.43;letter-spacing:-.016em}
.btn-hero{background:var(--color-primary);color:#fff;border-color:var(--color-primary);border-radius:var(--radius-pill);padding:14px 28px;font-weight:300;font-size:1.06rem}
/* リンク(青い文字。矢印つき) */
.link{display:inline-flex;align-items:center;gap:.25em;min-height:44px;padding:0 .5rem;border:0;background:none;color:var(--color-link);font:400 .8235rem/1.43 var(--font-text);letter-spacing:-.016em;cursor:pointer;text-decoration:none;border-radius:var(--radius-sm);transition:transform .1s}
.link:active{transform:scale(.95)}
.link .ic{width:1rem;height:1rem;flex:none}
.link[data-done]{color:var(--color-ink)}

/* チップ(絞り込み)。選んだものは、青い2pxの枠と、太い文字(色だけに頼らない) */
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:12px 16px;background:var(--color-canvas);color:var(--color-ink);border:1px solid var(--color-hairline);border-radius:var(--radius-pill);font:400 .8235rem/1.43 var(--font-text);letter-spacing:-.016em;white-space:nowrap;cursor:pointer;transition:transform .1s}
.chip:active:not(:disabled){transform:scale(.95)}
.chip[aria-pressed="true"]{padding:11px 15px;border:2px solid var(--color-primary-focus);font-weight:600}
.chip:disabled{opacity:.4;cursor:default}
.chip small{font-size:.706rem;color:var(--color-ink-muted);font-variant-numeric:tabular-nums}
.chip .ic{width:1rem;height:1rem;flex:none}
.tag{display:inline-flex;align-items:center;padding:.15rem .6rem;border-radius:var(--radius-pill);background:var(--color-chip);color:var(--color-ink-80);font:400 .706rem/1.4 var(--font-text);letter-spacing:-.01em;white-space:nowrap}
.tag-accent{background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:color-mix(in srgb,var(--color-link) 70%,var(--color-ink));font-weight:600}

/* 検索欄(ピル形・44pt)。虫眼鏡、入力、入力した文字をクリアする×(グレーの小さな丸に、白い×。丸は虫眼鏡より小さく、押せる範囲は44pt)。枠は、フォーカスしても青くしない(カーソルで分かる) */
.search{position:relative;display:flex;align-items:center;gap:10px;width:100%;max-width:100%;min-height:46px;box-sizing:border-box;padding:0 20px;background:var(--color-canvas);border:1px solid var(--color-search-line);border-radius:var(--radius-pill);color:var(--color-ink-muted)}
.search>.ic{width:.9rem;height:.9rem;flex:none}
.search input{flex:1;min-width:0;width:100%;min-height:44px;border:0;outline:0;background:transparent;color:var(--color-ink);font:400 1rem var(--font-text);letter-spacing:-.022em;-webkit-appearance:none;appearance:none;padding:0 1.6rem 0 0}
.search input:focus,.search input:focus-visible{outline:none;box-shadow:none}
.search input::placeholder{color:var(--color-ink-muted);opacity:1}
.search input::-webkit-search-decoration,.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search .clear{position:absolute;right:0;width:2.75rem;height:2.75rem;padding:0;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.search .clear[hidden]{display:none}
.search .clear .x{display:grid;place-items:center;width:.85rem;height:.85rem;border-radius:50%;background:var(--sys-gray);color:var(--color-canvas)}
.search .clear .x svg{width:.45rem;height:.45rem}

/* 丸いアイコンボタン(閉じる・完了) */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--sys-fill);color:var(--color-ink);cursor:pointer;padding:0;transition:transform .1s}
.icon-btn:active{transform:scale(.95)}
.icon-btn.primary{background:var(--color-primary);color:#fff}
.icon-btn .ic{width:1.1rem;height:1.1rem}

/* iOS のトグル(緑)。つまみがすべる */
.toggle{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0;border:0;background:none;color:var(--color-ink);font:400 .8235rem/1.2 var(--font-text);letter-spacing:-.016em;cursor:pointer}
.toggle .track{position:relative;flex:none;width:51px;height:31px;border-radius:16px;background:rgba(120,120,128,.32);transition:background-color .25s}
.toggle .thumb{position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .25s}
.toggle[aria-checked="true"] .track{background:var(--sys-green)}
.toggle[aria-checked="true"] .thumb{transform:translateX(20px)}
.toggle:disabled{opacity:.4;cursor:default}

/* セグメント(ピル型・ドラッグできる)。項目は同じ幅。つまみは指に1:1で追従し、端は12pxのゴム、離すとバネで吸着する(apple.js の Apple.seg と組み合わせる)。React版 Segmented と同じ仕様 */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:var(--radius-pill);background:var(--sys-fill);user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}
.seg.dragging{cursor:grabbing}
.seg>button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 1.1rem;border:0;border-radius:var(--radius-pill);background:none;color:var(--color-ink-muted);font:400 .882rem/1.2 var(--font-text);letter-spacing:-.016em;white-space:nowrap;cursor:inherit;transition:color .2s}
.seg>button[data-on]{color:var(--color-ink);font-weight:600}
.seg>button .ic{width:1rem;height:1rem;flex:none}
.seg-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:0;border-radius:var(--radius-pill);background:var(--color-canvas);box-shadow:0 3px 8px rgba(0,0,0,.12);will-change:transform}
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]) .seg-thumb{background:#636366}}
:root[data-tone="dark"] .seg-thumb{background:#636366}
/* iOS の、角丸の四角いセグメント(Apple.seg の {ios: true}): 余白2px、角丸9 / つまみ7。動きは同じ */
.seg-ios{padding:2px;border-radius:9px}
.seg-ios>button{border-radius:7px}
.seg-ios .seg-thumb{top:2px;bottom:2px;left:2px;border-radius:7px}
.seg.on:not(.dragging) .seg-thumb{transition:transform .38s cubic-bezier(.2,.9,.3,1)}

/* カード(ストア風): 白、1pxの細い線、角丸18、余白24。影なし。画像の面は角丸8 */
.store-card{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--r-surface);padding:var(--space-card)}
/* タイル(全幅。上下に交互): 明るい白 / パーチメント / 近黒。角丸なし */
.tile-light{background:var(--color-canvas);color:var(--color-ink)}
.tile-parchment{background:var(--color-parchment);color:var(--color-ink)}
.tile-dark{background:var(--color-tile-1);color:#fff;--color-link:#2997ff;--color-ink-muted:#a1a1a6;--color-ink-80:#d2d2d7;--color-hairline:#424245;--color-canvas:#1d1d1f;--color-ink:#f5f5f7;--color-parchment:#2a2a2c}

/* グローバルナビ(黒の44pt帯)と、固定のサブナビ(ぼかし。ぼかしは、固定のナビだけ) */
.global-nav{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:44px;background:#000;color:#fff;font:400 .706rem/1 var(--font-text);letter-spacing:-.01em;overflow-x:auto;scrollbar-width:none}
.global-nav::-webkit-scrollbar{display:none}
.global-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;color:inherit;text-decoration:none;opacity:.85;white-space:nowrap}
.global-nav a{flex:none}
.global-nav a:first-child{margin-left:auto}
.global-nav a:last-child{margin-right:auto}
.global-nav a:hover{opacity:1}
.sub-nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--color-parchment) 82%,transparent);-webkit-backdrop-filter:var(--blur-frosted);backdrop-filter:var(--blur-frosted);border-bottom:1px solid var(--color-hairline)}
@media (prefers-reduced-transparency:reduce){.sub-nav{background:var(--color-parchment);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* iOS のリスト(インセットのグループ): 角丸10、行は44pt以上、区切りは0.5px */
.list-group{background:var(--sys-bg);border-radius:var(--radius-inset-group);overflow:hidden}
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]) .list-group{background:#1c1c1e}}
:root[data-tone="dark"] .list-group{background:#1c1c1e}
.list-row{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;font:400 1rem/1.3 var(--font-text);letter-spacing:-.024em;color:var(--color-ink)}
.list-row+.list-row::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--sys-separator)}
.list-row .glyph{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:7px;background:var(--sys-blue);color:#fff}
.list-row .glyph .ic{width:1.05rem;height:1.05rem}
.list-row .ttl{flex:1}
.list-row .detail{color:var(--sys-label-2)}
.list-row .chev{width:.8rem;height:.8rem;color:var(--sys-label-3)}

/* シート(下から。広い画面では中央): 背景はガラス風。グラバー、閉じる(左)、タイトル、完了(右) */
.sheet-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.32);animation:ap-fade .3s}
.sheet-scrim.leaving{animation:ap-dim .2s ease-in forwards}
.sheet{position:relative;width:min(100%,38rem);max-height:min(86vh,46rem);display:flex;flex-direction:column;border-radius:var(--r-surface) var(--r-surface) 0 0;padding:var(--space-nest) var(--space-nest) calc(var(--space-nest) + env(safe-area-inset-bottom));background:var(--glass-bg);-webkit-backdrop-filter:var(--blur-frosted);backdrop-filter:var(--blur-frosted);color:var(--color-ink)}
@media (min-width:840px){.sheet-scrim{align-items:center}.sheet{border-radius:var(--r-surface);padding-bottom:var(--space-nest)}}
@media (prefers-reduced-transparency:reduce){.sheet{background:var(--color-parchment);-webkit-backdrop-filter:none;backdrop-filter:none}}
.sheet-grabber{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:2.5rem;height:.375rem;border-radius:var(--radius-pill);background:var(--sys-gray);opacity:.6;pointer-events:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 0 var(--space-nest)} /* ボタンは、面の端から --space-nest(余白)のところ: 角に同心円で収まる */
.sheet-head h2{margin:0;font:600 1rem/1.3 var(--font-text)}
.sheet-body{overflow:auto;overscroll-behavior:contain;padding:0}
@keyframes ap-fade{from{opacity:0}to{opacity:1}}
@keyframes ap-dim{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.btn,.link,.chip,.icon-btn,.toggle .track,.toggle .thumb,.seg.on:not(.dragging) .seg-thumb,.sheet-scrim{transition:none;animation:none}}

/* catalog/catalog.css */
/* ui-kit カタログの画面。Apple デザインシステム(../web/apple.css、Claude Design の「Appleデザインシステム」)で作る:
   黒のグローバルナビ、近黒のヒーロー、白とパーチメントのタイルを全幅で交互に、ストア風のカード、固定のサブナビ(ぼかし)、iOS のセグメントとトグルとシート。
   ここには、カタログ自身の並べ方だけを書く。見本の面(.stage)の中は、ui-kit の部品の色(tokens.css)で描く(部品を、アプリの色で見る場所)。 */
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top-h,8rem) + 1rem)}
body{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.15rem;height:1.15rem;flex:none}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
button{font:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* 固定のサブナビ */
.sub-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-sm);max-width:80rem;margin:0 auto;padding:var(--space-xs) max(var(--space-lg),env(safe-area-inset-left))}
.sub-in .searchbox{flex:1 1 14rem;max-width:24rem}
.brk{flex-basis:100%;height:0}
@media (min-width:1180px){.brk{display:none}}
#motion .toggle{padding-left:.25rem}

/* 件数と、選んでいるタグ */
#tagarea{max-width:80rem;margin:0 auto;padding:var(--space-md) var(--space-lg) 0}
.count{color:var(--color-ink-muted);font:400 .8235rem/1.43 var(--font-text);font-variant-numeric:tabular-nums}
.tgsel{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;margin:var(--space-xs) 0 0}

/* 部品のまとまり(全幅のタイル。白とパーチメントを交互に) */
main{outline:none}
.part{padding:var(--space-xxl) max(var(--space-lg),env(safe-area-inset-left)) var(--space-xxl);scroll-margin-top:calc(var(--top-h,8rem) + 1rem)}
.part-in{max-width:80rem;margin:0 auto}
/* 再生ボタン(カードの右上、見本の面の角) */
.play-btn{position:absolute;top:calc(var(--space-card) + 2px);right:calc(var(--space-card) + 2px);z-index:5;background:none;border:0;color:var(--color-ink-80)} /* 背景の丸なし。アイコンは小さく、押せる範囲は44ptのまま */
.play-btn .ic{width:.9rem;height:.9rem}
.play-btn:hover .ic{opacity:.7}
.part-head{text-align:center;max-width:46rem;margin:0 auto var(--space-xl)}
.part-head h2{margin:0}
.part-head .sum{margin:var(--space-xs) 0 0;color:var(--color-ink-muted)}
.part-meta{display:flex;flex-wrap:wrap;gap:var(--space-xs);justify-content:center;margin-top:var(--space-sm)}
.impls{max-width:46rem;margin:var(--space-sm) auto 0;text-align:left}
.impls summary{display:flex;justify-content:center;list-style:none;cursor:pointer}
.impls summary::-webkit-details-marker,.code summary::-webkit-details-marker{display:none}
.impl{display:grid;gap:var(--space-xxs);margin:var(--space-xs) 0 0;padding:var(--space-sm) var(--space-md);background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-md);font:400 .8235rem/1.43 var(--font-text)}
.tile-light .impl{background:var(--color-parchment)}
.impl code{word-break:break-word}
.impl .files{color:var(--color-ink-80)}
.impl .files code{background:var(--color-chip);border-radius:var(--radius-xs);padding:.1rem .35rem;margin:0 .25rem .15rem 0;display:inline-block}
.impl p{margin:0;color:var(--color-ink-muted)}

/* 1つのバリエーション(ストア風のカード) */
/* 列は、幅に合わせて増えるが、4列まで(広い画面でも5列にしない): 1列の最小幅 = 15rem と、全体の4分の1 の大きいほう */
.cards{grid-auto-flow:dense;display:grid;grid-template-columns:repeat(auto-fill,minmax(max(15rem,calc((100% - 3 * var(--space-md)) / 4)),1fr));gap:var(--space-md)}
.vcard{position:relative;display:flex;flex-direction:column;min-width:0;scroll-margin-top:calc(var(--top-h,8rem) + 1rem)}
.vcard.wide{grid-column:span 2} /* グラフは、2列分(全幅にしない)。狭いときだけ、全幅 */
@media (max-width:36rem){.vcard.wide{grid-column:1/-1}}
.vcard.hl{outline:2px solid var(--color-primary-focus);outline-offset:3px}
.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-sm);min-height:8rem;padding:var(--space-lg) var(--space-md);border-radius:var(--r-card-inner);overflow:hidden;min-width:0;margin-bottom:var(--space-md)}
.stage:not(.apple){background:#FFFDF7;color:var(--ink)}
.stage.apple{background:var(--color-parchment);color:var(--color-ink)}
.tile-parchment .stage.apple{background:var(--color-canvas)}
.stage.rx{background:#f1eee6;color:#181e27}
.stage.dark{background:#3A3128}
.stage.scene{background:linear-gradient(135deg,#8FC5E3 0%,#F6D9A9 55%,#EFA3A0 100%)}
.stage.swipe{display:block;padding:var(--space-xs) var(--space-md);--swp-bleed:1rem}
.stage.wide{display:block;padding:var(--space-md) var(--space-lg) var(--space-lg)}
.stage.none{flex-direction:column;gap:var(--space-xxs);text-align:center;background-color:#FFFDF7;background-image:repeating-linear-gradient(135deg,transparent 0 12px,rgb(226 214 191 / .3) 12px 24px);color:#675B4E;font:400 .882rem/1.4 var(--font-text)}
.stage.none .nolabel{font-size:.706rem;font-weight:600;border:1px solid #E2D6BF;border-radius:var(--radius-pill);padding:.15rem .6rem;background:#FFFDF7}
.stage.err{color:#c4161c;font-size:.765rem;font-family:ui-monospace,Menlo,monospace}
.vname{margin:0}
.vid{display:flex;align-items:center;gap:.4rem;margin-top:2px;color:var(--color-ink-muted)}
.loop{display:inline-flex}
.loop .ic{width:.8rem;height:.8rem}
.vacts{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:var(--space-xs) 0 0 -.5rem}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-xxs);margin:var(--space-xs) 0 0;padding:0;list-style:none}
.code{margin:var(--space-xs) 0 0 -.5rem}
.code summary{display:inline-flex;list-style:none;cursor:pointer}
.code pre{margin:var(--space-xs) 0 var(--space-xs) .5rem;padding:var(--space-sm) var(--space-md);background:var(--color-tile-1);color:#f5f5f7;border-radius:var(--radius-sm);font-size:.706rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.code .cl{margin:var(--space-xs) 0 0 .5rem;color:var(--color-ink-muted)}
.code p{margin:0 0 var(--space-xs) .5rem;font:400 .765rem/1.43 var(--font-text);color:var(--color-ink-muted)}

/* タグのシート */
.sheet-body .tg{margin:0 0 var(--space-sm)}
.sheet-body h3{margin:0 0 var(--space-xxs);padding:0 var(--space-md);font:400 .765rem/1.38 var(--font-text);color:var(--sys-label-2)}
.tgrow{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--sys-bg);border-radius:var(--r-nested)}
@media (prefers-color-scheme:dark){:root:not([data-tone="light"]) .tgrow{background:#1c1c1e}}
.sheet-head h2 .count{margin-left:.35rem}

.empty{padding:var(--space-xxl) var(--space-lg);text-align:center;color:var(--color-ink-muted)}
.card-in{animation:ap-rise .45s cubic-bezier(.16,1,.3,1)}
@keyframes ap-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card-in{animation:none}}
@media (max-width:840px){
  .part{padding:var(--space-xl) var(--space-md)}
  .sub-in{padding:var(--space-xs) var(--space-md)}
  #plat,#mode{max-width:100%;overflow-x:auto;scrollbar-width:none}
  #plat::-webkit-scrollbar,#mode::-webkit-scrollbar{display:none}
  html{scroll-padding-top:1rem}
}