/* 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%;overscroll-behavior-x:none;   /* 觸控板往左右滑不要變成瀏覽器的上一頁／下一頁 */
  scroll-snap-type:y mandatory;scroll-behavior:smooth;
}
body{
  margin:0;overflow-x:clip;overscroll-behavior-x:none;
  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);
}
/* 網站的字不能被選取、複製（不會反藍）；脆排版工具那一段（排版、顏文字、字體、分隔線）跟所有輸入框照常可以選 */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#threads,input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

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-logo{width:30px;height:30px;flex:none;margin:-6px -2px -6px -4px}
.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}
/* 離開這頁、到翠排版尺的連結：跟上面的小按鍵分開，粉紅明體加底線跟箭頭，一看就知道會換到別的頁面 */
.go{
  display:inline-flex;align-items:baseline;gap:.45em;align-self:flex-start;padding:.35em 0;
  font:600 16px/1.3 var(--serif);letter-spacing:.06em;color:var(--pink);white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.32em;
}
.go span{display:inline-block;font-family:var(--sans);transition:transform .3s var(--ease)}
.go:is(:hover,:focus-visible) span{transform:translateX(.3em)}
.go:focus-visible{outline:1px dotted var(--pink);outline-offset:3px}

/* ---------- 第一頁：我是誰 ---------- */
.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 .go{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)}
/* 細框：一條很淡的細線，四個角各一個小直角；滑過去（或在裡面打字）時四個角像呼吸一樣慢慢亮起來、暗下去 */
@property --fk{syntax:"<length>";inherits:false;initial-value:10px}
.frame{position:relative;border:1px solid var(--line);background:transparent}
.frame::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;--fc:var(--pink);
  background:
    linear-gradient(var(--fc),var(--fc)) 0 0 / var(--fk) 1.5px, linear-gradient(var(--fc),var(--fc)) 0 0 / 1.5px var(--fk),
    linear-gradient(var(--fc),var(--fc)) 100% 0 / var(--fk) 1.5px, linear-gradient(var(--fc),var(--fc)) 100% 0 / 1.5px var(--fk),
    linear-gradient(var(--fc),var(--fc)) 0 100% / var(--fk) 1.5px, linear-gradient(var(--fc),var(--fc)) 0 100% / 1.5px var(--fk),
    linear-gradient(var(--fc),var(--fc)) 100% 100% / var(--fk) 1.5px, linear-gradient(var(--fc),var(--fc)) 100% 100% / 1.5px var(--fk);
  background-repeat:no-repeat;opacity:.4;transition:opacity .4s var(--ease);
}
.frame:focus-within::before{animation:breathe 2.4s ease-in-out infinite}
@media (hover:hover){.frame:hover::before{animation:breathe 2.4s ease-in-out infinite}}
@keyframes breathe{
  0%,100%{opacity:.45;--fk:10px;filter:none}
  50%{opacity:1;--fk:16px;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--pink) 75%,transparent))}
}
.r-edit{display:flex;flex-direction:column;min-height:0}
.ruler textarea{
  flex:1 1 auto;width:100%;min-height:0;resize:none;padding:18px 22px;border:0;border-radius:0;
  background:transparent;color:var(--ink);font:400 17px/1.8 var(--sans);
}
.ruler textarea:focus{outline:none}
.r-hint{margin:0;padding:0 16px 10px;text-align:right;font-size:12px;letter-spacing:.06em;color:var(--muted)}
@media (hover:none){.r-hint .kb{display:none}}
.r-preview{padding:20px 24px 24px;border-radius:22px;background:var(--card);overflow:auto;box-shadow:0 18px 50px oklch(26% 0.045 335 / .08)}
.r-out{--rfs:15px;margin-top:10px;width:var(--rw,315px);max-width:none;white-space:pre-wrap;word-break:break-all;font:400 var(--rfs)/1.7 -apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;min-height:3em}
.r-tools{display:flex;flex-wrap:wrap;gap:0 20px;align-items:center;padding:4px 14px 4px 16px;border-bottom:1px solid var(--line)}
.r-tools .chip{min-height:38px;font-size:14px}
.r-tools #r-copy{margin-left:auto}
.r-sep{width:1px;height:14px;background:var(--line)}
/* 排版預覽的小面板（換臉、換手勢、挑分隔線）：跟編輯框同一種細框 */
.r-pop{
  position:fixed;z-index:60;width:min(440px,calc(100vw - 24px));max-height:min(440px,70svh);display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px oklch(26% 0.045 335 / .14);
}
.r-pop[hidden]{display:none}
.r-pop::before{opacity:.9}
.r-pop.sheet{left:12px;right:12px;bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom));width:auto}
.p-head{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;padding:8px 10px 6px 16px;border-bottom:1px solid var(--line)}
.p-head b{margin-right:auto;font:400 18px/1.4 "PingFang TC","Microsoft JhengHei","Segoe UI Symbol",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.p-head .chip{min-height:34px;font-size:13px}
.p-head .chip[aria-pressed="false"]{color:var(--muted)}
.p-tabs{display:flex;gap:0 16px;overflow-x:auto;scrollbar-width:none;padding:2px 12px;border-bottom:1px solid var(--line)}
.p-tabs .chip{flex:none;min-height:34px;font-size:13px}
.p-tabs .chip[aria-pressed="false"]{color:var(--muted)}
.p-body{overflow-y:auto;overscroll-behavior:contain;padding:6px 10px 12px}
.p-label{margin:10px 6px 4px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:2px}
.p-chip{
  position:relative;padding:9px 6px;border:0;background:none;color:var(--ink);cursor:pointer;
  font:400 15px/1.3 "PingFang TC","Microsoft JhengHei","Segoe UI Symbol",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s,color .2s;
}
.p-chip[aria-pressed="true"]{color:var(--pink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pink) 55%,transparent)}
.p-chip:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--pink)}
@media (hover:hover){.p-chip:hover{box-shadow:inset 0 0 0 1px var(--line);color:var(--pink)}}
.p-lines{display:flex;flex-direction:column;gap:2px}
.p-lines .p-chip{text-align:center;font-size:16px;padding:11px 8px;cursor:copy}
.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-stage{justify-content:flex-start;gap:clamp(24px,3vw,56px)}
.kao-tools{display:flex;flex-direction:column;flex:none}   /* 換臉、換手勢、複製直的一排放在大顏文字右邊；小按鍵本身左右各凸出 .8em，字的邊剛好對齊 */
.kao-tools .chip{min-height:34px}
.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}   /* 換分類時不要被瀏覽器自動捲到別的地方 */
.kao-list.fits,.lines-list.fits{overscroll-behavior-y:auto}   /* 放得下就不攔上下滑（main.js fitLists） */
/* 顏文字、分隔線的字型：HTML 標了 lang="und"，字型從蘋方開始。不要放 -apple-system／BlinkMacSystemFont／system-ui：
   Chrome 會拿 SF 字型畫，疊很多附加符號的會變成一條條黑色橫線；Safari 兩種都正常 */
