:root{
  --bg1:#ffffff; --bg2:#f0f8ff; --fg:#0b1220; --muted:#475569; --line:#d6e3f1;
  --surface:rgba(255,255,255,.92); --on-surface:#0f1720;
  --shadow-1:0 2px 6px rgba(0,0,0,.06),0 10px 24px rgba(0,0,0,.06);
  --shadow-2:0 3px 8px rgba(0,0,0,.08),0 14px 28px rgba(0,0,0,.08);
  --primary:#1a73e8; --on-primary:#fff;
  --radius:16px; --radius-sm:12px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:40px; --space-7:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(800px 480px at 12% -10%, var(--bg2) 0%, transparent 60%),
    radial-gradient(800px 480px at 100% 0%, #eef6ff 0%, transparent 50%),
    var(--bg1);
  line-height:1.66; -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
@media (max-width:600px){ .wrap{padding:0 28px} }

/* Appbar */
header.appbar{
  position:sticky; top:0; z-index:50;
  margin:0 auto; max-width:1080px;
  border-radius:0 0 var(--radius) var(--radius);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-2); backdrop-filter:blur(8px);
  padding:0 var(--space-5);
}
.appbar-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-6) 0}
.brand{display:flex; align-items:center; gap:var(--space-3); min-width:0}
.logo{width:64px; height:64px; border-radius:16px; object-fit:cover; border:1px solid var(--line); box-shadow:var(--shadow-1)}
.brand-title h1{margin:0; font-size:26px}
.brand-title p{margin:6px 0 0; color:var(--muted); font-size:15px}
.actions{display:flex; align-items:center; gap:var(--space-2)}
.icon-btn{border:1px solid var(--line); background:var(--surface); color:var(--fg); border-radius:999px; padding:10px 16px; font-size:15px; box-shadow:var(--shadow-1); cursor:pointer}

/* Tiles / Cards */
.tile,.card{background:var(--surface); color:var(--on-surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-2)}
.hero-tile{margin:var(--space-7) auto var(--space-6); padding:var(--space-6); text-align:center}
.hero-tile h2{margin:0 0 var(--space-3); font-size:32px}
.hero-tile p{margin:0; color:var(--muted); max-width:820px; margin-left:auto; margin-right:auto; font-size:16px}

@media (max-width:720px){
  .appbar-inner{padding:var(--space-5) 0}
  .logo{width:56px; height:56px; border-radius:14px}
  .brand-title h1{font-size:24px}
  .hero-tile{margin:var(--space-6) auto var(--space-5); padding:var(--space-5)}
  .hero-tile h2{font-size:28px}
  .hero-tile p{font-size:15px}
}

main section{padding:28px 0; border-top:1px solid var(--line)}
h3{margin:0 0 12px; font-size:18px}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px}
.card{padding:16px}
.title{margin:0 0 8px; font-size:16px}
.meta{font-size:12px; color:var(--muted); margin-bottom:10px}
.desc{font-size:14px; opacity:.94}
.btn{display:inline-flex; align-items:center; gap:8px; margin-top:12px; background:var(--primary); color:var(--on-primary); padding:10px 12px; border-radius:var(--radius-sm); font-size:14px; box-shadow:var(--shadow-1); text-decoration:none}

footer{padding:22px 16px 28px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; cursor:pointer}

/* Snow canvas layer (hidden until Easter egg) */
#snow{ position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; display:none; z-index:9999; }