/* QSong 形象站。概念：整頁是一張書桌，首屏是一份包好的 3D 手帳禮物；往下是散在桌上的索引卡、歌詞本、郵票、插頁與一封信。三款包裝改變全頁配色與標題字。刻意只做淺色一種世界。 */
:root{
  color-scheme: light;
  --desk:#EED9D4; --desk-2:#E4C8C2;
  --ink:#45302B; --muted:#674F49;
  --paper:#FFFAF3; --paper-2:#F4EADF;
  --cloth:#B8606C; --cloth-2:#9E4E5A;
  --gold:#D3AC67; --gold-2:#B88F4C; --foil:#F4DDB0;
  --rose:#A04F5B; --rose-hover:#8C4350;
  --wrap-bg:#F7E4E0; --wrap-dot:rgba(211,172,103,.6);
  --tape:rgba(242,184,192,.8); --tape-2:rgba(238,194,155,.82);
  --stamp:#A04F5B;
  --display:"LXGW WenKai TC","Kaiti TC","BiauKai","DFKai-SB",serif;
  --hand:"LXGW WenKai TC","Kaiti TC","BiauKai","DFKai-SB",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1rem,.97rem + .2vw,1.125rem);
  --step-lead:clamp(1.125rem,1.05rem + .5vw,1.375rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
body[data-wrap="apricot"]{
  --desk:#F1E3D4; --desk-2:#E5D0BB; --ink:#4A3426; --muted:#7A6150;
  --cloth:#C4865C; --cloth-2:#A06A44; --gold:#D98C8F; --gold-2:#BC6F73; --foil:#FFF1DC;
  --rose:#8A5534; --rose-hover:#74472B; --wrap-bg:#D7B38A; --wrap-dot:rgba(255,250,240,.75);
  --tape:rgba(217,140,143,.62); --tape-2:rgba(196,134,92,.5); --stamp:#8A5534;
}
body[data-wrap="berry"]{
  --desk:#E8D6D5; --desk-2:#D9C1C0; --ink:#3B1C24; --muted:#6E5158;
  --cloth:#70223A; --cloth-2:#561629; --gold:#D8B27C; --gold-2:#B58C55; --foil:#EBCB92;
  --rose:#7A2338; --rose-hover:#621B2D; --wrap-bg:#4A1828; --wrap-dot:rgba(216,178,124,.55);
  --tape:rgba(216,178,124,.6); --tape-2:rgba(201,140,150,.6); --stamp:#7A2338;
  --display:"Noto Serif TC","Songti TC","PMingLiU",serif;
}
@property --push{syntax:'<number>';inherits:false;initial-value:1}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--sans);font-size:var(--step-body);line-height:1.6;color:var(--ink);background:var(--desk);overflow-x:hidden;transition:background-color .6s var(--ease),color .6s}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:6px}
h1,h2,h3,p,figure{margin:0}
h1,h2{text-wrap:balance}
.note{font-size:var(--step-small);padding-block:8px;background:var(--ink);color:var(--paper)}
main{overflow-x:clip}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px}
.skip:focus{top:12px}

