/* space.grapefruit：Lia 的個人網站
   版面：一頁一個主題、上下吸附翻頁（scroll snap）；第一頁是一段模糊有顆粒的逐格動畫當背景。
   桌機右側是細線目錄（跟 Metaxy 網頁版同一套），手機是底部分頁列。
   淺色「果肉」是主角；深色用墨色＋斜細紋。 */

:root{
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --latin:"Fraunces","Iowan Old Style",Georgia,serif;
  --rail-w:280px;
  --tab-h:64px;
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.8,.24,1);
  /* 第一頁的影片上，不管深淺色都用亮字 */
  --film-ink:oklch(97% 0.012 45);
  --film-muted:oklch(88% 0.03 30);
  --film-line:oklch(97% 0.012 45 / .28);
  /* 底片顆粒（hashtag、翻頁閃格用） */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 2.2 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.2 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="day"]{
  color-scheme:light;
  --bg:oklch(97.5% 0.014 45);
  --bg2:oklch(95% 0.022 40);
  --card:oklch(99% 0.008 45);
  --ink:oklch(26% 0.045 335);
  --muted:oklch(45% 0.04 335);
  --line:oklch(26% 0.045 335 / .12);
  --line-strong:oklch(26% 0.045 335 / .28);
  --pink:oklch(58% 0.2 355);
  --pink-soft:oklch(58% 0.2 355 / .1);
  --fruit:oklch(74% 0.13 38);
  --rind:oklch(80% 0.1 30);
  --pith:oklch(97.5% 0.014 45);
  --on-pink:oklch(98% 0.01 45);
  --glass:oklch(97.5% 0.014 45 / .82);
  --texture:transparent;
  --tag:#c2577f;--tag2:#cf6a5c;
  --forest:oklch(62% 0.12 140);--gold:oklch(68% 0.12 80);--glow:oklch(80% 0.14 95);--trunk:oklch(26% 0.045 335);
}
[data-theme="night"]{
  --trunk:oklch(48% 0.05 150);
  color-scheme:dark;
  --bg:oklch(17% 0.012 15);
  --bg2:oklch(21% 0.014 15);
  --card:oklch(20% 0.014 15);
  --ink:oklch(94% 0.012 40);
  --muted:oklch(76% 0.02 20);
  --line:oklch(94% 0.012 40 / .12);
  --line-strong:oklch(94% 0.012 40 / .28);
  --pink:oklch(74% 0.15 352);
  --pink-soft:oklch(74% 0.15 352 / .12);
  --fruit:oklch(70% 0.12 38);
  --rind:oklch(62% 0.1 30);
  --pith:oklch(24% 0.02 20);
  --on-pink:oklch(17% 0.012 15);
  --glass:oklch(17% 0.012 15 / .78);
  --texture:oklch(94% 0.012 40 / .028);
  --tag:#f19aa0;--tag2:#ffb08e;
}

*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:clip;-webkit-text-size-adjust:100%;
  scroll-snap-type:y mandatory;scroll-behavior:smooth;
}
body{
  margin:0;overflow-x:clip;
  font:400 16px/1.8 var(--sans);color:var(--ink);
  background:repeating-linear-gradient(135deg,var(--texture) 0 1px,transparent 1px 7px),var(--bg);
  background-attachment:fixed;background-color:var(--bg);
}
a{color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--pink);color:var(--on-pink);padding:8px 14px;border-radius:999px;z-index:20}
.skip:focus{left:12px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.nb{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 頂列 ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:max(16px,env(safe-area-inset-top)) var(--gut) 16px;
  pointer-events:none;
}
.top>*{pointer-events:auto}
.mark{
  display:inline-flex;align-items:center;gap:10px;
  font:italic 600 20px/1 var(--latin);letter-spacing:.01em;text-decoration:none;
  color:var(--ink);transition:color .3s;
}
.mark-dot{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle,var(--fruit) 0 58%,var(--rind) 58% 70%,var(--pith) 70% 78%,var(--fruit) 78%)}
.on-film .mark{color:var(--film-ink)}
.top-tools{display:flex;gap:8px}
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--glass);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background-color .2s,color .2s,border-color .2s;
}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;overflow:visible}
.theme .moon{fill:currentColor;stroke:none}
[data-theme="night"] .theme .sun,[data-theme="day"] .theme .moon{display:none}
/* 音樂：開著的時候四根柱子跟著跳 */
.sound path{transform-box:fill-box;transform-origin:center bottom}
.sound[aria-pressed="true"]{color:var(--pink)}
.sound[aria-pressed="true"] .b1{animation:eq .52s ease-in-out infinite alternate}
.sound[aria-pressed="true"] .b2{animation:eq .38s ease-in-out infinite alternate .1s}
.sound[aria-pressed="true"] .b3{animation:eq .46s ease-in-out infinite alternate .2s}
.sound[aria-pressed="true"] .b4{animation:eq .33s ease-in-out infinite alternate .05s}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1.25)}}
/* 漢堡：中間那條是一顆柚子籽，打開時兩條線交叉成 X、籽跑到中間 */
.menu-btn path,.menu-btn circle{transition:transform .35s var(--ease),opacity .2s;transform-box:view-box;transform-origin:12px 12px}
.menu-btn .seed{fill:var(--fruit);stroke:var(--rind);stroke-width:1}
.menu-btn[aria-expanded="true"] .l1{transform:translateY(4.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .l3{transform:translateY(-4.5px) rotate(-45deg)}
.menu-btn[aria-expanded="true"] .l2{opacity:0;transform:scaleX(.2)}
.menu-btn[aria-expanded="true"] .seed{transform:translateX(-6.2px) scale(.0001)}
.menu{
  position:fixed;top:0;right:0;bottom:0;z-index:20;width:min(360px,86vw);
  display:flex;flex-direction:column;gap:4px;
  padding:calc(84px + env(safe-area-inset-top)) 32px calc(28px + env(safe-area-inset-bottom));
  background:var(--glass);border-left:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:translateX(102%);transition:transform .45s var(--ease);
}
.menu.open{transform:none}
.menu a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;margin-inline:-14px;border-radius:14px;text-decoration:none;color:var(--ink)}
.menu a span{font:600 22px/1.3 var(--serif);letter-spacing:.05em}
.menu a em{font:italic 400 13px/1 var(--latin);color:var(--muted)}
.menu a[aria-current] span{color:var(--pink)}
.menu-foot{margin-top:auto;font-size:13px;line-height:1.8;color:var(--muted)}
.menu-foot a{display:inline;padding:0;margin:0;text-decoration:underline;text-underline-offset:3px}
.menu-scrim{position:fixed;inset:0;z-index:19;background:oklch(15% 0.02 340 / .28);opacity:0;pointer-events:none;transition:opacity .35s}
.menu-scrim.open{opacity:1;pointer-events:auto}
.top{z-index:21}


/* ---------- 每一頁 ---------- */
.page{
  position:relative;height:100svh;height:100dvh;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:center;gap:28px;
  padding:96px var(--gut) calc(var(--tab-h) + 32px + env(safe-area-inset-bottom));
}
h2{font:600 clamp(32px,5vw,60px)/1.18 var(--serif);letter-spacing:.03em}
h2 em{display:block;margin-top:8px;font:italic 400 clamp(16px,1.8vw,20px)/1 var(--latin);letter-spacing:.02em;color:var(--muted)}
h3{font:600 20px/1.4 var(--serif);letter-spacing:.04em}
.lede{max-width:34em;color:var(--muted);font-size:16.5px}
.note{color:var(--muted);font-size:14px;line-height:1.7}
/* 小按鍵：沒有底、沒有框，只靠字排整齊；滑過去（或鍵盤選到、按下去的那個）[ ] 從字的中間淡入、往兩邊展開 */
.pill,.chip,.kv-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 .8em;margin:0 -.8em;
  border:0;border-radius:0;background:none;color:var(--ink);font:500 15px/1 var(--sans);letter-spacing:.06em;
  text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .25s;align-self:flex-start;
}
.pill::before,.pill::after,.chip::before,.chip::after,.kv-btn::before,.kv-btn::after{
  content:"[";position:absolute;top:50%;left:50%;font:300 1.3em/1 var(--latin);color:var(--pink);
  opacity:0;transform:translate(-50%,-56%);pointer-events:none;
  transition:left .42s var(--ease),opacity .3s ease-out;
}
.pill::after,.chip::after,.kv-btn::after{content:"]"}
:is(.pill,.chip,.kv-btn):is(:hover,:focus-visible,:active,[aria-pressed="true"])::before{left:.28em;opacity:1}
:is(.pill,.chip,.kv-btn):is(:hover,:focus-visible,:active,[aria-pressed="true"])::after{left:calc(100% - .28em);opacity:1}
:is(.pill,.chip,.kv-btn):focus-visible{outline:none}
.pill.solid,.chip.solid{color:var(--pink);font-weight:700}

