:root{--ink: #17152E;--night: #262250;--peach: #FFC9A8;--cream: #FFF4E6;--green: #6AAA64;--lilac: #B9B3F5;--mono: "Sometype Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;}*,*::before,*::after{box-sizing: border-box;}html{-webkit-text-size-adjust: 100%;}body{margin: 0;background: var(--ink);color: var(--cream);font-family: var(--mono);font-weight: 400;-webkit-font-smoothing: antialiased;overflow-x: clip;}.app{min-height: 100vh;min-height: 100dvh;display: grid;grid-template-columns: minmax(0,1fr);grid-template-rows: auto auto minmax(0,1fr) auto;grid-template-areas: "bar" "copy" "stage" "action";overflow-x: clip;}.bar{grid-area: bar;display: flex;align-items: center;gap: 12px;padding: calc(12px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 8px calc(20px + env(safe-area-inset-left));}.logo{display: block;width: 52px;height: 52px;border-radius: 16px;}.wordmark{font-weight: 500;font-size: clamp(1rem,0.95rem + 0.3vw,1.15rem);letter-spacing: 0.01em;}.copy{grid-area: copy;padding: 8px calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));}h1{margin: 0;font-weight: 700;font-size: clamp(1.55rem,1.2rem + 1.7vw,2.5rem);line-height: 1.12;letter-spacing: -0.02em;text-wrap: balance;}.lede{margin: 10px 0 0;color: var(--lilac);font-size: clamp(0.82rem,0.78rem + 0.2vw,0.98rem);line-height: 1.5;max-width: 46ch;}.stage{grid-area: stage;display: flex;align-items: center;justify-content: center;padding: 16px calc(20px + env(safe-area-inset-right)) 16px calc(20px + env(safe-area-inset-left));min-height: 0;}.card{position: relative;width: 100%;max-width: 380px;background: var(--peach);color: var(--ink);border-radius: 36px;padding: clamp(20px,3.4dvh,32px) 20px;display: grid;gap: clamp(14px,2.8dvh,28px);touch-action: none;user-select: none;-webkit-user-select: none;-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;overscroll-behavior: contain;cursor: grab;will-change: transform;transform: perspective(900px) rotateX(0deg) rotateY(0deg);outline: none;}.card.is-held{cursor: grabbing;}.card:focus-visible{box-shadow: 0 0 0 3px var(--ink),0 0 0 6px var(--cream);}.card.is-fading{opacity: 0.55;}.card.fade{transition: opacity 160ms ease-out;}.card-head{display: flex;justify-content: space-between;align-items: baseline;font-size: clamp(0.72rem,0.7rem + 0.1vw,0.8rem);font-weight: 500;letter-spacing: 0.08em;text-transform: uppercase;}.card-mid{display: flex;align-items: flex-end;justify-content: space-between;gap: 16px;}.past{display: grid;grid-template-columns: repeat(5,clamp(12px,2dvh,18px));gap: 4px;flex: none;}.past i{display: block;aspect-ratio: 1;border-radius: 4px;background: rgba(23,21,46,0.18);}.past i.n{background: rgba(23,21,46,0.6);}.past i.g{background: var(--green);}.when{text-align: right;min-width: 0;}.when-day{display: block;font-weight: 700;font-size: clamp(1.35rem,1.2rem + 0.8vw,1.7rem);line-height: 1.05;letter-spacing: -0.02em;}.when-no{display: block;margin-top: 4px;font-size: clamp(0.78rem,0.76rem + 0.1vw,0.86rem);font-variant-numeric: tabular-nums;}.row{display: grid;grid-template-columns: repeat(5,minmax(0,1fr));gap: 8px;}.tile{position: relative;aspect-ratio: 1;border-radius: 16px;background: var(--green);overflow: hidden;}.cover{position: absolute;inset: 0;border-radius: 16px;background: var(--cream);display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: clamp(1.1rem,1rem + 0.5vw,1.35rem);color: var(--night);transform: translate3d(0,-22%,0);will-change: transform;}.card-foot{margin: 0;font-size: clamp(0.78rem,0.76rem + 0.1vw,0.86rem);line-height: 1.45;}.action{grid-area: action;background: var(--night);border-radius: 28px 28px 0 0;padding: 16px calc(20px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));}.cta{display: flex;align-items: center;justify-content: center;gap: 10px;min-height: 56px;padding: 0 24px;border-radius: 28px;background: var(--green);color: var(--ink);font-family: var(--mono);font-weight: 700;font-size: clamp(0.98rem,0.94rem + 0.2vw,1.08rem);text-decoration: none;-webkit-tap-highlight-color: transparent;transition: transform 120ms cubic-bezier(0.2,0,0,1),background-color 120ms cubic-bezier(0.2,0,0,1);}.cta svg{flex: none;}.cta:active{transform: scale(0.97);}.cta:focus-visible{outline: 3px solid var(--cream);outline-offset: 3px;}@media (hover: hover){.cta:hover{background: #7BB876;}}footer{margin-top: 10px;text-align: center;font-size: clamp(0.72rem,0.7rem + 0.1vw,0.78rem);color: var(--lilac);}@media (max-height: 700px){.past{display: none;}.card-mid{justify-content: flex-end;}.lede{margin-top: 8px;}}@media (min-width: 900px){body{display: grid;place-items: center;min-height: 100dvh;padding: 24px;}.app{min-height: 0;width: min(960px,100%);background: var(--night);border-radius: 48px;padding: 40px;grid-template-columns: minmax(0,1fr) minmax(0,400px);grid-template-rows: auto auto auto;grid-template-areas: "bar stage" "copy stage" "action stage";column-gap: 48px;row-gap: 20px;align-items: start;overflow: visible;}.bar{padding: 0;flex-direction: column;align-items: flex-start;gap: 14px;}.logo{width: 160px;height: 160px;border-radius: 40px;}.copy{padding: 0;}.stage{padding: 0;align-self: center;}.action{background: none;border-radius: 0;padding: 8px 0 0;}.cta{display: inline-flex;padding: 0 32px;}footer{text-align: left;margin-top: 18px;}}@media (prefers-reduced-motion: reduce){.cta{transition: none;}}