.kao-list .cat-group button,.lines-list .cat-group button,.kao-stage .kao-now{font-family:"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{font-size:13px;min-height:34px;order:0}
  .side-head .go{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"] .r-edit{display:none}
  .ruler textarea{min-height:min(40svh,320px)}
  .r-tools{gap:0 14px;padding:2px 10px}
  .r-sep{display:none}
  #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-hint{padding:0 12px 8px}
  .r-preview{padding:14px 14px 16px}
  .kao-now{font-size:28px;flex:0 1 auto;white-space:normal;overflow-wrap:anywhere}   /* 手機上旁邊還有三個小按鍵：長的顏文字（帶桌子、音符）換行，不要被切成 … */
  .kao-tools .chip{min-height:30px;font-size:14px}
  .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)}

/* ---------- 滑到能點、能選的東西上：不反色，改成從中間往兩邊展開（跟小按鍵的 [ ] 同一個動法） ----------
   文字（問答、目錄、選單、頁尾連結）：字下面一條細線從中間畫出來；打開的問答、現在這一頁的選單項目，線一直留著。
   方塊（顏文字、分隔線、字體）：淡粉色從中間往左右鋪開；選中的顏文字整塊鋪滿、字變粉紅。 */
.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"]{color:var(--pink)}   /* 選中的不鋪底，四周潮點框整圈變深（main.js tideFrame） */
.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}
  .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{outline:1px dotted var(--pink);outline-offset:-4px}   /* 鍵盤移到的那格：潮點框整圈變深，再加一圈很淡的點線，清單只有一格（沒有內框線）時也看得到 */