/* ---------- 第一頁：我是誰 ---------- */
.hero{justify-content:center;align-items:flex-end;color:var(--film-ink);overflow:hidden;background:oklch(22% 0.03 340)}
.film{position:absolute;inset:0;width:100%;height:100%;display:block;filter:blur(1.2px) saturate(1.05)}
.film-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,oklch(15% 0.02 340 / .35) 0%,transparent 30%,transparent 70%,oklch(15% 0.02 340 / .45) 100%),
    radial-gradient(ellipse 70% 80% at 85% 50%,oklch(15% 0.02 340 / .62),transparent 72%);
}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;width:min(100%,420px)}
.hero h1{display:flex;flex-direction:column;gap:4px}
.hi{font:600 clamp(80px,11vw,150px)/.9 var(--latin);letter-spacing:-.01em;font-variation-settings:"SOFT" 100}
.handle{font:italic 400 clamp(18px,2.2vw,24px)/1.2 var(--latin);color:var(--film-muted);padding-left:.3em}
.hero .lede{color:var(--film-muted);font-size:15px;line-height:1.85}
.contents{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.contents li{overflow:hidden}
.contents a{
  display:inline-flex;flex-direction:column;gap:3px;
  padding:8px 12px 8px 0;border-radius:10px;text-decoration:none;transition:background-color .15s,color .15s,padding .15s;
  animation:line-in .9s var(--ease) both;animation-delay:calc(.5s + var(--i) * .16s);
}
.contents span{font:600 19px/1.35 var(--serif);letter-spacing:.05em}
.contents em{font:italic 400 12.5px/1 var(--latin);color:var(--film-muted)}

@media (max-width:719px){
  .page{
    height:100svh;height:100dvh;min-height:0;overflow:hidden;
    gap:clamp(12px,2.4svh,20px);padding-top:calc(68px + env(safe-area-inset-top));
    padding-bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom));
  }
  /* 第一頁：字跟間距照螢幕高度縮放，矮的手機也塞得下 */
  .hi{font-size:clamp(56px,11svh,120px)}
  .handle{font-size:clamp(15px,2.2svh,20px)}
  .hero-copy{gap:clamp(10px,2svh,20px)}
  .hero .lede{font-size:clamp(13.5px,1.9svh,15px);line-height:1.75}
  .contents span{font-size:clamp(16px,2.3svh,19px)}
  .contents a{padding:clamp(4px,1svh,8px) 12px clamp(4px,1svh,8px) 0}
  .foot{padding-top:8px}
  h2{font-size:28px}
}
@keyframes line-in{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
.hello-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--film-muted)}
.hello-links a{text-underline-offset:4px;text-decoration-color:var(--film-line)}

/* ---------- 影片標題：第二頁之後的大標題是挖空的窗，從字裡看到第一頁那段影片（main.js filmTitles） ----------
   影片在字裡統一調成梅紫→葡萄柚粉→蜜桃三色，播到很亮或很暗的鏡頭，字都一樣看得清楚 */
.ft{position:relative;display:inline-block;white-space:nowrap;font-weight:900}
.ft canvas{position:absolute;left:-.1em;top:-.12em;width:calc(100% + .2em);height:calc(100% + .24em);pointer-events:none;writing-mode:horizontal-tb}
.ft.live{color:transparent}

/* 頁面大標（脆排版工具、其他作品）：直書粗明體，放在頁面左邊 */
.big{writing-mode:vertical-lr;line-height:1;margin:0}
.big .ft{display:block;font-size:var(--fs);line-height:1;letter-spacing:.04em;--fs:clamp(56px,min(13svh,15vw),150px)}
.big em{display:block;margin:0 0 0 14px;font:400 15px/1 var(--latin);letter-spacing:.2em;font-style:normal}
@media (max-width:1023px){
  .big .ft{--fs:clamp(44px,min(10.5svh,21vw),96px)}
  .big em{margin-left:8px;font-size:13px}
}

