* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: var(--workspace); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button, a, input, textarea { touch-action: manipulation; }
button { border: 0; background: none; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: default; opacity: .5; }
::selection { background: #f8bf96; color: var(--ink); }
textarea { caret-color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: #cbb9a8 transparent; }
svg { display: block; }
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.review-layout { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: 218px minmax(402px, 1fr) 228px; gap: 32px; padding: 30px 24px 20px; align-items: start; }
.review-sidebar { padding: 15px 0 0; }
.review-brand { display: flex; align-items: center; gap: 13px; width: fit-content; font: 30px var(--font-rounded); }
.review-brand small { display: block; font: 12px var(--font-body); letter-spacing: .18em; color: var(--muted); margin-top: 3px; }
.brand-mark { width: 42px; height: 42px; border: 1px solid #ddccba; display: grid; place-items: center; border-radius: 50%; color: var(--accent); }
.brand-mark .icon { width: 28px; height: 28px; stroke-width: 1.3; }
.review-version { color: var(--muted); font-size: var(--text-xs); margin: 23px 0 35px; }
.review-sidebar h2 { margin: 27px 0 10px 10px; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--muted); letter-spacing: .08em; }
.review-sidebar nav { display: grid; gap: 3px; }
.review-sidebar nav a { min-height: 39px; padding: 9px 12px; font-size: var(--text-helper); border-radius: 7px; display: flex; align-items: center; justify-content: space-between; }
.review-sidebar nav a .icon { width: 14px; height: 14px; opacity: 0; }
.review-sidebar nav a:hover { background: #e8e2d9; }
.review-sidebar nav a[aria-current] { background: #e5dacb; color: #613821; }
.review-sidebar nav a[aria-current] .icon { opacity: 1; }
.review-sidebar-footer { display: flex; align-items: center; gap: 8px; margin: 34px 10px; color: var(--muted); font-size: var(--text-caption); }
.phase-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.preview-workspace { display: flex; align-items: center; flex-direction: column; min-width: 0; }
.preview-heading { display: flex; justify-content: space-between; width: 402px; max-width: 100%; color: var(--muted); font-size: var(--text-caption); margin-bottom: 10px; }
.preview-size { color: #92796b; }
.preview-notice { font-size: 10px; color: #7e6558; line-height: 1.6; width: 402px; max-width: 100%; margin: 0 0 12px; }
.preview-caption { color: var(--muted); letter-spacing: .16em; font-size: 9px; text-align: center; margin: 18px 0 0; }
.review-notes { padding: 95px 0 0; font-size: var(--text-xs); line-height: 1.8; color: var(--muted); }
.review-notes h2 { color: var(--ink); font-weight: var(--weight-medium); font-size: 17px; margin: 0 0 12px; }
.review-notes p { margin: 0; }
.review-note { padding-top: 18px; margin-top: 18px; border-top: 1px solid #ded5c9; }
.review-note h3 { color: var(--ink); font-size: var(--text-xs); font-weight: var(--weight-medium); margin: 0 0 5px; }
.review-note.emphasis h3 { color: var(--accent-strong); }
.review-small { margin-top: 27px !important; font-size: 10px; color: #816e61; }
.mobile-review { display: none; }
.mobile-review[open] { display: block; width: 100%; margin-bottom: 15px; color: var(--muted); font-size: var(--text-xs); }
.mobile-review[open] > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.mobile-review[open] > summary .icon { width: 18px; height: 18px; }
.mobile-review[open] > div { background: var(--paper); padding: 18px; max-height: 650px; overflow: auto; border-radius: var(--card-radius); }
.mobile-review[open] .review-sidebar { display: none; }
.mobile-review[open] .review-notes { padding-top: 5px; }
.phone { color: var(--ink); width: var(--preview-width); max-width: 100%; height: var(--preview-height); background: var(--paper); border-radius: 28px; display: flex; flex-direction: column; overflow: hidden; position: relative; box-shadow: 0 14px 50px #4e36200c; }
.status-bar { flex-shrink: 0; height: 57px; padding: 0 35px 0 54px; display: flex; align-items: center; justify-content: space-between; position: relative; color: #070707; font-size: 17px; font-weight: var(--weight-semibold); }
.status-bar .island { position: absolute; width: 126px; height: 37px; top: 13px; left: 50%; transform: translateX(-50%); border-radius: 30px; background: #000; }
.status-bar svg { width: 79px; height: 19px; }
.phone[data-screen] .topbar { height: var(--header-height); flex-shrink: 0; display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; padding: 0 18px; text-align: center; }
.phone .topbar .module-title { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--weight-medium) var(--header-title-size)/var(--header-title-leading) var(--font-body); }
.icon-button { width: var(--control-height); height: var(--control-height); display: grid; place-items: center; border-radius: 50%; }
.phone[data-screen] .topbar .icon-button { width: var(--control-height); height: var(--control-height); }
.icon-button:hover { background: #f3e9df; }
.topbar > .icon-button:last-child { color: var(--accent); }
.button.header-link { color: var(--ink); font-size: var(--text-md); padding: 8px 0; min-height: var(--control-height); min-width: var(--control-height); width: auto; white-space: nowrap; }
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; outline: none; scrollbar-width: none; }
.page-scroll::-webkit-scrollbar { display: none; }
.page-scroll > section, .page-scroll > article { min-height: 100%; padding: 0 var(--page-gutter) var(--space-6); }
.home-indicator { height: 14px; flex-shrink: 0; position: relative; }
.home-indicator:after { content: ''; display: block; position: absolute; width: 105px; height: 4px; border-radius: 5px; background: #512f2255; bottom: 5px; left: 50%; transform: translateX(-50%); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { overflow-wrap: break-word; }
h1 { font-size: var(--text-page); line-height: 1.45; letter-spacing: .015em; font-weight: var(--weight-semibold); }
h2 { font-size: var(--text-2xl); line-height: 1.5; font-weight: var(--weight-medium); }
p { line-height: 1.7; }
.button { display: flex; justify-content: center; align-items: center; width: 100%; min-height: var(--button-height); border-radius: var(--button-radius); font-family: var(--font-body); font-size: var(--button-font-size); font-weight: var(--button-font-weight); line-height: var(--leading-md); padding: 10px 15px; overflow-wrap: anywhere; transition: background-color 150ms, color 150ms, border-color 150ms; }
.button.primary { background: var(--button-primary-bg); color: var(--button-primary-color); }
.button.primary:hover:not(:disabled) { background: var(--button-primary-hover-bg); }
.button.primary:active:not(:disabled), .button.secondary:active:not(:disabled) { transform: translateY(1px); }
.button.secondary { background: var(--button-secondary-bg); color: var(--button-secondary-color); }
.button.secondary:hover:not(:disabled) { background: var(--button-secondary-hover-bg); }
.button.secondary:active:not(:disabled) { background: var(--button-secondary-pressed-bg); }
/* text / quiet remain compatibility aliases for low-emphasis actions. */
.button.tertiary, .button.text, .text-link { color: var(--button-text-color); font: var(--weight-medium) var(--text-md)/var(--leading-md) var(--font-body); min-height: var(--control-height); padding: 10px; display: flex; align-items: center; justify-content: center; }
.button.quiet { color: var(--button-quiet-color); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-regular); min-height: var(--control-height); padding: 6px; }
.text-link:hover, .button.tertiary:hover:not(:disabled), .button.text:hover:not(:disabled), .button.quiet:hover:not(:disabled) { text-decoration: underline; }
.button.compact { width: auto; min-height: var(--control-height); border-radius: var(--radius-control); }
.button.inline { width: auto; align-self: center; min-width: var(--control-height); min-height: var(--control-height); padding: 6px 16px; font-weight: var(--weight-medium); background: transparent; }
.phone .button.quiet.inline { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-regular); }
.button.inline:active:not(:disabled) { transform: translateY(1px); }
.button.cancel { border: 1px solid var(--line); color: var(--muted); background: transparent; font-weight: var(--weight-medium); }
.button.cancel:hover:not(:disabled) { background: var(--hover-surface); }
.button.cancel:active:not(:disabled) { background: var(--selected-surface); }
/* Dangerous intent is semantic; emphasis is chosen explicitly per context. */
.button.destructive { color: var(--accent-strong); background: transparent; }
.button.destructive.subtle { border: 1px solid var(--line); }
.button.destructive:hover:not(:disabled) { background: var(--hover-surface); }
.button.destructive:active:not(:disabled) { background: var(--selected-surface); }
.button.destructive.primary { border: 1px solid transparent; background: var(--accent); color: #fff; }
.button.destructive.primary:hover:not(:disabled), .button.destructive.primary:active:not(:disabled) { background: var(--accent-hover); }
.button.destructive.strong { border: 1px solid transparent; background: var(--accent-strong); color: #fff; }
.button.destructive.strong:hover:not(:disabled), .button.destructive.strong:active:not(:disabled) { background: var(--accent-strong); }
.button.destructive.tertiary { border: 0; background: transparent; }
.button[hidden] { display: none; }
.page-actions { display: flex; flex-direction: column; align-items: stretch; padding: 30px 35px 0; gap: 4px; margin-top: auto; }
.field-hint { font-size: var(--text-caption); color: var(--muted); text-align: center; line-height: 1.8; }
.space-label { display: flex; align-items: center; justify-content: center; gap: 10px; font: 14px var(--font-rounded); color: var(--muted); margin: 16px 0 22px; }
.space-label:before, .space-label:after { content: ''; width: 49px; height: 1px; background: #bda18c; }
/* Shared method-label decoration; previously lived in naming.css. */
.method-page > .space-label::before, .method-page > .space-label::after { height: 1px; border-radius: var(--radius-pill); background: linear-gradient(to right, transparent, currentColor); }
.method-page > .space-label::after { background: linear-gradient(to left, transparent, currentColor); }
.artwork { aspect-ratio: var(--art-ratio); position: relative; width: 100%; }
.artwork img { width: 100%; height: 100%; display: block; object-fit: var(--art-fit); object-position: var(--art-position); user-select: none; }
.artwork figcaption { font-size: 9px; font-weight: var(--weight-regular); text-align: center; position: absolute; bottom: 0; left: 0; right: 0; color: #946e54; letter-spacing: .025em; }
.home-page { display: flex; flex-direction: column; align-items: center; padding: 0 0 13px !important; }
.greeting { text-align: center; padding: 32px 20px 0; }
.greeting h1 { font-size: var(--text-display); font-weight: var(--weight-semibold); }
.greeting p { color: var(--muted); font-size: 17px; margin-top: 10px; }
.space-carousel { --orb-size: 264px; position: relative; height: 285px; width: 100%; overflow: hidden; margin-top: 54px; touch-action: pan-y; flex-shrink: 0; }
.space-orb { position: absolute; top: 0; left: 50%; width: var(--orb-size); height: var(--orb-size); border-radius: 50%; background: #fffdf5; box-shadow: 0 5px 26px #512f2208; transform: translate(calc(-50% + var(--offset) * (var(--orb-size) + 24px)), calc(abs(var(--offset)) * 90px)); padding: 25px; transition: transform .48s cubic-bezier(.16, 1, .3, 1); user-select: none; }
.space-orb .artwork { height: 100%; width: 100%; }
.space-orb:not(.is-current) { opacity: .85; }
.space-picker { position: relative; width: 150px; height: 49px; margin-top: -6px; }
.picker-arc { position: absolute; width: 100%; height: 40px; top: 4px; fill: none; stroke: #e6dfd5; stroke-width: 1; }
.picker-dots { display: flex; align-items: flex-start; justify-content: space-between; }
.picker-dots button { width: 36px; height: 40px; display: grid; place-items: center; z-index: 1; margin-top: 17px; }
.picker-dots button:nth-child(2) { margin-top: -5px; }
.picker-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 1px solid #c8b9ad; }
.picker-dots button[aria-pressed="true"] span { width: 10px; height: 10px; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 1px #dacdbf; }
.space-description { text-align: center; padding: 4px 20px 0; min-height: 89px; }
.space-description h2 { font: 30px/1.4 var(--font-rounded); }
.space-description p { color: var(--muted); font-size: var(--text-md); margin-top: 10px; }
.home-actions { padding: 22px 59px 0; width: 100%; margin-top: auto; }
.helper-link { font-size: var(--text-xs); min-height: 35px; padding: 8px 0; color: var(--muted); }
.page-heading { text-align: center; padding-top: 39px; }
.page-heading p { color: var(--muted); font-size: var(--text-md); margin-top: 11px; }
.page-heading > h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
.page-heading > p { line-height: var(--leading-lg); }
.context-page { display: flex; flex-direction: column; }
.context-page .page-heading { padding-top: 36px; margin-bottom: 22px; }
.context-page h1 { font-size: 25px; white-space: nowrap; letter-spacing: -.025em; }
.context-group { background: var(--card-bg); padding: 17px 19px 12px; border-radius: var(--card-radius); box-shadow: var(--soft-shadow); margin-bottom: 24px; }
.context-group h2 { font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--muted); margin-bottom: 14px; }
.context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 4px; }
.context-option { padding: 8px 0 5px; min-height: 75px; display: flex; flex-direction: column; align-items: center; gap: 9px; border-radius: 9px; border: 1px solid transparent; }
.context-option .icon { width: 36px; height: 36px; color: var(--accent); stroke-width: 1.5; }
.context-option span { font-size: var(--text-caption); white-space: nowrap; letter-spacing: -.02em; }
.context-option.is-selected { background: #fff3e9; border-color: #e99c77; }
.context-option:hover { background: #fff7ed; }
.context-page .field-hint { margin-top: -10px; }
.context-page .page-actions { padding-top: 22px; }
.method-page { display: flex; flex-direction: column; text-align: center; }
.method-card { background: var(--method-card-bg); border-radius: var(--method-card-radius); padding: 22px 25px 18px; box-shadow: var(--method-card-shadow); }
.method-card .artwork { margin-bottom: 19px; }
.method-card h2 { font-size: var(--text-display); font-weight: var(--weight-semibold); margin-bottom: 12px; }
.task-subtitle { font-size: var(--text-md); line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.duration { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: var(--text-helper); color: var(--muted); margin-top: 23px; }
.duration .icon { width: 17px; height: 17px; stroke-width: 1.5; }
.continuation-note { color: var(--muted); font-size: var(--text-xs); margin: 18px 5px 5px; }
.naming-page { padding-top: 0 !important; }
.naming-page h1 { margin: 0 0 11px; font-size: 27px; }
.naming-subtitle { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 20px; }
.naming-subtitle p { color: var(--muted); font-size: var(--text-sm); }
.naming-subtitle > span { color: var(--muted); font-size: var(--text-caption); white-space: nowrap; }
.bubble-field { width: 100%; height: 510px; position: relative; background: var(--surface); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--soft-shadow); }
.emotion-bubble { width: var(--size); aspect-ratio: 1; border-radius: 50%; background: #f3e9db; position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font-size: var(--text-lg); font-weight: var(--weight-regular); transition: background-color .18s; }
.emotion-bubble.is-selected { background: var(--selection-fill); }
.emotion-bubble[data-value="tired"].is-selected { background: #c4a09a; }
.emotion-bubble[data-value="tired"].is-selected { background: color-mix(in srgb, var(--selection-fill) 55%, #b49e9c); }
.emotion-bubble:hover { box-shadow: inset 0 0 0 2px #d8704266; }
.bubble-dot { position: absolute; display: block; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; }
.bubble-dot.one { left: 57%; top: 25%; }
.bubble-dot.two { left: 18%; top: 71%; width: 23px; height: 23px; background: #ffb241; }
.bubble-dot.three { left: 89%; top: 86%; width: 23px; height: 23px; }
.intensity-card { padding: 22px 19px 21px; border-radius: var(--card-radius); background: var(--surface); margin-top: 40px; box-shadow: var(--soft-shadow); }
.intensity-card label { font-size: var(--text-md); color: var(--muted); }
.range-ticks { display: flex; justify-content: space-between; margin: 36px 5px 0; height: 15px; }
.range-ticks i { height: 9px; width: 1px; background: var(--line); }
.range-ticks i:first-child, .range-ticks i:last-child { height: 15px; }
input[type="range"] { width: 100%; appearance: none; -webkit-appearance: none; height: 12px; border: 0; border-radius: var(--button-radius); margin: 7px 0 0; background: #f6f1e9; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 31px; height: 31px; border-radius: 50%; background: var(--range-fill, var(--accent)); box-shadow: 0 2px 4px #512f2233; border: 0; }
input[type="range"]::-moz-range-thumb { width: 31px; height: 31px; border-radius: 50%; background: var(--range-fill, var(--accent)); box-shadow: 0 2px 4px #512f2233; border: 0; }
.range-labels { display: flex; justify-content: space-between; margin-top: 11px; font-size: var(--text-helper); color: var(--muted); }
.naming-page .page-actions { padding-top: 46px; }
.naming-page [data-value="unknown"][aria-pressed="true"] { background: #f2e2d1; border-radius: var(--card-radius); }
.task-page { display: flex; flex-direction: column; }
.task-page h1 { font-size: 29px; margin-bottom: 16px; }
.task-page .task-art { margin: 34px 0 25px; }
.task-guidance { color: var(--muted); font-size: var(--text-helper); text-align: center; margin: 0 12px; }
.task-page .duration { font-size: var(--text-caption); }
.task-page .page-actions .primary, .naming-page .page-actions .primary { font-size: var(--text-md); }
.writing-card { background: var(--card-bg); padding: 22px; border-radius: var(--card-radius); margin-top: 28px; }
.writing-card label { color: var(--muted); font-size: var(--text-sm); }
.writing-card textarea { display: block; width: 100%; background: transparent; resize: vertical; border: 0; color: var(--ink); line-height: 1.9; font-size: 17px; margin: 18px 0; padding: 5px 0; }
.writing-card textarea::placeholder { color: #947869; }
.writing-card p { color: var(--muted); font-size: var(--text-caption); }
.checkout-page { display: flex; flex-direction: column; }
.checkout-page .page-heading { padding-top: 59px; }
.checkout-page h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
.checkout-page .page-heading p { font-size: var(--text-sm); line-height: var(--leading-sm); }
.check-options { display: grid; gap: 34px; margin-top: 98px; }
.check-option { min-height: 86px; border-radius: var(--card-radius); background: var(--card-bg); padding: 18px 20px; display: flex; align-items: center; gap: 35px; text-align: left; border: 1px solid transparent; box-shadow: var(--soft-shadow); }
.check-option > .icon { width: 53px; height: 53px; color: var(--accent); stroke-width: 1.25; }
.check-option strong { font-size: 25px; font-weight: var(--weight-semibold); display: block; line-height: 1.4; }
.check-option small { display: block; font-size: 15px; color: var(--muted); margin-top: 3px; }
.check-option.is-selected { border-color: var(--accent-strong); background: var(--selected-surface); }
.check-option:hover { background: #fff8f0; }
.checkout-page .page-actions { padding-top: 45px; }
.helper-page { display: flex; flex-direction: column; }
.helper-options { margin: 35px 0; display: grid; gap: 18px; }
.helper-options button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 24px 20px; text-align: left; background: var(--card-bg); border-radius: var(--card-radius); }
.helper-options strong { font: 24px var(--font-rounded); display: block; margin-bottom: 8px; }
.helper-options small { font-size: var(--text-helper); color: var(--muted); }
.helper-options .icon { color: var(--accent); width: 20px; }
.example-label { display: inline-block; font-size: var(--text-caption); color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.quiet-link { text-align: center; padding: 10px; color: var(--muted); font-size: var(--text-helper); }
.page-scroll > .end-page { display: grid; grid-template-rows: 1fr auto 1fr; gap: 32px; padding: clamp(24px, 5dvh, 40px) var(--page-gutter) 24px; }
.end-heading { align-self: end; margin-bottom: clamp(16px, 5dvh, 40px); text-align: center; }
.end-heading > h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: 0; }
.end-heading > p { margin-top: 12px; color: var(--muted); font-size: var(--text-md); line-height: var(--leading-md); }
.end-feedback { margin: 0; }
.end-feedback > h2 { text-align: center; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); }
.feedback-sample { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.feedback-sample button { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: var(--control-height); padding: 4px 0 8px; border-radius: var(--radius-control); background: transparent; color: var(--ink); }
.feedback-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #fcf6ef; }
.feedback-art img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.feedback-sample button[data-value="same"] .feedback-art img { transform: translateY(10%); }
.feedback-label { font-size: var(--text-md); line-height: var(--leading-md); }
.feedback-sample button:hover .feedback-art { background: var(--hover-surface); }
.feedback-sample button[aria-pressed="true"] .feedback-art { background: var(--accent-light); outline: 2px solid var(--accent); outline-offset: 3px; }
.feedback-sample button[aria-pressed="true"] .feedback-label { color: var(--accent-strong); font-weight: var(--weight-semibold); }
.end-page .page-actions { align-self: end; width: 100%; margin: 0; padding: 0; }
.about-page { padding-top: 29px !important; }
.intro { color: var(--muted); font-size: var(--text-sm); margin-top: 10px; }
.space-tabs { display: flex; gap: 12px; margin: 25px 0; }
.space-tabs .button { flex: 1; min-height: 40px; font: 17px var(--font-rounded); border-bottom: 1px solid var(--line); border-radius: 0; }
.space-tabs .selected { color: var(--accent-strong); border-color: var(--accent); }
.discover-methods { display: grid; gap: 22px; }
.discover-method { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 20px 12px; border-radius: var(--card-radius); background: var(--surface); }
.discover-method h2 { font-size: 19px; margin-bottom: 7px; }
.discover-method p { color: var(--muted); font-size: var(--text-xs); line-height: 1.8; }
.discover-method > .artwork { align-self: center; }
.discover-method figcaption { font-size: 7px; bottom: -10px; }
.discover-method span { display: flex; justify-content: space-between; align-items: center; color: var(--accent-strong); font-size: var(--text-caption); margin-top: 12px; }
.discover-method span .icon { width: 16px; height: 16px; }
.discover-page .field-hint { margin-top: 26px; }
.empty-state { margin: auto 0; text-align: center; padding: 60px 25px; }
.empty-state > .icon { width: 64px; height: 64px; color: #c59578; stroke-width: 1; margin: 0 auto 30px; }
.empty-state h2 { font-size: 21px; }
.empty-state p { margin-top: 15px; font-size: 15px; color: var(--muted); }
.empty-state .button { margin-top: 37px; font-size: var(--text-md); }
.profile-mark { width: 70px; height: 70px; border-radius: 50%; background: #f1dfc7; color: var(--accent); display: grid; place-items: center; margin: 15px 0 25px; }
.profile-mark .icon { width: 45px; height: 45px; stroke-width: 1; }
.settings-list { margin: 40px 0 25px; }
.setting-row { display: flex; min-height: 81px; padding: 19px 0; border-bottom: 1px solid var(--line); justify-content: space-between; align-items: center; gap: 16px; font-size: var(--text-md); }
.setting-row strong { font-weight: var(--weight-regular); }
.setting-row small { display: block; color: var(--muted); font-size: var(--text-caption); margin-top: 7px; }
.setting-row .icon { width: 17px; height: 17px; }
.setting-value { font-size: var(--text-xs); color: var(--muted); }
.about-page p { font-size: 15px; color: var(--muted); margin: 18px 0 30px; }
.about-page h2 { font-size: var(--text-xl); }
.toast { position: absolute; top: calc(57px + 12px); left: 50%; bottom: auto; width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; color: #65483d; background: #f2e9e2; font: var(--weight-regular) var(--text-sm)/var(--leading-sm) var(--font-body); z-index: 10; box-shadow: 0 3px 12px rgba(101,72,61,.07); pointer-events: none; transform: translateX(-50%); animation: toast-enter 180ms ease-out both; }
.toast .icon { width: 14px; height: 14px; color: #b65e3d; }
.toast-message { min-width: 0; overflow-wrap: anywhere; }
.toast.is-leaving { animation: toast-exit 150ms ease-in both; }
.toast.toast--centered-success { top: 50%; left: 50%; width: 180px; min-height: 148px; max-width: calc(100% - 48px); flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-6); border-radius: var(--space-6); color: var(--ink); background: rgba(255,253,250,.99); font: var(--weight-semibold) var(--text-md)/var(--leading-md) var(--font-body); text-align: center; box-shadow: 0 10px 40px rgba(78,45,31,.06); transform: translate(-50%, -50%); animation: toast-success-enter 160ms ease-out both; }
.toast.toast--centered-success .icon { flex-shrink: 0; width: 52px; height: 52px; padding: var(--space-2); border-radius: var(--radius-pill); color: var(--accent); background: var(--accent-light); }
.toast.toast--centered-success.is-leaving { animation: toast-success-exit 150ms ease-in both; }
/* The visual veil shares the single Toast's lifecycle and never receives input. */
.phone:has(> .toast.toast--centered-success:not([hidden]))::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: rgba(75,45,30,.035); animation: toast-veil-enter 160ms ease-out both; }
.phone:has(> .toast.toast--centered-success.is-leaving:not([hidden]))::after { animation: toast-exit 150ms ease-in both; }
.phone.reduce-motion:has(> .toast.toast--centered-success:not([hidden]))::after { animation: none; }
@keyframes toast-veil-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-success-enter { from { opacity: 0; transform: translate(-50%, -50%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes toast-success-exit { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(.99); } }
@keyframes toast-enter { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-exit { from { opacity: 1; } to { opacity: 0; } }
.toast[hidden] { display: none; }
@media (max-width: 760px) { .toast { top: calc(var(--safe-top) + 12px); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-leaving { animation: none; } }
.reduce-motion *, .reduce-motion *:before, .reduce-motion *:after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (min-width: 761px) and (max-height: 990px) {
  .phone { height: max(700px, calc(100dvh - 117px)); }
  .home-page .greeting { padding-top: 22px; }
  .space-carousel { margin-top: 35px; height: 270px; }
  .space-description { min-height: 80px; }
  .home-actions { padding-top: 12px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .review-layout { grid-template-columns: 190px 402px; max-width: 690px; gap: 30px; }
  .review-layout > .review-notes { display: none; }
  .mobile-review { display: block; width: 100%; margin-bottom: 10px; font-size: var(--text-caption); color: var(--muted); }
  .mobile-review > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .mobile-review summary .icon { width: 17px; height: 17px; }
  .mobile-review > div { padding: 15px; border: 1px solid var(--line); background: var(--paper); margin-top: 8px; }
  .mobile-review .review-sidebar { display: none; }
  .mobile-review .review-notes { padding-top: 0; }
}
@media (max-width: 760px) {
  body { background: var(--paper); }
  .review-layout { display: block; padding: 0; width: 100%; }
  .review-layout > .review-sidebar, .review-layout > .review-notes, .preview-heading, .preview-caption { display: none; }
  .preview-workspace { display: block; }
  .mobile-review { display: block; position: relative; z-index: 5; background: #efe9df; width: 100%; color: var(--muted); font-size: var(--text-caption); }
  .mobile-review > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 7px 15px; height: 31px; }
  .mobile-review > summary .icon { width: 17px; height: 17px; }
  .mobile-review > div { padding: 15px 20px 25px; max-height: 70dvh; overflow: auto; border-bottom: 1px solid var(--line); }
  .mobile-review .review-sidebar { padding: 0; }
  .mobile-review .review-brand, .mobile-review .review-version, .mobile-review .review-sidebar-footer { display: none; }
  .mobile-review .review-sidebar h2 { margin-top: 10px; }
  .mobile-review .review-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-review .review-notes { padding-top: 25px; }
  .preview-notice { width: 100%; font-size: 9px; padding: 5px 15px; margin: 0; background: #f5f0e8; text-align: center; }
  .phone { width: 100%; max-width: 430px; margin: auto; height: 100dvh; min-height: 0; padding-top: var(--safe-top); border-radius: 0; box-shadow: none; }
  .status-bar { display: none; }
  .phone[data-screen] .topbar { height: var(--header-mobile-height); }
  .page-scroll > section, .page-scroll > article { padding-bottom: 22px; }
  .space-carousel { --orb-size: min(68vw, 280px); height: calc(min(68vw, 280px) + 18px); margin-top: 40px; }
  .home-page .greeting { padding-top: 28px; }
  .home-page .greeting h1 { font-size: var(--text-display); }
  .space-description { min-height: 88px; }
  .home-actions { padding: 24px 46px 0; }
}
@media (max-width: 360px) {
  .page-scroll > section, .page-scroll > article { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .greeting h1, .home-page .greeting h1 { font-size: 25px; }
  .greeting p { font-size: 15px; }
  .space-description p { font-size: var(--text-sm); }
  .context-page h1 { font-size: 21px; }
  .context-group { padding-left: 11px; padding-right: 11px; }
  .context-option span { font-size: 10px; }
  .page-actions { padding-left: 20px; padding-right: 20px; }
  .method-page h1 { font-size: var(--text-3xl); }
  .method-card { padding: 19px 20px; }
  .method-card h2 { font-size: var(--text-page); }
  .task-subtitle { font-size: var(--text-sm); }
  .naming-subtitle { flex-wrap: wrap; }
  .naming-subtitle p { font-size: var(--text-helper); }
  .bubble-field { height: 440px; }
  .emotion-bubble { font-size: var(--text-md); }
  .checkout-page h1 { font-size: var(--text-3xl); }
  .check-option { gap: 25px; }
  .check-option strong { font-size: 23px; }
  .discover-method { grid-template-columns: 70px 1fr; gap: 12px; }
  .discover-method h2 { font-size: 17px; }
}
@media (max-width: 760px) and (max-height: 800px) {
  .home-page .greeting { padding-top: 16px; }
  .space-carousel { margin-top: 24px; }
  .space-description { min-height: 78px; }
  .home-actions { padding-top: 15px; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .home-page { padding-bottom: 5px !important; }
  .home-page .greeting { padding-top: 8px; }
  .home-page .greeting h1 { font-size: var(--text-2xl); }
  .greeting p { margin-top: 4px; font-size: var(--text-helper); }
  .space-carousel { --orb-size: min(43vw, 160px); height: 150px; margin-top: 10px; }
  .space-orb { padding: 9px; }
  .space-orb .artwork figcaption { font-size: 7px; }
  .space-picker { height: 27px; transform: scale(.8); transform-origin: center top; }
  .space-description { min-height: 55px; padding-top: 0; }
  .space-description h2 { font-size: var(--text-3xl); }
  .space-description p { font-size: var(--text-xs); margin-top: 4px; }
  .home-actions { padding-top: 8px; }
  .home-actions .primary { min-height: 44px; font-size: var(--text-lg); }
  .helper-link { min-height: 27px; font-size: var(--text-caption); padding: 5px; }
}


/* Shared product shell. Legacy stage-one selectors above remain for compatibility.
   Review tools are opt-in through ?review=1; route-specific classes remain public. */
.review-layout:not(.show-review) { display: flex; justify-content: center; width: 100%; max-width: none; padding: 28px 16px; }
.review-layout:not(.show-review) > .review-sidebar,
.review-layout:not(.show-review) > .review-notes,
.review-layout:not(.show-review) .preview-heading,
.review-layout:not(.show-review) .preview-notice,
.review-layout:not(.show-review) .preview-caption,
.review-layout:not(.show-review) .mobile-review:not([open]) { display: none; }
.review-layout:not(.show-review) .preview-workspace { width: var(--preview-width); max-width: 100%; }

/* One switch renderer for both existing checkbox markups. Row copy stays local. */
:is(input[role="switch"], .side-menu-setting input[data-setting="reduceMotion"]) {
  appearance: none; position: relative; display: block; flex-shrink: 0; box-sizing: border-box;
  width: var(--switch-width); height: var(--switch-height); margin: 0; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: var(--switch-off); cursor: pointer;
}
:is(input[role="switch"], .side-menu-setting input[data-setting="reduceMotion"])::after {
  content: ''; position: absolute; top: var(--switch-inset); left: var(--switch-inset);
  width: var(--switch-thumb); height: var(--switch-thumb); border-radius: 50%; background: var(--switch-thumb-bg);
}
:is(input[role="switch"], .side-menu-setting input[data-setting="reduceMotion"]):checked { background: var(--switch-on); }
:is(input[role="switch"], .side-menu-setting input[data-setting="reduceMotion"]):checked::after {
  left: calc(var(--switch-width) - var(--switch-thumb) - var(--switch-inset));
}

/* Baseline for method content; core fields/artwork keep their own geometry. */
.page-scroll > :is(.method-page, .task-page, .naming-page, .continuation-page) > * { flex-shrink: 0; }
.task-page > h1 { font-size: var(--method-title-size); line-height: var(--method-title-leading); }
.page-actions { padding-inline: var(--method-action-inset); }
.phone[data-screen="now"], .phone[data-screen="context"], .phone.naming-surface { --footer-min-height: 12px; }

@media (max-width: 760px) {
  .review-layout:not(.show-review) { display: block; padding: 0; }
  .review-layout:not(.show-review) .preview-workspace { width: 100%; }
  .review-layout .phone[data-screen] { padding-top: var(--safe-top); min-height: 0; }
  .show-review .phone { height: calc(100dvh - 56px); }
  /* Continuation intentionally puts its safe bottom padding inside the scroll area. */
  .phone[data-screen]:not(.continuation-surface) .home-indicator { height: max(var(--footer-min-height), var(--safe-bottom)); }
  .phone .home-indicator::after { display: none; }
}

/* Fill spare height above the actions; when content is taller than the screen,
   the complete preview, including its controls, scrolls in the page flow. */
.phone:has(.method-page) { --header-title-size: var(--text-lg); --header-title-leading: var(--leading-lg); --footer-min-height: 0px; }
.phone .page-scroll > .method-page { padding: 0 var(--page-gutter); }
.phone .method-page > .space-label { margin: var(--space-4) 0 var(--space-3); font: var(--weight-regular) var(--text-sm)/var(--leading-sm) var(--font-rounded); }
.phone .method-page > .space-label::before, .phone .method-page > .space-label::after { width: 49px; }
.phone .method-page > .method-intro { margin: 0 0 var(--space-5); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-regular); }
.phone .method-page .method-card { height: auto; padding: 22px 25px var(--space-6); }
.phone .method-page .method-card > .artwork { width: 100%; margin: 0 0 var(--space-6); }
.phone .method-page .method-card > h1 { margin: 0 0 var(--space-4); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-semibold); letter-spacing: 0; }
.phone .method-page .task-subtitle { font-size: var(--text-sm); line-height: var(--leading-sm); text-wrap: pretty; }
.phone .method-page .duration { margin: var(--space-6) 0 0; gap: 7px; font-size: var(--text-xs); line-height: 18px; }
.phone .method-page .page-actions { margin-top: auto; padding: var(--space-6) var(--method-action-inset); gap: var(--space-2); }
.phone .method-page .button.quiet { min-height: var(--control-height); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-regular); }
.phone:has(.method-page) > .home-indicator { height: var(--safe-bottom); }
@media (max-width: 760px) and (max-height: 650px) {
  .checkout-page .page-heading { padding-top: var(--space-6); }
  .checkout-page .check-options { margin-top: var(--space-8); gap: var(--space-6); }
  .checkout-page .page-actions { padding-top: var(--space-6); }
}

/* Batch 2A shared field states. Geometry/radii stay with each field family.
   No selectors touch ranges, bubbles, wheel buttons or Canvas interactions. */
.phone :is(input[type="text"], input[type="tel"], input[type="email"], input[type="search"], textarea, select) { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-lg); color: var(--ink); caret-color: var(--accent); }
.phone :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
.phone :is(input:not([type="search"]):not([type="range"]):not([type="checkbox"]):not([type="file"]), textarea, select):focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.phone :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.phone :is(.mine-setting-row, .preference-radio, .side-menu-setting):focus-within { outline: 2px solid var(--accent-strong); outline-offset: -4px; }
.phone :is(.saved-filters, .discover-filters) button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent-strong); font-weight: var(--weight-semibold); }
.phone :is(.saved-filters, .discover-filters) button:hover:not([aria-pressed="true"]) { background: var(--hover-surface); }
.phone :is(.saved-filters, .discover-filters) button:active { transform: translateY(1px); }
.phone :is(.outbox-error, .profile-error) { min-height: var(--leading-sm); font: var(--weight-regular) var(--text-sm)/var(--leading-sm) var(--font-body); color: var(--accent-strong); }