/* ---------- 換頁的方格：畫面上隨機挖開一格一格的窗，看到底下第一頁的影片（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){
  .panel:not(.intro){grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;row-gap:clamp(18px,3svh,36px);padding-top:calc(84px + env(safe-area-inset-top));padding-bottom:110px}
  .panel:not(.intro) .panel-side{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px clamp(28px,3vw,56px)}
  .panel:not(.intro) .note{max-width:26em;margin:0 0 .3em}
  .panel:not(.intro) .side-head .go{margin:0 0 .3em auto}   /* 到翠排版尺的連結放在這一格的最右邊 */
  .panel:not(.intro) .type-input{flex:0 1 22em;margin-bottom:.2em}
  .ruler{height:100%;grid-template-columns:minmax(0,1fr) max-content;gap:clamp(20px,2.4vw,40px)}
  .r-out{--rfs:18px}
  .faq .panel-main{align-self:center;justify-self:center;width:min(820px,100%)}   /* 問答放在畫面正中間 */
  .kao{height:100%;min-height:0}
  /* 顏文字：分類一整排橫跨上面，下面是大顏文字（三個小按鍵直排在它右邊），再下面是其餘的顏文字，都吃滿整個寬度 */
  .kao .cat-tabs{flex-wrap:nowrap;justify-content:space-between;gap:0 18px;padding:0 .8em;margin:0 -.8em;overflow-x:auto;scrollbar-width:none}   /* 前後各留 .8em 給 [ ]，字的邊還是跟標題對齊；窄一點的螢幕放不下就左右捲 */
  .kao .cat-tabs::-webkit-scrollbar{display:none}
  .kao .cat-tabs .chip{flex:none;font-size:clamp(12px,.94vw,14px)}
  .kao-list{flex:0 1 auto;min-height:0}   /* 高度跟著格子走，最多到剩下的空間；格子下面的空白不算清單，上下滑就是換頁 */
}

/* ---------- 桌機：右側目錄、底部分頁列收起來 ---------- */
@media (min-width:1024px){
  .tabbar{display:none}
  :root{--tab-h:0px}
  .toast{bottom:32px}
  .page{padding-bottom:56px}
  .page.threads{padding-bottom:0}   /* 橫向片的舞台是 sticky：底部留白會讓最後一格往上偏 */
  .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}
  .frame:hover::before,.frame:focus-within::before{animation:none;opacity:1}
  .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,.go 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}}