/* 工具的標題：電腦版大字小字跳著排（大字是粗黑體填影片，小字是明體、疊成一欄）；手機版整排橫的粗明體 */
.panel h3{--fs:clamp(56px,min(9vw,20svh),190px);display:flex;align-items:flex-start;gap:.06em;line-height:1;margin:0}
.panel h3 .jb{font:900 var(--fs)/1 var(--sans);letter-spacing:-.03em}
.panel h3 .js{display:inline-flex;flex-direction:column;font:900 calc(var(--fs) * .44)/1.04 var(--serif);letter-spacing:.02em;padding-top:.08em}
.panel h3 .js canvas{display:none}
.panel h3 .js.live{color:var(--ink)}
@media (max-width:1023px){
  .panel h3{--fs:clamp(34px,8vw,60px);gap:0}
  .panel h3 .jb,.panel h3 .js{font:900 var(--fs)/1.1 var(--serif);letter-spacing:.04em;padding:0}
  .panel h3 .js{flex-direction:row}
  .panel h3 .js canvas{display:block}
  .panel h3 .js.live{color:transparent}
}

#katsuji-h .ft{font-size:var(--fs);line-height:1.05;--fs:clamp(36px,min(calc((100vw - var(--gut) * 2) * .5 / var(--len)),11svh),120px)}
@media (max-width:1023px){#katsuji-h .ft{--fs:clamp(30px,min(calc((100vw - var(--gut) * 2) * .97 / var(--len)),7svh),80px)}}

/* ---------- 第二頁：脆排版工具 ----------
   一條橫向的片：區塊本身有 --n 個螢幕高，裡面的舞台黏在畫面上；往下捲多少，片就往左拉多少（main.js toolReel）。
   每個螢幕高放一個吸附點（用 svh：手機網址列伸縮時吸附點不跟著跑），所以一次滑動剛好換一格；往右滑（觸控板、手指）也換到下一格。
   不用框線：每一格就是一整個畫面，工具直接攤在上面。 */
.threads{
  display:block;padding:0;overflow:visible;scroll-snap-align:none;
  height:calc(var(--n) * 100svh);height:calc((var(--n) - 1) * 100svh + 100dvh);
}
.reel-snap{
  position:absolute;left:0;width:1px;pointer-events:none;
  top:calc(var(--k) * 100svh);height:100svh;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.reel-stage{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden}
.reel{
  position:relative;height:100%;width:calc(var(--n) * 100%);
  transform:translate3d(calc(var(--p,0) * -100% / var(--n)),0,0);will-change:transform;
}
.panel{
  position:absolute;top:0;height:100%;width:calc(100% / var(--n));left:calc(var(--k) * 100% / var(--n));
  display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);align-items:center;gap:clamp(32px,4.5vw,96px);
  padding:calc(96px + env(safe-area-inset-top)) var(--gut) 96px;
}
/* 滑動時：側欄比工具動得多一點、大數字動得最多，像鏡頭橫移時近景遠景的速度不一樣 */
.panel-side,.panel-main,.intro>*{transition:opacity .2s}
.panel-side{
  display:flex;flex-direction:column;gap:22px;min-width:0;
  transform:translate3d(calc(var(--d,0) * 14vw),0,0);opacity:calc(1 - var(--a,0) * .75);
}
.panel-main{min-width:0;min-height:0;transform:translate3d(calc(var(--d,0) * 5vw),0,0)}
.panel-no{
  position:absolute;right:calc(var(--gut) - .06em);bottom:calc(-.2em + 40px);z-index:-1;pointer-events:none;
  font:italic 600 clamp(140px,34svh,380px)/1 var(--latin);font-variation-settings:"SOFT" 100;
  color:var(--pink-soft);letter-spacing:-.04em;transform:translate3d(calc(var(--d,0) * 40vw),0,0);
}
.reel-stars{position:absolute;inset:0;pointer-events:none;z-index:-1}
.reel-stars i{
  position:absolute;font-style:normal;line-height:1;
  translate:calc(var(--p,0) * var(--x) * -18vw) 0;
  animation:tw 2.4s var(--ease) infinite;animation-delay:var(--dl);
}
.reel-stars .p{color:var(--pink)}
.reel-stars .f{color:var(--fruit)}
.reel-stars .c{color:oklch(80% 0.09 210)}
@keyframes tw{0%,100%{scale:.4;opacity:.25}45%{scale:1.1;opacity:.9}}

/* 第一格：直書大標在左邊，說明排在它旁邊、靠左分段；子項目跟說明分開，置中放在畫面偏下方 */
.panel.intro{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) auto auto;
  column-gap:clamp(24px,4vw,64px);row-gap:clamp(12px,2.2svh,22px);align-items:start;
}
.intro>*{transform:translate3d(calc(var(--d,0) * 10vw),0,0);opacity:calc(1 - var(--a,0) * .75)}
.intro .big{grid-area:2 / 1}
.intro-copy{grid-area:2 / 2;display:flex;flex-direction:column;gap:.9em;padding-top:.2em}
.intro .lede{font-size:clamp(15px,1.25vw,18px);max-width:32em}
.intro .reel-index{grid-area:4 / 1 / 5 / 3;justify-self:center;justify-content:center}
.intro .reel-hint{grid-area:5 / 1 / 6 / 3;justify-self:center}
.reel-index{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 30px}
.reel-index a{display:inline-flex;align-items:baseline;gap:8px;padding:6px 10px 6px 0;border-radius:10px;text-decoration:none;transition:background-color .15s,color .15s,padding .15s}
.reel-index b{font:italic 600 14px/1 var(--latin);color:var(--pink)}
.reel-index span{font:600 clamp(17px,1.5vw,21px)/1.3 var(--serif);letter-spacing:.05em}
.reel-hint{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.12em;color:var(--muted)}
.reel-hint svg{width:40px;height:12px;fill:none;stroke:var(--pink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(8px)}}

/* 下面的小分頁：現在在哪一格，點了直接跳 */
.reel-bar{
  position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--tab-h) + 26px + env(safe-area-inset-bottom));z-index:2;
  display:flex;gap:4px 22px;flex-wrap:wrap;font-size:13px;letter-spacing:.08em;
}
.reel-bar a{position:relative;padding:4px 0;color:var(--muted);text-decoration:none;transition:color .2s}
.reel-bar a::after{content:"";position:absolute;left:50%;bottom:-6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--fruit);transform:scale(0);transition:transform .3s var(--ease)}
.reel-bar a[aria-current]{color:var(--ink)}
.reel-bar a[aria-current]::after{transform:none}

