:root {
  font-family: "MS PGothic", "Yu Gothic", sans-serif;
  color: #2b211b;
  background: #1d2029;
  --paper: #fffdf1;
  --link: #0000bb;
  --wood: #7a4d31;
  --sky-top: #07132f;
  --sky-mid: #142e5e;
  --sky-bottom: #4c6080;
  --orb: #f4d991;
  --orb-glow: rgb(255 225 151 / .5);
}

html[data-sky="dawn"] { --sky-top: #3d3151; --sky-mid: #a05c68; --sky-bottom: #efb47d; --orb: #ffd1a1; --orb-glow: rgb(255 190 140 / .45); }
html[data-sky="day"] { --sky-top: #377eb9; --sky-mid: #69a9dc; --sky-bottom: #c8e2ed; --orb: #fff2a4; --orb-glow: rgb(255 245 181 / .58); }
html[data-sky="sunset"] { --sky-top: #30385d; --sky-mid: #a24f64; --sky-bottom: #f1a262; --orb: #ffcb7d; --orb-glow: rgb(255 164 92 / .55); }
html[data-sky="dusk"] { --sky-top: #172344; --sky-mid: #51496f; --sky-bottom: #a67883; --orb: #e4d7b0; --orb-glow: rgb(225 215 185 / .42); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.radio-guide-open { overflow: hidden; overscroll-behavior: none; }
html.radio-guide-open body { overflow: hidden; overscroll-behavior: none; }
body {
  min-height: 100vh;
  margin: 0;
  padding: 0 12px 45px;
  overflow-x: hidden;
  background-color: #232733;
  background-image: radial-gradient(#4a4f5e .7px, transparent .7px);
  background-size: 5px 5px;
}
a { color: var(--link); }
a:visited { color: #551a8b; }
h2 { margin: 0; font-size: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.section-anchor { position: absolute; top: 0; }

.home-shell {
  width: min(100%, 1160px);
  margin: auto;
  overflow: hidden;
  border: 1px solid #09090c;
  background: #281914;
  box-shadow: 7px 8px 0 rgb(0 0 0 / .35);
}

.window-area {
  --frame-side: 28px;
  --frame-top: 28px;
  --frame-bottom: 36px;
  --frame-face: 16px;
  --frame-foot: 24px;
  --reveal-top: 12px;
  --reveal-side: 12px;
  --reveal-bottom: 12px;
  position: relative;
  padding: var(--frame-top) var(--frame-side) var(--frame-bottom);
  background-color: #482b1b;
  background-image: linear-gradient(180deg, rgb(16 7 3 / .2), rgb(16 7 3 / .3)), url("./assets/home/window/walnut-frame-texture.webp");
  background-size: 100% 100%;
  box-shadow: inset 0 1px rgb(221 168 103 / .45), inset 0 3px 3px rgb(20 9 4 / .32);
}
/* The casing boards meet diagonally; grain follows each board's length. */
.window-area::before, .window-area::after {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: var(--frame-side);
  background-color: #482b1b;
  background-image: linear-gradient(90deg, rgb(16 7 3 / .16), rgb(16 7 3 / .24)), url("./assets/home/window/walnut-frame-vertical.webp");
  background-size: 100% 100%;
  box-shadow: inset 1px 0 rgb(221 168 103 / .35), inset -1px 0 rgb(18 8 3 / .45);
  content: "";
  pointer-events: none;
}
.window-area::before {
  left: 0;
  clip-path: polygon(0 0, var(--frame-face) var(--frame-face), 100% var(--frame-top), 100% calc(100% - var(--frame-bottom)), var(--frame-face) calc(100% - var(--frame-foot)), 0 100%);
}
.window-area::after {
  right: 0;
  background-image: linear-gradient(90deg, rgb(16 7 3 / .42), rgb(16 7 3 / .24)), url("./assets/home/window/walnut-frame-vertical.webp");
  box-shadow: inset -1px 0 rgb(221 168 103 / .2), inset 1px 0 rgb(18 8 3 / .5);
  clip-path: polygon(100% 0, calc(100% - var(--frame-face)) var(--frame-face), 0 var(--frame-top), 0 calc(100% - var(--frame-bottom)), calc(100% - var(--frame-face)) calc(100% - var(--frame-foot)), 100% 100%);
}
.window-frame { position: relative; }
/* Guide: front-facing outer ring, then four joined planes receding to the sky. */
.window-frame::before {
  position: absolute;
  z-index: 2;
  inset: calc(-1 * var(--reveal-top)) calc(-1 * var(--reveal-side)) calc(-1 * var(--reveal-bottom));
  border-style: solid;
  border-width: var(--reveal-top) var(--reveal-side) var(--reveal-bottom);
  border-color: rgb(17 8 3 / .64) rgb(17 8 3 / .62) rgb(229 174 105 / .2) rgb(24 12 5 / .48);
  content: "";
  pointer-events: none;
}
/* Bottom front board belongs to the same outer ring as the upright boards. */
.window-sill {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--frame-foot);
  clip-path: polygon(var(--frame-face) 0, calc(100% - var(--frame-face)) 0, 100% 100%, 0 100%);
  background-color: #482b1b;
  background-image: linear-gradient(180deg, rgb(16 7 3 / .22), rgb(16 7 3 / .32)), url("./assets/home/window/walnut-frame-texture.webp");
  background-size: 100% 100%, 100% auto;
  box-shadow: inset 0 1px rgb(227 174 109 / .34), inset 0 -1px rgb(18 8 3 / .7);
  pointer-events: none;
}
.sky {
  position: relative;
  min-height: 232px;
  overflow: hidden;
  border: 1px solid #251b13;
  box-shadow: inset 0 6px 8px rgb(0 0 0 / .38), inset 3px 0 5px rgb(0 0 0 / .24);
  background: linear-gradient(var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-bottom) 100%);
  transition: background 1.2s ease;
}
.stars {
  position: absolute;
  inset: 0;
  opacity: .9;
  background:
    radial-gradient(circle at 8% 18%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 20% 64%, #cde3ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 37% 26%, #fff6c4 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 61% 17%, #d6e8ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 72% 51%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 91% 25%, #cce3ff 0 1.2px, transparent 1.8px);
  transition: opacity .8s ease;
}
html[data-sky="day"] .stars, html[data-sky="sunset"] .stars { opacity: .06; }
html[data-sky="dawn"] .stars { opacity: .3; }
.celestial { position: absolute; left: var(--orb-x, 50%); top: var(--orb-y, 14%); width: clamp(26px, 3.6vw, 41px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.sun { border-radius: 50%; background: var(--orb); box-shadow: 0 0 18px var(--orb-glow); opacity: 0; }
/* Lift the moon's whole arc from 14–53% to 12–38%, without flattening its peak. */
.moon { top: calc(12% + (var(--orb-y, 14%) - 14%) * 2 / 3); border-radius: 50%; background: #f4e4b8; box-shadow: 0 0 14px rgb(244 228 184 / .25); opacity: var(--orb-opacity, 1); }
.moon::after { content: ""; position: absolute; inset: 24% 48% 50% 24%; border-radius: 50%; background: rgb(170 155 124 / .22); box-shadow: 9px 10px 0 2px rgb(170 155 124 / .14); }
html[data-celestial="sun"] .sun { opacity: var(--orb-opacity, 1); }
html[data-celestial="sun"] .moon { opacity: 0; }
html[data-celestial="moon"] .sun { opacity: 0; }
.cloud { position: absolute; width: 116px; height: 13px; border-radius: 50%; background: rgb(255 255 255 / .3); filter: blur(2px); }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.cloud::before { left: 20px; width: 38px; height: 25px; }.cloud::after { right: 18px; width: 50px; height: 31px; }
.cloud-one { top: 64px; left: 11%; }.cloud-two { top: 116px; right: 20%; transform: scale(.72); opacity: .55; }
.horizon { position: absolute; inset: auto 0 0; height: 78px; background: linear-gradient(transparent, rgb(7 12 26 / .55)); }
/* The 2176 × 270 scenery matches the largest 1088 × 135 desktop opening at 2×.
   Smaller openings use the same centered crop for both registered layers. */
.town { position: absolute; inset: auto 0 0; height: 135px; overflow: hidden; pointer-events: none; }
.town img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.town .town-base { filter: brightness(var(--town-brightness, .42)) saturate(.85); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32px); mask-image: linear-gradient(to bottom, transparent, #000 32px); }
.town-lights { opacity: var(--town-lights, 1); }
.site-heading { position: relative; z-index: 3; width: min(88%, 760px); margin: auto; padding: 43px 15px 42px; color: #fff; text-align: center; }
.site-heading p { position: relative; top: 10px; margin: 0; color: #dce7ff; font: bold .68rem Arial, sans-serif; letter-spacing: .42em; text-indent: .42em; }
.site-heading h1 { margin: 5px 0 0; font: bold clamp(3rem, 7vw, 5.1rem)/1 "Times New Roman", "Yu Mincho", serif; letter-spacing: .17em; text-indent: .17em; text-shadow: 2px 2px 0 #09142e, 0 0 9px #8db4ff; }
.clock { position: absolute; z-index: 4; bottom: calc(var(--frame-foot) + 6px); left: 35px; min-width: 82px; padding: 3px 7px 2px; border: 4px solid #62645f; border-color: #747670 #50534e #454843 #656862; border-radius: 3px; color: #a6ef7a; background: linear-gradient(#1f2923 0 14%, #101915 25%, #08110c); font: bold .85rem "Courier New", monospace; letter-spacing: .04em; text-align: center; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #1d160f, 1px 2px 1px rgb(25 12 5 / .65), 3px 3px 4px rgb(24 12 8 / .34); }
.menu-toggle { display: none; }
.main-nav { position: absolute; z-index: 6; bottom: 55px; left: 50%; display: flex; align-items: center; justify-content: center; width: max-content; max-width: calc(100% - 180px); transform: translateX(-50%); }
.main-nav a { position: relative; padding: 4px 10px; color: rgb(238 244 255 / .8); font: bold .68rem "Arial Narrow", Arial, sans-serif; letter-spacing: .08em; text-decoration: none; text-shadow: 1px 1px 2px rgb(0 0 0 / .8); transition: color .14s ease, text-shadow .14s ease; }
.main-nav a + a::before { content: "|"; position: absolute; left: -2px; color: rgb(224 232 247 / .38); }
.main-nav a:visited { color: rgb(238 244 255 / .8); }
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; text-shadow: 0 0 7px rgb(207 226 255 / .8); }
.main-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .55); text-underline-offset: 4px; }
.main-nav a:focus-visible { border-radius: 2px; outline: 1px solid rgb(255 255 255 / .9); outline-offset: 1px; }

/* Light sits above the ambient shade so its spill remains visible on exposed wood. */
.desk { --desk-light-width: 500px; --desk-light-height: 310px; --desk-light-x: 120px; --desk-light-y: 115px; position: relative; overflow: hidden; padding: 1px 26px 0; background-color: #372014; background-image: radial-gradient(ellipse var(--desk-light-width) var(--desk-light-height) at var(--desk-light-x) var(--desk-light-y), rgb(255 201 112 / .32), rgb(255 186 85 / .17) 42%, transparent 88%), radial-gradient(ellipse 240px 310px at 0 75px, rgb(7 5 3 / .65), rgb(10 6 3 / .3) 38%, transparent 78%), linear-gradient(115deg, transparent 18%, rgb(12 8 5 / .13) 45%, rgb(9 7 5 / .34) 100%), url("./assets/home/desk/walnut-desktop.webp"); background-size: auto, auto, auto, max(100%, 960px) auto; background-repeat: no-repeat, no-repeat, no-repeat, repeat-y; box-shadow: inset 0 12px 20px rgb(31 14 9 / .52), inset 0 -11px 20px rgb(32 15 10 / .34); }
.desk-stage { position: relative; min-height: 1190px; }
.desk-stage:has(.radio-player-panel:not([hidden])) { min-height: 1530px; }
.clipboard { position: absolute; z-index: 4; top: 16px; left: 2%; width: 49%; padding: 28px 23px 16px; border: 8px solid transparent; isolation: isolate; }
.clipboard::before { position: absolute; z-index: -1; inset: 0; box-sizing: border-box; border: 8px solid #5d4534; border-radius: 4px; background: #fffdf4; box-shadow: inset 0 0 0 9px #d4c6aa, 2px 3px 2px rgb(25 15 8 / .55), 7px 9px 10px rgb(20 12 7 / .4); content: ""; pointer-events: none; transform: rotate(-.35deg); }
/* Static light falls off toward the far/right edge; live text stays above it. */
.clipboard::after { position: absolute; z-index: 0; inset: 0; border-radius: 4px; background: radial-gradient(ellipse at 0% 20%, rgb(255 241 184 / .74), rgb(255 230 160 / .25) 38%, transparent 72%), linear-gradient(110deg, transparent 24%, rgb(100 53 30 / .10) 52%, rgb(87 43 27 / .27)), linear-gradient(180deg, transparent 58%, rgb(92 42 23 / .10)); content: ""; pointer-events: none; }
.clipboard h2, .memo-list, .memo-note { position: relative; z-index: 1; }
.memo-lamp-mount { position: absolute; z-index: 3; top: 12px; left: -26px; width: 8px; height: 26px; border: 1px solid #5e4b32; border-radius: 2px; background: linear-gradient(90deg, #302419, #655038 55%, #382b1e); box-shadow: 1px 2px 2px rgb(12 7 3 / .65); pointer-events: none; }
.memo-lamp-mount::before { position: absolute; top: 3px; left: 2px; width: 2px; height: 2px; border-radius: 50%; background: #ac936e; box-shadow: 0 16px #ac936e; content: ""; }
.memo-lamp { position: absolute; z-index: 4; top: -25px; left: -78px; display: block; width: 96px; height: 96px; max-width: none; transform: rotate(-20deg); transform-origin: 40% 20%; filter: drop-shadow(2px 4px 5px rgb(20 11 5 / .32)); pointer-events: none; user-select: none; }
.clip { position: absolute; z-index: 3; top: 0; left: 17px; width: 18px; height: 43px; border: 3px solid; border-color: #ded8c7 #77766d #9d9788 #f4e5bd; border-radius: 10px; background: transparent; box-shadow: inset 1px 0 1px rgb(82 63 41 / .55), inset -1px 0 rgb(255 240 199 / .65); filter: drop-shadow(1px .75px .35px rgb(54 28 15 / .68)); transform: rotate(-16deg); }
/* Narrow specular rim follows the existing wire without filling its opening. */
.clip::before { position: absolute; inset: -2px; border: 1px solid transparent; border-top-color: #fff8e3; border-left-color: #fff0c8; border-radius: inherit; content: ""; pointer-events: none; }
.clip::after { position: absolute; top: 5px; left: 4px; width: 7px; height: 28px; border: 1px solid; border-color: #e4dcc5 #77776d #aaa18b #fff0c8; border-radius: 6px; box-shadow: inset 1px 0 rgb(255 243 209 / .72), 1px 1px 1px rgb(67 40 23 / .25); content: ""; }
.clipboard h2 { margin: 0 7px 9px; padding-bottom: 5px; border-bottom: 3px double #765f59; color: #632a36; font: bold 1.05rem "Arial Narrow", Arial, sans-serif; letter-spacing: .08em; text-align: center; }
.memo-list { margin: 0 7px; padding: 0; border-top: 1px solid #b7b0a4; list-style: none; }
.memo-list li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 7px; align-items: baseline; padding: 5px 3px; border-bottom: 1px dotted #aaa095; font-size: .74rem; line-height: 1.35; }
.category { padding: 2px 4px 1px; color: #fff; font: bold .58rem Arial, sans-serif; text-align: center; }
.category.site { background: #755165; }.category.bbs { background: #315d72; }.category.diary { background: #6a6330; }.category.lab { background: #4f6248; }
.memo-note { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 7px; align-items: center; margin: 0 7px; padding: 5px 3px; color: #4f4941; font-size: .67rem; line-height: 1.45; }
.memo-note b { color: #753544; font: bold .58rem Arial, sans-serif; letter-spacing: .04em; text-align: center; }

.about-object { position: absolute; z-index: 6; top: 4px; left: 68%; width: 22%; min-height: 258px; text-align: center; }
.about-trigger { display: grid; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; list-style: none; }
.about-trigger::-webkit-details-marker { display: none; }
.object-art { display: grid; width: 150px; height: 160px; margin: auto; place-items: center; border: 5px double #56483d; border-radius: 50% 43% 48% 45%; color: #f2d99b; background: radial-gradient(circle at 38% 30%, var(--object-light, #6e805f), var(--object-dark, #18221c) 70%); box-shadow: inset 0 0 0 10px rgb(255 255 255 / .06), 6px 8px 2px rgb(31 15 8 / .36); transform: rotate(-2deg); transition: transform .18s ease; }
.object-art span { font: bold 3.6rem/1 Georgia, serif; text-shadow: 3px 3px #1f291f; }
.object-tag { position: relative; display: inline-grid; justify-self: center; gap: 2px; max-width: 220px; padding: 7px 10px 6px; border: 1px solid transparent; isolation: isolate; color: #3b3026; }
.object-tag::before { position: absolute; z-index: -1; inset: 0; box-sizing: border-box; border: 1px solid #a79573; background: #efe1b8; box-shadow: 3px 4px 0 rgb(0 0 0 / .24); content: ""; pointer-events: none; transform: rotate(1deg); }
.object-tag b { color: #752f3c; font-size: .7rem; }.object-tag small { font-size: .59rem; }
.about-pop { position: absolute; z-index: 10; top: 34px; right: calc(100% - 22px); width: 245px; padding: 13px 15px; border: 2px solid #4b3426; border-radius: 48%; color: #2d211b; background: #fff9df; box-shadow: 4px 5px 0 rgb(30 15 9 / .27); font-size: .7rem; line-height: 1.55; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease; }
.about-pop::after { content: ""; position: absolute; right: -13px; bottom: 25px; width: 20px; height: 20px; border-right: 2px solid #4b3426; border-bottom: 2px solid #4b3426; background: #fff9df; transform: rotate(-38deg); }
.about-pop p { margin: 0 0 5px; }.about-pop a { position: relative; z-index: 1; font-weight: bold; }
.about-object:hover .object-art, .about-object:focus-within .object-art { transform: translateY(-3px) rotate(-2deg); }
.about-object:hover .about-pop, .about-object:focus-within .about-pop, .about-object[open] .about-pop { opacity: 1; pointer-events: auto; transform: translateY(0); }

.notebook { --notebook-fold: 60%; position: absolute; z-index: 6; top: 218px; left: 57%; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); width: 42%; isolation: isolate; }
.notebook::before { position: absolute; z-index: -1; inset: -6px -6px -9px; border: 2px solid #3b261a; border-top-color: #8d6945; border-left-color: #745238; border-radius: 12px; background: linear-gradient(100deg, #785239, #49301f 60%, #68472f); box-shadow: inset 0 0 0 1px rgb(223 182 125 / .26), 1px 3px 3px rgb(21 11 5 / .7), 5px 7px 9px rgb(21 11 5 / .38); content: ""; pointer-events: none; }
.diary-page { position: relative; min-width: 0; min-height: 280px; border: 1px solid #c6b699; background-color: #f3e9d5; background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgb(119 141 143 / .26) 27px 28px), linear-gradient(rgb(255 250 236 / .38), rgb(243 233 213 / .28)), url("./assets/home/notebook/ivory-paper.webp"); background-size: auto, auto, 384px 384px; background-origin: content-box, border-box, border-box; background-clip: content-box, border-box, border-box; }
.diary-left { z-index: 2; padding: 14px 27px 18px 18px; border-radius: 9px 4px 5px 9px; box-shadow: inset -10px 0 12px rgb(82 53 28 / .13), inset 2px 1px 3px rgb(255 255 244 / .8), 0 2px #c2ad8c, 0 4px #e6d8be, 0 5px #8e7657; }
.diary-right { padding: 19px 16px 18px 22px; border-radius: 4px 9px 9px 5px; box-shadow: inset 10px 0 12px rgb(82 53 28 / .15), inset -2px 1px 3px rgb(255 255 244 / .65), 0 2px #c2ad8c, 0 4px #e6d8be, 0 5px #8e7657; }
.diary-right p { margin: 9px 0 0; color: #ad9473; font: italic 1.1rem Georgia, serif; }.diary-right i { display: none; }
.notebook-spine { position: absolute; z-index: 5; top: 12px; bottom: 10px; left: calc(var(--notebook-fold) - 18px); display: flex; width: 36px; flex-direction: column; justify-content: space-between; pointer-events: none; }
.notebook-spine i { display: block; flex: 0 0 22px; width: 36px; background: url("./assets/home/notebook/brass-ring.svg") center / contain no-repeat; }
.notebook .section-kicker { margin: 0 0 12px; color: #753544; font: bold clamp(.8rem, 1.4vw, 1.12rem)/1.2 Georgia, "Times New Roman", serif; letter-spacing: .035em; }
.diary-left > p:not(.section-kicker) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.section-kicker { margin: 0 0 18px; color: #753544; font: bold .78rem "Arial Narrow", Arial, sans-serif; letter-spacing: .14em; }
.diary-left time { display: block; margin-bottom: 10px; text-align: right; color: #766d63; font: .67rem "Courier New", monospace; }
.diary-left h2 { display: -webkit-box; overflow: hidden; margin: 0 0 12px; overflow-wrap: anywhere; font: bold 1rem/1.6 "Yu Mincho", serif; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.diary-left h2 a { color: #3c2a25; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.diary-left p { margin: 0 0 15px; font-size: .74rem; line-height: 1.9; }.read-more { float: right; font-size: .7rem; }
.diary-tabs { position: absolute; z-index: 1; top: 43px; right: calc(100% - 9px); display: grid; justify-items: end; gap: 10px; width: 38px; }
.diary-tabs button { position: relative; overflow: hidden; width: 38px; height: 44px; padding: 0; border: 1px solid rgb(88 68 31 / .42); border-right: 0; border-radius: 3px 0 0 3px; background: #e4c66d; box-shadow: 2px 3px 0 rgb(42 24 14 / .28), inset 0 1px rgb(255 255 255 / .34); cursor: pointer; transform: rotate(-1deg); transition: transform .14s ease, box-shadow .14s ease; }
.diary-tabs button::before { position: absolute; inset: 0; background: #fff; content: ""; opacity: 0; pointer-events: none; transition: opacity .14s ease; }
.diary-tabs button::after { position: absolute; z-index: 1; top: 9px; left: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgb(83 62 29 / .38); box-shadow: inset 1px 1px rgb(255 255 255 / .25); content: ""; }
.diary-tabs button:nth-child(2) { background: #dba994; transform: rotate(.5deg); }
.diary-tabs button:nth-child(3) { background: #9dc7b1; transform: rotate(-.3deg); }
.diary-tabs button:hover { transform: translateX(-3px); }
.diary-tabs button:hover::before { opacity: .06; }
.diary-tabs button[aria-selected="true"] { z-index: 2; box-shadow: 5px 5px 2px rgb(42 24 14 / .34), inset 0 1px rgb(255 255 255 / .5); transform: translateX(-6px); }
.diary-tabs button[aria-selected="true"]::before { opacity: .15; }
.diary-tabs button:focus-visible { outline: 2px solid #142d6b; outline-offset: 3px; }

.album { position: absolute; z-index: 5; top: 250px; left: 3%; width: 52%; padding: 18px 20px 22px; border: 7px solid transparent; isolation: isolate; color: #f6efda; }
/* Only the decorative mat is tilted; live text stays on the pixel grid. */
.album::before { position: absolute; z-index: -1; inset: 0; box-sizing: border-box; border: 2px solid #17261d; border-top-color: #526049; border-left-color: #42513b; border-radius: 4px;
  background-color: #203628;
  background-image: radial-gradient(ellipse at 0 0, rgb(238 192 102 / .22), transparent 65%), linear-gradient(115deg, transparent 20%, rgb(3 12 8 / .16) 58%, rgb(3 10 7 / .38)), linear-gradient(rgb(17 35 25 / .55), rgb(12 28 20 / .68)), url("./assets/home/desk/forest-leather-mat.webp");
  background-size: auto, auto, auto, 384px 384px;
  box-shadow: inset 0 0 0 1px rgb(173 170 108 / .12), inset 0 -5px 8px rgb(4 12 8 / .23), 0 2px 0 #101e16, 1px 3px 3px rgb(12 8 4 / .7), 5px 8px 12px rgb(13 8 4 / .48);
  content: ""; pointer-events: none; transform: rotate(-.18deg); }
.album::after { position: absolute; z-index: -1; inset: 10px; border: 1px solid rgb(164 144 86 / .48); border-radius: 2px; box-shadow: 0 1px 0 rgb(0 0 0 / .24), inset 0 1px 0 rgb(0 0 0 / .16); content: ""; pointer-events: none; transform: rotate(-.18deg); }
.album-studs { position: absolute; inset: 0; pointer-events: none; transform: rotate(-.18deg); }
.album-studs i { position: absolute; width: 9px; height: 9px; border: 1px solid #514027; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #e0c78f, #b49858 35%, #7d633b 68%, #4d3b24); box-shadow: inset 0 1px 1px rgb(255 239 184 / .35), 0 1px 1px #0b140f, 1px 2px 2px rgb(0 0 0 / .35); }
.album-studs i:nth-child(1) { top: 6px; left: 6px; }
.album-studs i:nth-child(2) { top: 6px; right: 6px; }
.album-studs i:nth-child(3) { bottom: 6px; left: 6px; }
.album-studs i:nth-child(4) { bottom: 6px; right: 6px; }
.album header { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; margin-bottom: 13px; border-bottom: 1px solid rgb(223 222 182 / .28); }
.album h2 { color: #f6efda; font: bold 1.08rem/1.2 Georgia, "Times New Roman", serif; letter-spacing: .055em; text-shadow: 0 1px 1px rgb(0 0 0 / .45); }.album header a { color: #f1ead6; font-size: .68rem; }
.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.photos a { --photo-tilt: -.7deg; position: relative; display: grid; gap: 4px; padding: 7px 7px 10px; isolation: isolate; color: #25201d; text-align: center; text-decoration: none; }
.photos a::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, #fffdf4, #eee9dc); box-shadow: 1px 2px 2px rgb(0 0 0 / .4), 4px 5px 5px rgb(0 0 0 / .35); content: ""; pointer-events: none; transform: rotate(var(--photo-tilt)); }
.photos a:nth-child(2) { --photo-tilt: .6deg; }.photos a:nth-child(3) { --photo-tilt: -.2deg; }.photos a:nth-child(4) { --photo-tilt: .45deg; }
.photos img { display: block; width: 100%; aspect-ratio: 1; border: 1px solid #b6aa96; object-fit: cover; background: #1f2c3a; transform: rotate(var(--photo-tilt)); }
.photos span { display: grid; gap: 2px; min-height: 33px; align-content: center; }.photos b { font-size: .64rem; }.photos small { color: #705a4f; font-size: .56rem; }

.radio-object { position: absolute; z-index: 4; top: 520px; left: 7%; width: 86%; padding: 13px; border: 2px solid #171918; border-radius: 14px; color: #deddd4; background: linear-gradient(100deg, #171918, #343735 47%, #1a1c1b); box-shadow: inset 0 0 0 2px #555752, inset 0 -13px 25px rgb(0 0 0 / .45), 8px 9px 0 rgb(31 15 9 / .38); font-family: "Arial Narrow", Arial, sans-serif; }
.radio-object::before, .radio-object::after { position: absolute; top: 11px; width: 7px; height: 7px; border: 1px solid #0b0c0c; border-radius: 50%; background: #777973; box-shadow: inset 1px 1px #b1b2aa; content: ""; }.radio-object::before { left: 11px; }.radio-object::after { right: 11px; }
.radio-head { position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: end; padding: 8px 17px 11px; border-bottom: 1px solid #070807; box-shadow: 0 1px #4f514d; }
.radio-head p { margin: 0 0 2px; color: #8f928d; font: bold .5rem "Courier New", monospace; letter-spacing: .18em; }
.radio-head h2 { color: #e6e5dd; font: bold 1.05rem "Arial Narrow", Arial, sans-serif; letter-spacing: .16em; text-shadow: 0 -1px #000; }
.radio-brand { color: #747873; font: .48rem "Courier New", monospace; letter-spacing: .1em; }
.radio-cabinet { position: relative; display: grid; min-width: 0; gap: 11px; padding: 14px; border: 2px inset #4b4d49; border-radius: 4px; background-color: #242725; background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgb(255 255 255 / .012) 4px 5px); box-shadow: inset 0 0 18px rgb(0 0 0 / .55); }
.radio-tuner { display: grid; grid-template-columns: 82px minmax(0, 1fr) 82px; gap: 9px; align-items: stretch; }
.radio-display { min-width: 0; min-height: 210px; padding: 12px 15px; border: 4px inset #505850; border-radius: 2px; color: #bce6ad; background-color: #0b160f; background-image: repeating-linear-gradient(to bottom, rgb(255 255 255 / .028) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 17px #000, 0 0 0 1px #050706; text-shadow: 0 0 5px rgb(143 224 124 / .28); }
.radio-display-topline { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #8bb281; font: bold .58rem "Courier New", monospace; letter-spacing: .1em; }
.radio-display-topline [data-radio-signal] { color: #72816f; text-align: right; }
.radio-display-label { margin: 0 0 7px; color: #829c7e; font: .54rem "Courier New", monospace; letter-spacing: .18em; }
.radio-display h3 { overflow-wrap: anywhere; margin: 0; color: #d6f3c9; font: bold 1.05rem/1.25 "MS PGothic", sans-serif; }
.radio-artist { margin: 4px 0 9px; color: #a5c99d; font-size: .68rem; line-height: 1.4; }
.radio-program, .radio-episode { margin: 3px 0; color: #84a980; font: .59rem/1.35 "Courier New", monospace; }
.radio-display blockquote { overflow-x: auto; overflow-y: hidden; margin: 9px 0 2px; padding: 8px 0 4px; border-top: 1px dashed #46604a; color: #c5d7bb; font: .7rem/1.55 "MS PGothic", sans-serif; white-space: nowrap; scrollbar-color: #46604a #0b160f; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.radio-display blockquote:focus-visible { outline: 1px solid #8bb281; outline-offset: 2px; }
.radio-youtube-link { display: inline-block; margin-top: 7px; color: #d7ebcb; font-size: .61rem; }.radio-youtube-link:visited { color: #b7c9ad; }.radio-youtube-link[hidden] { display: none; }
.radio-cabinet button { min-height: 44px; padding: 8px 12px; border: 2px outset #adaea8; border-radius: 2px; color: #202220; background: linear-gradient(#c2c3bd, #898b86); box-shadow: 1px 2px 2px rgb(0 0 0 / .4); font: bold .6rem "Arial Narrow", Arial, sans-serif; letter-spacing: .06em; cursor: pointer; }
.radio-cabinet button:hover:not(:disabled) { filter: brightness(1.08); }.radio-cabinet button:active:not(:disabled), .radio-cabinet button[aria-pressed="true"] { border-style: inset; color: #d9efd1; background: #344039; box-shadow: inset 2px 2px 4px rgb(0 0 0 / .45); }
.radio-cabinet button:focus-visible { outline: 2px solid #e9e1b5; outline-offset: 2px; }.radio-cabinet button:disabled { color: #575954; background: #747671; box-shadow: none; cursor: default; opacity: .65; }
.radio-tuner > button { padding: 6px; color: #d8d8d0; background: linear-gradient(#555854, #303330); writing-mode: horizontal-tb; }
.radio-screen-control { display: flex; justify-content: center; }.radio-screen-control button { min-width: 148px; }
.radio-player-panel { width: min(100%, 640px); min-height: 270px; margin: 0 auto; border: 4px inset #66675f; background: #050505; }.radio-player-panel[hidden] { display: none; }
.radio-player { display: grid; width: 100%; min-height: 270px; aspect-ratio: 16 / 9; place-items: center; }.radio-player iframe { display: block; width: 100%; height: 100%; min-height: 270px; border: 0; }
.radio-screen-idle { display: grid; gap: 8px; color: #718073; font: .62rem "Courier New", monospace; letter-spacing: .13em; place-items: center; text-align: center; text-shadow: 0 0 5px rgb(122 171 124 / .22); }.radio-screen-idle strong { color: #9aab9b; font-size: .72rem; }
.radio-transport { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.radio-transport [data-radio-play] { color: #18321f; background: linear-gradient(#cbd3c4, #9eaa98); }
.radio-aux-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 2px; border-top: 1px solid #0e100f; box-shadow: 0 -1px #454844; }
.radio-status { min-height: 1.35em; margin: 0; color: #bbb9aa; font: .61rem/1.35 "MS PGothic", sans-serif; text-align: center; }
.radio-guide { width: min(920px, calc(100vw - 40px)); max-width: none; max-height: min(82vh, 760px); margin: auto; padding: 0; border: 1px solid #403b32; color: #26231e; background: #e7dfcb; box-shadow: 0 18px 55px rgb(0 0 0 / .58), inset 0 0 24px rgb(88 72 46 / .17); overflow: hidden; }
.radio-guide::backdrop { background: rgb(10 11 10 / .72); backdrop-filter: blur(2px); touch-action: none; }
.radio-guide-paper { display: grid; max-height: min(82vh, 760px); grid-template-rows: auto auto minmax(0, 1fr) auto; background-color: #e7dfcb; background-image: repeating-linear-gradient(0deg, transparent 0 21px, rgb(91 78 58 / .035) 21px 22px), radial-gradient(circle at 18% 8%, rgb(255 255 255 / .32), transparent 34%); }
.radio-guide-heading { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 13px 15px 10px; border-bottom: 3px double #6b6254; }
.radio-guide-heading h3 { margin: 2px 0 0; font: bold 1rem/1.15 "Times New Roman", "Yu Mincho", serif; letter-spacing: .08em; }
.radio-guide-kicker { color: #6b6459; font: .5rem "Courier New", monospace; letter-spacing: .12em; }
.radio-guide-close { min-width: 88px; min-height: 44px; padding: 7px 10px; border: 1px solid #6c6458; color: #322f2a; background: #d7cfbc; box-shadow: 1px 1px 0 #fff inset, 2px 2px 0 rgb(65 56 43 / .18); font: bold .58rem "Arial Narrow", Arial, sans-serif; cursor: pointer; }
.radio-guide-close:hover, .radio-guide-close:focus-visible { background: #c8bea8; outline: 2px solid #465d4a; outline-offset: 2px; }
.radio-guide-note { margin: 0; padding: 8px 15px; border-bottom: 1px solid #9b9384; color: #575046; font: .61rem/1.45 "MS PGothic", sans-serif; }
.radio-guide-scroll { width: 100%; min-width: 0; max-width: 100%; overflow: auto; overscroll-behavior: contain; }
.radio-guide-scroll:focus-visible { outline: 2px solid #465d4a; outline-offset: -3px; }
.radio-guide-table { width: 100%; min-width: 610px; border-collapse: collapse; table-layout: fixed; font: .61rem/1.35 "MS PGothic", sans-serif; }
.radio-guide-table th, .radio-guide-table td { padding: 7px 8px; border: 1px solid #9b9384; vertical-align: top; }.radio-guide-table thead th { position: sticky; z-index: 1; top: 0; background: #cbc3b0; box-shadow: 0 1px #81796c; }
.radio-guide-table th:first-child, .radio-guide-table td:first-child { width: 46px; color: #5d574e; font-family: "Courier New", monospace; text-align: center; }
.radio-guide-table button { width: 100%; min-height: 48px; padding: 5px; border: 0; color: #26231e; background: transparent; box-shadow: none; text-align: left; }.radio-guide-table button:hover, .radio-guide-table button:focus-visible { color: #142b1b; background: rgb(67 95 70 / .12); filter: none; }
.radio-guide-table button[aria-pressed="true"] { color: #102c18; background: #b9c8b7; box-shadow: inset 3px 0 #35583e; }.radio-guide-table button strong, .radio-guide-table button span { display: block; }.radio-guide-table button span { margin-top: 3px; color: #625d54; font-size: .52rem; }
.radio-guide-track { display: block; }.radio-guide-artist { display: block; margin-top: 2px; color: #6e675c; font-size: .52rem; }.radio-guide-current { background: #c4cfbd; box-shadow: inset 3px 0 #49604d; }.radio-guide-current::before { color: #3b6343; content: "● "; }.radio-guide-playing { background: #b3c5ae; }
.radio-guide-footer { display: flex; justify-content: space-between; gap: 12px; padding: 7px 15px; border-top: 3px double #6b6254; color: #686054; font: .48rem "Courier New", monospace; letter-spacing: .06em; }

.under-desk { --desk-edge-height: 30px; position: relative; min-height: 126px; padding: 23px 30px; border-top: var(--desk-edge-height) solid transparent; color: #949192; background: linear-gradient(#100f0e, #07080a 75%); box-shadow: inset 0 10px 18px rgb(0 0 0 / .55); font: .68rem "Courier New", monospace; text-align: center; }
/* Front edge uses the same wood under deeper shade, within the existing border space. */
.under-desk::before { position: absolute; z-index: 2; top: calc(-1 * var(--desk-edge-height)); right: 0; left: 0; height: var(--desk-edge-height); background-color: #1c110b; background-image: linear-gradient(rgb(10 7 5 / .56), rgb(8 5 3 / .76)), url("./assets/home/desk/walnut-desktop.webp"); background-size: auto, max(100%, 960px) auto; background-position: center, center 58%; box-shadow: inset 0 1px rgb(185 130 76 / .10), inset 0 -2px 2px rgb(0 0 0 / .65); content: ""; pointer-events: none; }
/* Paired vertical-grain legs sit in front of the dim wall outlet. */
.under-desk::after, .desk-leg-right { position: absolute; z-index: 1; top: 0; bottom: 0; left: 35px; width: 64px; background-color: #19110c; background-image: linear-gradient(90deg, rgb(7 5 3 / .66), rgb(7 5 3 / .50) 14%, rgb(7 5 3 / .60) 74%, rgb(0 0 0 / .86) 78%), url("./assets/home/window/walnut-frame-vertical.webp"); background-size: auto, 90px auto; background-position: center; box-shadow: inset 0 12px 12px rgb(0 0 0 / .70), inset 1px 0 rgb(117 85 54 / .13); content: ""; pointer-events: none; }
.under-desk::after { transform: scaleX(-1); }
.desk-leg-right { right: 35px; left: auto; }
.footer-copy { position: relative; z-index: 2; width: fit-content; max-width: 100%; margin: 0 auto; }
.footer-copy p { margin: 5px; }.under-desk a { color: #a8adba; }
/* Japanese two-receptacle cover: two vertical slots per socket, no ground hole. */
.outlet { position: absolute; z-index: 0; right: 109px; bottom: 35px; display: grid; grid-template-rows: 1fr 1fr; gap: 3px; width: 40px; height: 64px; padding: 9px 6px; border: 1px solid #3e3b34; border-top-color: #817a69; border-left-color: #756e60; border-radius: 4px; background: linear-gradient(115deg, #797260, #57534a 75%); box-shadow: inset 0 0 0 1px rgb(211 196 164 / .12), 1px 2px 2px rgb(0 0 0 / .8); text-decoration: none; opacity: .17; transition: opacity .18s ease; }
.outlet-hit-area { display: none; }
.outlet::before, .outlet::after { position: absolute; left: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%; background: linear-gradient(90deg, #989080 0 35%, #3d3931 35% 65%, #777063 65%); box-shadow: 0 1px 1px rgb(0 0 0 / .4); content: ""; }
.outlet::before { top: 3px; }.outlet::after { bottom: 3px; }
.outlet:hover { opacity: .24; }
.outlet:focus-visible { opacity: 1; outline: 2px solid #c7c3b7; outline-offset: 3px; }
.outlet-receptacle { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #464138; border-top-color: #8d8370; border-radius: 3px; background: linear-gradient(#756c5b, #635d51); box-shadow: inset 0 -1px 1px rgb(0 0 0 / .25); }
.outlet-receptacle i { display: block; width: 2px; height: 7px; border-radius: .5px; background: #131410; box-shadow: 1px 0 rgb(190 174 142 / .22); }
.outlet-receptacle i:first-child { height: 8px; }

/* Compact desktop footer keeps the outlet and all three footer lines visible. */
@media (min-width: 781px) {
  .under-desk { --desk-edge-height: 20px; min-height: 94px; padding: 8px 95px; }
  .outlet { bottom: 5px; }
}

@media (max-width: 780px) {
  body { padding: 0; }
  .home-shell { border-width: 0; box-shadow: none; }
  .window-area { --frame-side: 14px; --frame-top: 16px; --frame-bottom: 20px; --frame-face: 8px; --frame-foot: 13px; --reveal-top: 8px; --reveal-side: 6px; --reveal-bottom: 7px; }
  .sky { min-height: 190px; }
  .town { height: 88px; }
  .town .town-base { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px); mask-image: linear-gradient(to bottom, transparent, #000 18px); }

  .site-heading { width: 100%; padding: 47px 8px 27px; }
  .site-heading p { top: 0; }
  .site-heading h1 { font-size: clamp(2.25rem, 12vw, 4rem); }
  .clock { right: auto; bottom: calc(var(--frame-foot) + 3px); left: 22px; }
  .menu-toggle { position: absolute; z-index: 8; top: 8px; right: 9px; display: grid; width: 32px; height: 30px; padding: 7px 6px; border: 1px solid rgb(225 235 255 / .45); border-radius: 3px; place-items: center; color: #edf4ff; background: rgb(5 13 31 / .48); box-shadow: 1px 1px 3px rgb(0 0 0 / .32); cursor: pointer; }
  .menu-toggle span, .menu-toggle::before, .menu-toggle::after { display: block; width: 17px; height: 1px; background: currentcolor; box-shadow: 0 0 4px rgb(215 230 255 / .35); content: ""; }
  .menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .menu-toggle[aria-expanded="true"] span { opacity: 0; }
  .menu-toggle[aria-expanded="true"]::before { transform: translateY(5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"]::after { transform: translateY(-5px) rotate(-45deg); }
  .main-nav { top: 43px; right: 8px; bottom: auto; left: auto; display: flex; visibility: hidden; width: 126px; max-width: calc(100% - 16px); padding: 6px 0; border: 1px solid rgb(205 219 243 / .44); border-radius: 3px; align-items: stretch; flex-direction: column; background: rgb(5 13 31 / .9); box-shadow: 3px 4px 8px rgb(0 0 0 / .38); opacity: 0; pointer-events: none; transform: translateY(-5px); transition: visibility 0s linear .14s, opacity .14s ease, transform .14s ease; }
  .main-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .main-nav a { padding: 7px 13px; color: #edf4ff; font-size: .7rem; text-align: left; }
  .main-nav a + a::before { display: none; }
  .main-nav a[aria-current="page"] { background: rgb(255 255 255 / .08); }
  .desk { --desk-light-width: 350px; --desk-light-height: 260px; --desk-light-x: 55px; --desk-light-y: 155px; padding: 1px 14px 0; }
  .desk-stage { display: flex; min-height: 0; flex-direction: column; gap: 31px; padding: 47px 0 62px; }
  .clipboard, .about-object, .notebook, .album, .radio-object { position: relative; inset: auto; width: 100%; }
  .clipboard::before, .album::before, .album::after, .album-studs { transform: none; }
  .clipboard { order: 1; padding: 24px 14px 14px; }
  .memo-lamp-mount { top: 21px; left: -28px; width: 6px; height: 22px; }
  .memo-lamp { top: -65px; left: -62px; width: 96px; height: 96px; }
  .clip { top: 5px; width: 13px; height: 32px; border-width: 2px; border-radius: 8px; }
  .clip::before { inset: -1px; }
  .clip::after { top: 4px; left: 3px; width: 5px; height: 21px; border-radius: 5px; }
  .about-object { order: 2; align-self: center; width: min(82%, 310px); min-height: 250px; }
  .object-art { width: 140px; height: 145px; }
  .about-pop { top: 38px; right: auto; left: 50%; width: min(245px, 90vw); transform: translate(-50%, 6px); }
  .about-pop::after { right: 31px; bottom: -11px; transform: rotate(45deg); }
  .about-object:hover .about-pop, .about-object:focus-within .about-pop, .about-object[open] .about-pop { transform: translate(-50%, 0); }
  .notebook { --notebook-fold: calc(100% - 13px); order: 3; grid-template-columns: minmax(0, 1fr); width: calc(100% - 6px); margin-left: 20px; }
  .diary-page { min-height: 300px; }
  .diary-left { padding: 20px 42px 20px 22px; border-radius: 9px; }
  .diary-right { display: none; }
  .notebook .section-kicker { font-size: 1.05rem; }
  .diary-tabs { right: calc(100% - 15px); width: 34px; gap: 8px; }
  .diary-tabs button { width: 34px; height: 44px; }
  .diary-tabs button[aria-selected="true"] { transform: translateX(-3px); }
  .album { order: 4; padding-right: 14px; padding-left: 14px; }
  .radio-object { order: 5; padding: 9px; box-shadow: inset 0 0 0 2px #555752, 5px 6px 0 rgb(31 15 9 / .3); }
  .radio-head { padding-right: 13px; padding-left: 13px; }
  .radio-cabinet { padding: 9px; }
  .radio-tuner { grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 6px; }
  .radio-tuner > button { padding: 5px; font-size: .52rem; }
  .radio-display { min-height: 230px; padding: 11px; }
  .radio-display-topline { align-items: flex-start; flex-direction: column; gap: 3px; }.radio-display-topline [data-radio-signal] { text-align: left; }
  .radio-transport { grid-template-columns: 1fr 1fr; }
  .radio-cabinet button { min-height: 44px; padding-right: 7px; padding-left: 7px; }
  .radio-player-panel { min-height: 200px; }.radio-player, .radio-player iframe { min-height: 200px; }
  .radio-guide { width: calc(100vw - 16px); max-height: min(88vh, 760px); margin: auto auto 8px; }
  .radio-guide-paper { max-height: min(88vh, 760px); }
  .radio-guide-heading { gap: 8px; padding: 11px 10px 8px; }
  .radio-guide-heading h3 { font-size: .86rem; }
  .radio-guide-note { padding: 7px 10px; font-size: .58rem; }
  .radio-guide-table { min-width: 610px; font-size: .59rem; }
  .radio-guide-table th, .radio-guide-table td { padding: 7px 6px; }
  .radio-guide-footer { padding: 6px 10px; }
  .memo-list li, .memo-note { grid-template-columns: 5.5em minmax(0, 1fr); gap: 5px; font-size: .68rem; }
  .photos { grid-template-columns: repeat(4, minmax(118px, 1fr)); overflow-x: auto; padding: 4px 2px 9px; }
  .under-desk { min-height: 110px; padding: 10px 26px; clip-path: inset(0); }
  .under-desk::after, .desk-leg-right { width: 44px; }
  .under-desk::after { left: -22px; }
  .desk-leg-right { right: -22px; }
  .outlet { top: 8px; right: 28px; bottom: auto; width: 32px; height: 52px; padding: 7px 4px; gap: 2px; border-radius: 3px; }
  .outlet-hit-area { position: absolute; display: block; inset: -6px; }
  .outlet-receptacle { gap: 5px; border-radius: 2px; }
  .outlet-receptacle i { width: 1.5px; height: 6px; }
  .outlet-receptacle i:first-child { height: 7px; }
}

@media (max-width: 430px) {
  .site-heading p { font-size: .57rem; }
  .memo-list li, .memo-note { grid-template-columns: 5.5em minmax(0, 1fr); }
  .album header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .radio-brand { display: none; }
  .radio-tuner { grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 5px; }
  .radio-tuner > button { overflow-wrap: anywhere; letter-spacing: 0; }
  .radio-display { min-height: 250px; padding: 9px; }
  .radio-display h3 { font-size: .9rem; }
  .radio-display blockquote { font-size: .64rem; }
  .radio-aux-controls { grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
}

@media (hover: none) { .about-object:hover .about-pop { opacity: 0; pointer-events: none; }.about-object[open] .about-pop { opacity: 1; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.sky, .main-nav, .object-art, .about-pop, .outlet { transition: none; } }