/* ---------- 意見回饋：站內的一張卡片，浮在模糊的頁面上（版面參考 Think Big Studio 的聯絡頁：小麵包屑、大標、兩行副標、細線分段） ---------- */
.fb{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
  background:color-mix(in srgb,var(--bg) 40%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  opacity:0;transition:opacity .28s var(--ease);
}
.fb[hidden]{display:none}
.fb.on{opacity:1}
html.fb-open{overflow:hidden}
.fb-card{
  width:min(920px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--bg);
  box-shadow:0 40px 120px oklch(26% 0.045 335 / .18);transform:translateY(14px);transition:transform .35s var(--ease);
}
.fb.on .fb-card{transform:none}
.fb-card::before{opacity:.85}
.fb-bar{display:flex;align-items:center;gap:16px;padding:10px 14px 10px clamp(18px,4vw,56px);border-bottom:1px solid var(--line)}
.fb-crumb{margin-right:auto;font:500 12px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.16em;color:var(--muted)}
.fb-close{font-size:13px}
.fb-scroll{overflow-y:auto;overscroll-behavior:contain;padding:clamp(28px,5svh,56px) clamp(18px,4vw,56px) clamp(28px,5svh,56px)}
.fb-eyebrow{margin:0 0 10px;font:500 11px/1.4 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.2em;color:var(--muted)}
.fb-title{margin:0;font:900 clamp(48px,7vw,92px)/1 var(--sans);letter-spacing:-.03em;color:var(--ink);outline:none}
.fb-sub{margin:.7em 0 0;font:600 clamp(24px,3vw,38px)/1.25 var(--serif);letter-spacing:.02em}
.fb-lede{margin:1.2em 0 0;max-width:34em;font-size:15px;line-height:1.8;color:var(--muted)}
.fb hr{border:0;border-top:1px solid var(--line);margin:clamp(24px,4svh,40px) 0}
.fb-h{margin:0 0 18px;font:600 clamp(20px,2vw,26px)/1.3 var(--serif);letter-spacing:.03em}
.fb-direct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px}
.fb-who{margin:0 0 6px;font:500 11px/1.4 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.14em;color:var(--muted)}
.fb-direct a{font:500 clamp(18px,1.8vw,22px)/1.4 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
@media (hover:hover){.fb-direct a:hover{color:var(--pink);text-decoration-color:var(--pink)}}
.fb-form{display:flex;flex-direction:column;gap:22px}
.fb-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fb-field{display:flex;flex-direction:column;gap:8px}
.fb-field>span:first-child,.fb-set legend{font-weight:600;font-size:14px;letter-spacing:.04em}
.fb small{font-weight:400;font-size:12px;color:var(--muted)}
.fb-in{display:block}
.fb-field input,.fb-field textarea{
  display:block;width:100%;padding:13px 16px;border:0;background:transparent;color:var(--ink);font:400 16px/1.6 var(--sans);border-radius:0;resize:vertical;
}
.fb-field input::placeholder,.fb-field textarea::placeholder{color:var(--muted);opacity:.8}
.fb-field input:focus,.fb-field textarea:focus{outline:none}
.fb-set{border:0;margin:0;padding:0;min-width:0}
.fb-set legend{padding:0;margin-bottom:10px}
.fb-set[hidden]{display:none}
.fb-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.fb-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-size:15px;transition:color .2s,background-color .2s}
.fb-opt input{appearance:none;-webkit-appearance:none;flex:none;width:14px;height:14px;margin:0;border:1px solid var(--line-strong);display:grid;place-items:center;transition:border-color .2s}
.fb-opt input[type="radio"]{border-radius:50%}
.fb-opt input:checked{border-color:var(--pink)}
.fb-opt input:checked::after{content:"";width:6px;height:6px;background:var(--pink)}
.fb-opt input[type="radio"]:checked::after{border-radius:50%}
.fb-opt:has(input:checked){color:var(--pink);background:color-mix(in srgb,var(--pink) 6%,transparent)}
.fb-opt:has(input:checked)::before{opacity:1}
.fb-opt:has(input:focus-visible)::before{animation:breathe 2.4s ease-in-out infinite}
.fb-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fb-send{
  padding:15px 18px;text-align:left;font:600 16px/1.2 var(--sans);letter-spacing:.06em;color:var(--ink);cursor:pointer;
  transition:color .2s,background-color .2s;
}
.fb-send::before{opacity:.9}
@media (hover:hover){.fb-send:hover{color:var(--pink)}}
.fb-send:focus-visible{outline:none}
.fb-send:focus-visible::before{animation:breathe 2.4s ease-in-out infinite}
.fb-send:disabled{opacity:.6;cursor:progress}
.fb-status{margin:-8px 0 0;min-height:1.5em;font-size:14px;color:var(--muted)}
.fb-status.bad{color:var(--pink)}
.fb-frame{display:none}
@media (max-width:719px){
  .fb{padding:0;align-items:stretch}
  .fb-card{width:100%;height:100%}
  .fb-row,.fb-direct{grid-template-columns:minmax(0,1fr)}
  .fb-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.fb,.fb-card{transition:none}.fb-opt:has(input:focus-visible)::before,.fb-send:focus-visible::before{animation:none;opacity:1}}