/* 各工具 */
.panel h3{line-height:1.05}
.side-head{display:contents}
.side-head .pill{order:5}
.note-toggle,.r-view,.r-acts{display:none!important}
.panel .note{font-size:15px;max-width:30em}
.ruler{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:18px;height:min(100%,600px)}
.ruler textarea{
  width:100%;height:100%;min-height:0;resize:none;padding:20px 22px;border-radius:22px;border:0;
  background:var(--bg2);color:var(--ink);font:400 16px/1.75 var(--sans);transition:background-color .2s,box-shadow .2s;
}
.ruler textarea:focus{outline:none;box-shadow:0 0 0 2px var(--pink)}
.r-preview{padding:18px 20px 22px;border-radius:22px;background:var(--card);overflow:auto;box-shadow:0 18px 50px oklch(26% 0.045 335 / .08)}
.r-out{margin-top:10px;width:var(--rw,315px);max-width:none;white-space:pre-wrap;word-break:break-all;font:400 15px/1.7 -apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;min-height:3em}
.r-tools{display:flex;flex-wrap:wrap;gap:2px 28px;align-items:center}
.seg{display:flex;gap:28px}
.seg .chip[aria-pressed="false"]{color:var(--muted)}
.post-head{display:flex;align-items:center;gap:10px;font-size:14px}
.post-head i{font-style:normal;color:var(--muted);font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,var(--fruit) 0 58%,var(--rind) 58% 70%,var(--pith) 70% 78%,var(--fruit) 78%)}

.kao{display:flex;flex-direction:column;gap:clamp(14px,3svh,28px)}
.kao-stage{
  display:flex;align-items:center;justify-content:space-between;gap:12px 32px;
  padding:clamp(8px,1.6svh,14px) 0;
}
.kao-now{
  min-width:0;max-width:100%;font:400 clamp(28px,2.8vw,44px)/1.3 var(--sans);color:var(--ink);background:none;border:0;padding:0;cursor:copy;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}
.kao-tools{display:flex;gap:2px 28px;flex-wrap:nowrap;flex:none}   /* 小按鍵本身左右各凸出 .8em，字的邊剛好對齊細線 */
.chip[hidden]{display:none}
/* 分類：無底的小字（跟其他小按鍵一樣 [ ]），按了換下面那一組 */
.cat-tabs{display:flex;flex-wrap:wrap;gap:0 24px;padding-left:.8em;flex:none}   /* 不要被下面很長的清單擠扁 */
.cat-tabs .chip{min-height:34px;font-size:14px}
.cat-tabs .chip[aria-pressed="false"]{color:var(--muted)}
.cat-group[hidden]{display:none!important}
.panel-main,.kao-list,.lines-list{overflow-anchor:none}   /* 換分類時不要被瀏覽器自動捲到別的地方 */
/* 顏文字、分隔線用系統字型顯示（跟脆 App 一樣）。HTML 也標了 lang="und"：標成中文時，瀏覽器會拿中文字型疊附加符號，疊成黑塊 */
.kao-list .cat-group button,.lines-list .cat-group button,.kao-stage .kao-now{font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Segoe UI Symbol",sans-serif}
.kao-list{min-height:0;max-height:clamp(180px,36svh,440px);overflow-y:auto;overscroll-behavior-y:contain}
/* 清單像一張字體樣張：不鋪底色、沒有外框，格子之間是一道潮點內框線（main.js tideFrame）；滑過去淡粉從中間鋪開 */
.kao-list .cat-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kao-list button,.lines-list button{
  font:400 17px/1.4 var(--sans);color:var(--ink);background-color:transparent;
  border:0;border-radius:0;padding:14px 10px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s,color .2s;
}
.lines{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2svh,20px);height:100%;min-height:0}
.lines-list{min-height:0;max-height:calc(100svh - 300px);overflow-y:auto;overscroll-behavior-y:contain}
.lines-list .cat-group{display:flex;flex-direction:column;gap:12px}
.lines-list button{font-size:clamp(16px,1.5vw,21px);padding:clamp(10px,1.7svh,16px) 20px;cursor:copy}

.type-input{display:block}
.type-input span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.type-input input{
  width:100%;font:400 clamp(20px,2vw,28px)/1.3 var(--sans);color:var(--ink);background:transparent;
  border:0;border-radius:0;padding:8px 0;box-shadow:inset 0 -2px 0 var(--pink-soft);transition:box-shadow .2s;
}
.type-input input:focus{outline:none;box-shadow:inset 0 -2px 0 var(--pink)}
.type-out{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px;
  max-height:100%;overflow-y:auto;overscroll-behavior:contain;align-content:center;height:100%;
}
.type-out button{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:clamp(8px,1.6svh,14px) 12px;border:0;border-radius:14px;background:none;color:var(--ink);
  font:400 clamp(18px,1.8vw,24px)/1.4 var(--sans);text-align:left;cursor:copy;transition:background-color .2s,color .2s;
}
.type-out button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.type-out button small{font-size:12px;color:var(--muted);flex:none}

