/* Shared visual language for every room of 77 NEST. Loaded after page styles. */
@font-face{font-family:WorldWenKai;src:url('/assets/fonts/lxgw-wenkai-77.woff2') format('woff2');font-display:swap}
:root{
  color-scheme:dark;--paper:#102b2d;--surface:#193a3b;--ink:#eee6cd;--muted:#b1c4b4;
  --line:#466357;--qiqi-purple:#e8c887;--qiqi-purple-soft:#304c40;--qiqi-purple-mid:#7b936b;
  --focus-ring:#f4d596;--danger:#f2a59b;--success:#a7d5b0;--white:#193a3b;
  --purple:#e8c887;--purple-soft:#304c40;--green:#a7d5b0;--orange:#e8b47c;
  --radius:4px;--radius-small:3px;--font-hand:WorldWenKai,"Songti SC",serif;
  --shadow:0 10px 30px #061d2340;--world-gold:#e8c887;
}
body{background:var(--paper);color:var(--ink);isolation:isolate}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(circle at 19% 23%,#d9d6a328 0 1px,transparent 2px),radial-gradient(circle at 73% 59%,#a5c2ae20 0 1px,transparent 2px);background-size:193px 211px,307px 263px}
::selection{color:#163733;background:#e8c887}
.site-header,.admin-topbar,.bill-shell-header,.learning-header{background:#122e30f5;border-color:var(--line);box-shadow:0 5px 25px #071f252e}
.site-nav a[aria-current=page],.site-nav a:hover{color:var(--world-gold)}
.brand-lockup img{filter:brightness(0) invert(.9) sepia(.4)}
.admin-brand img,.learning-brand img,.brand img.brand-mark{background:#e8dfbd;padding:4px;border:1px solid #c7b783;border-radius:3px}
h1,h2,.view-head h2{font-family:var(--font-hand);font-weight:500}
.archive-shell h1{font-size:36px;color:var(--world-gold)}
.archive-shell{padding-top:28px;max-width:1200px}
.archive-breadcrumb,.archive-detail-breadcrumb,.media-detail__breadcrumb{font-size:12px;letter-spacing:.5px}
.archive-breadcrumb a,.archive-detail-breadcrumb a,.media-detail__breadcrumb a{color:var(--world-gold)}
.footer{color:var(--muted);border-top:1px solid var(--line);background:#0e272a}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{color:var(--ink);background-color:#102d30;border-color:var(--line);accent-color:var(--world-gold)}
input::placeholder,textarea::placeholder{color:#92aa9e;opacity:1}input[type=checkbox],input[type=radio]{accent-color:#bda66e}
option{background:#193a3b;color:var(--ink)}
button,a,input,select,textarea{scroll-margin-top:100px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--focus-ring)}
.button.primary,.button.primary.solid,.primary-button,.media-catalog-empty button{background:#dfc384;border-color:#dfc384;color:#183a35;box-shadow:0 3px 0 #8a7852}
.button.primary:hover,.button.primary.solid:hover,.primary-button:hover{background:#f1d899;border-color:#f1d899;color:#183a35}
.button.secondary,.button.ghost,.quiet-button,.icon-link{background:var(--surface);color:var(--ink);border-color:var(--line)}
.button:active,.primary-button:active{translate:0 2px}
.media-catalog-card,.archive-detail-stats,.media-detail__viewer,.metric-card,.task-card,.wish-card,.panel,.editor-card,.admin-album-card,.admin-media-card{border-radius:4px;box-shadow:0 7px 0 #09232550,0 15px 25px #071f2525}
.media-catalog-card__media,.media-detail__viewer{background:#0c2528}
.media-catalog-card__body{background:var(--surface);border-top:1px solid #6c795a}
.media-catalog-card h2{font-size:22px;color:var(--ink)}
.media-catalog-card__links a,.archive-detail-related a,.media-detail__chips a{background:#25473e;color:#ded7b3;border-color:#55715b}
.media-catalog-summary,.media-catalog-controls{border-color:#64775a;border-radius:3px}
.media-catalog-controls{box-shadow:inset 0 3px 0 #355146}
.media-catalog-summary dd{font-family:Georgia,serif;color:var(--world-gold)}
.media-detail__viewer{border:1px solid #7c8664;padding:10px;box-shadow:0 18px 50px #001c}
.media-detail__viewer figcaption{background:#193a3b}
.media-detail__demo{color:#d6c596;background:#304a3b}
.media-detail__sequence{background:#193a3b;padding:16px;border:1px solid var(--line)}
.editorial-hero__copy h1{color:var(--world-gold)}
.editorial-hero__media{border:1px solid #7c8664;box-shadow:8px 8px 0 #29483e}
.editorial-hero__media img{filter:sepia(.16)}
.metric-card,.timeline-card,.growth-card,.profile-panel,.event-card,.plan-card,.document-card,.quote-card,.rule-card,.health-card,.family-node,.tree-person,.finance-card,.album-card,.member-card,.learning-card,.learning-resource-card,.media-card,.more-card,.life-card{background:var(--surface);border-color:var(--line);color:var(--ink)}
.timeline-item,.growth-item,.future-letter,.finance-summary,.family-tree,.tree-level,.learning-resource-list,.workspace,.mistake-row,.learning-nav,.demo-notice,.empty-state,.error-state,.loading-state{background-color:var(--surface);border-color:var(--line)}
.learning-admin-metrics article{background:var(--surface)}
.learning-admin-metrics strong,.learning-report-numbers strong{color:var(--world-gold)}
.learning-admin-notice{background:#304a3b;color:#d9cdab;border-color:#bda66e}
.learning-ai-reserve input[readonly],.learning-ai-reserve textarea[readonly]{background:#233e3a}
.panel-callout.ai{color:#c0dcc0}.privacy-pill{background:#31594c;color:#d5ebc8}.privacy-pill.public{background:#5c4833;color:#f4d5a8}
.small-danger,.admin-topbar .admin-actions button{color:var(--danger);background:#492f2f;border-color:#81504a}
.student-avatar,.learning-nav button[aria-pressed=true] span,.upload-mark{color:#193a35!important;background:#dfc384}
.status-toast{background:#e8d498;color:#193a35}.progress-track{background:#36564b}
.bill-app{--finance-positive:#a7d5b0;--finance-negative:#f2a59b}
.bill-app :is(.import-card,.filter-panel,.table-panel,.chart-panel,.insight-card,.summary-card,.detail-panel,.overview-card){background:var(--surface);border-color:var(--line)}
.bill-app :is(th,td){border-color:var(--line)}.bill-app th{background:#23463e;color:var(--muted)}
/* Consistent story windows: the same night palette inside and outside the game. */
#contentDialog{background:#17383a;color:var(--ink);border:1px solid #a4976d;box-shadow:0 0 0 5px #183839,0 0 0 6px #496354,0 24px 100px #0009;transform-origin:50% 75%}
#contentDialog h2{color:var(--world-gold)}
#contentDialog p,#contentDialog small,.dialog-top,#contentDialog .dialog-top button{color:var(--muted)}
#contentDialog .content-card{border-color:var(--line)}
#contentDialog .dialog-action,#contentDialog .year-link{background:#2c4d40;color:#ebdfb5;border-color:#82916b;box-shadow:0 3px 0 #0d292b}
#contentDialog .year-link{position:relative;border-style:dashed;border-radius:0 8px 8px 0;padding:15px 22px;transform-origin:center;transition:transform .25s}
#contentDialog .year-link:hover{transform:perspective(450px) rotateY(-10deg) translateY(-4px)}
#contentDialog .media-tile,#contentDialog .stamp,#contentDialog .map-grid button{background:#27483f;color:#e9dfbb;border-color:#7b8e68}
#contentDialog .stamp button{color:var(--world-gold)}
#contentDialog .unlock-note{background:#304d3c;color:#e4d89e!important;border:1px solid #697d58}
#contentDialog .stamp.locked,#contentDialog .map-grid button:disabled{opacity:.55;background:#183437}
/* A miniature scene marks the doorway into each page. */
.world-banner{position:relative;min-height:190px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;border:1px solid #66795e;background:linear-gradient(110deg,#1c4143,#244c4b);padding:28px 36px;margin:0 0 30px;box-shadow:inset 0 0 0 6px #24443d,0 10px 25px #06212440;isolation:isolate}
.world-banner::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 110%,#c6c68425,transparent 60%)}
.world-banner-copy{position:relative;z-index:2;max-width:65%}.world-banner-copy>span{font:10px monospace;letter-spacing:3px;color:#ccbe8b}
.world-banner-copy h1,.world-banner-copy h2{font:32px var(--font-hand);margin:14px 0 8px;color:var(--world-gold)}
.world-banner-copy p{font-size:12px;margin:0;color:var(--muted);line-height:1.8}
.world-ornament{width:150px;height:125px;margin-right:25px;position:relative;perspective:700px;flex-shrink:0}
.world-cube{position:absolute;left:22px;top:22px;width:94px;height:100px;background:#788760;border:2px solid #bbaf79;transform:rotateX(12deg) rotateY(-24deg) rotateZ(-5deg);transform-style:preserve-3d;box-shadow:15px 22px 20px #0a2a2d77;animation:world-float 7s ease-in-out infinite}
.world-cube::before{content:'';position:absolute;left:-20px;top:-2px;width:18px;height:100px;background:#405b48;border:2px solid #8f966c;transform-origin:right;transform:rotateY(-90deg)}
.world-cube::after{content:'✦';position:absolute;inset:10px;border:1px solid #d9c68b;display:grid;place-items:center;font:42px Georgia;color:#f3d893;text-shadow:0 0 22px #f3d89399;transform:translateZ(2px)}
.world-orbit{position:absolute;width:170px;height:55px;border:1px dashed #b7bb7866;border-radius:50%;left:-15px;top:53px;transform:rotate(-24deg)}
.world-firefly{position:absolute;width:4px;height:4px;background:#e7d999;box-shadow:0 0 13px 5px #e6d08833;left:var(--x);top:var(--y);animation:world-drift var(--duration) ease-in-out infinite alternate;pointer-events:none}
.world-banner--compact{min-height:135px;padding:20px 26px;margin:22px 4vw}.world-banner--compact .world-banner-copy h2{font-size:26px}.world-banner--compact .world-ornament{height:100px;scale:.72;transform-origin:right center}
.world-wayback{font:11px/1.5 Arial,sans-serif;color:var(--world-gold);border:1px solid #697e60;padding:7px 11px;white-space:nowrap}
.world-motion-toggle{position:fixed;right:16px;bottom:14px;z-index:45;padding:8px 12px;min-height:34px;border:1px solid #65795a;border-radius:3px;background:#173a38ed;color:#e4d3a2;font:10px Arial;letter-spacing:.6px;box-shadow:0 4px 14px #0018}
body:has(.learning-shell) .world-motion-toggle{bottom:85px}
/* The login remains an actual permission boundary, presented as a lit doorway. */
body:has(.login-panel){min-height:100dvh;background:radial-gradient(ellipse at 50% 50%,#34564b 0,#102b2d 65%)}
.login-panel{position:relative;width:min(430px,calc(100% - 38px));margin:14vh auto 90px;padding:35px;background:#193a3bf0;border:1px solid #9b9b71;box-shadow:0 0 0 7px #28483d,0 0 0 8px #576c53,0 25px 70px #0019}
.login-panel::before{content:'✦';display:grid;place-items:center;width:48px;height:48px;position:absolute;top:-28px;right:28px;color:#f2d796;background:#2c4c3c;border:1px solid #a99967;box-shadow:0 0 40px #e2cb7740;animation:world-lantern 4s ease-in-out infinite}
.login-panel h1{font-size:30px;color:var(--world-gold)}.login-panel .login-form input{min-height:46px}.login-panel>a:last-child{color:var(--muted);font-size:12px}
.world-enter{animation:world-enter .6s backwards}.world-reveal{animation:world-reveal .6s backwards}
.world-tilt{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease,box-shadow .25s ease;transform-style:preserve-3d}
.world-tilt:hover{box-shadow:0 15px 30px #0018}
#contentDialog[open]{animation:world-open .38s both}.stamp:not(.locked)>span{animation:world-stamp .65s cubic-bezier(.18,.8,.2,1) both}
@keyframes world-enter{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes world-reveal{from{opacity:.4;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes world-open{from{opacity:0;transform:perspective(900px) rotateX(-9deg) translateY(20px) scale(.97)}to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) scale(1)}}
@keyframes world-stamp{0%{opacity:0;transform:scale(1.6) rotate(-18deg)}70%{opacity:1;transform:scale(.9) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes world-float{0%,100%{transform:rotateX(12deg) rotateY(-24deg) rotateZ(-5deg) translateY(0)}50%{transform:rotateX(6deg) rotateY(-12deg) rotateZ(2deg) translateY(-9px)}}
@keyframes world-drift{to{translate:12px -15px;opacity:.25}}
@keyframes world-lantern{50%{box-shadow:0 0 50px #e2cb7760}}
@media(max-width:760px){
 .world-banner{min-height:165px;padding:23px 20px;margin-bottom:24px}.world-banner-copy{max-width:74%}.world-banner-copy h1,.world-banner-copy h2{font-size:25px}.world-banner-copy>span{font-size:8px;letter-spacing:2px}.world-banner-copy p{font-size:10px}.world-ornament{position:absolute;right:-45px;opacity:.6;scale:.65;transform-origin:center}
 .world-banner--compact{min-height:122px;margin:16px}.world-banner--compact .world-banner-copy h2{font-size:23px}
 .world-motion-toggle{right:9px;bottom:9px;padding:6px 9px;font-size:9px}.world-wayback{font-size:10px;padding:5px 8px}.site-header{gap:10px}.brand-lockup img{width:148px}.site-nav{gap:12px}.site-nav a{font-size:11px}
 .login-panel{margin-top:90px;padding:25px}.login-panel h1{font-size:27px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.world-tilt{transform:none!important}}
html[data-world-motion=off]{scroll-behavior:auto}
html[data-world-motion=off] *,html[data-world-motion=off] *::before,html[data-world-motion=off] *::after{animation:none!important;transition:none!important}
html[data-world-motion=off] .world-tilt{transform:none!important}
/* Legacy home widgets with literal light backgrounds. */
.metric,.album,.event,.recommend,.profile-panel,.plan-column,.finance-summary,.finance-bars,.bill-import-panel,.bill-panel{background:#193a3b;border-color:var(--line);color:var(--ink)}
.progress,.bar-track,.bar-track.debt{background:#35554a}.file-drop{background:#122f32;border-color:var(--line)}
.button.danger,.icon-link.danger{background:#492f2f;color:#f2a59b;border-color:#81504a}
.metric strong{color:var(--world-gold)}
.world-brand{display:flex;gap:12px;align-items:center;text-decoration:none;flex-shrink:0}
.world-brand-mark{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid #9ba479;color:#e8c887;font:bold 27px Georgia;background:#132e30;flex-shrink:0}
.world-brand-mark::after{content:'✦';position:absolute;top:-10px;right:-6px;font:12px Georgia;color:#e8c887;background:#132e30}
.world-brand-label{color:#eee6cd;font:14px/1.5 Arial,"PingFang SC",sans-serif;letter-spacing:1px}.world-brand-label small{display:block;font:8px/1.9 monospace;letter-spacing:2px;color:#b1c4b4}
@media(max-width:760px){.world-brand{gap:9px}.world-brand-mark{width:33px;height:33px;font-size:23px}.world-brand-label{font-size:11px;letter-spacing:0}.world-brand-label small{font-size:6px;letter-spacing:1px}.learning-header .profile-summary{gap:8px}.learning-header .world-wayback{max-width:60px;white-space:normal;text-align:center}.site-header:has(.private-nav){flex-wrap:wrap;padding-top:12px;padding-bottom:10px}.site-header:has(.private-nav) .site-nav{width:100%;overflow:auto}}

body:has(.learning-shell) .world-banner .world-motion-toggle{position:absolute;right:10px;bottom:9px;z-index:3}

/* Each room has an object that belongs to its actual purpose. */
.world-object-label{position:absolute;bottom:8px;left:4px;right:4px;color:#efe2ba;font:8px/1.4 Arial,sans-serif;letter-spacing:1px;text-align:center;transform:translateZ(4px)}
.world-cube::after{bottom:29px}
[data-object=album] .world-cube{background:#876c50;border-color:#c8ac7b}
[data-object=album] .world-cube::after,[data-object=photo] .world-cube::after{content:'';inset:10px 10px 28px;background:linear-gradient(145deg,transparent 45%,#a9b783 46% 67%,#6d926e 68%),radial-gradient(circle at 72% 27%,#efd695 0 7px,transparent 8px),#365d61;border:5px solid #e1d4ae}
[data-object=photo] .world-cube{background:#d8ccaa;border-color:#eadcbc;rotate:7deg}
[data-object=photo] .world-object-label{color:#40594b}
[data-object=ticket] .world-cube{width:130px;height:75px;left:0;top:32px;background:#c0a970;border:2px dashed #ebdba1;box-shadow:10px 14px 0 #496653,15px 22px 20px #0a2a2d77}
[data-object=ticket] .world-cube::before{display:none}
[data-object=ticket] .world-cube::after{content:'77 ↔';font:23px Georgia;color:#27483f;border:0;border-bottom:1px dashed #5c6d4c;inset:8px 10px 24px}
[data-object=ticket] .world-object-label{color:#27483f}
[data-object=study] .world-cube{background:#758e73;border-left:10px solid #c2b283}
[data-object=study] .world-cube::after{content:'七七';font:22px WorldWenKai,serif;background:repeating-linear-gradient(transparent 0 16px,#d7dbb940 16px 17px);border:0}
[data-object=ledger] .world-cube{background:#4d7470;border-left:8px solid #c0ac79}
[data-object=ledger] .world-cube::after{content:'¥';font:34px Georgia;border:1px solid #b5b985;border-radius:50%}
[data-object=workshop] .world-cube{background:#7e8160;rotate:5deg}
[data-object=workshop] .world-cube::after{content:'≡';font:43px Georgia;border:0;border-top:7px solid #c0b684}
[data-object=home] .world-cube::after{content:'⌂';font:49px Georgia}
@media(max-width:760px){.intro h1 em{display:block;margin-top:5px}.scene-caption h2{font-size:25px;letter-spacing:1px}}

/* Keep the playable world and its controls together in one desktop viewport. */
.town-home .topbar{padding:12px 4%;width:100%;min-height:58px}
.town-home .brand{font-size:13px;gap:10px}.town-home .brand-mark{font-size:23px;padding:3px}
.town-home .brand small{font-size:7px;line-height:1.8}
.town-home .intro{padding:14px 0 16px;gap:20px}
.town-home .intro .eyebrow{display:none}
.town-home .intro h1{font-size:25px;margin:0;letter-spacing:1px}
.town-home .intro>p{font-size:10px;line-height:1.7;margin:0}
@media(min-width:761px) and (min-height:540px){
 .town-home{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr)}
 .town-home>main{width:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:0 28px;max-width:1400px}
 .town-home .game-frame{min-height:0;display:grid;grid-template-rows:28px minmax(0,1fr) 46px;padding:6px}
 .town-home .game-toolbar{height:28px}
 .town-home .viewport{aspect-ratio:auto;min-height:0}
 .town-home .controls{min-height:0;padding:6px 12px}
 .town-home .journey{padding:17px 8px;gap:14px}
 .town-home .footnote{padding:10px 0}
 .town-home>footer{display:none}
 .town-home .world-motion-toggle{bottom:5px;right:8px;padding:5px 8px;min-height:25px;font-size:9px}
 .town-home .footnote>span:last-child{margin-right:95px}
}
@media(max-width:760px){
 .town-home .topbar{padding:10px 16px;min-height:52px}
 .town-home .intro{padding:13px 0}
 .town-home .intro h1{font-size:19px;letter-spacing:0;line-height:1.5}
 .town-home .intro h1 em{display:inline;margin:0}
 .town-home .journey{padding:18px 6px;gap:18px}
 .town-home>footer{padding:12px}
}
