:root {
  color-scheme: light;
  --cream: #f5eddd;
  --paper: #fffaf0;
  --sage: #244e45;
  --sage-light: #547467;
  --caramel: #c8874c;
  --brass: #b89958;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--cream); font-family: Georgia, 'Times New Roman', serif; }
body { position: fixed; inset: 0; }
#app-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.cafe-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 10% 14%, #fffaf0 0, transparent 48%), linear-gradient(125deg, #e5ddc9, var(--cream) 37%, #efe5d0 74%, #ddd3bc); }
.cafe-backdrop::before { content: ''; position: absolute; inset: 0; opacity: .19; background-image: repeating-linear-gradient(90deg, transparent 0 78px, #b9aa89 79px, transparent 80px); }
.cafe-backdrop::after { content: ''; position: absolute; left: 0; right: 0; bottom: -18vh; height: 46vh; border-top: 1px solid #c9b88d80; background: linear-gradient(180deg, #d7c2a04d, #b3946557); transform: skewY(-5deg); transform-origin: left; }
.cafe-window { position: absolute; left: 6vw; top: -14vh; width: 30vw; height: 73vh; border: 16px solid #fcf7eac9; border-radius: 50% 50% 8px 8px; box-shadow: 0 0 0 1px #cbbc9b90, 24px 20px 70px #91826516; background: linear-gradient(90deg, transparent calc(50% - 3px), #f8f0dc calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)), linear-gradient(180deg, transparent 53%, #f8f0dc 53% 54%, transparent 54%), linear-gradient(145deg, #a0baaa40, #edf1d778 62%, #efce9569); }
.cafe-botanical { position: absolute; left: 1.5vw; bottom: -10vh; width: clamp(170px, 23vw, 380px); height: 75vh; color: #385f4d; opacity: .52; transform: rotate(-8deg); }
.cafe-table { position: absolute; right: -6vw; bottom: -11vh; width: clamp(230px, 35vw, 650px); color: var(--sage); transform: rotate(-14deg); filter: drop-shadow(12px 22px 22px #74533415); }
.table-plate { fill: #fdf7e9; stroke: #c7b27b; stroke-width: 2; }
.table-rim { fill: none; stroke: #d9caac; stroke-width: 2; }
.table-handle { fill: none; stroke: #fffaf1; stroke-width: 18; }
.table-cup { fill: #fffaf1; stroke: #d3c3a3; stroke-width: 2; }
.table-coffee { fill: #a47048; stroke: #d4aa7a; stroke-width: 5; }
.table-art { fill: #eed7b0; stroke: #eed7b0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.table-beans { fill: #6e4e37; stroke: #aa8560; stroke-width: 2; }
#canvas-container { position: relative; flex: none; overflow: hidden; box-shadow: 0 0 0 1px #244e4530, 0 18px 85px #334d3e38; }
#canvas { display: block; width: 100%; height: 100%; outline: none; border: 0; touch-action: none; }
#launch-screen { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 30%, #faf4e8e6, #f1e7d3f0 70%); }
.launch-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(370px, 100%); padding: 34px 32px 30px; border: 1px solid #c0a66d80; border-radius: 32px; color: var(--sage); text-align: center; background: #fffbf2e8; box-shadow: 0 24px 80px #6d563215, inset 0 0 0 7px #f4ebd873; }
.launch-card::before, .launch-card::after { content: ''; position: absolute; width: 34px; height: 1px; top: 23px; background: var(--brass); opacity: .55; }
.launch-card::before { left: 27px; }.launch-card::after { right: 27px; }
.cup-emblem { width: 106px; height: 106px; }
.cup-emblem svg { width: 100%; height: 100%; overflow: visible; }
.cup-steam { fill: none; stroke: var(--caramel); stroke-width: 3; stroke-linecap: round; opacity: .72; }
.cup-handle { fill: none; stroke: var(--sage); stroke-width: 7; }
.cup-body { fill: var(--sage); }
.cup-highlight { fill: none; stroke: #7c9d80; stroke-width: 3; stroke-linecap: round; opacity: .65; }
.cup-saucer { fill: none; stroke: var(--brass); stroke-width: 4; stroke-linecap: round; }
#launch-screen:not([data-localized]) #status-text { visibility: hidden; }
.loading-details { width: 100%; }
.loading-caption { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--sage-light); font: 12px/1.5 system-ui, sans-serif; }
.loading-caption p { margin: 0; text-align: left; }
#progress-text { flex: none; color: var(--sage); font-variant-numeric: tabular-nums; }
progress { display: block; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 20px; accent-color: var(--caramel); background: #e8dfca; }
progress::-webkit-progress-bar { border-radius: 20px; background: #e8dfca; }
progress::-webkit-progress-value { border-radius: 20px; background: linear-gradient(90deg, var(--brass), var(--caramel)); transition: width .25s ease; }
progress::-moz-progress-bar { border-radius: 20px; background: var(--caramel); }
.spinner { display: flex; gap: 6px; align-items: center; height: 8px; }
.spinner span { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); animation: coffee-pulse 1.2s ease-in-out infinite; }
.spinner span:nth-child(2) { animation-delay: .15s; }.spinner span:nth-child(3) { animation-delay: .3s; }
button { width: 100%; max-width: 100%; min-height: 52px; padding: 14px 30px; border: 1px solid #17392f; border-radius: 16px; background: var(--sage); color: #fff7e6; font: 600 17px/1.2 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; box-shadow: 0 4px 0 #183c33, 0 8px 16px #244e451b; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
button:hover { background: #315f51; }
button:focus-visible { outline: 3px solid var(--caramel); outline-offset: 5px; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #183c33; }
button:disabled { cursor: default; }
#launch-screen[data-stage='ready'] .loading-caption { justify-content: center; margin-bottom: 0; }
#launch-screen[data-stage='ready'] .loading-caption p { text-align: center; }
#launch-screen[data-stage='error'] .loading-caption { justify-content: center; margin-bottom: 0; color: #865438; font-size: 13px; }
#launch-screen[data-stage='error'] .loading-caption p { text-align: center; }
@keyframes coffee-pulse { 0%, 75%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
[hidden] { display: none !important; }
#app-container.with-social-controls { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
#social-controls { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; right: 12px; z-index: 4; display: flex; justify-content: center; align-items: center; gap: 8px; }
#invite-friend-button { width: auto; min-height: 38px; padding: 9px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 3px 0 #183c33; }
#support-link { display: block; padding: 11px 14px; border: 1px solid #244e4560; border-radius: 12px; color: var(--sage); background: var(--paper); font: 600 13px/1.2 system-ui, sans-serif; text-decoration: none; }
#support-link:focus-visible { outline: 3px solid var(--caramel); outline-offset: 3px; }
#social-status { position: absolute; bottom: 42px; margin: 0; max-width: 340px; padding: 12px 16px; border: 1px solid #c0a66d; border-radius: 12px; background: var(--paper); color: var(--sage); text-align: center; font: 13px/1.4 system-ui, sans-serif; }
@media (max-aspect-ratio: 3/4) { .cafe-window, .cafe-botanical, .cafe-table { opacity: .22; } .cafe-backdrop::before { opacity: .1; } #canvas-container { box-shadow: none; } }
@media (max-width: 360px) { .launch-card { padding: 29px 25px 25px; gap: 20px; } }
@media (max-height: 480px) { .launch-card { width: min(360px, 100%); padding: 20px 30px; gap: 12px; border-radius: 24px; } .cup-emblem { width: 66px; height: 66px; } .launch-heading h1 { font-size: 28px; } .launch-heading p { margin-top: 5px; } button { min-height: 44px; padding: 10px 24px; } }
@media (max-height: 300px) { .cup-emblem, .launch-heading p, .spinner { display: none; } .launch-card { gap: 10px; padding: 18px 28px; } }
@media (prefers-reduced-motion: reduce) { .spinner span { animation: none; opacity: .6; } progress::-webkit-progress-value, button { transition: none; } }