.faq .panel-main{max-height:100%;overflow-y:auto;overscroll-behavior:contain;align-self:center}
.faq summary{list-style:none;cursor:pointer;padding:16px 46px 16px 4px;position:relative;font:600 clamp(16px,1.4vw,19px)/1.5 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{padding:12px 4px 18px;color:var(--muted);font-size:15px}
.faq details[open] p{animation:faq-in .45s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq .note a{text-underline-offset:3px}

/* 手機：一格裡上面是標題跟說明，下面工具吃掉剩下的高度，放不下的在工具裡面捲 */
@media (max-width:1023px){
  .panel:not(.intro){
    display:flex;flex-direction:column;align-items:stretch;gap:clamp(12px,2.2svh,20px);
    padding:calc(76px + env(safe-area-inset-top)) var(--gut) calc(var(--tab-h) + 64px + env(safe-area-inset-bottom));
  }
  .panel.intro{column-gap:16px;row-gap:clamp(10px,1.8svh,18px);padding:calc(76px + env(safe-area-inset-top)) var(--gut) calc(var(--tab-h) + 64px + env(safe-area-inset-bottom))}
  .intro .reel-index{gap:4px 22px;max-width:22em}
  .panel-side{gap:clamp(8px,1.6svh,14px)}
  .side-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 22px}
  .side-head h3{margin-right:auto}
  .side-head .chip,.side-head .pill{font-size:13px;min-height:34px;order:0}
  .note-toggle{display:inline-flex!important}
  .note-toggle[aria-expanded="true"]{color:var(--pink)}
  .panel-side .note{display:none}
  .panel-side .note.open{display:block}
  /* 排版預覽：一次只看一個欄位，右上角 [預覽]／[編輯]；預覽下面 [複製並跳轉至 Threads] 靠右 */
  .ruler{grid-template-rows:auto minmax(0,1fr) auto}
  .ruler .r-view{display:inline-flex!important;justify-self:end;margin:0 -.8em 0 0}
  .ruler .r-acts{display:flex!important;justify-self:end;gap:2px 28px;margin-right:-.8em}
  .r-acts .chip{margin:0}
  .ruler[data-view="edit"] .r-preview,.ruler[data-view="edit"] .r-acts{display:none!important}
  .ruler[data-view="preview"] textarea{display:none}
  .ruler textarea{min-height:min(46svh,360px)}
  #r-copy{display:none}
  .panel .note{font-size:14px;line-height:1.65}
  .panel-main{flex:1 1 auto;overflow-y:auto}   /* 捲到底再滑，就接著換下一格 */
  .panel-no{font-size:clamp(120px,24svh,220px);bottom:calc(var(--tab-h) + 20px)}
  .ruler{grid-template-columns:minmax(0,1fr);height:auto}
  .ruler textarea{padding:14px 16px;font-size:15px}
  .r-preview{padding:14px 14px 16px}
  .kao-stage{flex-direction:column;align-items:flex-start}
  .kao-now{font-size:32px}
  .kao-list .cat-group{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kao-list{max-height:none}
  .kao-list button{padding:11px 8px;font-size:16px}
  .lines{height:auto;justify-content:flex-start}
  .lines-list{max-height:none}
  .lines-list button{flex:none}
  .cat-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}
  .cat-tabs::-webkit-scrollbar{display:none}
  .cat-tabs .chip{flex:none}
  .type-out{grid-template-columns:minmax(0,1fr);height:auto;align-content:start}
  .reel-bar{gap:4px 16px;font-size:12px}
}
@media (max-width:719px) and (max-height:740px){
  .panel .note{display:none}
  .intro .lede{font-size:14px}
}
@media (max-width:719px){.intro .lede{font-size:15px;line-height:1.75}}
@media (max-height:520px){.intro .big{writing-mode:horizontal-tb} .intro .big .ft{--fs:clamp(28px,10svh,48px)} .intro .big em,.intro .reel-hint,.intro .reel-index{display:none}}
@media (max-width:719px) and (max-height:740px){.intro .big .ft{--fs:clamp(40px,8.4svh,64px)} .intro .reel-hint{display:none} .intro .lede{font-size:14px}}

/* ---------- 第三頁：Katsuji ----------
   full：16:9 宣傳片鋪滿整頁播
   popup：播完，訂閱框從中間跳出來
   docked：3 秒後或往下滑，影片縮成 16:9 小螢幕，跟訂閱框兩欄並排置中；標題三行在左上角 */
.katsuji{
  padding:0;overflow:hidden;
  --nb-w:clamp(320px,24vw,460px);--gap:clamp(28px,3vw,64px);
  /* 影片寬度跟著螢幕：寬度上扣掉訂閱欄，高度上扣掉上面三行標題，兩者取小 */
  --kv-w:min(calc(100vw - var(--gut) * 2 - var(--nb-w) - var(--gap)),calc((100svh - var(--area-top) - 56px) * 16 / 9));
  --kv-h:calc(var(--kv-w) * 9 / 16);
  --area-top:calc(84px + env(safe-area-inset-top) + var(--copy-h,150px));
  --row-l:calc(50% - (var(--kv-w) + var(--gap) + var(--nb-w)) / 2);
  --row-t:calc(var(--area-top) + (100svh - var(--area-top) - var(--kv-h) - var(--tab-h)) / 2);
}
.kv-stage{
  position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;
  overflow:hidden;border-radius:0;background:oklch(14% 0.02 340);
  transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),height .8s var(--ease),border-radius .8s var(--ease),box-shadow .8s;
}
.kv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;cursor:pointer;background:oklch(14% 0.02 340)}
@media (min-aspect-ratio:16/9){.katsuji[data-state="full"] .kv{object-fit:cover}}
.kv-btn{position:absolute;z-index:3;margin:0;color:oklch(20% 0.03 340);font-size:14px;transition:opacity .4s;
  text-shadow:0 0 2px oklch(98% 0.01 45 / .95),0 0 8px oklch(98% 0.01 45 / .9),0 0 16px oklch(98% 0.01 45 / .7)}
