:root { --red:#8d1e34; --red-dark:#591221; --sky:#277fb4; --ink:#20272d; --muted:#66717a; --paper:#f5f4f0; --line:#dbe0e2; --gold:#d59b35; --white:#fff; --shadow:0 18px 46px rgba(32,39,45,.12),0 2px 8px rgba(61,70,76,.08); font-family:"Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--paper); line-height:1.6; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid rgba(39,127,180,.48); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.46; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.intro-screen { position:fixed; inset:0; z-index:20; display:grid; grid-template-rows:auto 1fr auto auto; overflow:hidden; min-height:100svh; padding:28px clamp(22px,6vw,86px) 28px; color:#fff; isolation:isolate; transition:opacity .48s ease,visibility .48s ease; }
.intro-screen[hidden] { display:none; }
.intro-backdrop { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.025); }
.intro-shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(15,26,35,.46),rgba(28,16,20,.25) 38%,rgba(20,20,24,.83)); }
.intro-topline { display:flex; justify-content:space-between; gap:16px; padding-bottom:16px; color:rgba(255,255,255,.92); font-size:14px; letter-spacing:0; }
.intro-copy { align-self:center; max-width:720px; padding-top:7vh; }
.intro-kicker,.welcome-hero-copy>p,.feature-panel-copy>span,.contact-section>div>span,.dialog-header p { margin:0 0 10px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:0; }
.intro-copy h1 { display:flex; align-items:center; flex-wrap:wrap; gap:13px; margin:0; font-family:STKaiti,"KaiTi",serif; font-size:clamp(44px,7vw,86px); font-weight:700; line-height:1.05; text-shadow:0 3px 22px rgba(0,0,0,.4); }
.intro-copy h1 i { width:34px; height:1px; background:rgba(255,255,255,.72); }
.intro-subtitle { margin:18px 0 0; font-size:17px; color:rgba(255,255,255,.86); }
.intro-achievements { display:flex; gap:14px; margin:20px 0 22px; }
.intro-achievements figure { width:min(230px,36vw); margin:0; border:1px solid rgba(255,255,255,.42); border-radius:7px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.28); background:rgba(20,20,20,.3); }
.intro-achievements img { display:block; width:100%; height:auto; }
.intro-start { display:flex; justify-content:space-between; align-items:center; width:min(420px,100%); padding:15px 18px; border:1px solid rgba(255,255,255,.67); border-radius:5px; background:rgba(141,30,52,.9); color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.26); transition:transform .4s cubic-bezier(.16,1,.3,1),background .4s; }
.intro-start:hover { transform:translateY(-2px); background:#ab2946; }
.intro-start b { font-size:22px; }
.intro-footnote { margin:16px 0 0; color:rgba(255,255,255,.74); font-size:13px; }
body.app-active .intro-screen { opacity:0; visibility:hidden; pointer-events:none; }

.music-toggle { position:fixed; z-index:31; right:24px; bottom:25px; display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.85); border-radius:50%; background:var(--red); color:#fff; box-shadow:0 8px 24px rgba(50,21,30,.28); transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s; }
.music-toggle:hover { transform:translateY(-2px); background:#ad2947; }
.music-toggle.is-playing::after { position:absolute; inset:-5px; border:1px solid rgba(141,30,52,.46); border-radius:50%; content:""; animation:musicPulse 1.7s ease-out infinite; }
@keyframes musicPulse { from { transform:scale(.78); opacity:.9; } to { transform:scale(1.25); opacity:0; } }

.app-shell { min-height:100svh; padding-bottom:148px; }
.app-header { position:sticky; z-index:10; top:0; border-bottom:1px solid rgba(212,218,220,.9); background:rgba(245,244,240,.93); backdrop-filter:blur(14px); }
.header-inner { display:flex; justify-content:space-between; align-items:center; max-width:1180px; min-height:64px; margin:auto; padding:8px 24px; }
.header-profile { display:flex; align-items:center; gap:10px; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; }
.header-avatar,.profile-emblem { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--red); color:#fff; font-family:STKaiti,"KaiTi",serif; font-size:21px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.2); }
.header-profile strong { display:block; font-size:15px; }
.header-profile small { display:block; color:var(--muted); font-size:11px; }
.header-profile small i,.knowledge-status i { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#48a46e; vertical-align:middle; }
.header-actions { display:flex; gap:8px; }
.header-actions button { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:13px; transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s; }
.header-actions button:hover { transform:translateY(-2px); border-color:var(--red); color:var(--red); }

.chat-area { max-width:1180px; margin:auto; padding:26px 24px 42px; }
.welcome-hero { position:relative; min-height:430px; overflow:hidden; border-radius:7px; color:#fff; box-shadow:var(--shadow); isolation:isolate; }
.welcome-hero>img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 52%; }
.hero-shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(20,25,31,.9),rgba(34,33,34,.44) 52%,rgba(28,31,35,.2)); }
.welcome-hero-top { display:flex; justify-content:space-between; align-items:center; padding:22px 24px; }
.profile-emblem { width:44px; height:44px; background:#fff; color:var(--red); }
.welcome-hero-top>span { border:1px solid rgba(255,255,255,.47); padding:4px 9px; font-size:12px; }
.welcome-hero-copy { max-width:630px; padding:24px 8vw 54px; }
.welcome-hero-copy h1 { margin:0; font-size:clamp(33px,5vw,56px); line-height:1.1; letter-spacing:0; }
.welcome-hero-copy h1 span { display:block; }
.welcome-hero-copy strong,.welcome-hero-copy em { display:block; margin-top:10px; font-size:15px; font-style:normal; color:rgba(255,255,255,.87); }
.welcome-hero-copy em { color:#f0c873; font-family:STKaiti,"KaiTi",serif; font-size:19px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:23px; }
.hero-actions button,.feature-panel-copy button,.primary-button,.inline-action { border-radius:4px; padding:11px 14px; font-weight:700; transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s; }
.hero-actions button:hover,.feature-panel-copy button:hover,.primary-button:hover,.inline-action:hover { transform:translateY(-2px); }
.hero-primary { border:1px solid var(--red); background:var(--red); color:#fff; }
.hero-secondary { border:1px solid rgba(255,255,255,.65); background:rgba(255,255,255,.1); color:#fff; }
.hero-metrics { display:flex; flex-wrap:wrap; gap:18px; margin-top:28px; color:rgba(255,255,255,.76); font-size:12px; }
.hero-metrics b { color:#fff; font-size:17px; }

.zone-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0; }
.zone-card { min-height:150px; padding:17px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); text-align:left; box-shadow:0 5px 15px rgba(40,45,48,.04); transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s; }
.zone-card:hover { transform:translateY(-4px); border-color:#bb5064; box-shadow:var(--shadow); }
.zone-card span,.zone-card small { display:block; font-size:11px; color:var(--muted); }
.zone-card span { color:var(--red); font-weight:700; }
.zone-card strong { display:block; margin:20px 0 8px; font-size:16px; line-height:1.38; }
.zone-card-red { background:var(--red); border-color:var(--red); color:#fff; }
.zone-card-red span,.zone-card-red small { color:rgba(255,255,255,.76); }
.zone-card-sky { border-color:#b6d9e9; background:#edf7fc; }
.zone-card-sky span { color:var(--sky); }
.zone-card-ink { background:#27333a; border-color:#27333a; color:#fff; }
.zone-card-ink span,.zone-card-ink small { color:#bcd7e6; }

.feature-panel { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:30px; align-items:center; margin:20px 0; padding:30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-panel-copy h2,.contact-section h2 { margin:0; font-size:29px; line-height:1.2; }
.feature-panel-copy>p { max-width:480px; color:var(--muted); }
.feature-panel-copy button,.primary-button,.inline-action { border:0; background:var(--red); color:#fff; }
.feature-panel-copy small { display:block; margin-top:12px; color:var(--muted); font-size:12px; }
.bedding-feature { background:linear-gradient(100deg,#fff8f2,#f5f4f0 68%); }
.bedding-preview { display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:130px 130px; gap:8px; height:268px; }
.bedding-preview img { width:100%; height:100%; object-fit:cover; border-radius:5px; }
.bedding-preview img:first-child { grid-row:span 2; }
.map-feature { background:#f0f6f8; }
.map-preview { overflow:hidden; max-height:310px; padding:0; border:1px solid #c4d9e0; border-radius:5px; background:#d4e9d0; }
.map-preview img { display:block; width:100%; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.map-preview:hover img { transform:scale(1.035); }

.knowledge-status { display:flex; justify-content:space-between; gap:12px; margin-top:30px; padding:12px 14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }
.knowledge-notice { margin:10px 0 25px; color:var(--muted); font-size:12px; }
.quick-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-weight:700; }
.quick-heading button { border:0; background:transparent; color:var(--red); font-size:13px; }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.quick-grid button { display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:6px; min-height:62px; padding:10px; border:1px solid var(--line); border-radius:5px; background:#fff; text-align:left; color:var(--ink); font-size:13px; transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s; }
.quick-grid button:hover { transform:translateY(-2px); border-color:var(--red); }
.quick-grid span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#f7e8eb; color:var(--red); font-size:11px; }
.quick-grid b { color:var(--red); }
.category-strip { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 34px; }
.category-strip button,.library-filters button { border:1px solid var(--line); border-radius:999px; padding:7px 10px; background:#fff; color:var(--ink); font-size:12px; }
.category-strip button:hover,.library-filters button:hover,.library-filters button.active { border-color:var(--red); background:#fff3f5; color:var(--red); }

.contact-section { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 30px; border:1px solid #d8c6ca; border-radius:6px; background:#fff; }
.contact-section>div>span { color:var(--red); }
.contact-section h2 { font-size:23px; }
.contact-section p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.contact-card { display:flex; align-items:center; gap:13px; min-width:190px; padding:8px; border:1px solid var(--line); border-radius:5px; background:#f9f9f7; color:var(--ink); text-align:left; }
.contact-card>span:last-child { font-size:12px; }
.contact-card>img { width:46px; height:46px; object-fit:cover; object-position:center 56%; border-radius:3px; }
.contact-placeholder { display:grid; place-items:center; flex:none; width:46px; height:46px; border:2px dashed #c58a96; border-radius:4px; color:var(--red); font-family:STKaiti,"KaiTi",serif; font-size:26px; }
.contact-placeholder.large { width:126px; height:126px; margin:auto; font-size:58px; }

.composer-wrap { position:fixed; z-index:12; right:0; bottom:0; left:0; border-top:1px solid var(--line); background:rgba(245,244,240,.96); backdrop-filter:blur(14px); }
.composer-inner { max-width:850px; margin:auto; padding:10px 20px 12px; }
.composer { display:flex; align-items:flex-end; gap:8px; padding:7px 8px 7px 13px; border:1px solid #c9d0d3; border-radius:7px; background:#fff; box-shadow:0 5px 18px rgba(32,39,45,.05); }
.composer textarea { flex:1; max-height:126px; border:0; outline:0; resize:none; background:transparent; line-height:1.45; }
.composer button { width:35px; height:35px; border:0; border-radius:4px; background:var(--red); color:#fff; font-size:18px; }
.composer-meta { display:flex; justify-content:space-between; margin-top:5px; color:var(--muted); font-size:10px; }
.composer-meta button { border:0; background:transparent; color:var(--red); }
.composer-inner>p { margin:3px 0 0; color:#879096; font-size:10px; }

.message-list { max-width:820px; margin:0 auto; padding-top:14px; }
.user-message,.assistant-message { display:flex; gap:9px; margin:16px 0; }
.user-message { justify-content:flex-end; }
.user-message>span,.assistant-message>span { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--red); color:#fff; font-family:STKaiti,"KaiTi",serif; }
.user-message>p { max-width:75%; margin:0; padding:10px 13px; border-radius:6px 0 6px 6px; background:var(--red); color:#fff; }
.assistant-message>span { background:#34434c; }
.assistant-message>div { max-width:min(680px,calc(100% - 42px)); padding:17px; border:1px solid var(--line); border-radius:0 6px 6px 6px; background:#fff; box-shadow:0 6px 14px rgba(35,42,47,.04); }
.assistant-message h2 { margin:0 0 8px; font-size:18px; }
.assistant-message p { margin:0; white-space:pre-line; }
.assistant-message small { display:block; margin-top:12px; color:var(--muted); }
.message-kicker { margin-bottom:5px!important; color:var(--red); font-size:11px; font-weight:700; }
.related-questions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.related-questions button { border:1px solid #e3cdd2; border-radius:999px; background:#fff8f9; color:var(--red); padding:5px 8px; font-size:11px; }
.inline-action { margin-top:14px; padding:8px 11px; font-size:12px; }

dialog { width:min(760px,calc(100vw - 30px)); max-height:min(84svh,850px); padding:0; border:0; border-radius:7px; background:#fff; color:var(--ink); box-shadow:0 25px 70px rgba(20,24,28,.3); }
dialog::backdrop { background:rgba(20,26,31,.55); backdrop-filter:blur(3px); }
.dialog-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:23px 24px 18px; border-bottom:1px solid var(--line); }
.dialog-header h2 { margin:0; font-size:23px; }
.dialog-close { width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:21px; line-height:1; }
.library-tabs { display:flex; gap:18px; padding:16px 24px 0; }
.library-tabs button { padding:0 0 8px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); }
.library-tabs button.active { border-color:var(--red); color:var(--red); font-weight:700; }
.library-tabs span { display:inline-grid; place-items:center; min-width:18px; height:18px; border-radius:9px; background:#f4e2e5; font-size:10px; }
.library-search-wrap { display:flex; align-items:center; gap:8px; margin:17px 24px 10px; padding:0 11px; border:1px solid var(--line); border-radius:5px; }
.library-search-wrap input { width:100%; padding:10px 0; border:0; outline:0; }
.library-filters { display:flex; flex-wrap:wrap; gap:6px; padding:0 24px 10px; }
.library-body { max-height:54svh; overflow:auto; padding:4px 24px 24px; }
.library-result-summary { color:var(--muted); font-size:12px; }
.library-list { display:grid; gap:8px; }
.library-list>button { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; width:100%; padding:12px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); text-align:left; }
.library-list>button:hover { border-color:#c07080; }
.library-list>button>span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f7e9eb; color:var(--red); }
.library-list strong,.library-list small { display:block; }
.library-list small { margin-top:3px; color:var(--muted); font-size:11px; }
.library-list b { color:var(--red); }
.library-empty { padding:34px; color:var(--muted); text-align:center; }
.library-detail>button:first-child { padding:0; border:0; background:transparent; color:var(--red); }
.library-detail h2 { font-size:23px; line-height:1.35; }
.library-detail p { white-space:pre-line; color:#343c42; }
.library-detail small { display:block; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); }
.library-section { margin:17px 0; padding:0 0 14px; border-bottom:1px solid var(--line); }
.library-section h3 { margin:0 0 6px; font-size:16px; }

.dialog-intro { margin:18px 24px; color:var(--muted); font-size:13px; }
.bedding-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 24px 24px; max-height:61svh; overflow:auto; }
.bedding-gallery figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:#f8f7f5; }
.bedding-gallery img { display:block; width:100%; aspect-ratio:1278/1704; object-fit:cover; }
.bedding-gallery figcaption { padding:7px; color:var(--muted); font-size:11px; }
.map-dialog-body { padding:20px 24px 24px; max-height:65svh; overflow:auto; }
.map-full-image { display:block; width:100%; min-width:580px; border:1px solid #cbdcd0; border-radius:4px; }
.map-dialog-body>div { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; }
.map-dialog-body article { padding:12px; border-left:3px solid var(--sky); background:#f3f8fa; }
.map-dialog-body h3,.map-dialog-body p { margin:0; }
.map-dialog-body h3 { font-size:15px; }
.map-dialog-body article p,.map-disclaimer { margin-top:5px!important; color:var(--muted); font-size:12px; }
.contact-dialog-body { display:grid; gap:16px; justify-items:center; padding:28px; text-align:center; }
.contact-dialog-body p { max-width:370px; margin:0; color:var(--muted); }
.contact-dialog-body>img { display:block; width:min(100%,460px); height:auto; border:1px solid var(--line); border-radius:4px; }
.contact-dialog-body small { max-width:390px; color:var(--muted); font-size:11px; }
.share-dialog-body { display:grid; gap:14px; justify-items:center; padding:26px; text-align:center; }
.share-dialog-body p { max-width:390px; margin:0; color:var(--muted); }
.share-dialog-body img { display:block; width:min(100%,360px); height:auto; image-rendering:pixelated; border:1px solid var(--line); border-radius:2px; background:#fff; }
.share-dialog-body a { color:var(--red); font-size:14px; text-decoration:none; }
.share-dialog-body small { min-height:18px; color:var(--muted); font-size:12px; }
.feedback-form { display:grid; gap:15px; padding:23px 24px 26px; }
.feedback-form label span { display:block; margin-bottom:5px; font-size:13px; font-weight:700; }
.feedback-form select,.feedback-form textarea { width:100%; border:1px solid var(--line); border-radius:4px; padding:9px; outline-color:var(--sky); resize:vertical; }
.privacy-note { margin:0; color:var(--muted); font-size:12px; }
.toast { position:fixed; z-index:50; left:50%; bottom:94px; max-width:calc(100vw - 34px); padding:9px 13px; border-radius:4px; background:#27333a; color:#fff; font-size:13px; transform:translate(-50%,16px); opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; }
.toast.show { transform:translate(-50%,0); opacity:1; }

@media (max-width:820px) { .zone-grid { grid-template-columns:repeat(2,1fr); } .feature-panel { grid-template-columns:1fr; gap:20px; padding:24px; } .bedding-preview { height:230px; } .quick-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .intro-screen { padding:20px 18px 24px; } .intro-copy { padding-top:4vh; } .intro-copy h1 { font-size:43px; gap:8px; } .intro-copy h1 i { width:20px; } .intro-achievements { gap:8px; } .intro-achievements figure { width:calc(50vw - 26px); } .intro-start { padding:13px 14px; } .music-toggle { right:17px; bottom:156px; } .header-inner,.chat-area { padding-right:15px; padding-left:15px; } .app-shell { padding-bottom:160px; } .welcome-hero { min-height:470px; } .welcome-hero>img { object-position:58% center; } .hero-shade { background:linear-gradient(90deg,rgba(20,25,31,.88),rgba(20,25,31,.32)); } .welcome-hero-copy { padding:38px 24px 38px; } .welcome-hero-copy h1 { font-size:38px; } .zone-grid { grid-template-columns:1fr 1fr; gap:8px; } .zone-card { min-height:132px; padding:13px; } .zone-card strong { margin-top:13px; font-size:14px; } .feature-panel { margin:14px 0; padding:20px 0; background:transparent; } .feature-panel-copy h2 { font-size:25px; } .bedding-preview { height:190px; } .map-preview { max-height:220px; } .knowledge-status { display:block; } .knowledge-status span+span { display:block; margin-top:4px; } .quick-grid { grid-template-columns:1fr; } .contact-section { display:grid; padding:20px; } .contact-card { width:100%; } .composer-inner { padding:8px 12px 10px; } .composer-meta span,.composer-inner>p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bedding-gallery { grid-template-columns:repeat(2,1fr); padding:0 16px 20px; } .dialog-header { padding:18px 16px 14px; } .library-tabs,.library-filters { padding-right:16px; padding-left:16px; } .library-search-wrap { margin-right:16px; margin-left:16px; } .library-body { padding-right:16px; padding-left:16px; } .map-dialog-body { padding:16px; } .map-dialog-body>div { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Campus editorial polish: real photography leads, tools remain compact. */
:root { --red:#941e37; --red-dark:#4c1020; --sky:#2b86aa; --ink:#1d282b; --muted:#637075; --paper:#f7f7f3; --line:#d8dfdc; --gold:#ca983f; --shadow:0 20px 48px rgba(31,42,43,.10),0 3px 10px rgba(64,32,39,.06); }
body { background:var(--paper); }
.app-header { border-color:rgba(29,40,43,.12); background:rgba(250,250,247,.94); }
.header-inner { max-width:1240px; min-height:72px; }
.header-avatar { width:39px; height:39px; background:var(--red); }
.header-profile strong { font-size:16px; }
.header-actions { gap:9px; }
.header-actions button { width:37px; height:37px; border-color:rgba(29,40,43,.13); background:#fdfdfb; box-shadow:0 2px 6px rgba(31,42,43,.03); }
.chat-area { max-width:1240px; padding-top:46px; padding-bottom:76px; }

.intro-screen { padding:30px clamp(24px,7vw,108px) 34px; }
.intro-backdrop { filter:saturate(.93) contrast(1.08); transform:scale(1.015); }
.intro-shade { background:rgba(20,28,31,.46); }
.intro-topline { max-width:1240px; width:100%; margin:0 auto; padding-bottom:18px; font-size:13px; }
.intro-copy { width:min(760px,100%); max-width:none; margin:0 auto; padding-top:4vh; }
.intro-kicker { color:#f1cb79; }
.intro-copy h1 { font-size:clamp(48px,7.1vw,92px); text-shadow:0 4px 22px rgba(0,0,0,.38); }
.intro-copy h1 i { width:48px; background:#e2b55e; }
.intro-subtitle { max-width:320px; padding-left:14px; border-left:2px solid #d8a44e; }
.intro-achievements { width:min(760px,100%); margin:22px auto 26px; }
.intro-achievements figure { border-color:rgba(239,203,124,.67); border-radius:3px; box-shadow:0 18px 34px rgba(7,12,13,.28); }
.intro-start { width:min(430px,100%); margin:0 auto; border-color:#d8a44e; border-radius:2px; background:var(--red); }
.intro-footnote { width:min(1240px,100%); margin:17px auto 0; }

.welcome-hero { min-height:512px; border-radius:3px; box-shadow:0 26px 60px rgba(25,35,36,.16),0 3px 10px rgba(24,32,34,.08); }
.welcome-hero>img { object-position:62% 53%; transform:scale(1.005); }
.hero-shade { background:linear-gradient(90deg,rgba(20,28,30,.86) 0%,rgba(24,28,31,.64) 38%,rgba(24,28,31,.10) 76%); }
.welcome-hero-top { padding:26px 30px; }
.welcome-hero-top>span { border-color:rgba(231,202,134,.72); color:#fff4d9; background:rgba(28,30,31,.22); }
.profile-emblem { width:48px; height:48px; border-radius:2px; color:var(--red); }
.welcome-hero-copy { max-width:600px; padding:54px 8.5vw 64px; }
.welcome-hero-copy>p { color:#efbf69; }
.welcome-hero-copy h1 { font-size:clamp(42px,5.1vw,65px); text-shadow:0 4px 18px rgba(0,0,0,.23); }
.welcome-hero-copy h1 span { white-space:nowrap; }
.welcome-hero-copy strong { margin-top:16px; font-size:16px; }
.welcome-hero-copy em { margin-top:12px; color:#f3cf87; font-size:21px; }
.hero-actions { margin-top:30px; }
.hero-primary { border-color:var(--red); box-shadow:0 10px 22px rgba(76,16,32,.36); }
.hero-secondary { border-color:rgba(244,229,191,.72); }
.hero-metrics { gap:22px; margin-top:33px; font-size:12px; }
.hero-metrics span { padding-right:15px; border-right:1px solid rgba(255,255,255,.32); }
.hero-metrics span:last-child { padding-right:0; border-right:0; }

.zone-grid { grid-template-columns:repeat(12,1fr); grid-template-areas:"ask ask ask ask ask ask ask safety safety safety safety safety" "bedding bedding bedding bedding bedding map map map map map map map"; gap:12px; margin:28px 0 0; }
.zone-card { min-height:168px; padding:20px; border-color:transparent; border-top:2px solid var(--red); border-radius:2px; box-shadow:0 12px 28px rgba(37,45,45,.055); }
.zone-card:hover { border-color:transparent; border-top-color:var(--red); box-shadow:0 22px 38px rgba(37,45,45,.12); }
.zone-card:nth-child(1) { grid-area:ask; min-height:185px; padding:25px; background:#fff; }
.zone-card:nth-child(1) strong { max-width:370px; font-size:22px; }
.zone-card:nth-child(2) { grid-area:safety; border-top-color:var(--sky); background:#e9f3f7; }
.zone-card:nth-child(3) { grid-area:bedding; border-top-color:#d89251; }
.zone-card:nth-child(4) { grid-area:map; }
.zone-card span { color:var(--red); }
.zone-card strong { margin-top:19px; }
.zone-card-sky span { color:var(--sky); }
.zone-card-red { background:var(--red); border-top-color:#e4bd70; }
.zone-card-ink { background:#273336; border-top-color:#7fbbc9; }

.feature-panel { gap:clamp(28px,5vw,72px); margin:82px 0; padding:0; border-top:1px solid var(--line); border-bottom:0; background:transparent; }
.feature-panel-copy { padding:56px 0 0; }
.feature-panel-copy h2 { font-size:clamp(30px,3.2vw,42px); }
.feature-panel-copy>p { max-width:390px; margin:16px 0 25px; font-size:16px; }
.feature-panel-copy button { border-radius:2px; }
.bedding-feature { grid-template-columns:.82fr 1.18fr; }
.bedding-preview { height:328px; margin-top:40px; gap:10px; }
.bedding-preview img { border-radius:2px; box-shadow:0 10px 22px rgba(47,40,32,.10); }
.map-feature { grid-template-columns:.9fr 1.1fr; }
.map-preview { margin-top:40px; max-height:360px; border-color:#a7c2c9; border-radius:2px; box-shadow:0 16px 32px rgba(30,73,84,.10); }
.knowledge-status { margin-top:24px; padding:16px 0; border-color:var(--line); }
.knowledge-notice { margin-bottom:42px; }
.quick-heading { padding-top:4px; }
.quick-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
.quick-grid button { min-height:68px; border-radius:2px; box-shadow:0 5px 14px rgba(31,42,43,.035); }
.category-strip { margin:26px 0 78px; }
.category-strip button,.library-filters button { border-radius:2px; }

.contact-section { margin-top:0; padding:35px 0; border-right:0; border-left:0; border-color:var(--line); border-radius:0; background:transparent; }
.contact-section h2 { font-size:30px; }
.contact-card { min-width:236px; padding:9px; border-radius:2px; background:#fff; box-shadow:0 8px 18px rgba(31,42,43,.06); }
.contact-card>img { width:58px; height:58px; border-radius:1px; }
.composer-wrap { border-color:rgba(29,40,43,.14); background:rgba(250,250,247,.95); }
.composer { border-radius:2px; }
.composer button { border-radius:2px; }
.music-toggle { width:48px; height:48px; right:28px; bottom:28px; border:2px solid #f8e5b8; background:var(--red); box-shadow:0 13px 30px rgba(76,16,32,.28); }
body.intro-active .music-toggle { top:84px; right:clamp(18px,4vw,48px); bottom:auto; }

.panel-dialog { border-radius:3px; }
.dialog-header { border-color:var(--line); }
.dialog-close,.library-search-wrap,.library-list>button,.bedding-gallery figure { border-radius:2px; }
.library-list>button { transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s; }
.library-list>button:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(31,42,43,.08); }

@media (max-width:820px) { .zone-grid { grid-template-areas:"ask ask safety safety" "bedding bedding map map"; grid-template-columns:repeat(4,1fr); } .feature-panel { margin:64px 0; } }
@media (max-width:560px) { .chat-area { padding-top:22px; padding-bottom:58px; } .intro-screen { padding:20px 18px 24px; } .intro-copy { padding-top:2vh; } .intro-copy h1 { font-size:44px; } .intro-copy h1 i { width:24px; } .intro-achievements { margin-top:18px; } .welcome-hero { min-height:500px; border-radius:2px; } .welcome-hero-top { padding:17px; } .welcome-hero-copy { padding:42px 23px 39px; } .welcome-hero-copy h1 { font-size:40px; } .welcome-hero-copy strong { font-size:14px; } .hero-metrics { gap:9px; } .hero-metrics span { padding-right:8px; font-size:10px; } .zone-grid { grid-template-areas:"ask ask" "safety bedding" "map map"; grid-template-columns:repeat(2,1fr); margin-top:14px; } .zone-card { min-height:142px; } .zone-card:nth-child(1) { min-height:150px; padding:18px; } .zone-card:nth-child(1) strong { font-size:18px; } .feature-panel { margin:56px 0; } .feature-panel-copy { padding-top:34px; } .bedding-preview,.map-preview { margin-top:6px; } .bedding-preview { height:215px; } .quick-grid { grid-template-columns:1fr; } .category-strip { margin-bottom:58px; } .contact-section { margin-bottom:0; padding:28px 0; } .music-toggle { right:17px; bottom:156px; } body.intro-active .music-toggle { top:82px; right:18px; bottom:auto; } }