:root{
  --bg1:#FFB199;
  --bg2:#FF4FD8;
  --bg3:#8A5BFF;
  --teal:#2EF2E8;
  --ink:#111;
  --muted:#5a5a5a;
  --panel:#fff;
  --bar:#eee;
  --border:#bdbdbd;
  --shadow:0 6px 18px rgba(0,0,0,.12);
}
html[data-theme="dark"]{
  --ink:#eaeaea;
  --muted:#bdbdbd;
  --panel:#1c1c1c;
  --bar:#2a2a2a;
  --border:#3b3b3b;
}
*{box-sizing:border-box;}
body{
  margin:0;
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  background:
    radial-gradient(60% 80% at 20% 10%, var(--bg1), transparent 60%),
    radial-gradient(80% 60% at 80% 20%, var(--bg2), transparent 60%),
    radial-gradient(80% 80% at 50% 100%, var(--bg3), transparent 60%),
    linear-gradient(120deg,var(--bg1),var(--bg2) 50%,var(--bg3));
  background-attachment:fixed;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:3px 3px;
  background-position:0 0,1.5px 1.5px;
  opacity:.15;
}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
.menubar{
  position:fixed;inset:0 0 auto 0;height:36px;display:flex;align-items:center;
  gap:16px;padding:0 14px;background:var(--bar);
  border-bottom:1px solid var(--border);z-index:50;
  -webkit-backdrop-filter:saturate(1.1) blur(2px);backdrop-filter:saturate(1.1) blur(2px);
  font-size:14px;
}
.menubar nav{display:flex;align-items:center;gap:14px;}
.menubar .brand{font-family:"VT323",monospace;font-size:22px;letter-spacing:.5px;text-decoration:none;color:inherit;}
.menubar .admin-link{position:relative;text-decoration:none;color:inherit;}
.menubar .admin-link::before{content:'\25B8';margin:0 4px 0 2px;}
.vesper-menu{position:relative;}
.vesper-dropdown{position:absolute;top:100%;left:0;background:var(--bar);border:1px solid var(--border);border-radius:4px;padding:6px;display:flex;flex-direction:column;gap:6px;}
.status-dot{width:12px;height:12px;border-radius:50%;background:#888;display:inline-block;}
.status-dot.ok{background:#27c93f;}
#themeToggle{background:none;border:1px solid var(--border);border-radius:4px;padding:2px 6px;cursor:pointer;font-size:14px;}
.wrap{max-width:1100px;margin:0 auto;padding:80px 16px 40px;display:flex;flex-direction:column;gap:32px;}
.hero{text-align:center;}
.hero h1{font-family:"VT323",monospace;font-size:clamp(2rem,5vw,3.5rem);margin:.25rem 0;}
.header-grad{background:linear-gradient(90deg,var(--bg1),var(--bg2),var(--bg3));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:headerShift 15s ease infinite;}
@keyframes headerShift{0%{background-position:0 0;}50%{background-position:100% 0;}100%{background-position:0 0;}}
@media (prefers-reduced-motion: reduce){.header-grad{animation:none;}}
.cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;border:1px solid var(--border);background:var(--panel);text-decoration:none;color:inherit;cursor:pointer;}
.btn.primary{background:var(--teal);color:#000;}
.features-grid{display:grid;gap:20px;}
@media (min-width:640px){.features-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.features-grid{grid-template-columns:repeat(3,1fr);}}
.platinum-window{background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);overflow:hidden;}
.platinum-titlebar{display:flex;align-items:center;gap:8px;padding:4px 8px;height:26px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.6),rgba(255,255,255,.6)1px,transparent1px,transparent3px),linear-gradient(#f6f6f6,#e9e9e9);border-bottom:1px solid var(--border);font-weight:700;color:#333;}
html[data-theme="dark"] .platinum-titlebar{color:#eaeaea;}
.platinum-controls{display:flex;gap:6px;margin-right:6px;}
.platinum-controls .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(#fff,#d9d9d9);border:1px solid #9f9f9f;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.platinum-window .content{padding:16px;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px;}
.tile{background:var(--bar);border:1px solid var(--border);border-radius:4px;height:72px;display:grid;place-items:center;font-size:32px;transition:transform .2s ease;}
@media (hover:hover){.tile:hover{transform:translateY(-3px);}}
.caption{color:var(--muted);margin-top:.5rem;}
.dock{position:relative;z-index:10;display:flex;gap:18px;justify-content:center;align-items:center;padding:14px 10px;background:rgba(255,255,255,.5);border-top:1px solid var(--border);}
.dock a{text-decoration:none;color:inherit;}
.dock .icon{width:28px;height:28px;display:inline-block;transition:transform .18s ease;}
@media (hover:hover){.dock a:hover .icon{transform:scale(1.15);}}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
body.no-motion *{animation:none!important;transition:none!important;}
@media (prefers-reduced-motion: reduce){
  .tile:hover{transform:none;}
  .dock a:hover .icon{transform:none;}
}

.menubar nav a{color:inherit;text-decoration:none;}
.menubar nav a:hover{text-decoration:underline;}

.top-nav{display:flex;gap:12px;padding:16px;}
.top-nav .nav-link{text-decoration:none;color:inherit;border-bottom:1px solid transparent;padding-bottom:2px;}
.top-nav .nav-link:hover{border-color:var(--border);}
.top-nav .nav-link.active{border-color:var(--ink);font-weight:600;}

.fortune-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:600px;
  margin:0 auto;
}
.fortune-form label{display:flex;flex-direction:column;gap:4px;}
.fortune-form fieldset{border:1px solid var(--border);padding:8px 12px;border-radius:6px;}
.fortune-form button{align-self:flex-start;}

.form-msg{margin-top:16px;padding:8px 12px;border:1px solid var(--border);background:var(--panel);border-radius:6px;}
.form-msg.error{color:#c00;}
.form-msg.success{color:#060;}