.kv-sound{left:24px;bottom:calc(24px + var(--tab-h) + env(safe-area-inset-bottom))}
.kv-skip{right:24px;bottom:calc(24px + var(--tab-h) + env(safe-area-inset-bottom))}
.kv-replay{right:12px;bottom:12px;opacity:0;pointer-events:none}
.katsuji-copy{
  position:absolute;z-index:1;left:var(--gut);top:calc(84px + env(safe-area-inset-top));right:var(--gut);
  display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(-10px);transition:opacity .6s .35s,transform .6s .35s var(--ease);
}
.katsuji-copy h2{font-size:clamp(28px,3.4vw,40px)}
.one-line{color:var(--muted);font-size:15.5px;max-width:46em}
.tags span{white-space:nowrap}
.tags{
  font:700 14px/1.9 var(--sans);letter-spacing:.02em;word-spacing:.35em;word-break:keep-all;
  color:var(--tag);background:var(--noise),linear-gradient(90deg,var(--tag),var(--tag2));background-size:90px 90px,100% 100%;
  background-blend-mode:overlay;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.notify-box{
  position:absolute;z-index:4;left:50%;top:50%;width:min(92vw,440px);
  transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
  transition:left .8s var(--ease),top .8s var(--ease),transform .8s var(--ease),opacity .4s,width .8s var(--ease);
  box-shadow:0 30px 80px oklch(15% 0.02 340 / .35);
}
.katsuji[data-state="popup"] .notify-box{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.katsuji[data-state="popup"] .kv-skip,.katsuji[data-state="docked"] .kv-skip{opacity:0;pointer-events:none}
.katsuji[data-state="docked"] .kv-stage{
  left:var(--row-l);top:var(--row-t);width:var(--kv-w);height:var(--kv-h);
  border-radius:24px;box-shadow:0 24px 60px oklch(15% 0.02 340 / .25);
}
.katsuji[data-state="docked"] .kv-sound{left:12px;bottom:12px}
.katsuji[data-state="docked"] .kv-replay{opacity:1;pointer-events:auto}
.katsuji[data-state="docked"] .katsuji-copy{opacity:1;transform:none}
.katsuji[data-state="docked"] .notify-box{
  opacity:1;pointer-events:auto;box-shadow:none;width:var(--nb-w);
  left:calc(var(--row-l) + var(--kv-w) + var(--gap) + var(--nb-w) / 2);top:calc(var(--row-t) + var(--kv-h) / 2);
  transform:translate(-50%,-50%) scale(1);
}
/* 手機：影片在上、訂閱在下，一樣置中 */
@media (max-width:719px) and (max-height:740px){
  .katsuji .tags{white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gut))}
  .katsuji .one-line{font-size:13.5px;line-height:1.6}
  .katsuji-copy h2{font-size:24px}
  .hello-links{display:none}
}
/* 直的影片（手機）：縮小後影片置中、訂閱在下面 */
.katsuji.kv-tall{--kv-h:min(30svh,300px);--kv-w:calc(var(--kv-h) * 9 / 16);--row-l:calc(50% - var(--kv-w) / 2)}
.katsuji.kv-tall[data-state="full"] .kv{object-fit:cover}
.katsuji.kv-tall[data-state="docked"] .kv-btn{min-height:28px;padding:0 9px;font-size:11px;letter-spacing:.02em}
.katsuji.kv-tall[data-state="docked"] .kv-sound{left:8px;bottom:8px}
.katsuji.kv-tall[data-state="docked"] .kv-replay{right:8px;bottom:8px}
/* 影片全螢幕時，左上角的站名先藏起來（影片有深有淺，怎麼配色都會有看不清楚的時候） */
.mark{transition:color .3s,opacity .3s}
.kv-full .mark{opacity:0;pointer-events:none}
@media (max-width:719px){
  .katsuji{--row-t:calc(76px + var(--copy-h,170px))}
  .katsuji[data-state="docked"] .notify-box{
    width:calc(100vw - var(--gut) * 2);left:50%;
    top:calc(var(--row-t) + var(--kv-h) + 16px);transform:translate(-50%,0);padding:16px;gap:10px;
  }
  .katsuji[data-state="docked"] .pointer{display:none}
  .katsuji[data-state="docked"] .notify-box .note{display:none}
  .katsuji[data-state="docked"] .notify label{font-size:16px;margin-bottom:8px}
  .katsuji[data-state="docked"] .confirm{font-size:13px;line-height:1.6}
}
.notify-box{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.notify label{display:block;font:600 20px/1.4 var(--serif);margin-bottom:12px}
.notify-row{display:flex;gap:14px;align-items:center}
.notify-row .pill{margin:0}
.notify input{
  flex:1 1 auto;min-width:0;min-height:46px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);font:400 16px/1 var(--sans);
}
.notify input:focus{outline:none;border-color:var(--pink)}
.confirm{font-size:15px;line-height:1.75}
.confirm b{color:var(--pink);font-weight:500}
/* 從「免費訂閱」指向下面說明的箭頭：每 5 秒彈出來一次 */
.pointer{display:block;margin:-10px 34px -12px auto;width:120px;height:70px;overflow:visible;fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pointer .shaft{stroke-dasharray:110;stroke-dashoffset:110;animation:draw 5s var(--ease) infinite}
.pointer .head{opacity:0;transform-box:fill-box;transform-origin:left center;animation:pop 5s var(--ease) infinite}
@keyframes draw{0%{stroke-dashoffset:110;opacity:1}12%{stroke-dashoffset:0}70%{stroke-dashoffset:0;opacity:1}85%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes pop{0%,10%{opacity:0;transform:scale(.4)}16%{opacity:1;transform:scale(1.35)}22%{transform:scale(.9)}27%{transform:scale(1)}70%{opacity:1}85%,100%{opacity:0}}

/* ---------- 第四頁：其他作品（直書大標在左，作品跟頁尾在右） ---------- */
.works{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;column-gap:clamp(20px,4vw,64px);row-gap:20px;align-content:center}
.works .big{grid-row:1 / 4;align-self:start}
.works .back-top{grid-column:2;justify-self:start;margin-left:0}
.works .work-list,.works .foot{grid-column:2}
@media (max-width:719px){.works .big .ft{--fs:clamp(40px,min(9svh,18vw),80px)}}
.work-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;align-content:start}
.work-list{display:grid;gap:16px;max-width:900px}
/* 作品不做卡片：一行一行的大字，名字大、說明小，像片尾名單；這頁第一次出現時從右邊一行一行排進來 */
.work-list{gap:0;overflow-x:hidden}
.work{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:24px;row-gap:6px;padding:clamp(14px,2.4svh,22px) 0;border-top:1px solid var(--line)}
.work:last-child{border-bottom:1px solid var(--line)}
.work h3{font:900 clamp(26px,3vw,44px)/1.15 var(--serif);letter-spacing:.03em;grid-column:1}
.work p{color:var(--muted);font-size:15px;grid-column:1;max-width:34em}
.work .pill{grid-column:2;grid-row:1;align-self:center}
.work.soon h3{color:var(--muted)}
.works.seen .work{animation:credit .7s var(--ease) both}
.works.seen .work:nth-child(2){animation-delay:.09s}
.works.seen .work:nth-child(3){animation-delay:.18s}
@media (max-width:719px){.work{grid-template-columns:minmax(0,1fr)} .work .pill{grid-column:1;grid-row:auto;justify-self:start;margin-left:0}}
@keyframes credit{from{transform:translateX(12vw);opacity:0}to{transform:none;opacity:1}}

.foot{margin-top:auto;padding-top:24px;color:var(--muted);font-size:14px}
.foot p+p{margin-top:6px}
.foot a{text-underline-offset:3px;white-space:nowrap}


/* ---------- 每一頁的「地方」：英雄頁影片裡的建築、燈、樹林、陽光。很淡、只在邊緣，不碰工具 ---------- */
.place-city{position:absolute;left:0;bottom:0;width:100%;height:34svh;z-index:-1;pointer-events:none}
.place-bokeh,.place-forest,.place-sun{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* Katsuji：失焦的城市燈，並排之後才看得到 */
.place-bokeh i{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 32%,transparent) 0 52%,color-mix(in srgb,var(--c) 10%,transparent) 70%,transparent 72%);
  opacity:0;transition:opacity 1.2s;animation:drift var(--t) ease-in-out infinite alternate;animation-delay:var(--dl);
}
.katsuji[data-state="docked"] .place-bokeh i{opacity:.9}
@keyframes drift{from{transform:translate(-2vmin,1vmin) scale(.92)}to{transform:translate(2vmin,-2vmin) scale(1.06)}}
/* 角色：樹林。兩側幾根樹幹、中間幾隻螢火蟲 */
.place-forest .trunk{
  position:absolute;top:0;bottom:0;left:var(--x);width:var(--w);opacity:calc(var(--o) * .45);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--forest) 45%,var(--trunk)) 25%,color-mix(in srgb,var(--gold) 25%,var(--trunk)) 75%,transparent);
  filter:blur(2px);
}
.place-forest .fly{
  position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:50%;
  background:var(--glow);box-shadow:0 0 10px 3px color-mix(in srgb,var(--glow) 60%,transparent);
  animation:fly var(--t) ease-in-out infinite alternate;animation-delay:var(--dl);
}
@keyframes fly{0%{transform:translate(0,0);opacity:.2}35%{opacity:.9}60%{transform:translate(4vw,-3vh);opacity:.3}100%{transform:translate(-2vw,2vh);opacity:.8}}
/* 作品：抬頭看太陽，底下一條田野的地平線 */
.place-sun .sun{
  position:absolute;right:calc(var(--gut) - 6vmin);top:-6vmin;width:30vmin;height:30vmin;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--fruit) 55%,transparent) 0 22%,color-mix(in srgb,var(--fruit) 18%,transparent) 45%,transparent 70%);
}
.place-sun .field{
  position:absolute;left:0;right:0;bottom:0;height:22svh;
  background:linear-gradient(to top,color-mix(in srgb,var(--forest) 10%,transparent),transparent);
  border-top:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
}

