:root {
  /* Approved lake-at-dawn palette: warm paper, blue-green water, restrained cinnabar. */
  --ink-950: #1f2523;
  --ink-800: #343c39;
  --ink-700: #4e5854;
  --ink-600: #69736f;
  --paper-bright: #fffdf8;
  --paper-base: #f5f0e7;
  --paper-muted: #e7e0d5;
  --water-light: #d9e4e1;
  --water-mid: #91a7a8;
  --water-deep: #536f74;
  --dawn-light: #f8ead8;
  --dawn-mid: #e7c7a6;
  --plum: #bd503d;
  --plum-deep: #8d3329;
  --surface-strong: rgba(255, 253, 248, 0.9);
  --surface-soft: rgba(245, 240, 231, 0.7);
  --surface-water: rgba(217, 228, 225, 0.62);
  --border-soft: rgba(31, 37, 35, 0.14);
  --border-strong: rgba(31, 37, 35, 0.34);
  --focus-ring: rgba(141, 51, 41, 0.4);
  --success: #4f745f;
  --warning: #95692f;
  --danger: #9e4035;
  --success-soft: rgba(79, 116, 95, 0.12);
  --warning-soft: rgba(149, 105, 47, 0.13);
  --danger-soft: rgba(158, 64, 53, 0.1);
  --scrim: rgba(20, 29, 28, 0.28);

  /* Compatibility aliases retained for the existing component vocabulary. */
  --ink: var(--ink-950);
  --ink-soft: rgba(31, 37, 35, 0.68);
  --ink-faint: rgba(31, 37, 35, 0.44);
  --ink-hairline: var(--border-soft);
  --ink-wash: rgba(83, 111, 116, 0.08);
  --vermilion: var(--plum-deep);
  --old-gold: #92702d;
  --paper: var(--paper-base);
  --paper-white: var(--surface-strong);
  --paper-translucent: var(--surface-soft);
  --shadow: 0 18px 52px rgba(31, 37, 35, 0.09);
  --surface-blur: 2.5px;
  --theme-accent: #8d3329;
  --scene-copy-shadow: 0 1px 14px rgba(255, 253, 248, 0.9);
  --serif: "Iowan Old Style", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --display-serif: "Kaiti SC", "STKaiti", "FZKai-Z03", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}