.bar{display:flex;align-items:center;gap:24px;padding-block:18px}
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.375rem;color:inherit;text-decoration:none}
.qmark{width:38px;height:38px}
.qmark circle,.qmark path.s{fill:none;stroke:var(--cloth-2);stroke-width:5;stroke-linecap:round;stroke-dasharray:120;animation:draw 1.6s .2s var(--ease) both}
.qmark .flag{fill:var(--cloth-2)}
.bar nav{display:flex;gap:22px;margin-left:auto}
.bar nav a{color:inherit;text-decoration:none;font-weight:500}
.bar nav a:hover{text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:999px;border:0;font-weight:700;text-decoration:none;transition:transform .18s var(--ease),background-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-rose{background:var(--rose);color:#fff}
.btn-rose:hover{background:var(--rose-hover)}
.btn-soft{background:var(--paper);color:var(--ink)}

/* ---------- 首屏 ---------- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:center;padding-block:8px 32px}
.copy{display:flex;flex-direction:column;gap:22px;max-width:540px}
.copy h1{font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,1rem + 3.5vw,4.6rem);line-height:1.14}
.copy .lead{font-size:var(--step-lead);line-height:1.6}
.fill{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fill label{display:flex;flex-direction:column;gap:6px;font-size:var(--step-small);font-weight:700;color:var(--muted)}
.fill input,.fill select{min-height:48px;padding:0 14px;border-radius:12px;border:2px solid var(--desk-2);background:var(--paper);font-weight:500;color:var(--ink);width:100%;min-width:0}
.fill input:focus,.fill select:focus{border-color:var(--rose);outline:none}
.wraps{grid-column:1 / -1;border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.wraps legend{font-size:var(--step-small);font-weight:700;color:var(--muted);padding:0;margin-bottom:6px}
.wraps-row{display:flex;flex-wrap:wrap;gap:8px}
.wraps label{flex-direction:row;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 8px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:var(--step-body);font-weight:500;cursor:pointer;transition:transform .18s var(--ease),box-shadow .2s}
.wraps label:hover{transform:translateY(-2px)}
.wraps input{position:absolute;opacity:0;width:1px;height:1px}
.wraps .sw{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center}
.wraps .sw::after{content:"";width:12px;height:12px;border-radius:50%}
.sw.rose{background:#B8606C}.sw.rose::after{background:#D3AC67}
.sw.apricot{background:#C4865C}.sw.apricot::after{background:#D98C8F}
.sw.berry{background:#70223A}.sw.berry::after{background:#D8B27C}
.wraps label:has(input:checked){box-shadow:inset 0 0 0 3px var(--ink);font-weight:700}
.wraps label:has(input:focus-visible){outline:3px solid var(--rose);outline-offset:3px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.small{font-size:var(--step-small);color:var(--muted)}

/* ---------- 3D 場景 ---------- */
.scene{position:relative;container-type:inline-size;min-width:0;outline:none}
.stage{--P:min(44cqw,330px);--H:calc(var(--P) * 1.4);position:relative;height:calc(var(--H) + 170px);perspective:2000px;perspective-origin:50% 26%;touch-action:pan-y}
.glow{position:absolute;left:50%;top:44%;width:calc(var(--P) * 3);height:calc(var(--P) * 2.4);margin:calc(var(--P) * -1.2) 0 0 calc(var(--P) * -1.5);border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,214,.95),rgba(255,240,214,0));opacity:0;transition:opacity 1.6s var(--ease);pointer-events:none}
.stage.lit .glow{opacity:.9}
.desk-shadow{position:absolute;left:50%;top:50%;width:calc(var(--P) * 1.9);height:calc(var(--H) * .5);margin-left:calc(var(--P) * -.95);margin-top:calc(var(--H) * .18);border-radius:50%;background:rgba(70,32,36,.3);filter:blur(28px);transition:width 1s var(--ease),margin 1s var(--ease)}
.stage.closed .desk-shadow{width:calc(var(--P) * 1.15);margin-left:calc(var(--P) * -.58)}
.rig{position:absolute;left:50%;top:50%;width:calc(var(--P) * 2);height:var(--H);margin-left:calc(var(--P) * -1);margin-top:calc(var(--H) * -.56);transform-style:preserve-3d;transform:rotateX(var(--rx,20deg)) rotateY(var(--ry,0deg)) rotateZ(-2deg) scale(var(--push));transition:--push 1.4s var(--ease)}
.rig.pushed{--push:1.1}