/* ---------- 彩蛋的小光：每頁一顆，平常幾乎看不到 ---------- */
.morse{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--morse,var(--fruit));opacity:.22;pointer-events:none;z-index:1}
.morse.on{opacity:1;transform:scale(1.7);box-shadow:0 0 12px 4px color-mix(in srgb,var(--morse,var(--fruit)) 75%,transparent)}
.hero .morse{--morse:oklch(97% 0.03 60);width:5px;height:5px}
.reel .morse{--morse:var(--pink);width:4px;height:6px;border-radius:1px;margin:0;z-index:-1}
.place-forest .morse{--morse:var(--glow)}

/* ---------- 第四頁：角色（心理測驗） ---------- */
.cards{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:clamp(24px,5vw,80px);align-content:center}
.cards .big{align-self:start}
.quiz{align-self:center;min-width:0;max-width:760px;position:relative}
.quiz [hidden]{display:none!important}
.quiz-start,.quiz-q,.quiz-say{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.4svh,24px)}
.quiz-start .lede{font-size:clamp(15px,1.25vw,18px);max-width:30em}
.quiz-n{font:600 14px/1 var(--latin);color:var(--pink);letter-spacing:.08em}
.quiz-text{font:900 clamp(26px,3.2vw,44px)/1.3 var(--serif);letter-spacing:.03em;text-wrap:balance}
.quiz-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;width:100%}
.quiz-opt{
  display:block;width:100%;text-align:left;padding:14px 4px;border:0;background:none;color:var(--ink);cursor:pointer;
  font:500 clamp(16px,1.4vw,20px)/1.5 var(--sans);
  background-image:linear-gradient(var(--pink),var(--pink));background-position:50% 100%;background-size:0% 1.5px;background-repeat:no-repeat;
  transition:background-size .45s var(--ease),color .25s;
}
@media (hover:hover){.quiz-opt:hover{background-size:100% 1.5px;color:var(--pink)}}
.quiz-opt:focus-visible{background-size:100% 1.5px;color:var(--pink);outline:none}
.quiz-result{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.quiz-img{
  aspect-ratio:3 / 4;width:100%;max-height:58svh;border-radius:6px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--forest) 30%,var(--bg2)),color-mix(in srgb,var(--gold) 26%,var(--bg2))) center / cover;
}
.quiz-img:not([style*="url"])::after{
  content:attr(data-initial);position:absolute;inset:0;display:grid;place-items:center;
  font:900 clamp(80px,12vw,180px)/1 var(--serif);color:color-mix(in srgb,var(--ink) 18%,transparent);
}
.quiz-you{font-size:14px;color:var(--muted)}
.quiz-name:focus{outline:none}
.quiz-name{font:900 clamp(34px,4.4vw,64px)/1.15 var(--serif);letter-spacing:.04em}
.quiz-line{color:var(--muted);font-size:clamp(15px,1.25vw,18px);max-width:26em}
.quiz-acts{display:flex;flex-wrap:wrap;gap:4px 30px;padding-left:.8em}
/* 進場：題目一行一行升起；結果前面先有一根樹幹從右往左掠過 */
.quiz-q.in .quiz-text,.quiz-q.in .quiz-opts li{animation:rise .5s var(--ease) both}
.quiz-q.in .quiz-opts li:nth-child(1){animation-delay:.08s}
.quiz-q.in .quiz-opts li:nth-child(2){animation-delay:.14s}
.quiz-q.in .quiz-opts li:nth-child(3){animation-delay:.2s}
.quiz-q.in .quiz-opts li:nth-child(4){animation-delay:.26s}
@keyframes rise{from{transform:translateY(60%);opacity:0;clip-path:inset(0 0 100% 0)}to{transform:none;opacity:1;clip-path:inset(0)}}
.quiz-result.in::before{
  content:"";position:absolute;top:-10svh;bottom:-10svh;width:22vw;right:-30vw;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--forest) 30%,oklch(18% 0.02 330)) 20%,oklch(16% 0.02 330) 80%,transparent);
  animation:pass .55s steps(12) both;
}
.quiz-result.in .quiz-img,.quiz-result.in .quiz-say{animation:appear .01s .28s both}
@keyframes pass{to{transform:translateX(-140vw)}}
@keyframes appear{from{opacity:0}to{opacity:1}}
/* 手機橫拿（很矮）：角色頁的大標改橫的、全部縮小 */
@media (max-height:520px){.cards{grid-template-columns:minmax(0,1fr);align-content:start} .cards .big{writing-mode:horizontal-tb} .cards .big .ft{--fs:clamp(28px,10svh,48px)} .cards .big em{display:none} .quiz-result{grid-template-columns:auto minmax(0,1fr)} .quiz-img{max-height:46svh;width:auto} .quiz-start .lede+.lede{display:none} .quiz{align-self:start} .quiz-q{gap:8px} .quiz-text{font-size:20px} .quiz-opt{padding:5px 2px;font-size:15px}}
@media (max-width:719px){
  .cards{grid-template-columns:auto minmax(0,1fr);column-gap:14px}
  .cards .big .ft{--fs:clamp(40px,min(9svh,18vw),80px)}
  .quiz-result{grid-template-columns:minmax(0,1fr)}
  .quiz-img{max-height:30svh;width:auto}
  .quiz-text{font-size:22px}
  .quiz-opt{padding:11px 2px;font-size:16px}
}

/* ---------- 滑到能點、能選的東西上：不反色，改成從中間往兩邊展開（跟小按鍵的 [ ] 同一個動法） ----------
   文字（問答、目錄、選單、頁尾連結）：字下面一條細線從中間畫出來；打開的問答、現在這一頁的選單項目，線一直留著。
   方塊（顏文字、分隔線、字體）：淡粉色從中間往左右鋪開；選中的顏文字整塊鋪滿、字變粉紅。 */