@media (min-width: 761px) {
  /* M26 season: summer */
  html[data-scene-view="history"],
  html[data-view="history"],
  html[data-view="account"],
  html[data-view="security"],
  html[data-view="orders"] {
    --surface-contrast-base: #e4ede8;
    --ink-950: #1e2c28;
    --ink-800: #2f413b;
    --ink-700: #3f534c;
    --ink-600: #526860;
    --ink-soft: #3f534c;
    --ink-faint: #465c54;
    --theme-accent: #396554;
    --plum-deep: #315c4d;
    --surface-strong: rgba(238, 246, 241, 0.9);
    --surface-soft: rgba(218, 233, 225, 0.76);
    --surface-water: rgba(164, 196, 183, 0.62);
    --border-soft: rgba(41, 76, 64, 0.24);
    --border-strong: rgba(35, 68, 57, 0.48);
    --focus-ring: rgba(49, 92, 77, 0.34);
    --surface-blur: 0.8px;
    --scene-copy-shadow:
      0 1px 0 rgba(239, 247, 242, 0.98),
      0 0 18px rgba(239, 247, 242, 0.86),
      0 0 34px rgba(239, 247, 242, 0.52);
    --shadow: 0 18px 48px rgba(19, 43, 35, 0.14);
  }

  /* M26 season: autumn */
  html[data-scene-view="membership"],
  html[data-view="membership"],
  html[data-view="checkout"],
  html[data-view="address"],
  html[data-view="gift"],
  html[data-view="advanced"],
  html[data-view="concierge"] {
    --surface-contrast-base: #efe2c9;
    --ink-950: #2e2a20;
    --ink-800: #413925;
    --ink-700: #554a35;
    --ink-600: #67593e;
    --ink-soft: #554a35;
    --ink-faint: #5e5038;
    --theme-accent: #8a6033;
    --plum-deep: #7b4d2b;
    --surface-strong: rgba(249, 240, 219, 0.91);
    --surface-soft: rgba(231, 215, 181, 0.8);
    --surface-water: rgba(165, 178, 145, 0.62);
    --border-soft: rgba(92, 70, 37, 0.25);
    --border-strong: rgba(76, 57, 30, 0.5);
    --focus-ring: rgba(123, 77, 43, 0.35);
    --surface-blur: 0.7px;
    --scene-copy-shadow:
      0 1px 0 rgba(252, 244, 226, 0.99),
      0 0 20px rgba(252, 244, 226, 0.92),
      0 0 42px rgba(252, 244, 226, 0.66);
    --shadow: 0 20px 50px rgba(55, 42, 24, 0.17);
  }

  /* M26 season: winter */
  html[data-scene-view="share"],
  html[data-view="share"] {
    --surface-contrast-base: #e3ecef;
    --ink-950: #1e3038;
    --ink-800: #2e424c;
    --ink-700: #3d515b;
    --ink-600: #4f646e;
    --ink-soft: #3d515b;
    --ink-faint: #455b65;
    --theme-accent: #55788a;
    --plum-deep: #4b7183;
    --surface-strong: rgba(239, 247, 249, 0.91);
    --surface-soft: rgba(216, 230, 234, 0.79);
    --surface-water: rgba(164, 194, 204, 0.64);
    --border-soft: rgba(45, 78, 91, 0.24);
    --border-strong: rgba(37, 68, 81, 0.48);
    --focus-ring: rgba(75, 113, 131, 0.34);
    --surface-blur: 0.8px;
    --scene-copy-shadow:
      0 1px 0 rgba(244, 249, 250, 0.99),
      0 0 18px rgba(244, 249, 250, 0.88),
      0 0 34px rgba(244, 249, 250, 0.58);
    --shadow: 0 18px 48px rgba(24, 50, 62, 0.15);
  }

  /* M26 season: blue */
  html[data-scene-view="about"],
  html[data-view="about"],
  html[data-view="terms"],
  html[data-view="privacy"] {
    --surface-contrast-base: #e1ebf0;
    --ink-950: #1d3039;
    --ink-800: #2d424d;
    --ink-700: #3b505b;
    --ink-600: #4e6470;
    --ink-soft: #3b505b;
    --ink-faint: #435965;
    --theme-accent: #4d7c92;
    --plum-deep: #46748a;
    --surface-strong: rgba(238, 247, 251, 0.9);
    --surface-soft: rgba(213, 230, 238, 0.77);
    --surface-water: rgba(151, 190, 207, 0.61);
    --border-soft: rgba(42, 79, 96, 0.23);
    --border-strong: rgba(35, 69, 84, 0.47);
    --focus-ring: rgba(70, 116, 138, 0.34);
    --surface-blur: 0.8px;
    --scene-copy-shadow:
      0 1px 0 rgba(243, 249, 252, 0.99),
      0 0 18px rgba(243, 249, 252, 0.87),
      0 0 34px rgba(243, 249, 252, 0.56);
    --shadow: 0 18px 48px rgba(22, 52, 66, 0.15);
  }
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { min-height: 100%; margin: 0; }
body { min-width: 320px; overflow-x: hidden; background: transparent; color: var(--ink); }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: 0; background: none; }
input, textarea { color: var(--ink); }
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: var(--ink-600); opacity: .62; }
textarea { resize: vertical; }
.svg-sprite { display: none; }
.icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.skip-link { position: fixed; z-index: 100; top: .8rem; left: .8rem; padding: .6rem .85rem; color: var(--paper); background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.ink-environment, .ink-environment canvas, .paper-fibers, .edge-vignette { position: fixed; inset: 0; pointer-events: none; }
.ink-environment { z-index: 0; overflow: hidden; contain: paint; background: var(--paper); }
#sceneCanvas, #motionCanvas { width: 100%; height: 100%; transform: translateZ(0); backface-visibility: hidden; }
#sceneCanvas { z-index: -2; }
#motionCanvas { z-index: -1; opacity: 1; }
.paper-fibers { z-index: 1; opacity: .24; mix-blend-mode: multiply; background-image: repeating-linear-gradient(97deg, transparent 0 4px, rgba(0,0,0,.03) 4px 4.5px, transparent 4.5px 11px), repeating-linear-gradient(15deg, transparent 0 22px, rgba(0,0,0,.018) 22px 22.5px, transparent 22.5px 34px); }
.edge-vignette { z-index: 2; background: radial-gradient(circle at 50% 42%, transparent 0 38%, rgba(24,24,21,.035) 100%); }
#appRoot { position: relative; z-index: 3; }

.paper-layer { position: relative; background: linear-gradient(133deg, var(--surface-strong), var(--surface-soft)); border: 1px solid var(--border-soft); box-shadow: var(--shadow); backdrop-filter: blur(var(--surface-blur)); }
.paper-layer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32; background-image: repeating-linear-gradient(173deg, transparent 0 8px, rgba(20,20,18,.024) 8px 8.6px, transparent 8.6px 18px); mix-blend-mode: multiply; }
.paper-layer > * { position: relative; z-index: 1; }
.eyebrow { margin: 0; color: var(--ink-soft); font-size: .69rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.fatal-state { min-height: 100vh; display: grid; place-content: center; gap: 1rem; text-align: center; }
.fatal-state button { padding: .7rem 1rem; color: var(--paper); background: var(--ink); }
.product-boot { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: .85rem; color: var(--ink-soft); font-family: var(--serif); letter-spacing: .1em; }
.product-boot .boot-mark { width: 3.1rem; height: 3.1rem; animation: boot-breathe 2.4s ease-in-out infinite; }
.product-boot .boot-mark .icon { width: 100%; height: 100%; }
.product-boot p { margin: 0; font-size: .76rem; }
.product-boot > i { display: block; width: 5.4rem; height: 1px; overflow: hidden; background: var(--ink-hairline); }
.product-boot > i::after { content: ""; display: block; width: 42%; height: 100%; background: var(--ink); animation: boot-flow 1.45s ease-in-out infinite; }
@keyframes boot-breathe { 50% { opacity: .45; transform: scale(.92) rotate(-7deg); } }
@keyframes boot-flow { from { transform: translateX(-110%); } to { transform: translateX(350%); } }

/* Auth */
.auth-page { min-height: 100svh; display: grid; grid-template-columns: minmax(330px, 1.12fr) minmax(470px, .88fr); padding: clamp(1.2rem, 3vw, 3.2rem); gap: clamp(1.5rem, 4vw, 5rem); align-items: stretch; }
.auth-intro { min-height: min(800px, calc(100svh - 6rem)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; position: relative; padding: clamp(.35rem, 1vw, 1rem); }
.brand { display: inline-flex; align-items: center; gap: .72rem; width: fit-content; color: var(--ink); }
.brand-mark { width: 2.35rem; height: 2.35rem; }
.ink-logo { display: inline-grid; place-items: center; color: var(--ink); }
.ink-logo .icon { width: 100%; height: 100%; }
.brand-copy { display: grid; gap: .12rem; }
.brand-copy strong { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .18em; font-weight: 700; }
.brand-copy small { font-size: .67rem; letter-spacing: .16em; color: var(--ink-soft); }
.auth-poem { align-self: center; justify-self: end; width: min(100%, 44rem); margin: clamp(1rem, 2vh, 2rem) 0 0; padding-left: clamp(4.5rem, 8.5vw, 10rem); color: var(--ink-950); font-family: var(--display-serif); font-size: clamp(2.55rem, 3.45vw, 4.15rem); font-weight: 500; line-height: 1.42; letter-spacing: .095em; text-shadow: 0 1px 0 rgba(255,253,248,.76), 0 0 24px rgba(255,253,248,.54); }
.auth-poem p { margin: 0; white-space: nowrap; }
.auth-poem p + p { margin-left: clamp(1.7rem, 3.4vw, 4.2rem); margin-top: .12em; }
.auth-pulse { display: flex; align-items: center; align-self: end; gap: .72rem; width: fit-content; color: var(--ink-700); font-family: var(--serif); font-size: .75rem; letter-spacing: .1em; text-shadow: 0 1px 10px rgba(255,253,248,.92); }
.auth-pulse i { display: block; width: .3rem; height: .3rem; border: 1px solid currentColor; border-radius: 100%; opacity: .42; }
.auth-pulse i:nth-child(2) { width: .44rem; height: .44rem; opacity: .62; }
.auth-pulse i:nth-child(3) { width: .62rem; height: .62rem; background: currentColor; opacity: .78; }
.auth-paper-wrap { display: grid; place-items: center; min-height: 100%; }
.auth-paper { width: min(100%, 530px); padding: clamp(2.2rem, 5vw, 4.8rem) clamp(1.5rem, 4vw, 4.3rem) clamp(1.7rem, 3vw, 3.25rem); overflow: hidden; }
.auth-paper::after { content: ""; position: absolute; width: 130%; height: 26%; left: -15%; bottom: -11%; border-top: 1px solid rgba(23,23,21,.16); transform: rotate(-3deg); opacity: .55; }
.auth-paper-stamp { width: 2.7rem; height: 2.7rem; margin-bottom: 2rem; }
.auth-mark { width: 100%; height: 100%; }
.auth-paper h1 { margin: .55rem 0 2rem; font-family: var(--serif); font-size: clamp(2rem, 3.1vw, 3.2rem); line-height: 1.14; letter-spacing: .045em; font-weight: 600; }
.auth-form { display: grid; gap: 1.2rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: .35rem; border-bottom: 1px solid var(--ink-hairline); }
.auth-tabs button { padding: .65rem .2rem .7rem; position: relative; color: var(--ink-soft); font-family: var(--serif); font-size: 1rem; }
.auth-tabs button.is-active { color: var(--ink); }
.auth-tabs button.is-active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; background: var(--ink); transform: scaleX(.78); }
.field { display: grid; gap: .53rem; color: var(--ink-soft); font-family: var(--serif); font-size: .88rem; }
.field > input, .inline-input { width: 100%; min-height: 3.25rem; border: 1px solid var(--border-strong); background: var(--surface-soft); padding: .75rem .9rem; border-radius: 2px; }
.field > input:focus, .inline-input:focus-within { border-color: var(--plum-deep); box-shadow: 0 0 0 3px var(--focus-ring); }
.field small { color: var(--ink-faint); font-family: var(--sans); font-size: .7rem; }
.inline-input { display: grid; grid-template-columns: 1fr auto; padding: 0; overflow: hidden; }
.inline-input input { min-width: 0; border: 0; background: transparent; padding: .75rem .9rem; outline: 0; }
.text-action { padding: 0 .85rem; border-left: 1px solid var(--ink-hairline); color: var(--ink); font-size: .78rem; white-space: nowrap; }
.agreement { display: flex; align-items: flex-start; gap: .55rem; color: var(--ink-soft); font-size: .72rem; line-height: 1.55; }
.agreement input { margin: .2rem 0 0; accent-color: var(--ink); }
.agreement a { margin: 0 .1em; color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
.ink-button { min-height: 3rem; padding: .65rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; color: var(--paper); background: var(--ink); font-family: var(--serif); letter-spacing: .08em; transition: transform .22s ease, background .22s ease; position: relative; overflow: hidden; }
.ink-button::before { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(172deg, transparent 0 6px, rgba(255,255,255,.35) 6px 7px, transparent 7px 12px); }
.ink-button > * { position: relative; }
.ink-button:hover { transform: translateY(-2px); background: #191a17; }
.ink-button.wide { width: 100%; }
.ink-button.subtle { min-width: 10rem; background: rgba(23,23,21,.9); }
.auth-footnote, .auth-switch { display: flex; justify-content: space-between; gap: .7rem; color: var(--ink-soft); font-size: .75rem; }
.auth-footnote b { color: var(--ink); letter-spacing: .07em; }
.auth-footnote button, .auth-switch button { padding: 0; text-decoration: underline; text-underline-offset: .22em; }
.auth-switch { justify-content: center; margin: .25rem 0 0; }
.social-login { display: grid; gap: .6rem; margin-top: .45rem; }
.social-login > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; color: var(--ink-faint); font-size: .68rem; }
.social-login > div::before, .social-login > div::after { content: ""; height: 1px; background: var(--ink-hairline); }
.social-auth { min-height: 2.7rem; display: flex; align-items: center; justify-content: center; gap: .6rem; border: 1px solid var(--ink-hairline); background: var(--surface-soft); font-size: .8rem; transition: background .2s ease; }
.social-auth:hover { background: var(--surface-water); }

/* Product shell */
.app-page { min-height: 100svh; position: relative; }
html[data-ui-transition] .question-stage,
html[data-ui-transition] .inner-layout,
html[data-ui-transition] .auth-page { will-change: opacity; }
.topbar { height: 5.15rem; position: fixed; z-index: 20; inset: 0 0 auto; padding: .92rem clamp(1.5rem, 2.8vw, 3rem) .92rem clamp(6.7rem, 7.4vw, 7.8rem); display: flex; align-items: center; justify-content: space-between; }
.topbar::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .58; background: linear-gradient(to bottom, var(--surface-strong), transparent); pointer-events: none; }
.topbar-actions { display: flex; align-items: center; gap: 0; color: var(--ink-700); }
.top-icon-button, .profile-trigger, .quota-small { min-height: 2.15rem; display: inline-flex; align-items: center; gap: .37rem; padding: .38rem .8rem; border: 0; border-left: 1px solid var(--border-soft); background: transparent; font-size: .73rem; }
.quota-dual { min-height: 2.15rem; display: grid; grid-template-columns: 1fr 1fr; border: 0; background: transparent; backdrop-filter: none; }
.quota-dual button { min-width: 5.05rem; display: grid; grid-template-columns: auto auto; place-content: center; align-items: center; column-gap: .35rem; padding: .3rem .72rem; line-height: 1; text-align: center; }
.quota-dual button + button { border-left: 1px solid var(--ink-hairline); }
.quota-dual button:hover { background: var(--surface-soft); }
.quota-dual span { min-height: 1rem; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: .61rem; letter-spacing: .08em; line-height: 1; }
.quota-dual b { min-height: 1rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.history-top { min-width: 6.1rem; justify-content: center; }
.top-icon-button:hover, .profile-trigger:hover { background: var(--surface-strong); }
.profile-trigger { padding: .18rem .12rem .18rem .72rem; }
.profile-trigger-name { max-width: 8ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 2.35rem; height: 2.35rem; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50% 45% 49% 51%; color: var(--ink); background: radial-gradient(circle at 38% 34%, var(--paper-bright) 0 6%, var(--water-light) 64%, rgba(83,111,116,.18) 100%); box-shadow: inset 0 0 0 3px var(--surface-soft); transform: rotate(-5deg); }
.avatar span { transform: rotate(5deg); color: var(--ink); font-family: var(--serif); font-size: .9rem; }
.avatar-top { width: 1.75rem; height: 1.75rem; }
.avatar-menu { width: 2.85rem; height: 2.85rem; }
.avatar-large { width: 4rem; height: 4rem; }
.avatar-large span { font-size: 1.35rem; }
.account-flyout { position: absolute; top: 4.25rem; right: clamp(1.2rem, 3vw, 3.5rem); width: min(300px, calc(100vw - 2.4rem)); padding: 1rem; }
.account-flyout-heading { display: flex; align-items: center; gap: .7rem; padding: .4rem .35rem 1rem; border-bottom: 1px solid var(--ink-hairline); }
.account-flyout-heading div { display: grid; gap: .18rem; }
.account-flyout-heading strong { font-family: var(--serif); font-weight: 600; }
.account-flyout-heading small { color: var(--ink-faint); font-size: .7rem; }
.account-menu-links { display: grid; gap: .15rem; padding: .7rem 0; }
.account-menu-links button, .quiet-danger { min-height: 2.45rem; display: flex; align-items: center; gap: .55rem; padding: .5rem; text-align: left; font-size: .8rem; }
.account-menu-links button:hover { background: var(--surface-water); }
.quiet-danger { width: 100%; border-top: 1px solid var(--border-soft); color: var(--danger); }
.quiet-danger:hover { background: var(--danger-soft); }

.ink-rail { position: fixed; z-index: 21; inset: 0 auto 0 0; width: 4.9rem; padding: 1.18rem 0 1.15rem; display: flex; flex-direction: column; align-items: center; overflow: visible; isolation: isolate; border-right: 1px solid var(--border-soft); background: linear-gradient(90deg, var(--surface-strong) 0%, rgba(255,253,248,.84) 72%, var(--surface-soft) 100%); box-shadow: 10px 0 32px rgba(31,37,35,.04); backdrop-filter: blur(10px); }
.ink-rail::after { content: ""; position: absolute; z-index: -1; inset: 0 -1.1rem 0 auto; width: 1.1rem; background: linear-gradient(90deg, var(--surface-soft), transparent); pointer-events: none; }
.rail-top { width: 1rem; height: 2.45rem; position: relative; display: grid; place-items: center; }
.rail-top::before { content: ""; width: 1px; height: 2.05rem; background: linear-gradient(to bottom, transparent, var(--ink-600) 28% 72%, transparent); }
.rail-top i { position: absolute; width: .28rem; height: .28rem; border-radius: 50%; background: var(--plum); box-shadow: 0 0 0 3px var(--danger-soft); }
.ink-rail nav { display: grid; gap: .3rem; margin-top: 1.65rem; }
.rail-link { width: 3.55rem; min-height: 3.65rem; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem; border-radius: .75rem; color: var(--ink-600); transition: color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease; touch-action: manipulation; }
.rail-link::before { content: ""; position: absolute; right: -.03rem; top: 50%; width: 2px; height: 1.55rem; opacity: 0; transform: translateY(-50%) scaleY(.3); transform-origin: center; background: linear-gradient(to bottom, transparent, var(--vermilion) 22% 78%, transparent); transition: opacity .22s ease, transform .28s ease; }
.rail-glyph { position: relative; width: 1.75rem; height: 1.45rem; display: grid; place-items: center; }
.rail-glyph .icon { width: 1.08rem; height: 1.08rem; }
.rail-glyph i { position: absolute; top: -.04rem; right: -.02rem; width: .22rem; height: .22rem; border-radius: 50%; background: transparent; }
.rail-short { color: currentColor; font-family: var(--serif); font-size: .59rem; line-height: 1; letter-spacing: .16em; text-indent: .16em; }
.rail-label { position: absolute; top: 50%; left: calc(100% + .7rem); min-width: 7.6rem; transform: translate(.35rem,-50%); visibility: hidden; opacity: 0; display: grid; gap: .12rem; padding: .45rem .62rem; color: var(--ink); border: 1px solid var(--border-soft); background: var(--surface-strong); box-shadow: 0 10px 28px rgba(31,37,35,.07); backdrop-filter: blur(10px); white-space: nowrap; transition: opacity .22s ease, visibility .22s ease, transform .32s ease; }
.rail-label b { font-family: var(--serif); font-size: .74rem; font-weight: 600; letter-spacing: .16em; }
.rail-label small { font-size: .58rem; letter-spacing: .08em; opacity: .62; }
.rail-link:hover .rail-label, .rail-link:focus-visible .rail-label { visibility: visible; opacity: 1; transform: translate(0,-50%); }
.rail-link.is-active .rail-label { visibility: hidden; opacity: 0; transform: translate(.35rem,-50%); }
.rail-link:hover { color: var(--ink); background: var(--surface-soft); transform: translateY(-1px); }
.rail-link.is-active { color: var(--ink); background: linear-gradient(135deg, var(--surface-strong), var(--surface-water)); box-shadow: inset 0 0 0 1px var(--border-soft), 0 7px 20px rgba(31,37,35,.05); transform: none; }
.rail-link.is-active::before { opacity: .88; transform: translateY(-50%) scaleY(1); }
.rail-link.is-active .rail-glyph i { background: var(--plum); }
/* Main question scene */
.question-stage { position: relative; min-height: 100svh; padding: 5.15rem clamp(1.5rem, 3vw, 3.2rem) 8rem clamp(6.5rem, 8vw, 8.4rem); }
.question-void { min-height: calc(100svh - 13.15rem); display: grid; place-items: center; text-align: center; }
.void-copy { width: min(100%, 820px); margin-bottom: 4.5rem; text-shadow: 0 1px 0 rgba(255,255,255,.9); }
.void-copy h1 { margin: .75rem 0 1rem; font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: .05em; font-size: clamp(2.6rem, 5vw, 5.3rem); }
.void-copy h1 span { display: block; white-space: nowrap; }
.void-copy h1 span:last-child { margin-left: .08em; }
.void-copy > p:last-child { margin: 0 auto; max-width: 27rem; color: var(--ink-soft); font-family: var(--serif); font-size: 1rem; letter-spacing: .08em; line-height: 1.8; }
.scene-caption { display: none; }
.scene-caption::before { content: ""; display: block; width: 1px; height: 2.5rem; margin: 0 auto .85rem; background: linear-gradient(to bottom, transparent, var(--ink-faint)); }
.keyword-field { position: absolute; z-index: 4; top: clamp(7.6rem, 13.5vh, 8.4rem); left: clamp(8.4rem, 12.1vw, 12.8rem); width: min(31vw, 520px); height: min(70vh, 650px); visibility: hidden; opacity: 0; transform: translate3d(-12px, 4px, 0); transition: opacity .8s ease, transform 1.05s cubic-bezier(.22,.8,.26,1), visibility .8s ease; pointer-events: none; }
.keyword-field.is-visible { visibility: visible; opacity: 1; transform: translate3d(0,0,0); }
.semantic-field header { display: none; }
.semantic-field header span { font-family: var(--serif); font-size: .73rem; letter-spacing: .24em; }
.semantic-field header small { font-size: .58rem; letter-spacing: .1em; opacity: .72; }
.semantic-field > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(255,255,253,.96)); }
.semantic-field > svg path { fill: none; stroke: rgba(37,38,33,.28); stroke-width: .18; vector-effect: non-scaling-stroke; }
.semantic-field > svg circle { fill: rgba(255,255,253,.96); stroke: rgba(37,38,33,.25); stroke-width: .13; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(255,255,253,1)); }
.semantic-field[data-accent="vermilion"] > svg circle:nth-of-type(2), .semantic-field[data-accent="vermilion"] > svg circle:nth-of-type(4) { fill: rgba(125,48,40,.45); stroke: rgba(125,48,40,.58); }
.semantic-field[data-accent="gold"] > svg circle:nth-of-type(3) { fill: rgba(146,112,45,.52); stroke: rgba(146,112,45,.62); }
.semantic-field ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.semantic-field li { position: absolute; left: var(--x); top: var(--y); display: grid; gap: .16rem; transform: translate3d(0,0,0) scale(var(--scale)); transform-origin: left center; opacity: .8; animation: semantic-arrive .9s cubic-bezier(.2,.75,.24,1) both; animation-delay: var(--delay); text-shadow: none; }
.semantic-field li small { color: rgba(37,38,33,.47); font-family: var(--serif); font-size: .65rem; letter-spacing: .18em; }
.semantic-field li strong { max-width: 9em; color: rgba(37,38,33,.75); font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 2.12rem); font-weight: 500; line-height: 1.16; letter-spacing: .13em; text-wrap: balance; }
.semantic-field li.is-long strong { max-width: 11em; font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.35; }
.semantic-field li:nth-child(2), .semantic-field li:nth-child(5) { opacity: .58; }
.semantic-field[data-accent="vermilion"] li:nth-child(2) strong { color: rgba(125,48,40,.56); }
.semantic-field[data-accent="gold"] li:nth-child(3) strong { color: rgba(120,91,33,.62); }
.semantic-field footer { display: none; }
.semantic-field footer i { width: 2.8rem; height: 1px; background: linear-gradient(90deg, rgba(37,38,33,.36), transparent); }
@keyframes semantic-arrive { from { opacity: 0; transform: translate3d(-8px,6px,0) scale(calc(var(--scale) * .97)); } }
.dialogue-panel { position: absolute; z-index: 6; top: clamp(6.25rem, 10.8vh, 7rem); right: clamp(2rem, 3vw, 3.2rem); width: min(33vw, 550px); height: min(78.5vh, 742px); max-height: calc(100svh - 7.4rem); display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; overflow: hidden; border-radius: 7px; background: linear-gradient(138deg, var(--surface-strong), var(--surface-water)); border-color: var(--border-soft); box-shadow: 0 22px 66px rgba(31,37,35,.07); backdrop-filter: blur(2.5px); }
.dialogue-panel > header { min-height: 5.55rem; padding: 1.35rem 1.45rem 1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; border-bottom: 1px solid var(--ink-hairline); }
.dialogue-panel header p { margin: 0; font-family: var(--serif); letter-spacing: .12em; }
.dialogue-panel header small { color: var(--ink-faint); font-size: .67rem; }
.dialogue-tools { display: flex; align-items: center; gap: .38rem; color: var(--ink-faint); font-size: .64rem; white-space: nowrap; }
.dialogue-tools button { min-height: 2.75rem; border: 1px solid var(--border-soft); background: var(--surface-soft); transition: background .2s ease, border-color .2s ease, transform .2s ease; touch-action: manipulation; }
.dialogue-tools button:hover { border-color: var(--border-strong); background: var(--surface-strong); transform: translateY(-1px); }
.dialogue-tools button:disabled { opacity: .34; cursor: not-allowed; transform: none; }
.dialogue-new { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; padding: .45rem .64rem; color: var(--ink-soft); font-family: var(--serif); font-size: .7rem; letter-spacing: .06em; }
.dialogue-new .icon { width: .9rem; height: .9rem; }
.dialogue-copy { width: 2.75rem; display: grid; place-items: center; border-radius: 50%; }
.dialogue-thread { max-height: none; overflow: auto; padding: .55rem 1.45rem 1rem; scrollbar-width: thin; }
.dialogue-turn { padding: 1rem 0; border-bottom: 1px solid rgba(23,23,21,.09); }
.dialogue-turn:last-child { border-bottom: 0; }
.turn-question { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }
.turn-question span { flex: 0 0 auto; margin-top: .08rem; padding: .12rem .28rem; color: var(--paper-bright); background: var(--ink-950); font-size: .62rem; }
.turn-question p { margin: 0; }
.turn-answer { margin-top: 1rem; }
.engine-answer { position: relative; padding: .35rem 0 .1rem; }
.answer-kicker { margin: 0 0 .6rem; color: var(--ink-faint); font-size: .61rem; letter-spacing: .24em; }
.answer-one-line { margin: 0; color: var(--ink-950); font-family: var(--serif); font-size: clamp(1.55rem, 1.88vw, 2.08rem); font-weight: 560; line-height: 1.48; letter-spacing: .07em; text-wrap: balance; will-change: transform, opacity; }
.answer-ink-rule { position: relative; height: 1.25rem; margin: .65rem 0 .25rem; overflow: hidden; opacity: .52; }
.answer-ink-rule i { position: absolute; left: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--ink) 8%, rgba(23,23,21,.48) 72%, transparent); transform-origin: left center; }
.answer-ink-rule i:first-child { width: 82%; transform: rotate(-.7deg) scaleX(.96); }
.answer-ink-rule i:last-child { width: 54%; margin-top: 3px; opacity: .34; transform: rotate(.9deg); }
.engine-answer h2 { margin: 0 0 .7rem; color: var(--ink-soft); font-family: var(--serif); font-size: .72rem; line-height: 1.5; letter-spacing: .14em; font-weight: 500; }
.answer-body { display: grid; gap: .65rem; color: var(--ink-soft); font-family: var(--serif); font-size: .78rem; line-height: 1.82; }
.answer-body p { margin: 0; }
.answer-keypoints { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--ink-hairline); }
.answer-keypoints > p { margin: 0 0 .25rem; color: var(--ink-faint); font-size: .59rem; letter-spacing: .2em; }
.answer-keypoints ol { margin: 0; padding: 0; list-style: none; }
.answer-keypoint { position: relative; display: grid; grid-template-columns: 1.55rem 1fr; gap: .45rem; padding: .58rem .15rem .58rem 0; overflow: hidden; border-bottom: 1px solid rgba(23,23,21,.075); color: var(--ink-soft); font-size: .75rem; line-height: 1.62; will-change: transform, opacity; }
.answer-keypoint:last-child { border-bottom: 0; }
.answer-keypoint::after { content: ""; position: absolute; z-index: -1; left: 1.15rem; right: 7%; bottom: .42rem; height: 36%; opacity: .035; background: linear-gradient(92deg, var(--ink), transparent 92%); transform: skewX(-12deg) rotate(-.5deg); }
.answer-keypoint > span { padding-top: .08rem; color: var(--ink-faint); font-family: var(--serif); font-size: .61rem; letter-spacing: .05em; }
.answer-keypoint > p { margin: 0; }
.answer-source { display: flex; align-items: center; gap: .4rem; margin: .8rem 0 0; color: var(--ink-faint); font-size: .57rem; letter-spacing: .035em; }
.answer-source span { display: inline-block; width: .3rem; height: .3rem; border: 1px solid currentColor; border-radius: 50%; }
.turn-thinking { margin: 1rem 0 .4rem; display: flex; align-items: center; gap: .38rem; color: var(--ink-faint); font-size: .7rem; }
.turn-thinking i { width: .28rem; height: .28rem; background: var(--ink); border-radius: 50%; opacity: .35; animation: ink-pulse 1.25s ease-in-out infinite; }
.turn-thinking i:nth-child(2) { animation-delay: .18s; }.turn-thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes ink-pulse { 50% { transform: scale(1.8); opacity: .86; } }
.dialogue-followup { padding: .85rem 1.3rem .72rem; border-top: 1px solid var(--border-soft); background: var(--surface-soft); }
.dialogue-followup-paper { min-height: 3.65rem; position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; padding: .38rem .38rem .38rem .82rem; border: 1px solid var(--border-strong); background: var(--surface-strong); box-shadow: 0 7px 18px rgba(31,37,35,.08); }
.dialogue-followup-paper::before { content: ""; position: absolute; left: -.2rem; right: .65rem; top: -.22rem; height: .28rem; border-top: 1px solid rgba(23,23,21,.2); transform: skewX(-8deg); opacity: .58; pointer-events: none; }
.dialogue-followup-paper label { position: absolute; top: .28rem; left: .82rem; color: var(--ink-faint); font-size: .57rem; letter-spacing: .055em; pointer-events: none; }
.dialogue-followup-paper input { width: 100%; min-width: 0; padding: .9rem .65rem .1rem 0; border: 0; outline: 0; background: transparent; font-family: var(--serif); font-size: .84rem; }
.dialogue-followup-paper:focus-within { border-color: var(--plum-deep); box-shadow: 0 0 0 3px var(--focus-ring), 0 8px 22px rgba(31,37,35,.1); }
.dialogue-followup-paper .composer-count { left: .82rem; bottom: .22rem; font-size: .52rem; }
.dialogue-followup-paper .voice-dot, .dialogue-followup-paper .send-ink { width: 2.55rem; height: 2.55rem; }
.dialogue-followup-paper .voice-dot { margin-right: .22rem; }
.dialogue-followup-meta { min-height: 1.55rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .55rem; padding: .35rem .1rem 0; color: var(--ink-faint); font-size: .56rem; }
.dialogue-followup-meta button { display: inline-flex; align-items: center; gap: .22rem; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.dialogue-followup-meta .icon { width: .72rem; height: .72rem; }
.dialogue-panel > footer { min-height: 2.3rem; display: flex; gap: .5rem; align-items: center; padding: .58rem 1.3rem; border-top: 1px solid var(--border-soft); color: var(--ink-faint); font-size: .58rem; }
.tiny-dot { width: .3rem; height: .3rem; display: inline-block; border-radius: 50%; background: var(--ink); opacity: .52; }
.history-peek { position: absolute; z-index: 7; left: calc(clamp(5.8rem, 9vw, 9rem) + .2rem); bottom: 2.1rem; display: flex; align-items: center; gap: .4rem; color: var(--ink-soft); font-size: .72rem; }
.history-peek::before { content: ""; position: absolute; width: 2.5rem; height: 2.5rem; left: -.7rem; border: 1px solid var(--ink-hairline); border-radius: 50%; z-index: -1; }
.history-peek:hover::before { background: var(--surface-water); }
.history-drawer { position: absolute; z-index: 12; top: 5.7rem; left: calc(clamp(5.8rem, 9vw, 9rem) - 1.1rem); bottom: 5rem; width: min(340px, calc(100vw - 7rem)); padding: 1.1rem; display: grid; grid-template-rows: auto 1fr auto; }
.history-drawer header { display: flex; justify-content: space-between; align-items: flex-start; padding: .3rem .25rem 1rem; border-bottom: 1px solid var(--ink-hairline); }
.history-drawer header p { margin: 0; font-family: var(--serif); font-size: 1.2rem; letter-spacing: .1em; }
.history-drawer header small { color: var(--ink-faint); font-size: .64rem; }
.history-drawer header button { width: 2rem; height: 2rem; display: grid; place-items: center; }
.history-drawer-list { overflow: auto; padding: .6rem 0; }
.history-entry { width: 100%; display: grid; gap: .35rem; padding: .75rem .5rem; text-align: left; border-bottom: 1px solid rgba(23,23,21,.08); }
.history-entry:hover, .history-entry.is-current { background: var(--surface-water); }
.history-entry span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: .83rem; }
.history-entry small { color: var(--ink-faint); font-size: .64rem; }
.empty-note { padding: 1rem .5rem; color: var(--ink-faint); font-family: var(--serif); font-size: .8rem; line-height: 1.8; }
.drawer-new { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.8rem; margin-top: .5rem; border-top: 1px solid var(--ink-hairline); font-size: .78rem; }