/* 桌上小物：遠近模糊做出景深 */
.prop{position:absolute;pointer-events:none}
.p-pol{left:calc(var(--P) * -.1);top:calc(var(--H) * .56);width:calc(var(--P) * .5);background:#fff;padding:calc(var(--P) * .025) calc(var(--P) * .025) calc(var(--P) * .08);transform:translateZ(-70px) rotate(-16deg);filter:blur(1.4px);box-shadow:0 8px 20px rgba(60,30,30,.18)}
.p-pol img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.p-roll{left:calc(var(--P) * .05);top:calc(var(--H) * -.16);width:calc(var(--P) * .3);aspect-ratio:1;border-radius:50%;background:var(--tape);transform:translateZ(-90px);filter:blur(2px);display:grid;place-items:center}
.p-roll::after{content:"";width:46%;height:46%;border-radius:50%;background:var(--desk)}
.p-sprig{right:calc(var(--P) * -.22);top:calc(var(--H) * -.12);width:calc(var(--P) * .55);transform:translateZ(-110px) rotate(18deg);filter:blur(2.4px)}
.p-pen{right:calc(var(--P) * -.34);bottom:calc(var(--H) * -.17);width:calc(var(--P) * .95);height:calc(var(--P) * .065);border-radius:999px;background:var(--ink);transform:translateZ(90px) rotate(-24deg);filter:blur(2.6px)}
.p-pen::before{content:"";position:absolute;left:8%;top:-30%;width:24%;height:40%;border-radius:999px;background:var(--gold)}
.p-pen::after{content:"";position:absolute;right:-6%;top:22%;width:9%;height:56%;background:var(--gold-2);clip-path:polygon(0 0,100% 50%,0 100%)}

.float{position:absolute;inset:0;transform-style:preserve-3d;animation:float 6.5s ease-in-out infinite}
.book{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s var(--ease);transform:translateX(calc(var(--P) * -.5)) scale(1.08)}
.book.open{transform:none}
.backcover{position:absolute;left:50%;top:-1.2%;width:calc(var(--P) + 4px);height:102.4%;background:var(--cloth-2);border-radius:3px 12px 12px 3px;transform:translateZ(-9px);transition:background-color .6s}
.backcover-l{position:absolute;right:50%;top:-1.2%;width:calc(var(--P) + 4px);height:102.4%;background:var(--cloth-2);border-radius:12px 3px 3px 12px;transform:translateZ(-9px);opacity:0;transition:opacity .4s .5s,background-color .6s}
.book.open .backcover-l{opacity:1}
.edge{position:absolute;left:50%;top:1.2%;width:calc(var(--P) - 7px);height:97.6%;background:var(--paper-2);border-radius:2px 8px 8px 2px;transition:opacity .6s}
.edge.r1{transform:translateZ(-2px) translateX(2px)}
.edge.r2{transform:translateZ(-4px) translateX(4px);background:#EADDCF}
.edge.r3{transform:translateZ(-6px) translateX(5px)}
.edge.l{left:auto;right:50%;border-radius:8px 2px 2px 8px;opacity:0}
.edge.l1{transform:translateZ(-2px) translateX(-2px)}
.edge.l2{transform:translateZ(-4px) translateX(-4px);background:#EADDCF}
.edge.l3{transform:translateZ(-6px) translateX(-5px)}
.book[data-s="1"] .edge.l1,.book[data-s="2"] .edge.l1,.book[data-s="2"] .edge.l2,.book[data-s="3"] .edge.l{opacity:1}
.book[data-s="2"] .edge.r3,.book[data-s="3"] .edge.r3,.book[data-s="3"] .edge.r2{opacity:0}

.leaf{position:absolute;left:50%;top:1.2%;width:calc(var(--P) - 7px);height:97.6%;transform-style:preserve-3d;transform-origin:left center}
.leaf.cover{top:-1.2%;width:calc(var(--P) + 4px);height:102.4%}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:2px 9px 9px 2px;background:var(--paper)}
.face.back{transform:rotateY(180deg);border-radius:9px 2px 2px 9px}
.paper{background-color:var(--paper);background-image:radial-gradient(circle,rgba(69,48,43,.13) 1px,transparent 1.5px);background-size:calc(var(--P) * .055) calc(var(--P) * .055);background-position:center}
.face.front.paper::after,.face.back.paper::after{content:"";position:absolute;top:0;bottom:0;width:16%;pointer-events:none;z-index:4}
.face.front.paper::after{left:0;background:linear-gradient(90deg,rgba(69,40,38,.24),rgba(69,40,38,.06) 40%,rgba(69,40,38,0))}
.face.back.paper::after{right:0;background:linear-gradient(270deg,rgba(69,40,38,.24),rgba(69,40,38,.06) 40%,rgba(69,40,38,0))}
.shade,.sheen{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0}
.shade{background:#2c1418}
.sheen{background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,250,235,.55) 50%,rgba(255,255,255,0) 65%);background-size:300% 100%}
.turning .shade{animation:shade 1.3s ease-in-out}
.turning .sheen{animation:sheen 1.3s ease-in-out}
.under .shade{animation:under 1.3s ease-out}

/* 封面 */
.cover-front{background:var(--cloth);border-radius:3px 12px 12px 3px;color:var(--foil);display:flex;flex-direction:column;justify-content:flex-start;gap:calc(var(--P) * .02);padding:calc(var(--P) * .11) calc(var(--P) * .1);transition:background-color .6s}
.cover-front::before{content:"";position:absolute;inset:calc(var(--P) * .045);border-radius:6px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--foil) 40%,transparent)}
.cover-front .cf{position:relative;font-family:var(--hand);font-size:calc(var(--P) * .07)}
.cover-front .ct{position:relative;font-family:var(--display);font-weight:700;font-size:calc(var(--P) * .12);line-height:1.15;color:var(--foil);background:linear-gradient(105deg,var(--foil) 38%,#fffaf0 50%,var(--foil) 62%) 120% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.revealed .cover-front .ct{-webkit-text-fill-color:transparent;animation:foil 1.4s .2s var(--ease) both}
.cover-front .cq{position:absolute;right:calc(var(--P) * .1);bottom:calc(var(--P) * .12);width:calc(var(--P) * .26);height:calc(var(--P) * .26);opacity:.5}
.cover-front .cq circle,.cover-front .cq path{fill:none;stroke:var(--foil);stroke-width:5;stroke-linecap:round}
.cover-front .cbrand{position:relative;margin-top:auto;font-weight:700;font-size:calc(var(--P) * .05)}

/* 包裝紙（兩半，沿撕痕裂開） */
.wp{position:absolute;inset:-1.5% -1%;transform:translateZ(2px);background-color:var(--wrap-bg);background-image:radial-gradient(var(--wrap-dot) 16%,transparent 18%),radial-gradient(var(--wrap-dot) 16%,transparent 18%);background-size:calc(var(--P) * .13) calc(var(--P) * .13);background-position:0 0,calc(var(--P) * .065) calc(var(--P) * .065);transition:transform 1s var(--ease),opacity .7s,background-color .6s;filter:drop-shadow(0 2px 2px rgba(60,30,30,.18))}
.wp.l{clip-path:polygon(0 0,53% 0,47% 9%,55% 19%,46% 30%,54% 41%,45% 52%,53% 63%,46% 74%,54% 85%,48% 94%,51% 100%,0 100%)}
.wp.r{clip-path:polygon(53% 0,100% 0,100% 100%,51% 100%,48% 94%,54% 85%,46% 74%,53% 63%,45% 52%,54% 41%,46% 30%,55% 19%,47% 9%)}
.rib-v,.rib-h{position:absolute;background:var(--gold);transform:translateZ(3px);transition:transform .8s var(--ease),opacity .6s,background-color .6s}
.rib-v{top:-3%;bottom:-3%;left:64%;width:10%}
.rib-h{left:-3%;right:-3%;top:44%;height:8.5%}
.rib-v::after,.rib-h::after{content:"";position:absolute;background:rgba(255,245,215,.45)}
.rib-v::after{top:0;bottom:0;left:22%;width:12%}
.rib-h::after{left:0;right:0;top:24%;height:14%}
.bow{position:absolute;left:69%;top:48.2%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(18px);cursor:pointer;transition:transform .7s var(--ease),opacity .5s}
.loop{position:absolute;width:calc(var(--P) * .3);height:calc(var(--P) * .2);top:calc(var(--P) * -.1);border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 calc(var(--P) * .035) var(--gold-2);transition:background-color .6s}
.loop.l{right:0;transform-origin:right center;transform:rotate(-22deg) rotateY(18deg)}
.loop.r{left:0;transform-origin:left center;transform:rotate(22deg) rotateY(-18deg)}
.knot{position:absolute;width:calc(var(--P) * .1);height:calc(var(--P) * .1);left:calc(var(--P) * -.05);top:calc(var(--P) * -.05);border-radius:30%;background:var(--gold-2);transform:translateZ(4px)}
.tail{position:absolute;top:0;width:calc(var(--P) * .07);height:calc(var(--P) * .3);background:var(--gold);clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%)}
.tail.l{left:calc(var(--P) * -.08);transform:rotate(22deg);transform-origin:top center}
.tail.r{left:calc(var(--P) * .01);transform:rotate(-18deg);transform-origin:top center}
.bow:hover .loop.l{transform:rotate(-26deg) rotateY(18deg) scale(1.05)}
.bow:hover .loop.r{transform:rotate(26deg) rotateY(-18deg) scale(1.05)}
.tag{position:absolute;left:calc(var(--P) * -.42);top:calc(var(--P) * .12);transform-origin:top right;transform:translateZ(12px) rotate(-8deg);animation:swing 3.2s ease-in-out infinite;transition:transform .9s var(--ease),opacity .6s}
.tag::before{content:"";position:absolute;right:-2px;top:calc(var(--P) * -.11);width:2px;height:calc(var(--P) * .13);background:var(--gold-2);transform:rotate(30deg);transform-origin:bottom}
.tag-in{background:var(--paper);color:var(--ink);border-radius:14px 6px 6px 14px;padding:calc(var(--P) * .035) calc(var(--P) * .055);font-family:var(--hand);font-size:max(13px,calc(var(--P) * .058));line-height:1.35;white-space:nowrap;box-shadow:0 8px 18px rgba(69,40,38,.22)}
.tag-in b{display:block;font-size:max(14px,calc(var(--P) * .075))}
/* 拆開的時間軸 */
.unwrapping .bow{transform:translateZ(200px) translateY(-80px) rotate(40deg) scale(1.5);opacity:0;pointer-events:none}
.unwrapping .tag{transform:translateZ(60px) translateY(160%) rotate(-70deg);opacity:0;animation:none;transition-delay:.12s}
.unwrapping .rib-v{transform:translateZ(3px) translateY(-118%);opacity:0;transition-delay:.25s}
.unwrapping .rib-h{transform:translateZ(3px) translateX(118%);opacity:0;transition-delay:.35s}
.unwrapping .wp.l{transform:translateZ(120px) translateX(-62%) translateY(6%) rotateY(-58deg) rotateZ(-16deg);opacity:0;transition-delay:.75s,1.25s,0s}
.unwrapping .wp.r{transform:translateZ(140px) translateX(64%) translateY(-4%) rotateY(58deg) rotateZ(14deg);opacity:0;transition-delay:.82s,1.32s,0s}

/* 內頁 */
.pg{position:absolute;inset:0;padding:calc(var(--P) * .085) calc(var(--P) * .09);display:flex;flex-direction:column;gap:calc(var(--P) * .032);z-index:1}
.hand{font-family:var(--hand)}
.pol{position:relative;align-self:center;width:78%;background:#fff;padding:5% 5% 15%;transform:rotate(var(--tilt,-2deg));box-shadow:0 6px 16px rgba(69,40,38,.18)}
.pol img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper-2)}
.pol figcaption{position:absolute;left:0;right:0;bottom:3%;text-align:center;font-family:var(--hand);font-size:max(13px,calc(var(--P) * .062));color:var(--ink)}
.tp{position:absolute;width:38%;height:calc(var(--P) * .07);background:var(--tape);transform:rotate(var(--r,-6deg));z-index:3;transition:background-color .6s}
.story{font-family:var(--hand);font-size:max(13px,calc(var(--P) * .056));line-height:1.55;color:var(--ink);position:relative;z-index:2}
.lyr{position:relative;z-index:2;font-family:var(--hand);font-size:max(13px,calc(var(--P) * .054));color:var(--rose);display:flex;gap:.4em;align-items:center;align-self:flex-start}
.lyr svg.n{width:1em;height:1em;flex:none}
.squig{position:absolute;left:1.4em;right:-4%;bottom:-.45em;height:.5em;overflow:visible}
.dd{fill:none;stroke:var(--rose);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200)}
.live .dd{animation:ink 1.1s .5s var(--ease) forwards}
.deco{position:absolute;z-index:3;pointer-events:none}
.stampc{width:calc(var(--P) * .27);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 2px var(--stamp),inset 0 0 0 4.5px var(--paper),inset 0 0 0 6px var(--stamp);color:var(--stamp);display:grid;place-items:center;text-align:center;font-weight:700;font-size:max(9px,calc(var(--P) * .034));line-height:1.25;opacity:.72;mix-blend-mode:multiply;transform:rotate(var(--r,-14deg)) scale(1.6);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.live .stampc{transform:rotate(var(--r,-14deg)) scale(1);opacity:.72;transition-delay:.9s}
.stk{filter:drop-shadow(0 2px 2px rgba(60,30,30,.25))}
.stk path,.stk circle,.stk rect{stroke:#fff;stroke-width:3;paint-order:stroke}
.ticket{width:calc(var(--P) * .42);padding:calc(var(--P) * .025) calc(var(--P) * .04);background:radial-gradient(circle at 0 50%,transparent calc(var(--P) * .025),var(--paper-2) calc(var(--P) * .027)) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent calc(var(--P) * .025),var(--paper-2) calc(var(--P) * .027)) right/51% 100% no-repeat;font-size:max(9px,calc(var(--P) * .032));line-height:1.35;color:var(--muted);transform:rotate(var(--r,7deg));filter:drop-shadow(0 3px 4px rgba(60,30,30,.18))}
.ticket b{display:block;color:var(--ink);font-family:var(--hand);font-size:max(11px,calc(var(--P) * .045))}
.ring{width:calc(var(--P) * .3);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 calc(var(--P) * .012) rgba(140,90,60,.22),inset calc(var(--P) * .006) calc(var(--P) * .004) 0 calc(var(--P) * .016) rgba(140,90,60,.1)}
.reveal-hand{display:inline-block;clip-path:inset(0 100% 0 0)}
.live .reveal-hand{animation:handw 1.4s .6s steps(5,end) forwards}
.ded h3{font-family:var(--hand);font-weight:700;font-size:calc(var(--P) * .13);line-height:1.2;margin-top:calc(var(--P) * .05)}
.ded .occ{font-family:var(--hand);font-size:calc(var(--P) * .085);color:var(--rose);position:relative;align-self:flex-start}
.ded .date{font-size:max(13px,calc(var(--P) * .045));color:var(--muted);font-variant-numeric:tabular-nums}
.record{margin-top:auto;align-self:flex-start;display:flex;align-items:center;gap:calc(var(--P) * .04);border:0;background:none;padding:0;text-align:left;position:relative;z-index:2}
.vinyl{position:relative;width:calc(var(--P) * .3);height:calc(var(--P) * .3);border-radius:50%;background:#2A1B1F;flex:none;transition:transform .3s var(--ease)}
.vinyl::before{content:"";position:absolute;inset:14%;border-radius:50%;background:#3A2629}
.vinyl::after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--cloth);transition:background-color .6s}
.vinyl i{position:absolute;inset:44%;border-radius:50%;background:var(--paper);z-index:1}
.record:hover .vinyl{transform:scale(1.06)}

.record span{font-family:var(--hand);font-size:max(13px,calc(var(--P) * .052));line-height:1.4}
.record b{display:block;font-size:max(13px,calc(var(--P) * .06))}
.qr-wrap{position:relative;align-self:center;background:#fff;padding:5%;transform:rotate(1.5deg);box-shadow:0 6px 16px rgba(69,40,38,.16);width:58%}
.qr-wrap canvas{display:block;width:100%;aspect-ratio:1}
.endp{background:var(--cloth);display:grid;place-items:center;transition:background-color .6s}
.endp svg{width:40%;opacity:.5}
.endp svg circle,.endp svg path{fill:none;stroke:var(--foil);stroke-width:5;stroke-linecap:round}

.hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--hand);font-size:var(--step-lead);color:var(--ink)}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.tabs button{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--desk-2);color:var(--ink);font-weight:500;transition:background-color .2s,transform .18s var(--ease)}
.tabs button:hover{transform:translateY(-2px)}
.tabs button[aria-current="true"]{background:var(--ink);color:var(--paper);font-weight:700}
.petal{position:absolute;left:50%;top:44%;width:12px;height:16px;margin:-8px 0 0 -6px;border-radius:60% 60% 50% 50%;pointer-events:none;z-index:4}

