:root {
  color-scheme: dark;
  --bg: #0a0908;
  --bg-2: #0d0b0a;
  --paper: #d7d0c3;
  --paper-dim: #90887e;
  --line: rgba(223, 211, 194, .15);
  --line-strong: rgba(223, 211, 194, .28);
  --red: #7b1716;
  --red-bright: #a52823;
  --ink: #060504;
  --max: 1440px;
  --header-h: 82px;
  --ease: cubic-bezier(.22,.9,.24,1);
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background:
    radial-gradient(circle at 14% 16%, rgba(119, 31, 27, .08), transparent 34%),
    radial-gradient(circle at 80% 6%, rgba(255, 244, 221, .025), transparent 22%),
    var(--bg);
  color: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid rgba(202, 76, 68, .7); outline-offset: 3px; }

#ambientCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .48;
  z-index: 0;
}
.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 1;
  opacity: .08;
  background-image:
    repeating-radial-gradient(circle at 0 0, transparent 0, rgba(255,255,255,.22) 1px, transparent 2px),
    repeating-linear-gradient(12deg, transparent 0 3px, rgba(255,255,255,.08) 4px, transparent 5px 8px);
  background-size: 13px 13px, 19px 19px;
  animation: grainShift 16s steps(8) infinite;
}
@keyframes grainShift { 0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(2%, -1%,0)} 50%{transform:translate3d(-1%, 2%,0)} 75%{transform:translate3d(1%,1%,0)} 100%{transform:translate3d(0,0,0)} }

.site-header {
  position: relative;
  z-index: 20;
  height: var(--header-h);
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { border: 0; background: transparent; padding: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; }
.brand-mark { width: 38px; height: 38px; border: 1px solid rgba(165,40,35,.65); display: grid; place-items: center; color: #c5b7a4; font-family: "Noto Serif CJK TC", "Times New Roman", serif; font-size: 19px; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 12px; letter-spacing: .18em; font-weight: 600; }
.brand-copy small { color: var(--paper-dim); font-size: 9px; letter-spacing: .2em; }
.header-actions { display: flex; gap: 8px; }
.icon-button { border: 1px solid var(--line); background: rgba(10,9,8,.52); min-height: 40px; padding: 0 14px; letter-spacing: .12em; font-size: 10px; cursor: pointer; transition: border .25s ease, background .25s ease; }
.icon-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,.025); }
.sound-off { display: none; }
.icon-button[aria-pressed="false"] .sound-on { display:none; }
.icon-button[aria-pressed="false"] .sound-off { display:inline; }

.app-shell { position: relative; z-index: 5; max-width: var(--max); margin: 0 auto; }
.screen { display: none; min-height: calc(100dvh - var(--header-h)); padding: 0 34px 34px; }
.screen.active { display: block; animation: screenIn .6s var(--ease) both; }
@keyframes screenIn { from { opacity:0; transform:translateY(10px)} to { opacity:1; transform:none } }