.ink-composer { position: fixed; z-index: 16; left: 50%; bottom: clamp(1.2rem, 3vw, 2.5rem); width: min(610px, calc(100vw - 8rem)); transform: translateX(-50%); }
.composer-paper { min-height: 4.75rem; position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; padding: .55rem .55rem .55rem 1.15rem; border: 1px solid var(--border-strong); background: var(--surface-strong); box-shadow: 0 10px 26px rgba(31,37,35,.12); }
.composer-paper::before, .composer-paper::after { content: ""; position: absolute; pointer-events: none; }
.composer-paper::before { inset: -4px 2px auto -4px; height: 7px; border-top: 1px solid rgba(23,23,21,.22); transform: skewX(-7deg); opacity: .65; }
.composer-paper::after { inset: auto -6px -4px 4px; height: 7px; border-bottom: 1px solid rgba(23,23,21,.22); transform: skewX(-8deg); opacity: .46; }
.composer-paper label { position: absolute; top: .42rem; left: 1.15rem; color: var(--ink-faint); font-size: .62rem; letter-spacing: .05em; pointer-events: none; }
.composer-paper input { width: 100%; min-width: 0; padding: 1.1rem 1rem .2rem 0; border: 0; outline: 0; background: transparent; font-family: var(--serif); font-size: .98rem; }
.composer-paper:focus-within { border-color: var(--plum-deep); box-shadow: 0 0 0 3px var(--focus-ring), 0 12px 34px rgba(31,37,35,.14); }
.composer-count { position: absolute; left: 1.15rem; bottom: .42rem; color: var(--ink-faint); font-size: .58rem; }
.voice-dot, .send-ink { width: 2.95rem; height: 2.95rem; display: grid; place-items: center; border-radius: 50%; }
.voice-dot { margin-right: .32rem; border: 1px solid var(--border-soft); color: var(--ink-soft); }
.voice-dot:hover { background: var(--surface-water); }
.send-ink { color: var(--paper-bright); background: var(--ink-950); transition: transform .2s ease; }
.send-ink:hover:not(:disabled) { transform: rotate(-8deg) scale(1.04); }
.send-ink:disabled { opacity: .25; cursor: not-allowed; }
.send-ink .icon { width: 1.25rem; height: 1.25rem; }
.send-spinner { width: 1rem; height: 1rem; border: 1px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.composer-meta { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem .65rem 0; color: var(--ink-faint); font-size: .63rem; }
.composer-meta button { display: inline-flex; align-items: center; gap: .25rem; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
.composer-meta button .icon { width: .8rem; height: .8rem; }

/* Inner product pages */
.inner-layout { min-height: 100svh; padding: 9rem clamp(1.5rem, 7vw, 10rem) 4rem clamp(6.3rem, 11vw, 12rem); }
.inner-heading { width: min(100%, 680px); margin-bottom: clamp(2rem, 5vw, 4.6rem); text-shadow: var(--scene-copy-shadow); }
.inner-heading h1 { margin: .45rem 0 .9rem; font-family: var(--serif); font-size: clamp(2.4rem, 4.5vw, 4.8rem); line-height: 1.15; letter-spacing: .06em; font-weight: 600; }
.inner-heading > p:last-child { margin: 0; max-width: 42rem; color: var(--ink-soft); font-family: var(--serif); line-height: 1.8; letter-spacing: .035em; }
.inner-content { max-width: 1120px; }

/* Page-specific composition: keep copy on authored paper/sky, not dense foreground ink. */
html[data-view="history"] .inner-layout { padding: 7.5rem clamp(1.5rem, 6vw, 7.5rem) 3rem clamp(11rem, 15.5vw, 16rem); }
html[data-view="history"] .inner-heading { position: relative; z-index: 1; width: min(100%, 720px); margin-bottom: 2.25rem; padding: 0; }
html[data-view="history"] .inner-heading h1 { margin-top: .35rem; }
html[data-view="history"] .inner-content { position: relative; z-index: 1; }

html[data-view="membership"] .inner-layout { padding-top: 6.9rem; padding-bottom: 2.25rem; }
html[data-view="membership"] .inner-heading { width: min(100%, 760px); margin-bottom: 1.15rem; }
html[data-view="membership"] .inner-heading h1 { margin: .32rem 0 .65rem; font-size: clamp(2.35rem, 4.15vw, 4.35rem); }
html[data-view="membership"] .membership-layout { gap: .85rem; }
html[data-view="membership"] .membership-lead { padding-bottom: .8rem; }
html[data-view="membership"] .plan-card { min-height: 345px; padding: 1.25rem; gap: .9rem; }
html[data-view="membership"] .plan-card header { min-height: 6.7rem; }
html[data-view="membership"] .plan-card header p { margin-bottom: .6rem; }
html[data-view="membership"] .plan-card h2 { margin-bottom: .5rem; font-size: 1.82rem; }
.account-overview { display: grid; grid-template-columns: minmax(270px,.82fr) minmax(360px,1.25fr); gap: 1.25rem; }
.identity-card { min-height: 260px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.identity-card > div { display: flex; align-items: center; gap: 1rem; }
.identity-card p { margin: 0 0 .25rem; color: var(--ink-soft); font-size: .8rem; }
.identity-card h2 { margin: 0 0 .25rem; font-family: var(--serif); font-weight: 600; font-size: 1.9rem; letter-spacing: .08em; }
.identity-card small { color: var(--ink-faint); font-size: .68rem; }
.outline-button, .quiet-button { min-height: 2.6rem; padding: .6rem 1rem; border: 1px solid var(--ink-hairline); font-size: .78rem; }
.outline-button { align-self: flex-start; }
.outline-button:hover, .quiet-button:hover { background: rgba(255,255,255,.65); }
.usage-panel { padding: 1.5rem; }
.usage-panel-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ink-hairline); }
.usage-panel-head p { margin: 0; font-family: var(--serif); font-size: 1.25rem; letter-spacing: .08em; }
.usage-panel-head small { color: var(--ink-faint); font-size: .65rem; }
.quota-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.55rem 0 1.25rem; }
.quota-pairs > div { display: flex; align-items: center; gap: .75rem; }
.quota-pairs p { margin: 0; color: var(--ink-soft); font-family: var(--serif); }
.ink-meter { --meter: .5; width: 4.5rem; height: 4.5rem; display: grid; place-content: center; position: relative; font-family: var(--serif); }
.ink-meter::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--ink) calc(var(--meter) * 1turn), rgba(23,23,21,.12) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); transform: rotate(-72deg); }
.ink-meter b { font-size: 1.45rem; font-weight: 600; line-height: 1; }.ink-meter i { color: var(--ink-faint); font-style: normal; font-size: .7rem; }
.usage-action { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding-top: 1rem; border-top: 1px solid var(--ink-hairline); color: var(--ink-soft); font-size: .75rem; line-height: 1.6; }
.usage-action p { margin: 0; }.usage-action strong { color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: .25rem; color: var(--ink); font-size: .76rem; text-decoration: underline; text-underline-offset: .24em; }
.text-link .icon { width: .85rem; height: .85rem; }
.account-shortcuts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .2rem; }
.shortcut-card { min-height: 7.2rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1.1rem; border-top: 1px solid var(--ink-hairline); border-bottom: 1px solid var(--ink-hairline); background: rgba(255,255,253,.3); text-align: left; }
.shortcut-card:hover { background: rgba(255,255,253,.75); }.shortcut-card > span { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--ink-hairline); border-radius: 50%; }.shortcut-card div { display: grid; gap: .22rem; }.shortcut-card strong { font-family: var(--serif); font-size: .95rem; font-weight: 600; }.shortcut-card small { color: var(--ink-faint); font-size: .65rem; }

