/* Gremmsoft's paper, shadow and OLED palettes. System is the default. */
:root {
  --paper:#efede7; --ink:#25222a; --muted:#68616e; --line:#c9c2cd;
  --accent:#78528e; --accent-soft:#e6ddeb; --panel:#f8f5f9; --shadow:#cfc1d7;
  --focus:#81569e; --stamp-shadow:#ac8dbb38;
  color-scheme:light;
}
:root[data-theme="dark"], :root[data-theme="oled"] {
  --paper:#17151c; --ink:#eee8f2; --muted:#b0a7b8; --line:#423a4b;
  --accent:#c6a0df; --accent-soft:#302437; --panel:#211d28; --shadow:#3b2d48;
  --focus:#d5b2ec; --stamp-shadow:#b388d121;
  color-scheme:dark;
}
:root[data-theme="oled"] { --paper:#000; --panel:#0b080e; --line:#352a3f; --shadow:#22182d; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="oled"]) {
    --paper:#17151c; --ink:#eee8f2; --muted:#b0a7b8; --line:#423a4b;
    --accent:#c6a0df; --accent-soft:#302437; --panel:#211d28; --shadow:#3b2d48;
    --focus:#d5b2ec; --stamp-shadow:#b388d121;
    color-scheme:dark;
  }
}
body { background:var(--paper); }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
.brand { gap:11px; }
.brand>svg { width:49px; height:49px; transform:rotate(-7deg); }
.brand-stop,.period { color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:30px; }
.masthead nav { gap:25px; }
.notice { position:relative; }
.eyebrow { color:var(--muted); }
.status-dot { background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
h1 { position:relative; z-index:1; }
h1>span { position:relative; }
h1>span::after { content:""; position:absolute; width:81%; height:5px; bottom:-10px; left:3px; background:var(--accent); opacity:.38; transform:rotate(-1.2deg); clip-path:polygon(0 30%,93% 0,100% 70%,6% 100%); }
.intro { margin-top:4px; }
.creator-credit { margin-top:12px; color:var(--muted); font-size:11px; }
.creator-credit strong { color:var(--ink); font-weight:600; }
.gremmy-stamp { position:absolute; width:88px; height:109px; top:40px; right:24px; transform:rotate(9deg); display:flex; flex-direction:column; align-items:center; gap:6px; }
.gremmy-stamp::before { content:""; position:absolute; inset:3px -9px 7px; border:1px solid var(--accent); opacity:.3; transform:rotate(-5deg); clip-path:polygon(0 0,100% 0,100% 30%,97% 30%,97% 97%,0 100%); }
.gremmy-stamp svg { width:83px; height:83px; filter:drop-shadow(3px 3px 0 var(--stamp-shadow)); }
.gremmy-stamp>span { font:6px monospace; color:var(--accent); letter-spacing:1px; white-space:nowrap; }
.work-strip { color:var(--muted); }
.stripes { background:repeating-linear-gradient(-55deg,var(--accent) 0 5px,transparent 5px 10px); }
.tiny-cross { transform:rotate(15deg); color:var(--accent); }
.featured { color:#f1ede5; box-shadow:7px 7px 0 var(--shadow); }
.card-top { background:#1c1b21; }
.platform { color:#c4bdcb; }
.preview-button { white-space:nowrap; }
.project-icon { color:#242027; border-color:#62536b4d; box-shadow:3px 3px 0 var(--shadow); }
.book-icon { background:#d6c4eb; }
.embed-icon { background:#c3d9d3; }
.pen-icon { background:#e1d7e8; }
.pen-icon svg { width:52px; height:52px; }
.footer-family>a,.footer-family>span { display:flex; align-items:center; gap:7px; }
.footer-family svg { width:23px; height:23px; }
.family-divider { color:var(--muted); }
.game-dialog { background:var(--panel); color:var(--ink); border-color:var(--line); box-shadow:12px 12px 0 #0005; }
.dialog-header { border-color:var(--line); color:var(--muted); }
.close-button { border-color:var(--line); color:var(--ink); }
.close-button:hover { background:var(--accent-soft); }
.preview-copy>.alpha-tag { color:var(--accent); }
.preview-lead { color:var(--accent); }
.preview-note { color:var(--muted); }
.dialog-content>img { border-color:var(--line); }
.theme-menu { position:relative; z-index:5; }
.theme-menu>summary { list-style:none; display:flex; align-items:center; gap:8px; padding:10px 11px; min-height:44px; border:1px solid var(--line); cursor:pointer; font-size:12px; font-weight:600; }
.theme-menu>summary::-webkit-details-marker { display:none; }
.theme-menu>summary svg { width:16px; height:16px; }
.theme-current { color:var(--muted); font:9px monospace; padding-left:2px; }
.theme-menu[open]>summary,.theme-menu>summary:hover { background:var(--accent-soft); }
.theme-panel { position:absolute; right:0; top:calc(100% + 12px); width:270px; padding:21px; background:var(--panel); border:1px solid var(--line); box-shadow:5px 5px 0 var(--shadow); }
.theme-panel fieldset { border:0; padding:0; margin:0; }
.theme-panel legend { font-size:14px; font-weight:700; margin:0 0 14px; padding:0; }
.theme-panel label { display:flex; gap:12px; align-items:center; padding:11px 8px; border:1px solid transparent; cursor:pointer; }
.theme-panel label:hover { background:var(--accent-soft); }
.theme-panel label:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); }
.theme-panel input { width:16px; height:16px; accent-color:var(--accent); margin:0; flex-shrink:0; }
.theme-panel label>span { font-size:12px; font-weight:600; display:flex; flex-direction:column; gap:5px; }
.theme-panel small { font-size:10px; color:var(--muted); font-weight:400; }
.theme-panel>p { font-size:10px; color:var(--muted); margin:16px 0 0; }
@media(max-width:1100px) {
  .header-actions { gap:22px; }
  .masthead nav { gap:18px; }
  .theme-current { display:none; }
  .gremmy-stamp { right:9px; width:72px; top:38px; height:93px; }
  .gremmy-stamp svg { width:68px; height:68px; }
}
@media(max-width:760px) {
  .brand>svg { width:41px; height:41px; }
  .brand { gap:8px; }
  .header-actions { gap:14px; }
  .masthead nav { display:none; }
  .theme-menu>summary { gap:7px; padding:9px 10px; font-size:11px; }
  .theme-panel { width:255px; padding:18px; }
  .gremmy-stamp { top:33px; right:13px; width:68px; height:88px; }
  .gremmy-stamp svg { width:63px; height:63px; }
  .gremmy-stamp>span { font-size:5px; }
  h1 { margin-top:35px; }
  h1>span::after { bottom:-8px; height:4px; }
  .intro { margin-top:9px; }
  .creator-credit { margin-top:10px; font-size:10px; }
  .featured { box-shadow:5px 5px 0 var(--shadow); }
  .pen-icon svg { width:45px; height:45px; }
  .section-heading>span { font-size:7px; }
}
@media(max-width:380px) {
  .brand { font-size:25px; gap:5px; }
  .brand>svg { width:36px; height:36px; }
  .theme-menu>summary { padding:9px 8px; }
  .gremmy-stamp { width:58px; height:75px; right:9px; }
  .gremmy-stamp svg { width:54px; height:54px; }
  .gremmy-stamp>span { letter-spacing:.5px; }
}