/* LETHE｜像素遊戲式個人網站
   座標系統：桌機舞台 1672×941、手機舞台寬 941（高度依螢幕），整個舞台等比縮放。 */
:root {
  --night: #302943;
  --deep: #51466E;
  --main: #7770A3;
  --pale: #A7A1CB;
  --mist: #DED6EA;
  --paper: #F5EBF2;
  --gold: #F2D59B;
  --rose: #E9B7CB;
  --ink: #2A2238;
  --px: 4px;
  --serif-en: 'Cinzel', 'Times New Roman', serif;
  --italic-en: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --pixel-en: 'Silkscreen', monospace;
  color-scheme: dark;
}
:root:not([data-theme="light"]) { --bg: #241e33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #241e33; } }
:root[data-theme="dark"] { --bg: #241e33; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg, #241e33);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }
img { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 游標皮膚 ---------- */
body[data-cursor="potion"], body[data-cursor="potion"] * { cursor: url(img/cur-potion.png) 10 2, auto; }
body[data-cursor="potion"] .hot, body[data-cursor="potion"] .hot *, body[data-cursor="potion"] button, body[data-cursor="potion"] a, body[data-cursor="potion"] [role="button"] { cursor: url(img/cur-potion-hover.png) 10 2, pointer; }
body[data-cursor="potion"] .hot:active, body[data-cursor="potion"] button:active { cursor: url(img/cur-potion-press.png) 10 2, pointer; }
body[data-cursor="quill"], body[data-cursor="quill"] * { cursor: url(img/cur-quill.png) 1 1, auto; }
body[data-cursor="quill"] .hot, body[data-cursor="quill"] button, body[data-cursor="quill"] a, body[data-cursor="quill"] [role="button"] { cursor: url(img/cur-quill.png) 1 1, pointer; }
body[data-cursor="arrow"], body[data-cursor="arrow"] * { cursor: url(img/cur-arrow.png) 1 1, auto; }
body[data-cursor="arrow"] .hot, body[data-cursor="arrow"] button, body[data-cursor="arrow"] a, body[data-cursor="arrow"] [role="button"] { cursor: url(img/cur-arrow.png) 1 1, pointer; }
input, textarea { cursor: text !important; }

/* ---------- 舞台 ---------- */
#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--deep);
}
#stage img { image-rendering: auto; }
#stage[data-crisp] img.px { image-rendering: pixelated; }
.layer { position: absolute; pointer-events: none; }

/* 像素框：用階梯陰影做出切角，不使用模糊 */
.pxbox {
  background: var(--paper);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--deep),
    0 var(--px) 0 0 var(--deep),
    calc(var(--px) * -1) 0 0 0 var(--deep),
    var(--px) 0 0 0 var(--deep),
    inset 0 0 0 var(--px) var(--mist),
    inset 0 calc(var(--px) * -2) 0 var(--px) #e6dcea;
}
.pxbox.dark {
  background: var(--deep); color: var(--paper);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--night), 0 var(--px) 0 0 var(--night),
    calc(var(--px) * -1) 0 0 0 var(--night), var(--px) 0 0 0 var(--night),
    inset 0 0 0 var(--px) var(--main);
}
svg.pix { shape-rendering: crispEdges; display: block; width: 1em; height: 1em; flex: none; }
.card .txt { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ---------- 頂部導覽 ---------- */
.topbar {
  position: absolute; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 0 22px 0 40px;
}
[data-layout="desk"] .topbar { left: 12px; top: 6px; width: 1648px; height: 76px; }
[data-layout="mob"] .topbar { left: 12px; top: 10px; width: 917px; height: 88px; padding: 0 18px 0 34px; }
.logo { display: flex; align-items: center; gap: 14px; font-family: var(--serif-en); font-weight: 700; font-size: 44px; letter-spacing: .04em; color: var(--deep); line-height: 1; }
.logo svg { width: 36px; height: 36px; }
.nav { display: flex; gap: 6px; margin: 0 auto; }
.nav button {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 30px; font-size: 25px; font-weight: 500; letter-spacing: .12em; color: var(--deep);
  transition: transform 120ms steps(2);
}
.nav button svg { width: 28px; height: 28px; }
.nav button:hover { background: var(--mist); }
.nav button:active { transform: translateY(2px); }
.nav button[aria-current="page"] { background: var(--deep); color: var(--paper); box-shadow: 0 -4px 0 var(--night), 0 4px 0 var(--night), -4px 0 0 var(--night), 4px 0 0 var(--night); }
.nav button + button::before { content: ''; position: absolute; left: -4px; top: 18px; width: 2px; height: 16px; background: var(--pale); }
.nav button[aria-current="page"]::before, .nav button[aria-current="page"] + button::before { display: none; }
.winbtns { display: flex; gap: 10px; }
.winbtn { width: 46px; height: 40px; display: grid; place-items: center; color: var(--deep); }
.winbtn svg { width: 24px; height: 24px; }
.winbtn:hover { background: var(--mist); }
.winbtn:active { transform: translateY(2px); }
.hamburger { display: none; margin-left: auto; width: 74px; height: 62px; place-items: center; color: var(--deep); }
.hamburger svg { width: 40px; height: 40px; }
[data-layout="mob"] .nav, [data-layout="mob"] .winbtns { display: none; }
[data-layout="mob"] .hamburger { display: grid; }
[data-layout="mob"] .logo { font-size: 46px; }

.mobmenu {
  position: absolute; z-index: 60; right: 24px; top: 110px; width: 420px; padding: 18px;
  display: none; flex-direction: column; gap: 6px;
}
.mobmenu.open { display: flex; animation: popin 220ms steps(4) both; }
.mobmenu button { display: flex; align-items: center; gap: 22px; height: 86px; padding: 0 26px; font-size: 34px; letter-spacing: .14em; color: var(--deep); }
.mobmenu button svg { width: 40px; height: 40px; }
.mobmenu button[aria-current="page"] { background: var(--deep); color: var(--paper); }
@keyframes popin { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 視圖與切換 ---------- */
.view { position: absolute; inset: 0; display: none; }
.view.active { display: block; }
#wipe { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; image-rendering: pixelated; }
#intro { position: absolute; inset: 0; z-index: 80; background: var(--night); pointer-events: none; animation: introfade 1200ms steps(8) forwards; }
@keyframes introfade { 0%, 15% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.boot .topbar { animation: dropin 420ms 300ms steps(5) both; }
.boot .dialog { animation: risein 420ms 750ms steps(5) both; }
.boot .hero-title, .boot .cards { animation: fadein 500ms 550ms steps(5) both; }
@keyframes dropin { from { transform: translateY(-110%); } to { transform: none; } }
@keyframes risein { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 首頁場景 ---------- */
.scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
[data-layout="desk"] .scene { width: 1672px; height: 941px; }
[data-layout="mob"] .scene { width: 941px; height: 1572px; }
.scene > .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.scene .bg img { width: 100%; height: 100%; }
[data-layout="mob"] .scene .bg { height: 1672px; top: -100px; }
.home-desk, .home-mob { display: none; }
[data-layout="desk"] .home-desk, [data-layout="mob"] .home-mob { display: block; }
.home-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#4a3f63, #3a3150); }

.sprite { position: absolute; pointer-events: none; }
.sprite img { width: 100%; height: 100%; }
.breathe { animation: breathe 3.2s steps(1) infinite; }
@keyframes breathe { 0%, 48% { transform: translateY(0); } 50%, 96% { transform: translateY(-2px); } }
.blink { position: absolute; opacity: 0; }
.char.blinking .blink { opacity: 1; }
.catbreath { transform-origin: 50% 100%; animation: catbreath 2.2s steps(1) infinite; }
@keyframes catbreath { 0%, 30% { transform: scale(1, 1); } 33%, 63% { transform: scale(1.006, 1.018); } 66%, 96% { transform: scale(1.012, 1.034); } }
.cat.purr { animation: purr 140ms steps(2) 6; }
@keyframes purr { 50% { transform: translateX(2px); } }
.leaf { animation: sway 4.2s steps(1) infinite; }
.leaf:nth-of-type(2n) { animation-duration: 5.1s; animation-delay: -1.4s; }
.leaf:nth-of-type(3n) { animation-duration: 3.7s; animation-delay: -2.3s; }
@keyframes sway { 0%, 30% { transform: translateX(0); } 33%, 55% { transform: translateX(2px); } 58%, 80% { transform: translateX(0); } 83%, 97% { transform: translateX(-2px); } }

.glow { position: absolute; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 150, .42) 0 16%, rgba(255, 196, 140, .18) 16% 36%, rgba(240, 170, 160, .07) 36% 60%, transparent 60%);
  animation: flicker 1.6s steps(1) infinite; }
@keyframes flicker { 0% { opacity: .9; } 25% { opacity: 1; } 50% { opacity: .82; } 62% { opacity: .96; } 80% { opacity: .88; } }
.room-dim { position: absolute; inset: 0; background: #1a1430; mix-blend-mode: multiply; opacity: 0; pointer-events: none; transition: opacity 360ms steps(4); }
.lights-off .room-dim { opacity: .55; }
.lights-off .glow.lamp { opacity: 0 !important; animation: none; }

.steam { position: absolute; width: 8px; height: 8px; background: rgba(245, 235, 242, .75); pointer-events: none; animation: steam 1.8s steps(6) infinite; opacity: 0; }
@keyframes steam {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .85; }
  50% { transform: translate(6px, -36px); opacity: .6; }
  100% { transform: translate(-4px, -78px); opacity: 0; }
}
.sand { position: absolute; width: 3px; height: 6px; background: #f6dcb0; animation: sand .9s steps(5) infinite; pointer-events: none; }
@keyframes sand { from { transform: translateY(0); opacity: 1; } to { transform: translateY(36px); opacity: .2; } }
.fast .sand { animation-duration: .3s; }

.twinkle { position: absolute; width: 20px; height: 20px; pointer-events: none; animation: twinkle 2.8s steps(1) infinite; }
.twinkle svg { width: 100%; height: 100%; }
@keyframes twinkle { 0%, 60% { opacity: 1; transform: scale(1); } 70% { opacity: .3; transform: scale(.6); } 85% { opacity: .8; } }
.shooting { position: absolute; height: 4px; width: 60px; background: linear-gradient(90deg, transparent, #fff); pointer-events: none; animation: shoot 900ms steps(9) forwards; }
@keyframes shoot { from { transform: translate(0, 0) rotate(-24deg); opacity: 1; } to { transform: translate(-220px, 100px) rotate(-24deg); opacity: 0; } }

/* 標題區 */
.hero-title { position: absolute; text-align: center; color: var(--paper); pointer-events: none; }
[data-layout="desk"] .hero-title { left: 880px; top: 110px; width: 660px; }
[data-layout="mob"] .hero-title { left: 120px; top: 584px; width: 700px; }
[data-layout="mob"] .hero-title .castle { width: 96px; height: 54px; }
[data-layout="mob"] .hero-title .divider { display: none; }
[data-layout="mob"] .hero-title .ring { top: 4px; }
.hero-title .castle { margin: 0 auto -6px; width: 120px; height: 70px; color: #b6aed8; }
.hero-title .castle svg { width: 100%; height: 100%; }
.hero-title h1 {
  position: relative; margin: 0; font-family: var(--serif-en); font-weight: 700; font-size: 128px; line-height: 1; letter-spacing: .06em;
  color: #f7eef6;
  text-shadow: 4px 0 0 var(--deep), -4px 0 0 var(--deep), 0 4px 0 var(--deep), 0 -4px 0 var(--deep), 6px 8px 0 var(--night);
  pointer-events: auto; transition: color 160ms steps(2);
}
.hero-title h1:hover { color: #fff; text-shadow: 4px 0 0 var(--main), -4px 0 0 var(--main), 0 4px 0 var(--main), 0 -4px 0 var(--main), 6px 8px 0 var(--night), 0 0 0 transparent; }
.hero-title .ring { position: absolute; left: -40px; right: -40px; top: 18px; height: 120px; pointer-events: none; }
.hero-title .sub { margin-top: 26px; font-size: 32px; letter-spacing: .14em; font-weight: 500; color: var(--paper); text-shadow: 3px 3px 0 var(--night); }
.hero-title .divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.hero-title .divider i { width: 210px; height: 2px; background: rgba(222, 214, 234, .6); }
.hero-title .divider svg { width: 22px; height: 22px; }
[data-layout="mob"] .hero-title h1 { font-size: 118px; }
[data-layout="mob"] .hero-title .sub { font-size: 34px; margin-top: 14px; }

/* 四張入口卡 */
.cards { position: absolute; display: grid; gap: 26px; }
[data-layout="desk"] .cards { left: 830px; top: 418px; grid-template-columns: repeat(4, 180px); }
[data-layout="mob"] .cards { left: 96px; top: 856px; grid-template-columns: repeat(2, 362px); gap: 26px 30px; }
.card {
  position: relative; height: 214px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--deep); transition: transform 140ms steps(2);
}
.card .ico { width: 84px; height: 84px; margin-bottom: 10px; }
.card .ico svg { width: 100%; height: 100%; }
.card b { font-size: 30px; letter-spacing: .1em; font-weight: 700; }
.card small { font-size: 21px; color: var(--main); letter-spacing: .04em; border-top: 2px solid var(--mist); padding-top: 6px; width: 70%; text-align: center; }
.card:hover { transform: translateY(-4px); background: #fff; }
.card:hover .ico { animation: bob 600ms steps(2) infinite; }
.card:active { transform: translateY(2px); }
@keyframes bob { 50% { transform: translateY(-4px); } }
[data-layout="mob"] .card { height: 126px; flex-direction: row; gap: 24px; }
[data-layout="mob"] .card .ico { width: 80px; height: 80px; margin: 0; }
[data-layout="mob"] .card .txt { display: flex; flex-direction: column; align-items: center; }
[data-layout="mob"] .card b { font-size: 36px; }
[data-layout="mob"] .card .txt { gap: 2px; }
[data-layout="mob"] .card small { font-size: 26px; width: auto; }

/* 對話框 */
.dialog { position: absolute; z-index: 20; color: var(--ink); }
[data-layout="desk"] .dialog { left: 64px; top: 742px; width: 628px; height: 138px; }
[data-layout="mob"] .dialog { left: 86px; top: 1166px; width: 770px; height: 214px; }
.dialog .bar { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px 0 18px; background: var(--mist); color: var(--deep); font-family: var(--serif-en); font-size: 18px; letter-spacing: .08em; }
.dialog .bar svg { width: 14px; height: 14px; }
.dialog .bar .sp { flex: 1; }
.dialog .bar button { width: 30px; height: 24px; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--pale); }
.dialog .bar button svg { width: 14px; height: 14px; }
.dialog .bar button:hover { background: #fff; }
.dialog .body { display: flex; gap: 18px; padding: 8px 18px 0 10px; height: calc(100% - 32px); }
.dialog .avatar { flex: none; width: 96px; height: 92px; overflow: hidden; }
.dialog .avatar img { width: 114px; height: 94px; margin-left: -10px; }
.dialog .text { flex: 1; font-size: 22px; line-height: 1.6; letter-spacing: .06em; padding-top: 6px; white-space: pre-line; }
.dialog .text .caret { display: inline-block; width: 10px; height: 4px; background: var(--deep); margin-left: 6px; vertical-align: middle; animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dialog .next { position: absolute; right: 22px; bottom: 12px; width: 26px; height: 18px; animation: arrowbob 800ms steps(2) infinite; }
.dialog .next svg { width: 100%; height: 100%; }
@keyframes arrowbob { 50% { transform: translateY(4px); } }
.dialog .who { font-weight: 700; color: var(--main); margin-right: 4px; }
[data-layout="mob"] .dialog .bar { height: 44px; font-size: 26px; }
[data-layout="mob"] .dialog .bar button { width: 40px; height: 32px; }
[data-layout="mob"] .dialog .avatar { width: 140px; height: 150px; }
[data-layout="mob"] .dialog .avatar img { width: 172px; height: 142px; margin-left: -16px; margin-top: 6px; }
[data-layout="mob"] .dialog .body { height: calc(100% - 44px); }
[data-layout="mob"] .dialog .text { font-size: 31px; }
[data-layout="mob"] .dialog .next { width: 34px; height: 24px; }

/* 可互動物件：選取框（四角括號） */
.hot { position: absolute; z-index: 10; outline: none; }
.hot::before, .hot::after {
  content: ''; position: absolute; inset: -6px; pointer-events: none; opacity: 0;
  background:
    linear-gradient(var(--paper), var(--paper)) left top / 18px 4px no-repeat,
    linear-gradient(var(--paper), var(--paper)) left top / 4px 18px no-repeat,
    linear-gradient(var(--paper), var(--paper)) right top / 18px 4px no-repeat,
    linear-gradient(var(--paper), var(--paper)) right top / 4px 18px no-repeat,
    linear-gradient(var(--paper), var(--paper)) left bottom / 18px 4px no-repeat,
    linear-gradient(var(--paper), var(--paper)) left bottom / 4px 18px no-repeat,
    linear-gradient(var(--paper), var(--paper)) right bottom / 18px 4px no-repeat,
    linear-gradient(var(--paper), var(--paper)) right bottom / 4px 18px no-repeat;
  filter: drop-shadow(2px 2px 0 var(--night));
  transition: opacity 120ms steps(2), inset 160ms steps(2);
}
.hot:hover::before, .hot:focus-visible::before { opacity: 1; inset: -2px; }
.hot.pulse::before { animation: reticle 360ms steps(3); opacity: 1; }
@keyframes reticle { 0% { inset: -14px; } 100% { inset: -2px; } }
.hot-label {
  position: absolute; z-index: 30; padding: 6px 14px 8px; font-size: 20px; letter-spacing: .08em; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity 120ms steps(2), transform 120ms steps(2);
}
.hot-label.show { opacity: 1; transform: none; }
.hot-label small { margin-left: 8px; color: var(--main); font-family: var(--pixel-en); font-size: 14px; letter-spacing: 0; }
[data-layout="mob"] .hot-label { font-size: 30px; }

/* 情緒氣泡 */
.emote { position: absolute; z-index: 25; width: 64px; height: 56px; pointer-events: none; animation: emote 1300ms steps(1) forwards; }
.emote svg { width: 100%; height: 100%; }
@keyframes emote { 0% { transform: translateY(8px); opacity: 0; } 10% { transform: none; opacity: 1; } 18% { transform: translateY(-4px); } 26%, 80% { transform: none; opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.heart { position: absolute; z-index: 25; width: 28px; height: 26px; pointer-events: none; animation: heart 1100ms steps(6) forwards; }
.heart svg { width: 100%; height: 100%; }
@keyframes heart { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx, 0), -90px); opacity: 0; } }
.zzz { position: absolute; z-index: 25; font-family: var(--pixel-en); font-size: 22px; color: var(--paper); text-shadow: 2px 2px 0 var(--night); pointer-events: none; animation: zzz 3.6s steps(6) infinite; }
@keyframes zzz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(20px, -44px); opacity: 0; } }
.bubble { position: absolute; width: 10px; height: 10px; border: 2px solid rgba(245, 235, 242, .9); pointer-events: none; animation: bubble 900ms steps(5) forwards; }
@keyframes bubble { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx, 0), -70px); opacity: 0; } }

/* 精簡模式（最小化按鈕） */
.scene-only .cards, .scene-only .dialog, .scene-only .hero-title { opacity: 0; pointer-events: none; transition: opacity 300ms steps(3); }
.cards, .dialog, .hero-title { transition: opacity 300ms steps(3); }

/* ---------- 內容頁共用 ---------- */
.page { position: absolute; overflow: hidden; background: #5a4f7a; }
[data-layout="desk"] .page { left: 12px; top: 96px; width: 1648px; height: 833px; box-shadow: 0 0 0 4px var(--night), inset 0 0 0 4px var(--main); }
[data-layout="mob"] .page { left: 0; top: 112px; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; }
.page::-webkit-scrollbar { width: 0; height: 0; }
.page-bg { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(48, 41, 67, .55), rgba(48, 41, 67, 0) 30%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 4px, transparent 4px 8px),
    linear-gradient(180deg, #51466E, #6a5f8f 70%, #7770A3); }
[data-layout="mob"] .page-bg { position: fixed; }
.page-head { position: relative; display: flex; align-items: center; gap: 22px; height: 104px; padding: 0 44px; color: var(--paper); background: linear-gradient(var(--night), #3c3457); }
.page-head h2 { margin: 0; font-size: 52px; font-weight: 700; letter-spacing: .1em; text-shadow: 4px 4px 0 var(--night); }
.page-head em { font-family: var(--italic-en); font-size: 40px; font-style: italic; color: var(--mist); }
.page-head .slash { color: var(--pale); font-size: 34px; }
.page-head .line { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(222, 214, 234, .6), rgba(222, 214, 234, 0)); }
.page-head .castle { position: absolute; right: 0; top: 0; height: 104px; width: 600px; overflow: hidden; }
.page-head .castle img { height: 104px; width: 600px; object-fit: cover; }
.page-head svg.star { width: 28px; height: 28px; }
[data-layout="mob"] .page-head { height: 120px; padding: 0 36px; }
[data-layout="mob"] .page-head .castle { width: 380px; height: 120px; opacity: .8; }
[data-layout="mob"] .page-head .castle img { width: 380px; height: 120px; }
[data-layout="mob"] .page-head .line { display: none; }
.page-body { position: relative; }
[data-layout="desk"] .page-body { height: calc(100% - 104px); padding: 26px 30px 26px; }
[data-layout="mob"] .page-body { padding: 34px 34px 80px; }

.panel { position: relative; padding: 26px 30px; }
.chip { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; font-size: 20px; letter-spacing: .06em; color: var(--deep); background: var(--paper); box-shadow: inset 0 0 0 2px var(--pale); }
.chip.on, .chip[aria-pressed="true"] { background: var(--deep); color: var(--paper); box-shadow: inset 0 0 0 2px var(--night); }
button.chip:hover { background: #fff; }
button.chip.on:hover, button.chip[aria-pressed="true"]:hover { background: var(--main); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 60px; padding: 0 36px; font-size: 24px; letter-spacing: .12em; color: var(--paper); background: var(--deep);
  box-shadow: 0 -4px 0 var(--night), 0 4px 0 var(--night), -4px 0 0 var(--night), 4px 0 0 var(--night), inset 0 -4px 0 #3e3558; transition: transform 100ms steps(2); }
.btn:hover { background: var(--main); }
.btn:active { transform: translateY(2px); box-shadow: 0 -4px 0 var(--night), 0 4px 0 var(--night), -4px 0 0 var(--night), 4px 0 0 var(--night); }
.btn svg { width: 24px; height: 24px; }
.btn.ghost { background: var(--paper); color: var(--deep); box-shadow: 0 -4px 0 var(--deep), 0 4px 0 var(--deep), -4px 0 0 var(--deep), 4px 0 0 var(--deep); }
.btn.ghost:hover { background: #fff; }
.tag { display: inline-block; padding: 4px 12px; font-size: 18px; color: var(--deep); background: var(--mist); margin: 0 6px 6px 0; }
.sec-title { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 26px 0 20px; margin: -6px 0 18px -6px; background: var(--deep); color: var(--paper); font-size: 28px; font-weight: 700; letter-spacing: .1em; }
.sec-title em { font-family: var(--italic-en); font-weight: 500; color: var(--mist); font-size: 26px; }
.sec-title svg { width: 30px; height: 30px; }
[data-layout="mob"] .chip { height: 54px; font-size: 28px; padding: 0 24px; }
[data-layout="mob"] .btn { height: 84px; font-size: 32px; }
[data-layout="mob"] .tag { font-size: 26px; }
[data-layout="mob"] .sec-title { font-size: 36px; height: 68px; }

/* ---------- 作品集：檔案書架 ---------- */
.works-grid { display: grid; height: 100%; grid-template-columns: 320px 1fr 430px; grid-template-rows: minmax(0, 1fr); gap: 28px; }
[data-layout="mob"] .works-grid { grid-template-columns: 1fr; gap: 34px; height: auto; }
.cats { display: flex; flex-direction: column; gap: 4px; padding: 22px 16px; overflow: hidden; }
.cats button { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; font-size: 23px; letter-spacing: .06em; color: var(--deep); white-space: nowrap; }
.cats button em { font-family: var(--italic-en); font-size: 20px; color: var(--main); }
.cats button svg { width: 28px; height: 28px; }
.cats button .n { margin-left: auto; font-family: var(--pixel-en); font-size: 16px; color: var(--main); }
.cats button:hover { background: var(--mist); }
.cats button[aria-pressed="true"] { background: var(--deep); color: var(--paper); }
.cats button[aria-pressed="true"] em, .cats button[aria-pressed="true"] .n { color: var(--mist); }
.cats .chibi { margin-top: auto; width: 268px; height: 252px; align-self: center; flex: none; }
.cats .chibi img { width: 100%; height: 100%; object-fit: contain; }
[data-layout="mob"] .cats { flex-direction: row; flex-wrap: wrap; padding: 18px; }
[data-layout="mob"] .cats button { height: 72px; font-size: 30px; flex: 1 1 40%; }
[data-layout="mob"] .cats .chibi { display: none; }

.shelf-wrap { display: flex; flex-direction: column; min-height: 0; }
.shelf-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.shelf-tools .sp { flex: 1; }
.shelf-tools .hint { font-size: 18px; color: var(--mist); letter-spacing: .08em; }
.vtoggle { display: flex; }
.vtoggle button { width: 52px; height: 44px; display: grid; place-items: center; background: var(--paper); color: var(--deep); box-shadow: inset 0 0 0 2px var(--pale); }
.vtoggle button[aria-pressed="true"] { background: var(--deep); color: var(--paper); }
.vtoggle svg { width: 24px; height: 24px; }
.shelf { position: relative; flex: 1; padding: 22px 26px 0; background: #3e3558; box-shadow: 0 0 0 4px var(--night), inset 0 0 0 4px #4b4168; overflow: hidden; }
.shelf .row { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 268px; padding: 0 18px; }
.shelf .row::after { content: ''; position: absolute; left: -26px; right: -26px; bottom: -22px; height: 22px; background: linear-gradient(#8a6a58 0 6px, #6a4e44 6px 16px, #4a3640 16px); }
.shelf .row + .row { margin-top: 46px; }
.spine {
  position: relative; width: 74px; display: flex; flex-direction: column; align-items: center; padding: 18px 0 14px;
  color: var(--paper); transition: transform 140ms steps(2);
  box-shadow: inset 4px 0 0 rgba(255, 255, 255, .18), inset -6px 0 0 rgba(0, 0, 0, .22), 0 0 0 3px var(--night);
}
.spine .t { writing-mode: vertical-rl; font-size: 22px; letter-spacing: .16em; font-weight: 700; text-shadow: 2px 2px 0 rgba(0, 0, 0, .3); }
.spine .band { width: 100%; height: 10px; margin: 8px 0; background: var(--gold); opacity: .85; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.spine .yr { margin-top: auto; font-family: var(--pixel-en); font-size: 13px; opacity: .8; }
.spine:hover { transform: translateY(-8px); }
.spine[aria-pressed="true"] { transform: translateY(-14px); box-shadow: inset 4px 0 0 rgba(255, 255, 255, .28), inset -6px 0 0 rgba(0, 0, 0, .22), 0 0 0 3px var(--night), 0 0 0 7px var(--gold); }
.spine:active { transform: translateY(-4px); }
.shelf .deco { position: relative; align-self: flex-end; pointer-events: none; }
.shelf .deco svg { width: 100%; height: 100%; }
.covergrid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-content: start; overflow-y: auto; padding: 4px; }
.covergrid::-webkit-scrollbar { width: 0; }
.wcard { padding: 12px 12px 14px; text-align: left; transition: transform 140ms steps(2); }
.wcard .cv { height: 168px; overflow: hidden; background: var(--night); }
.wcard .cv img { width: 100%; height: 100%; object-fit: cover; }
.wcard b { display: block; margin: 12px 4px 6px; font-size: 21px; color: var(--ink); letter-spacing: .04em; }
.wcard:hover { transform: translateY(-4px); }
[data-layout="mob"] .shelf .row { height: 330px; gap: 14px; overflow-x: auto; }
[data-layout="mob"] .spine { width: 96px; height: 300px !important; flex: none; }
[data-layout="mob"] .spine .t { font-size: 30px; }
[data-layout="mob"] .covergrid { grid-template-columns: repeat(2, 1fr); overflow: visible; }
[data-layout="mob"] .wcard .cv { height: 220px; }
[data-layout="mob"] .wcard b { font-size: 28px; }
[data-layout="mob"] .shelf-tools .hint { display: none; }

.detail { display: flex; flex-direction: column; gap: 12px; padding: 22px; overflow-y: auto; }
.detail::-webkit-scrollbar { width: 0; }
.detail .preview { position: relative; flex: none; height: 230px; background: var(--night); overflow: hidden; box-shadow: 0 0 0 4px var(--deep); }
.detail .preview img { width: 100%; height: 100%; object-fit: contain; }
.detail h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; font-size: 28px; line-height: 1.3; color: var(--ink); letter-spacing: .04em; }
.detail h3 svg { width: 20px; height: 20px; color: var(--main); }
.detail h3 small { margin-left: auto; font-family: var(--pixel-en); font-size: 14px; color: var(--main); white-space: nowrap; }
.detail .en { font-family: var(--italic-en); font-style: italic; font-size: 22px; color: var(--main); margin-top: -8px; }
.detail p { margin: 0; font-size: 19px; line-height: 1.7; color: #3f3655; }
.detail .sep { height: 2px; background: var(--mist); }
.detail .btn { margin-top: auto; }
[data-layout="mob"] .detail .preview { height: 420px; }
[data-layout="mob"] .detail h3 { font-size: 40px; }
[data-layout="mob"] .detail h3 svg { width: 28px; height: 28px; }
[data-layout="mob"] .detail h3 small { font-size: 20px; }
[data-layout="mob"] .detail { overflow: visible; }
[data-layout="mob"] .detail p { font-size: 29px; }
[data-layout="mob"] .detail .en { font-size: 30px; }

/* 書本閱讀層 */
.book { position: absolute; inset: 0; z-index: 70; display: none; place-items: center; background: rgba(36, 30, 51, .82); }
.book.open { display: grid; animation: fadein 200ms steps(3); }
.book .spread { position: relative; display: flex; gap: 0; padding: 22px; background: #6a4e44; box-shadow: 0 0 0 4px var(--night), inset 0 0 0 4px #8a6a58; animation: bookopen 420ms steps(6); }
@keyframes bookopen { 0% { transform: scaleX(.12); } 60% { transform: scaleX(1.02); } 100% { transform: none; } }
.book .pg { position: relative; background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.book .pg img { max-width: 100%; max-height: 100%; }
.book .pg + .pg { box-shadow: inset 6px 0 0 rgba(48, 41, 67, .15); }
.book .pg.turn { animation: turn 360ms steps(4); }
@keyframes turn { 0% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
.book .pg.turnback { animation: turnback 360ms steps(4); }
@keyframes turnback { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.book .ctrl { position: absolute; left: 0; right: 0; bottom: -86px; display: flex; align-items: center; justify-content: center; gap: 24px; color: var(--paper); font-family: var(--pixel-en); font-size: 22px; }
.book .ctrl button { width: 64px; height: 56px; display: grid; place-items: center; background: var(--paper); color: var(--deep); box-shadow: 0 0 0 4px var(--night); }
.book .ctrl button:disabled { opacity: .35; }
.book .ctrl svg { width: 26px; height: 26px; }
.book .close { position: absolute; right: -24px; top: -24px; width: 56px; height: 56px; display: grid; place-items: center; background: var(--paper); color: var(--deep); box-shadow: 0 0 0 4px var(--night); }
.book .close svg { width: 24px; height: 24px; }
.book .bt { position: absolute; left: 0; top: -70px; color: var(--paper); font-size: 28px; letter-spacing: .08em; text-shadow: 3px 3px 0 var(--night); }

/* ---------- 關於我：角色檔案 ---------- */
.about-grid { display: grid; height: 100%; grid-template-columns: 610px 1fr 450px; grid-template-rows: minmax(0, 1fr) 236px; gap: 22px; }
[data-layout="mob"] .about-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; gap: 34px; }
.portrait { position: relative; padding: 0; overflow: hidden; background: var(--night); box-shadow: 0 0 0 4px var(--night), inset 0 0 0 4px var(--main); }
.portrait > button { position: absolute; inset: 0; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait img.in { animation: posein 380ms steps(5); }
@keyframes posein { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.portrait .moods { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 2; }
.portrait .state { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 6px 14px; font-size: 18px; letter-spacing: .1em; }
.portrait .tap { position: absolute; right: 14px; bottom: 18px; z-index: 2; font-family: var(--pixel-en); font-size: 14px; color: var(--paper); text-shadow: 2px 2px 0 var(--night); animation: caret 1.4s steps(1) infinite; }
[data-layout="mob"] .portrait { height: 600px; }
.namecard { position: relative; display: flex; flex-direction: column; padding: 22px 40px 18px; overflow: hidden; }
.namecard h3 { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--serif-en); font-style: italic; font-size: 62px; color: var(--deep); letter-spacing: .04em; text-shadow: 4px 4px 0 var(--mist); }
.namecard h3 svg { width: 34px; height: 34px; }
.namecard .role { margin-top: 4px; font-size: 22px; letter-spacing: .1em; color: #3f3655; }
.namecard .rule { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--pale); }
.namecard .rule i { flex: 1; height: 2px; background: var(--mist); }
.namecard .rule svg { width: 14px; height: 14px; }
.namecard p { margin: 0 0 8px; font-size: 19px; line-height: 1.7; color: #3f3655; letter-spacing: .03em; }
.seal { position: absolute; right: 30px; top: 0; width: 72px; height: 104px; }
.seal svg { width: 100%; height: 100%; }
[data-layout="mob"] .namecard h3 { font-size: 92px; }
[data-layout="mob"] .namecard .role { font-size: 32px; }
[data-layout="mob"] .namecard p { font-size: 29px; }
.infocard { position: relative; padding: 24px 30px; overflow: hidden; }
.infocard dl { margin: 6px 0 0; }
.infocard .row { display: grid; grid-template-columns: 34px 96px 1fr; align-items: center; gap: 12px; height: 56px; border-bottom: 2px solid var(--mist); font-size: 21px; }
.infocard .row:last-child { border-bottom: 0; }
.infocard dt { color: var(--ink); font-weight: 700; letter-spacing: .1em; }
.infocard dd { margin: 0; color: #3f3655; letter-spacing: .06em; }
.infocard svg { width: 28px; height: 28px; color: var(--deep); }
[data-layout="mob"] .infocard .row { height: 84px; font-size: 30px; grid-template-columns: 50px 150px 1fr; }
.about-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.about-bottom .panel { padding: 20px 26px; overflow: hidden; }
[data-layout="mob"] .about-bottom .panel { padding: 30px; }
[data-layout="mob"] .about-bottom { grid-column: auto; grid-template-columns: 1fr; gap: 34px; }
.skills { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.skills div { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
.skills div + div { border-left: 2px dashed var(--mist); }
.skills svg { width: 64px; height: 64px; transition: transform 140ms steps(2); }
.skills div:hover svg { transform: translateY(-4px); }
[data-layout="mob"] .skills div { font-size: 28px; }
.interests { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.interests .chip { height: 42px; font-size: 19px; }
[data-layout="mob"] .interests .chip { height: 60px; font-size: 28px; }
.belief { position: relative; }
.belief blockquote { margin: 4px 0 0; padding: 0 0 0 28px; font-family: var(--serif-en); font-size: 21px; line-height: 1.9; color: var(--ink); letter-spacing: .06em; font-family: 'Noto Serif TC', serif; }
.belief blockquote::before { content: '“'; position: absolute; margin-left: -34px; margin-top: -12px; font-size: 54px; color: var(--deep); font-family: var(--serif-en); }
.belief .rook { position: absolute; right: 24px; top: 18px; width: 40px; height: 54px; }
[data-layout="mob"] .belief blockquote { font-size: 32px; }

/* ---------- 企劃服務：煉金工坊 ---------- */
.svc-grid { display: grid; height: 100%; grid-template-columns: 820px 1fr; grid-template-rows: minmax(0, 1fr); gap: 28px; }
[data-layout="mob"] .svc-grid { grid-template-columns: 1fr; height: auto; gap: 34px; }
.lab { position: relative; display: flex; flex-direction: column; padding: 30px 34px 0; background: #3e3558; box-shadow: 0 0 0 4px var(--night), inset 0 0 0 4px #4b4168; overflow: hidden; }
.lab .intro { color: var(--mist); font-size: 21px; line-height: 1.7; letter-spacing: .06em; }
.lab .intro b { color: var(--paper); }
.flasks { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 30px 46px; }
.flasks::after { content: ''; position: absolute; left: -34px; right: -34px; bottom: 24px; height: 22px; background: linear-gradient(#8a6a58 0 6px, #6a4e44 6px 16px, #4a3640 16px); }
.flask { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-bottom: 6px; transition: transform 140ms steps(2); }
.flask .bottle { position: relative; width: 172px; height: 198px; }
.flask .bottle img { width: 100%; height: 100%; image-rendering: pixelated; }
.flask .name { padding: 8px 18px; font-size: 22px; font-weight: 700; letter-spacing: .1em; }
.flask:hover { transform: translateY(-6px); }
.flask[aria-pressed="true"] .bottle { animation: wobble 500ms steps(4); filter: drop-shadow(0 0 0 var(--gold)) drop-shadow(4px 0 0 var(--gold)) drop-shadow(-4px 0 0 var(--gold)); }
.flask[aria-pressed="true"] .name { background: var(--deep); color: var(--paper); }
@keyframes wobble { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.flask .label { position: absolute; top: -48px; font-family: var(--pixel-en); font-size: 15px; color: var(--mist); letter-spacing: .06em; }
[data-layout="mob"] .lab { min-height: 760px; }
[data-layout="mob"] .lab .intro { font-size: 29px; }
[data-layout="mob"] .flask .bottle { width: 160px; height: 184px; }
[data-layout="mob"] .flask .name { font-size: 28px; }
.svc-detail { overflow-y: auto; padding: 34px 40px; }
.svc-detail::-webkit-scrollbar { width: 0; }
.svc-detail h3 { margin: 0; font-size: 40px; letter-spacing: .1em; color: var(--deep); }
.svc-detail .en { font-family: var(--italic-en); font-style: italic; font-size: 26px; color: var(--main); }
.svc-detail .lead { margin: 18px 0 8px; font-size: 23px; line-height: 1.8; color: #3f3655; }
.svc-detail h4 { display: flex; align-items: center; gap: 10px; margin: 24px 0 10px; font-size: 22px; letter-spacing: .12em; color: var(--deep); }
.svc-detail h4 svg { width: 22px; height: 22px; }
.svc-detail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.svc-detail li { position: relative; padding-left: 26px; font-size: 21px; line-height: 1.6; color: #3f3655; }
.svc-detail li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; background: var(--main); }
.svc-detail .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.svc-detail .steps div { padding: 12px; text-align: center; background: var(--mist); font-size: 19px; color: var(--deep); }
.svc-detail .steps b { display: block; font-family: var(--pixel-en); font-size: 15px; color: var(--main); }
.svc-detail .act { margin-top: 30px; display: flex; gap: 18px; flex-wrap: wrap; }
.svc-detail.in > * { animation: risein 300ms steps(4) both; }
[data-layout="mob"] .svc-detail h3 { font-size: 50px; }
[data-layout="mob"] .svc-detail .lead, [data-layout="mob"] .svc-detail li { font-size: 30px; }
[data-layout="mob"] .svc-detail h4 { font-size: 30px; }
[data-layout="mob"] .svc-detail .steps { grid-template-columns: repeat(2, 1fr); }
[data-layout="mob"] .svc-detail .steps div { font-size: 27px; }

/* ---------- 聯絡：信件系統 ---------- */
.contact-grid { display: grid; height: 100%; grid-template-columns: 1fr 940px 1fr; grid-template-rows: minmax(0, 1fr); gap: 20px; align-items: center; }
[data-layout="mob"] .contact-grid { grid-template-columns: 1fr; height: auto; grid-template-rows: none; }
[data-layout="mob"] .desk-letter { height: auto; display: block; }
[data-layout="mob"] .waxseal { top: 300px; }
.contact-side { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; color: var(--mist); font-size: 19px; line-height: 1.7; letter-spacing: .06em; padding-bottom: 20px; }
.contact-side img { width: 100%; max-width: 268px; }
[data-layout="mob"] .contact-side { display: none; }
.desk-letter { position: relative; height: 100%; display: grid; place-items: center; }
.envelope { position: relative; width: 560px; height: 360px; transition: transform 140ms steps(2); }
.envelope:hover { transform: translateY(-6px) rotate(-1deg); }
.envelope svg { width: 100%; height: 100%; }
.envelope .cta { position: absolute; left: 0; right: 0; bottom: -78px; text-align: center; color: var(--paper); font-size: 24px; letter-spacing: .14em; text-shadow: 3px 3px 0 var(--night); animation: caret 1.6s steps(1) infinite; }
.envelope.opening { animation: envopen 520ms steps(6) forwards; }
@keyframes envopen { 0% { transform: none; } 40% { transform: translateY(-12px) scale(1.04); } 100% { transform: translateY(80px) scale(.9); opacity: 0; } }
.letter { position: relative; display: none; width: 900px; padding: 24px 46px 20px; background: var(--paper);
  box-shadow: 0 0 0 4px var(--deep), 8px 8px 0 4px var(--night), inset 0 0 0 10px var(--paper), inset 0 0 0 12px var(--mist);
  background-image: repeating-linear-gradient(transparent 0 47px, rgba(167, 161, 203, .35) 47px 49px); }
.letter.show { display: block; animation: letterup 520ms steps(6) both; }
@keyframes letterup { from { transform: translateY(160px); clip-path: inset(70% 0 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
.letter h3 { margin: 0 0 2px; font-family: 'Noto Serif TC', serif; font-size: 30px; color: var(--deep); letter-spacing: .14em; }
.letter .to { font-family: var(--italic-en); font-style: italic; font-size: 22px; color: var(--main); margin-bottom: 10px; }
.field { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; margin-bottom: 8px; }
.field label { font-size: 21px; color: var(--deep); letter-spacing: .1em; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; border: 0; outline: 0; background: rgba(255, 255, 255, .55); padding: 10px 14px; font-size: 21px; color: var(--ink);
  box-shadow: inset 0 -4px 0 var(--pale); caret-color: var(--deep); border-radius: 0;
}
.field textarea { height: 128px; resize: none; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; box-shadow: inset 0 -4px 0 var(--deep); }
.field.top { align-items: start; }
.field.top label { padding-top: 10px; }
.letter .act { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.letter .act .note { flex: 1; font-size: 17px; color: var(--main); line-height: 1.6; }
.letter .err { color: #a2456b; font-size: 18px; min-height: 24px; }
[data-layout="mob"] .letter .err { font-size: 26px; }
.letter.sealing { animation: fold 700ms steps(7) forwards; }
@keyframes fold { 0% { transform: none; } 50% { transform: scaleY(.3); } 100% { transform: scaleY(.3) translateY(260px); opacity: 0; } }
.waxseal { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; display: none; z-index: 5; }
.waxseal.stamp { display: block; animation: stamp 560ms steps(5) both; }
.waxseal svg { width: 100%; height: 100%; }
@keyframes stamp { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1); } }
.sent { display: none; text-align: center; color: var(--paper); }
.sent.show { display: block; animation: risein 400ms steps(4) both; }
.sent h3 { font-size: 38px; letter-spacing: .14em; margin: 0 0 14px; text-shadow: 4px 4px 0 var(--night); }
.sent p { font-size: 22px; line-height: 1.8; color: var(--mist); margin: 0 0 26px; white-space: pre-line; }
.sent .envelope-mini { width: 220px; height: 150px; margin: 0 auto 26px; }
[data-layout="mob"] .letter { width: auto; padding: 40px 40px; background-image: repeating-linear-gradient(transparent 0 63px, rgba(167, 161, 203, .35) 63px 65px); }
[data-layout="mob"] .envelope { width: 760px; height: 490px; margin: 120px auto 160px; }
[data-layout="mob"] .field { grid-template-columns: 1fr; }
[data-layout="mob"] .field label, [data-layout="mob"] .field input, [data-layout="mob"] .field select, [data-layout="mob"] .field textarea { font-size: 30px; }
[data-layout="mob"] .letter h3 { font-size: 42px; }
[data-layout="mob"] .letter .act { flex-direction: column; align-items: stretch; }
[data-layout="mob"] .letter .act .note { font-size: 24px; }
[data-layout="mob"] .sent h3 { font-size: 48px; }
[data-layout="mob"] .sent p { font-size: 30px; }

/* 設定小窗 */
.settings { position: absolute; z-index: 65; display: none; width: 420px; padding: 24px 26px; }
.settings.open { display: block; animation: popin 200ms steps(4) both; }
.settings h4 { margin: 0 0 12px; font-size: 22px; letter-spacing: .12em; color: var(--deep); }
.settings .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.settings .opts button { display: flex; align-items: center; gap: 8px; }
.settings .opts img { width: 24px; height: 24px; image-rendering: pixelated; }
[data-layout="mob"] .settings { width: 700px; }
[data-layout="mob"] .settings h4 { font-size: 32px; }

/* 減少動態 */
.calm *, .calm *::before, .calm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
.calm .steam, .calm .sand, .calm .zzz, .calm .twinkle { display: none; }
.calm #intro { display: none; }