:root{color-scheme:light;--header:#3c261a;--panel:#432a1b;--cream:#fff0cf;--gold:#f7cf89;--border:#f8dcaa;--title:#382014;--shadow:#d3a16b;--coffee:#482510;--cup-shade:#dfb376}
:root[data-theme=dark]{color-scheme:dark;--header:#121132;--panel:#11112e;--cream:#e8dcff;--gold:#c4b0ff;--border:#7565ae;--title:#f2afcf;--shadow:#070721;--coffee:#3b2347;--cup-shade:#d392bf}
*{box-sizing:border-box}body{margin:0;background:var(--header);color:var(--cream);font-family:"VT323",monospace;font-size:24px}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}svg{width:1em;height:1em;flex-shrink:0;shape-rendering:crispEdges}.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.skip-link{position:fixed;top:-80px;left:12px;z-index:10;background:var(--panel);padding:10px}.skip-link:focus{top:8px}
.site-header{min-height:clamp(64px,5vw,84px);display:flex;align-items:center;gap:clamp(20px,4vw,66px);padding:8px clamp(18px,2.6vw,44px);background:var(--header);border-bottom:2px solid var(--gold);position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:18px;font-family:"Pixelify Sans",monospace;font-size:clamp(25px,2.6vw,42px);font-weight:600;white-space:nowrap}.brand svg{width:44px;height:44px;color:#fff0cd}
.navigation{display:flex;gap:clamp(22px,3vw,52px);align-items:center;margin-left:clamp(0px,1vw,18px);font-size:clamp(22px,1.8vw,29px)}.navigation a{position:relative;padding:10px 0}.navigation a[aria-current]::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:3px;background:var(--gold);border-radius:3px}.navigation a:hover{color:var(--gold)}
.login-button{display:flex;align-items:center;justify-content:center;gap:12px;background:transparent;border:2px solid var(--gold);border-radius:20px;padding:7px 28px;font-size:26px;white-space:nowrap}.login-button svg{width:25px;height:25px}.login-button:hover{background:var(--gold);color:var(--header)}
.theme-toggle{margin-left:auto;display:flex;flex-shrink:0;border:2px solid #aa815d;border-radius:32px;overflow:hidden}.theme-toggle button{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:9px 19px;font-size:26px;border-radius:28px}.theme-toggle svg{width:28px;height:28px}.theme-toggle button[aria-pressed=true]{background:var(--gold);color:var(--header)}
.cafe{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100svh - clamp(64px,5vw,84px));padding:0 20px;background:#b88451}
.scenery{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;pointer-events:none;transition:opacity .45s ease}.scenery-day{background-image:url('/images/cafe-scenery-day.png')}.scenery-night{background-image:url('/images/cafe-scenery-night.png');opacity:0}html[data-theme=dark] .scenery-night{opacity:1}html[data-theme=dark] .scenery-day{opacity:0}
.welcome{text-align:center;color:var(--title);padding-top:clamp(15px,5.5vw,67px);margin-top:-100px;margin-bottom:24px}.hero-cup{display:block;width:clamp(70px,6vw,100px);height:clamp(70px,6vw,100px);margin:0 auto;color:#fff0cf;filter:drop-shadow(3px 0 0 #3c2417) drop-shadow(-3px 0 0 #3c2417) drop-shadow(0 3px 0 #3c2417)}
.steam{animation:steam 2.8s steps(4,end) infinite}@keyframes steam{0%,100%{opacity:.65;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
h1{font-family:"Pixelify Sans",monospace;font-weight:700;font-size:clamp(48px,5.9vw,100px);line-height:1.05;letter-spacing:-2px;margin:7px 0 3px;text-shadow:2px 2px 0 #fff4cf}.tagline{font-family:"Pixelify Sans",monospace;font-size:clamp(21px,2vw,34px);font-weight:600;margin:0;text-shadow:1px 1px 0 #fff4cf}
.intro{display:inline-block;font-size:clamp(24px,1.85vw,31px);line-height:1.12;letter-spacing:.3px;margin:70px 0 0;padding:12px clamp(25px,3.6vw,60px);background:var(--panel);border:2px solid #b58a56;border-radius:20px;color:var(--cream)}
html[data-theme=dark] h1,html[data-theme=dark] .tagline{text-shadow:3px 3px 0 #10102d}html[data-theme=dark] .tagline{color:#ece0ff}html[data-theme=dark] .intro{border-color:var(--border)}
.feature-section{position:relative;background:var(--header);padding:clamp(40px,6vw,80px) 20px clamp(40px,6vw,80px);display:flex;justify-content:center;overflow:hidden}
.lofi-decor{position:absolute;inset:0;pointer-events:none}
.deco{position:absolute;color:var(--gold);opacity:.45}
.deco-star1,.deco-star2,.deco-star3,.deco-star4{font-size:14px;animation:twinkle 3s ease-in-out infinite alternate}
.deco-star1{top:12%;left:8%;animation-delay:0s}.deco-star2{top:25%;right:12%;animation-delay:.8s;font-size:10px}
.deco-star3{bottom:18%;left:15%;animation-delay:1.5s;font-size:11px}.deco-star4{top:40%;right:6%;animation-delay:2.2s;font-size:12px}
.deco-note1,.deco-note2{font-size:18px;animation:float 4s ease-in-out infinite alternate}
.deco-note1{top:20%;left:4%;animation-delay:.5s}.deco-note2{bottom:25%;right:5%;animation-delay:2s;font-size:15px}
.deco-plant-l,.deco-plant-r{width:20px;height:28px}
.deco-plant-l{bottom:8%;left:3%;box-shadow:0 0 0 2px var(--gold),4px -4px 0 2px var(--gold),8px -2px 0 2px var(--gold),-2px -8px 0 2px var(--gold),6px -10px 0 2px var(--gold),2px -14px 0 2px var(--gold),0 4px 0 2px var(--gold),-4px 8px 0 2px var(--gold);opacity:.35}
.deco-plant-r{bottom:8%;right:3%;box-shadow:0 0 0 2px var(--gold),-4px -4px 0 2px var(--gold),-8px -2px 0 2px var(--gold),2px -8px 0 2px var(--gold),-6px -10px 0 2px var(--gold),-2px -14px 0 2px var(--gold),0 4px 0 2px var(--gold),4px 8px 0 2px var(--gold);opacity:.35}
.deco-cup{bottom:10%;left:50%;transform:translateX(-50%);width:14px;height:10px;border:2px solid var(--gold);border-top:none;border-radius:0 0 3px 3px;opacity:.3}
.deco-cup::after{content:"";position:absolute;top:-4px;right:-5px;width:5px;height:5px;border:2px solid var(--gold);border-left:none;border-radius:0 3px 3px 0}
@keyframes twinkle{0%{opacity:.2;transform:scale(.8)}100%{opacity:.55;transform:scale(1.1)}}
@keyframes float{0%{transform:translateY(0)}100%{transform:translateY(-5px)}}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:min(100%,950px)}
.feature{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid var(--border);border-radius:14px;padding:18px 12px 14px;background:var(--panel);color:var(--cream);box-shadow:inset 0 0 25px #ffffff06,3px 4px 0 #4a291b35;min-height:clamp(158px,11vw,184px);transition:transform .15s,background .15s}
.feature::before,.feature::after{content:"❧";position:absolute;top:36%;font-size:24px;color:var(--gold);opacity:.6}.feature::before{left:12px;transform:rotate(-35deg)}.feature::after{right:12px;transform:rotate(35deg) scaleX(-1)}
.feature:hover{transform:translateY(-5px);background:color-mix(in srgb,var(--panel),var(--gold) 10%)}.feature:active{transform:translateY(-1px)}.feature>svg{width:44px;height:44px;margin-bottom:12px}.feature h2{font-size:30px;font-weight:400;line-height:1;margin:0 0 9px}.feature p{font-size:23px;line-height:.95;margin:0}
dialog{width:min(440px,calc(100% - 32px));padding:32px;border:2px solid var(--border);border-radius:14px;background:var(--panel);color:var(--cream);box-shadow:8px 8px 0 #0005;text-align:center}dialog::backdrop{background:#100d20ac}dialog h2{font:600 28px "Pixelify Sans",monospace;margin:6px 0 14px}dialog p{line-height:1.15}.dialog-cup{width:52px;height:52px}.close-dialog{position:absolute;right:8px;top:5px;background:none;border:0;font-size:32px}.primary-button{display:block;text-align:center;width:100%;border:2px solid var(--border);background:var(--gold);color:var(--header);border-radius:7px;padding:10px;font:inherit}.primary-button:disabled{opacity:.6;cursor:wait}form label{display:block;text-align:left;margin:14px 0}input,select{width:100%;padding:8px;border:2px solid var(--border);border-radius:5px;background:var(--header);color:var(--cream)}[hidden]{display:none!important}#loginStatus{font-size:22px}
@media(min-width:1100px) and (max-height:800px){.welcome{padding-top:35px}}
@media(max-width:1150px){.site-header{gap:24px}.brand{gap:9px}.brand svg{width:32px;height:32px}.navigation{gap:24px;margin:0}.login-button{padding:7px 16px}.theme-toggle button{padding:7px 12px;gap:8px}.theme-toggle svg{width:23px;height:23px}}
@media(max-width:850px){.site-header{flex-wrap:wrap;gap:10px 16px;padding:12px 16px}.brand{font-size:27px}.login-button{margin-left:auto;font-size:22px;padding:5px 12px}.theme-toggle{margin-left:0}.theme-toggle button{font-size:21px;padding:6px 10px}.navigation{order:4;justify-content:center;width:100%;gap:38px;font-size:24px}.welcome{padding-top:45px}.feature-grid{gap:12px}.feature{padding:16px 8px}.feature::before,.feature::after{display:none}.feature h2{font-size:26px}.feature p{font-size:20px}.scenery{background-position:52% center}}
@media(max-width:540px){.site-header{gap:10px 8px}.brand{font-size:24px;gap:5px}.brand svg{width:28px;height:28px}.login-button svg{display:none}.login-button{font-size:21px;padding:5px 10px}.theme-toggle svg{width:15px;height:15px}.theme-toggle button{gap:4px;font-size:19px;padding:7px}.navigation{gap:35px}.cafe{padding:0 16px}.welcome{width:100%;padding-top:40px}.hero-cup{width:72px;height:72px}h1{font-size:clamp(38px,11vw,57px);letter-spacing:-1px;margin-top:14px}.tagline{font-size:clamp(17px,4.5vw,23px);white-space:nowrap}.intro{font-size:24px;margin-top:18px;padding:12px 24px;max-width:100%}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature{min-height:149px}.feature>svg{width:36px;height:36px;margin-bottom:9px}.feature p{font-size:22px}.scenery{background-position:center top}.welcome h1{text-shadow:2px 2px 0 #fff4cf,0 0 16px #fff4cf}.welcome .tagline{text-shadow:1px 1px 0 #fff4cf,0 0 10px #fff4cf}}
h1{font-size:clamp(44px,5vw,84px);margin:0 0 3px}
.intro{font-size:clamp(24px,1.65vw,28px);padding:12px clamp(25px,3vw,50px)}
.feature{min-height:clamp(140px,11vw,184px);padding:clamp(12px,1.1vw,18px) 10px}
.feature>svg{width:clamp(34px,2.65vw,44px);height:clamp(34px,2.65vw,44px)}
.feature h2{font-size:clamp(25px,1.8vw,30px)}
.feature p{font-size:clamp(20px,1.4vw,23px)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.feature-grid{width:min(950px,90vw)}}
@media(max-width:540px){
  .site-header{display:grid;grid-template-columns:1fr auto;gap:7px 8px}
  .brand{grid-column:1;grid-row:1;font-size:23px}
  .theme-toggle{grid-column:2;grid-row:1}
  .navigation{grid-column:1;grid-row:2;gap:18px;justify-content:flex-start;width:auto;font-size:22px}
  .login-button{grid-column:2;grid-row:2;justify-self:end;margin:0}
  h1{font-size:clamp(38px,11vw,57px);margin-top:14px}
  .feature-grid{width:100%}
  .feature{min-height:142px;padding:13px 7px}
  .feature p{font-size:20px}
}
@media(max-width:360px){
  .site-header{padding:10px 12px;grid-template-columns:minmax(0,1fr) auto}
  .brand{font-size:19px}.brand svg{width:22px;height:22px}
  .theme-toggle button{font-size:17px;padding:6px 5px;gap:3px}.theme-toggle svg{width:12px;height:12px}
  .navigation{gap:13px;font-size:20px}.login-button{font-size:20px}
  .intro{font-size:22px;padding:12px 14px}.feature p{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*,*::before,*::after{animation:none!important;transition:none!important}}