/* StreakGuard / After-hours glass. User-requested glass and clay redesign. */
@import url('./tokens.css');
@import url('./base.css');
@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist_regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist_medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains_mono_regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --color-paper: #111114; --color-paper-2: #1d1c20; --color-paper-3: #0c0c0f;
  --color-ink: #faf5ee; --color-ink-2: #ddd5cf; --color-muted: #b6aeab;
  --color-accent: #ff9268; --color-brand: #ff5722; --color-focus: #ffad88;
  --color-accent-soft: #3b2723; --color-accent-ink: #24130d;
  --color-rule: #363135; --color-rule-2: #5c4d48;
  --color-ok: #a8e4c5; --color-ok-soft: #20362d; --color-cool: #e6c6b8;
  --color-glass: rgb(44 37 37 / 62%); --color-glass-light: rgb(255 233 216 / 7%);
  --color-glass-edge: rgb(255 229 209 / 17%); --color-highlight: rgb(255 243 222 / 24%);
  --color-shadow: rgb(0 0 0 / 40%); --color-soft-shadow: rgb(0 0 0 / 24%);
  --color-orange-light: #ffbb91; --color-orange-deep: #ac3a1c; --color-orange-middle: #ed7442;
  --color-orange-haze: rgb(206 84 36 / 19%); --color-peach-haze: rgb(255 194 151 / 9%);
  --color-transparent: transparent;
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display); --font-outlier: 'JetBrains Mono', ui-monospace, monospace;
  --display-weight: 500; --tracking-display: -0.04em; --container: 1408px; --gutter: 64px;
  --radius-card: 16px; --radius-pill: 999px; --radius-stage: 32px;
  --shadow-glass: 0 24px 64px var(--color-shadow), inset 0 1px 0 var(--color-highlight);
  --shadow-soft: 0 16px 40px var(--color-soft-shadow);
  --shadow-clay: 0 28px 48px var(--color-shadow), inset 6px 7px 15px var(--color-highlight), inset -6px -9px 20px var(--color-orange-deep);
}
html { scroll-behavior: smooth; scroll-padding-top: var(--space-lg); scrollbar-color: var(--color-rule-2) var(--color-paper); }
body { background: var(--color-paper); }
::selection { color: var(--color-paper); background: var(--color-accent); }
a, button { -webkit-tap-highlight-color: var(--color-accent-soft); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
a:active { opacity: .85; }
.skip { position: absolute; z-index: var(--z-toast); transform: translateY(-150%); padding: var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { transform: none; }
.site-header { position: relative; z-index: var(--z-raised); }
.navigation { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: 112px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 22px; font-weight: 500; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
.wordmark img { flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: var(--space-xl); }
.nav-links a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav-links a:hover, .text-link:hover, .footer-links a:hover { color: var(--color-accent); }
.play-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; width: 224px; min-height: 86.69px; border-radius: 8px; }
.play-badge img { display: block; width: 100%; height: auto; object-fit: contain; }
.play-badge:hover, .play-badge:active { opacity: 1; }
.nav-badge { width: 166px; min-height: 64.24px; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-xl); min-height: min(810px, calc(100svh - 112px)); padding-block: var(--space-xl) var(--space-2xl); isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; width: 800px; height: 800px; right: -140px; top: -160px; pointer-events: none; background: radial-gradient(ellipse, var(--color-orange-haze), var(--color-transparent) 65%); }
.intro-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(3.75rem, 6.7vw, 6rem); letter-spacing: -.04em; line-height: 1.02; max-width: 12ch; text-align: left; text-wrap: initial; }
.hero h1 span { color: var(--color-accent); }
.hero .lead { max-width: 36ch; color: var(--color-muted); margin-top: var(--space-lg); font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); margin-left: calc(-1 * var(--space-sm)); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); text-underline-offset: 6px; text-decoration-color: var(--color-rule-2); }
.hero-preview { position: relative; min-width: 0; width: 100%; height: 570px; margin: 0; perspective: 1100px; }
.hero-preview::before, .hero-preview::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border: 1px solid var(--color-glass-edge); border-radius: 50%; width: 480px; height: 480px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-30deg); }
.hero-preview::after { width: 390px; height: 390px; border-style: dashed; opacity: .32; }
.sculpture { position: absolute; width: 174px; height: 174px; top: 12px; left: calc(50% - 87px); border-radius: 46px; background: linear-gradient(140deg, var(--color-orange-light), var(--color-orange-middle) 55%, var(--color-orange-deep)); box-shadow: var(--shadow-clay); display: grid; place-items: center; transform: rotate(-12deg); z-index: 2; }
.sculpture img { width: 83px; height: auto; filter: brightness(0) invert(1); opacity: .92; transform: rotate(12deg); }
.preview-panel { position: absolute; left: 0; right: var(--space-lg); top: 156px; background: var(--color-glass); border-radius: 24px; box-shadow: var(--shadow-glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transform: rotate(3deg); padding: var(--space-lg) var(--space-xl) var(--space-xl); z-index: 3; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-md); font-weight: 500; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-glass-edge); }
.pending-label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.preview-core { padding-top: var(--space-lg); }
.preview-platform, .reset-label { color: var(--color-muted); font-size: var(--text-sm); }
.reset-value { font-family: var(--font-outlier); font-size: clamp(2.5rem, 3.7vw, 3.75rem); line-height: 1.3; letter-spacing: -.04em; margin-top: var(--space-sm); font-variant-numeric: tabular-nums; }
.reset-value span { color: var(--color-muted); }
.day-track { height: 5px; border-radius: var(--radius-pill); margin-block: var(--space-lg); background: var(--color-rule); }
.day-track i { display: block; height: 100%; width: 95.8%; background: var(--color-accent); border-radius: inherit; }
.preview-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.status-name { color: var(--color-accent); }
.notification { position: absolute; bottom: -24px; left: var(--space-xl); right: 0; z-index: 4; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); border-radius: 20px; background: linear-gradient(120deg, var(--color-glass-light), var(--color-transparent)), var(--color-glass); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: var(--shadow-glass); transform: rotate(-3deg); }
.notification > img { width: 27px; flex-shrink: 0; }
.notification strong { font-size: var(--text-md); font-weight: 500; }
.notification p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.notification-time { margin-left: auto; align-self: flex-start; color: var(--color-muted); font-size: var(--text-xs); }
.hero-preview figcaption { position: absolute; bottom: -72px; left: var(--space-xl); font-size: 12px; color: var(--color-muted); }
@media (prefers-reduced-motion: no-preference) { .sculpture { animation: settle .9s var(--ease-out) both; } @keyframes settle { from { opacity: .6; transform: translateY(18px) rotate(-17deg); } to { opacity: 1; transform: translateY(0) rotate(-12deg); } } }
.problem { padding-block: var(--space-2xl) var(--section-gap-s); }
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-2xl); position: relative; padding-block: var(--space-2xl); }
.problem-grid::before { content: ''; position: absolute; inset: 0 var(--gutter); z-index: -1; border-radius: var(--radius-stage); background: linear-gradient(120deg, var(--color-paper-2), var(--color-paper-3)); box-shadow: inset 0 1px 0 var(--color-glass-edge), 0 20px 40px var(--color-soft-shadow); }
.problem-grid > * { padding-inline: var(--space-xl); }
.problem .lead { color: var(--color-muted); margin-top: var(--space-lg); font-size: var(--text-md); }
.reset-fact { border-left: 1px solid var(--color-rule); }
.reset-fact p { color: var(--color-muted); }
.big-time { font-family: var(--font-outlier); font-size: clamp(3rem, 5.8vw, 5.25rem); letter-spacing: -.04em; line-height: 1.35; color: var(--color-ink); margin-block: var(--space-sm); white-space: nowrap; }
.big-time span { font-size: var(--text-md); color: var(--color-cool); letter-spacing: 0; }
.reset-fact .local-time { color: var(--color-cool); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.how-section { padding-block: var(--space-xl) var(--section-gap); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.section-heading h2 { font-size: clamp(2.25rem, 3.8vw, 3.5rem); max-width: 21ch; line-height: 1.12; }
.section-heading .lead { max-width: 29ch; color: var(--color-muted); font-size: var(--text-md); }
.reminder-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: stretch; }
.reminder-schedule { padding-block: var(--space-xl); }
.reminder-schedule > p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-sm); }
.schedule-list { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: flex; flex-direction: column; gap: var(--space-md); }
.schedule-list li { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: linear-gradient(120deg, var(--color-paper-2), var(--color-paper)); box-shadow: inset 0 1px 0 var(--color-glass-light), 0 6px 15px var(--color-soft-shadow); color: var(--color-muted); font-size: var(--text-sm); }
.schedule-list li:nth-child(2) { margin-left: var(--space-lg); }
.schedule-list li:nth-child(3) { margin-left: var(--space-xl); }
.time-reading { font-family: var(--font-outlier); min-width: 100px; font-size: var(--text-lg); color: var(--color-ink); }
.reminder-example { display: flex; flex-direction: column; padding: var(--space-xl); border-radius: 24px; background: radial-gradient(ellipse at top right, var(--color-orange-haze), var(--color-transparent) 75%), var(--color-paper-2); box-shadow: var(--shadow-glass); }
.example-controls { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-3); align-self: flex-start; box-shadow: inset 0 2px 6px var(--color-shadow); }
.state-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: var(--radius-pill); background: var(--color-transparent); color: var(--color-muted); font-size: var(--text-sm); padding: var(--space-xs) var(--space-md); cursor: pointer; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.state-button[aria-pressed='true'] { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 var(--color-highlight), 0 4px 10px var(--color-soft-shadow); }
.state-button:hover { color: var(--color-ink); }
.state-button[aria-pressed='true']:hover { color: var(--color-accent-ink); background: var(--color-focus); }
.state-button:active { transform: scale(.97); }
.state-button:disabled { opacity: .5; cursor: not-allowed; }
.example-result { flex: 1; padding-block: var(--space-xl); }
.result-icon { color: var(--color-accent); margin-bottom: var(--space-lg); }
.example-result h3 { margin-bottom: var(--space-md); font-size: 28px; }
.example-result p { color: var(--color-muted); max-width: 40ch; font-size: var(--text-md); }
.result-label { display: inline-flex; margin-top: var(--space-lg); color: var(--color-accent); font-size: var(--text-sm); }
.reminder-example.is-solved .result-icon, .reminder-example.is-solved .result-label { color: var(--color-ok); }
.reminder-example.is-solved { background: linear-gradient(140deg, var(--color-ok-soft), var(--color-paper-2)); }
.example-caption, .reliability-note, .roadmap-note, .no-script-note { color: var(--color-muted); font-size: var(--text-sm); }
.reliability-note { margin-top: var(--space-xl); }
.privacy-section { padding-block: var(--space-xl) var(--section-gap-s); }
.privacy-section > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.privacy-section .section-heading { display: block; margin: 0; }
.privacy-section .text-link { margin-top: var(--space-lg); }
.privacy-rows p { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.privacy-rows p:first-child { padding-top: 0; }
.privacy-rows strong { display: block; font-size: var(--text-lg); font-weight: 500; margin-bottom: var(--space-xs); }
.privacy-rows span { font-size: var(--text-md); color: var(--color-muted); }
.roadmap-section { padding-block: var(--space-2xl) var(--section-gap); }
.roadmap-section .section-heading { align-items: center; }
.roadmap-list { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-lg); }
.roadmap-list article { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 330px; padding: var(--space-xl); border-radius: 24px; background: linear-gradient(135deg, var(--color-glass-light), var(--color-transparent) 65%), var(--color-paper-2); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--color-glass-edge); }
.roadmap-list article:nth-child(2) { background: linear-gradient(120deg, var(--color-paper-2), var(--color-accent-soft)); }
.roadmap-list article:last-child { grid-column: 1 / -1; min-height: 230px; padding-left: 160px; background: radial-gradient(ellipse at left bottom, var(--color-orange-haze), var(--color-transparent) 65%), var(--color-paper-2); }
.roadmap-name { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-md); }
.roadmap-name svg { color: var(--color-accent); width: 40px; height: 40px; margin-bottom: var(--space-sm); }
.roadmap-name h3 { font-size: 29px; }
.roadmap-list article:last-child svg { position: absolute; left: var(--space-xl); top: calc(50% - 30px); width: 60px; height: 60px; }
.roadmap-list article p { max-width: 46ch; color: var(--color-muted); font-size: var(--text-md); }
.plan-status { position: absolute; top: var(--space-lg); right: var(--space-lg); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--color-ink-2); background: var(--color-glass-light); }
.roadmap-note { margin-top: var(--space-lg); }
.site-footer { padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-rule); background: var(--color-paper-3); }
.footer-main { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl); }
.footer-main h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.footer-display { font-size: clamp(4rem, 12vw, 10rem); line-height: 1.3; letter-spacing: -.04em; font-weight: 500; color: var(--color-rule); margin-block: var(--space-xl); user-select: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.footer-bottom > p, .trademark-note { font-size: var(--text-sm); color: var(--color-muted); }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); text-decoration: none; }
.trademark-note { margin-top: var(--space-xl); }
@supports not (backdrop-filter: blur(1px)) { .preview-panel, .notification { background: var(--color-paper-2); } }
@media (min-width: 1700px) { .hero { min-height: 850px; } }
@media (max-width: 1100px) { :root { --gutter: 40px; } .navigation { gap: var(--space-lg); } .nav-links { gap: var(--space-lg); } .hero { gap: var(--space-lg); } .hero h1 { font-size: clamp(3.25rem, 7vw, 5rem); } .preview-panel { padding: var(--space-lg); right: 0; } .notification { left: 0; bottom: 56px; padding: var(--space-md); } .hero-preview { height: 560px; } .preview-status { gap: var(--space-xs); } .preview-status > :last-child { display: none; } .problem-grid { gap: var(--space-lg); } .problem-grid > * { padding-inline: var(--space-lg); } .reminder-workbench { gap: var(--space-xl); } .section-heading { align-items: flex-start; } .section-heading .lead { max-width: 26ch; } }
@media (max-width: 820px) { :root { --gutter: 24px; } .nav-badge { display: none; } .navigation { min-height: 92px; } .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); } .hero h1 { font-size: clamp(3.5rem, 10vw, 6rem); max-width: 14ch; } .hero .lead { max-width: 42ch; } .hero-preview { width: min(100%, 560px); height: 570px; margin-inline: auto; } .preview-panel { left: var(--space-md); right: var(--space-lg); top: 154px; padding: var(--space-lg) var(--space-xl) var(--space-xl); } .notification { left: var(--space-xl); bottom: 28px; padding: var(--space-lg); } .preview-status > :last-child { display: inline; } .hero-preview figcaption { bottom: -8px; } .problem-grid, .reminder-workbench, .privacy-section > .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .problem-grid > * { padding-inline: var(--space-lg); } .reset-fact { border-left: 0; padding-top: var(--space-lg); } .section-heading { flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-xl); } .section-heading .lead { max-width: 42ch; } .reminder-schedule { padding-block: 0; } .privacy-section .section-heading { margin-bottom: var(--space-md); } .roadmap-name h3 { font-size: 25px; } .roadmap-list article { padding: var(--space-lg); } .footer-bottom { justify-content: flex-start; } }
@media (max-width: 520px) { :root { --gutter: 20px; } .navigation { flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-md) var(--space-xs); } .wordmark { font-size: 21px; } .nav-links { width: 100%; justify-content: space-between; gap: var(--space-xs); } .nav-links a { font-size: 13px; } .hero { padding-top: var(--space-xl); gap: var(--space-lg); } .hero h1 { font-size: clamp(3rem, 13vw, 4.5rem); } .hero .lead { font-size: 16px; max-width: 34ch; margin-top: var(--space-lg); } .hero-actions { gap: var(--space-xs); margin-top: var(--space-md); } .play-badge { width: 204px; min-height: 78.94px; } .hero-actions .text-link { font-size: 13px; } .hero-preview { height: 510px; } .hero-preview::before { width: 340px; height: 340px; } .hero-preview::after { width: 280px; height: 280px; } .sculpture { top: 6px; width: 132px; height: 132px; left: calc(50% - 66px); border-radius: 36px; } .sculpture img { width: 66px; } .preview-panel { top: 119px; left: var(--space-xs); right: var(--space-xs); padding: var(--space-lg); transform: rotate(2deg); border-radius: 20px; } .preview-top { padding-bottom: var(--space-md); } .reset-value { font-size: clamp(2rem, 9vw, 3rem); } .preview-platform { font-size: 13px; } .preview-status { font-size: 12px; } .notification { left: var(--space-md); right: var(--space-xs); bottom: 32px; padding: var(--space-md); gap: var(--space-sm); } .notification strong { font-size: 14px; } .notification p { font-size: 12px; } .notification-time { display: none; } .hero-preview figcaption { left: var(--space-md); bottom: -4px; font-size: 11px; } .problem { padding-top: var(--space-xl); } .problem-grid { padding-block: var(--space-xl); } .problem-grid::before { border-radius: 24px; } .problem-grid > * { padding-inline: var(--space-md); } .big-time { font-size: 3.5rem; } .section-heading h2 { font-size: 2.25rem; } .reminder-example { padding: var(--space-lg); } .state-button { font-size: 13px; padding-inline: var(--space-sm); } .example-result h3 { font-size: 26px; } .schedule-list li { padding-inline: var(--space-md); gap: var(--space-sm); } .time-reading { min-width: 90px; } .schedule-list li:nth-child(2) { margin-left: var(--space-sm); } .schedule-list li:nth-child(3) { margin-left: var(--space-lg); } .roadmap-list { grid-template-columns: minmax(0, 1fr); } .roadmap-list article { min-height: 300px; padding: var(--space-xl) var(--space-lg); } .roadmap-list article:last-child { padding-left: var(--space-lg); min-height: 300px; } .roadmap-list article:last-child svg { position: static; width: 40px; height: 40px; } .footer-main { align-items: flex-start; flex-direction: column; gap: var(--space-lg); } .footer-display { font-size: 14vw; } .footer-bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }