/* ---------- Shared system ----------
   Type:   10 · 13 · 16.5 · 21 · 27   (×1.272 = √φ; every 2nd step is a golden step)
   Space:  3 · 5 · 8 · 13 · 21 · 34 · 55 · 89   (Fibonacci)
   Radius: 55 screen → 34 sheet → 21 card → 13 inner → 8 chip (concentric)
*/
* { box-sizing: border-box; margin: 0; padding: 0 }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit }
button svg { display: block }
input { font: inherit; color: inherit; background: none; border: 0; outline: 0; min-width: 0 }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
body { background: #F4F4F3; color: #141414; font: 400 13px/21px Inter, system-ui, sans-serif }

/* ---------- Page ---------- */
.intro { max-width: 1000px; margin: 0 auto; padding: 55px 34px 34px }
.eyebrow { font-size: 10px; line-height: 13px; letter-spacing: .1em; text-transform: uppercase; color: #6B6B6B }
.intro h1 { font-size: 27px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; margin-top: 13px }
.lede { color: #555; margin-top: 13px; max-width: 72ch }
.bar { position: sticky; top: 0; z-index: 100; background: rgba(244, 244, 243, .86); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); border-bottom: 1px solid #E2E2E0 }
.bar-in { max-width: 1000px; margin: 0 auto; padding: 13px 34px; display: flex; align-items: center; gap: 21px; flex-wrap: wrap }
.pages { display: flex; gap: 3px; padding: 3px; border-radius: 21px; background: #E6E6E4; flex-wrap: wrap }
.pages button { height: 34px; padding: 0 13px; border-radius: 18px; font-weight: 500; color: #6B6B6B; transition: background .25s, color .25s }
.pages button.on { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0, 0, 0, .1) }
.hint { color: #6B6B6B; flex: 1; min-width: 233px }
.duo { padding: 55px 34px 89px; display: flex; justify-content: center; gap: 89px; flex-wrap: wrap }
.dir { display: flex; flex-direction: column; align-items: center; gap: 21px }
.meta { width: 402px; display: grid; grid-template-columns: 34px 1fr; gap: 0 8px }
.mn { font-size: 13px; line-height: 27px; color: #9A9A98 }
.meta h2 { font-size: 21px; line-height: 27px; font-weight: 600; letter-spacing: -.015em }
.meta p { color: #555; margin-top: 5px }
footer { max-width: 1000px; margin: 0 auto; padding: 34px; border-top: 1px solid #E2E2E0; color: #6B6B6B }

/* ---------- Phone ---------- */
.phone { width: 402px; height: 856px; border-radius: 61px; padding: 6px; background: #0E0E0E; box-shadow: inset 0 0 0 1px #2A2A2A, 0 34px 89px -34px rgba(0, 0, 0, .35); flex: none }
.screen { position: relative; width: 390px; height: 844px; border-radius: 55px; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; font-size: 13px; line-height: 21px }
.island { position: absolute; top: 11px; left: 50%; translate: -50% 0; width: 123px; height: 36px; border-radius: 20px; background: #000; z-index: 50 }
.sb { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px 0 47px; z-index: 40; font: 600 15px/1 -apple-system, 'SF Pro Text', Inter, sans-serif; pointer-events: none; color: #111; transition: color .25s }
.sb .ics { display: flex; gap: 5px; align-items: center }
.sb-light .sb { color: #fff }
.home-ind { position: absolute; bottom: 8px; left: 50%; translate: -50% 0; width: 134px; height: 5px; border-radius: 3px; background: #111; z-index: 60; pointer-events: none; transition: background .25s }
.sb-light .home-ind { background: #fff }
.layers, .layer { position: absolute; inset: 0 }
.layer { --sp: 0; overflow: hidden; z-index: 0 }
.layer > .scroll { position: absolute; inset: 0; z-index: 1 }
.scroll { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain }
.scroll::-webkit-scrollbar { display: none }
.end { height: 144px }
.end.s { height: 55px }
.tabs { position: absolute; z-index: 20 }
.tabs .ind { position: absolute; left: 0; pointer-events: none }
.tabs button { position: relative; z-index: 1; transition: color .3s }
[data-card], [data-a="opt"] { cursor: pointer; transition: transform .35s cubic-bezier(.2, .9, .25, 1) }
[data-card]:active, [data-a="opt"]:active { transform: scale(.985) }
.drag, .drag:active { transition: none !important }

/* swipe rows */
.swipe { position: relative }
.sw { position: relative; overflow: hidden }
.swipe-act { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 21px; background: var(--risk); color: #fff; font-weight: 500; opacity: 0; transition: opacity .2s }
.swipe-act span { transition: transform .3s cubic-bezier(.3, 1.5, .5, 1) }
.swipe-act.armed span { transform: scale(1.12) }
.swipe[data-fixed] .swipe-act { background: #D8D8D5; color: #111 }
.swipe-fg { position: relative; touch-action: pan-y; transition: transform .35s cubic-bezier(.2, .9, .25, 1) }

/* toast */
.toast { position: absolute; left: 21px; right: 21px; bottom: 97px; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 13px; min-height: 55px; padding: 8px 8px 8px 21px; border-radius: 21px; background: rgba(18, 18, 18, .9); backdrop-filter: blur(21px); -webkit-backdrop-filter: blur(21px); color: #fff; line-height: 16.5px; opacity: 0; pointer-events: none }
.toast button { height: 34px; padding: 0 13px; border-radius: 21px; font-weight: 600; background: rgba(255, 255, 255, .14); flex: none }

/* map */
.map { display: block; width: 100%; height: 100% }
.you-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite }
@keyframes pulse { 0% { transform: scale(.6); opacity: .25 } 100% { transform: scale(1.8); opacity: 0 } }

/* sheets (both versions) */
.sh-scrim { position: absolute; inset: 0; background: rgba(20, 16, 14, .22) }
.sh { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 55px); overflow-y: auto; scrollbar-width: none; border-radius: 34px 34px 0 0; padding: 8px 21px 34px }
.sh::-webkit-scrollbar { display: none }
.grab { display: block; width: 34px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .14); margin: 0 auto 13px }

@media (prefers-reduced-motion: reduce) { .you-pulse { animation: none } }

/* ---------- Solo prototype page: phone + demo panel ---------- */
.solo { background: #EEEBE8 }
.stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 55px; padding: 34px; flex-wrap: wrap }
.panel { width: 377px; color: #1B1B1B }
.panel h1 { font-size: 21px; line-height: 27px; font-weight: 600; letter-spacing: -.015em; margin-top: 8px }
.panel .lede { color: #6F6662 }
.panel h3 { font-size: 10px; line-height: 13px; letter-spacing: .1em; text-transform: uppercase; color: #8A817C; font-weight: 500; margin: 34px 0 8px }
.panel h3:first-child { margin-top: 0 }
.moments { display: grid; gap: 3px }
.moments button { display: grid; grid-template-columns: 47px 1fr; gap: 8px; padding: 8px 13px; border-radius: 13px; color: #6F6662; line-height: 16.5px; transition: background .2s }
.moments button:hover { background: rgba(255, 255, 255, .5) }
.moments button.on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08) }
.moments .t { font-weight: 600; color: #1B1B1B; font-variant-numeric: tabular-nums }
.moments b, .toggles b { display: block; font-weight: 500; color: #1B1B1B }
.toggles { display: grid; gap: 3px }
.toggles button { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 8px 13px; border-radius: 13px; color: #6F6662; line-height: 16.5px }
.toggles i { width: 34px; height: 21px; border-radius: 21px; background: #D9D4D0; position: relative; flex: none; transition: background .25s }
.toggles i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1) }
.toggles .on i { background: #1B1B1B }
.toggles .on i::after { transform: translateX(13px) }
.clock { display: flex; align-items: center; gap: 8px }
.clock button, .jumps button { height: 34px; padding: 0 13px; border-radius: 21px; background: #fff; font-weight: 500 }
.clock b { font-size: 16.5px; font-variant-numeric: tabular-nums; min-width: 55px; text-align: center }
.note { color: #8A817C; margin-top: 8px; font-size: 12px; line-height: 16.5px }
.jumps { display: flex; gap: 5px; flex-wrap: wrap }
.panel .more { display: inline-block; color: inherit; margin-top: 13px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(27, 27, 27, .25); text-underline-offset: 3px }
.panel .more:hover { text-decoration-color: #1B1B1B }
.credits { margin-top: 34px; color: #A39994; font-size: 10px; line-height: 13px }
@media (max-width: 480px) { .stage { padding: 0; gap: 21px } .solo .phone { width: 100vw; height: 100dvh; border-radius: 0; padding: 0; background: none; box-shadow: none } .solo .screen { width: 100%; height: 100%; border-radius: 0 } .panel { padding: 0 16px 34px } }