/* ── 左上角的葡萄柚星球 logo：星球落下 → 撞地、星環迸成星星 → 裂開褪皮 → 剖半＋一片切片停住（logo.js 決定什麼時候播） ── */
.gf{--T:2.6s}
.gf{overflow:visible}
.gf *{transform-box:view-box}
.gf .face{transform-box:fill-box;transform-origin:50% 50%}
.gf .wedge{transform-origin:70px 80px;filter:drop-shadow(-1.5px -.5px 1.6px rgba(110,40,30,.35))}
.gf .shadow{opacity:.18;transform-origin:44px 90px}
.gf .wshadow{opacity:.16;transform-origin:70px 93px}
.gf .squash{transform-origin:50px 88px}
/* 靜止＝最後一格：剖半的葡萄柚＋前面一片 1/6 */
.gf .sphere,.gf .st,.gf .skin,.gf .wskin,.gf .dust{opacity:0}
.gf.anim .bounce{animation:bounce var(--T) both}
.gf.anim .squash{animation:squash var(--T) both}
.gf.anim .shadow{animation:shadow var(--T) both}
.gf.anim .wshadow{animation:wshadow var(--T) both}
.gf.anim .sphere{opacity:1}
.gf.anim .sphere .planet{animation:sphere var(--T) both}
.gf.anim .halfL{animation:halfL var(--T) both}
.gf.anim .face{animation:face var(--T) both}
.gf.anim .wedge{animation:wedge var(--T) both}
.gf.anim .skin,.gf.anim .wskin{animation:skin var(--T) both}
.gf.anim .dust{animation:dust var(--T) both}
.gf.anim .st{animation:star var(--T) both}
@keyframes bounce{
 0%{transform:translateY(-62px);animation-timing-function:cubic-bezier(.45,0,.9,.6)}
 24%{transform:translateY(0);animation-timing-function:cubic-bezier(.1,.4,.55,1)}
 40%{transform:translateY(-22px);animation-timing-function:cubic-bezier(.45,0,.9,.6)}
 54%{transform:translateY(0);animation-timing-function:cubic-bezier(.1,.4,.55,1)}
 60%{transform:translateY(-4px);animation-timing-function:cubic-bezier(.45,0,.9,.6)}
 65%,100%{transform:translateY(0)}}
@keyframes squash{
 0%{transform:scale(1,1)}21%{transform:scale(.94,1.07)}24%{transform:scale(1.16,.8)}28%{transform:scale(.95,1.06)}33%{transform:scale(1,1)}
 52%{transform:scale(.97,1.03)}54%{transform:scale(1.06,.93)}58%,100%{transform:scale(1,1)}}
@keyframes shadow{
 0%{transform:scale(.35);opacity:.05;animation-timing-function:cubic-bezier(.45,0,.9,.6)}
 24%{transform:scale(1.1);opacity:.25;animation-timing-function:cubic-bezier(.1,.4,.55,1)}
 40%{transform:scale(.72);opacity:.12;animation-timing-function:cubic-bezier(.45,0,.9,.6)}
 54%{transform:scale(1.04);opacity:.22}
 60%{transform:scale(.95);opacity:.2}
 65%,100%{transform:scale(1);opacity:.18}}