/* ---------- 手帳裡有什麼 ---------- */
.inside{padding-block:120px 140px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.inside h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);line-height:1.2}
.inside ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:40px 36px}
.inside li{display:flex;flex-direction:column;gap:8px;position:relative;padding-top:22px}
.inside li::before{content:"";position:absolute;left:0;top:0;width:72px;height:14px;background:var(--tape);transform:rotate(-3deg)}
.inside li:nth-child(even)::before{background:var(--tape-2);transform:rotate(2deg)}
.inside li b{font-family:var(--hand);font-size:1.6rem;line-height:1.3}

@keyframes draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes swing{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@keyframes spin{to{rotate:360deg}}
@keyframes shade{0%{opacity:0}45%{opacity:.3}100%{opacity:0}}
@keyframes sheen{0%{opacity:0;background-position:120% 0}30%{opacity:1}100%{opacity:0;background-position:-20% 0}}
@keyframes under{0%{opacity:.32}100%{opacity:0}}
@keyframes foil{from{background-position:120% 0}to{background-position:-30% 0}}
@keyframes ink{to{stroke-dashoffset:0}}
@keyframes handw{to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.reveal{animation:rise .8s var(--ease) both;animation-delay:var(--d,0s)}
.reveal-io{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal-io.pre{opacity:.001;transform:translateY(26px)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .copy{max-width:none}
  .bar nav{display:none}
  .bar .btn{margin-left:auto}
  .stage{--P:min(46cqw,300px)}
  .inside{grid-template-columns:1fr}
}
@media (max-width:560px){
  .inside ul{grid-template-columns:1fr}
  .stage{height:calc(var(--H) + 130px);overflow:clip}
  .hint{font-size:1rem}
  .p-pol{left:calc(var(--P) * -.12)}
  .p-pen{display:none}
  .p-sprig{right:calc(var(--P) * -.05)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal-hand{clip-path:none}
  .dd{stroke-dashoffset:0}
  .stampc{transform:rotate(var(--r,-14deg));opacity:.72}
}

/* ================= 形象站新增段落 ================= */
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:720px}
.sec-head h2,.faq h2,.lyrics h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);line-height:1.2}
.lead{font-size:var(--step-lead);line-height:1.6}
.how,.days,.plans,.faq,.promise,.lyrics{padding-block:110px}
.how{position:relative}

/* ---------- 四個步驟：索引卡 ---------- */
.cards{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.card{position:relative;background:var(--paper);border-radius:6px;border-top:6px solid color-mix(in srgb,var(--rose) 35%,var(--paper));padding:30px 24px 30px;box-shadow:0 14px 30px rgba(69,40,38,.14),0 2px 4px rgba(69,40,38,.08);transform:rotate(var(--r,0deg));transition:transform .35s var(--ease),box-shadow .35s,opacity .8s var(--ease)}
.js .card.reveal-io.pre{transform:rotate(var(--r,0deg)) translateY(30px)}
.card:hover{transform:rotate(0deg) translateY(-8px);box-shadow:0 22px 40px rgba(69,40,38,.2)}
.card .tp{position:absolute;width:96px;height:22px;background:var(--tape);transform:rotate(var(--r,-4deg))}
.card .ico{display:block;width:60px;height:60px;color:var(--rose);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--hand);font-size:1.5rem;line-height:1.35;margin:18px 0 10px}
.card p{line-height:1.7}
.how-path{position:absolute;left:0;right:0;top:300px;width:100%;height:60px;pointer-events:none;opacity:.7}
.how-path .dd{stroke-dasharray:8 10;stroke-width:2.5;stroke-dashoffset:0;clip-path:inset(0 100% 0 0);transition:clip-path 2.2s .2s var(--ease)}
.how-path.live .dd{clip-path:inset(0 0 0 0)}

/* ---------- 歌詞本 ---------- */
.sheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.ly-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}
.ly-tabs{display:flex;flex-wrap:wrap;gap:8px}
.ly-tabs button{min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;transition:background-color .2s,color .2s,transform .18s var(--ease)}
.ly-tabs button:hover{transform:translateY(-2px)}
.ly-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ly-brief>div{display:flex;flex-direction:column;gap:10px}
.ly-for{font-family:var(--hand);font-size:1.6rem;font-weight:700;color:var(--rose)}
.chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--paper);border-radius:8px;padding:8px 14px;font-family:var(--hand);font-size:1.0625rem;box-shadow:0 3px 8px rgba(69,40,38,.1);transform:rotate(-1deg)}
.chips li:nth-child(even){transform:rotate(1.2deg)}
.legend{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px;font-size:var(--step-small);color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.ly-page{position:relative;background:var(--paper);background-image:repeating-linear-gradient(to bottom,transparent 0 47px,rgba(160,79,91,.18) 47px 48px);background-position:0 30px;border-radius:4px 14px 14px 4px;padding:44px clamp(24px,4vw,56px) 36px clamp(40px,5vw,72px);box-shadow:0 24px 50px rgba(69,40,38,.18),0 3px 6px rgba(69,40,38,.08)}
.ly-page::before{content:"";position:absolute;left:clamp(22px,3vw,40px);top:0;bottom:0;width:2px;background:rgba(184,96,108,.35)}
.ly-page .tp{position:absolute;width:120px;height:26px;background:var(--tape);transform:rotate(var(--r,-3deg))}
.ly-title{font-family:var(--hand);font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);line-height:48px}
.ly-text{font-family:var(--hand);font-size:clamp(1.125rem,1rem + .5vw,1.4rem)}
.ly{line-height:48px;margin:0}
.ly-tag{line-height:48px;margin:0;font-family:var(--sans);font-size:var(--step-small);font-weight:700;color:var(--muted);letter-spacing:.08em}
.anim .ly,.anim .ly-tag{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
b.acr{display:inline-grid;place-items:center;width:1.7em;height:1.7em;margin-right:.08em;border-radius:50%;color:var(--paper);background:var(--rose);font-weight:700;line-height:1}
.anim b.acr{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0) * 45ms + .25s)}
mark.nm{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--gold) 70%,transparent) 55%) no-repeat 0 0/100% 100%;color:inherit;padding:0 .1em;font-weight:700}
.anim mark.nm{animation:marker .7s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms + .35s)}
u.sec{text-decoration:none;border-bottom:2px dashed var(--rose);padding-bottom:1px}
i.rh{font-style:normal;color:var(--rose);font-weight:700;position:relative}
i.rh::after{content:"";position:absolute;left:-.12em;right:-.12em;bottom:-.02em;height:.4em;border-radius:50%;border:2px solid currentColor;opacity:.45}
.legend b.acr{width:1.6em;height:1.6em;font-size:.8125rem}
.record.mini{margin-top:20px}
.record.mini .vinyl{width:64px;height:64px}
.record.mini span{font-size:1rem}
.record.mini b{font-size:1.125rem}
.ly-foot{margin-top:18px}
.record.is-playing .vinyl{animation:spin 3s linear infinite}