.faq summary,.reel-index a span,.menu a span,.contents a span,.hello-links a,.foot a{
  background:linear-gradient(var(--line-c,var(--pink)),var(--line-c,var(--pink))) 50% 100% / 0% 1.5px no-repeat;
  transition:background-size .45s var(--ease),color .25s,text-decoration-color .25s;
}
.contents a span,.hello-links a{--line-c:var(--film-ink)}
.faq details[open] summary,.menu a[aria-current] span{background-size:100% 1.5px}
.faq details[open] summary{color:var(--pink)}
.kao-list button,.lines-list button,.type-out button{
  background-image:linear-gradient(var(--pink-soft),var(--pink-soft));background-position:50% 50%;background-size:0% 100%;background-repeat:no-repeat;
  transition:background-size .45s var(--ease),color .25s;
}
.kao-list button[aria-pressed="true"]{background-size:100% 100%;color:var(--pink)}
.icon-btn:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
@media (hover:hover){
  .faq summary:hover,.hello-links a:hover,.foot a:hover,
  .reel-index a:hover span,.menu a:hover span,.contents a:hover span{background-size:100% 1.5px}
  .faq summary:hover,.reel-index a:hover,.menu a:hover span{color:var(--pink)}
  .hello-links a:hover,.foot a:hover{text-decoration-color:transparent}
  .kao-list button:hover,.lines-list button:hover,.type-out button:hover{background-size:100% 100%}
  .icon-btn:hover{border-color:var(--pink);color:var(--pink)}
  .notify input:hover{border-color:var(--ink)}
}
:is(.faq summary,.hello-links a,.foot a):focus-visible,:is(.reel-index a,.menu a,.contents a):focus-visible span{background-size:100% 1.5px}
:is(.faq summary,.reel-index a):focus-visible,.menu a:focus-visible span{color:var(--pink)}
:is(.hello-links a,.foot a):focus-visible{text-decoration-color:transparent}
:is(.kao-list button,.lines-list button,.type-out button):focus-visible{background-size:100% 100%}

/* ---------- 換頁的方格：畫面上隨機挖開一格一格的窗，看到底下第一頁的影片（main.js cut） ---------- */
.cut{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
.tide{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}

/* ---------- 手機底部分頁列 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:flex;justify-content:space-around;
  padding:6px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));
  background:var(--glass);border-top:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 0;text-decoration:none;color:var(--muted);font-size:11px;letter-spacing:.04em;
}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--pink)}

.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + 24px + env(safe-area-inset-bottom));z-index:30;transform:translate(-50%,12px);
  padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--bg);
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);
  max-width:calc(100vw - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.toast.show{opacity:1;transform:translate(-50%,0)}


/* ---------- 桌機：右側目錄、底部分頁列收起來 ---------- */
@media (min-width:1024px){
  .tabbar{display:none}
  :root{--tab-h:0px}
  .toast{bottom:32px}
  .page{padding-bottom:56px}
  .katsuji-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px}
  .hero{padding-right:max(var(--gut),8vw)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .contents a{animation:none}
  .kv-stage,.notify-box,.katsuji-copy{transition:none}
  .pill::before,.pill::after,.chip::before,.chip::after,.kv-btn::before,.kv-btn::after{transition:none}
  .faq summary,.reel-index a span,.menu a span,.contents a span,.hello-links a,.foot a,.kao-list button,.lines-list button,.type-out button{transition:none}
  .faq details[open] p{animation:none}
  .faq summary::after{transition:none}
  .works.seen .work{animation:none}
  .place-bokeh i,.place-forest .fly{animation:none}
  .quiz-q.in .quiz-text,.quiz-q.in .quiz-opts li,.quiz-result.in .quiz-img,.quiz-result.in .quiz-say{animation:none}
  .quiz-result.in::before{display:none}
  .quiz-opt{transition:none}
  .pointer .shaft,.pointer .head{animation:none;opacity:1;stroke-dashoffset:0}
}

/* ---------- 游標：星球／葡萄柚（cursor.js，只在有滑鼠的裝置） ---------- */
.sg-cursor{
  position:fixed;left:0;top:0;z-index:100;pointer-events:none;
  width:30px;height:30px;margin:14px 0 0 14px;
  opacity:0;transition:opacity .15s;
}
.sg-cursor.on{opacity:1}
.sg-art{position:absolute;inset:0;filter:drop-shadow(0 0 5px rgba(255,126,182,.8)) drop-shadow(0 0 12px rgba(115,230,245,.45))}
.sg-art svg{width:100%;height:100%;display:block;transition:transform .18s var(--ease)}
.sg-cursor.is-fruit .sg-art svg{transform:scale(1.15) rotate(-8deg)}
/* 女巫星塵：一圈輪流閃的四角星 */
.sg-halo{position:absolute;inset:-14px;animation:halo-spin 9s linear infinite}
.sg-halo span{
  position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  transform:rotate(var(--a)) translateY(-34px);
}
.sg-halo svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 4px rgba(255,255,255,.7));animation:twinkle 1.6s var(--ease) infinite;animation-delay:var(--d)}
.sg-cursor.is-fruit .sg-halo{inset:-18px}
.sg-dust{position:fixed;z-index:99;pointer-events:none;margin:-6px 0 0 -6px;animation:dust .8s var(--ease) forwards}
.sg-dust svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}
@keyframes halo-spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{transform:scale(.35);opacity:.35}45%{transform:scale(1.15);opacity:1}}
@keyframes dust{from{transform:translate(0,0) scale(1) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2) rotate(90deg);opacity:0}}
.sg-slice{position:fixed;z-index:101;pointer-events:none;width:0;height:0}
.sg-slice i{position:absolute;left:-22px;top:-22px;width:44px;height:44px;overflow:hidden}
.sg-slice i svg{width:44px;height:44px;display:block}
.sg-slice .l{clip-path:inset(0 50% 0 0);animation:slice-l .6s var(--ease) forwards}
.sg-slice .r{clip-path:inset(0 0 0 50%);animation:slice-r .6s var(--ease) forwards}
.sg-slice b{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50% 50% 50% 0;background:#ff8a6b;border:1.5px solid #2a1630;animation:drop .6s var(--ease) forwards}
.sg-slice .d2{background:#ff7eb6;--dx:-26px;--dy:-30px}
.sg-slice .d1{--dx:24px;--dy:-34px}
.sg-slice .d3{background:#ffe066;--dx:-30px;--dy:10px}
.sg-slice .d4{background:#73e6f5;--dx:30px;--dy:8px}
@keyframes slice-l{to{transform:translate(-14px,6px) rotate(-24deg);opacity:0}}
@keyframes slice-r{to{transform:translate(14px,6px) rotate(24deg);opacity:0}}
@keyframes drop{from{transform:translate(0,0) scale(.4)}60%{opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}
.sg-slice.still i,.sg-slice.still b{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){.sg-halo,.sg-halo svg{animation:none}}