@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root { font-family: 'DM Sans', sans-serif; color: #15120e; background: #f6eee2; font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { min-width: 320px; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #ff4b2e; outline-offset: 3px; }
.picker-page { display: grid; min-height: 100svh; padding: clamp(22px, 4vh, 56px) clamp(20px, 4vw, 56px); overflow: hidden; background: #f6eee2 radial-gradient(circle at 8% 4%, rgba(255,76,43,.14), transparent 20rem), radial-gradient(circle at 91% 91%, rgba(255,204,87,.22), transparent 21rem); }
.picker-shell { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; width: min(1280px,100%); min-height: 0; margin: 0 auto; }
.picker-content { align-self: center; }
.picker-shell h1 { max-width: 1080px; min-height: 2.85em; margin: 0 auto; color: #ff4b2e; font-family: Fraunces, Georgia, serif; font-size: clamp(2.8rem,6.3vw,6.5rem); font-weight: 600; line-height: .95; letter-spacing: -.065em; text-align: center; }
.typewriter-word { display: inline; color: #171411; overflow-wrap: anywhere; }
.typewriter-word b { display: inline-block; margin-left: .03em; color: #ff4b2e; font-family: 'DM Mono', monospace; font-weight: 400; animation: cursor-blink .7s step-end infinite; }
.picker-intro { max-width: 520px; margin: 14px auto clamp(22px,3vh,38px); color: #51483f; font-size: clamp(.98rem,1.4vw,1.12rem); line-height: 1.45; text-align: center; }
.frequency-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,28px); max-width:1000px; margin:0 auto; }
.frequency-tile { position:relative; display:flex; min-height:clamp(130px,18vh,190px); padding:clamp(20px,2vw,30px); flex-direction:column; align-items:flex-start; justify-content:space-between; border:1.5px solid #d6caba; border-radius:22px; background:#fffbf4c2; color:#1d1915; cursor:pointer; text-align:left; transform:rotate(var(--tile-skew,0deg)); transition:transform .26s cubic-bezier(.16,1,.3,1),border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.frequency-tile:hover { border-color:#ff4b2e; box-shadow:0 16px #ff4b2e1f; transform:translateY(-5px) rotate(var(--tile-skew,0deg)); }
.frequency-tile span { color:#786d61; font:500 11px/1.1 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.frequency-tile strong { font-family:Fraunces,Georgia,serif; font-size:clamp(2rem,4.2vw,4.2rem); line-height:.9; letter-spacing:-.07em; }
.frequency-tile i { position:absolute; right:24px; bottom:23px; color:#ff4b2e; font-size:1.45rem; font-style:normal; }
.selection-flow { display:grid; grid-template-columns:142px minmax(0,1fr) 106px; gap:16px; align-items:stretch; animation:selection-flow-in .52s cubic-bezier(.16,1,.3,1) both; }
.selected-frequency { display:flex; min-width:0; flex-direction:column; gap:8px; }
.frequency-tile.is-active { min-height:0; flex:1; padding:18px 14px; border-color:#ff4b2e; background:#ff4b2e; color:#fff8ee; transform:none; }
.frequency-tile.is-active span { color:#fff8eeb8; font-size:9px; }.frequency-tile.is-active strong { font-size:1.66rem; }.frequency-tile.is-active i { display:none; }
.change-frequency { border:0; background:transparent; color:#51483f; cursor:pointer; font:500 11px/1 'DM Mono',monospace; letter-spacing:.08em; text-decoration:underline; text-underline-offset:4px; text-transform:uppercase; }
.habit-choice-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) minmax(180px,1.32fr); gap:9px; min-width:0; animation:habits-reveal .54s .1s cubic-bezier(.16,1,.3,1) both; }
.compact-habit { display:flex; min-width:0; padding:13px 12px; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:8px; border:1px solid #d6caba; border-radius:15px; background:#fffbf4b8; color:#1d1915; cursor:pointer; text-align:left; transition:transform .18s ease,background .18s ease,border-color .18s ease; }.compact-habit:hover { border-color:#ff4b2e; transform:translateY(-3px); }.compact-habit.is-selected { border-color:#ff4b2e; background:#ff4b2e; color:#fff8ee; box-shadow:0 7px #ca361f; transform:translateY(-3px); }.compact-habit>span { font-size:1.25rem; line-height:1; }.compact-habit b { overflow:hidden; display:-webkit-box; font-size:clamp(.74rem,1.1vw,.92rem); line-height:1.04; letter-spacing:-.03em; -webkit-box-orient:vertical; -webkit-line-clamp:3; }.compact-habit small { color:inherit; font:500 .62rem/1.2 'DM Mono',monospace; opacity:.68; }
.custom-habit { display:grid; padding:12px; grid-template-columns:minmax(0,1fr) 70px; gap:7px; border:1px dashed #9f9081; border-radius:15px; background:#ffffff52; }.custom-habit label { min-width:0; }.custom-habit label:first-child { grid-column:1/-1; }.custom-habit label span { display:block; margin-bottom:4px; color:#786d61; font:500 9px/1 'DM Mono',monospace; letter-spacing:.07em; text-transform:uppercase; }.custom-habit input { width:100%; min-width:0; padding:6px 0; border:0; border-bottom:1px solid #b6a99b; background:transparent; color:#171411; font-size:.77rem; outline:0; }.custom-habit input:focus { border-color:#ff4b2e; }.custom-habit button { align-self:end; padding:7px 4px; border:0; border-radius:7px; background:#171411; color:#fff9f0; cursor:pointer; font-size:.68rem; font-weight:700; }
.start-button { display:flex; min-height:116px; padding:14px; align-items:center; justify-content:center; gap:5px; border:0; border-radius:18px; background:#83e8a8; box-shadow:0 9px #45a768; color:#0d2a18; cursor:pointer; font:700 .83rem/1 'DM Mono',monospace; letter-spacing:-.04em; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; animation:start-button-in .62s .26s cubic-bezier(.16,1.4,.3,1) both; }.start-button:hover { background:#a2f2be; box-shadow:0 12px #45a768; transform:translateY(-4px); }.start-button:active { box-shadow:0 3px #45a768; transform:translateY(5px); }.start-button span { font-size:1.2rem; }
.attribution { color:#786d61; font:500 clamp(.57rem,1vw,.7rem)/1.35 'DM Mono',monospace; text-align:center; }.attribution a { color:inherit; text-decoration-color:#ff4b2e; text-underline-offset:3px; }.attribution a:hover { color:#ff4b2e; }.picker-footer { align-self:end; }
.simulation-page { display:flex; height:100svh; min-height:0; padding:clamp(20px,4vh,48px) clamp(16px,5vw,78px) clamp(14px,2vh,24px); flex-direction:column; overflow:hidden; background:#050505; color:#fff; }.simulation-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:28px; width:min(1360px,100%); margin:0 auto; }.simulation-heading { min-width:0; }.simulation-header h1 { max-width:900px; margin:0; color:#fff; font-family:Fraunces,Georgia,serif; font-size:clamp(2rem,4.5vw,4.6rem); font-weight:600; line-height:.95; letter-spacing:-.065em; }.chart-subtitle { margin:11px 0 0; color:#c4c4c4; font-size:.92rem; }.simulation-date { padding-top:10px; white-space:nowrap; color:#41d9ff; font:600 clamp(1.25rem,2.5vw,2.25rem)/1 Fraunces,Georgia,serif; }.chart-stage { position:relative; width:min(1360px,100%); min-height:0; margin:clamp(6px,1.5vh,18px) auto 0; flex:1 1 auto; }.line-chart { display:block; width:100%; height:100%; min-height:220px; overflow:visible; }.chart-line { fill:none; stroke-linejoin:round; stroke-linecap:round; stroke-width:3; }.chart-point { stroke:#050505; stroke-width:2; }.chart-grid line { stroke:#303030; stroke-width:1; }.chart-grid text,.year-label { fill:#a6a6a6; font:12px 'DM Mono',monospace; }.year-label { text-anchor:middle; }.chart-axis { stroke:#a6a6a6; stroke-width:1; }.chart-legend { display:flex; flex-wrap:wrap; gap:8px 18px; padding:0 0 3px 76px; color:#fff; font:500 11px/1.2 Georgia,serif; }.chart-legend span { display:flex; align-items:center; gap:6px; }.chart-legend i { width:20px; height:3px; }.live-totals { display:flex; flex-wrap:wrap; gap:8px 24px; width:min(1360px,100%); margin:3px auto 0; color:#d6d6d6; font:400 11px/1.2 'DM Mono',monospace; }.live-totals p { display:flex; align-items:center; gap:8px; margin:0; }.live-totals strong { color:#fff; font-weight:500; }.live-totals span,.chart-legend i { display:inline-block; border-radius:99px; }.live-totals span { width:8px; height:8px; }.cyan-dot { background:#41d9ff; }.yellow-dot { background:#f4ca57; }.mint-dot { background:#84e8bc; }.simulation-footer { width:min(1360px,100%); margin:7px auto 0; }.data-note,.disclaimer { margin:0 0 3px; color:#a6a6a6; font-size:.68rem; line-height:1.3; }.data-note a { color:#d9d9d9; text-decoration-color:#41d9ff; text-underline-offset:3px; }.data-note a:hover { color:#41d9ff; }.simulation-footer .attribution { margin-top:5px; color:#a6a6a6; text-align:left; }.simulation-footer .attribution a { text-decoration-color:#41d9ff; }.simulation-footer .attribution a:hover { color:#41d9ff; }
.result-overlay { position:fixed; z-index:10; inset:0; display:grid; padding:24px; place-items:center; background:#000000ad; backdrop-filter:blur(8px); animation:overlay-in .32s ease both; }.conclusion { width:min(920px,100%); padding:clamp(26px,5vw,52px); border-top:1px solid #555; background:#050505; box-shadow:0 25px 90px #000000b3; animation:conclusion-in .52s 80ms cubic-bezier(.16,1,.3,1) both; }.conclusion p { margin:0; color:#d8d8d8; font-size:clamp(.98rem,1.5vw,1.2rem); line-height:1.45; }.conclusion .result-line { margin-bottom:10px; color:#fff; font-family:Fraunces,Georgia,serif; font-size:clamp(1.7rem,3.4vw,3.15rem); font-weight:700; line-height:1.02; letter-spacing:-.055em; }.conclusion strong { color:#41d9ff; }.text-actions { display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; }.text-actions button { padding:0; border:0; background:transparent; color:#fff; cursor:pointer; font-weight:700; text-decoration:underline; text-decoration-color:#41d9ff; text-underline-offset:5px; }.text-actions button:hover { color:#41d9ff; }
@keyframes cursor-blink { 50% { opacity:0; } } @keyframes selection-flow-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes habits-reveal { from { opacity:0; transform:translate(18px); } to { opacity:1; transform:translate(0); } } @keyframes start-button-in { from { opacity:0; transform:scale(.65); } to { opacity:1; transform:scale(1); } } @keyframes overlay-in { from { opacity:0; } to { opacity:1; } } @keyframes conclusion-in { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:980px) { .habit-choice-row { grid-template-columns:repeat(3,minmax(0,1fr)); }.custom-habit { grid-column:span 2; } }
@media (max-width:760px) { .picker-page { display:block; padding:30px 18px 20px; overflow:auto; }.picker-shell { display:block; }.picker-content { min-height:0; }.picker-shell h1 { min-height:0; height:auto; font-size:clamp(2.35rem,11vw,3.5rem); line-height:1.01; }.typewriter-word { display:block; min-height:1.05em; margin:.05em 0; }.picker-intro { margin:18px auto 30px; }.picker-footer { margin-top:26px; }.frequency-grid { grid-template-columns:1fr; gap:13px; }.frequency-tile { min-height:110px; }.frequency-tile strong { font-size:2.3rem; }.selection-flow { grid-template-columns:1fr; gap:12px; }.selected-frequency { display:grid; grid-template-columns:1fr auto; align-items:center; }.frequency-tile.is-active { min-height:100px; }.habit-choice-row { grid-template-columns:repeat(2,minmax(0,1fr)); }.compact-habit { min-height:114px; }.custom-habit { grid-column:1/-1; min-height:116px; }.start-button { min-height:72px; }.simulation-page { height:100svh; padding:18px 14px 12px; }.simulation-header { grid-template-columns:1fr; gap:8px; }.simulation-header h1 { max-width:100%; font-size:clamp(1.85rem,9vw,2.8rem); line-height:1; }.simulation-date { min-height:1.2em; padding:0; font-size:1.15rem; }.chart-subtitle { margin-top:7px; font-size:.82rem; }.chart-stage { margin-top:3px; }.line-chart { min-height:180px; }.chart-legend { gap:6px 10px; padding-left:50px; font-size:9px; }.chart-grid text,.year-label { font-size:10px; }.live-totals { gap:6px 10px; font-size:9px; }.data-note,.disclaimer { font-size:.56rem; }.simulation-footer .attribution { margin-top:4px; font-size:.53rem; }.conclusion { padding:28px 22px; }.conclusion .result-line { font-size:clamp(1.65rem,8vw,2.4rem); } }
@media (max-height:720px) and (min-width:761px) { .picker-page { padding-block:22px; }.picker-shell h1 { font-size:clamp(2.7rem,5.3vw,4.6rem); }.frequency-tile { min-height:124px; }.compact-habit,.start-button { min-height:100px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

.endpoint-label line { stroke-width: 1.5; }
.endpoint-label text { fill: #fff; font: 600 14px 'DM Mono', monospace; dominant-baseline: middle; }

@media (max-width: 760px) {
  .endpoint-label { display: none; }
}

.text-actions button:disabled { cursor: wait; opacity: .62; }