/* Approved retro maroon design, September 2026. */
:root, :root[data-theme=dark] { --font-sans:"Helvetica Neue",Helvetica,Arial,sans-serif; --bg:#21191d; --text:#f0e4da; --fg:var(--text); --ink:var(--text); --muted:#c6acb3; --line:#8c626e; --border:var(--line); --accent:#e29aab; --accent-2:var(--accent); --accent-text:var(--accent); --surface:#38252d; --panel:var(--surface); --panel-2:var(--surface); --surface-bg:var(--surface); --surface-bg-strong:#2b2026; --surface-border:var(--line); --shadow:#100b0e; --maroon:#781e35; --bar-ink:#fff3e6; --nav-bg:var(--surface); --nav-border:var(--line); --field-bg:var(--bg); --field-border:var(--line); --topbar-bg:var(--maroon); --topbar-border:var(--line); }
:root[data-theme=light] { --bg:#f5eee2; --text:#40252d; --muted:#775862; --line:#9c737a; --accent:#781e35; --surface:#e9d7d2; --surface-bg-strong:#faf4e9; --shadow:#b59794; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 36px; background:var(--maroon); color:var(--bar-ink); border-bottom:1px solid var(--line); backdrop-filter:none; }
.topbar .brand { color:var(--bar-ink); text-decoration:none; font:700 18px var(--font-sans); }
.topbar .brand .icon { display:none; }
.topbar .brand-name { font:700 18px var(--font-sans); }
.topbar .nav,.topbar .shell-toolbar-actions { display:flex; align-items:center; gap:4px; padding:5px; background:var(--surface); border:2px solid; border-color:#d6a2ac #421121 #421121 #d6a2ac; box-shadow:2px 2px 0 #330a18; }
.topbar .nav-link,.topbar .shell-music-nav-button { order:initial!important; display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; height:36px; flex:initial; min-height:36px; padding:6px 12px; font:500 13px var(--font-sans); color:var(--ink); background:transparent; border:2px solid transparent; border-radius:0; text-decoration:none; transition:background 140ms ease,transform 140ms ease; }
.topbar .nav-link:hover,.topbar .shell-music-nav-button:hover { color:var(--ink); background:var(--bg); border-color:var(--muted) var(--shadow) var(--shadow) var(--muted); box-shadow:1px 1px 0 var(--shadow); }
.topbar .nav-link[aria-current=page] { background:var(--maroon);color:var(--bar-ink);border-color:#441224 #bd7184 #bd7184 #441224;box-shadow:inset 1px 1px 0 #350c19; }
.topbar .nav-link:active,.topbar .shell-music-nav-button:active { transform:translateY(1px); }
.toolbar-icon { width:14px;height:14px;fill:currentColor;shape-rendering:crispEdges; }
.retro-home { position:relative; margin:30px; border:1px solid var(--line); padding:35px 40px 170px; min-height:calc(100vh - 150px); }
.location { font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); }
.hero-heading { font:700 clamp(64px,7.5vw,100px)/1.02 var(--font-sans);letter-spacing:-.055em;margin:26px 0;max-width:760px; }
.intro { max-width:440px;font-size:17px;line-height:1.7;color:var(--muted); }
.aside-note { position:absolute;right:7%;top:155px;width:175px;font-size:13px;color:var(--muted); }
.aside-note b { display:block;color:var(--ink);margin-bottom:8px;font-weight:500; }
.home-actions { display:flex;flex-wrap:wrap;gap:21px;margin-top:55px; }
.action-button,.contact-trigger { display:inline-flex;align-items:center;gap:13px;min-height:55px;padding:13px 21px;border:1px solid var(--line);font:500 14px var(--font-sans);text-decoration:none;cursor:pointer;transition:transform 200ms ease,box-shadow 200ms ease,background 200ms ease; }
.action-button { background:var(--maroon);color:var(--bar-ink);box-shadow:3px 3px 0 var(--shadow); }
.contact-trigger { color:var(--ink);background:transparent; }
.contact-trigger svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5; }
.action-button:hover { transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow);background:#8b2942;color:var(--bar-ink); }
.contact-trigger:hover { background:var(--surface);transform:translateY(-2px); }
.action-button:active,.contact-trigger:active { transform:translate(1px,1px);box-shadow:none; }
.hero-heading .greeting-word { display:inline-block; }
.hero-heading .greeting-char { display:inline-block;transform:translateY(var(--arc-y,0px)) rotate(var(--arc-angle,0deg));transform-origin:center 80%;transition:transform 120ms cubic-bezier(.2,.65,.3,1); }
.hero-heading:hover .greeting-name,.greeting-dot { color:var(--accent); }
.hero-heading.arc-rest .greeting-char { transition-duration:260ms; }
.tools-page { max-width:none;margin:30px;padding:35px 40px 150px;border:1px solid var(--line); }
.tools-header h1 { font-size:52px;letter-spacing:-.035em; }
.tools-grid { gap:16px; }
.tool-card { border:1px solid var(--line);border-radius:0;background:transparent;padding:21px;box-shadow:3px 3px 0 var(--shadow);transition:transform 180ms ease,background 180ms ease; }
.tool-card:hover { background:var(--surface);transform:translateY(-2px); }
.tool-card:active { transform:translateY(1px); }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
@media(max-width:700px) { .topbar { padding:14px 12px; }.topbar .nav,.topbar .shell-toolbar-actions { gap:1px;padding:3px; }.topbar .nav-link,.topbar .shell-music-nav-button { padding:6px;gap:5px;font-size:12px; }.shell-music-nav-button .music-label { display:none; }.retro-home,.tools-page { margin:14px;padding:25px 18px 150px; }.hero-heading { font-size:56px; }.intro { font-size:15px; }.aside-note { display:none; }.tools-header h1 { font-size:37px; } }
@media(max-width:370px) { .topbar { flex-wrap:wrap; }.topbar .nav { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; }.hero-heading .greeting-char { transform:none!important; } }
.email-reward { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1000; width:min(340px,calc(100vw - 40px)); pointer-events:none; display:grid; justify-items:center; filter:drop-shadow(0 8px 18px #10090b40); }
.item-halo { width:164px; height:148px; position:relative; display:grid; place-items:center; }
.item-rays { position:absolute; width:150px; height:150px; background:repeating-conic-gradient(from 0deg,#e9c57570 0deg 8deg,transparent 8deg 30deg); mask-image:radial-gradient(circle,#000 10%,transparent 68%); animation:reward-rays 2600ms ease-out both; }
.earned-envelope { width:100px; height:75px; z-index:1; filter:drop-shadow(0 4px 0 #44241d); animation:item-get 700ms cubic-bezier(.16,1,.3,1) both,item-float 1500ms 700ms ease-in-out infinite alternate; }
.item-spark { position:absolute; width:8px; height:8px; background:#ffe9a6; box-shadow:0 -5px 0 -2px #ffe9a6,0 5px 0 -2px #ffe9a6,5px 0 0 -2px #ffe9a6,-5px 0 0 -2px #ffe9a6; animation:reward-spark 900ms ease-out both; }
.spark-one { top:27px; left:20px; animation-delay:120ms; }
.spark-two { top:43px; right:18px; animation-delay:240ms; }
.spark-three { bottom:18px; right:43px; animation-delay:360ms; }
.reward-plaque { width:100%; padding:21px; color:#fff0cf; background:#501326; border:2px solid #d9b875; box-shadow:4px 4px 0 #2f1119,inset 0 0 0 3px #501326,inset 0 0 0 4px #9c7149; text-align:center; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; animation:reward-label 420ms 180ms ease both; }
.reward-title { display:block; font-size:25px; line-height:1.3; font-weight:700; letter-spacing:-.025em; }
.reward-address { display:block; margin-top:8px; font-size:13px; line-height:1.5; color:#ead7b3; }
.email-reward.leaving { animation:reward-exit 240ms ease both; }
.copy-failed { pointer-events:auto; }
.copy-failed a { display:block; margin-top:8px; color:#fff0cf; user-select:all; font-size:14px; }
.dismiss-reward { display:block; margin:16px auto 0; padding:8px 16px; border:1px solid #d9b875; background:transparent; color:#fff0cf; }
@keyframes item-get { from { opacity:0; transform:translateY(36px) scale(.45); } 65% { opacity:1; transform:translateY(-8px) scale(1.08); } to { opacity:1; transform:translateY(-3px) scale(1); } }
@keyframes item-float { from { transform:translateY(-3px); } to { transform:translateY(-9px); } }
@keyframes reward-rays { from { opacity:0; transform:rotate(-20deg) scale(.6); } 20% { opacity:1; } to { opacity:.8; transform:rotate(30deg) scale(1.1); } }
@keyframes reward-spark { from { opacity:0; transform:translateY(10px) scale(0); } 45% { opacity:1; transform:translateY(-3px) scale(1); } to { opacity:0; transform:translateY(-14px) scale(.4); } }
@keyframes reward-label { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes reward-exit { to { opacity:0; transform:translate(-50%,-54%); } }
@media(prefers-reduced-motion:reduce) { .email-reward,.email-reward * { animation:none!important; transition:none!important; } .item-rays,.item-spark { display:none; } }


/* A miniature retro landscape: the whole key is the changing sky. */
.topbar .theme-toggle { width:64px; min-width:64px; height:36px; min-height:36px; padding:0; overflow:hidden; border:1px solid #c2919c; border-radius:2px; background:#eed8b7; box-shadow:2px 2px 0 #421121; margin-left:5px; transition:transform 140ms ease,box-shadow 140ms ease; }
.topbar .theme-toggle:hover { background:#eed8b7; transform:translateY(-1px); box-shadow:2px 3px 0 #421121; }
.topbar .theme-toggle:active { transform:translate(1px,1px); box-shadow:0 0 0 #421121; }
.landscape-toggle { display:block; width:62px; height:34px; overflow:hidden; }
.landscape-sky { fill:#eed8b7; transition:fill 340ms ease; }
.landscape-sun { fill:#ac5736; transform-origin:19px 13px; transition:transform 380ms cubic-bezier(.3,0,.2,1),opacity 250ms ease; }
.landscape-moon { fill:#fff0d5; opacity:0; transform:translate(-9px,26px) rotate(-25deg); transform-origin:44px 12px; transition:transform 380ms cubic-bezier(.3,0,.2,1),opacity 250ms ease; }
.landscape-stars { fill:#e5baa1; opacity:0; transition:opacity 200ms ease; }
.landscape-ridge { fill:#9c5860; transition:fill 340ms ease; }
.landscape-ground { fill:#681c32; }
.landscape-line { stroke:#d39488; stroke-width:1; opacity:.6; }
[data-theme=dark] .landscape-sky { fill:#30212d; }
[data-theme=dark] .landscape-sun { transform:translate(13px,25px) rotate(30deg); opacity:0; }
[data-theme=dark] .landscape-moon { transform:translate(0,0) rotate(0); opacity:1; }
[data-theme=dark] .landscape-stars { opacity:1; transition-delay:120ms; }
[data-theme=dark] .landscape-ridge { fill:#78404e; }
.mobile.topbar .theme-toggle { width:64px; min-width:64px; padding:0; }

.music-player__surface { padding:14px;border:2px solid var(--line);border-radius:0;background:var(--surface-bg-strong);box-shadow:5px 5px 0 var(--shadow);backdrop-filter:none; }
.retro-player-title { display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--maroon);color:var(--bar-ink);margin:-14px -14px 14px;padding:5px 7px 5px 10px; }
.retro-player-restore { color:inherit;background:none;border:0;padding:0;font:500 11px var(--font-sans);letter-spacing:.1em; }
.retro-player-restore:disabled { opacity:1;cursor:default; }
.retro-window-controls { display:flex;gap:4px; }
.retro-window-controls button { width:24px;height:24px;padding:0;border:1px solid;border-color:#dbb1ba #421121 #421121 #dbb1ba;border-radius:3px;background:var(--maroon);color:#fff3e6;font:700 20px/20px var(--font-sans);box-shadow:inset 1px 1px 0 #d294a4;cursor:pointer; }
.retro-window-controls button:last-child { background:var(--maroon); }
.retro-window-controls button:hover { filter:brightness(1.15); }
.retro-window-controls button:active { transform:translateY(1px);filter:brightness(.9); }
.music-player__compact > .music-player__desktop-action,.music-player__compact > .music-player__mobile-action { display:none!important; }
.retro-track-art { width:54px;height:54px;object-fit:cover;flex:0 0 54px; }
.retro-track-art[hidden] { display:none; }
.music-player__compact:has(.retro-track-art:not([hidden])) > .music-player__disc-button { display:none; }
.music-player__play-button,.music-player__icon-button,.music-player__text-button { border-radius:2px; }
.music-player__play-button { background:var(--maroon);color:var(--bar-ink);border:1px solid var(--line); }
.music-player.retro-minimized .music-player__panel,.music-player.retro-minimized .music-player__collapsed { display:none!important; }
.music-player.retro-minimized .retro-player-title { margin-bottom:-14px; }
.music-player.retro-closed { display:none!important; }
.music-player[data-mode=collapsed] .retro-player-title { display:none; }
.music-player__settings { transition:grid-template-rows 220ms ease,opacity 180ms ease; }
.topbar .nav-link[href="/home"] { order:0!important; }
.topbar .nav-link[href="/tools"] { order:1!important; }
.topbar .shell-music-nav-button { order:2!important; }
.topbar .theme-toggle { order:3!important; }
.home-body .brand-name { display:inline; }
.home-body .topbar { padding-inline:36px; }
@media(max-width:700px) { .home-body .topbar { padding-inline:12px; } }
.home-body .nav { gap:1px; }
body { transition:background-color 180ms ease,color 180ms ease; }
.topbar .brand .brand-name { color:var(--bar-ink); }
.tools-page { width:auto; }
.tools-header h1 { font-family:var(--font-sans);font-weight:700; }
.tool-card::after { display:none; }

/* Quiet desktop-window details, shared by navigation and player controls. */
:root { --control-radius:3px; --window-radius:5px; }
.topbar .nav,.topbar .shell-toolbar-actions {
 border:1px solid var(--line);border-radius:var(--window-radius);
 box-shadow:0 1px 0 #ffffff24 inset,0 2px 0 #330a1840;
}
.topbar .nav-link,.topbar .shell-music-nav-button {
 border-width:1px;border-radius:var(--control-radius);box-shadow:none;
}
.topbar .nav-link:hover,.topbar .shell-music-nav-button:hover {
 border-color:var(--line);box-shadow:none;
}
.topbar .nav-link[aria-current=page],.topbar .shell-music-nav-button.is-open {
 border:1px solid var(--line);background:var(--maroon);color:var(--bar-ink);box-shadow:none;
}
.topbar .shell-music-nav-button::after { display:none; }
.retro-home,.tools-page { border-radius:var(--window-radius);box-shadow:0 1px 0 #ffffff12 inset; }
.action-button,.contact-trigger,.tool-card { border-radius:var(--control-radius); }
.action-button,.tool-card { box-shadow:0 2px 0 var(--shadow); }
.action-button:hover { transform:translateY(-1px);box-shadow:0 3px 0 var(--shadow); }
.tool-card:hover { transform:translateY(-1px); }
.music-player__surface {
 border:1px solid var(--line);border-radius:var(--window-radius);
 box-shadow:0 4px 12px #100b0e24;
}
.retro-player-title { min-height:36px;border-bottom:1px solid var(--line);padding:5px 7px 5px 12px; }
.retro-player-restore { font-weight:600;letter-spacing:.045em; }
.retro-window-controls { gap:4px; }
.retro-window-controls button,.retro-window-controls button:last-child {
 width:26px;height:26px;border:1px solid #b6818d;border-radius:var(--control-radius);
 background:transparent;color:var(--bar-ink);box-shadow:none;font-weight:400;filter:none;
 transition:background-color 140ms ease,transform 140ms ease;
}
.retro-window-controls button:hover { background:#ffffff18;filter:none; }
.retro-window-controls button:active { background:#00000020;transform:translateY(1px);filter:none; }
.music-player__icon-button,.music-player__text-button,.music-player__disc-button {
 border:1px solid var(--line);border-radius:var(--control-radius);background:transparent;color:var(--ink);box-shadow:none;
 transition:background-color 140ms ease,transform 140ms ease;
}
.music-player__play-button {
 border:1px solid var(--line);border-radius:var(--control-radius);background:var(--maroon);color:var(--bar-ink);box-shadow:none;
 transition:background-color 140ms ease,transform 140ms ease;
}
.music-player__icon-button:hover,.music-player__text-button:hover,.music-player__disc-button:hover { background:var(--surface); }
.music-player__play-button:hover { background:#8b2942;color:var(--bar-ink); }
.music-player__icon-button:active,.music-player__text-button:active,.music-player__disc-button:active,.music-player__play-button:active { transform:translateY(1px); }
.music-player__playlist input { border-radius:var(--control-radius); }
/* Keep the introduction attached to the name and on one responsive line. */
.retro-home { container-type:inline-size; }
.retro-home .hero-heading { margin-bottom:12px; }
.retro-home .intro {
 margin-top:0;
 max-width:none;
 white-space:nowrap;
 font-size:min(17px,3.7cqi);
 line-height:1.5;
}
.music-player__eyebrow { display:none; }

/* Separate the introduction from its actions. */
.retro-home .home-actions { margin-top:68px; gap:24px; }
@media(max-width:700px) { .retro-home .home-actions { margin-top:64px; } }

.retro-window-controls button { display:grid;place-items:center;padding:0;line-height:1; }
.retro-window-controls button svg { display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square; }

.music-player:not(.has-settings-open) .music-player__full-controls { display:none; }
.music-player__mini-controls { position:relative;padding-inline:38px; }
.music-player__mini-controls [data-action="toggleSettings"] { position:absolute;right:0;top:50%;transform:translateY(-50%); }
.music-player__mini-controls [data-action="toggleSettings"]:active { transform:translateY(calc(-50% + 1px)); }