.membership-layout { display: grid; gap: 1.4rem; }.membership-lead { display: flex; align-items: flex-end; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--ink-hairline); }.membership-lead p { margin: 0 0 .25rem; color: var(--ink-faint); font-size: .7rem; }.membership-lead h2 { margin: 0; font-family: var(--serif); font-size: 1.65rem; letter-spacing: .08em; }.membership-lead span { padding-bottom: .2rem; color: var(--ink-soft); font-size: .72rem; }
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 1px; overflow: hidden; border: 1px solid var(--ink-hairline); background: var(--ink-hairline); }
.plan-card { position: relative; min-height: 395px; padding: 1.45rem; display: flex; flex-direction: column; gap: 1.2rem; overflow: hidden; background: rgba(250,249,245,.8); }.plan-card::after { content: ""; position: absolute; bottom: -22%; left: -14%; width: 128%; height: 34%; opacity: .12; background: radial-gradient(ellipse at 50% 100%, var(--ink) 0 18%, transparent 19% 37%, var(--ink) 38% 40%, transparent 41%); transform: rotate(-3deg); }.plan-card.is-annual { background: rgba(238,237,231,.92); }.plan-card.is-current { box-shadow: inset 0 0 0 2px var(--ink); }.plan-card > * { position: relative; z-index: 1; }.plan-card header { min-height: 8rem; }.plan-card header p { margin: 0 0 .8rem; color: var(--ink-faint); font-size: .67rem; letter-spacing: .12em; }.plan-card h2 { margin: 0 0 .7rem; font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: .08em; }.plan-card header span { color: var(--ink-soft); font-size: .76rem; }.plan-card ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .76rem; line-height: 1.5; }.plan-card li { display: flex; gap: .45rem; }.plan-card li .icon { width: .9rem; height: .9rem; }.plan-card .ink-button { margin-top: auto; }.plan-current { margin-top: auto; display: inline-flex; width: fit-content; padding: .4rem .55rem; background: var(--ink); color: var(--paper); font-size: .67rem; }.membership-note { margin: 0; color: var(--ink-faint); font-size: .7rem; line-height: 1.75; }