@keyframes sphere{0%,25.9%{opacity:1}26%,100%{opacity:0}}
.gf .ringwrap>g{transform-origin:50px 54px}
.gf.anim .ringB,.gf.anim .ringF{animation:ring var(--T) both}
@keyframes ring{0%,23%{opacity:1;transform:scale(1)}24%{opacity:1;transform:scale(1.04)}30%,100%{opacity:0;transform:scale(1.45)}}
/* 星環比星球晚一點消失：星球 26% 換成剖半，星環繼續迸散到 30% */
@keyframes halfL{0%,25.9%{opacity:0}26%,100%{opacity:1}}
/* 切面轉過來：一開始側對著看（很窄），轉正 */
@keyframes face{0%,26%{transform:scaleX(.05);animation-timing-function:cubic-bezier(.2,.8,.3,1)}46%,100%{transform:scaleX(1)}}
@keyframes skin{0%,27%{opacity:1;animation-timing-function:cubic-bezier(.6,0,.4,1)}33%,100%{opacity:0}}
@keyframes dust{0%,28%{opacity:0;transform:translate(0,0)}34%{opacity:1}52%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
/* 1/6 切片：撞地時從右邊裂出去，往上彈、轉、落在剖半那顆前面，小彈一下停住 */
@keyframes wedge{
 0%,25.9%{opacity:0;transform:translate(6px,-18px) rotate(-30deg) scale(.9)}
 26%{opacity:1;transform:translate(6px,-18px) rotate(-30deg) scale(.9);animation-timing-function:cubic-bezier(.1,.5,.5,1)}
 38%{transform:translate(22px,-36px) rotate(-70deg);animation-timing-function:cubic-bezier(.5,0,.9,.55)}
 52%{transform:translate(0,0) rotate(-8deg);animation-timing-function:cubic-bezier(.1,.4,.55,1)}
 57%{transform:translate(1px,-4px) rotate(3deg);animation-timing-function:cubic-bezier(.45,0,.9,.6)}
 62%,100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes wshadow{0%,30%{opacity:0;transform:scale(.4)}52%{opacity:.2;transform:scale(1.05)}57%{opacity:.14;transform:scale(.9)}62%,100%{opacity:.16;transform:scale(1)}}
@keyframes star{
 0%,23.9%{opacity:0;transform:translate(50px,88px) scale(0)}
 24%{opacity:1;transform:translate(50px,88px) scale(calc(var(--s) * .4));animation-timing-function:cubic-bezier(.15,.6,.45,1)}
 36%{opacity:1;transform:translate(calc(50px + var(--dx)),calc(88px + var(--dy))) scale(var(--s)) rotate(45deg);animation-timing-function:cubic-bezier(.55,0,.9,.55)}
 52%{opacity:0;transform:translate(calc(50px + var(--dx) * 1.5),96px) scale(calc(var(--s) * .5)) rotate(90deg)}
 100%{opacity:0;transform:translate(calc(50px + var(--dx) * 1.5),96px) scale(0)}}
@media (prefers-reduced-motion:reduce){.gf.anim *{animation:none!important}}

/* ---------- 最後一頁：跟我聯絡 ---------- */
.contact{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;padding-top:84px;padding-bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom))}
.contact-nav{width:100%;display:flex;justify-content:space-between;gap:12px}
.contact-nav a{display:grid;justify-items:center;gap:5px;color:var(--ink);text-decoration:none;font:500 clamp(13px,1.2vw,16px)/1.4 var(--sans)}
.contact-nav a::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--pink);transition:transform .35s cubic-bezier(.34,1.6,.64,1)}
.contact-nav a:hover::after,.contact-nav a:focus-visible::after{transform:scale(1.9)}
.contact-nav em{font:400 11px/1 var(--latin);letter-spacing:.18em;color:var(--muted);font-style:normal}
.contact-h{margin:clamp(4px,1.4svh,18px) 0 0;line-height:.9}
.contact-h .ft{--fs:clamp(56px,min(15.5vw,23svh),300px);font:800 var(--fs)/.9 var(--latin);letter-spacing:-.02em}
.contact-h .ft canvas{left:-.2em;top:-.32em;width:calc(100% + .4em);height:calc(100% + .64em)}
.contact .ask{margin:clamp(4px,1.2svh,14px) 0 0;text-align:center;font:900 clamp(17px,2vw,24px)/1.4 var(--serif);letter-spacing:.03em}
.contact .ask small{display:block;font:400 clamp(13px,1.1vw,15px)/1.6 var(--sans);color:var(--muted);letter-spacing:.02em}
.pit{position:relative;align-self:stretch;justify-self:stretch;margin:0 calc(var(--gut) * -1);min-height:180px}
.contact .foot{justify-self:stretch;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:0;padding-top:8px;font-size:12.5px;position:relative;z-index:2}
.contact .foot p+p{margin-top:0}
@media (max-width:719px){
  .contact{padding-top:72px}
  .contact-nav em{display:none}
  .contact-h .ft{--fs:clamp(44px,17vw,120px)}
  .contact .foot{flex-direction:column;align-items:flex-start;font-size:12px}
}

