:root {
  --top-h: 64px;
  --sbar-h: 45px;
  --gut: clamp(16px, 3vw, 40px);

  --paper: #F4F2F7;
  --paper-card: #FFFFFF;
  --paper-ink: #15141A;
  --paper-muted: #5E5A6B;
  --paper-rule: #DDD9E4;
  --paper-soft: #ECE6F6;
  --paper-plum: #422A51;
  --night: #0B0A10;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px #923A9E, 0 0 18px 2px rgba(235,109,244,.35);
}
html.embed { --sbar-h: 0px; }

[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; overflow-x: hidden; }
button { font: inherit; color: inherit; }
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.ico { display: block; flex: none; width: 20px; height: 20px; }
[dir="rtl"] .ico-flip { transform: scaleX(-1); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sbar { display: flex; align-items: center; min-height: 44px; padding-inline: var(--gut); border-block-end: 1px solid var(--border); }
html.embed .sbar { display: none; }
.sbar-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 2px 10px; color: var(--text-muted); text-decoration: none; font: 500 var(--fs-small)/1 var(--font-body); border-radius: var(--radius-sm); }
.sbar-back:hover { color: var(--text); }
.sbar-back .ico { width: 18px; height: 18px; }

.top { display: flex; align-items: center; gap: 12px; min-height: var(--top-h); padding-inline: var(--gut); }
.mark { display: flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap; color: var(--text); }
.mark .ico { width: 22px; height: 22px; color: var(--link); }
.mark-name { font: 600 1rem/1 var(--font-display); letter-spacing: var(--tracking-display); }
.mark-tag { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); font: 500 .6875rem/1 var(--font-mono); color: var(--text-muted); }
.steps { display: flex; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.step { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 8px 12px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-muted); font: 500 .875rem/1 var(--font-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 50%; font: 500 .75rem/1 var(--font-mono); }
.step:hover { color: var(--text); }
.step.is-done .step-n { border-color: var(--link); color: var(--link); }
.step[aria-current="step"] { color: var(--text); }
.step[aria-current="step"] .step-n { background: var(--text); border-color: var(--text); color: var(--bg); }
.step:focus-visible, .sbar-back:focus-visible { outline: none; box-shadow: var(--ring); }
.replay { flex: none; }
@media (max-width: 879.98px) { .mark { display: none; } .steps { margin-inline-start: 0; } }

.stage { flex: 1; display: grid; grid-template-columns: minmax(0, 540px) auto; justify-content: center; align-items: start; column-gap: clamp(24px, 5vw, 88px); padding: 8px var(--gut) 28px; }
.side { align-self: center; min-width: 0; padding-block: 8px 16px; container-type: inline-size; }
.device { position: sticky; top: 12px; }

.pane { display: none; }
.app[data-view="setup"] .pane-setup, .app[data-view="run"] .pane-run,
.app[data-view="brief"] .pane-brief, .app[data-view="learn"] .pane-learn { display: block; animation: pane-in 520ms var(--ease-out) both; }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.p-title { margin: 0 0 12px; font: 600 clamp(1.75rem, 1.15rem + 1.7vw, 2.5rem)/1.12 var(--font-display); letter-spacing: var(--tracking-display); color: var(--text); outline: none; }
.p-lead { margin: 0 0 24px; max-width: 50ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }
.p-note { margin: 16px 0 0; max-width: 52ch; font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }
.p-fine { margin: 14px 0 0; max-width: 56ch; font: 400 .8125rem/1.55 var(--font-mono); color: var(--text-muted); }
.p-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }

.pick { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.pick-q { margin: 0 0 10px; padding: 0; font: 600 1rem/1.3 var(--font-body); color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip > span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font: 500 .9375rem/1.2 var(--font-body); }
.chip .chk { display: none; width: 16px; height: 16px; margin-inline-start: -4px; }
.chip:hover > span { border-color: var(--text-muted); color: var(--text); }
.chip input:checked + span { border-color: var(--text); background: var(--text); color: var(--bg); }
.chip input:checked + span .chk { display: block; }
.chip input:focus-visible + span { box-shadow: var(--ring); }
.pick-hint { min-height: 1.25rem; margin: 6px 0 0; font: 400 .8125rem/1.5 var(--font-mono); color: var(--link); }

.run-clock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: -4px 0 18px; }
.clock { margin: 0; font: 500 clamp(2.5rem, 1.9rem + 2vw, 3.5rem)/1 var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.st { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-bar { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: var(--border); }
.st-bar i { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .st-bar i { transform-origin: 100% 50%; }
.st-l { font: 500 .6875rem/1.2 var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.st.is-active .st-l, .st.is-done .st-l { color: var(--text); }
@container (max-width: 459.98px) { .st-l { display: none; } }
.now { min-height: 4.6em; margin: 14px 0 16px; max-width: 54ch; font: 400 .9375rem/1.55 var(--font-body); color: var(--text); }
.now b { font-weight: 600; }
.desk { padding-top: 12px; border-block-start: 1px solid var(--border); }
.desk-h { margin: 0 0 4px; font: 500 .75rem/1.3 var(--font-mono); color: var(--text-muted); }
.desk-win { display: flex; flex-direction: column; justify-content: flex-end; height: clamp(190px, 100dvh - 500px, 340px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px); }
.log { margin: 0; padding: 0; list-style: none; transition: transform 240ms var(--ease-out); }
.desk-win.is-done { display: block; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; border-radius: 2px; }
.desk-win.is-done:focus-visible { outline: none; }
.desk:has(> .desk-win:focus-visible) { box-shadow: var(--ring); border-radius: var(--radius-sm); }
.desk-win.is-done .log { padding-block-start: 40px; }
.r { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 9px 0; border-block-end: 1px solid var(--border); }
.r.is-new { animation: row-in 360ms var(--ease-out) both; }
@keyframes row-in { from { opacity: 0; } to { opacity: 1; } }
.r-v { min-width: 0; font: 500 .75rem/1.35 var(--font-mono); color: var(--text-muted); }
.r-v::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.r-s { font: 400 .75rem/1.35 var(--font-mono); color: var(--text-muted); text-align: end; white-space: nowrap; }
.r-t { grid-column: 1 / -1; font: 400 .875rem/1.4 var(--font-body); color: var(--text); }
.r.is-kept .r-v, .r.is-ok .r-v { color: var(--link); }
.r.is-fix .r-v { color: var(--text); }
.r.is-out .r-v::before, .r.is-merged .r-v::before, .r.is-reading .r-v::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.r.is-out .r-t { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.r.is-merged .r-t, .r.is-reading .r-t { color: var(--text-muted); }
.run-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; animation: pane-in 520ms var(--ease-out) both; }
.run-end-t { margin: 0; font-weight: 600; color: var(--text); }

.sky-m { display: none; }

.taste { padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-tint), var(--bg-deep); }
.taste-h { margin: 0; font: 600 1rem/1.3 var(--font-body); color: var(--text); }
.taste-sub { margin: 4px 0 10px; font-size: .875rem; line-height: 1.5; color: var(--text-muted); }
.levers { margin: 0; padding: 0; list-style: none; }
.lv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 112px) 88px; grid-template-areas: "l bar v" "why why why"; align-items: center; column-gap: 12px; min-height: 40px; }
.lv-l { grid-area: l; } .lv-bar { grid-area: bar; } .lv-v { grid-area: v; } .lv-why { grid-area: why; }
.lv-l { font: 500 .875rem/1.3 var(--font-body); color: var(--text); }
.lv-bar { position: relative; height: 6px; border-radius: 3px; background: var(--border); }
.lv-bar::before { content: ""; position: absolute; inset-block: -4px; inset-inline-start: 50%; width: 1px; background: var(--text-muted); opacity: .6; }
.lv-pos, .lv-neg { position: absolute; inset-block: 0; width: 50%; border-radius: 3px; transform: scaleX(0); transition: transform 640ms var(--ease-out); }
.lv-pos { inset-inline-start: 50%; transform-origin: 0 50%; background: var(--link); }
.lv-neg { inset-inline-end: 50%; transform-origin: 100% 50%; background: var(--text-muted); }
[dir="rtl"] .lv-pos { transform-origin: 100% 50%; }
[dir="rtl"] .lv-neg { transform-origin: 0 50%; }
.lv-base { position: absolute; inset-block: -5px; inset-inline-start: var(--base, 50%); width: 2px; margin-inline-start: -1px; border-radius: 1px; background: var(--text); opacity: .8; }
.lv-v { font: 500 .8125rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: end; white-space: nowrap; }
.lv.is-moved .lv-v { color: var(--text); }
.lv-why { margin: 4px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--text-muted); }
.levers-final { margin-top: 8px; }
.levers-final .lv { padding-block: 10px; }
.levers-final .lv + .lv { border-block-start: 1px solid var(--border); }