.checkout-layout { display: grid; grid-template-columns: minmax(280px,.9fr) minmax(260px,.55fr); gap: clamp(1.5rem, 6vw, 7rem); align-items: center; }.checkout-receipt { min-height: 420px; padding: clamp(1.6rem, 4vw, 3rem); }.checkout-receipt h2 { margin: .8rem 0 2rem; font-family: var(--serif); font-size: 2.4rem; letter-spacing: .08em; }.checkout-receipt ul { display: grid; gap: .7rem; padding: 0; margin: 0; list-style: none; color: var(--ink-soft); font-size: .82rem; }.checkout-receipt li { display: flex; gap: .5rem; }.checkout-receipt li .icon { width: .95rem; }.receipt-total { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--ink-hairline); }.receipt-total span { color: var(--ink-soft); font-size: .75rem; }.receipt-total strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }.checkout-receipt small { display: block; margin-top: 1.1rem; color: var(--ink-faint); font-size: .68rem; line-height: 1.7; }.checkout-action { display: grid; gap: 1rem; }.checkout-action p { margin: 0; color: var(--ink-soft); font-family: var(--serif); line-height: 1.8; }.checkout-action .quiet-button { justify-self: start; }

.order-list { max-width: 860px; }.order-list article { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--ink-hairline); }.order-list article:last-child { border-bottom: 0; }.order-list article p { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1rem; }.order-list article small { color: var(--ink-faint); font-size: .65rem; }.status { display: inline-flex; width: fit-content; align-items: center; padding: .32rem .45rem; border: 1px solid var(--ink-hairline); color: var(--ink-soft); font-size: .66rem; }.status-paid, .status-active { color: var(--paper); border-color: var(--ink); background: var(--ink); }.status-locked { opacity: .65; }.empty-paper { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; color: var(--ink-soft); font-family: var(--serif); }

.share-layout { display: grid; grid-template-columns: minmax(330px,1fr) minmax(190px,.4fr); gap: clamp(1.5rem, 6vw, 7rem); align-items: center; }.share-composition { min-height: 410px; padding: clamp(1.7rem, 4vw, 3.2rem); overflow: hidden; }.share-composition h2 { max-width: 27rem; margin: .7rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.28; letter-spacing: .06em; font-weight: 600; }.share-composition > p:not(.eyebrow) { max-width: 32rem; color: var(--ink-soft); font-family: var(--serif); line-height: 1.85; }.share-composition .ink-button, .share-composition .quiet-button { margin-top: 1.4rem; }.share-rewarded { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; padding: .75rem; border: 1px solid var(--ink-hairline); font-family: var(--serif); }.share-rewarded .icon { width: 1rem; }.share-rule { padding-left: 1.1rem; border-left: 1px solid var(--ink-hairline); color: var(--ink-soft); font-family: var(--serif); font-size: .8rem; line-height: 1.8; }.share-rule p { margin: 0 0 .5rem; color: var(--ink); font-size: .93rem; }

.about-layout { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(280px, .66fr); gap: clamp(1.7rem, 7vw, 8rem); align-items: center; }.about-manifesto { min-height: 430px; padding: clamp(1.7rem, 4.2vw, 3.4rem); overflow: hidden; }.about-manifesto::after { content: none; }.about-manifesto h2 { max-width: 32rem; margin: .72rem 0 1.1rem; font-family: var(--serif); font-size: clamp(2.25rem, 4.2vw, 3.8rem); font-weight: 600; line-height: 1.22; letter-spacing: .065em; }.about-manifesto > p:not(.eyebrow) { max-width: 32rem; margin: 0; color: var(--ink-soft); font-family: var(--serif); line-height: 1.95; }.about-manifesto .ink-button { margin-top: 1.5rem; }.about-principles { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }.about-principles li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--ink-hairline); }.about-principles li:last-child { padding-bottom: 0; border-bottom: 0; }.about-principles b { color: var(--ink-faint); font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }.about-principles h3 { margin: .05rem 0 .35rem; font-family: var(--serif); font-size: 1.23rem; font-weight: 600; letter-spacing: .06em; }.about-principles p { margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: .8rem; line-height: 1.85; }

.history-page-list { display: grid; gap: .75rem; max-width: 860px; }.history-paper { padding: 1rem 1.2rem; }.history-paper > button:first-child { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 0; text-align: left; }.history-paper > button:first-child span { font-family: var(--serif); font-size: 1.15rem; letter-spacing: .04em; }.history-paper > small { display: block; margin-top: .35rem; color: var(--ink-faint); font-size: .65rem; }.history-paper > div { display: grid; gap: .28rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--ink-hairline); color: var(--ink-soft); font-family: var(--serif); font-size: .76rem; line-height: 1.6; }.history-paper > div p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.paper-delete { margin-top: .8rem; color: var(--ink-faint); font-size: .65rem; text-decoration: underline; text-underline-offset: .2em; }

