/* The whole screen is a touch surface, with no selectable or editable content. */
* { box-sizing:border-box; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#101a2a; color:#f7f9fc; font-family:system-ui,sans-serif; touch-action:none; overscroll-behavior:none; user-select:none; }
canvas { position:absolute; inset:0; width:100%; height:100%; }
header { position:absolute; top:max(28px,env(safe-area-inset-top)); left:0; right:0; text-align:center; pointer-events:none; }
h1 { font-size:14px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#9facbe; margin:0; }
#prompt { position:absolute; top:44%; left:0; width:100%; text-align:center; pointer-events:none; font-size:24px; font-weight:500; transition:opacity .2s; }
#status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { #prompt { transition:none; } }

/* A quiet side tab appears whenever the app is waiting for fingers. */
:root { --about-tab-center:max(80px,calc(env(safe-area-inset-top) + 32px)); }
#about-tab { position:fixed; z-index:5; top:calc(var(--about-tab-center) - 24px); right:0; width:48px; height:48px; padding:0; border:0; background:transparent; cursor:pointer; touch-action:manipulation; }
#about-tab[hidden] { display:none; }
.tab-shape { position:absolute; top:8px; right:0; width:16px; height:32px; border-radius:16px 0 0 16px; background:#ec887f; pointer-events:none; }
#about-tab:focus { outline:none; }
html.keyboard-nav #about-tab:focus { outline:1px solid #9facbe; outline-offset:-5px; }
#about-panel { position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; border:0; padding:0; color:#f7f9fc; background:#101a2a; overflow:hidden; touch-action:pan-y; overscroll-behavior:contain; }
#about-panel::backdrop { background:#101a2a; }
#about-panel.fallback { z-index:20; }
#about-close { position:absolute; z-index:3; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); min-width:88px; height:48px; padding:0 12px; border:1px solid #344258; border-radius:24px; background:#101a2a; color:#d6dde7; font:500 14px system-ui,sans-serif; cursor:pointer; }
#about-close span { margin-left:6px; font-size:23px; vertical-align:-2px; }
#about-scroll { position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

.about-content { width:min(100%,440px); margin:auto; padding:92px 32px max(32px,env(safe-area-inset-bottom)); font-size:16px; line-height:1.65; }
.eyebrow { color:#9facbe; font-size:10px; letter-spacing:.23em; }
#about-title { font-size:42px; letter-spacing:-.04em; font-weight:550; margin:8px 0 18px; }
.intro { font-size:23px; line-height:1.45; margin-bottom:30px; }
.about-content > p:not(.intro):not(.eyebrow) { color:#b6c0ce; }
.principles { font-weight:600; }
.name-note { font-size:14px; }
.coffee { border-top:1px solid #344258; margin-top:32px; padding-top:22px; }
.coffee h3 { font-size:19px; font-weight:550; margin:0; }
.coffee p { color:#b6c0ce; font-size:14px; }
.coming-soon { display:inline-block; color:#9facbe; border:1px solid #344258; border-radius:18px; padding:5px 13px; font-size:12px; }
.version { margin-top:32px; font-size:11px; }

/* A circular reveal from the side tab, with restrained text motion. */
#about-panel.opening { animation:corner-open 320ms cubic-bezier(.22,.65,.3,1) both; }
#about-panel.closing { animation:corner-close 180ms cubic-bezier(.4,0,.6,1) both; pointer-events:none; }
#about-panel.opening .about-content { animation:content-in 260ms 70ms ease-out both; }
#about-panel.closing .about-content { animation:content-out 120ms ease-in both; }
@keyframes corner-open { from { clip-path:circle(0 at 100% var(--about-tab-center)); } to { clip-path:circle(150vmax at 100% var(--about-tab-center)); } }
@keyframes corner-close { from { clip-path:circle(150vmax at 100% var(--about-tab-center)); } to { clip-path:circle(0 at 100% var(--about-tab-center)); } }
@keyframes content-in { from { opacity:0; transform:translate(4px,-4px); } to { opacity:1; transform:none; } }
@keyframes content-out { to { opacity:0; transform:translate(3px,-3px); } }
@media (prefers-reduced-motion:reduce) {
  #about-panel.opening { animation:panel-fade-in 120ms ease-out both; }
  #about-panel.closing { animation:panel-fade-out 120ms ease-in both; }
  #about-panel.opening .about-content, #about-panel.closing .about-content { animation:none; }
}
@keyframes panel-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes panel-fade-out { from { opacity:1; } to { opacity:0; } }

/* The tribute has its own space below support, never behind body text. */
html.about-open, body.about-open { touch-action:pan-y; }
#about-panel, #about-panel * { touch-action:pan-y; }
.about-content { padding-top:max(72px,calc(env(safe-area-inset-top) + 48px)); }
#about-title { margin:0 0 4px; }
.tagline { margin:0 0 26px; font-size:18px; color:#d6dde7 !important; }
.coffee { margin-top:25px; }
.tribute { margin:36px 0 0; text-align:center; }
.tribute img { display:block; width:min(100%,275px); height:auto; margin:0 auto 20px; }
.tribute figcaption { max-width:300px; margin:auto; font-size:14px; line-height:1.65; color:#b6c0ce; }
.version { text-align:center; }

#about-panel #about-close { touch-action:manipulation; }