@container (max-width: 459.98px) {
  .lv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "bar bar" "why why"; row-gap: 8px; padding-block: 6px; }
  .levers-final .lv { padding-block: 10px; }
}
.taste-last { margin: 12px 0 0; padding-top: 12px; border-block-start: 1px solid var(--border); font-size: .875rem; line-height: 1.55; color: var(--text-muted); }
.taste-held { margin: 10px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--text-muted); }
.taste-held:empty { display: none; }
.callout { margin: -6px 0 20px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-tint), var(--bg-deep); font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); animation: pane-in 420ms var(--ease-out) both; }
.callout b { font-weight: 600; color: var(--text); }
.count { margin: 0; font: 500 .875rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.keys { margin-top: 16px; }
@media (hover: none) { .keys { display: none; } }

.auto { margin: -12px 0 18px; }
.pane-learn .taste { margin-bottom: 4px; }
.paper-m { display: none; }
.offer { margin-top: 28px; padding-top: 24px; border-block-start: 1px solid var(--border); }
.offer-t { margin: 0; max-width: 24ch; font: 600 clamp(1.3rem, 1.05rem + .8vw, 1.6rem)/1.28 var(--font-display); letter-spacing: var(--tracking-display); color: var(--text); }
.offer-sub { margin: 8px 0 22px; font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }
.offer-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }

.device { --ph-h: clamp(500px, min(100dvh - var(--top-h) - var(--sbar-h) - 40px, 46vw * 2.1667), 780px); --ph-w: calc(var(--ph-h) * .4615); }
.phone { position: relative; width: var(--ph-w); height: var(--ph-h); padding: 9px; border-radius: calc(var(--ph-w) * .155);
  background: linear-gradient(150deg, #46444e 0%, #1d1c22 34%, #2b2a31 64%, #141318 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 2px #0b0a0e, var(--elevation-3); }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2d2c33; }
.phone::before { inset-inline-start: -3px; top: 21%; height: 8%; box-shadow: 0 calc(var(--ph-h) * .1) 0 #2d2c33; }
.phone::after { inset-inline-end: -3px; top: 27%; height: 13%; }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--ph-w) * .155 - 9px); background: var(--night); isolation: isolate; }
.island { position: absolute; z-index: 7; top: 9px; inset-inline: 0; width: 31%; height: 26px; margin-inline: auto; border-radius: 14px; background: #000; }
.status { position: absolute; z-index: 6; top: 0; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; height: 44px; padding-inline: 24px 20px; color: #FDFDFB; font: 600 .8125rem/1 var(--font-body); font-variant-numeric: tabular-nums; pointer-events: none; }
.screen.on-paper .status { background: var(--paper-ink); }
.status-g { display: inline-flex; align-items: center; gap: 6px; }
.g-sig { width: 15px; height: 10px; background:
  linear-gradient(currentColor, currentColor) 0 100% / 3px 40% no-repeat,
  linear-gradient(currentColor, currentColor) 4px 100% / 3px 60% no-repeat,
  linear-gradient(currentColor, currentColor) 8px 100% / 3px 80% no-repeat,
  linear-gradient(currentColor, currentColor) 12px 100% / 3px 100% no-repeat; }
.g-bat { position: relative; width: 22px; height: 11px; border: 1px solid rgba(253,253,251,.55); border-radius: 3px; }
.g-bat::after { content: ""; position: absolute; inset: 1.5px; inset-inline-end: 5px; border-radius: 1.5px; background: currentColor; }

.lock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 62px 12px 0; color: #FDFDFB; text-align: center; transition: transform 680ms var(--ease-out), opacity 680ms var(--ease-out); }
.lock.is-away { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #08070C 0%, #15141A 52%, #1F2031 100%); }
.sky-dawn { position: absolute; inset: 0; opacity: .14; background: radial-gradient(135% 64% at 50% 106%, #EB6DF4 0%, rgba(146,58,158,.92) 25%, rgba(108,77,196,.7) 45%, rgba(116,176,236,.38) 66%, rgba(22,33,113,0) 88%); }
.lock-date { margin: 0; font: 500 .9375rem/1.2 var(--font-body); opacity: .9; }
.lock-clock { margin: 2px 0 0; font: 500 calc(var(--ph-w) * .235)/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.la { width: 100%; margin-top: 22px; padding: 12px 14px 14px; border-radius: 22px; background: rgba(31,32,49,.66); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-align: start; }
.la-top { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 .8125rem/1.2 var(--font-body); }
.la-top .ico { width: 18px; height: 18px; color: #A096D2; }
.la-when { margin-inline-start: auto; font: 500 .6875rem/1 var(--font-mono); opacity: .75; }
.la-t { margin: 8px 0 0; font: 400 .875rem/1.4 var(--font-body); }
.la-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.la-chips span { padding: 5px 8px; border-radius: 999px; background: rgba(253,253,251,.1); font: 500 .6875rem/1.1 var(--font-mono); }
.la-bar { display: none; height: 4px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: rgba(253,253,251,.14); }
.la-bar i { display: block; height: 100%; background: #FDFDFB; transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .la-bar i { transform-origin: 100% 50%; }
.la.is-live .la-bar { display: block; }
.la.is-live .la-chips { display: none; }
.ping { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin-top: 22px; padding: 12px; border: 0; border-radius: 22px; background: rgba(253,253,251,.9); color: var(--paper-ink); text-align: start; cursor: pointer; box-shadow: 0 14px 34px -14px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ping.is-in { animation: ping-in 640ms var(--ease-out) both; }
.ping:focus-visible { outline: 2px solid #A096D2; outline-offset: 3px; }
@keyframes ping-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
.ping-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--paper-ink); color: #A096D2; }
.ping-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ping-h { display: flex; align-items: baseline; gap: 8px; font: 600 .8125rem/1.2 var(--font-body); }
.ping-now { margin-inline-start: auto; font: 400 .75rem/1 var(--font-body); color: var(--paper-muted); }
.ping-t { font: 400 .8125rem/1.38 var(--font-body); color: var(--paper-ink); }
.home { position: absolute; bottom: 8px; inset-inline: 0; width: 34%; height: 5px; margin-inline: auto; border-radius: 3px; background: rgba(253,253,251,.7); }

.appv { position: absolute; inset: 0; z-index: 2; padding-top: 44px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--paper-ink); opacity: 0; transform: translateY(28px); pointer-events: none; transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); scrollbar-width: thin; scrollbar-color: rgba(21,20,26,.22) transparent; }
.appv.is-on { opacity: 1; transform: none; pointer-events: auto; }

.b-hero { padding: 16px 18px 18px; background: var(--paper-ink); color: #FDFDFB; }
.b-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b-top .ico { width: 24px; height: 24px; color: #A096D2; }
.b-date { padding: 6px 10px; border-radius: 999px; background: rgba(253,253,251,.1); font: 500 .75rem/1 var(--font-mono); }
.b-h { margin: 14px 0 4px; font: 600 1.625rem/1.1 var(--font-display); letter-spacing: -.02em; color: #FDFDFB; outline: none; }
.b-sub { margin: 0; font: 400 .9375rem/1.45 var(--font-body); color: #CFCBD9; }
.b-for { margin: 10px 0 0; font: 500 .8125rem/1.3 var(--font-mono); color: #A096D2; }
.b-funnel { display: flex; align-items: flex-start; gap: 4px; margin: 16px 0 0; padding-top: 14px; border-block-start: 1px solid rgba(253,253,251,.14); }
.b-f { flex: 1; min-width: 0; }
.b-f b { display: block; font: 600 1.375rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.b-f span { display: block; margin-top: 5px; font: 400 .6875rem/1.3 var(--font-mono); color: #CFCBD9; }
.b-sep { flex: none; padding-top: 2px; color: rgba(253,253,251,.4); }
.b-sep .ico { width: 16px; height: 16px; }
.b-src { margin: 12px 0 0; font: 400 .75rem/1.45 var(--font-mono); color: #B4B0C0; }
.b-sec { padding: 20px 12px 2px; }
.b-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 4px 10px; }
.b-sec-h h3 { margin: 0; font: 600 1.0625rem/1.25 var(--font-display); letter-spacing: -.01em; color: var(--paper-ink); }
.b-sec-h span { font: 400 .75rem/1 var(--font-mono); color: var(--paper-muted); white-space: nowrap; }
.b-sec-sub { margin: -4px 4px 10px; font-size: .8125rem; line-height: 1.45; color: var(--paper-muted); }
.b-foot { margin: 6px 16px 28px; font: 400 .75rem/1.55 var(--font-mono); color: var(--paper-muted); }

.card { margin: 0 0 12px; padding: 14px 14px 8px; border: 1px solid var(--paper-rule); border-radius: 16px; background: var(--paper-card); outline: none; scroll-margin-top: 56px; }
.card.is-focus { box-shadow: 0 0 0 2px var(--paper-card), 0 0 0 4px #923A9E; }
.c-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cp { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--paper-rule); border-radius: 999px; font: 500 .6875rem/1.2 var(--font-mono); color: var(--paper-muted); }
.cp-x { border-color: var(--paper-plum); background: var(--paper-plum); color: #FDFDFB; }
.cp-s { border-color: var(--paper-plum); color: var(--paper-plum); }
.cp-e { border-style: dashed; border-color: var(--paper-plum); color: var(--paper-plum); }
.cp-top { border-color: var(--paper-soft); background: var(--paper-soft); color: var(--paper-plum); }
.c-src { margin: 0 0 4px; font: 400 .75rem/1.35 var(--font-mono); color: var(--paper-muted); }
.c-t { margin: 0 0 10px; font: 600 1.0625rem/1.35 var(--font-body); color: var(--paper-ink); }
.c-why-l, .c-lbl { margin: 0; font: 600 .8125rem/1.35 var(--font-body); color: var(--paper-plum); }
.c-why { margin: 2px 0 4px; font: 400 1rem/1.55 var(--font-body); color: var(--paper-ink); }
.c-fold-b { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--paper-plum); font: 500 .875rem/1.2 var(--font-body); text-align: start; cursor: pointer; }
.c-fold-b .ico { width: 18px; height: 18px; transition: transform 280ms var(--ease-out); }
.c-fold-b[aria-expanded="true"] .ico { transform: rotate(180deg); }
.c-fold { padding: 0 0 6px; animation: pane-in 360ms var(--ease-out) both; }
.c-lbl { margin-top: 6px; }
.c-lbl small { font-weight: 400; font-size: .8125rem; color: var(--paper-muted); }
.c-txt { margin: 2px 0 8px; font: 400 1rem/1.55 var(--font-body); }
.bite { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 10px 0; border-block-start: 1px solid var(--paper-rule); }
.bite:first-of-type { margin-top: 6px; }
.bite-l { grid-column: 1 / -1; font: 500 .6875rem/1.2 var(--font-mono); color: var(--paper-muted); }
.bite p { margin: 0; font: 400 1rem/1.5 var(--font-body); }
.mini { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--paper-rule); border-radius: 12px; background: var(--paper-card); color: var(--paper-plum); font: 500 .8125rem/1 var(--font-body); white-space: nowrap; cursor: pointer; }
.mini .ico { width: 16px; height: 16px; }
.c-rate-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 8px; padding-top: 12px; border-block-start: 1px solid var(--paper-rule); }
.c-rate-h > span:first-child { font: 600 .8125rem/1 var(--font-body); }
.rcpt { display: inline-flex; align-items: center; gap: 4px; min-height: 14px; font: 500 .75rem/1 var(--font-mono); color: var(--paper-plum); opacity: 0; transition: opacity 240ms ease; }
.rcpt.is-on { opacity: 1; }
.rcpt .ico { width: 14px; height: 14px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--paper-rule); border-radius: 12px; }
.seg button { min-height: 44px; padding: 0 4px; border: 0; border-inline-start: 1px solid var(--paper-rule); background: var(--paper-card); color: var(--paper-ink); font: 500 .8125rem/1.15 var(--font-body); cursor: pointer; }
.seg button:first-child { border-inline-start: 0; }
.seg button[aria-pressed="true"] { background: var(--paper-plum); color: #FDFDFB; }
.c-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.c-note-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 2px; border: 0; background: none; color: var(--paper-plum); font: 500 .875rem/1 var(--font-body); cursor: pointer; }
.c-note-b .ico { width: 17px; height: 17px; }
.c-make { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--paper-ink); color: #FDFDFB; font: 600 .875rem/1 var(--font-body); white-space: nowrap; cursor: pointer; }
.c-note { padding: 4px 0 6px; }
.c-note textarea, .draft textarea { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--paper-rule); border-radius: 12px; background: var(--paper-card); color: var(--paper-ink); font: 400 1rem/1.5 var(--font-body); resize: vertical; }
.c-note textarea { min-height: 84px; }
.c-note textarea::placeholder { color: var(--paper-muted); }
.c-note-acts { display: flex; justify-content: flex-end; margin-top: 8px; }
.seg button:active, .c-make:active, .mini:active, .rv:active, .mping-go:active { transform: scale(.97); }
.seg button, .c-make, .mini, .rv, .mping-go { transition: transform 120ms ease; }
.appv button:focus-visible, .studio button:focus-visible, .appv textarea:focus-visible, .studio textarea:focus-visible, .paper-m button:focus-visible { outline: 2px solid #923A9E; outline-offset: 2px; }
.seg button:focus-visible { outline-offset: -3px; }

.studio { position: absolute; inset: 0; z-index: 5; padding-top: 44px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--paper-ink); transform: translateX(104%); transition: transform 460ms var(--ease-out); scrollbar-width: thin; scrollbar-color: rgba(21,20,26,.22) transparent; }
[dir="rtl"] .studio { transform: translateX(-104%); }
.studio.is-open { transform: none; }
.s-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; min-height: 52px; padding: 4px 6px; border-block-end: 1px solid var(--paper-rule); background: var(--paper); }
.s-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 12px 0 4px; border: 0; background: none; color: var(--paper-plum); font: 500 .9375rem/1 var(--font-body); cursor: pointer; }
.s-body { padding: 14px 14px 28px; }
.s-from { margin: 0; font: 400 .75rem/1.35 var(--font-mono); color: var(--paper-muted); }
.s-t { margin: 4px 0 12px; font: 600 1.125rem/1.3 var(--font-display); letter-spacing: -.01em; outline: none; }
.s-angle { margin: 0 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--paper-soft); font: 400 .9375rem/1.5 var(--font-body); }
.s-angle b { font-weight: 600; color: var(--paper-plum); }
.draft { margin: 0 0 16px; }
.draft-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 6px; }
.draft-h b { font: 600 .9375rem/1.2 var(--font-body); }
.draft-h span { font: 400 .75rem/1 var(--font-mono); color: var(--paper-muted); }
.draft-box { padding: 12px 14px; border: 1px solid var(--paper-rule); border-radius: 14px; background: var(--paper-card); font: 400 1rem/1.55 var(--font-body); white-space: pre-line; transition: opacity 220ms ease; }
.draft-box.is-busy { opacity: .3; }
.draft textarea { min-height: 150px; }
.draft-acts { display: flex; gap: 8px; margin-top: 8px; }
.revise { margin-top: 20px; padding-top: 14px; border-block-start: 1px solid var(--paper-rule); }
.revise > p { margin: 0 0 10px; font: 600 .875rem/1.4 var(--font-body); }
.revise-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv { min-height: 44px; padding: 0 14px; border: 1px solid var(--paper-rule); border-radius: 999px; background: var(--paper-card); color: var(--paper-ink); font: 500 .875rem/1 var(--font-body); cursor: pointer; }
.rv[aria-pressed="true"] { border-color: var(--paper-plum); background: var(--paper-plum); color: #FDFDFB; }

.t-hero { padding: 16px 18px 18px; background: var(--paper-ink); color: #FDFDFB; }
.t-head { padding: 16px 16px 4px; }
.t-head h3 { margin: 0; font: 600 1.125rem/1.25 var(--font-display); letter-spacing: -.01em; }
.t-head p { margin: 4px 0 0; font-size: .875rem; line-height: 1.45; color: var(--paper-muted); }
.t-list { position: relative; margin: 0; padding: 14px 12px 22px; list-style: none; }
.t-cut { display: flex; align-items: center; gap: 10px; margin: 4px 4px 10px; font: 500 .75rem/1.2 var(--font-mono); color: var(--paper-muted); transition: transform 760ms var(--ease-out); }
.t-cut::after { content: ""; flex: 1; border-block-start: 1px dashed var(--paper-rule); }
.t-card { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; margin: 0 0 8px; padding: 12px; border: 1px solid var(--paper-rule); border-radius: 14px; background: var(--paper-card); transition: transform 760ms var(--ease-out); }
.t-card.is-below { border-style: dashed; background: transparent; }
.t-rank { font: 600 1rem/1.35 var(--font-display); color: var(--paper-plum); font-variant-numeric: tabular-nums; }
.t-t { margin: 0; font: 600 .9375rem/1.38 var(--font-body); color: var(--paper-ink); }
.t-s { font: 600 .875rem/1.5 var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; }
.t-meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.t-src { font: 400 .75rem/1.3 var(--font-mono); color: var(--paper-muted); }
.t-mv { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 2px 8px 2px 5px; border: 1px solid var(--paper-rule); border-radius: 999px; font: 500 .6875rem/1.2 var(--font-mono); color: var(--paper-muted); opacity: 0; transition: opacity 420ms ease 520ms; }
.t-mv .ico { width: 13px; height: 13px; }
.t-mv.is-up { border-color: var(--paper-plum); background: var(--paper-plum); color: #FDFDFB; }
.t-mv.is-down { border-color: var(--paper-plum); color: var(--paper-plum); }
.t-why { grid-column: 2 / -1; font: 400 .75rem/1.35 var(--font-mono); color: var(--paper-muted); opacity: 0; transition: opacity 420ms ease 520ms; }
.t-list.is-moved .t-mv, .t-list.is-moved .t-why { opacity: 1; }

.mbar, .mping { display: none; }
.toast { position: fixed; z-index: 40; inset-inline: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; padding: 12px 14px; border-radius: 14px; background: var(--text); color: var(--bg); font: 500 .875rem/1.45 var(--font-body); box-shadow: var(--elevation-2); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 240ms ease, transform 240ms var(--ease-out); }
.toast.is-on { opacity: 1; transform: none; }
.toast:empty { visibility: hidden; }

@media (max-width: 599.98px) {
  .desk-win.is-done { display: flex; overflow: hidden; }
  .desk-win.is-done .log { padding-block-start: 0; }
  :root { --top-h: 56px; --gut: 16px; }
  .top { gap: 4px; padding-inline: 8px; }
  .steps { gap: 0; margin: 0; }
  .step { gap: 6px; padding-inline: 10px; font-size: .8125rem; }
  .step .step-l { display: none; }
  .step[aria-current="step"] .step-l { display: inline; }
  .step[aria-current="step"] { padding-inline-end: 12px; }
  .replay { display: none !important; }

  .stage { display: block; padding: 6px var(--gut) 40px; }
  .side { padding-block: 4px 0; }
  .p-title { font-size: 1.875rem; }
  .p-lead { margin-bottom: 20px; }
  .device { display: none; position: static; }

  .sky-m { position: relative; display: grid; place-items: center; align-content: center; height: 172px; margin: -6px calc(-1 * var(--gut)) 22px; overflow: hidden; background: linear-gradient(180deg, #08070C 0%, #15141A 52%, #1F2031 100%); color: #FDFDFB; isolation: isolate; }
  .sky-m .sky-dawn { z-index: -1; }
  .sky-clock { margin: 0; font: 500 3.5rem/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
  .sky-date { margin: 8px 0 0; font: 500 .875rem/1.2 var(--font-body); opacity: .88; }
  .run-clock { margin: 0 0 16px; }
  .run-clock .clock { display: none; }
  .desk-win { height: 236px; }

  .pane-setup .p-acts { position: sticky; bottom: 0; z-index: 5; margin: 20px calc(-1 * var(--gut)) 0; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--border); background: var(--bg); }
  .pane-setup .p-acts .ra-btn { width: 100%; }

  .app[data-view="brief"] .side { display: none; }
  .app[data-view="brief"] .stage { padding: 0 0 96px; }
  .app[data-view="brief"] .device { display: block; }
  .phone { width: auto; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .phone::before, .phone::after, .island, .status, .lock, .home, .app-tomorrow { display: none; }
  .screen { height: auto; overflow: visible; border-radius: 0; background: var(--paper); }
  .app-brief { position: static; padding-top: 0; overflow: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  .b-hero { padding: 18px 20px 20px; }
  .b-sec { padding-inline: 12px; }
  .studio { position: fixed; z-index: 60; padding-top: 0; }
  html.studio-open, html.studio-open body { overflow: hidden; }
  html.studio-open .app[data-view="brief"] .mbar { display: none; }

  .app[data-view="brief"] .mbar { position: fixed; z-index: 30; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--border); background: var(--bg); }
  .mping { position: fixed; z-index: 45; top: 8px; inset-inline: 8px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 20px; background: rgba(253,253,251,.96); color: var(--paper-ink); box-shadow: 0 18px 40px -16px rgba(0,0,0,.75); animation: mping-in 640ms var(--ease-out) both; }
  .mping .ping-body { gap: 2px; }
  .mping-go { flex: none; min-width: 64px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--paper-ink); color: #FDFDFB; font: 600 .875rem/1 var(--font-body); cursor: pointer; }
  .mping-go:focus-visible { outline: 2px solid #923A9E; outline-offset: 2px; }

  .paper-m { display: block; margin: 22px 0 6px; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper); color: var(--paper-ink); }
  .offer-acts .ra-btn-wrap, .offer-acts .ra-btn { width: 100%; }
}
@keyframes mping-in { from { opacity: 0; transform: translateY(-130%); } to { opacity: 1; transform: none; } }
@media (min-width: 600px) { .toast { display: none; } }

html[data-review] [data-copy="proposal"] { outline: 1px dashed var(--link); outline-offset: 3px; }
html[data-review] .appv [data-copy="proposal"], html[data-review] .studio [data-copy="proposal"], html[data-review] .paper-m [data-copy="proposal"] { outline-color: #923A9E; }

.nojs { max-width: 560px; margin: 0 auto; padding: 48px 16px; }
.nojs p { margin: 0 0 20px; font-size: var(--fs-lead); line-height: 1.5; }
html:not(.js) .app { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pane, .run-end, .callout, .lock, .appv, .studio, .ping, .mping, .toast, .log, .r, .lv-pos, .lv-neg, .c-fold, .c-fold-b .ico, .rcpt, .draft-box, .t-card, .t-cut, .t-mv, .t-why,
  .seg button, .c-make, .mini, .rv, .mping-go { transition: none !important; animation: none !important; }
}

.c-note-hint { margin: 0 0 8px; color: var(--paper-muted); font: 400 .875rem/1.4 var(--font-body); }
.c-note-q { display: flex; flex-wrap: wrap; gap: 8px; }