.history-center { width: min(100%, 1040px); display: grid; gap: 1rem; }
.history-center-bar { min-height: 3.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .2rem .85rem; border-bottom: 1px solid var(--ink-hairline); }
.history-center-bar > div { display: flex; align-items: baseline; gap: .65rem; }
.history-center-bar span, .history-center-bar small { color: var(--ink-faint); font-size: .66rem; letter-spacing: .06em; }
.history-center-bar strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.history-list { display: grid; border-top: 1px solid rgba(23,23,21,.2); }
.history-row { display: grid; grid-template-columns: 5.4rem minmax(0,1fr) auto; gap: 1.1rem; align-items: center; min-height: 8.4rem; padding: 1.15rem 1.25rem; border-width: 0 0 1px; box-shadow: none; background: rgba(255,255,253,.48); }
.history-row:hover, .history-row.is-replying { background: rgba(255,255,253,.76); }
.history-index { align-self: stretch; display: grid; align-content: space-between; padding-right: 1rem; border-right: 1px solid var(--ink-hairline); }
.history-index b { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; }
.history-index span { color: var(--ink-faint); font-size: .61rem; line-height: 1.4; }
.history-row-body { min-width: 0; display: grid; gap: .75rem; }
.history-row-open { min-width: 0; display: grid; gap: .42rem; text-align: left; }
.history-row-open strong { overflow: hidden; color: var(--ink); font-family: var(--serif); font-size: 1.08rem; font-weight: 600; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.history-row-open > span { overflow: hidden; color: var(--ink-soft); font-family: var(--serif); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.history-row-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--ink-faint); font-size: .61rem; }
.history-row-actions { display: grid; justify-items: end; gap: .55rem; }
.history-row-actions button { min-width: 5rem; padding: .45rem .5rem; border: 1px solid var(--ink-hairline); color: var(--ink-soft); font-size: .65rem; }
.history-row-actions button:first-child { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.history-row-actions button:hover { transform: translateY(-1px); }
.history-followup { grid-column: 2 / -1; display: grid; gap: .48rem; padding-top: 1.05rem; border-top: 1px solid var(--ink-hairline); }
.history-followup > label { color: var(--ink-soft); font-family: var(--serif); font-size: .74rem; }
.history-followup > div { min-height: 3.2rem; display: grid; grid-template-columns: 1fr auto; border: 1px solid rgba(23,23,21,.28); background: rgba(255,255,253,.5); }
.history-followup input { min-width: 0; border: 0; outline: 0; padding: .72rem .85rem; background: transparent; font-family: var(--serif); }
.history-followup button { min-width: 7.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .65rem .8rem; color: var(--paper); background: var(--ink); font-family: var(--serif); }
.history-followup button:disabled { opacity: .28; cursor: not-allowed; }
.history-followup .icon { width: .9rem; }
.history-followup small { color: var(--ink-faint); font-size: .61rem; }

.benefit-page { display: grid; grid-template-columns: minmax(310px,.9fr) minmax(260px,.7fr); gap: clamp(1.5rem, 6vw, 6rem); align-items: center; }.benefit-hero { min-height: 400px; padding: clamp(1.6rem, 4vw, 3rem); }.benefit-hero h2 { margin: .75rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 3.7vw, 3.5rem); letter-spacing: .06em; }.benefit-hero > p:not(.eyebrow) { max-width: 30rem; color: var(--ink-soft); font-family: var(--serif); line-height: 1.9; }.benefit-status { position: absolute; right: 1.5rem; bottom: 1.4rem; max-width: 16rem; padding-top: .8rem; border-top: 1px solid var(--ink-hairline); color: var(--ink-soft); font-size: .72rem; line-height: 1.7; }.benefit-status strong { color: var(--ink); }.address-form { display: grid; gap: 1rem; }.address-form .ink-button { justify-self: start; min-width: 10rem; }

.advanced-page { display: grid; grid-template-columns: minmax(330px,1fr) minmax(280px,.65fr); gap: clamp(1.5rem, 6vw, 6rem); }.advanced-ink { min-height: 350px; padding: clamp(1.6rem, 4vw, 3rem); }.advanced-ink h2 { margin: .7rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3.3rem); line-height: 1.32; letter-spacing: .06em; }.advanced-ink > p:not(.eyebrow) { max-width: 34rem; color: var(--ink-soft); font-family: var(--serif); line-height: 1.85; }.advanced-ink .status { margin-top: 1rem; }.advanced-list { display: grid; align-content: center; gap: 1.2rem; }.advanced-list article { display: grid; grid-template-columns: 2.8rem 1fr; gap: .7rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--ink-hairline); }.advanced-list b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }.advanced-list h3 { margin: .15rem 0 .4rem; font-family: var(--serif); font-size: 1.2rem; }.advanced-list p { margin: 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.75; }

.concierge-page { display: grid; grid-template-columns: minmax(330px,1fr) minmax(240px,.55fr); gap: clamp(1.5rem, 6vw, 6rem); }.concierge-intro { padding: clamp(1.7rem, 4vw, 3rem); }.concierge-intro h2 { margin: .7rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3.3rem); line-height: 1.32; letter-spacing: .06em; }.concierge-intro > p:not(.eyebrow) { color: var(--ink-soft); font-family: var(--serif); line-height: 1.85; }.concierge-form { display: grid; gap: .75rem; margin-top: 1.5rem; }.concierge-form textarea, .concierge-form input { width: 100%; border: 1px solid var(--ink-hairline); background: rgba(255,255,253,.42); padding: .8rem; }.concierge-form textarea { min-height: 8rem; }.concierge-form .ink-button { justify-self: start; }.request-list { align-self: end; display: grid; gap: .6rem; }.request-list article { padding: .9rem 0; border-bottom: 1px solid var(--ink-hairline); display: grid; gap: .35rem; }.request-list span { font-family: var(--serif); }.request-list small, .request-list > p { color: var(--ink-faint); font-size: .68rem; }

.security-page { display: grid; gap: .8rem; max-width: 760px; }.security-card { padding: 1rem 1.2rem; }.security-card > p { margin: 0 0 .8rem; color: var(--ink-faint); font-size: .68rem; letter-spacing: .1em; }.security-card > div { display: flex; align-items: center; gap: .7rem; }.security-card strong { font-family: var(--serif); font-size: 1rem; }.security-card small { color: var(--ink-soft); font-size: .72rem; }.security-card .identity-list { flex-wrap: wrap; }.identity-list span { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .55rem; border: 1px solid var(--ink-hairline); font-size: .74rem; }.identity-list .icon { width: .9rem; }.legal-paper { max-width: 780px; padding: clamp(1.5rem, 4vw, 3rem); }.legal-paper h2 { margin: .7rem 0 1.4rem; font-family: var(--serif); font-size: 2.4rem; letter-spacing: .06em; }.legal-paper h3 { margin: 1.6rem 0 .5rem; font-family: var(--serif); font-size: 1.2rem; }.legal-paper p { color: var(--ink-soft); font-family: var(--serif); line-height: 1.95; }

/* Overlay feedback */
.toast-region { position: fixed; z-index: 80; top: 1rem; left: 50%; display: grid; gap: .5rem; width: min(420px, calc(100vw - 2rem)); transform: translateX(-50%); pointer-events: none; }.toast { padding: .85rem 1rem; border: 1px solid var(--ink-hairline); color: var(--ink); background: rgba(255,255,253,.94); box-shadow: 0 10px 28px rgba(20,20,17,.13); text-align: center; font-family: var(--serif); font-size: .78rem; }.toast-success { border-color: rgba(23,23,21,.35); }.toast-warning { background: #efeee8; }.modal-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(17,17,15,.24); backdrop-filter: blur(4px); }.modal-paper { width: min(480px, 100%); padding: 2rem; }.modal-close { position: absolute; top: .75rem; right: .75rem; width: 2rem; height: 2rem; display: grid; place-items: center; }.oauth-modal { display: grid; justify-items: start; gap: .9rem; }.oauth-mark { width: 2rem; height: 2rem; }.oauth-modal h2, .modal-form h2 { margin: 0; font-family: var(--serif); font-size: 2rem; letter-spacing: .06em; }.oauth-modal > p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-family: var(--serif); line-height: 1.8; }.oauth-modal > div { display: flex; align-items: center; gap: .7rem; margin-top: .35rem; }.modal-form { display: grid; gap: .9rem; }.modal-form input { min-height: 3rem; border: 1px solid var(--ink-hairline); background: rgba(255,255,253,.48); padding: .75rem; }

.auth-accounts > span { display: grid; gap: .18rem; }
.auth-accounts small { color: var(--ink-faint); font-size: .62rem; }
.redeem-key-form > p:not(.eyebrow) { margin: -.2rem 0 .25rem; color: var(--ink-soft); font-family: var(--serif); font-size: .76rem; line-height: 1.75; }
.redeem-key-form > label { color: var(--ink-soft); font-family: var(--serif); font-size: .78rem; }
.redeem-key-form > small { color: var(--ink-faint); font-size: .63rem; }
.redeem-current { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink-hairline); }
.redeem-current span { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .72rem; color: var(--ink-soft); font-size: .68rem; }
.redeem-current span + span { border-left: 1px solid var(--ink-hairline); }
.redeem-current b { color: var(--ink); font-family: var(--serif); font-size: 1rem; }

/* Approved concept palette applied locally to product surfaces, never as a full-page wash. */
.outline-button:hover, .quiet-button:hover { background: var(--surface-water); }
.history-list { border-top-color: var(--border-strong); }
.history-row { border-color: var(--border-soft); background: var(--surface-soft); }
.history-row:hover, .history-row.is-replying { background: var(--surface-strong); }
.history-followup > div { border-color: var(--border-strong); background: var(--surface-strong); }
.history-followup > div:focus-within { border-color: var(--plum-deep); box-shadow: 0 0 0 3px var(--focus-ring); }
.history-followup button { color: var(--paper-bright); background: var(--ink-950); }
.history-row-actions [data-action="delete-conversation"], .paper-delete { color: var(--danger); }
.history-row-actions [data-action="delete-conversation"]:hover, .paper-delete:hover { background: var(--danger-soft); border-color: var(--danger); }
.plan-cards { border-color: var(--border-soft); background: var(--border-soft); }
.plan-card { background: var(--surface-soft); }
.plan-card.is-annual { background: linear-gradient(145deg, var(--dawn-light), var(--surface-strong)); }
.plan-card.is-current { box-shadow: inset 0 0 0 2px var(--ink-950); }
.plan-current { color: var(--paper-bright); background: var(--ink-950); }
.share-composition { background: linear-gradient(135deg, var(--surface-strong), var(--surface-water)); }
.share-rewarded { border-color: var(--border-strong); background: var(--surface-water); }
.share-rule { border-color: var(--border-soft); }
.toast { color: var(--ink-950); border-color: var(--border-soft); background: var(--surface-strong); }
.toast-success { border-color: var(--success); box-shadow: inset 3px 0 0 var(--success), 0 10px 28px rgba(31,37,35,.11); }
.toast-warning { border-color: var(--warning); background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--paper-bright); }
.modal-backdrop { background: var(--scrim); }
.modal-paper { border-color: var(--border-soft); background: linear-gradient(145deg, var(--surface-strong), var(--surface-soft)); }
.modal-form input { border-color: var(--border-strong); background: var(--surface-strong); }
.modal-form input:focus { border-color: var(--plum-deep); box-shadow: 0 0 0 3px var(--focus-ring); }
.auth-paper {
  background:
    radial-gradient(circle at 84% 10%, rgba(248,234,216,.5), transparent 42%),
    linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
}
.void-copy { text-shadow: none; }
.void-copy h1 { text-shadow: 0 1px 0 rgba(255,253,248,.62); }
.semantic-field > svg { filter: drop-shadow(0 0 8px rgba(255,253,248,.94)); }
.semantic-field > svg circle {
  fill: rgba(255,253,248,.96);
  filter: drop-shadow(0 0 5px rgba(255,253,248,1));
}
.shortcut-card { background: var(--surface-soft); }
.shortcut-card:hover { background: var(--surface-water); }
.about-manifesto {
  background:
    radial-gradient(circle at 82% 15%, rgba(248,234,216,.46), transparent 45%),
    linear-gradient(145deg, var(--surface-strong), var(--surface-water));
}
.concierge-form textarea, .concierge-form input { background: var(--surface-strong); }

