/* 動く絵図鑑 2巻: 編集ソフトのタイムラインのクリップ色(トマト・空・ひまわり・ミント)を4つの区分に当てる。
   紙は青みのある明るい灰、線は濃紺。図鑑の紙に固定するため明るい配色のみ(意図して1テーマ)。
   レイアウト: 上に「モニター+タイムライン」、横に説明。表紙は区分ごとのクリップ並び。 */
:root{
  --paper:#EEF0F7; --card:#FFFFFF; --ink:#18182E; --sub:#55586F; --line:#C9CDDD;
  --tomato:#FF5B4F; --sky:#2F9BFF; --sun:#FFC83D; --mint:#22C993; --skin:#FFE0C4;
  --f-pop:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --f-tc:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.8;margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1120px;margin:0 auto}
h1,h2,h3{text-wrap:balance;line-height:1.3;margin:0;font-weight:400}
p{margin:0}
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ヘッダー(編集ソフトの上の帯) */
.zhead{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ink);color:#fff}
.zhead .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:10px}
.zbrand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--f-pop);font-size:18px}
.rec{width:12px;height:12px;border-radius:50%;background:var(--tomato);box-shadow:0 0 0 3px rgba(255,91,79,.3)}
.vol{font-family:var(--f-tc);font-size:12px;border:1.5px solid #fff;border-radius:4px;padding:0 6px;letter-spacing:.06em}
.zhead nav a{color:#fff;font-weight:700;font-size:15px;text-decoration:none;padding:4px 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4)}
.zhead nav a:hover{background:#fff;color:var(--ink)}

main{display:block;padding-block:28px 72px}
.stack{display:grid;gap:44px}
.eyebrow{font-family:var(--f-tc);font-size:13px;font-weight:500;color:var(--sub);letter-spacing:.08em}
.lead{font-size:17px;max-width:38em}
.muted{color:var(--sub)}
.small{font-size:14px}

/* 表紙 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:center}
.hero h1{font-family:var(--f-pop);font-size:clamp(36px,6.4vw,64px);line-height:1.15}
.hero h1 .w{display:inline-block}
.hero h1 .w:nth-child(1){color:var(--tomato)}
.hero-txt{display:grid;gap:16px;min-width:0}
.clips{display:flex;gap:6px;height:22px}
.clips i{display:block;border-radius:5px;border:2px solid var(--ink)}
.clips i:nth-child(1){flex:3;background:var(--tomato)}.clips i:nth-child(2){flex:2;background:var(--sky)}
.clips i:nth-child(3){flex:1;background:var(--sun)}.clips i:nth-child(4){flex:2.4;background:var(--mint)}
.chapter{display:grid;gap:14px}
.chapter-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chapter-head h2{font-family:var(--f-pop);font-size:24px}
.chip-g{display:inline-block;width:28px;height:16px;border-radius:4px;border:2px solid var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tile{position:relative;display:grid;gap:4px;align-content:start;text-decoration:none;background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:14px 16px 16px 26px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;border-right:2px solid var(--ink);border-radius:8px 0 0 8px;background:var(--gc)}
.tile:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:5px 5px 0 var(--ink)}
.tile .tc{font-family:var(--f-tc);font-size:12px;color:var(--sub)}
.tile .nm{font-family:var(--f-pop);font-size:21px;line-height:1.35}
.tile .sh{font-size:14px;color:var(--sub);line-height:1.6}
.g-tomato{--gc:var(--tomato)}.g-sky{--gc:var(--sky)}.g-sun{--gc:var(--sun)}.g-mint{--gc:var(--mint)}
.foot{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:6px;font-size:14px;color:var(--sub)}

/* 用語のページ */
.crumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;font-weight:700}
.crumb a{text-decoration:none;border-bottom:2px solid var(--line)}
.term-top{display:grid;gap:6px}
.term-top h1{font-family:var(--f-pop);font-size:clamp(34px,6vw,56px);line-height:1.2}
.term-top .en{font-family:var(--f-tc);font-size:14px;letter-spacing:.12em;color:var(--sub)}
.term-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start}
.side{display:grid;gap:14px;min-width:0}
.box{background:var(--card);border-radius:10px;padding:16px 18px;display:grid;gap:8px}
.box h2{font-size:13px;font-family:var(--f-tc);font-weight:500;letter-spacing:.08em;color:var(--sub)}
.rel{display:flex;flex-wrap:wrap;gap:8px}
.rel a{font-weight:700;font-size:15px;text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:2px 12px;background:var(--card)}
.rel a:hover{background:var(--ink);color:#fff}
.pn{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}
.pn .toc{text-align:center;background:var(--ink);color:#fff;padding-inline:24px}
.pn .toc small{color:#C9CDDD}
.crumb a.back{border:2px solid var(--ink);border-radius:999px;padding:2px 12px;background:var(--card)}
.crumb a.back:hover{background:var(--ink);color:#fff}
.pn a{display:grid;gap:2px;text-decoration:none;background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:12px 16px;min-width:0}
.pn a:hover{box-shadow:4px 4px 0 var(--ink)}
.pn .nx{text-align:right}
.pn small{font-family:var(--f-tc);color:var(--sub);font-size:12px}
.pn b{font-family:var(--f-pop);font-weight:400;font-size:18px}

/* プレーヤー(モニター+タイムライン) */
.player{background:var(--ink);border-radius:14px;padding:12px;display:grid;gap:10px;color:#fff;min-width:0}
.mon{position:relative;display:grid;place-items:center;background:#0E0E1C;border-radius:8px;padding:10px;overflow:hidden}
.scr{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#fff;border-radius:4px;container-type:inline-size;color:var(--ink)}
.scr.r916{width:min(100%,280px);aspect-ratio:9/16}
.scr.r43{aspect-ratio:4/3;width:min(100%,520px)}
.bigplay{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:3px solid var(--ink);background:var(--sun);color:var(--ink);font:24px/1 var(--f-pop);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s}
.bigplay:hover{transform:scale(1.08) rotate(-4deg)}
.bigplay[hidden]{display:none}
.tl{display:flex;align-items:center;gap:10px}
.tcode{font-family:var(--f-tc);font-size:13px;font-variant-numeric:tabular-nums;color:var(--sun);min-width:96px}
.track{position:relative;flex:1;height:14px;border-radius:4px;background:#2A2A44;overflow:hidden}
.track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--gc,var(--sky))}
.track b{position:absolute;top:-3px;bottom:-3px;left:0;width:3px;background:#fff;border-radius:2px}
.ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pbtn{font:15px/1 var(--f-pop);color:var(--ink);background:var(--sun);border:2px solid #fff;border-radius:999px;padding:9px 16px;cursor:pointer}
.pbtn:hover{background:#fff}
.vars{display:flex;gap:6px;flex-wrap:wrap}
.vars button{font:700 14px/1.2 var(--f-body);color:#fff;background:transparent;border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 12px;cursor:pointer}
.vars button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.cap{font-size:15px;min-height:1.8em;color:#E6E7F2}
.cap::before{content:"▶ ";color:var(--gc,var(--sky))}
.snd{font-size:12px;color:#A9ABC2}

/* スクリーンの中の絵(大きさは画面の幅 cqw で決める) */
.scr *{box-sizing:border-box}
.L{position:absolute;inset:0}
.bg-sky{background:#BFE2FF}.bg-mint{background:#BDF0DC}.bg-sun{background:#FFE9A8}.bg-tomato{background:#FFD0CB}.bg-ink{background:var(--ink)}.bg-white{background:#fff}
.chr{position:absolute;bottom:0;transform:translateX(-50%);aspect-ratio:3/4}
.chr .bd{position:absolute;left:6%;right:6%;bottom:0;height:44%;border-radius:45% 45% 0 0;background:var(--cc,var(--tomato));border:.5cqw solid var(--ink);border-bottom:0}
.chr .hd{position:absolute;left:21%;width:58%;top:6%;aspect-ratio:1;border-radius:50%;background:var(--skin);border:.5cqw solid var(--ink)}
.chr .ey{position:absolute;top:42%;width:10%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.chr .ey.l{left:28%}.chr .ey.r{right:28%}
.chr .mo{position:absolute;left:38%;width:24%;top:64%;height:14%;border-radius:0 0 50% 50%;background:var(--ink);transform-origin:50% 0}
.sun-o{position:absolute;border-radius:50%;background:var(--sun);border:.5cqw solid var(--ink)}
.bld{position:absolute;bottom:0;background:var(--card);border:.5cqw solid var(--ink);border-bottom:0;border-radius:.8cqw .8cqw 0 0}
.bld::after{content:"";position:absolute;inset:18% 22% auto;height:18%;background:repeating-linear-gradient(90deg,var(--sky) 0 30%,transparent 30% 50%)}
.telop{position:absolute;left:50%;top:9%;transform:translateX(-50%) rotate(-3deg);background:var(--sun);border:.7cqw solid var(--ink);border-radius:1.4cqw;padding:1cqw 3cqw;font:9cqw/1.15 var(--f-pop);white-space:nowrap;box-shadow:1cqw 1cqw 0 var(--ink)}
.subl{position:absolute;left:8%;right:8%;bottom:5%;text-align:center;font:700 4.2cqw/1.4 var(--f-body);color:#fff;background:rgba(24,24,46,.82);border-radius:1cqw;padding:.8cqw 2cqw}
.band{position:absolute;top:-30%;bottom:-30%;width:60%;left:0;background:var(--mint);border-left:1cqw solid var(--ink);border-right:1cqw solid var(--ink);transform:translateX(-140%) skewX(-18deg)}
.mini{position:absolute;overflow:hidden;border:.8cqw solid var(--ink);background:#fff}
.lbl{position:absolute;left:3%;top:4%;font:500 3cqw/1.2 var(--f-tc);background:var(--ink);color:#fff;border-radius:.8cqw;padding:.6cqw 1.4cqw;letter-spacing:.06em}
.big{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:10cqw/1.25 var(--f-pop)}
.copy{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#F2F2EE;font:6cqw/1.5 var(--f-pop)}
.logo{position:absolute;left:50%;top:50%;width:62%;transform:translate(-50%,-50%)}
.logo .mk{display:flex;justify-content:center;gap:2.4cqw}.logo .mk i{width:9cqw;aspect-ratio:1;border-radius:50%;border:.7cqw solid #F2F2EE}.logo .mk i:nth-child(1){background:var(--tomato)}.logo .mk i:nth-child(2){background:var(--sun);transform:translateY(-2.4cqw)}.logo .mk i:nth-child(3){background:var(--sky)}
.logo span{display:block;text-align:center;color:#F2F2EE;font:7cqw/1.4 var(--f-pop);letter-spacing:.12em;margin-top:2.4cqw}
.ring{position:absolute;left:50%;top:44%;width:30%;aspect-ratio:1;border-radius:50%;border:.8cqw solid var(--sun);transform:translate(-50%,-50%) scale(.2);opacity:0}
.card{position:absolute;background:#fff;border:.6cqw solid var(--ink);border-radius:1.2cqw;overflow:hidden}
.card .th{position:absolute;inset:0 0 34% 0}
.card .tt{position:absolute;left:6%;right:6%;bottom:10%;height:8%;background:var(--line);border-radius:1cqw;box-shadow:0 2.2cqw 0 var(--line)}
.sub-btn{position:absolute;width:14%;aspect-ratio:1;border-radius:50%;background:var(--tomato);border:.6cqw solid var(--ink);display:grid;place-items:center;color:#fff;font:700 2.6cqw/1 var(--f-body)}
.cursor{position:absolute;width:5%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.9);border:.6cqw solid var(--ink)}
.row{position:absolute;left:4%;right:4%;height:27%;display:flex;gap:3%;align-items:center}
.row .th{position:relative;width:42%;height:100%;border-radius:1.2cqw;border:.5cqw solid var(--ink);overflow:hidden;background:#D9DCE8;flex:none}
.row .tx{flex:1;display:grid;gap:1.6cqw}
.row .tx i{display:block;height:2.2cqw;border-radius:1cqw;background:var(--line)}
.row .tx i:last-child{width:60%}
.paper{position:absolute;left:3%;top:6%;bottom:6%;width:50%;background:#fff;border:.5cqw solid var(--ink);border-radius:1.2cqw;padding:2.4cqw;display:grid;gap:1.6cqw;align-content:start}
.paper .ln{font:700 2.6cqw/1.45 var(--f-body);border-radius:1cqw;padding:.8cqw 1.2cqw;border:.4cqw solid transparent}
.paper .ln small{display:block;font:500 2.1cqw/1.4 var(--f-tc);color:var(--sub)}
.seg{position:absolute;top:0;bottom:0;border:.5cqw solid var(--ink);border-radius:1cqw;display:grid;place-items:center;font:700 2.6cqw/1 var(--f-body);overflow:hidden;white-space:nowrap}
.thumb{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:rgba(255,224,196,.95);border:.7cqw solid var(--ink)}
.icons{position:absolute;right:4%;bottom:22%;display:grid;gap:4cqw}
.icons i{display:block;width:11cqw;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.85);border:.6cqw solid var(--ink)}
.chars span{transition:none}
.wave{position:absolute;left:10%;right:10%;bottom:12%;height:22%;display:flex;gap:1.2%;align-items:center}
.wave i{flex:1;height:12%;background:var(--sky);border-radius:1cqw}
.axis{position:absolute;left:12%;right:5%;top:8%;bottom:16%;border-left:.5cqw solid var(--ink);border-bottom:.5cqw solid var(--ink)}
.ax-l{position:absolute;font:500 2.6cqw/1 var(--f-tc);color:var(--sub)}
.note{position:absolute;background:var(--sun);border:.5cqw solid var(--ink);border-radius:1.2cqw;padding:.8cqw 1.6cqw;font:700 3cqw/1.4 var(--f-body);white-space:nowrap}
.frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:.8cqw solid var(--ink);border-radius:1.6cqw;overflow:hidden;background:#BFE2FF}
.bar{position:absolute;left:22%;height:9%;border:.5cqw solid var(--ink);border-radius:1cqw;width:0}
.bar-l{position:absolute;left:3%;font:700 3cqw/1 var(--f-body);transform:translateY(-50%)}
.bar-n{position:absolute;font:500 3cqw/1 var(--f-tc);transform:translateY(-50%);white-space:nowrap}

@media (max-width:820px){
  .hero,.term-grid{grid-template-columns:minmax(0,1fr)}
  .pn{grid-template-columns:minmax(0,1fr)}
  .pn span:empty{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tile,.bigplay{transition:none}
}
#list{scroll-margin-top:72px}