:root {
  color-scheme: dark;
  --bg: #0b0915;
  --surface: #151324;
  --surface-2: #1d1930;
  --ink: #fffdf8;
  --muted: #b9b3c9;
  --line: rgba(255, 255, 255, .13);
  --violet: #8c5bff;
  --violet-deep: #6136d9;
  --pink: #ff4e91;
  --orange: #ff8a38;
  --yellow: #ffd65c;
  --mint: #70e7c3;
  --mint-deep: #28cda4;
  --shadow: 0 28px 70px rgba(0, 0, 0, .34);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% -10%, rgba(140, 91, 255, .22), transparent 34rem),
    radial-gradient(circle at 100% 30%, rgba(255, 78, 145, .11), transparent 29rem),
    var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .3; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .25; }
.ambient-one { width: 18rem; height: 18rem; top: 8rem; left: -12rem; background: var(--violet); }
.ambient-two { width: 16rem; height: 16rem; top: 42rem; right: -12rem; background: var(--pink); }

.app-shell {
  width: min(100%, 620px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(17px + env(safe-area-inset-top)) 18px calc(112px + env(safe-area-inset-bottom));
}

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 49px; height: 49px; flex: 0 0 auto; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.065); border: 1px solid var(--line); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.mark-stem, .mark-loop { stroke: rgba(255,255,255,.55); stroke-width: 2.4; }
.mark-exit { stroke: var(--mint); stroke-width: 3; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { font-size: 1.55rem; letter-spacing: .16em; line-height: 1; font-weight: 950; }
.brand-copy small { font-size: .58rem; letter-spacing: .16em; color: #a9a3b8; font-weight: 800; }
.topbar-action { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(24, 21, 39, .7); backdrop-filter: blur(18px); padding: 10px 11px 10px 13px; color: #d6d1df; font-size: .65rem; font-weight: 850; letter-spacing: .06em; }
.topbar-action svg { width: 17px; height: 17px; }

main { min-height: 60vh; outline: none; }
main > * { animation: rise .42s cubic-bezier(.2,.8,.2,1) both; }
main > *:nth-child(2) { animation-delay: .035s; }
main > *:nth-child(3) { animation-delay: .07s; }

.eyebrow { margin: 0 0 15px; color: var(--yellow); font-size: .69rem; font-weight: 950; letter-spacing: .18em; line-height: 1.3; }
.screen-heading { margin: 32px 5px 30px; }
.screen-heading h1, .path-intro h1, .week-hero h1 {
  margin: 0;
  font-size: clamp(3.25rem, 14vw, 5.2rem);
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 950;
}
.screen-heading h1 span { color: var(--mint); }
.lead { max-width: 32rem; margin: 21px 0 0; color: #c9c4d2; font-size: 1.02rem; line-height: 1.5; }

.button, .check-button {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: 20px;
  padding: 17px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-size: .88rem;
  font-weight: 950;
  letter-spacing: .035em;
  text-decoration: none;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.button svg, .check-button svg { width: 24px; height: 24px; flex: 0 0 auto; }
.button-dark { margin: 11px 0; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.button-ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.button-light { background: white; color: #171323; }
.button-mint { margin: 14px 0; color: #08221c; background: linear-gradient(135deg, #91f0d1, var(--mint)); box-shadow: 0 15px 35px rgba(40, 205, 164, .17); }
.text-button { border: 0; background: transparent; padding: 10px 1px; color: #bdb7c9; font-size: .7rem; font-weight: 900; letter-spacing: .09em; }
.text-button-center { display: block; margin: 18px auto 0; text-align: center; }
.mini-button { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.07); padding: 9px 12px; font-size: .65rem; font-weight: 900; letter-spacing: .07em; }
.back-button { margin: 4px 0 18px 3px; padding: 9px 0; border: 0; background: transparent; color: #aba5b8; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }

.home-hero {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border-radius: 38px;
  padding: 31px 27px 24px;
  background:
    radial-gradient(circle at 83% 8%, rgba(255, 205, 104, .75), transparent 21%),
    radial-gradient(circle at 87% 48%, rgba(255, 84, 144, .72), transparent 35%),
    linear-gradient(145deg, #873dff 0%, #7a43f4 35%, #cc3eb7 70%, #f36969 100%);
  box-shadow: 0 30px 75px rgba(85, 38, 167, .36), inset 0 1px rgba(255,255,255,.24);
  isolation: isolate;
}
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 43%, rgba(39, 13, 78, .45)); }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; z-index: -1; }
.hero-orbit-one { width: 300px; height: 300px; right: -160px; top: 38px; }
.hero-orbit-two { width: 430px; height: 430px; right: -230px; top: -24px; }
.home-hero .eyebrow { color: rgba(255,255,255,.82); }
.home-hero h1 { margin: 52px 0 18px; font-size: clamp(4rem, 19vw, 6.6rem); line-height: .79; letter-spacing: -.085em; font-weight: 1000; text-shadow: 0 6px 30px rgba(54, 16, 85, .18); }
.hero-copy { margin: 0; position: relative; z-index: 2; font-size: .99rem; line-height: 1.48; color: rgba(255,255,255,.83); }
.hero-copy strong { color: white; }
.hero-button { position: relative; z-index: 2; margin-top: 29px; color: #191127; background: rgba(255,255,255,.94); box-shadow: 0 16px 35px rgba(40, 12, 75, .25); }
.hero-button svg { color: #6e37d9; }
.hero-foot { position: absolute; left: 27px; right: 27px; bottom: 21px; display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.72); font-size: .57rem; letter-spacing: .11em; font-weight: 900; }
.hero-road { position: absolute; z-index: -1; width: 235px; height: 235px; right: -14px; top: 95px; opacity: .38; stroke: rgba(255,255,255,.62); stroke-width: 2.2; }
.hero-road .hero-exit { opacity: 1; stroke: #bfffe9; stroke-width: 4; }

.home-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 11px; margin-top: 12px; }
.home-tile { min-height: 180px; border: 0; border-radius: 28px; padding: 19px; display: flex; flex-direction: column; text-align: left; overflow: hidden; box-shadow: var(--shadow); }
.tile-path { color: white; background: linear-gradient(145deg, #252042, #403277 68%, #6a47bf); }
.tile-week { color: #1b1620; background: linear-gradient(145deg, #ffd55d, #ffaf47); }
.tile-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.tile-top small { font-size: .57rem; letter-spacing: .1em; font-weight: 900; opacity: .7; }
.tile-top svg { width: 27px; height: 27px; }
.home-tile > strong { margin-top: auto; font-size: 1.65rem; line-height: .9; letter-spacing: -.055em; font-weight: 1000; }
.tile-week > strong { font-size: 3.6rem; }
.home-tile em { margin-top: 9px; font-size: .68rem; line-height: 1.2; font-style: normal; font-weight: 800; opacity: .72; }

.moves { display: grid; gap: 13px; }
.move-card { position: relative; width: 100%; min-height: 190px; border: 0; border-radius: 30px; padding: 23px; display: grid; grid-template-columns: 44px 1fr 27px; align-items: start; gap: 15px; text-align: left; overflow: hidden; box-shadow: var(--shadow); }
.move-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -100px; bottom: -115px; border: 1px solid currentColor; border-radius: 50%; opacity: .22; }
.move-route { color: #08231e; background: linear-gradient(140deg, #8af0d1, #4edbb5); }
.move-contact { color: white; background: linear-gradient(140deg, #9d6bff, #6740d9); }
.move-own { color: #2b1514; background: linear-gradient(140deg, #ffbd69, #ff735c); }
.move-icon { width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 15px; display: grid; place-items: center; opacity: .8; }
.move-icon svg { width: 26px; height: 26px; stroke-width: 2.2; }
.move-copy { display: flex; flex-direction: column; }
.move-copy small { margin: 2px 0 17px; font-size: .58rem; font-weight: 950; letter-spacing: .12em; opacity: .68; }
.move-copy strong { font-size: clamp(1.75rem, 8vw, 2.55rem); line-height: .87; letter-spacing: -.06em; font-weight: 1000; }
.move-copy em { max-width: 24rem; margin-top: 16px; font-size: .75rem; line-height: 1.4; font-style: normal; font-weight: 720; opacity: .76; }
.move-arrow { align-self: center; opacity: .75; }
.move-arrow svg { width: 27px; height: 27px; }

.selected-move { position: relative; min-height: 520px; border-radius: 36px; padding: 28px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.selected-move::after { content: ""; position: absolute; width: 290px; height: 290px; right: -170px; top: -70px; border: 1px solid currentColor; border-radius: 50%; opacity: .2; }
.selected-route { background: linear-gradient(145deg, #91f0d1, #48d4af); color: #09231e; }
.selected-contact { background: linear-gradient(145deg, #a571ff, #643ad2); color: white; }
.selected-own { background: linear-gradient(145deg, #ffbc67, #ff6b62); color: #2b1419; }
.selected-icon { width: 56px; height: 56px; border: 1px solid currentColor; border-radius: 18px; display: grid; place-items: center; }
.selected-icon svg { width: 34px; height: 34px; }
.selected-move > p { margin: 48px 0 13px; font-size: .62rem; font-weight: 950; letter-spacing: .16em; opacity: .7; }
.selected-move h2 { margin: 0; font-size: clamp(2.65rem, 12vw, 4.6rem); line-height: .82; letter-spacing: -.075em; font-weight: 1000; }
.selected-route h2, .selected-contact h2 { font-size: clamp(2.35rem, 10.5vw, 4.2rem); }
.selected-detail { margin-top: auto; padding-top: 16px; border-top: 1px solid currentColor; font-size: .83rem; line-height: 1.45; font-weight: 720; opacity: .78; }
.selected-guide { opacity: 1; }
.selected-guide p { margin: 0 0 9px; }
.selected-guide p:last-child { margin-bottom: 0; }
.guide-personal { font-size: .9rem; }
.guide-close { font-weight: 900; }
.phrase-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.phrase-list span { padding: 7px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: .65rem; font-weight: 850; }
.button-start { margin-top: 14px; min-height: 68px; color: white; background: linear-gradient(115deg, #ff7c47, #ff4f91 54%, #8b5cff); box-shadow: 0 18px 45px rgba(255, 78, 145, .22); }
.reminder-promise { margin: 12px 5px 0; color: #b9b3c3; text-align: center; font-size: .7rem; line-height: 1.4; font-weight: 750; }
.reminder-promise::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px rgba(92,225,189,.62); }
.reminder-promise.reminder-off::before { background: #8e8799; box-shadow: none; }

.money-note { margin: 14px 0; border: 1px solid rgba(255, 214, 92, .28); border-radius: 21px; padding: 17px 19px; background: linear-gradient(120deg, rgba(255,214,92,.1), rgba(255,138,56,.05)); }
.money-note span { display: block; margin-bottom: 7px; color: var(--yellow); font-size: .58rem; font-weight: 950; letter-spacing: .12em; }
.money-note strong { display: block; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.35; }

.timer-screen { position: relative; min-height: 440px; border-radius: 38px; padding: 30px 26px 25px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.timer-screen::before { content: ""; position: absolute; width: 420px; height: 420px; left: 48%; top: -250px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.timer-route { color: #0a221d; background: linear-gradient(155deg, #8ff0d1, #42d5ad 70%, #25bd9a); }
.timer-contact { color: white; background: linear-gradient(155deg, #9c69ff, #6034cd 72%, #4a25ae); }
.timer-own { color: #281417; background: linear-gradient(155deg, #ffbb65, #ff6d62); }
.timer-screen .eyebrow { color: currentColor; opacity: .7; }
.clock { margin: 55px 0 0; font-size: clamp(5.5rem, 25vw, 9rem); line-height: .82; letter-spacing: -.095em; font-weight: 950; font-variant-numeric: tabular-nums; }
.until { margin: 17px 0 0; font-size: .62rem; font-weight: 900; letter-spacing: .13em; opacity: .65; }
.timer-move { margin-top: auto; padding-top: 20px; border-top: 1px solid currentColor; }
.timer-move span { display: block; margin-bottom: 8px; font-size: .6rem; font-weight: 950; letter-spacing: .11em; opacity: .64; text-transform: uppercase; }
.timer-move strong { display: block; max-width: 29rem; font-size: 1.05rem; line-height: 1.35; }
.contact-controls { margin-top: 18px; }
.contact-controls .button { margin: 8px 0; }
.contact-line { font-size: 1rem; line-height: 1.4; font-weight: 750; }
.timer-screen .contact-controls { margin-top: 15px; }
.timer-screen .contact-controls .button { min-height: 54px; padding-block: 13px; }
.timer-screen .text-button { color: currentColor; opacity: .7; }

.check-list { display: grid; gap: 11px; }
.check-button { min-height: 92px; padding: 22px; font-size: 1rem; }
.check-less { color: #0c291f; background: linear-gradient(130deg, #8ff1d1, #54d8b3); }
.check-same { color: #2b2110; background: linear-gradient(130deg, #ffdf6c, #ffb84e); }
.check-more { color: white; background: linear-gradient(130deg, #ff6d78, #e84480); }
.reflection-list { display: grid; gap: 10px; }
.reflection-choice { min-height: 72px; width: 100%; border: 1px solid rgba(255,255,255,.11); border-radius: 23px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: white; background: linear-gradient(135deg, rgba(49,43,77,.94), rgba(28,25,48,.96)); text-align: left; font-size: .91rem; font-weight: 880; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.reflection-choice:nth-child(2) { background: linear-gradient(135deg, rgba(112,66,206,.86), rgba(49,35,91,.96)); }
.reflection-choice:nth-child(3) { background: linear-gradient(135deg, rgba(219,59,116,.83), rgba(93,31,75,.95)); }
.reflection-choice:nth-child(4) { color: #17231f; background: linear-gradient(135deg, #9aeed5, #4ed0ac); }
.reflection-choice:nth-child(5) { color: #2b2110; background: linear-gradient(135deg, #ffe27a, #ffb84d); }
.reflection-choice svg { width: 22px; height: 22px; flex: 0 0 auto; }
.insight-card { position: relative; min-height: 405px; border-radius: 37px; padding: 29px 27px; overflow: hidden; color: white; background: radial-gradient(circle at 92% 8%, rgba(255,222,110,.6), transparent 30%), linear-gradient(145deg, #a168ff, #673ad4 58%, #39208f); box-shadow: var(--shadow); }
.insight-card::after { content: ""; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; right: -210px; top: 95px; }
.insight-card .eyebrow { color: rgba(255,255,255,.7); }
.insight-card h1 { max-width: 100%; margin: 95px 0 0; font-size: clamp(2.65rem, 11vw, 4.5rem); line-height: .86; letter-spacing: -.07em; text-transform: uppercase; overflow-wrap: normal; word-break: normal; }
.insight-line { position: absolute; left: 27px; right: 27px; bottom: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.35); }
.insight-line strong, .insight-line span { display: block; }
.insight-line strong { font-size: .68rem; letter-spacing: .09em; }
.insight-line span { margin-top: 7px; color: rgba(255,255,255,.78); font-size: .9rem; }
.next-prompt { margin: 19px 5px 8px; color: #c5bfce; font-size: .84rem; line-height: 1.45; }
.button-next { margin: 10px 0 14px; min-height: 84px; }
.next-contact { color: white; background: linear-gradient(130deg, #a16eff, #6138d2); }
.next-route { color: #09231e; background: linear-gradient(130deg, #8bf0d1, #4ad9b2); }

.finish-hero {
  position: relative;
  min-height: 500px;
  margin-top: 18px;
  padding: 30px 27px 25px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 38px;
  color: white;
  background:
    radial-gradient(circle at 82% 5%, rgba(255, 214, 92, .78), transparent 21%),
    radial-gradient(circle at 91% 56%, rgba(255, 78, 145, .8), transparent 37%),
    linear-gradient(145deg, #7047ff 0%, #9e45e5 42%, #e544a6 72%, #ff7a54 100%);
  box-shadow: 0 30px 75px rgba(103, 42, 176, .4), inset 0 1px rgba(255,255,255,.25);
  isolation: isolate;
}
.finish-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, transparent 40%, rgba(63, 16, 88, .4)); }
.finish-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; }
.finish-orbit-one { width: 300px; height: 300px; right: -160px; top: 35px; }
.finish-orbit-two { width: 440px; height: 440px; right: -245px; top: -35px; }
.finish-hero .eyebrow { color: rgba(255,255,255,.82); }
.finish-hero h1 { margin: 58px 0 18px; font-size: clamp(4rem, 18vw, 6.2rem); line-height: .8; letter-spacing: -.085em; font-weight: 1000; text-shadow: 0 6px 28px rgba(60, 12, 85, .18); }
.finish-copy { max-width: 29rem; margin: 0; color: rgba(255,255,255,.86); font-size: 1rem; line-height: 1.48; }
.finish-save { margin-top: auto; color: #25122f; background: rgba(255,255,255,.95); box-shadow: 0 16px 38px rgba(51, 12, 72, .25); }
.finish-save svg { color: #7035d8; }

.optional-note { margin-top: 16px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); overflow: hidden; }
.optional-note summary { padding: 20px; display: flex; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; font-size: .69rem; font-weight: 900; letter-spacing: .08em; }
.optional-note summary::-webkit-details-marker { display: none; }
.optional-note summary span { color: var(--mint); font-size: 1.25rem; line-height: .6; }
.finish-form { padding: 4px 18px 19px; }
.screen-heading + .finish-form { padding: 0; }

.field { display: block; margin: 17px 0; }
.field > span { display: block; margin: 0 0 8px 2px; color: #c9c3d1; font-size: .75rem; line-height: 1.35; font-weight: 750; }
input, textarea, select { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; color: var(--ink); background: rgba(8, 7, 17, .63); outline: none; }
textarea { min-height: 98px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: #777184; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #aaa4b6 50%), linear-gradient(135deg, #aaa4b6 50%, transparent 50%); background-position: calc(100% - 20px) 23px, calc(100% - 15px) 23px; background-size: 5px 5px; background-repeat: no-repeat; }

.week-hero { position: relative; min-height: 365px; border-radius: 36px; padding: 30px 27px; overflow: hidden; color: #24150e; background: radial-gradient(circle at 100% 0, #fff29b, transparent 35%), linear-gradient(145deg, #ffd05b, #ff8b3d); box-shadow: var(--shadow); }
.week-hero::after { content: ""; position: absolute; width: 270px; height: 270px; border: 1px solid currentColor; border-radius: 50%; right: -150px; bottom: -125px; opacity: .2; }
.week-hero .eyebrow { color: currentColor; opacity: .65; }
.week-hero { container-type: inline-size; }
.week-hero h1 { font-size: clamp(2.6rem, 15vw, 5rem); font-size: min(15.5cqi, 5rem); }
.week-numbers { position: absolute; left: 27px; right: 27px; bottom: 26px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.week-numbers > div { display: flex; align-items: end; gap: 9px; padding-top: 15px; border-top: 1px solid rgba(38,21,14,.25); }
.week-numbers strong { font-size: 2.65rem; line-height: .78; letter-spacing: -.07em; }
.week-numbers span { font-size: .55rem; line-height: 1.22; font-weight: 950; letter-spacing: .07em; opacity: .65; }
.week-log { margin-top: 28px; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 3px 12px; }
.section-row h2 { margin: 0; font-size: .72rem; letter-spacing: .12em; }
.week-entry { position: relative; margin-top: 10px; border: 1px solid var(--line); border-radius: 25px; padding: 20px; background: rgba(22, 19, 37, .82); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.entry-date { display: flex; justify-content: space-between; gap: 12px; color: #a9a3b5; font-size: .62rem; text-transform: uppercase; font-weight: 850; letter-spacing: .06em; }
.entry-date span { color: var(--mint); }
.week-entry h2 { margin: 18px 0 11px; font-size: 1.35rem; letter-spacing: -.035em; }
.week-entry p { margin: 8px 0; color: #c5bfce; font-size: .82rem; line-height: 1.45; }
.week-entry .entry-note { color: white; }
.entry-delete { margin-top: 11px; border: 0; background: transparent; color: #817b8b; padding: 0; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.empty-state { min-height: 150px; border: 1px dashed rgba(255,255,255,.14); border-radius: 25px; padding: 26px; display: grid; place-items: center; text-align: center; color: #777184; font-size: .68rem; line-height: 1.45; font-weight: 850; letter-spacing: .07em; }
.older { margin-top: 15px; }
.older > summary { padding: 16px 4px; color: #918a9b; cursor: pointer; font-size: .66rem; font-weight: 900; letter-spacing: .08em; }

.path-intro { margin: 36px 6px 28px; }
.path-intro p:last-child { max-width: 27rem; margin: 21px 0 0; color: #beb8c7; font-size: .91rem; line-height: 1.5; }
.story-wrap { overflow: hidden; }
.story { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; padding: 3px 2px 8px; }
.story::-webkit-scrollbar { display: none; }
.story-card { position: relative; min-height: 515px; flex: 0 0 calc(100% - 25px); scroll-snap-align: start; border-radius: 34px; padding: 27px 25px; overflow: hidden; box-shadow: var(--shadow); }
.story-card::after { content: ""; position: absolute; width: 310px; height: 310px; border: 1px solid currentColor; border-radius: 50%; right: -205px; top: 80px; opacity: .16; }
.story-one { color: #2d1714; background: linear-gradient(155deg, #ffbd67, #ff765d); }
.story-two { color: white; background: linear-gradient(155deg, #a16dff, #6540d2); }
.story-three { color: white; background: linear-gradient(155deg, #ff648e, #c52f78); }
.story-four { color: #08251e; background: linear-gradient(155deg, #93f0d2, #48d5ae); }
.card-number { margin: 0 0 59px; font-size: .61rem; font-weight: 950; letter-spacing: .15em; opacity: .68; }
.story-card { container-type: inline-size; }
.story-card h2 { margin: 0; font-size: clamp(2.4rem, 15vw, 5.1rem); font-size: min(16.2cqi, 5.1rem); line-height: .79; letter-spacing: -.08em; font-weight: 1000; overflow-wrap: anywhere; }
.story-card > p:not(.card-number) { position: absolute; left: 25px; right: 25px; bottom: 90px; margin: 0; padding-top: 18px; border-top: 1px solid currentColor; font-size: .88rem; line-height: 1.48; font-weight: 680; opacity: .79; }
.story-four > p:not(.card-number) { bottom: 195px; }
.card-actions { position: absolute; left: 25px; right: 25px; bottom: 92px; display: flex; flex-wrap: wrap; gap: 6px; }
.card-actions span { border: 1px solid rgba(8,37,30,.25); border-radius: 999px; padding: 8px 9px; font-size: .53rem; font-weight: 950; letter-spacing: .045em; }
.story-nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; margin: 10px 2px 0; }
.story-nav > button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: 1.5rem; }
.story-dots { display: flex; justify-content: center; gap: 7px; }
.story-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #504b5c; transition: width .22s, background .22s; }
.story-dots button.is-active { width: 23px; border-radius: 999px; background: var(--mint); }
.my-line { margin: 23px 2px 0; border: 1px solid rgba(255,214,92,.22); border-radius: 25px; padding: 22px; background: rgba(255,214,92,.07); color: #f7e6ae; font-size: 1.05rem; line-height: 1.5; }
.my-line small { display: block; margin-bottom: 9px; color: var(--yellow); font-size: .58rem; font-style: normal; font-weight: 950; letter-spacing: .12em; }
.path-actions { margin-top: 18px; }

.plan-form { margin-top: 24px; }
.plan-section { display: grid; grid-template-columns: 42px 1fr; gap: 14px; margin: 11px 0; border: 1px solid var(--line); border-radius: 27px; padding: 20px 17px 17px; background: rgba(21, 19, 36, .82); }
.plan-number { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; color: #1c1425; background: var(--yellow); font-size: .7rem; font-weight: 950; }
.plan-fields h2 { margin: 9px 0 23px; font-size: .85rem; letter-spacing: .03em; }
.plan-fields .field { margin: 14px 0; }
.install-card { margin: 24px 0 4px; border: 1px solid var(--line); border-radius: 27px; padding: 19px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 13px; background: linear-gradient(135deg, rgba(140,91,255,.14), rgba(255,78,145,.07)); }
.install-icon { width: 45px; height: 45px; border-radius: 15px; display: grid; place-items: center; color: var(--yellow); background: rgba(255,255,255,.07); }
.install-icon svg { width: 25px; height: 25px; }
.install-card small { color: var(--mint); font-size: .55rem; font-weight: 950; letter-spacing: .1em; }
.install-card h2 { margin: 5px 0 3px; font-size: .92rem; line-height: 1.15; }
.install-card p { margin: 0; color: #aaa4b5; font-size: .7rem; }
.reminder-card { margin-top: 11px; background: linear-gradient(135deg, rgba(77,216,177,.13), rgba(140,91,255,.1)); }
.reminder-card .install-icon { color: var(--mint); }

.notice { margin-bottom: 16px; border: 1px solid rgba(255,214,92,.35); border-radius: 18px; padding: 14px 16px; color: #ffe9a4; background: rgba(107,79,0,.28); font-size: .8rem; line-height: 1.45; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(95px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 36px), 560px); border-radius: 18px; padding: 15px 17px; color: #161020; background: rgba(255,255,255,.95); backdrop-filter: blur(20px); box-shadow: 0 17px 45px rgba(0,0,0,.34); font-size: .79rem; font-weight: 850; }

.dock { position: fixed; z-index: 10; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 24px), 596px); min-height: 72px; padding: 7px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: rgba(17, 14, 29, .84); backdrop-filter: blur(28px) saturate(1.4); box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06); transition: opacity .25s, transform .25s; }
.dock button { min-height: 56px; border: 0; border-radius: 18px; padding: 7px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8d8798; background: transparent; font-size: .6rem; font-weight: 850; }
.dock button svg { width: 21px; height: 21px; }
.dock button[aria-current="page"] { color: white; background: rgba(255,255,255,.09); }
.dock button[aria-current="page"] svg { color: var(--mint); }
.in-flow .dock { opacity: 0; pointer-events: none; transform: translate(-50%, 25px); }
.in-flow .app-shell { padding-bottom: calc(31px + env(safe-area-inset-bottom)); }
.in-flow .topbar-action { display: none; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes enter-fwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes enter-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

/* ===== v6.1 ===== stessi colori e stessi token di v6: cambiano struttura, gerarchia e stati. */

/* Direzione: avanti entra da destra, indietro da sinistra, un semplice aggiornamento non si muove. */
main[data-dir="fwd"] > * { animation: enter-fwd .3s cubic-bezier(.2, .8, .2, 1) both; }
main[data-dir="back"] > * { animation: enter-back .3s cubic-bezier(.2, .8, .2, 1) both; }
main[data-dir="none"] > * { animation: none; }

/* Navigazione coerente dentro il momento: sempre in alto, sempre con testo. */
.flow-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.flow-btn { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 0 17px 0 13px; background: rgba(255, 255, 255, .07); color: #d6d1df; font-size: .7rem; font-weight: 900; letter-spacing: .09em; }
.flow-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.flow-home { margin-left: auto; padding: 0 17px; }
.flow-bar + .screen-heading { margin-top: 14px; }
.flow-bar + .selected-move, .flow-bar + .timer-screen, .flow-bar + .insight-card { margin-top: 0; }
.moment-strip { width: 100%; min-height: 54px; margin: 0 0 16px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(112, 231, 195, .32); border-radius: 18px; padding: 0 16px; background: linear-gradient(120deg, rgba(112, 231, 195, .12), rgba(140, 91, 255, .1)); color: var(--ink); text-align: left; font-size: .72rem; font-weight: 950; letter-spacing: .09em; }
.strip-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--yellow); }
.moment-strip.is-live .strip-dot { background: var(--mint); box-shadow: 0 0 14px rgba(92, 225, 189, .62); }
.strip-text { flex: 1; }
.strip-go svg { width: 22px; height: 22px; color: var(--mint); }

/* Home: tutta la carta è il bottone "HO VOGLIA DI GIOCARE". */
.hero-cta { display: flex; flex-direction: column; width: 100%; border: 0; text-align: left; color: var(--ink); font: inherit; }
.hero-cta > * { position: relative; }
.hero-cta .hero-orbit, .hero-cta .hero-road { position: absolute; }
.hero-cta .hero-foot { position: absolute; }
.hero-cta .eyebrow { display: block; }
.hero-fit { display: block; container-type: inline-size; margin: 30px 0 20px; }
.hero-title { display: block; font-size: clamp(2.6rem, 14.6vw, 4.6rem); font-size: min(17cqi, 5.4rem); line-height: .82; letter-spacing: -.085em; font-weight: 1000; text-shadow: 0 6px 30px rgba(54, 16, 85, .18); text-transform: uppercase; }
.hero-cta .hero-copy { display: block; }
.hero-cta .hero-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; margin-top: 29px; margin-bottom: 30px; border-radius: 20px; padding: 17px 19px; z-index: 2; color: #191127; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 35px rgba(40, 12, 75, .25); font-size: .88rem; font-weight: 950; letter-spacing: .035em; }
.hero-cta .hero-button svg { width: 24px; height: 24px; flex: 0 0 auto; color: #6e37d9; }
.hero-clock { display: inline-block; font-size: 2.7rem; line-height: 1; letter-spacing: -.06em; font-weight: 950; font-variant-numeric: tabular-nums; }
.hero-cta.is-live { color: #0a221d; background: linear-gradient(155deg, #8ff0d1, #42d5ad 70%, #25bd9a); box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .24); }
.hero-cta.is-live::after { background: none; }
.hero-cta.is-live .eyebrow, .hero-cta.is-live .hero-copy, .hero-cta.is-live .hero-foot { color: rgba(10, 34, 29, .78); }
.hero-cta.is-live .hero-copy strong { color: #0a221d; }
.hero-cta.is-live .hero-orbit { border-color: rgba(10, 34, 29, .22); }
.hero-cta.is-live .hero-title { text-shadow: none; }
.hero-cta.is-live .hero-button { color: white; background: linear-gradient(115deg, #ff7c47, #ff4f91 54%, #8b5cff); box-shadow: 0 18px 45px rgba(255, 78, 145, .22); }
.hero-cta.is-live .hero-button svg { color: white; }
.hero-cta.is-resume { background: radial-gradient(circle at 92% 8%, rgba(255, 222, 110, .6), transparent 30%), linear-gradient(145deg, #a168ff, #673ad4 58%, #39208f); }
.hero-cta:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }

/* Pulsanti: sempre riconoscibili come pulsanti, con stato premuto. */
.button-quiet { margin: 12px 0 0; justify-content: center; text-align: center; min-height: 54px; background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #d6d1df; box-shadow: none; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 11px 0; }
.button-row .button { margin: 0; min-height: 64px; padding: 14px; justify-content: center; text-align: center; font-size: .74rem; line-height: 1.25; }
.btn-copy { display: flex; flex-direction: column; gap: 6px; }
.btn-copy small { font-size: .58rem; letter-spacing: .13em; opacity: .7; }
.btn-copy strong { font-size: 1.02rem; letter-spacing: .02em; }
.note-toggle { margin: 12px 0; min-height: 56px; }
.note-toggle b { color: var(--mint); font-size: 1.35rem; line-height: .6; }
.note-box { margin: 12px 0; border: 1px solid var(--line); border-radius: 25px; padding: 18px; background: var(--surface); }
.note-box label { display: block; margin: 0 0 11px; color: var(--ink); font-size: .92rem; line-height: 1.35; font-weight: 800; }
.note-actions .button { margin: 12px 0 0; }
.timer-line { margin: 14px 2px 0; }
button:active, .button:active, .home-tile:active, .flow-btn:active, .hero-cta:active { transform: scale(.982); filter: brightness(.94); }
.button:disabled, .flow-btn:disabled { opacity: .3; transform: none; filter: none; }

/* Finale: tre esiti sullo stesso piano, nessun tono morale. */
.finish-wrap .finish-hero { margin-top: 0; min-height: 0; }
.finish-hero h1 { margin: 40px 0 16px; font-size: clamp(3.6rem, 16vw, 5.6rem); }
.finish-choices, .outcome-list { display: grid; gap: 10px; margin-top: auto; padding-top: 26px; }
.finish-choice, .outcome-choice { width: 100%; min-height: 62px; border: 0; border-radius: 20px; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-size: .86rem; font-weight: 950; letter-spacing: .035em; }
.finish-choice svg, .outcome-choice svg { width: 24px; height: 24px; flex: 0 0 auto; }
.finish-choice { color: #25122f; background: rgba(255, 255, 255, .95); box-shadow: 0 16px 38px rgba(51, 12, 72, .25); }
.finish-choice svg { color: #7035d8; }
.outcome-list { padding-top: 0; }
.outcome-choice { color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.outcome-choice svg { color: var(--mint); }
.field-title { margin: 22px 3px 12px; color: #c9c3d1; font-size: .75rem; line-height: 1.35; font-weight: 750; }
.finish-wrap .optional-note { margin-top: 14px; }
.finish-wrap .finish-form { padding: 4px 18px 19px; }
.path-actions .button-quiet { margin-top: 12px; }

/* Touch target comodi (>= 44 px) anche per i controlli secondari già presenti in v6. */
.topbar-action { min-height: 44px; }
.text-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.mini-button { min-height: 44px; display: inline-flex; align-items: center; }
.entry-delete { min-height: 44px; padding: 0 8px 0 0; display: inline-flex; align-items: center; }
.story-dots button { position: relative; }
.story-dots button::after { content: ""; position: absolute; inset: -18px -7px; }
/* "CHIUDO QUESTO MOMENTO": sempre raggiungibile senza scroll lungo, sempre chiaramente secondario.
   Fissa in basso come il dock (stessa "chrome" già usata, nessun colore nuovo), fuori dal flusso
   scrollabile: qualunque sia il contenuto sopra (frase, Bancomat, due numeri di telefono), resta a
   un tocco. Il padding del contenitore scrollabile lascia lo spazio corrispondente, così non copre
   né "CAMBIO MOSSA" né altro. */
body[data-view="timer"] .app-shell { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.timer-close-bar {
  position: fixed; z-index: 9; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 24px), 596px); padding: 7px; display: flex;
  border: 1px solid rgba(255,255,255,.13); border-radius: 25px;
  background: rgba(17, 14, 29, .84); backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06);
}
.timer-close-bar .text-button { flex: 1; margin: 0; min-height: 50px; border-radius: 18px; color: #d6d1df; }

/* Testi lunghi scelti dall'utente non devono mai uscire dalla carta. */
.move-copy strong, .selected-detail, .timer-move strong, .money-note strong, .my-line { overflow-wrap: anywhere; }

@media (hover: hover) {
  button, .button, .home-tile { transition: transform .18s ease, filter .18s ease, background .18s ease; }
  button:hover, .button:hover, .home-tile:hover { filter: brightness(1.055); }
  button:active, .button:active, .home-tile:active { transform: scale(.982); }
}

@media (max-width: 380px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .topbar { margin-inline: 3px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-copy strong { font-size: 1.35rem; }
  .brand-copy small { font-size: .51rem; }
  .topbar-action span { display: none; }
  .topbar-action { padding: 10px; }
  .home-hero { min-height: 490px; padding-inline: 23px; }
  .home-grid { grid-template-columns: 1fr 1fr; }
  .home-tile { min-height: 165px; padding: 16px; }
  .move-card { padding: 20px 18px; grid-template-columns: 39px 1fr 23px; gap: 11px; }
  .move-icon { width: 39px; height: 39px; }
  .story-card { flex-basis: calc(100% - 18px); min-height: 500px; }
  .install-card { grid-template-columns: 42px 1fr; }
  .install-card .mini-button { grid-column: 1 / -1; width: 100%; }
}

@media (min-width: 700px) {
  .app-shell { padding-left: 22px; padding-right: 22px; }
  .home-hero { min-height: 535px; }
  .story-card { flex-basis: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}