.landing-screen { position: relative; }
.landing-grid { min-height: calc(100dvh - var(--header-h) - 88px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 6vw; padding: 54px 2vw 38px; }
.eyebrow, .step-label { color: #9e9385; font-size: 10px; letter-spacing: .3em; margin: 0 0 20px; }
.landing-copy h1 { font-family: Georgia, "Times New Roman", "Noto Serif CJK TC", serif; font-weight: 400; font-size: clamp(54px, 6vw, 102px); line-height: .92; letter-spacing: -.045em; margin: 0; max-width: 900px; }
.landing-copy h1 em { color: #a69887; font-weight: 400; }
.lede { max-width: 620px; margin: 34px 0 0; color: #b7aea2; line-height: 1.9; font-size: 15px; }
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 38px; }
.primary-cta, .secondary-cta, .text-cta { cursor: pointer; min-height: 48px; border: 0; }
.primary-cta { background: #c5b8a6; color: #12100e; padding: 0 20px; letter-spacing: .12em; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 22px; transition: transform .2s ease, background .2s ease; }
.primary-cta:hover { transform: translateY(-1px); background: #ded5c8; }
.secondary-cta { background: transparent; border: 1px solid var(--line); padding: 0 18px; letter-spacing: .12em; font-size: 10px; }
.secondary-cta:hover { border-color: var(--line-strong); }
.text-cta { background: none; color: #aaa094; padding: 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 11px; letter-spacing: .08em; }
.microcopy { margin-top: 22px; color: #706961; font-size: 10px; letter-spacing: .03em; }

.landing-sigil { position: relative; isolation:isolate; aspect-ratio: 1; width: min(40vw, 520px); justify-self: center; display: grid; place-items: center; }
.landing-sigil::before { content:""; position:absolute; z-index:0; inset:15%; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(139,29,25,.24) 0%,rgba(105,16,14,.12) 35%,transparent 70%); filter:blur(14px); animation:sigilBreath 5.6s ease-in-out infinite; }
.sigil-ring { position: absolute; z-index:1; border-radius: 50%; border: 1px solid rgba(151,52,46,.28); box-shadow:inset 0 0 34px rgba(118,24,21,.035),0 0 28px rgba(118,24,21,.055); }
.ring-a { inset: 7%; animation: rotateSlow 36s linear infinite; border-color:rgba(151,52,46,.34); border-style: dashed; }
.ring-b { inset: 20%; animation: rotateSlow 23s linear reverse infinite; border-color:rgba(169,54,48,.31); }
.ring-c { inset: 33%; border-color: rgba(181,48,42,.64); box-shadow: inset 0 0 30px rgba(126,23,20,.07),0 0 92px rgba(130,25,22,.18); }
.sigil-core { position:relative; z-index:2; width: 25%; aspect-ratio: 1; border: 1px solid rgba(184,52,45,.88); background:rgba(64,10,9,.20); box-shadow:inset 0 0 30px rgba(119,22,19,.11),0 0 42px rgba(139,29,25,.22); display: grid; place-items: center; transform: rotate(45deg); }
.sigil-core span { transform: rotate(-45deg); font-family: "Noto Serif CJK TC", serif; font-size: clamp(34px, 5vw, 72px); color: #c4ad99; text-shadow:0 0 20px rgba(167,48,41,.27); }
.sigil-caption { position: absolute; bottom: 2%; color: #6e655c; font-size: 8px; letter-spacing: .26em; }
@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes sigilBreath { 50% { opacity:.72; transform:scale(1.035); filter:blur(18px); } }
.live-strip { border-top: 1px solid var(--line); min-height: 70px; display: flex; align-items: center; gap: 12px; color: #7f776e; font-size: 10px; letter-spacing: .12em; padding: 0 2vw; }
.pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: #8a2a27; box-shadow: 0 0 0 0 rgba(138,42,39,.45); animation: pulse 2.4s infinite; }
@keyframes pulse { 60%{box-shadow:0 0 0 7px rgba(138,42,39,0)} 100%{box-shadow:0 0 0 0 rgba(138,42,39,0)} }

.flow-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(42px, 8vw, 130px); padding: clamp(54px, 8vh, 100px) 2vw 60px; }
.flow-aside { align-self: start; position: sticky; top: 32px; }
.flow-aside h2, .seal-copy h2, .offering-wrap h2, .world-head h2 { font-family: Georgia, "Times New Roman", "Noto Serif CJK TC", serif; font-weight: 400; font-size: clamp(40px, 4.4vw, 70px); line-height: .98; margin: 0; letter-spacing: -.035em; }
.flow-aside > p:not(.step-label) { color: #9a9187; max-width: 390px; line-height: 1.8; font-size: 13px; margin-top: 26px; }
.progress-rail { height: 1px; background: var(--line); margin-top: 40px; max-width: 350px; }
.progress-rail span { display: block; width: var(--p); height: 1px; background: #8f2e2a; }
.flow-panel { align-self: start; max-width: 680px; width: 100%; }
.wide-panel { max-width: 850px; }
.field-label, .choice-fieldset legend { display: block; color: #8d8479; font-size: 10px; letter-spacing: .22em; margin-bottom: 12px; }
.field-help { color: #777067; font-size: 12px; margin: -4px 0 12px; line-height: 1.6; }
.ritual-input, .ritual-textarea { width: 100%; background: rgba(255,255,255,.018); border: 1px solid var(--line); color: #ddd4c7; transition: border .2s ease, background .2s ease; }
.ritual-input { height: 54px; padding: 0 16px; }
.ritual-input.large { height: 68px; font-family: Georgia, serif; font-size: 22px; }
.ritual-textarea { resize: vertical; min-height: 150px; padding: 16px; line-height: 1.75; }
.ritual-input:focus, .ritual-textarea:focus { border-color: rgba(157,79,67,.6); background: rgba(255,255,255,.026); }
.ritual-input::placeholder, .ritual-textarea::placeholder { color: #514c46; }
.choice-fieldset { border: 0; padding: 0; margin: 32px 0 0; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.choice-chip { min-height: 44px; border: 1px solid var(--line); background: rgba(255,255,255,.012); padding: 0 14px; color: #968d82; cursor: pointer; font-size: 12px; transition: .2s ease; }
.choice-chip:hover { border-color: var(--line-strong); color: #c3b9ac; }
.choice-chip.selected { border-color: rgba(156, 56, 51, .72); color: #d2c4b3; background: rgba(122, 26, 24, .12); }
.note-block { margin-top: 28px; padding: 14px 16px; border-left: 1px solid #65302d; background: rgba(94, 28, 25, .06); color: #766e66; font-size: 11px; line-height: 1.7; }
.note-block.warning { color: #8f8177; }
.flow-actions { margin-top: 34px; display: flex; justify-content: space-between; gap: 12px; }
.flow-actions.single-back { justify-content: flex-start; margin-top: 18px; }
.validation { min-height: 18px; color: #b77d76; font-size: 11px; margin: 10px 0 0; }

.emotion-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.emotion-row { --emotion-fill:0%; --emotion-bg-alpha:0; --emotion-bg-soft-alpha:0; --emotion-shadow-alpha:0; --emotion-edge-alpha:0; --emotion-border-alpha:.12; position:relative; overflow:hidden; border:1px solid rgba(143,48,43,var(--emotion-border-alpha)); padding:12px; display:grid; grid-template-columns:110px 1fr 34px; align-items:center; gap:10px; background:linear-gradient(100deg,rgba(112,22,19,var(--emotion-bg-alpha)),rgba(69,10,9,var(--emotion-bg-soft-alpha)) 68%,transparent); box-shadow:inset 0 0 26px rgba(97,12,10,var(--emotion-shadow-alpha)); transition:border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.emotion-row label { font-size: 11px; color: #9f9588; letter-spacing: .06em; }
.emotion-row input { width:100%; accent-color:#8f302b; }
/* Keep the browser's native range mechanics. Replacing the native WebKit
   track/thumb broke continuous press-and-drag on physical touch devices. */
.emotion-row input[type="range"] { appearance:auto; -webkit-appearance:auto; min-height:36px; margin:-9px 0; background:transparent; cursor:ew-resize; touch-action:none; user-select:none; -webkit-user-select:none; }
.emotion-row output { font-variant-numeric: tabular-nums; color: #796f65; font-size: 10px; text-align: right; }
.counter { color: #5f5953; font-size: 10px; text-align: right; margin-top: 6px; }
.spacer { margin-top: 30px; }

.level-list { display: grid; gap: 10px; }
.level-card { width: 100%; min-height: 106px; padding: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.012); display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 18px; text-align: left; cursor: pointer; transition: border .22s ease, background .22s ease, transform .22s ease; }
.level-card:hover { border-color: var(--line-strong); transform: translateX(2px); }
.level-card.selected { border-color: rgba(151,48,43,.8); background: linear-gradient(90deg, rgba(114, 27, 24, .14), rgba(255,255,255,.008)); }
.level-number { font-family: Georgia, serif; font-size: 24px; color: #7b7269; }
.level-card h3 { margin: 0; font-size: 13px; letter-spacing: .14em; font-weight: 600; }
.level-card h3 span { color: #7f756b; font-family: "Noto Serif CJK TC", serif; font-weight: 400; margin-left: 7px; }
.level-card p { margin: 7px 0 4px; color: #aaa095; font-family: Georgia, serif; font-size: 16px; }
.level-card small { color: #6f6861; font-size: 10px; }
.weight { color: #7d3b37; letter-spacing: .08em; font-size: 12px; white-space: nowrap; }

.summary-card { border: 1px solid var(--line); padding: 24px; background: rgba(255,255,255,.012); }
.summary-grid { display: grid; grid-template-columns: 150px 1fr; gap: 14px 24px; }
.summary-grid dt { color: #746c63; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.summary-grid dd { margin:0; color: #c8bdb0; font-size: 13px; line-height: 1.6; }
.backlash-block { margin-top: 18px; border: 1px solid rgba(125, 45, 40, .36); padding: 18px; }
.backlash-block span { display:block; font-size: 9px; letter-spacing: .2em; color:#755f58; }
.backlash-block strong { display:block; margin-top:8px; color:#8f3a35; letter-spacing:.12em; }
.backlash-block p { margin:10px 0 0; color:#6d625b; font-size:10px; line-height:1.7; }
.confirm-row { display:grid; grid-template-columns:1fr auto; gap:10px; }

.ritual-screen { padding: 0; min-height: calc(100dvh - var(--header-h)); }
.ritual-stage { position: relative; min-height: calc(100dvh - var(--header-h)); overflow: hidden; display:grid; place-items:center; }
#ritualCanvas { position:absolute; inset:0; width:100%; height:100%; }
.ritual-vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 10%, rgba(0,0,0,.24) 52%, rgba(0,0,0,.78) 100%); }
.ritual-content { position:relative; z-index:2; width:min(560px, 88vw); text-align:center; display:grid; justify-items:center; }
.ritual-index { color:#645b53; font-size:9px; letter-spacing:.32em; margin:0 0 20px; }
.ritual-symbol { width:120px; height:120px; display:grid; place-items:center; border:1px solid rgba(142,45,40,.48); transform:rotate(45deg); color:#b29f88; font-family:"Noto Serif CJK TC", serif; font-size:48px; margin:14px 0 40px; box-shadow:0 0 100px rgba(114,29,25,.08); }
.ritual-symbol span { transform: rotate(-45deg); display:block; }
.ritual-content h2 { font-family:Georgia,serif; font-weight:400; font-size:clamp(38px,6vw,62px); margin:0; letter-spacing:-.03em; }
.ritual-content > p:not(.ritual-index) { color:#80766d; margin:12px 0 28px; }
.ritual-meter { width:min(360px,70vw); height:1px; background:rgba(255,255,255,.09); margin-bottom:28px; }
.ritual-meter span { display:block; width:100%!important; height:1px; background:#8c3832; transform:scaleX(var(--onnen-ritual-progress,0)); transform-origin:left center; transition:none; will-change:transform; contain:paint; }
.hold-button { width:108px; height:108px; border-radius:50%; border:1px solid rgba(149,48,42,.55); background:radial-gradient(circle, rgba(116,34,30,.16), transparent 67%); color:#9b8177; letter-spacing:.24em; cursor:pointer; user-select:none; touch-action:none; position:relative; }
.hold-button::before { content:""; position:absolute; inset:8px; border-radius:50%; border:1px dashed rgba(157,48,42,.28); animation:rotateSlow 18s linear infinite; }
.hold-button span { position:relative; z-index:1; font-size:9px; }
#holdHint { margin-top:14px; color:#5f5750; font-size:9px; }

.seal-layout { min-height: calc(100dvh - var(--header-h)); display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:10vw; padding:50px 5vw; }
.seal-mark { justify-self:center; width:min(30vw,330px); aspect-ratio:1; border:1px solid rgba(140,41,36,.5); display:grid; place-items:center; transform:rotate(45deg); background:radial-gradient(circle, rgba(119,28,25,.09), transparent 66%); }
.seal-mark span { transform:rotate(-45deg); font-family:"Noto Serif CJK TC",serif; font-size:clamp(70px,10vw,128px); color:#9f8775; }
.seal-copy { max-width:620px; }
.seal-copy > p:not(.step-label) { color:#8b8177; line-height:1.8; margin:24px 0; }
.seal-data { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; margin:26px 0; display:grid; gap:7px; color:#7f756c; font-size:11px; letter-spacing:.08em; }

.visibility-options { display:grid; gap:10px; }
.visibility-card { border:1px solid var(--line); background:rgba(255,255,255,.01); min-height:88px; padding:16px 18px; display:grid; grid-template-columns:140px 1fr; gap:4px 16px; text-align:left; cursor:pointer; }
.visibility-card strong { color:#c2b5a6; letter-spacing:.16em; font-size:11px; }
.visibility-card span { color:#a1978c; font-family:Georgia,serif; font-size:17px; }
.visibility-card small { grid-column:2; color:#6c655f; }
.visibility-card.selected { border-color:rgba(145,48,43,.72); background:rgba(100,27,24,.1); }
.public-options { margin-top:18px; }
.hidden { display:none !important; }
.toggle-row { min-height:48px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); color:#93897f; font-size:11px; }
.toggle-row input { accent-color:#7d2925; width:18px; height:18px; }
.public-preview { margin-top:18px; border:1px solid var(--line); padding:18px; }
.public-preview > p { color:#615a54; font-size:9px; letter-spacing:.22em; }
.public-preview blockquote { margin:12px 0 0; color:#aca195; font-family:Georgia,serif; line-height:1.7; font-size:16px; }

.offering-screen { display:none; }
.offering-screen.active { display:grid; place-items:center; }
.offering-wrap { width:min(820px,100%); padding:60px 20px; text-align:center; }
.offering-wrap > p:not(.step-label) { max-width:600px; margin:24px auto 0; color:#8f857a; line-height:1.8; }
.offering-actions { margin-top:44px; display:grid; grid-template-columns:.8fr 1.2fr; border:1px solid var(--line); }
.leave-silent { border:0; border-right:1px solid var(--line); background:transparent; min-height:230px; display:grid; place-items:center; align-content:center; gap:12px; cursor:pointer; }
.leave-silent span { font-family:Georgia,serif; font-size:52px; color:#9d9184; }
.leave-silent strong { font-size:10px; letter-spacing:.2em; color:#6f665e; }
.custom-offering { padding:34px; display:grid; align-content:center; gap:14px; text-align:left; }
.custom-offering label { font-size:9px; letter-spacing:.22em; color:#746b62; }
.money-input { border:1px solid var(--line); min-height:68px; display:grid; grid-template-columns:auto 1fr; align-items:center; padding:0 16px; gap:12px; }
.money-input span { color:#756c63; font-family:Georgia,serif; font-size:24px; }
.money-input input { border:0; outline:0; background:transparent; color:#d0c5b8; font-family:Georgia,serif; font-size:28px; min-width:0; }
.custom-offering small { color:#5d5650; line-height:1.6; }

.world-screen { padding-top:54px; }
.world-head { display:flex; justify-content:space-between; gap:24px; align-items:end; padding:0 2vw 36px; }
.world-head h2 { font-size:clamp(42px,5vw,76px); }
.world-metrics { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.world-metrics div { min-height:100px; padding:22px 2vw; border-right:1px solid var(--line); display:grid; align-content:center; gap:8px; }
.world-metrics div:last-child{border-right:0}
.world-metrics span{font-size:9px;letter-spacing:.2em;color:#615b55}
.world-metrics strong{font-family:Georgia,serif;font-weight:400;font-size:24px;color:#aaa093}
.testimony-feed { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); margin-top:32px; border:1px solid var(--line); }
.testimony-card { background:var(--bg); padding:24px; min-height:280px; display:flex; flex-direction:column; }
.testimony-meta { color:#6d655e; font-size:9px; letter-spacing:.18em; }
.testimony-card h3 { margin:18px 0 10px; font-size:12px; letter-spacing:.15em; font-weight:600; }
.testimony-card blockquote { margin:0; color:#a89e92; font-family:Georgia,serif; font-size:19px; line-height:1.55; flex:1; }
.testimony-card footer { margin-top:24px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.witness-button { border:1px solid var(--line); background:transparent; min-height:40px; padding:0 12px; color:#8c8277; font-size:9px; letter-spacing:.16em; cursor:pointer; }
.witness-button.witnessed { border-color:rgba(133,46,41,.5); color:#aa746e; }
.witness-count { color:#5c5550; font-size:9px; }
.world-foot { padding:32px 0 50px; }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,14px); z-index:100; background:#c9bdad; color:#171411; padding:12px 16px; opacity:0; pointer-events:none; transition:.25s ease; font-size:11px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .site-header { padding: 15px 18px; }
  .brand-copy small { display:none; }
  .screen { padding-left:18px; padding-right:18px; }
  .landing-grid { grid-template-columns:1fr; padding:48px 0 28px; min-height:auto; }
  .landing-copy h1 { font-size:clamp(50px,14vw,78px); }
  .landing-sigil { width:min(78vw,420px); margin:22px auto 10px; }
  .sigil-caption { font-size:7px; }
  .flow-layout { grid-template-columns:1fr; gap:34px; padding:46px 0 50px; }
  .flow-aside { position:static; }
  .flow-aside h2 { font-size:clamp(40px,10vw,58px); }
  .progress-rail { margin-top:24px; }
  .flow-panel, .wide-panel { max-width:none; }
  .seal-layout { grid-template-columns:1fr; gap:42px; padding:46px 0 60px; }
  .seal-mark { width:min(58vw,260px); }
  .world-head { flex-direction:column; align-items:flex-start; padding-left:0; padding-right:0; }
  .world-metrics { grid-template-columns:1fr 1fr; }
  .world-metrics div:nth-child(2){border-right:0}
  .world-metrics div:last-child{grid-column:1/-1;border-top:1px solid var(--line)}
  .testimony-feed { grid-template-columns:1fr; }
}

@media (max-width: 600px) {
  .brand-mark { width:34px; height:34px; }
  .brand-copy strong { font-size:10px; }
  .header-actions { gap:6px; }
  .icon-button { padding:0 10px; min-height:38px; font-size:8px; }
  .landing-copy h1 { font-size:clamp(48px,15vw,66px); }
  .lede { font-size:14px; margin-top:26px; }
  .landing-actions { align-items:stretch; flex-direction:column; }
  .primary-cta, .secondary-cta { width:100%; }
  .text-cta { width:max-content; }
  .live-strip { padding:0; }
  .emotion-grid { grid-template-columns:1fr; }
  .emotion-row { grid-template-columns:96px 1fr 30px; }
  .level-card { grid-template-columns:34px 1fr; align-items:start; padding:16px; }
  .level-card .weight { grid-column:2; }
  .level-card p { font-size:15px; }
  .summary-grid { grid-template-columns:1fr; gap:6px; }
  .summary-grid dd { margin-bottom:10px; }
  .confirm-row { grid-template-columns:1fr; }
  .ritual-symbol { width:96px; height:96px; font-size:38px; }
  .visibility-card { grid-template-columns:1fr; }
  .visibility-card small { grid-column:1; }
  .offering-wrap { padding:48px 0; }
  .offering-actions { grid-template-columns:1fr; }
  .leave-silent { border-right:0; border-bottom:1px solid var(--line); min-height:170px; }
  .custom-offering { padding:26px 20px; }
  .world-screen { padding-top:38px; }
  .world-metrics { grid-template-columns:1fr; }
  .world-metrics div { border-right:0; border-bottom:1px solid var(--line); }
  .world-metrics div:last-child { grid-column:auto; border-top:0; border-bottom:0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration:.001ms !important; }
  .grain { display:none; }
}

/* 0.2 — i18n, legal and production-safety surfaces */
.language-control{height:38px;border:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 8px;color:#655e57;font-size:8px;letter-spacing:.16em;background:rgba(0,0,0,.12)}
.language-control select,.currency-select{appearance:none;border:0;outline:0;background:transparent;color:#a79b8e;font:inherit;letter-spacing:.08em;cursor:pointer;min-height:34px}
.language-control select option,.currency-select option{background:#0d0b09;color:#c8bcad}
.age-note{margin:10px 0 0;color:#5f5852;font-size:9px;letter-spacing:.07em}
.offering-money-row{display:grid;grid-template-columns:92px 1fr;gap:10px}.currency-select{border:1px solid var(--line);padding:0 12px;min-height:68px;color:#8f8478}
.legal-dock{position:relative;z-index:4;border-top:1px solid var(--line);padding:18px 2vw 22px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:#4f4944;font-size:8px;letter-spacing:.14em;background:rgba(8,7,6,.94)}
.legal-dock>span{margin-right:auto}.legal-dock button{border:0;background:transparent;color:#69615a;font:inherit;letter-spacing:inherit;cursor:pointer;padding:8px 0}.legal-dock button:hover{color:#a99c8e}
.legal-dialog,.entry-dialog{border:1px solid rgba(130,117,102,.25);padding:0;background:#0b0908;color:#b8ab9c;width:min(900px,calc(100% - 28px));max-height:min(84vh,820px);box-shadow:0 28px 100px rgba(0,0,0,.75)}
.legal-dialog::backdrop,.entry-dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(8px)}
.legal-shell{padding:30px}.legal-head{display:flex;justify-content:space-between;gap:20px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:22px}.legal-head h2,.entry-shell h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(34px,5vw,58px);margin:3px 0 0;color:#c4b7a8}.legal-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--line)}.legal-tabs button{border:1px solid var(--line);background:transparent;color:#6e665f;min-height:38px;padding:0 12px;font-size:8px;letter-spacing:.14em;cursor:pointer}.legal-tabs button.selected{border-color:rgba(145,48,43,.65);color:#aa8c82;background:rgba(99,27,23,.1)}
.legal-content{padding:12px 0 8px}.legal-content>section{padding:22px 0;border-bottom:1px solid var(--line)}.legal-content>section:last-child{border-bottom:0}.legal-content h3{margin:0 0 9px;color:#a89c8f;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.legal-content p{margin:0;color:#766e66;line-height:1.85;font-size:13px;max-width:720px}
.entry-dialog{width:min(620px,calc(100% - 28px))}.entry-shell{padding:34px}.entry-shell>p:not(.eyebrow){color:#82786e;line-height:1.75;font-size:14px}.entry-check{display:flex;gap:12px;align-items:flex-start;border-top:1px solid var(--line);padding:15px 0;color:#958a7e;font-size:12px}.entry-check input{width:18px;height:18px;accent-color:#792924;flex:0 0 auto}.entry-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.entry-actions .primary-cta,.entry-actions .secondary-cta{min-width:140px}.entry-actions .primary-cta:disabled{opacity:.35;cursor:not-allowed}
html:lang(ja) body,html:lang(zh-Hant) body,html:lang(zh-Hans) body{font-feature-settings:'palt' 1}
html:lang(ja) .landing-copy h1,html:lang(zh-Hant) .landing-copy h1,html:lang(zh-Hans) .landing-copy h1{line-height:1.09;letter-spacing:-.035em}
@media(max-width:760px){.site-header{gap:8px}.header-actions{overflow-x:auto;max-width:64vw;scrollbar-width:none}.header-actions::-webkit-scrollbar{display:none}.language-control{flex:0 0 auto}.legal-trigger{display:none}.offering-money-row{grid-template-columns:1fr}.currency-select{min-height:48px}.legal-dock{padding-left:18px;padding-right:18px}.legal-dock>span{width:100%}.legal-shell,.entry-shell{padding:22px}.entry-actions{display:grid;grid-template-columns:1fr 1fr}.entry-actions .primary-cta,.entry-actions .secondary-cta{min-width:0;width:100%}}

/* 0.3 — viewport resilience, preview integrity, touch safety */
.site-header{padding-top:max(20px,env(safe-area-inset-top));height:calc(var(--header-h) + env(safe-area-inset-top));}
.screen{padding-bottom:max(34px,env(safe-area-inset-bottom));}
.ritual-screen{min-height:calc(100dvh - var(--header-h) - env(safe-area-inset-top));padding-bottom:0;}
.ritual-stage{min-height:calc(100dvh - var(--header-h) - env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom);}
.legal-dock{padding-bottom:max(22px,calc(14px + env(safe-area-inset-bottom)));}
.toast{bottom:max(24px,calc(12px + env(safe-area-inset-bottom)));max-width:min(92vw,620px);text-align:center;}
.preview-badge{border:1px solid rgba(158,147,133,.22);padding:5px 7px;color:#766d63;font-size:7px;letter-spacing:.16em;flex:0 0 auto;}
.world-disclaimer{max-width:680px;color:#655d55;font-size:10px;line-height:1.65;margin:18px 0 0;letter-spacing:.04em;}
.screen:focus{outline:none;}
button,input,textarea,select{-webkit-tap-highlight-color:transparent;}
@media(max-width:900px){.site-header{padding-top:max(15px,env(safe-area-inset-top));}.screen{padding-bottom:max(34px,env(safe-area-inset-bottom));}}
@media(max-width:600px){.live-strip{gap:8px;}.preview-badge{font-size:6px;padding:4px 6px;}.world-disclaimer{font-size:9px;}.ritual-stage{padding-left:14px;padding-right:14px;}}


/* v0.4 product hardening */
html { overscroll-behavior-y: none; }
body { text-rendering: optimizeLegibility; }
button, select, input[type="range"] { touch-action: manipulation; }
.flow-aside h2, .seal-copy h2, .offering-wrap h2, .world-head h2,
.level-card p, .visibility-card span, .testimony-card blockquote,
.note-block, .field-help, .legal-content p, .entry-shell p { overflow-wrap: anywhere; hyphens: auto; }
.screen.active { animation: onnenScreenIn .42s var(--ease) both; }
@keyframes onnenScreenIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.public-safety-note { display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:#655d56; font-size:9px; line-height:1.6; letter-spacing:.03em; }
.visibility-card[aria-pressed="true"], .choice-chip[aria-pressed="true"], .level-card[aria-pressed="true"] { border-color:rgba(145,48,43,.62); }

/* Fallback before dynamic viewport units, then modern override. */
.screen { min-height: calc(100vh - var(--header-h)); }
.landing-grid { min-height: calc(100vh - var(--header-h) - 88px); }
.ritual-screen, .ritual-stage, .seal-layout { min-height: calc(100vh - var(--header-h)); }
@supports (height: 100dvh) {
  .screen { min-height: calc(100dvh - var(--header-h)); }
  .landing-grid { min-height: calc(100dvh - var(--header-h) - 88px); }
  .ritual-screen, .ritual-stage, .seal-layout { min-height: calc(100dvh - var(--header-h)); }
  .ritual-screen { min-height:calc(100dvh - var(--header-h) - env(safe-area-inset-top)); }
  .ritual-stage { min-height:calc(100dvh - var(--header-h) - env(safe-area-inset-top)); }
}

@media (max-width: 600px) {
  .ritual-input, .ritual-textarea, .currency-select, .money-input input { font-size:16px; }
  .ritual-input.large { font-size:20px; }
  .choice-chip { min-height:46px; }
  .primary-cta, .secondary-cta { min-height:50px; }
  .level-card { min-height:116px; }
  .public-preview blockquote { font-size:15px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active { animation:none; }
}

/* v0.23 mobile header: every primary navigation control is visible without
   horizontal dragging. The first row keeps preference controls generous; the
   second row gives FIELD, archive, and information equal tap targets. */
@media (max-width: 760px) {
  :root { --header-h:156px; }
  .site-header {
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:34px 1fr;
    align-content:center;
    gap:8px;
    padding:10px 12px;
    padding-top:max(10px,env(safe-area-inset-top));
  }
  .brand { justify-self:start; min-width:0; }
  .header-actions {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-auto-rows:40px;
    gap:6px;
    width:100%;
    max-width:none!important;
    min-width:0;
    overflow:visible!important;
  }
  .header-actions > .language-control,
  .header-actions > .onnen-audio-main { grid-column:span 3; width:100%!important; min-width:0; }
  .header-actions > #openWorld,
  .header-actions > #openArchive,
  .header-actions > #openLegal {
    display:block;
    grid-column:span 2;
    width:100%;
    min-width:0;
    padding:0 6px;
    white-space:nowrap;
    font-size:7px;
  }
}