/* ---------- 郵票 ---------- */
.stamps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}
.stamps li{transform:rotate(var(--r,0deg))}
.js .stamps li.reveal-io.pre{transform:rotate(var(--r,0deg)) translateY(30px)}
.stamp{display:block;width:100%;border:0;padding:12px;text-align:left;background:var(--paper);color:var(--ink);--perf:radial-gradient(circle at 50% 50%,transparent 5px,#000 5.5px) -9px -9px/18px 18px,linear-gradient(#000 0 0) center/calc(100% - 18px) calc(100% - 18px) no-repeat;-webkit-mask:var(--perf);mask:var(--perf);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.stamps li{filter:drop-shadow(0 10px 18px rgba(69,40,38,.18))}
.stamp:hover{transform:translateY(-6px) rotate(-2deg) scale(1.03)}
.stamp:active{transform:scale(.97)}
.stamp:focus-visible{outline:none;transform:translateY(-6px) scale(1.03)}
.stamp:focus-visible .st-in{box-shadow:inset 0 0 0 4px var(--foil)}
.st-in{position:relative;display:flex;flex-direction:column;gap:8px;min-height:190px;padding:26px 24px;border-radius:2px;background:var(--cloth);color:var(--foil);transition:background-color .6s}
.stamps li:nth-child(3n+2) .st-in{background:var(--rose-hover)}
.stamps li:nth-child(3n) .st-in{background:var(--cloth-2)}
.st-in b{font-family:var(--hand);font-size:2.1rem;line-height:1.2}
.st-in span{font-size:var(--step-body);color:#fff}
.st-in i{position:absolute;right:20px;bottom:16px;font-style:normal;font-family:var(--hand);font-size:1.25rem;font-variant-numeric:tabular-nums}
.st-in::after{content:"";position:absolute;right:18px;top:18px;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--foil) 60%,transparent);opacity:.7}
.stamp.picked .st-in::after{content:"已套用";width:auto;height:auto;padding:4px 10px;border-radius:999px;background:var(--foil);color:var(--ink);font-size:.8125rem;font-weight:700;opacity:1;box-shadow:none}

/* ---------- 方案插頁 ---------- */
.plan-row{margin-top:56px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px 30px;border-radius:16px;background:color-mix(in srgb,var(--paper) 55%,transparent);border:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);transition:transform .3s var(--ease),opacity .8s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.main{background:var(--paper);border:0;box-shadow:0 22px 44px rgba(69,40,38,.16)}
.plan h3{font-family:var(--hand);font-size:1.9rem;line-height:1.25}
.plan ul{margin:4px 0 8px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.plan li{position:relative;padding-left:30px}
.plan li::before{content:"";position:absolute;left:2px;top:.3em;width:16px;height:8px;border-left:3px solid var(--rose);border-bottom:3px solid var(--rose);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan .soon{color:var(--rose-hover);font-weight:700}
.mini-pols{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:12px}
.mini-pols figure{margin:0;background:#fff;padding:5% 5% 22%;box-shadow:0 4px 10px rgba(69,40,38,.15);transform:rotate(var(--t,0deg));position:relative;transition:transform .3s var(--ease)}
.plan:hover .mini-pols figure{transform:rotate(0deg) translateY(-4px)}
.mini-pols img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.mini-pols figcaption{position:absolute;left:0;right:0;bottom:2%;text-align:center;font-family:var(--hand);font-size:.8125rem}
.wave{margin-top:auto;width:100%;height:70px}
.wave rect{fill:var(--rose);transform-box:fill-box;transform-origin:center;animation:wv 1.4s ease-in-out infinite;animation-delay:var(--wd,0s)}

/* ---------- 一封信 ---------- */
.promise{display:grid;place-items:center}
.letter{position:relative;max-width:820px;width:100%;background:var(--paper);padding:clamp(36px,6vw,72px) clamp(24px,6vw,80px);border-radius:4px;box-shadow:0 26px 54px rgba(69,40,38,.18);transform:rotate(-.8deg);transition:transform .8s var(--ease),opacity .8s var(--ease)}
.js .letter.reveal-io.pre{transform:rotate(-.8deg) translateY(30px)}
.letter .tp{position:absolute;width:130px;height:28px;background:var(--tape);transform:rotate(var(--r,-30deg))}
.letter h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem);line-height:1.25;margin-bottom:28px}
.letter ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:22px;counter-reset:pr}
.letter li{position:relative;padding-left:52px;font-size:var(--step-lead);line-height:1.65;counter-increment:pr}
.letter li::before{content:counter(pr);position:absolute;left:0;top:.1em;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--hand);font-weight:700;color:var(--rose);box-shadow:inset 0 0 0 2px var(--rose)}
.letter li b{font-family:var(--hand);font-size:1.15em}
.sign{margin-top:34px;text-align:right;font-family:var(--hand);font-size:1.6rem;color:var(--rose)}

