/* DeadNet late-1990s visual skin.
   Keep this override file separate from layout rules so the art direction can be tuned
   without hunting through component behavior or the base stylesheet. */
:root {
  --bg: #0b0b10; --panel: #17151d; --line: #70647d; --muted: #aaa3b2;
  --text: #e1dbe6; --pink: #dc82d7; --cyan: #54dbea; --green: #61e5a7;
  --amber: #ffbd50; --blue: #aaa7ff; --shadow: #060609;
}
body {
  padding: 10px; background-color: #0d0c12;
  background-image: radial-gradient(ellipse at 50% 0%, #292236 0, #111017 54%, #07070a 100%);
  font: 12px "Lucida Console", Monaco, Consolas, monospace; image-rendering: pixelated;
}
.frame { border: 2px solid #4c4356; border-radius: 3px; box-shadow: 0 0 0 3px #09080c, 0 18px 65px #000d, inset 0 0 0 1px #a58aaa55; }
.topbar { height: 60px; padding: 0 26px; gap: 17px; background: linear-gradient(#201c26,#111016); border-bottom: 2px solid #574b66; box-shadow: inset 0 -1px #d781c044; }
.logo { font: bold 29px "Lucida Console", Monaco, monospace; letter-spacing: -3px; color: #d37bcf; text-shadow: 2px 2px #76518f, 4px 4px #111; }
.globe { font-size: 26px; filter: saturate(.8); text-shadow: 0 0 8px #42cfe0; }
.nav { gap: 9px; }
.nav button { font-size: 11px; letter-spacing: .4px; padding: 7px 9px; }
.nav button:hover, .nav .active { color: #69e7ef; text-shadow: 0 0 7px #4ed5dd55; }
.topright { gap: 14px; font-size: 11px; }
.online { padding: 6px 9px; border: 1px solid #48a981; background: #092019; box-shadow: inset 0 0 8px #29a96b22; color: #6ef0ae; }
.layout { grid-template-columns: minmax(225px,21%) minmax(460px,1fr) minmax(255px,21%); gap: 9px; padding: 10px; min-height: calc(100vh - 127px); }
.window { border: 2px solid #62576c; background: #131219; box-shadow: inset 0 0 0 2px #08080c, 2px 2px 0 #08070b; }
.titlebar { height: 38px; padding: 0 10px; background: linear-gradient(90deg,#342a3e,#24202b 70%,#2a2632); border-bottom: 2px solid #665a70; font-size: 13px; color: #e4a2ec; text-shadow: 1px 1px #18111c; }
.control { width: 20px; height: 19px; line-height: 15px; border: 2px outset #99909e; color: #eee; background: #534d5a; font-weight: bold; }
.tabs { height: 37px; background: #121118; }
.tab { padding: 10px 3px; font-size: 11px; letter-spacing: .2px; }
.tab.active { background: linear-gradient(#14312d,#10231f); border: 2px outset #45b998; box-shadow: inset 0 0 8px #2cae8055; text-shadow: 0 0 6px #6cf5c0; }
.site-row { height: 54px; border-bottom: 1px solid #39333f; padding: 5px 7px; }
.site-row:hover, .site-row.selected { background: linear-gradient(90deg,#2b2838,#20212a); outline: 1px solid #50c8d1; box-shadow: inset 3px 0 #58dbe5; }
.site-icon { width: 37px; height: 37px; border: 2px ridge #62596c; background: linear-gradient(#282530,#17161e); font-size: 21px; text-shadow: 1px 2px #111; }
.site-name { font-size: 12px; color: #e4ddec; }
.site-owner { font-size: 10px; color: #a19aaa; }
.status { font-size: 9px; letter-spacing: .25px; }
.browserbar { height: 52px; gap: 5px; background: linear-gradient(#e1dfe4,#bcb8c2); border-bottom: 2px solid #827a89; padding: 5px 7px; box-shadow: inset 0 1px white; }
.browserbar button { border: 2px outset #c4c0ca; border-radius: 0; background: linear-gradient(#f1eff2,#d2ced7); font-size: 10px; color: #272331; padding: 6px 7px; text-shadow: 0 1px white; white-space: nowrap; }
.browserbar button:active { border-style: inset; }
.browserbar .url { border: 2px inset #c6c2ca; background: #f8f7f8; padding: 8px 9px; font-size: 12px; box-shadow: inset 1px 1px 3px #7773; }
.browser-content { padding: 14px 18px 18px; background-color: #e9e2d3; background-image: repeating-linear-gradient(0deg,#81725b08 0 1px,#fff0 1px 4px),radial-gradient(ellipse at 18% 12%,#fff8 0,transparent 40%),linear-gradient(90deg,#cbbf9c12 1px,transparent 1px); background-size: auto,auto,5px 5px; color: #282235; min-height: 600px; }
.home-hero { min-height: 166px; border: 4px ridge #776a83; background-color: #11111b; background-image: radial-gradient(circle at 16% 50%,#8d5f9c55 0 1px,transparent 2px),radial-gradient(circle at 75% 24%,#e5dbb688 0 1px,transparent 2px),radial-gradient(ellipse at 50% 115%,#51446a 0,transparent 48%),linear-gradient(180deg,#080a12,#171727 66%,#292238); background-size: 31px 29px,47px 37px,auto,auto; box-shadow: inset 0 0 0 2px #08070c,inset 0 -9px 18px #090811; gap: 25px; }
.hero-moth { font-size: 75px; filter: drop-shadow(2px 3px 0 #422e61) drop-shadow(0 0 7px #bd7bdf); transform: rotate(-9deg); z-index: 1; }
.hero-copy h1 { font: bold clamp(22px,3.1vw,39px) "Lucida Console", Monaco, monospace; letter-spacing: 2px; color: #df8be2; text-shadow: 2px 2px #57376d,4px 4px #171321; line-height: 1.2; margin: 8px 0 12px; }
.hero-copy p { font-size: 11px; letter-spacing: 1.3px; color: #64dbea; text-shadow: 0 0 6px #46d2e588; }
.page-cols { grid-template-columns: 174px minmax(0,1fr); gap: 17px; margin-top: 16px; }
.page-links { gap: 0; padding: 5px 0; border-right: 1px solid #b6aa9b; }
.page-links .page-link { display: block; position: relative; padding: 5px 7px; color: #382ba0; font: bold 12px "Lucida Console",Monaco,monospace; text-shadow: 0 1px #fff8; }
.page-links .page-link:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.page-links .page-link:hover { background: #b7b0ef; color: #211474; text-decoration: none; }
.page-links .page-link:hover:before { background: #4b43a9; }
.page-main { line-height: 1.75; font-size: 12px; padding: 2px 2px 0 0; }
.page-main h2 { font-size: 16px; color: #302349; border-bottom: 1px dashed #9990a0; padding-bottom: 5px; }
.page-main p { margin: 8px 0; color: #302b3b; }
.construction { border: 2px dashed #a79bb0; background: #eee9f5; padding: 11px; text-align: center; margin: 3px auto 14px; max-width: 420px; color: #29243a; box-shadow: inset 0 0 0 1px #fff; }
.construction b { display: inline-block; color: #5d4b83; font-size: 26px; text-shadow: 2px 2px #c6bdd7; }
.handnote { font-family: "Comic Sans MS","Segoe Print",cursive; font-size: 12px; line-height: 1.2; color: #625968; max-width: 80px; text-align: center; transform: rotate(8deg); margin: 3px 4px 6px 12px; }
.mini-photo { width: 145px; height: 102px; position: relative; isolation: isolate; border: 4px ridge #77717a; background: linear-gradient(180deg,#4b4267 0,#9e728e 44%,#e09b89 58%,#313149 60%,#151724 100%); box-shadow: 2px 3px 0 #a49a8b; margin: 4px 0 9px 13px; }
.mini-photo:before { content: ""; position: absolute; inset: 34% 0 0; z-index: -1; background: linear-gradient(90deg,transparent 0 5%,#222235 5% 11%,transparent 11% 16%,#27243a 16% 29%,transparent 29% 35%,#201f34 35% 42%,transparent 42% 47%,#27253a 47% 57%,transparent 57% 64%,#252238 64% 74%,transparent 74% 80%,#1d2034 80% 91%,transparent 91%),linear-gradient(0deg,#171a2c 0 24%,transparent 24% 100%); }
.mini-photo:after { content: "RIDGEVIEW · 4.21.98"; position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 9px; color: #50495c; letter-spacing: .3px; }
.feature-cards { gap: 10px; margin: 20px 0 14px; clear: both; }
.feature { border: 2px ridge #aaa1a6; background: linear-gradient(#eee8dc,#ded7c9); padding: 8px 10px; color: #302747; box-shadow: inset 0 0 0 1px #fff8; min-height: 57px; }
.feature:hover { background: #f3ecd9; border-color: #756a86; }
.feature .page-link { font-weight: bold; }
.feature small { font-size: 10px; color: #494151; }
.visitor { border-top: 1px dashed #99909c; padding-top: 9px; color: #635c68; font-size: 10px; }
.counter { display: inline-block; border: 2px inset #70736a; font: bold 16px "Lucida Console",monospace; color: #67ff93; background: repeating-linear-gradient(90deg,#111 0 3px,#080a09 3px 5px); padding: 3px 7px; letter-spacing: 3px; text-shadow: 0 0 4px #35d96d; }
.board-feed { padding: 7px; max-height: calc(100vh - 290px); }
.post { border: 2px ridge #5b5261; margin-bottom: 8px; background: linear-gradient(#1e1c25,#19171f); padding: 9px; box-shadow: inset 0 0 0 1px #ffffff08; }
.post h3 { font-size: 12px; line-height: 1.4; text-shadow: 1px 1px #09080b; }
.post p { font-size: 11px; }
.post-head { font-size: 10px; }
.post-actions button { background: none; border: 0; box-shadow: none; color: #c2b7cc; text-decoration: underline; padding: 2px 3px; }
.post-actions button:hover { color: #6ee4cf; }
.terminal { margin: 0 10px 10px; border: 2px ridge #665c71; background: repeating-linear-gradient(0deg,#101218,#101218 2px,#13151c 3px); grid-template-columns: 190px 1fr 230px; min-height: 70px; box-shadow: inset 0 0 0 1px #08080a; }
.term-label { border: 2px ridge #526a6a; background: #0d1016; padding: 7px; color: #c3e8ed; }
.term-text { font-size: 10px; }
.shortcuts { font-size: 9px; white-space: nowrap; }
button { border-radius: 0; }
button.primary { background: linear-gradient(#185245,#10382f); border: 2px outset #47be9b; }
button.danger { border: 2px outset #c46c8b; }
.small { font-size: 10px; }
.frame:after { background: repeating-linear-gradient(0deg,#0000 0 2px,#05040a14 3px),linear-gradient(90deg,#e89cff08,#0000 24%,#53dfff05 78%,#ffc85806); mix-blend-mode: multiply; }
body.theme-amber .browser-content { background-color: #f0e2c8; }
body.theme-orchard .browser-content { background-color: #e7efd9; }
body.theme-blueprint .browser-content { background-color: #dce9ec; }
body.theme-terminal .browser-content { background-color: #101611; }
@media (max-width: 1100px) { .layout { grid-template-columns: 220px minmax(380px,1fr); } .page-cols { grid-template-columns: 150px minmax(0,1fr); } }
@media (max-width: 700px) {
  body { padding: 0; } .layout { padding: 6px; } .page-cols { grid-template-columns: 1fr; gap: 8px; }
  .page-links { border-right: 0; border-bottom: 1px dashed #aa9eab; flex-direction: row; flex-wrap: nowrap; }
  .page-links .page-link { padding: 6px; } .home-hero { min-height: 125px; gap: 8px; }
  .hero-moth { font-size: 47px; } .hero-copy h1 { font-size: 17px; letter-spacing: 0; }
  .mini-photo { width: 112px; height: 78px; } .feature-cards { grid-template-columns: 1fr; }
  .terminal { grid-template-columns: 1fr; } .shortcuts { display: none; }
}
/* Tiny homepage vignette: emoji sit inside a deliberately low-fi scene. */
.construction-art { height: 58px; max-width: 260px; margin: 0 auto 5px; position: relative; display: flex; align-items: end; justify-content: center; gap: 28px; border-bottom: 1px dotted #aaa0b7; }
.construction-cat { font-size: 33px; filter: grayscale(.4) drop-shadow(1px 2px #aaa); transform: translateY(2px); }
.construction-barrier { font-size: 30px; filter: saturate(.8); transform: translateY(3px); }
.construction-spark { position: absolute; top: 2px; left: 22%; color: #a994dd; font-size: 18px; text-shadow: 8px 8px #c7a9e5; }
.construction > b { font-size: 12px; color: #342c49; text-shadow: none; }
.construction > i { font-size: 11px; color: #574e63; }
/* Retro homepage details that belong to the page module, kept independently editable. */
.page-tagline { color: #168da5; margin: -5px 0 15px; }
.current-page { background: #b4aff3; padding: 5px 7px !important; }
.current-page:before { background: #4b43a9 !important; }
.secret-fragment { background: #17231c; color: #23512d; }
.relay-actions { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.homepage-edit { text-align: right; margin-top: 12px; }
/* Keep the notice, handwritten note, photo, and welcome copy in the same reading order as a hand-built homepage. */
.story-copy { min-height: 165px; display: flow-root; }
.siteSubpage > .construction { margin-bottom: 15px; }
.story-copy .mini-photo { margin-top: 3px; margin-right: 2px; }
.story-copy .handnote { float: right; clear: right; margin-right: 3px; }
/* Illustration overrides: authored assets replace emoji and gradient stand-ins. */
.home-hero { position: relative; background-image: url('/assets/img/moth-banner.png'); background-size: 100% 100%; background-position: center; background-color: #0a0b15; }
.home-hero:after { content: none; }
.hero-moth { display: none; }
.hero-copy { position: absolute; left: 25%; right: 10%; text-align: center; }
.hero-copy h1 { font-size: clamp(21px,3.1vw,38px); letter-spacing: 1px; }
.construction-art { height: auto; max-width: 260px; border: 0; margin: -2px auto 7px; }
.construction-art img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.mini-photo { background: #25243b url('/assets/img/ridgeview-1998.svg') center / cover no-repeat; image-rendering: pixelated; }
.mini-photo:before, .mini-photo:after { display: none; }
@media (max-width: 700px) { .hero-copy { left: 20%; right: 5%; } .hero-copy h1 { font-size: 16px; } }

/* Fit the three desktop panes and terminal inside one screen, as a real desktop shell should. */
html, body { height: 100%; min-height: 0; }
.frame { height: calc(100vh - 20px); min-height: 650px; display: flex; flex-direction: column; }
.topbar { flex: 0 0 60px; }
.layout { flex: 1 1 auto; min-height: 0; }
.window { min-height: 0; }
.leftcol, .rightcol { display: flex; flex-direction: column; }
.site-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.browser-window { min-height: 0; height: auto; }
.browser-content { min-height: 0; }
.rightcol .board-feed { flex: 1 1 auto; min-height: 0; max-height: none; }
.terminal { flex: 0 0 auto; }
.logo { font-size: 32px; letter-spacing: 0; }
@media (max-width: 1100px) { .frame { min-height: 650px; } }
@media (max-width: 700px) { html, body { height: auto; min-height: 100%; } .frame { height: auto; min-height: 100vh; display: block; } .topbar { flex-basis: auto; } .layout { flex: none; min-height: 0; } .leftcol, .rightcol { display: none; } .browser-window { min-height: calc(100vh - 205px); } .browser-content { min-height: 520px; } .terminal { min-height: 65px; } }
/* Owner-only administration panel: dense late-90s utility layout with real server-backed controls. */
.admin-launch { color: #ffbd50 !important; }
.admin-launch[hidden] { display: none; }
.modal:has(.admin-shell) { width: min(1120px,100%); }
.admin-shell { min-height: 300px; color: #ddd4e3; }
.admin-tabs { display: flex; gap: 5px; overflow-x: auto; border-bottom: 1px solid #4b4254; padding: 8px 0; }
.admin-tabs button { flex: 0 0 auto; padding: 6px 9px; font-size: 10px; }
.admin-tabs button.selected { color: #70edbe; border-color: #48bf98; background: #15362f; }
.admin-content { max-height: min(64vh,650px); overflow: auto; padding: 4px 4px 12px; }
.admin-section { border: 1px solid #494151; background: #17151d; padding: 12px; margin: 10px 0; }
.admin-section h2 { margin: 3px 0 10px; color: #e3a2e8; }
.admin-kicker { color: #67d9de !important; font-size: 9px !important; letter-spacing: 1px; margin: 0 !important; }
.admin-metrics { display: grid; grid-template-columns: repeat(5,minmax(80px,1fr)); gap: 7px; }
.admin-metrics div { display: flex; flex-direction: column; border: 1px solid #4d4556; background: #100f15; padding: 9px; }
.admin-metrics b { color: #6df0b7; font-size: 19px; }
.admin-metrics span { color: #a9a0b2; font-size: 9px; margin-top: 3px; }
.admin-callout,.admin-setting { display: flex; align-items: center; gap: 12px; border: 1px solid #3b705e; background: #10221e; padding: 9px; margin-top: 9px; }
.admin-callout b { color: #76ecc0; }
.admin-callout span { flex: 1; color: #c8c0d0; }
.admin-setting { justify-content: space-between; border-color: #51495a; background: #111016; }
.admin-setting p { color: #aaa1b2; font-size: 10px; margin: 5px 0 0; }
.admin-row { display: flex; justify-content: space-between; gap: 12px; border: 1px solid #494251; background: #121117; padding: 9px; margin: 7px 0; }
.admin-row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-row-main b { color: #e0a1e7; }
.admin-row-main span,.admin-row-main small { color: #b9b0c1; overflow-wrap: anywhere; }
.admin-row-main small { color: #8f8799; line-height: 1.45; }
.admin-row-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; max-width: 48%; }
.admin-row-actions button { font-size: 9px; padding: 4px 6px; }
.admin-grant { display: flex; align-items: center; gap: 8px; color: #bfb6c8; font-size: 10px; margin: 8px 0; }
.admin-grant input { width: 65px; background: #0e0d12; border: 1px solid #635a6d; color: white; padding: 5px; }
.admin-log { display: grid; grid-template-columns: 145px 110px minmax(130px,1fr) minmax(120px,1.5fr); gap: 8px; border-bottom: 1px solid #39333f; padding: 7px 3px; font-size: 9px; color: #aaa2b2; }
.admin-log b { color: #dca1e4; }.admin-log strong { color: #66ddae; font-weight: normal; text-transform: uppercase; }
.invite-code { font-family: Consolas,monospace; color: #6cdbde !important; letter-spacing: 1px; }
.admin-actions { display: flex; justify-content: flex-end; }
.admin-footer { align-items: center; }
.admin-footer .hint { margin-right: auto; }
@media(max-width:700px) {
  .modal:has(.admin-shell) { width: 100%; }
  .admin-metrics { grid-template-columns: repeat(2,minmax(90px,1fr)); }
  .admin-row { flex-direction: column; }
  .admin-row-actions { max-width: none; justify-content: flex-start; }
  .admin-log { grid-template-columns: 1fr 1fr; }
  .admin-setting { align-items: flex-start; flex-direction: column; }
}
/* Match the screenshot's 800x600-era proportions across modern viewport sizes. */
.topbar { height: clamp(48px,3.6vw,60px); flex-basis: clamp(48px,3.6vw,60px); }
.titlebar { height: clamp(30px,2.3vw,38px); }
.browserbar { height: clamp(42px,3.1vw,52px); }
.home-hero { min-height: clamp(120px,9.9vw,166px); }
.page-cols { grid-template-columns: minmax(125px,19.5%) minmax(0,1fr); gap: clamp(10px,1vw,17px); margin-top: clamp(11px,1vw,16px); }
.browser-content { padding: clamp(11px,1vw,16px) clamp(12px,1.1vw,18px); }
.page-main { font-size: clamp(10px,.72vw,12px); line-height: 1.7; }
.construction { max-width: 55%; padding: clamp(7px,.7vw,11px); }
.construction-art { max-width: min(260px,100%); }
.construction-art img { max-height: clamp(48px,3.7vw,62px); object-fit: contain; }
.story-copy { min-height: clamp(125px,9.8vw,165px); }
.mini-photo { width: clamp(120px,8.7vw,145px); height: clamp(82px,6.1vw,102px); }
.feature-cards { gap: clamp(7px,.6vw,10px); margin: clamp(12px,1.2vw,20px) 0 clamp(9px,.8vw,14px); }
.feature { min-height: clamp(42px,3.4vw,57px); padding: clamp(6px,.5vw,8px) clamp(7px,.6vw,10px); }
/* Functional homepage subpages: every decorative-looking link opens usable content. */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:10px; margin:14px 0; }
.gallery-card { display:flex; flex-direction:column; gap:6px; padding:6px; color:#2e2940; background:#f2ead9; border:1px solid #92879a; text-align:left; }
.gallery-card img { width:100%; aspect-ratio:1.5; object-fit:cover; image-rendering:pixelated; }
.photo-preview { display:block; max-width:100%; max-height:65vh; margin:12px auto; border:4px ridge #897c90; }
.photo-caption { text-align:center; color:#aba0b2!important; font-size:11px; }
.page-rule { height:1px; border-top:1px dashed #aa9eaa; margin:15px 0; }
.mix-list,.shop-list,.directory-links { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.mix-card,.shop-item { display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:10px; align-items:center; border:1px solid #a49aa6; background:#eee7d9; padding:8px; color:#292638; }
.shop-item { grid-template-columns:40px minmax(0,1fr) auto; }
.mix-card small,.shop-item small { display:block; color:#6f6875; margin-top:4px; }
.cassette { border:2px solid #786e80; background:#d28dcd; color:#282638; padding:10px 5px; text-align:center; font-size:10px; }
.cassette b { display:block; font-size:19px; }.cassette-purple { background:#9fb0dd; }
.disk-icon { font-size:26px; color:#665c9a; text-align:center; }
.directory-link { display:flex; gap:10px; align-items:center; padding:9px; border:1px solid #a49aa6; background:#f2ead9; color:#4433b3; cursor:pointer; text-decoration:underline; }
.directory-link span { color:#7b7280; font-size:10px; }.directory-link b { margin-left:auto; }
.subpage-footer { display:flex; justify-content:flex-end; border-top:1px dashed #a49daa; margin-top:20px; padding-top:10px; }
@media(max-width:700px) { .mix-card,.shop-item { grid-template-columns:1fr; } .mix-card { grid-template-columns:75px minmax(0,1fr) auto; } }
/* Shift the banner title away from the moth while preserving its handcrafted crop. */
.hero-copy { left:30%; right:6%; }.construction { max-width:65%; }
@media(max-width:700px) { .hero-copy { left:24%; right:4%; } }
/* The showcase banner artwork includes its own lettering; avoid printing the title twice. */
.home-hero.showcase-hero .hero-copy { display:block; left:31%; right:9%; }
.home-hero:not(.showcase-hero) { background-image:linear-gradient(120deg,#11131a,#262039 55%,#101820); }
.home-hero:not(.showcase-hero) .hero-copy { left:20%; right:5%; }
.page-main { font-size:clamp(12px,.85vw,15px); line-height:1.65; }
.story-copy { min-height:clamp(150px,12vw,200px); }
.construction-art img { max-height:clamp(58px,4.5vw,76px); }
.page-links { gap:clamp(8px,.8vw,12px); }
.page-link { font-size:clamp(11px,.75vw,13px); }
.feature { font-size:clamp(11px,.75vw,13px); }
.feature small { font-size:clamp(10px,.66vw,12px); }
/* Warm paper, hand-drawn margins, and a soft phosphor-glass vignette bring back the handmade mood. */
body { background-image:radial-gradient(ellipse at 50% 8%,#373041 0,#1a1720 53%,#050508 100%); }
.frame { filter:saturate(.94) contrast(1.015); }
.frame:before {
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,transparent 48%,#08070b18 72%,#06050b75 100%),url('/assets/img/paper-grain.svg');
  background-size:100% 100%,256px 256px; opacity:.82; mix-blend-mode:multiply;
}
.browser-content {
  background-color:#e8e0cf;
  background-image:url('/assets/img/paper-grain.svg'),repeating-linear-gradient(0deg,#897c6608 0 1px,#fff0 1px 4px),radial-gradient(ellipse at 50% 45%,#fff9 0,transparent 80%),radial-gradient(ellipse at 50% 50%,transparent 48%,#a3947e24 100%);
  background-size:256px 256px,auto,auto,auto;
}
.home-hero { border-color:#82768a; box-shadow:inset 0 0 0 2px #08070c,inset 0 -9px 18px #090811,0 2px 5px #4a405530; }
.handnote { font-family:'Segoe Print','Comic Sans MS',cursive; font-size:13px; line-height:1.18; color:#69606a; text-shadow:0 1px #fff8; }
.handnote:after { content:'♡'; display:block; text-align:right; margin:-2px 4px 0 0; font-size:14px; transform:rotate(-13deg); }
.story-copy .handnote { max-width:84px; }
.mini-photo { border:4px solid #eee7d9; outline:1px solid #332c3b; box-shadow:2px 3px 0 #aaa092,0 0 0 2px #34303b; transform:rotate(.6deg); }
.mini-photo:after { font-family:'Segoe Print','Comic Sans MS',cursive; font-size:10px; }
.construction { position:relative; border-style:dashed; border-color:#a69ab0; background-color:#efebf1; background-image:url('/assets/img/paper-grain.svg'),linear-gradient(145deg,#f5f0f6,#eae4ef); box-shadow:0 2px 4px #86799520,inset 0 0 0 1px #fff; transform:rotate(-.25deg); }
.construction-art { max-width:280px; margin:0 auto 6px; }
.construction-art img { max-height:76px; image-rendering:auto; }
.page-links .page-link { text-decoration-thickness:1px; text-underline-offset:2px; }
.page-links .page-link:hover { border-radius:2px 5px 3px 4px; }
.feature { border-width:1px; border-style:solid; border-color:#a39aa1 #88808a #aaa1a5 #958c96; background:linear-gradient(177deg,#f0ebdf,#dfd8ca); box-shadow:inset 0 0 0 1px #fff8,1px 2px 2px #726b6020; }
.post { box-shadow:inset 0 0 0 1px #ffffff08,1px 2px 3px #05040870; }
.titlebar { background-image:linear-gradient(90deg,#362b40,#24202b 70%,#292430),repeating-linear-gradient(0deg,#fff0 0 3px,#fff1 4px); }
/* Finish the tactile details with a single ink heart, a handwritten photo caption, and uneven card edges. */
.frame:before { background-image:radial-gradient(ellipse at 50% 48%,transparent 45%,#08070b20 72%,#06050b8c 100%),url('/assets/img/paper-grain.svg'); }
.story-copy .handnote:after { display:none; }
.mini-photo:after { display:block; }
.feature:nth-child(1) { transform:rotate(-.22deg); border-radius:2px 1px 3px 1px; }
.feature:nth-child(2) { transform:rotate(.18deg); border-radius:1px 3px 1px 2px; }
/* The reference has a soft edge falloff across the whole glass, strongest in the corners. */
body:after { content:""; position:fixed; inset:0; z-index:30; pointer-events:none; background:radial-gradient(ellipse at 50% 48%,transparent 56%,#07060a22 78%,#05040988 118%); }
.mini-photo:after { white-space:nowrap; font-size:8px; left:-4px; }

/* Native interactive desktop skin: every label and control is real DOM, so it stays
   crisp, accessible, and attached to the feature it operates at every viewport size. */
html,body { width:100%; height:100%; min-height:0; margin:0; overflow:hidden; }
body { display:block; padding:8px; background:radial-gradient(ellipse at 50% 30%,#292333 0,#141119 68%,#07060a 100%); }
.app-frame { display:grid; grid-template-rows:60px minmax(0,1fr) 74px; width:min(100%,1800px); height:100%; min-height:0; max-width:1800px; margin:0 auto; border:2px solid #4c4356; border-radius:12px; background:#100f15; box-shadow:0 0 0 3px #09080c,0 18px 70px #000c,inset 0 0 0 1px #a58aaa55; }
.app-frame:before { z-index:0; opacity:.22; }
.app-frame:after { z-index:4; background:repeating-linear-gradient(0deg,#0000 0 2px,#05040a0b 3px),radial-gradient(ellipse at 50% 48%,transparent 58%,#07060a14 82%,#05040960 125%); mix-blend-mode:multiply; }
.app-frame > * { position:relative; z-index:2; }
.topbar { height:60px; padding:0 clamp(12px,3vw,34px); gap:clamp(10px,1.4vw,22px); flex-wrap:nowrap; }
.logo { flex:none; font-size:clamp(20px,2vw,30px); letter-spacing:-2px; }
.globe { flex:none; font-size:clamp(20px,1.8vw,28px); }
.nav { min-width:0; gap:clamp(3px,.6vw,10px); }
.nav button { padding:7px clamp(4px,.6vw,10px); font-size:clamp(10px,.78vw,13px); white-space:nowrap; }
.topright { gap:clamp(7px,1vw,16px); font-size:clamp(9px,.75vw,12px); }
.online { padding:6px 9px; }
.layout { height:100%; min-height:0; grid-template-columns:minmax(215px,21.1%) minmax(0,1fr) minmax(235px,20.2%); gap:8px; padding:9px; overflow:hidden; }
.layout > .window { height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:2px solid #62576c; box-shadow:inset 0 0 0 2px #08080c,2px 2px 0 #08070b; }
.titlebar { flex:0 0 40px; height:40px; padding:0 10px; font-size:clamp(12px,.9vw,15px); }
.titlebar > span { font-size:18px; color:#dda0e8; }
.control { flex:none; width:20px; height:19px; line-height:15px; border:2px outset #99909e; }
.tabs { flex:0 0 38px; height:38px; }
.tab { padding:10px 3px; font-size:clamp(10px,.75vw,12px); }
.site-list { flex:1 1 auto; min-height:0; max-height:none; overflow:auto; scrollbar-color:#655b70 #16151c; }
.site-row { flex:0 0 53px; height:53px; padding:5px 7px; gap:9px; }
.site-icon { width:38px; height:38px; flex:0 0 38px; font-size:21px; }
.site-name { font-size:clamp(12px,.86vw,15px); }
.site-owner { font-size:clamp(10px,.7vw,12px); }
.status { font-size:clamp(9px,.66vw,11px); }
.browser-window { height:100%; min-height:0; }
.browserbar { flex:0 0 56px; height:56px; gap:5px; padding:5px 7px; }
.browserbar button { padding:6px 7px; font-size:clamp(9px,.68vw,11px); }
.browserbar .url { font-size:clamp(11px,.8vw,13px); }
.browser-content { flex:1 1 auto; min-height:0; overflow:auto; padding:clamp(12px,1vw,18px); font-size:clamp(13px,.92vw,16px); }
.home-hero { min-height:clamp(118px,11vw,166px); }
.hero-copy h1 { font-size:clamp(23px,2.5vw,40px); text-shadow:2px 2px #694178,4px 4px #21192d; letter-spacing:1.5px; }
.hero-copy p { font-size:clamp(10px,.8vw,13px); }
.page-cols { grid-template-columns:minmax(138px,19.5%) minmax(0,1fr); gap:clamp(10px,1vw,17px); margin:clamp(12px,1vw,17px) 0 0 clamp(8px,.9vw,15px); }
.page-links { gap:clamp(8px,.8vw,12px); }
.page-link { font-size:clamp(12px,.85vw,15px); }
.page-main { font-size:clamp(13px,.92vw,16px); line-height:1.62; }
.page-main p { margin:7px 0; }
.story-copy { min-height:clamp(110px,9vw,150px); }
.handnote { font-size:clamp(12px,.85vw,14px); }
.mini-photo { width:clamp(115px,10vw,170px); height:clamp(80px,7vw,120px); }
.construction { width:min(64%,460px); max-width:none; padding:clamp(6px,.55vw,9px); }
.construction b { font-size:clamp(12px,.82vw,14px); white-space:nowrap; }
.construction-art { max-width:260px; }
.construction-art img { max-height:clamp(40px,3.1vw,50px); }
.story-copy { position:relative; padding-right:180px; }
.story-copy .handnote { position:absolute; top:-70px; right:0; width:88px; max-width:none; float:none; margin:0; }
.story-copy .mini-photo { position:absolute; top:-20px; right:0; float:none; margin:0; }
.story-copy .mini-photo:after { display:block; font-size:clamp(8px,.58vw,10px); }
.feature-cards { gap:8px; margin:clamp(12px,1vw,18px) 0 12px; }
.feature { min-height:54px; padding:7px 9px; font-size:clamp(12px,.82vw,14px); }
.feature small { font-size:clamp(10px,.72vw,12px); }
.visitor { font-size:clamp(10px,.72vw,12px); }
.counter { font-size:clamp(15px,1.1vw,18px); }
.rightcol .tabs .tab { font-size:clamp(10px,.72vw,12px); }
.board-feed { flex:1 1 auto; min-height:0; max-height:none; overflow:auto; padding:7px; }
.post { padding:clamp(7px,.65vw,10px); margin-bottom:7px; }
.post-head { font-size:clamp(10px,.68vw,12px); }
.post h3 { font-size:clamp(12px,.82vw,14px); }
.post p { font-size:clamp(12px,.78vw,14px); line-height:1.48; }
.post-actions { font-size:clamp(10px,.68vw,12px); }
.rightcol > div:last-child { flex:none; padding:7px!important; }
.rightcol > div:last-child button { padding:7px; font-size:clamp(10px,.7vw,12px); }
.terminal { height:calc(100% - 8px); min-height:0; margin:0 9px 8px; grid-template-columns:190px minmax(0,1fr) minmax(185px,28%); gap:10px; padding:6px 9px; }
.term-text { font-size:clamp(10px,.72vw,12px); }
.shortcuts { font-size:clamp(9px,.66vw,11px); }
@media(max-width:1120px) and (min-width:901px) {
  .layout { grid-template-columns:minmax(195px,22%) minmax(0,1fr) minmax(215px,22%); gap:6px; padding:7px; }
  .topbar { padding-inline:12px; gap:9px; }
  .nav button { padding-inline:3px; }
  .clock { font-size:9px; }
  .terminal { grid-template-columns:150px minmax(0,1fr) 160px; gap:7px; }
}
@media(max-width:900px) {
  html,body { height:auto; min-height:100%; overflow:auto; }
  body { padding:0; }
  .app-frame { width:100%; height:auto; min-height:100vh; border:0; border-radius:0; grid-template-rows:auto auto auto; }
  .topbar { min-height:58px; height:auto; padding:8px 12px; flex-wrap:wrap; }
  .logo { font-size:19px; }
  .nav { order:3; width:100%; justify-content:space-between; }
  .topright { margin-left:auto; }
  .clock { display:none; }
  .layout { height:auto; min-height:0; overflow:visible; display:grid; grid-template-columns:minmax(190px,.75fr) minmax(0,1.75fr); grid-template-rows:minmax(600px,1fr) auto; padding:7px; }
  .leftcol { grid-column:1; grid-row:1; }
  .browser-window { grid-column:2; grid-row:1; }
  .rightcol { display:flex; grid-column:1 / -1; grid-row:2; min-height:320px; }
  .site-list { max-height:580px; }
  .terminal { min-height:70px; height:auto; grid-template-columns:1fr; margin:0 7px 7px; }
  .term-label,.shortcuts { display:none; }
}
@media(max-width:620px) {
  .topbar { gap:7px; }
  .topbar .globe { display:none; }
  .nav { overflow:auto; }
  .nav button { font-size:10px; }
  .layout { display:flex; flex-direction:column; gap:7px; }
  .leftcol { display:none!important; }
  .browser-window { min-height:calc(100vh - 185px); }
  .rightcol { min-height:340px; }
  .browser-content { padding:11px; }
  .page-cols { display:block; }
  .page-links { flex-direction:row; overflow:auto; padding-bottom:7px; border-right:0; border-bottom:1px dashed #aa9eab; }
  .page-links .page-link { white-space:nowrap; }
  .home-hero { min-height:118px; }
  .hero-copy { left:22%; right:4%; }
  .hero-copy h1 { font-size:clamp(17px,5vw,24px); }
  .hero-copy p { letter-spacing:.5px; }
  .construction { width:100%; max-width:100%; }
  .story-copy .handnote { position:static; float:right; margin:2px 0 5px 8px; width:82px; }
  .story-copy .mini-photo { position:static; float:right; margin:0 0 8px 10px; }
  .story-copy { padding-right:0; }
  .feature-cards { grid-template-columns:1fr; }
}

/* Email recovery adds another action on narrow screens; let modal controls wrap cleanly. */
.modal-actions { flex-wrap: wrap; }

/* Casebook keeps the puzzle surface readable inside the same old-web window language. */
.activity-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:13px 0; }
.activity-overview > div { display:flex; flex-direction:column; border:1px solid #51495b; background:#111016; padding:9px; text-align:center; }
.activity-overview b { color:var(--green); font-size:20px; }
.activity-overview span { color:#aaa1b2; font-size:9px; letter-spacing:.5px; margin-top:4px; }
.daily-card,.activity-case { border:1px solid #5c5267; background:#15131b; padding:12px; margin:9px 0; }
.daily-card { border-color:#3d7966; background:linear-gradient(135deg,#13251f,#17141d 65%); }
.activity-case.completed { border-color:#417b67; }
.activity-case-head { display:flex; align-items:center; gap:8px; color:#e5dce9; }
.activity-case-head > span { font-size:20px; }
.activity-case-head b { color:#dda2e5; }
.activity-case-head em { margin-left:auto; color:#70e9b4; font-size:10px; font-style:normal; }
.activity-case > p { margin:8px 0; color:#bbb3c1; }
.activity-clue,.activity-ending { border-top:1px dashed #51495b; margin-top:9px; padding-top:9px; }
.activity-clue > small { color:#6bdcd9; text-transform:uppercase; letter-spacing:.5px; }
.activity-clue h3,.activity-section-title { color:var(--amber); font-size:13px; margin:9px 0; }
.activity-clue p,.activity-ending p,.daily-prompt { color:#e1d9e4; line-height:1.6; }
.activity-clue details,.daily-card details { color:#8cdeb8; font-size:11px; cursor:pointer; }
.activity-clue details p,.daily-card details p { color:#b7c9bc; margin:5px 0; }
.activity-clue .field,.daily-card .field { margin:9px 0; }
.activity-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.activity-actions span { color:#958d9b; font-size:10px; }
.activity-actions button:disabled,.activity-location button:disabled { opacity:.45; cursor:not-allowed; }
.activity-ending b,.daily-solved b { color:#72ebbb; }
.daily-solved { border-top:1px dashed #39725e; margin-top:8px; padding-top:8px; }
.daily-solved p { color:#b9c7be; }
.activity-progress { height:4px; background:#09090d; margin-top:10px; }
.activity-progress span { display:block; height:100%; background:#53d9a1; box-shadow:0 0 6px #53d9a155; }
.activity-location { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px dashed #766985; background:#100f16; padding:8px 10px; margin:10px 0; color:#b8e8d0; }
.activity-location small { color:#a9a0b3; }
.archive-scrap { border:1px dashed #8d795a; background:#eee4c8; color:#28243a; padding:10px 13px; margin:14px 0; box-shadow:2px 3px 0 #17131d; }
.archive-scrap summary { color:#4b3c5c; font-weight:bold; cursor:pointer; }
.archive-scrap p { margin:8px 0; color:#28243a; font-family:var(--mono); line-height:1.55; }
.archive-scrap .archive-faint { color:#77717d; font-style:italic; }
.archive-kicker { color:#68d9c6; font-size:10px; letter-spacing:1px; }
.activity-section-title { margin:18px 0 3px; color:#76e7df; }
.homepage-badges { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 -6px; }
.homepage-badges span { border:1px dashed #8e789b; background:#f2e5c8; color:#57416c; padding:3px 7px; font-size:10px; transform:rotate(-1deg); }
@media(max-width:620px) {
  .activity-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .activity-actions { align-items:flex-start; flex-direction:column; }
}