/* Local fonts keep the room independent of third-party font services. */
:root {
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-synthesis: none;
  color: #353f33;
  background: #eeeee6;
  --ink: #35402f;
  --muted: #878c7c;
  --line: #d2d4c7;
  --paper: #f6f5ed;
  --green: #5d7050;
  --story-width: 380px;
  --story-space: 414px;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; transition: background .2s, transform .2s, color .2s; }
button:focus-visible, a:focus-visible { outline: 2px solid #9c583a; outline-offset: 5px; }
button:hover { color: #a56943; }
button:disabled { opacity: .5; cursor: wait; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#app { position: relative; min-width: 280px; height: 100svh; height: 100dvh; overflow: hidden; }
#scene, #object-controls { position: absolute; inset: 0; }
#story-glass{position:absolute;z-index:1;inset:0 0 0 auto;width:var(--story-space);opacity:0;pointer-events:none;background:linear-gradient(90deg,#f2f2e938,#f2f2e978);backdrop-filter:blur(22px) saturate(.8);-webkit-backdrop-filter:blur(22px) saturate(.8);border-left:1px solid #ffffff40;transition:opacity .4s,width .4s}
body.story-open #story-glass{opacity:1;pointer-events:auto}
body.night #story-glass{background:linear-gradient(90deg,#202b3533,#202b355c);border-color:#ffffff12}
#scene canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#object-controls { pointer-events: none; }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23noise)'/%3E%3C/svg%3E"); }
.masthead { position: absolute; z-index: 2; top: 30px; left: 40px; right: 40px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.masthead a, .masthead button { pointer-events: auto; }
.wordmark { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font-size: 12px; line-height: 1.3; letter-spacing: 2px; font-weight: 750; }
.wordmark .mark { font: 48px Georgia; line-height: 1; margin-top: -8px; }
.wordmark-dot { color: #b67b4b; }
.header-right { display: flex; gap: 26px; align-items: center; }
.edition { font-size: 11px; letter-spacing: 3px; color: var(--muted); }
.icon-button { width: 32px; height: 32px; border: 1px solid #b4bba8; border-radius: 50%; background: #f7f6ed80; font: italic 18px Georgia; }
.intro { position: absolute; left: 5.1%; top: 20%; pointer-events: none; }
.eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 2.4px; display: flex; align-items: center; gap: 10px; color: #88927b; }
.eyebrow span { display: inline-block; width: 18px; height: 1px; background: #88927b; }
h1 { font-family: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif CJK SC', serif; font-size: 37px; font-weight: 500; letter-spacing: 3px; line-height: 1.8; margin: 18px 0 14px; }
h1 span { display: block; font-size: 19px; letter-spacing: 2px; line-height: 1.85; font-weight: 400; margin-top: 9px; }
h1 span br { display: none; }
.intro p { font-size: 11px; letter-spacing: .9px; color: #919584; margin: 14px 0 22px; }
.tour-button { pointer-events: auto; background: #536748; color: #fff8e9; border-radius: 4px; padding: 12px 19px; font-size: 12px; letter-spacing: 2px; box-shadow: 0 5px 15px #47593b15; }
.tour-button span { margin-left: 18px; }
.tour-button:hover { background: #465b3c; color: white; transform: translateY(-2px); }
.top-controls { position: absolute; z-index: 2; top: 104px; right: 40px; display: flex; background: #f8f8efb8; backdrop-filter: blur(8px); padding: 4px; border-radius: 30px; border: 1px solid #ffffff80; transition: right .48s cubic-bezier(.22,.61,.36,1), opacity .3s; }
.pill { font-size: 11px; padding: 9px 14px; border-radius: 22px; background: transparent; color: #7e8975; }
.pill.active { background: #fffdf5; color: #48593d; box-shadow: 0 2px 8px #59634c11; }
.memory-list { position: absolute; left: 5.1%; bottom: 108px; width: 205px; }
.list-kicker { font-size: 10px; color: #9b9e91; letter-spacing: 2px; display: block; margin-bottom: 15px; }
.story-list-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 8px 0; background: transparent; text-align: left; font-size: 11px; color: #69745f; }
.story-list-item span:first-child { font: 10px Georgia; color: #a1a68f; }
.story-list-item span:last-child { margin-left: auto; opacity: 0; }
.story-list-item:hover span:last-child, .story-list-item:focus-visible span:last-child { opacity: 1; }
.intro, .memory-list { transition: opacity .28s, visibility .28s; }
.scene-footer { position: absolute; z-index: 3; bottom: 25px; left: 40px; right: 32px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; transition: bottom .48s cubic-bezier(.22,.61,.36,1); }
.scene-help { margin: 0; font-size: 9px; line-height: 1.8; color: #8d9782; letter-spacing: .8px; }
.scene-help span { margin: 0 6px; color: #b0b6a7; }
.room-actions { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #ffffffa3; border-radius: 30px; background: #f8f8eedb; backdrop-filter: blur(10px); box-shadow: 0 4px 22px #4554340b; pointer-events: auto; }
.room-actions button { min-height: 34px; padding: 7px 11px; border-radius: 20px; background: transparent; font-size: 11px; color: #6b795e; white-space: nowrap; }
.room-actions button:hover { background: #fffdf6; color: #475c36; }
.room-actions button > span { font-size: 15px; vertical-align: -1px; margin-right: 3px; }
.action-divider { height: 12px; width: 1px; background: #d9dece; }
/* Keyboard equivalents sit at the object; pointer interaction goes to the mesh. */
.object-control { position: absolute; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; border-radius: 18px; background: #fffdf2f5; color: #526346; font-size: 11px; padding: 9px 14px; white-space: nowrap; box-shadow: 0 3px 20px #25331c20; transition: opacity .18s; }
.object-control:focus-visible { opacity: 1; pointer-events: auto; z-index: 4; outline: 2px solid #73865a; outline-offset: 4px; }
#object-hint { position: absolute; z-index: 4; pointer-events: none; padding: 7px 11px; max-width: min(240px,calc(100vw - 24px)); border: 1px solid #ffffffe0; border-radius: 6px; background: #fffdf2ed; backdrop-filter: blur(8px); color: #596748; box-shadow: 0 3px 16px #25331c12; font-size: 11px; letter-spacing: .3px; }
dialog { border: 1px solid #e3e3d6; border-radius: 14px; padding: 0; background: #f7f5ed; color: #36432e; box-shadow: 0 16px 60px #25321d24; }
dialog::backdrop { background: #2231223b; backdrop-filter: blur(4px); }
/* show(), not showModal(): this panel never blocks the room or adds a backdrop. */
.story-dialog { position: absolute; z-index: 5; inset: 91px 24px 91px auto; margin: 0; width: var(--story-width); height: calc(100% - 182px); max-width: calc(100% - 32px); max-height: none; overflow: hidden; }
.story-dialog[open] { display: flex; flex-direction: column; animation: story-arrive .38s cubic-bezier(.22,.61,.36,1) both; }
.story-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbd2bf transparent; }
.story-dialog::backdrop { background: transparent; backdrop-filter: none; }
@keyframes story-arrive { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes story-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.close-dialog { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: #f7f5edf2; font-size: 23px; color: #727b67; z-index: 2; box-shadow: 0 2px 8px #2834220d; }
.close-dialog:hover { background: #fffef8; }
.story-image { position: relative; aspect-ratio: 1.4; min-height: 190px; max-height: 280px; background: #e0ddcf; }
.story-image img, .story-image video { width: 100%; height: 100%; position: absolute; object-fit: contain; }
.story-image video { background: #202622; }
.story-image:has(video:not([hidden])) > span { bottom: 55px; pointer-events: none; }
.story-image > span { position: absolute; bottom: 13px; left: 15px; font-size: 9px; letter-spacing: 1px; color: white; background: #252d2175; padding: 6px 9px; border-radius: 3px; max-width: calc(100% - 30px); }
.story-body { padding: 26px 26px 12px; }
.story-body .eyebrow { font-size: 9px; letter-spacing: 2px; }
h2 { font-family: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif CJK SC', serif; font-size: 25px; font-weight: 500; line-height: 1.7; margin: 14px 0 7px; }
.story-subtitle { font-size: 10px; color: #919582; line-height: 1.8; margin-top: 6px; }
.story-text { white-space: pre-line; font-size: 12px; line-height: 2; color: #707965; margin: 17px 0 8px; }
.story-actions { position: relative; z-index: 1; flex: 0 0 auto; display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 0; padding: 16px 23px 19px; border-top: 1px solid #e4e6da; background: #f7f5edf5; backdrop-filter: blur(12px); }
.story-actions button { background: transparent; padding: 9px 4px; font-size: 11px; color: #667958; border-radius: 4px; white-space: nowrap; }
.story-actions #next-story { color: #455e34; }
.story-actions button:hover { color: #a56943; background: #e9eddf; }
.story-actions button > span { margin: 0 3px; }
#story-media-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 8px; }
.media-choice { position: relative; width: 58px; height: 49px; border: 1px solid #d6dccb; border-radius: 5px; background: #dfe4d6; overflow: hidden; padding: 0; color: #596b50; outline-offset: 3px; }
.media-choice[aria-pressed=true] { border: 2px solid #778a63; box-shadow: 0 0 0 2px #e4e9da; }
.media-choice img { width: 100%; height: 100%; object-fit: cover; }
.media-choice > span:first-child { font-size: 24px; line-height: 40px; }
.media-choice > span:last-child { position: absolute; right: 3px; bottom: 3px; font-size: 8px; background: #f9f9efdf; padding: 2px 4px; border-radius: 3px; }
.about-dialog { width: 480px; max-width: calc(100vw - 30px); max-height: calc(100dvh - 36px); padding: 43px; overflow: auto; }
.about-dialog p { font-size: 12px; line-height: 2; color: #7a836e; }
.about-dialog h2 { font-size: 26px; }
.about-dialog .about-signature { margin-top: 30px; font-size: 9px; letter-spacing: 1px; color: #969d88; }
.about-signature span { margin: 0 6px; }
#loading { position: absolute; inset: 0; background: #eeeee6; z-index: 10; display: grid; align-content: center; justify-items: center; transition: opacity .5s; pointer-events: none; }
#loading p { font-size: 12px; letter-spacing: 2px; color: #84916f; }
.loader-house { font: 65px Georgia; color: #5b7150; animation: breathe 1s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: translateY(-5px); opacity: .6; } }
#fallback { position: absolute; z-index: 3; left: 36%; top: 30%; padding: 30px; background: #f8f7ef; border-radius: 10px; max-width: 480px; font-size: 13px; }
#fallback button { background: #57694b; color: white; padding: 10px 15px; border-radius: 4px; }
body.story-open .top-controls { right: calc(var(--story-space) + 24px); }
body.story-open .intro, body.close-view .intro, body.explored .intro { opacity: 0; visibility: hidden; pointer-events: none; }
body.story-open .scene-help { opacity: .75; }
body.night { --ink: #ddd9bf; --muted: #89918b; color: #ece7d5; background: #292f3b; }
body.night .intro h1 { color: #f1e8d3; }
body.night .intro p, body.night .list-kicker, body.night .scene-help { color: #a3afa5; }
body.night .story-list-item { color: #bbc5ad; }
body.night .icon-button { color: #d9dfcc; border-color: #74806b; background: #29332e80; }
body.night .top-controls { background: #303b36bd; border-color: #ffffff1a; }
body.night .pill { color: #c4c9b4; }
body.night .pill.active { background: #576247; color: #fbf5d8; }
body.night .room-actions { background: #344138dc; border-color: #ffffff20; }
body.night .room-actions button { color: #d0d7bf; }
body.night .room-actions button:hover { background: #49563e; color: #fff6dc; }
body.night .action-divider { background: #ffffff20; }
body.instant-camera-active .masthead, body.instant-camera-active .intro,
body.instant-camera-active .memory-list, body.instant-camera-active .top-controls,
body.instant-camera-active #object-controls,
body.instant-camera-active #object-hint, body.instant-camera-active .scene-footer { opacity: 0; pointer-events: none; visibility: hidden; }
@media (min-width: 1600px) {
  .intro { top: 25%; }
  h1 { font-size: 43px; }
  .memory-list { bottom: 125px; }
  :root { --story-width: 400px; --story-space: 434px; }
}
@media (max-width: 1100px) {
  .intro { left: 30px; top: 19%; }
  h1 { font-size: 28px; letter-spacing: 2px; }
  h1 span { font-size: 16px; }
  h1 span br { display: block; }
  .memory-list { left: 30px; width: 180px; bottom: 105px; }
  .edition { display: none; }
  .masthead { left: 28px; right: 28px; }
  .top-controls { right: 28px; }
  .scene-footer { left: 28px; right: 24px; }
  :root { --story-width: 350px; --story-space: 382px; }
  .story-dialog { right: 20px; }
}
@media (max-width: 760px) {
  :root { --story-sheet: 44dvh; }
  .masthead { top: 21px; left: 22px; right: 22px; }
  .wordmark { font-size: 9px; gap: 9px; letter-spacing: 1.5px; }
  .wordmark .mark { font-size: 39px; }
  .icon-button { width: 30px; height: 30px; font-size: 15px; }
  .intro { left: 24px; top: 96px; }
  .intro .eyebrow { font-size: 7px; letter-spacing: 1.6px; }
  .intro h1 { font-size: 26px; margin: 9px 0 0; letter-spacing: 2px; }
  .intro h1 span { font-size: 12px; letter-spacing: 1px; margin-top: 2px; }
  .intro h1 span br { display: none; }
  .intro p { display: none; }
  .tour-button { font-size: 10px; padding: 8px 12px; margin-top: 13px; letter-spacing: 1px; }
  .top-controls { top: 86px; right: 19px; padding: 3px; flex-direction: column; }
  .pill { padding: 8px 10px; font-size: 9px; }
  .memory-list { left: 24px; right: 24px; bottom: 105px; width: auto; }
  .list-kicker { display: none; }
  #story-list { display: flex; gap: 20px; overflow: auto; scrollbar-width: none; }
  .story-list-item { flex: 0 0 auto; width: auto; gap: 6px; font-size: 10px; padding: 9px 0; }
  .story-list-item span:last-child { display: none; }
  .scene-footer { left: 18px; right: 16px; bottom: max(19px,env(safe-area-inset-bottom)); gap: 13px; }
  .scene-help { max-width: 137px; font-size: 8px; line-height: 1.9; letter-spacing: .1px; }
  .scene-help span { margin: 0 2px; }
  .room-actions { gap: 2px; padding: 4px 5px; }
  .room-actions button { padding: 7px 8px; font-size: 10px; min-height: 35px; }
  .room-actions button > span { margin-right: 1px; font-size: 13px; }
  body.story-open .top-controls { right: 19px; }
  body.story-open .scene-footer { bottom: calc(var(--story-sheet) + 13px); justify-content: flex-end; }
  body.story-open .scene-help { display: none; }
  .story-dialog { position: absolute; inset: auto 0 0 0; width: 100%; max-width: none; height: var(--story-sheet); max-height: 48dvh; border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -8px 38px #25321d16; }
  .story-dialog[open] { animation-name: story-rise; }
  .story-image { min-height: 110px; height: 160px; max-height: 20dvh; aspect-ratio: auto; }
  .story-image > span { bottom: 12px; }
  .story-body { padding: 20px 24px 12px; }
  .story-body h2 { font-size: 23px; margin-top: 10px; }
  .story-text { font-size: 12px; line-height: 1.95; margin-top: 14px; }
  .story-actions { padding: 10px 23px max(12px,env(safe-area-inset-bottom)); margin-top: 0; }
  .about-dialog { padding: 36px 25px; }
  .about-dialog h2 { font-size: 24px; }
  #fallback { left: 20px; right: 20px; top: 35%; font-size: 11px; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .intro { top: 21%; }
  .intro h1 { font-size: 29px; }
  .intro h1 span, .intro p { display: none; }
  .memory-list { bottom: 98px; }
  .list-kicker { margin-bottom: 8px; }
  .story-list-item { padding: 5px 0; }
  .story-dialog { top: 78px; bottom: 84px; height: calc(100% - 162px); }
  .story-image { min-height: 150px; max-height: 190px; }
  .top-controls { top: 86px; }
}
/* Stories stay on the objects. The directory is an optional, scrollable surface
   rather than a growing list layered over the room. */
.header-right { gap: 16px; }
.memories-button { border: 1px solid #cdd2c27a; border-radius: 20px; padding: 9px 13px; background: #f7f6edbf; color: #67775a; font-size: 11px; letter-spacing: 1px; }
.memories-button span { margin-left: 7px; opacity: .6; }
.intro { left: 40px; top: 122px; max-width: 250px; }
.intro h1 { font-size: 29px; margin: 0 0 14px; line-height: 1.55; letter-spacing: 2px; }
.intro h1 span { font-size: 12px; letter-spacing: 1px; line-height: 1.8; margin-top: 8px; }
.intro .tour-button { padding: 10px 14px; font-size: 11px; }
.memory-list { position: absolute; z-index: 8; inset: 79px 39px auto auto; margin: 0; width: 260px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 175px); padding: 18px 21px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; color: #69745f; background: #f7f6edf5; backdrop-filter: blur(16px); box-shadow: 0 10px 40px #25321d1c; }
.memory-list[open] { animation: story-arrive .2s ease-out; }
.memories-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.memories-heading .list-kicker { display: block; margin: 0; color: #87907b; }
.memories-heading button { background: transparent; font-size: 22px; color: #7f8975; padding: 0 4px; }
#story-list { display: block; overflow: visible; }
.story-list-item { width: 100%; min-height: 43px; padding: 10px 0; gap: 13px; font-size: 12px; color: #69745f; border-bottom: 1px solid #d6dbcc75; }
.story-list-item:last-child { border-bottom: 0; }
.story-list-item span:last-child { display: block; }
body.night .memory-list .story-list-item { color: #69745f; }
body.night .memories-button { background: #465044; color: #e1e6d4; border-color: #7c897866; }
/* The entire sidebar is real frosted glass over the full-size room canvas. */
.story-dialog{background:rgba(246,245,237,.88)}
.story-scroll,.story-actions{z-index:2}
/* A flex/grid content item creates a stacking context; close stays above it. */
.story-dialog>.close-dialog{z-index:4;touch-action:manipulation}
.story-image{display:flex;justify-content:center;align-items:center;overflow:hidden;background:#e8eadf78}
.story-image img,.story-image video{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:transparent}
.story-image img[hidden],.story-image video[hidden]{display:none}
.portrait-media{--story-width:min(600px,48vw);--story-space:calc(var(--story-width) + 48px)}
.portrait-media .story-scroll{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:23px;padding:26px 24px 20px;overflow:hidden}
.story-image[data-orientation=portrait]{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:9px;aspect-ratio:auto;width:100%;height:100%;min-width:0;min-height:0;max-height:none;padding:0;background:transparent;backdrop-filter:none}
.story-image[data-orientation=portrait] img,.story-image[data-orientation=portrait] video{grid-area:1/1;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;border-radius:5px}
.portrait-media .story-body{align-self:center;max-height:100%;min-width:0;overflow:auto;padding:0 3px 0 0;scrollbar-width:thin;scrollbar-color:#b9c3ad transparent}
.portrait-media .story-body h2{font-size:24px;line-height:1.55;margin:13px 0 10px}
.portrait-media .story-text{margin:14px 0 0}
.story-image>span{z-index:2;bottom:auto;top:11px}
.story-image:has(video:not([hidden]))>span{bottom:auto;top:11px}
.story-image[data-orientation=portrait]>span{position:static;grid-row:2;max-width:100%;font-size:10px;line-height:1.6;letter-spacing:.3px;color:#737c67;background:transparent;padding:0;text-align:center}
.story-actions{background:#f7f6ede0}
@media (max-width: 760px) {
  .intro { left: 24px; top: 105px; max-width: calc(100vw - 142px); }
  .intro h1 { font-size: 23px; letter-spacing: 1px; }
  .intro h1 span { font-size: 11px; display: block; }
  .intro .tour-button { padding: 8px 11px; font-size: 10px; margin-top: 0; }
  .header-right { gap: 9px; }
  .memories-button { padding: 8px 10px; font-size: 10px; }
  .memory-list { inset: 68px 20px auto auto; width: 250px; max-height: calc(100dvh - 156px); }
  #story-glass{--story-placement:bottom;inset:auto 0 0;width:100%;height:var(--story-sheet);border-left:0;border-top:1px solid #ffffff40;transition:opacity .4s,height .4s}
  body.portrait-media{--story-sheet:52dvh}
  body.portrait-media .story-dialog{max-height:56dvh}
  .portrait-media .story-scroll{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:15px;padding:23px 18px 17px}
  .portrait-media .story-body h2{font-size:19px;line-height:1.5;margin-top:10px}
  .portrait-media .story-body .eyebrow{font-size:8px;letter-spacing:1px}
  .portrait-media .story-text{font-size:11px;line-height:1.9}
  .portrait-media .story-subtitle{font-size:9px}
}
@media(max-width:359px){
  .portrait-media .story-scroll{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:11px;padding:22px 12px 15px}
  .portrait-media .story-body h2{font-size:17px}
}
@media (max-height: 640px) and (min-width: 761px) {
  .intro { top: 96px; }
  .intro h1 { font-size: 24px; }
  .intro h1 span { display: none; }
}
/* On larger screens, size the reading area around the media, not a fixed card.
   A tall clip uses nearly the available height; text gets a narrower column. */
@media (min-width:761px) {
  body{--story-width:min(660px,56vw);--story-space:calc(var(--story-width) + 36px)}
  body.portrait-media{--story-width:min(62vw,calc((100dvh - 128px) * var(--story-aspect,.5625) + 252px))}
  .story-dialog{inset:20px 18px 20px auto;width:var(--story-width);height:calc(100% - 40px);border:1px solid #ffffff45;border-radius:12px;background:#f4f3eabc;box-shadow:0 8px 30px #25321d10}
  .story-scroll{display:flex;flex-direction:column;padding:12px 12px 0;overflow:hidden}
  .story-image,.story-image[data-orientation=portrait]{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;flex:1 1 0;aspect-ratio:auto;width:100%;height:100%;min-height:0;max-height:none;background:transparent}
  .story-image img,.story-image video{grid-area:1/1;min-height:0;border-radius:6px}
  .story-image>span,.story-image:has(video:not([hidden]))>span{position:static;grid-row:2;max-width:100%;font-size:10px;line-height:1.6;letter-spacing:.3px;color:#737c67;background:transparent;padding:0;text-align:center}
  .story-body{flex:0 1 auto;max-height:32dvh;min-height:0;overflow:auto;padding:10px 12px 12px;scrollbar-width:thin}
  .story-body h2{font-size:24px;line-height:1.5;margin:8px 0}
  .story-text{margin-top:10px}
  .portrait-media .story-scroll{display:grid;grid-template-columns:minmax(0,1fr) 208px;grid-template-rows:minmax(0,1fr);gap:20px;padding:12px 12px 8px}
  .portrait-media .story-body{max-height:calc(100% - 52px);padding:0 6px 0 0}
  .story-actions{padding:4px 18px 8px;border-top:0;background:transparent;backdrop-filter:none}
  .story-actions button{min-height:36px}
  .story-dialog>.close-dialog{top:8px;right:8px;width:36px;height:36px;background:#f6f5ecc7;box-shadow:none}
  body.story-open .header-right,body.story-open .scene-footer{visibility:hidden;pointer-events:none}
  body.story-open .top-controls{top:94px;right:calc(var(--story-space) + 18px)}
}
/* A portrait tablet has room for a broad sheet, not a narrow desktop sidebar. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait) {
  body{--story-sheet:62dvh}
  #story-glass{--story-placement:bottom;inset:auto 0 0;width:100%;height:var(--story-sheet);border-left:0;border-top:1px solid #ffffff40;transition:opacity .4s,height .4s}
  .story-dialog{inset:auto 12px 12px;width:calc(100% - 24px);max-width:none;height:calc(var(--story-sheet) - 24px)}
  .story-dialog[open]{animation-name:story-rise}
  .portrait-media .story-scroll{grid-template-columns:minmax(0,1fr) minmax(208px,.55fr);gap:24px;padding:12px 20px 8px}
  body.story-open .top-controls{top:104px;right:28px}
  .story-body{max-height:22dvh}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}