/* ---------- 常見問題 ---------- */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.qa{display:flex;flex-direction:column;gap:12px}
.qa details{background:var(--paper);border-radius:14px;box-shadow:0 6px 16px rgba(69,40,38,.08);transition:box-shadow .25s,opacity .8s var(--ease),transform .8s var(--ease)}
.qa details[open]{box-shadow:0 14px 30px rgba(69,40,38,.14)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 22px;font-weight:700;font-size:var(--step-lead);border-radius:14px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:12px;height:12px;border-right:3px solid var(--rose);border-bottom:3px solid var(--rose);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:translateY(3px) rotate(225deg)}
.qa summary:hover{color:var(--rose)}
.qa details p{padding:0 22px 22px;line-height:1.75}

/* ---------- 最後的行動 ---------- */
.start{background:var(--cloth);color:var(--foil);padding-block:120px;transition:background-color .6s;position:relative;overflow:clip}
.start-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.start h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,1.4rem + 3vw,4rem);line-height:1.2;color:var(--foil)}
.start .lead{color:#fff;max-width:620px;text-wrap:balance}
.start .small{color:var(--foil)}
.start-q{position:absolute;right:-60px;top:-80px;width:320px;opacity:.12}
.start-q circle,.start-q path{fill:none;stroke:var(--foil);stroke-width:5;stroke-linecap:round}
.btn-foil{background:var(--foil);color:var(--ink);min-height:56px;padding:0 30px;font-size:1.125rem}
.btn-foil:hover{background:#fff}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px;font-size:var(--step-small);color:var(--muted)}
.foot a{color:inherit}

@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes marker{from{background-size:0 100%}to{background-size:100% 100%}}
@keyframes wv{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .how-path{display:none}
  .sheet{grid-template-columns:1fr;gap:36px}
  .ly-side{position:static}
  .stamps{grid-template-columns:1fr 1fr}
  .plan-row{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .how,.days,.plans,.faq,.promise,.lyrics{padding-block:72px}
  .cards{grid-template-columns:1fr;gap:34px}
  .stamps{grid-template-columns:1fr;gap:26px}
  .st-in{min-height:150px}
  .ly-page{padding:36px 18px 28px 34px}
  .ly-page::before{left:20px}
  .start{padding-block:84px}
  .letter li{padding-left:46px}
}
@media (prefers-reduced-motion:reduce){
  .js .card.reveal-io.pre,.js .stamps li.reveal-io.pre,.js .letter.reveal-io.pre{transform:rotate(var(--r,0deg))}
  .how-path .dd{clip-path:none}
}