/* 貼紙：白色模切邊、一點光澤、邊上一圈小字；各 App 自己的顏色跟 logo。位置跟角度交給物理（main.js contactPit） */
.sticker{position:absolute;left:0;top:0;width:var(--sz,160px);height:var(--sz,160px);display:block;color:var(--fg);text-decoration:none;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab;will-change:transform;visibility:hidden}
.sticker.in{visibility:visible}
.sticker:active{cursor:grabbing}
.st-body{position:absolute;inset:0;display:grid;place-items:center;text-align:center;transform-origin:50% 62%}
.st-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 calc(var(--sz,160px) * .03) calc(var(--sz,160px) * .035) rgb(60 24 40 / .3))}
.st-bg{fill:var(--c);stroke:#fff;stroke-width:4.6;stroke-linejoin:round;paint-order:stroke}
.st-gloss{fill:#fff;opacity:.22}
.st-ring{font:700 6px/1 var(--latin);letter-spacing:.5px;fill:currentColor;opacity:.72;text-transform:uppercase}
.st-in{position:relative;display:grid;justify-items:center;gap:calc(var(--sz,160px) * .012);padding:0 17%;pointer-events:none}
.st-logo{width:calc(var(--sz,160px) * .21);height:calc(var(--sz,160px) * .21);display:grid;place-items:center;margin-bottom:calc(var(--sz,160px) * .015)}
.st-logo svg{width:100%;height:100%;fill:currentColor}
.st-logo img{width:100%;height:100%;border-radius:22%;display:block}
.st-in b{font:900 calc(var(--sz,160px) * .13)/1.15 var(--serif);letter-spacing:.02em}
.st-in small{font:500 calc(var(--sz,160px) * .056)/1.35 var(--sans);opacity:.92;white-space:nowrap}
.st-zi{position:relative;width:100%;height:100%;border-radius:50%;background:#e2734b;color:#fff8ee;display:grid;place-items:center;font:900 calc(var(--sz,160px) * .11)/1 var(--serif)}
.st-zi::before,.st-zi::after{content:"";position:absolute;bottom:22%;width:22%;height:13%;border-radius:50%;background:#ffb3a6;opacity:.85}
.st-zi::before{left:6%}.st-zi::after{right:6%}
.sticker:focus-visible{outline:none}
.sticker:focus-visible .st-bg{stroke:var(--ink)}
.s-forms{--c:#7248B9;--fg:#fff}
.s-threads{--c:#000;--fg:#fff}
.s-discord{--c:#5865F2;--fg:#fff}
.s-katsuji{--c:#3f5b43;--fg:#f7f1e6}
.s-ruler{--c:#211c1f;--fg:#fbf3ee}
.s-coffee{--c:#FFDD00;--fg:#0d0c22}
.s-ruler .st-in b{font-size:calc(var(--sz,160px) * .102)}

/* ---------- 角色段（characters.js）：一段很高的捲動軌道，舞台釘在畫面上，鏡頭在一大片畫布上走 ---------- */
.cast-track{position:relative;height:900vh}                    /* 實際高度由 characters.js 照停靠點算 */
.ct-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.ct-plane{position:absolute;left:0;top:0;will-change:transform}
.ct-scene{position:absolute;display:block}
.ct-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.ct-snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none}   /* 每一行的開頭、結尾：捲再快也先停在這裡 */
.ct-line{position:absolute;margin:0;white-space:nowrap}
.ct-line .ft{font:900 var(--gfs,40vh)/1 var(--serif);letter-spacing:-.01em}
.ct-line .ft canvas{top:-.32em;height:calc(100% + .64em)}       /* 被戳的時候字會浮起來，畫布上下多留一點 */
/* 手機直的螢幕：四行放同一頁的巨字滑過（characters.js buildMq）。字用實色，不填影片（帶子一直在跑，填影片會閃） */
.cast-track.mq .ct-line{overflow:hidden}
.mq-in{position:absolute;left:0;top:0;height:100%;will-change:transform}
.mq-in>.ft,.mq-in>.mq-c{position:absolute;top:0;font:900 1em/1.18 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.cast-track.mq .ft,.mq-c{color:var(--ink)!important}
.cast-track.mq .ct-line:nth-child(odd of .ct-line) .ft,.cast-track.mq .ct-line:nth-child(odd of .ct-line) .mq-c{color:var(--ink)!important}
.cast-track.mq .ct-line:nth-child(even of .ct-line) .ft,.cast-track.mq .ct-line:nth-child(even of .ct-line) .mq-c{color:var(--pink)!important}
.cast-track.mq .ft canvas{display:none}

/* ---------- 走進樹林：網站主視覺的大字＋樹林，帶去 /characters/ ---------- */
.walkin{justify-content:center;gap:clamp(14px,2.6vh,28px);padding-left:max(var(--gut),8vw)}
.walkin-h{display:grid;gap:.02em;margin:0;position:relative;z-index:1;--fs:clamp(48px,min(9.4vw,15vh),156px)}
.walkin-h .ft{justify-self:start;font:900 var(--fs)/1.06 var(--serif);letter-spacing:.02em}
.walkin-h .ft canvas{top:-.3em;height:calc(100% + .6em)}
.walkin-p{position:relative;z-index:1;margin:0;max-width:28em;color:var(--muted);font-size:clamp(15px,1.2vw,18px);line-height:1.85}
.go-in{all:unset;position:relative;z-index:1;align-self:flex-start;cursor:pointer;font:600 clamp(15px,1.2vw,18px)/1 var(--sans);letter-spacing:.14em;color:var(--pink);padding:12px 2px}
.go-in::before,.go-in::after{position:absolute;top:50%;translate:0 -50%;opacity:0;transition:opacity .25s,left .3s var(--ease),right .3s var(--ease)}
.go-in::before{content:"[";left:40%}.go-in::after{content:"]";right:40%}
.go-in:hover::before,.go-in:focus-visible::before{opacity:1;left:-12px}.go-in:hover::after,.go-in:focus-visible::after{opacity:1;right:-12px}
@media (min-width:900px){
  .walkin-h{grid-template-columns:auto auto;justify-content:start;--fs:clamp(64px,min(12.2vw,22vh),210px)}   /* 電腦：「你會在樹林裡」一行、「遇見誰？」一行，吃滿寬度 */
  .walkin-h .ft:nth-child(3){grid-column:1 / -1}
}

/* ---------- 手機版的載入動畫（loader.js）。index.html 開頭的小腳本 9 秒後一定拿掉，loader.js 沒載到也不會擋住網站 ---------- */
.loader{display:none}
.is-loading{overflow:hidden}
.is-loading .loader,.loader.out{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);color:var(--ink)}
.loader canvas{position:absolute;inset:0;width:100%;height:100%}
.ld-num{grid-area:1/1;position:relative;display:grid;justify-items:center;font:900 30px/1.1 var(--serif);font-variant-numeric:tabular-nums;transition:opacity .45s,transform .45s}
.ld-num small{font:italic 400 13px var(--latin);color:var(--muted)}
.ld-num.gone{opacity:0;transform:scale(.9)}
.ld-logo{grid-area:1/1;display:grid;justify-items:center;gap:8px;opacity:0;transform:translateY(-4%)}
.ld-logo .gf{width:128px;height:128px}
.ld-logo i{font:italic 600 19px var(--latin);opacity:0;transition:opacity .6s 1.2s}
.loader.logo .ld-logo{opacity:1}
.loader.logo .ld-logo i{opacity:1}
.loader.still .ld-logo i{transition:none}
.loader.out{animation:ld-out .85s cubic-bezier(.6,0,.2,1) forwards;pointer-events:none}
.loader.still .ld-num{display:none}
@keyframes ld-out{to{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){.loader.out{animation:ld-fade .4s forwards}@keyframes ld-fade{to{opacity:0}}}
@media (min-width:720px){.loader{display:none!important}}

/* ---------- 右下角的咖啡（bmc.js）。手機在底部分頁列上面 ---------- */
.bmc-float{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + var(--tab-h) + env(safe-area-inset-bottom,0px));z-index:18;display:flex;align-items:center;gap:8px;text-decoration:none;color:#0d0c22;
  opacity:0;transform:translateY(16px) scale(.6);pointer-events:none;transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.bmc-float.show{opacity:1;transform:none;pointer-events:auto}
.bmc-dot{width:52px;height:52px;flex:none;border-radius:50%;background:#FFDD00;display:grid;place-items:center;box-shadow:0 0 0 3px #fff,0 8px 20px -6px oklch(26% 0.045 335 / .45)}
.bmc-dot svg{width:26px;height:26px;fill:#0d0c22}
.bmc-float:hover .bmc-dot,.bmc-float:focus-visible .bmc-dot{animation:bmc-wig .5s ease-out}
@keyframes bmc-wig{30%{transform:rotate(-10deg) scale(1.06)}60%{transform:rotate(7deg) scale(1.06)}}
.bmc-tip{font:500 13px/1 var(--sans);white-space:nowrap;background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:999px;padding:8px 12px;
  opacity:0;transform:translateX(10px);transition:opacity .3s,transform .3s;pointer-events:none}
.bmc-float.tip .bmc-tip,.bmc-float:hover .bmc-tip,.bmc-float:focus-visible .bmc-tip{opacity:1;transform:none}
@media (max-width:1023px){.bmc-float{right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(68px + var(--tab-h) + env(safe-area-inset-bottom,0px))}   /* 再往上一點，讓開脆排版工具底下那排分頁 */.bmc-dot{width:46px;height:46px}.bmc-dot svg{width:23px;height:23px}}
@media (prefers-reduced-motion:reduce){.bmc-float{transition:opacity .2s}.bmc-float:hover .bmc-dot{animation:none}}