@media (min-width: 761px) {
  /* M26 seasonal surfaces and scene-copy safety */
  .inner-layout .ink-button,
  .history-row-actions button:first-child,
  .history-followup button {
    color: var(--paper-bright);
    background: var(--theme-accent);
  }
  .inner-layout .ink-button:hover,
  .history-row-actions button:first-child:hover,
  .history-followup button:hover {
    background: var(--ink-950);
  }
  .inner-heading .eyebrow,
  .inner-heading > p:last-child,
  .membership-lead,
  .history-center-bar,
  .membership-note,
  .share-rule,
  .about-principles {
    text-shadow: var(--scene-copy-shadow);
  }
  .history-row,
  .history-followup > div,
  .identity-card,
  .usage-panel,
  .shortcut-card,
  .checkout-receipt,
  .benefit-hero,
  .advanced-ink,
  .concierge-intro,
  .security-card,
  .legal-paper {
    border-color: var(--border-soft);
  }
  html[data-view="history"] .history-row {
    background:
      linear-gradient(102deg, rgba(226, 239, 231, 0.78), rgba(210, 228, 220, 0.62));
    box-shadow: none;
  }
  html[data-view="history"] .history-row:hover,
  html[data-view="history"] .history-row.is-replying {
    background:
      linear-gradient(102deg, rgba(241, 248, 244, 0.92), rgba(218, 234, 227, 0.82));
  }
  html[data-view="history"] .history-center-bar {
    border-color: var(--border-strong);
  }
  html[data-view="share"] .share-composition {
    background:
      radial-gradient(circle at 82% 16%, rgba(186, 213, 222, 0.52), transparent 45%),
      linear-gradient(135deg, var(--surface-strong), var(--surface-water));
  }
  html[data-view="share"] .share-rule {
    padding: 1.05rem 1.1rem;
    color: var(--ink-soft);
    border: 0;
    border-left: 1px solid var(--border-strong);
    background:
      linear-gradient(
        90deg,
        rgba(239, 247, 249, 0.8),
        rgba(226, 238, 242, 0.32) 68%,
        transparent
      );
    box-shadow: none;
    backdrop-filter: blur(3px);
  }
  html[data-view="share"] .quiet-button {
    border-color: var(--border-strong);
  }
  html[data-view="about"] .about-manifesto {
    background: url("./assets/scenes-m29/about-natural-water-panel-m29-r10.png") center center / cover no-repeat;
  }
  html[data-view="about"] .about-manifesto::before {
    content: none;
  }
  html[data-view="about"] .about-principles {
    padding: 1rem 1.05rem .95rem .9rem;
    background:
      linear-gradient(
        90deg,
        rgba(238, 247, 251, 0.66),
        rgba(219, 235, 242, 0.2) 72%,
        transparent
      );
  }

  /* M26 membership surfaces */
  html[data-view="membership"] .membership-lead {
    border-color: var(--border-strong);
  }
  html[data-view="membership"] .plan-cards {
    border-color: var(--border-strong);
    background: var(--border-soft);
    box-shadow: 0 14px 38px rgba(45, 35, 19, 0.11);
  }
  html[data-view="membership"] .plan-card {
    color: var(--ink-950);
    border-color: var(--border-soft);
    background:
      linear-gradient(rgba(138, 96, 51, 0.018), rgba(138, 96, 51, 0.018)),
      linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
    backdrop-filter: blur(var(--surface-blur));
  }
  html[data-view="membership"] .plan-card:nth-child(2) {
    background:
      linear-gradient(rgba(138, 96, 51, 0.045), rgba(138, 96, 51, 0.045)),
      linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
  }
  html[data-view="membership"] .plan-card.is-annual {
    background:
      linear-gradient(rgba(138, 96, 51, 0.075), rgba(138, 96, 51, 0.075)),
      linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
  }
  html[data-view="membership"] .plan-card.is-current {
    box-shadow: inset 0 0 0 1px var(--theme-accent);
  }
  html[data-view="membership"] .plan-current,
  html[data-view="membership"] .plan-card .ink-button {
    color: #fffaf0;
    background: var(--theme-accent);
  }
  html[data-view="membership"] .membership-note {
    width: fit-content;
    padding: .28rem .48rem;
    color: var(--ink-soft);
    background: rgba(244, 232, 207, 0.66);
    border-left: 2px solid var(--theme-accent);
  }
  /* M26 membership surfaces end */

  /*
   * M27 keeps the seasonal scenery, but restores the working surfaces to the
   * original paper-and-ink product palette.  The local variables deliberately
   * stop at the content modules so the summer and autumn atmosphere can still
   * color the surrounding scene copy.
   */
  /* M27 neutral history surfaces */
  html[data-view="history"] .history-center {
    --ink-950: #1f2523;
    --ink-800: #343c39;
    --ink-700: #4e5854;
    --ink-600: #69736f;
    --ink-soft: rgba(31, 37, 35, 0.68);
    --ink-faint: rgba(31, 37, 35, 0.48);
    --theme-accent: #1f2523;
    --plum-deep: #8d3329;
    --surface-strong: rgba(255, 253, 248, 0.9);
    --surface-soft: rgba(245, 240, 231, 0.74);
    --surface-water: rgba(231, 232, 225, 0.66);
    --border-soft: rgba(31, 37, 35, 0.16);
    --border-strong: rgba(31, 37, 35, 0.36);
    --focus-ring: rgba(141, 51, 41, 0.32);
    --danger: rgba(31, 37, 35, 0.58);
    --danger-soft: rgba(31, 37, 35, 0.055);
    color: var(--ink-950);
  }
  html[data-view="history"] .history-row {
    background: var(--surface-soft);
  }
  html[data-view="history"] .history-row:hover,
  html[data-view="history"] .history-row.is-replying {
    background: var(--surface-strong);
  }
  html[data-view="history"] .history-row-actions button:first-child,
  html[data-view="history"] .history-followup button {
    border-color: var(--ink-950);
    color: var(--paper-bright);
    background: var(--ink-950);
  }
  html[data-view="history"] .history-row-actions [data-action="delete-conversation"] {
    color: var(--danger);
    border-color: var(--border-soft);
    background: rgba(255, 253, 248, 0.22);
  }
  html[data-view="history"] .history-row-actions [data-action="delete-conversation"]:hover {
    color: var(--ink-950);
    border-color: var(--border-strong);
    background: var(--danger-soft);
  }
  /* M27 neutral history surfaces end */

  /* M27 neutral membership surfaces */
  html[data-view="membership"] .plan-cards {
    --ink-950: #1f2523;
    --ink-800: #343c39;
    --ink-700: #4e5854;
    --ink-600: #69736f;
    --ink-soft: rgba(31, 37, 35, 0.68);
    --ink-faint: rgba(31, 37, 35, 0.46);
    --theme-accent: #1f2523;
    --surface-strong: rgba(255, 253, 248, 0.84);
    --surface-soft: rgba(245, 240, 231, 0.72);
    --surface-water: rgba(231, 232, 225, 0.64);
    --border-soft: rgba(31, 37, 35, 0.16);
    --border-strong: rgba(31, 37, 35, 0.34);
    border-color: var(--border-strong);
    background: var(--border-soft);
    box-shadow: 0 14px 38px rgba(31, 37, 35, 0.1);
  }
  html[data-view="membership"] .plan-card,
  html[data-view="membership"] .plan-card:nth-child(2) {
    color: var(--ink-950);
    border-color: var(--border-soft);
    background: linear-gradient(
      145deg,
      rgba(255, 253, 248, 0.86),
      rgba(245, 240, 231, 0.72)
    );
    backdrop-filter: blur(1px);
  }
  html[data-view="membership"] .plan-card.is-annual {
    background: linear-gradient(
      145deg,
      rgba(243, 242, 236, 0.88),
      rgba(255, 253, 248, 0.8)
    );
  }
  html[data-view="membership"] .plan-card.is-current {
    box-shadow: inset 0 0 0 1px var(--ink-950);
  }
  html[data-view="membership"] .plan-current,
  html[data-view="membership"] .plan-card .ink-button {
    color: var(--paper-bright);
    background: var(--ink-950);
  }
  html[data-view="membership"] .membership-note {
    color: rgba(31, 37, 35, 0.68);
    background: rgba(245, 240, 231, 0.7);
    border-left-color: rgba(31, 37, 35, 0.34);
  }
  /* M27 neutral membership surfaces end */

  /*
   * M28 keeps scenery behind the copy, but removes Safari's live backdrop
   * blur and the multi-ring white glow that made small Song text look doubled.
   * Reading surfaces use a denser paper plate and stable, opaque ink instead.
   */
  /* M28 crisp reading surfaces */
  html[data-view="history"],
  html[data-view="account"],
  html[data-view="security"],
  html[data-view="orders"],
  html[data-view="membership"],
  html[data-view="checkout"],
  html[data-view="address"],
  html[data-view="gift"],
  html[data-view="advanced"],
  html[data-view="concierge"],
  html[data-view="share"],
  html[data-view="about"],
  html[data-view="terms"],
  html[data-view="privacy"] {
    --scene-copy-shadow: 0 1px 0 rgba(255, 253, 248, 0.62);
  }

  .question-stage,
  .inner-layout,
  .dialogue-panel,
  .ink-rail {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: auto;
  }

  .ink-rail,
  .rail-label,
  .dialogue-panel,
  .inner-layout .paper-layer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ink-rail {
    background: linear-gradient(
      90deg,
      rgba(255, 253, 248, 0.97) 0%,
      rgba(248, 245, 238, 0.94) 78%,
      rgba(245, 240, 231, 0.86) 100%
    );
  }

  .dialogue-panel {
    background: linear-gradient(
      138deg,
      rgba(255, 253, 248, 0.93),
      rgba(224, 234, 231, 0.86)
    );
  }

  .top-icon-button,
  .profile-trigger,
  .quota-small {
    font-size: 0.78rem;
  }

  .quota-dual span {
    font-size: 0.7rem;
  }

  .quota-dual b {
    font-size: 0.9rem;
  }

  .rail-short {
    font-size: 0.68rem;
  }

  .rail-label b {
    font-size: 0.78rem;
  }

  .rail-label small {
    font-size: 0.64rem;
  }

  .void-copy,
  .semantic-field li,
  .inner-heading,
  .inner-heading .eyebrow,
  .inner-heading > p:last-child,
  .membership-lead,
  .history-center-bar,
  .membership-note,
  .share-rule,
  .about-principles {
    text-shadow: none;
  }

  .void-copy h1,
  .inner-heading h1 {
    text-shadow: var(--scene-copy-shadow);
  }

  .inner-layout .eyebrow {
    font-size: 0.76rem;
  }

  .inner-heading > p:last-child,
  .membership-lead span,
  .history-center-bar span,
  .history-center-bar small,
  .membership-note,
  .share-rule,
  .about-principles p {
    color: var(--ink-700);
  }

  .history-center-bar span,
  .history-center-bar small {
    font-size: 0.76rem;
  }

  .history-row-meta {
    color: rgba(31, 37, 35, 0.72);
    font-size: 0.76rem;
    font-weight: 500;
  }

  .history-index span,
  .history-row-actions button,
  .history-followup small {
    font-size: 0.76rem;
  }

  .history-index span,
  .history-followup small {
    color: var(--ink-700);
    font-weight: 500;
  }

  .history-row-open > span {
    color: var(--ink-700);
    font-size: 0.8rem;
  }

  html[data-view="history"] .history-row {
    background: rgba(255, 253, 248, 0.86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-view="history"] .history-row:hover,
  html[data-view="history"] .history-row.is-replying {
    background: rgba(255, 253, 248, 0.94);
  }

  html[data-view="membership"] .plan-card {
    background: linear-gradient(
      145deg,
      rgba(255, 253, 248, 0.92),
      rgba(245, 240, 231, 0.86)
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-view="membership"] .plan-card:nth-child(2) {
    background: linear-gradient(
      145deg,
      rgba(250, 248, 242, 0.94),
      rgba(240, 238, 231, 0.88)
    );
  }

  html[data-view="membership"] .plan-card.is-annual {
    background: linear-gradient(
      145deg,
      rgba(243, 242, 236, 0.94),
      rgba(255, 253, 248, 0.9)
    );
  }

  html[data-view="membership"] .plan-card header p,
  html[data-view="membership"] .plan-card header span,
  html[data-view="membership"] .membership-note {
    font-size: 0.78rem;
  }

  html[data-view="membership"] .membership-lead p,
  html[data-view="membership"] .membership-lead span,
  html[data-view="membership"] .plan-current {
    font-size: 0.78rem;
  }

  html[data-view="membership"] .plan-card ul {
    font-size: 0.82rem;
  }

  html[data-view="share"] .share-composition {
    background:
      radial-gradient(circle at 82% 16%, rgba(186, 213, 222, 0.26), transparent 48%),
      linear-gradient(
        135deg,
        rgba(247, 251, 251, 0.93),
        rgba(221, 234, 238, 0.88)
      );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-view="share"] .share-rule {
    color: var(--ink-700);
    font-size: 0.84rem;
    line-height: 1.75;
    background: linear-gradient(
      90deg,
      rgba(239, 247, 249, 0.9),
      rgba(226, 238, 242, 0.72)
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-view="share"] .share-rule p {
    font-size: 0.96rem;
  }

  html[data-view="about"] .about-manifesto,
  html[data-view="about"] .about-principles {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* M28 crisp reading surfaces end */
}

@media (max-width: 1050px) {
  .dialogue-panel { width: min(38vw, 420px); }
  .keyword-field { left: 5.8rem; width: 48vw; }
  .account-overview { grid-template-columns: 1fr; }.account-shortcuts { grid-template-columns: repeat(3,1fr); }
  .plan-cards { grid-template-columns: 1fr; }.plan-card, html[data-view="membership"] .plan-card { min-height: auto; }.plan-card header, html[data-view="membership"] .plan-card header { min-height: auto; }.plan-card .ink-button, .plan-current { margin-top: .7rem; align-self: flex-start; }
}

@media (min-width: 761px) and (max-width: 980px) {
  .auth-page { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.5rem; }
  .auth-intro { min-height: 38svh; }
  .auth-poem { align-self: center; justify-self: end; width: min(100%, 35rem); margin: 1rem 0 .7rem; padding-left: 0; font-size: clamp(2.1rem, 5vw, 3rem); }
  .auth-poem p + p { margin-left: clamp(1.2rem, 5vw, 2.8rem); }
  .auth-paper-wrap { min-height: auto; }
  .auth-paper { width: min(100%, 560px); padding: 2.5rem 3.2rem 2.3rem; }
}

@media (max-width: 760px) {
  .auth-page { min-height: 100svh; grid-template-columns: 1fr; padding: 1.15rem; gap: 1.6rem; }.auth-intro { min-height: 34svh; padding: .3rem; }.auth-poem { align-self: center; justify-self: start; width: 100%; margin: 1.4rem 0 .9rem; padding-left: clamp(.5rem, 5vw, 1.4rem); font-size: clamp(1.7rem, 7.4vw, 2.6rem); line-height: 1.36; letter-spacing: .07em; }.auth-poem p + p { margin-left: clamp(.8rem, 6vw, 1.8rem); }.auth-pulse { font-size: .65rem; letter-spacing: .06em; }.auth-paper-wrap { display: block; }.auth-paper { width: 100%; padding: 1.7rem 1.2rem 1.6rem; }.auth-paper-stamp { width: 2.2rem; height: 2.2rem; margin-bottom: 1.2rem; }.auth-paper h1 { font-size: 2.1rem; margin-bottom: 1.5rem; }
  .topbar { height: 4.6rem; padding: .7rem 1rem .7rem 1rem; }.topbar .brand-copy small { display: none; }.topbar .brand-mark { width: 2rem; height: 2rem; }.topbar .brand-copy strong { font-size: .95rem; }.topbar-actions { gap: .35rem; }.profile-trigger-name, .quota-small, .top-icon-button span { display: none; }.top-icon-button { width: 2.1rem; justify-content: center; padding: .3rem; }.history-top { min-width: 2.1rem; }.profile-trigger { padding: .15rem; }.account-flyout { top: 3.9rem; right: 1rem; }
  .ink-rail { display: none; }.question-stage { padding: 4.6rem 1rem 8rem; }html[data-view="app"] .question-stage:not(.has-dialogue) { min-height: 100dvh; height: 100dvh; overflow: hidden; }.question-void { min-height: calc(100svh - 12rem); align-items: start; padding-top: 21vh; }.void-copy { margin: 0; }.void-copy h1 { font-size: clamp(2.35rem, 11vw, 3.5rem); }.void-copy > p:last-child { font-size: .88rem; }.scene-caption { padding-bottom: 11rem; font-size: .7rem; }.question-stage.has-dialogue { padding-bottom: 1.5rem; }.question-stage.has-dialogue .question-void { min-height: 7rem; padding-top: 1.35rem; align-items: start; }.question-stage.has-dialogue .scene-caption { padding: 0; align-self: start; }.question-stage.has-dialogue .dialogue-panel { margin: 0 auto 1.5rem; }.semantic-field { display: none; }.dialogue-panel { position: relative; top: auto; right: auto; width: calc(100% - .35rem); height: auto; max-height: none; margin: 8vh auto 1.5rem; }.dialogue-thread { max-height: 45svh; }.dialogue-panel > header { padding: .9rem; }.dialogue-thread { padding: .25rem .9rem .75rem; }.dialogue-followup { padding: .72rem .82rem .62rem; }.answer-one-line { font-size: 1.22rem; }.history-peek { display: none; }.history-drawer { top: 4.9rem; left: .75rem; right: .75rem; bottom: 4.7rem; width: auto; }.ink-composer { width: calc(100vw - 2rem); bottom: 1.15rem; }.composer-paper { min-height: 4.2rem; padding-left: .85rem; }.composer-paper label { left: .85rem; }.composer-count { left: .85rem; }.voice-dot, .send-ink { width: 2.65rem; height: 2.65rem; }.composer-meta { padding-left: .2rem; padding-right: .2rem; }.composer-meta span:last-child { display: none; }
  .inner-layout, html[data-view="history"] .inner-layout, html[data-view="membership"] .inner-layout { padding: 6.8rem 1rem 2.7rem; }.inner-heading, html[data-view="history"] .inner-heading, html[data-view="membership"] .inner-heading { margin-bottom: 2rem; }.inner-heading h1, html[data-view="membership"] .inner-heading h1 { font-size: 2.35rem; }.inner-heading > p:last-child { font-size: .86rem; }html[data-view="history"] .inner-heading { padding: 0; }.account-shortcuts { grid-template-columns: 1fr; }.shortcut-card { min-height: 5.6rem; }.usage-action { align-items: flex-start; flex-direction: column; }.membership-lead { display: grid; align-items: start; gap: .4rem; }.membership-lead span { padding: 0; }.checkout-layout, .share-layout, .about-layout, .benefit-page, .advanced-page, .concierge-page { grid-template-columns: 1fr; gap: 1.5rem; }.checkout-receipt, .benefit-hero, .advanced-ink, .share-composition, .about-manifesto { min-height: auto; }.share-rule { border-left: 0; border-top: 1px solid var(--ink-hairline); padding: 1rem 0 0; }.order-list article { grid-template-columns: 1fr auto; }.order-list article .text-link { grid-column: 1 / -1; }.history-paper > button:first-child span { font-size: 1rem; }.benefit-status { position: static; margin-top: 2rem; }.advanced-list { gap: .8rem; }.concierge-intro h2 { font-size: 2rem; }
}

@media (max-width: 410px) {
  .auth-page { padding: .8rem; }.auth-paper { padding: 1.4rem 1rem; }.auth-form { gap: .92rem; }.social-auth { font-size: .75rem; }.void-copy h1 { font-size: 2.2rem; }.keyword-field { opacity: .65 !important; }.dialogue-panel > header { gap: .3rem; }.dialogue-panel header small { max-width: 12rem; }.dialogue-new { padding-inline: .5rem; }.dialogue-new span { display: inline; }.composer-paper { padding-left: .75rem; }.composer-paper label, .composer-count { left: .75rem; }.composer-meta { font-size: .58rem; }.quota-pairs { gap: .35rem; }.quota-pairs > div { gap: .4rem; }.ink-meter { width: 3.85rem; height: 3.85rem; }.ink-meter b { font-size: 1.15rem; }.identity-card > div { align-items: flex-start; }.identity-card h2 { font-size: 1.55rem; }
}

@media (max-width: 760px) {
  .quota-dual button { min-width: 2.55rem; padding: .28rem .38rem; }
  .quota-dual span { display: none; }
  .quota-dual b { font-size: .72rem; }
  .void-copy h1 span { white-space: nowrap; }
  .history-center-bar { align-items: flex-end; }
  .history-center-bar > div:first-child { display: grid; gap: .18rem; }
  .history-row { grid-template-columns: 3.2rem minmax(0,1fr); gap: .75rem; min-height: auto; padding: .9rem; }
  .history-index { padding-right: .65rem; }
  .history-index b { font-size: 1.2rem; }
  .history-row-actions { grid-column: 2; display: flex; justify-items: start; justify-content: flex-start; }
  .history-row-actions button { min-width: 0; }
  .history-followup { grid-column: 1 / -1; }
  .history-followup > div { grid-template-columns: 1fr; }
  .history-followup button { min-height: 2.8rem; }
  .auth-footnote.auth-accounts { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .paper-fibers { opacity: .12; }
}