@charset "UTF-8";
:root{--paper:#eee8dc;--scene-control-bg:#eee8dce8;--ink:#343e35;--muted:#868676;--red:#9b4534;--line:#c7c5b6;--serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red);outline-offset:5px}button:disabled{cursor:wait;opacity:.5}a{color:inherit;text-decoration:none}svg{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}button svg{width:21px;height:21px}button:hover{color:var(--red)}[hidden]{display:none!important}.paper-grain{position:fixed;inset:0;pointer-events:none;z-index:15;opacity:.105;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.79' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23807659' opacity='.5' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.site-header{height:91px;margin:0 44px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:13px}.seal{display:block;background:var(--red);color:#f1e7d0;border:3px double #eee1c9;outline:1px solid var(--red);font-family:var(--serif);font-size:19px;line-height:20px;padding:3px 6px;transform:rotate(-3deg)}.brand-name{font-family:var(--serif);font-size:25px;letter-spacing:6px}.brand-en{font-family:Georgia,serif;display:block;font-size:8px;letter-spacing:2.1px;margin-top:4px}.main-nav{display:flex;gap:43px;height:100%;align-items:center;margin-left:10px}.nav-item{position:relative;height:100%;font-size:13px;letter-spacing:2px;padding:0 4px;color:#73796b}.nav-item.active{color:#3b4439}.nav-item.active:after{content:"";position:absolute;bottom:-1px;left:50%;width:25px;transform:translateX(-50%);height:2px;background:var(--red)}.external-icon{font-size:15px;margin-left:6px}.header-right{display:flex;align-items:center;gap:25px}.edition{color:var(--muted);font-size:10px;letter-spacing:2px}.icon-btn{width:37px;height:37px;display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:background .2s}.icon-btn:hover{background:#a6947915}.icon-btn[aria-pressed=true]{color:var(--red)}
#experience{position:relative;height:calc(100dvh - 135px);min-height:560px;max-height:1300px}.intro{position:absolute;left:58px;top:46px;z-index:3;pointer-events:none}.eyebrow{display:flex;gap:11px;align-items:center;font-family:var(--serif);font-size:12px;letter-spacing:3px;color:#6a725f}.eyebrow>span{width:20px;height:1px;background:#7e826e}h1{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.25;letter-spacing:7px;margin:25px 0 18px}h1 span{display:block}.title-caption{font-family:var(--serif);font-size:16px;letter-spacing:3px;color:#58624f}.intro-rule{width:33px;height:1px;background:#b5b6a4;margin:23px 0}.intro-copy{font-family:var(--serif);font-size:12px;line-height:2.15;color:#828471;letter-spacing:2px}.work-tag{margin-top:22px;display:flex;gap:8px;align-items:center;color:#868776;font-size:9px;letter-spacing:1px}.red-dot{width:4px;height:4px;background:var(--red);border-radius:100%}.scene-container{position:absolute;left:235px;top:0;right:0;bottom:129px;outline:none!important;touch-action:none}.scene-container canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.scene-container canvas:active{cursor:grabbing}.season-note{position:absolute;top:40px;right:53px;z-index:3;display:flex;align-items:center;gap:14px;font-size:10px;color:#898976;pointer-events:none}.season-line{width:27px;height:1px;background:#a6aa90}.season-cn{font-family:var(--serif);color:#58624e;letter-spacing:2px;font-size:13px}.weather-icon{font-size:25px;color:#8f9476}.river-caption{position:absolute;right:17%;top:49%;font-family:var(--serif);font-size:24px;writing-mode:vertical-rl;color:#6f816e;opacity:.45;letter-spacing:10px;pointer-events:none;transform:rotate(-10deg)}.river-caption span{margin-top:9px}.place-story{position:absolute;bottom:164px;left:58px;width:215px;z-index:4;border-top:1px solid #bdc0aa;padding-top:16px}.story-number{font-family:Georgia,serif;font-size:10px;letter-spacing:3px;color:var(--red)}.place-story h2{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:4px;margin:12px 0}.place-story p{font-family:var(--serif);color:#858775;line-height:1.9;font-size:11px;letter-spacing:1px;margin:0}.text-link{padding:14px 0 0;font-size:10px;letter-spacing:1px;color:#68715b}.text-link span{margin-left:15px}.viewer-toolbar{position:absolute;bottom:158px;left:calc(50% + 15px);transform:translateX(-50%);border:1px solid #b9baa66b;border-radius:30px;padding:4px 9px;display:flex;gap:5px;align-items:center;background:#eee8dcd9;z-index:5;box-shadow:0 3px 15px #60583905}.toolbar-divider{height:16px;width:1px;background:#c6c6b4;margin:0 4px}.gesture-hint{position:absolute;bottom:137px;left:calc(50% + 15px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:9px;color:#858c78;white-space:nowrap}.gesture-hint>span{font-size:15px}.gesture-hint i{width:2px;height:2px;border-radius:100%;background:#aaa997}.chapter-bar{position:absolute;bottom:0;left:44px;right:44px;height:110px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px}.chapter-label{width:151px;flex-shrink:0}.chapter-label>span{display:block;font-family:var(--serif);font-size:16px;letter-spacing:4px}.chapter-label small{display:block;font-family:Georgia,serif;font-size:7px;letter-spacing:1.5px;color:#999783;margin-top:9px}.chapter{position:relative;display:flex;align-items:center;text-align:left;padding:10px 12px;gap:13px;flex:1;min-width:0;height:79px;border:1px solid transparent;transition:background .25s,border-color .25s}.chapter.active{border-color:#9b453459;background:#f6f0e43d}.chapter.active:after{content:"";position:absolute;bottom:-1px;left:15px;width:22px;height:2px;background:var(--red)}.chapter:hover{background:#fff3}.chapter-thumb{height:56px;width:56px;flex-shrink:0;background-image:url('assets/reference.jpg');background-size:385px 159px;filter:sepia(.4) saturate(.55);mix-blend-mode:multiply;border:1px solid #88755128}.thumb-bridge{background-position:63% 13%}.thumb-market{background-position:39% 86%}.thumb-boats{background-position:84% 24%}.thumb-teahouse{background-position:78% 98%}.chapter-text{white-space:nowrap}.chapter-text small{display:block;font-size:9px;color:#959480;letter-spacing:1px;margin-bottom:9px}.chapter-text strong{font-family:var(--serif);font-size:16px;letter-spacing:2px;font-weight:400}.chapter.active strong{color:var(--red)}.chapter-arrow{font-size:17px;color:#8a937d;margin-left:auto;align-self:flex-end;padding-bottom:1px}footer{height:44px;padding:0 45px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:#929480}footer b{font-weight:400;margin:0 8px}
.hotspots{position:absolute;inset:0;pointer-events:none;overflow:hidden}.hotspot{pointer-events:auto;position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:opacity .25s;will-change:transform}.hotspot:before{content:"";width:6px;height:6px;background:#f9f2d8;border:2px solid #967954;border-radius:100%;box-shadow:0 0 0 4px #f9f2d855}.hotspot span{font-family:var(--serif);font-size:11px;letter-spacing:2px;padding:6px 10px;background:#eee8dce6;box-shadow:0 1px 7px #5e60330e;border:1px solid #aaa78a40}.hotspot.selected:before{background:var(--red);border-color:#efe9da;box-shadow:0 0 0 1px var(--red)}.hotspot.selected span{color:var(--red)}.loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--paper);z-index:10;transition:opacity .8s}.loading.done{opacity:0;pointer-events:none}.loading-seal{color:var(--red);border:1px solid var(--red);padding:10px;font:35px var(--serif);animation:breathe 1.5s ease-in-out infinite}.loading p{font:13px var(--serif);letter-spacing:3px;margin-top:24px;color:#7a806b}@keyframes breathe{50%{opacity:.4}}.settings-panel{position:absolute;z-index:22;bottom:216px;left:calc(50% - 20px);width:265px;padding:22px;background:#f1ebdff5;border:1px solid #bebaa4;box-shadow:0 10px 45px #4a473017}.panel-title{font:18px var(--serif);letter-spacing:2px;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.small-close{font:23px Georgia;line-height:1;padding:0 4px;color:#858773}.settings-panel label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#69705e;margin-top:20px}.settings-panel label span{font-size:9px;color:#9a9884}.settings-panel input[type=range]{width:100%;accent-color:#606f53;height:2px;margin:17px 0 4px;cursor:pointer}.toggle-row input{accent-color:#647457}.reference-panel{position:absolute;z-index:21;left:310px;right:50px;top:30px;box-shadow:0 10px 50px #55473225;border:1px solid #b7aa87;background:#eee5d3;padding:17px}.reference-heading{display:flex;justify-content:space-between;align-items:center;font:17px var(--serif);letter-spacing:2px;margin-bottom:15px}.reference-heading small{font:10px var(--sans);color:#8a806b;margin-left:15px;letter-spacing:1px}.reference-panel img{display:block;width:100%;height:auto;border:1px solid #998c6c55}.reference-panel p{font-size:9px;letter-spacing:1px;color:#958b74;margin:14px 0 0}.reference-open .season-note{visibility:hidden}dialog{width:460px;max-width:calc(100vw - 32px);border:1px solid #b6b099;padding:43px;color:#47513f;background:#f1eadd;box-shadow:0 25px 110px #1e291b33}dialog::backdrop{background:#2633204d;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:16px;top:14px;font:26px Georgia;color:#8c8d76}.dialog-kicker{color:#9b4534;font-size:10px;letter-spacing:3px}dialog h2{font:30px var(--serif);letter-spacing:5px;margin:20px 0}#dialog-content{font:14px/2.1 var(--serif);color:#747860}#dialog-content p{margin:0 0 17px}#dialog-content ul{padding-left:19px;font:12px/2.3 var(--sans)}#dialog-content strong{color:#535f49;font-weight:500}.dialog-confirm{font:12px var(--sans);margin-top:17px;width:100%;border-top:1px solid #c8c3ae;padding:18px 0 0;text-align:left;letter-spacing:2px}.dialog-confirm span{float:right;font-size:19px}#toast{position:fixed;left:50%;bottom:160px;transform:translate(-50%,8px);background:#485440ed;color:#f3ebd9;padding:12px 23px;z-index:40;font-size:11px;letter-spacing:1px;opacity:0;pointer-events:none;transition:.3s}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-height:1000px){.intro{top:75px}.place-story{bottom:190px}.scene-container{bottom:145px}.viewer-toolbar{bottom:180px}.gesture-hint{bottom:155px}}
@media(max-width:1200px){.site-header{margin:0 28px}.chapter-bar{left:28px;right:28px;gap:8px}.intro{left:40px}.place-story{left:40px;width:185px}.chapter-label{width:116px}.chapter{padding:8px;gap:8px}.chapter-thumb{width:43px;height:51px}.chapter-text strong{font-size:14px}.chapter-arrow{display:none}.chapter-text small{font-size:8px}.intro-copy{font-size:11px}h1{font-size:51px}.season-note{right:35px}.scene-container{left:190px}}
@media(max-height:800px) and (min-width:801px){#experience{min-height:470px}.site-header{height:75px}#experience{height:calc(100dvh - 111px)}footer{height:36px}.intro{top:28px}h1{font-size:44px;margin:17px 0 12px}.title-caption{font-size:13px}.intro-rule{margin:17px 0}.intro-copy{line-height:1.9}.work-tag{margin-top:13px}.place-story{bottom:136px;padding-top:12px;width:180px}.place-story p{font-size:10px}.place-story h2{font-size:18px;margin:9px 0}.chapter-bar{height:96px}.chapter{height:74px}.scene-container{bottom:108px}.viewer-toolbar{bottom:128px}.gesture-hint{bottom:108px}.season-note{top:28px}.settings-panel{bottom:180px}}
@media(max-width:800px){body{overflow:auto}.site-header{height:75px;margin:0 20px}.brand-name{font-size:21px}.brand-en{font-size:6px}.seal{font-size:16px;line-height:17px;padding:3px 5px}.header-right{gap:0}.edition{display:none}.main-nav{gap:17px;margin-left:10px}.nav-item{font-size:11px;letter-spacing:1px}.external-icon{display:none}#experience{height:calc(100dvh - 110px);min-height:660px}.intro{left:25px;top:25px}.eyebrow{font-size:10px}.intro h1{font-size:35px;letter-spacing:4px;line-height:1.2;margin:13px 0}.intro h1 span{display:inline}.title-caption{font-size:12px;letter-spacing:2px}.intro-rule,.intro-copy,.work-tag{display:none}.scene-container{left:0;right:0;top:76px;bottom:207px}.season-note{right:23px;top:128px;gap:9px}.season-line,.season-note #time-label{display:none}.season-cn{font-size:11px}.weather-icon{font-size:20px}.place-story{left:25px;bottom:132px;width:55%;border:0;padding:0}.story-number{font-size:8px}.place-story h2{font-size:18px;letter-spacing:2px;margin:7px 0}.place-story p{font-size:10px;line-height:1.8;letter-spacing:.4px}.text-link{display:none}.viewer-toolbar{left:auto;right:20px;bottom:139px;transform:none;padding:3px;border-radius:3px;display:grid;grid-template-columns:repeat(3,31px);gap:0}.viewer-toolbar .icon-btn{width:31px;height:31px;padding:7px}.toolbar-divider{display:none}.gesture-hint{left:50%;bottom:238px;font-size:8px}.chapter-bar{left:20px;right:20px;height:111px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;align-items:center}.chapter-label{display:none}.chapter{height:78px;padding:8px;display:block;text-align:center}.chapter-thumb{display:none}.chapter-text small{font-size:8px;letter-spacing:0;margin-bottom:10px}.chapter-text strong{font-size:14px;letter-spacing:1px}.chapter.active:after{left:calc(50% - 11px)}.chapter-arrow{display:none}footer{height:35px;padding:0 23px;font-size:8px;letter-spacing:1px}footer>span:nth-child(2){display:none}.river-caption{right:16%;font-size:17px;top:44%}.settings-panel{left:auto;right:22px;bottom:215px}.reference-panel{left:20px;right:20px;top:200px;padding:12px}.reference-heading{font-size:14px}.reference-heading small{font-size:8px;display:block;margin:6px 0 0}.reference-panel p{font-size:8px;line-height:1.8}.hotspot span{font-size:10px;padding:4px 7px}.hotspot{gap:4px}#toast{bottom:250px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.capture-preview{display:block;width:100%;height:auto;border:1px solid #b9b19a}.capture-caption{margin:13px 0!important;font-size:12px!important}.capture-download{display:block;text-align:center;padding:9px 15px;background:#4b5d45;color:#f3ecdd;font:12px/1.8 var(--sans);letter-spacing:2px}.capture-download:hover{background:#68775b}
.character-controls{position:absolute;bottom:220px;left:calc(50% + 15px);transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:7px 12px;border:1px solid #b9b5a0;background:#f0eaddeb;z-index:6;box-shadow:0 3px 16px #4b49330b;white-space:nowrap;font-size:10px}.character-control-label{font:14px var(--serif);letter-spacing:2px;margin-right:2px}.character-views,.character-motions{display:flex;gap:2px}.character-controls button{padding:7px 9px;letter-spacing:1px;border-bottom:1px solid transparent}.character-controls button[aria-pressed=true]{color:var(--red);background:#9b453409;border-bottom-color:var(--red)}.character-control-divider{height:17px;width:1px;background:#c4c1ae}.character-following .gesture-hint{visibility:hidden}@media(max-width:800px){.character-controls{bottom:212px;left:50%;gap:5px;padding:5px 7px;max-width:calc(100vw - 34px)}.character-control-label{display:none}.character-controls button{padding:6px 8px;font-size:10px}}@media(max-height:800px) and (min-width:801px){.character-controls{bottom:184px}}
.season-note{pointer-events:auto;flex-direction:column;align-items:flex-end;gap:8px;z-index:6}.season-heading{display:flex;align-items:center;gap:12px;pointer-events:none}.season-switch{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #b7b4a16b;background:#eee8dce8;box-shadow:0 2px 12px #60583908}.season-switch button{width:34px;height:30px;position:relative;font:15px var(--serif);color:#737967;transition:background .25s,color .25s}.season-switch button:hover{background:#fff5;color:var(--red)}.season-switch button[aria-pressed=true]{color:var(--red);background:#9b45340c}.season-switch button[aria-pressed=true]:after{content:"";position:absolute;bottom:1px;left:12px;right:12px;height:1px;background:var(--red)}@media(max-width:800px){.season-note{top:124px;gap:5px}.season-heading{gap:8px}.season-switch{padding:2px;gap:1px}.season-switch button{width:30px;height:29px;font-size:14px}.season-switch button[aria-pressed=true]:after{left:10px;right:10px}}
.scene-switches{display:flex;gap:7px;align-items:center}.time-switch{display:flex;gap:3px;padding:3px;border:1px solid #b7b4a16b;background:var(--scene-control-bg)}.time-switch button{width:34px;height:30px;position:relative;font:15px var(--serif);color:#737967}.time-switch button:hover{background:#fff5;color:var(--red)}.time-switch button[aria-pressed=true]{color:var(--red);background:#9b45340c}.time-switch button[aria-pressed=true]:after{content:"";position:absolute;bottom:1px;left:12px;right:12px;height:1px;background:var(--red)}
body[data-time=night]{--paper:#1d2830;--scene-control-bg:#26353deb;--ink:#dbd6c5;--muted:#a2b1b0;--line:#465459;--red:#ddac76;background:var(--paper);color:var(--ink)}body[data-time=night] .nav-item,body[data-time=night] .nav-item.active,body[data-time=night] .eyebrow,body[data-time=night] .title-caption,body[data-time=night] .intro-copy,body[data-time=night] .work-tag,body[data-time=night] .place-story p,body[data-time=night] .season-cn,body[data-time=night] .season-note,body[data-time=night] .weather-icon,body[data-time=night] .gesture-hint,body[data-time=night] footer,body[data-time=night] .text-link{color:#aebfbd}body[data-time=night] .place-story h2,body[data-time=night] h1{color:#e3ddcc}body[data-time=night] .season-switch,body[data-time=night] .time-switch,body[data-time=night] .viewer-toolbar,body[data-time=night] .character-controls,body[data-time=night] .settings-panel,body[data-time=night] .hotspot span{background:var(--scene-control-bg);border-color:#6a756a80;color:#c6cdbf}body[data-time=night] .season-switch button,body[data-time=night] .time-switch button,body[data-time=night] .settings-panel label,body[data-time=night] .chapter-text small{color:#acbbb6}body[data-time=night] .season-switch button[aria-pressed=true],body[data-time=night] .time-switch button[aria-pressed=true]{color:var(--red);background:#dfbd7910}body[data-time=night] .chapter.active{background:#d9ae7610;border-color:#9e835c}body[data-time=night] .river-caption{color:#8b9e9e}body[data-time=night] dialog{background:#26353d;color:#ded6c1;border-color:#66716c}body[data-time=night] #dialog-content,body[data-time=night] #dialog-content strong{color:#bfc7bd}body[data-time=night] .hotspot:before{background:#c9b58a}body[data-time=night] .reference-panel{background:#26353d;color:#d7cfb7}body[data-time=night] .reference-heading small,body[data-time=night] .reference-panel p{color:#b5b5a4}
@media(max-width:800px){.scene-switches{gap:5px}.time-switch{padding:2px;gap:1px}.time-switch button{width:28px;height:29px;font-size:14px}.time-switch button[aria-pressed=true]:after{left:9px;right:9px}}

/* Reserve one shared text column so neither title nor story enters WebGL. */
@media(min-width:801px){
  #experience{--intro-column:clamp(270px,24vw,340px);--intro-inset:clamp(30px,4.2vw,58px);--intro-gap:22px}
  .intro,.place-story{left:var(--intro-inset);width:calc(var(--intro-column) - var(--intro-inset) - var(--intro-gap));max-width:none;overflow-wrap:anywhere}
  .scene-container{left:var(--intro-column)}
  .scene-container canvas{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px);mask-image:linear-gradient(to right,transparent,#000 28px)}
  .intro h1{font-size:clamp(44px,4.2vw,58px);letter-spacing:clamp(4px,.42vw,6px);max-width:100%}
  .title-caption{font-size:clamp(13px,1.18vw,16px);letter-spacing:clamp(1.2px,.16vw,2.2px);line-height:1.65;max-width:100%;overflow-wrap:anywhere}
  .intro-copy{max-width:100%;letter-spacing:clamp(1px,.14vw,2px)}
  .work-tag{max-width:100%;flex-wrap:wrap}
}
@media(min-width:801px) and (max-height:720px){
  .intro{top:22px}
  .intro h1{font-size:40px;line-height:1.16;margin:13px 0 12px}
  .intro-rule,.intro-copy,.work-tag{display:none}
}
/* Mobile keeps its compact stacked view, with an explicit title/control band. */
@media(max-width:800px){
  .intro{left:22px;top:17px;width:calc(100% - 44px);max-width:none}
  .intro h1{font-size:clamp(28px,5.8vw,36px);line-height:1.15;letter-spacing:3px;margin:11px 0 8px}
  .intro h1 span{display:inline}
  .title-caption{font-size:12px;line-height:1.4;letter-spacing:1.8px;max-width:100%;overflow-wrap:anywhere}
  .season-note{top:108px;right:20px}
  .scene-container{left:0;right:0;top:154px}
  .scene-container canvas{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30px);mask-image:linear-gradient(to bottom,transparent,#000 30px)}
  .place-story{max-width:calc(100% - 144px);overflow-wrap:anywhere}
}
.hotspots[hidden]{display:none}
.chapter-label{padding:0;text-align:left;cursor:pointer;align-self:center}
.chapter-label:hover>span,.chapter-label:focus-visible>span{color:var(--red)}
.chapter-label:focus-visible{outline:1px solid var(--red);outline-offset:5px}
@media(max-width:800px){.viewer-toolbar{grid-template-columns:repeat(2,31px)}}

/* Keep the rendering switch alongside the season and daylight controls. */
.scene-switches{--scene-control-height:38px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 40px)}
.scene-switches>:is(.season-switch,.time-switch,.ink-style-switch){height:var(--scene-control-height);min-height:var(--scene-control-height);align-items:center}
.ink-style-switch{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 10px;border:1px solid #b7b4a16b;background:var(--scene-control-bg);color:#737967;font-size:11px;letter-spacing:1px;white-space:nowrap;transition:background .2s,color .2s}
.ink-style-switch:hover{color:var(--red)}
.ink-style-switch[aria-pressed=true]{color:var(--red)}
.ink-switch-track{position:relative;width:25px;height:13px;flex:none;border:1px solid #969c896b;border-radius:9px;background:#969c892b;transition:background .2s,border-color .2s}
.ink-switch-track:after{content:"";position:absolute;left:2px;top:2px;width:7px;height:7px;border-radius:50%;background:#858b78;transition:transform .2s,background .2s}
.ink-style-switch[aria-pressed=true] .ink-switch-track{border-color:#9b453475;background:#9b45341c}
.ink-style-switch[aria-pressed=true] .ink-switch-track:after{background:var(--red);transform:translateX(12px)}
body[data-time=night] .ink-style-switch{background:var(--scene-control-bg);border-color:#6a756a80;color:#acbbb6}
body[data-time=night] .ink-style-switch:hover{color:var(--red)}
body[data-time=night] .ink-style-switch[aria-pressed=true]{color:var(--red)}
body[data-time=night] .ink-style-switch[aria-pressed=true] .ink-switch-track{background:#ddac7624;border-color:#ddac7680}
@media(max-width:800px){.scene-switches{--scene-control-height:35px}.ink-style-switch{padding:0 8px;font-size:10px;gap:6px}}
@media(max-width:340px){.scene-container{top:195px}}

/* Ink daylight keeps the warm silk ground of the original scroll. */
body[data-ink-style=ink]:not([data-time=night]){--paper:#d2ad79;--scene-control-bg:#dbb984ed;--ink:#403424;--muted:#715a3d;--line:#aa8a5d;--red:#813d2a;background:var(--paper);color:var(--ink)}
body[data-ink-style=ink]:not([data-time=night]) :is(.nav-item,.eyebrow,.title-caption,.intro-copy,.work-tag,.place-story p,.season-note,.gesture-hint,.text-link,footer,.chapter-text small){color:#6b573d}
body[data-ink-style=ink]:not([data-time=night]) :is(.nav-item.active,h1,.place-story h2){color:#403424}
body[data-ink-style=ink]:not([data-time=night]) :is(.season-switch,.time-switch,.ink-style-switch,.viewer-toolbar,.character-controls,.settings-panel,.hotspot span){background:var(--scene-control-bg);border-color:#9c7e548a;color:#584830;box-shadow:0 2px 12px #6c492010}
body[data-ink-style=ink]:not([data-time=night]) :is(.season-switch button,.time-switch button,.settings-panel label,.small-close){color:#685338}
body[data-ink-style=ink]:not([data-time=night]) :is(.season-switch button,.time-switch button)[aria-pressed=true]{color:var(--red);background:#813d2a0a}
body[data-ink-style=ink]:not([data-time=night]) .ink-style-switch[aria-pressed=true]{color:var(--red)}
body[data-ink-style=ink]:not([data-time=night]) .ink-style-switch:hover{color:var(--red)}
body[data-ink-style=ink]:not([data-time=night]) .ink-style-switch[aria-pressed=true] .ink-switch-track{background:#813d2a24;border-color:#813d2a80}
body[data-ink-style=ink]:not([data-time=night]) :is(.place-story,.dialog-confirm){border-color:#a6895d}
body[data-ink-style=ink]:not([data-time=night]) :is(.intro-rule,.toolbar-divider){background:#a58a62}
body[data-ink-style=ink]:not([data-time=night]) .eyebrow>span{background:#7f6949}
body[data-ink-style=ink]:not([data-time=night]) .chapter.active{background:#e5c49350;border-color:#813d2a69}
body[data-ink-style=ink]:not([data-time=night]) :is(dialog,.reference-panel){background:#ddbd88;border-color:#9d7f54;color:#493a29}
body[data-ink-style=ink]:not([data-time=night]) :is(#dialog-content,#dialog-content strong,.reference-heading small,.reference-panel p,.dialog-close){color:#665035}
body[data-ink-style=ink]:not([data-time=night]) .hotspot:before{background:#e7cda0;border-color:#80613f;box-shadow:0 0 0 4px #e7cda055}
body[data-ink-style=ink]:not([data-time=night]) .hotspot.selected:before{background:var(--red);border-color:#e7cda0;box-shadow:0 0 0 1px var(--red)}

/* Fine laid-paper fibres continue through the page around the painted canvas. */
body[data-ink-style=ink] .paper-grain{opacity:.20;background-size:420px 420px,310px 310px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='fibres'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .48' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%237c6241' filter='url(%23fibres)' d='M0 0h420v420H0z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='310'%3E%3Cfilter id='pulp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.52 .027' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23806b4b' opacity='.55' filter='url(%23pulp)' d='M0 0h310v310H0z'/%3E%3C/svg%3E")}
body[data-ink-style=ink][data-time=night]{--paper:#292b2b;--scene-control-bg:#323535eb;--red:#c4b69e}
body[data-ink-style=ink][data-time=night] .paper-grain{opacity:.12}
body[data-ink-style=ink] #toast{max-width:calc(100vw - 32px);width:max-content;white-space:normal;text-align:center;font-family:var(--serif);line-height:1.7;letter-spacing:1.5px;background:#dec08bf7;color:#59452c;border:1px solid #96754880;box-shadow:0 3px 16px #6043231a}
body[data-ink-style=ink][data-time=night] #toast{background:#343634f7;color:#d4cec0;border-color:#79786c80;box-shadow:0 3px 16px #10131033}
