/* Compact layouts are selected by app360.js, including landscape phones. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
:is([data-layout="portrait"],[data-layout="landscape"]) .experience{display:block}
:is([data-layout="portrait"],[data-layout="landscape"]) .stage{inset:0}
:is([data-layout="portrait"],[data-layout="landscape"]) .story{background:none;display:block;pointer-events:none}
:is([data-layout="portrait"],[data-layout="landscape"]) .story a,:is([data-layout="portrait"],[data-layout="landscape"]) .story button{pointer-events:auto}
:is([data-layout="portrait"],[data-layout="landscape"]) .brand{gap:9px}
:is([data-layout="portrait"],[data-layout="landscape"]) .brand .star{font-size:30px}
:is([data-layout="portrait"],[data-layout="landscape"]) .brand>span:last-child{font-size:11px;letter-spacing:3.5px}
:is([data-layout="portrait"],[data-layout="landscape"]) .brand small{font-size:6px;letter-spacing:1.3px;margin-top:6px}
:is([data-layout="portrait"],[data-layout="landscape"]) .eyebrow,:is([data-layout="portrait"],[data-layout="landscape"]) .english-title,:is([data-layout="portrait"],[data-layout="landscape"]) .hairline,:is([data-layout="portrait"],[data-layout="landscape"]) .view-caption,:is([data-layout="portrait"],[data-layout="landscape"]) .scene-caption{display:none}
:is([data-layout="portrait"],[data-layout="landscape"]) h1{line-height:1.25;letter-spacing:4px;margin:0}
:is([data-layout="portrait"],[data-layout="landscape"]) h1>span{display:inline;margin:0}
:is([data-layout="portrait"],[data-layout="landscape"]) h1 .title-dot{display:none}
:is([data-layout="portrait"],[data-layout="landscape"]) .views{border:0;gap:2px}
:is([data-layout="portrait"],[data-layout="landscape"]) .views button{min-width:44px;min-height:44px;padding:9px 0;font-size:11px;letter-spacing:1px;color:#65776f}
:is([data-layout="portrait"],[data-layout="landscape"]) .views button.active{color:#294d4d}
:is([data-layout="portrait"],[data-layout="landscape"]) .scene-header{left:auto;top:calc(15px + var(--safe-top));right:calc(17px + var(--safe-right));gap:2px;color:#345456;justify-content:flex-end}
:is([data-layout="portrait"],[data-layout="landscape"]) .scene-header p{display:none}
:is([data-layout="portrait"],[data-layout="landscape"]) .quiet-button{min-width:44px;min-height:44px;font-size:11px;letter-spacing:1px;padding:10px 5px;color:inherit;opacity:1}
:is([data-layout="portrait"],[data-layout="landscape"]) .icon-button{width:44px;height:44px;padding:12px;opacity:1;touch-action:manipulation}
:is([data-layout="portrait"],[data-layout="landscape"]) .icon-button svg{width:19px;height:19px}
:is([data-layout="portrait"],[data-layout="landscape"]) .scene-header .icon-button:focus-visible{outline-color:#345456}
:is([data-layout="portrait"],[data-layout="landscape"]) .scene-footer{left:auto;right:calc(18px + var(--safe-right));bottom:calc(15px + var(--safe-bottom));display:block;color:#3b585c}
:is([data-layout="portrait"],[data-layout="landscape"]) .tools{padding:5px 6px;border-radius:30px;background:#faf2e6d9;border:1px solid #fff7e27a;box-shadow:0 6px 28px #3e566b12;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
:is([data-layout="portrait"],[data-layout="landscape"]) .sound-on #sound{background:#d9d3bc55}
:is([data-layout="portrait"],[data-layout="landscape"]) .gesture{position:absolute;right:2px;bottom:71px;gap:0;opacity:1;text-align:right;white-space:nowrap;color:#3c5a64;text-shadow:0 1px 12px #fff4e9,0 0 5px #fff4e9}
:is([data-layout="portrait"],[data-layout="landscape"]) .gesture>svg{display:none}
:is([data-layout="portrait"],[data-layout="landscape"]) .gesture p{font-size:10px;letter-spacing:1px;line-height:1.7}
:is([data-layout="portrait"],[data-layout="landscape"]) .gesture small{display:none}
body.explored:is([data-layout="portrait"],[data-layout="landscape"]) .gesture{opacity:.75}
:is([data-layout="portrait"],[data-layout="landscape"]) .bearing{left:auto;right:calc(21px + var(--safe-right));bottom:calc(121px + var(--safe-bottom));font-size:9px;gap:7px;color:#3e5c65;text-shadow:0 1px 12px #fff4e9;opacity:.9}
:is([data-layout="portrait"],[data-layout="landscape"]) .bearing svg{width:16px;height:16px}
:is([data-layout="portrait"],[data-layout="landscape"]) #view-loading{left:50%;top:47%;font-size:11px;letter-spacing:1.5px;padding:10px 15px;max-width:80%;border-radius:24px;background:#fbf1ded9;white-space:nowrap}
:is([data-layout="portrait"],[data-layout="landscape"]) #notice{bottom:calc(157px + var(--safe-bottom));left:50%;white-space:normal;max-width:calc(100% - 36px);width:max-content;font-size:11px;line-height:1.9;letter-spacing:1px}
:is([data-layout="portrait"],[data-layout="landscape"]) #show-ui{right:calc(18px + var(--safe-right));bottom:calc(20px + var(--safe-bottom));min-height:44px;font-size:11px;padding:12px 18px}
:is([data-layout="portrait"],[data-layout="landscape"]) .foreground{bottom:-1px}
:is([data-layout="portrait"],[data-layout="landscape"]) #art-fallback{left:0}
:is([data-layout="portrait"],[data-layout="landscape"]) #fallback-note{right:calc(22px + var(--safe-right));bottom:calc(170px + var(--safe-bottom));font-size:11px;max-width:55%;line-height:1.8}
:is([data-layout="portrait"],[data-layout="landscape"]) #fallback-note button{min-height:44px;font-size:11px}
:is([data-layout="portrait"],[data-layout="landscape"]) dialog{max-height:calc(100dvh - 36px - var(--safe-top) - var(--safe-bottom));overflow:auto;overscroll-behavior:contain;padding:45px 28px 27px;width:420px;max-width:calc(100% - 32px)}
:is([data-layout="portrait"],[data-layout="landscape"]) dialog p{font-size:12px;line-height:2}
:is([data-layout="portrait"],[data-layout="landscape"]) dialog h2{font-size:23px;letter-spacing:1px}
:is([data-layout="portrait"],[data-layout="landscape"]) .dialog-close{min-width:44px;min-height:44px;right:7px;top:7px}
:is([data-layout="portrait"],[data-layout="landscape"]) .study-link,:is([data-layout="portrait"],[data-layout="landscape"]) #about-return{min-height:44px;display:block;line-height:24px;padding-top:10px}
:is([data-layout="portrait"],[data-layout="landscape"]) button{touch-action:manipulation}
[data-layout="portrait"] .paper-veil{width:100%;height:calc(295px + var(--safe-top));mask-image:none;background:linear-gradient(180deg,#faf2e5fc 0%,#faf2e5ec 53%,#faf2e59a 75%,#faf2e500 100%)}
[data-layout="portrait"] .story{inset:0 0 auto;width:100%;height:calc(231px + var(--safe-top));padding:calc(21px + var(--safe-top)) calc(23px + var(--safe-right)) 0 calc(23px + var(--safe-left));--gutter:23px}
[data-layout="portrait"] .story-body{position:static;margin:0;padding:0}
[data-layout="portrait"] h1{font-size:clamp(31px,9.4vw,42px);position:absolute;left:calc(23px + var(--safe-left));top:calc(77px + var(--safe-top))}
[data-layout="portrait"] .poem{display:block;position:absolute;left:calc(25px + var(--safe-left));right:auto;top:calc(131px + var(--safe-top));font-size:10px;line-height:2.1;letter-spacing:1px;color:#60796e;margin:0}
[data-layout="portrait"] .views{position:absolute;left:calc(16px + var(--safe-left));bottom:6px;top:auto;width:191px}
[data-layout="portrait"] .story-footer{position:absolute;left:auto;right:calc(22px + var(--safe-right));top:auto;bottom:6px;margin:0;display:block}
[data-layout="portrait"] .story-footer>span{display:none}
[data-layout="portrait"] .story-footer>button{font-size:10px;min-height:44px;padding:10px 0;color:#526d63;text-shadow:none;letter-spacing:1px}
[data-layout="portrait"] .story-footer button span{margin-left:7px}
[data-layout="portrait"] .foreground{width:clamp(205px,61vw,420px);max-width:74vw}
[data-layout="portrait"] #sky{background-position:45% center}
[data-layout="portrait"] #art-fallback img{width:137%;left:-3%}
[data-layout="landscape"] .paper-veil{height:100%;width:calc(305px + var(--safe-left));mask-image:linear-gradient(180deg,#000 0%,#000 54%,#0000 95%);background:linear-gradient(90deg,#faf2e5fa 0%,#faf2e5e6 53%,#faf2e577 77%,#faf2e500 100%)}
[data-layout="landscape"] .story{inset:0 auto 0 0;width:calc(216px + var(--safe-left));height:100%;padding:calc(17px + var(--safe-top)) 20px 0 calc(22px + var(--safe-left));--gutter:22px}
[data-layout="landscape"] .brand>span:last-child{font-size:10px;letter-spacing:2.5px}
[data-layout="landscape"] .brand .star{font-size:26px}
[data-layout="landscape"] .brand small{font-size:5px;letter-spacing:1.1px}
[data-layout="landscape"] .story-body{position:absolute;left:calc(22px + var(--safe-left));right:0;top:calc(75px + var(--safe-top));margin:0;padding:0}
[data-layout="landscape"] h1{font-size:31px;letter-spacing:2px}
[data-layout="landscape"] .poem{display:none}
[data-layout="landscape"] .views{position:absolute;left:-6px;top:52px;bottom:auto;width:180px}
[data-layout="landscape"] .story-footer{left:calc(23px + var(--safe-left));right:auto;top:calc(180px + var(--safe-top));bottom:auto;display:block}
[data-layout="landscape"] .story-footer>span{display:none}
[data-layout="landscape"] .story-footer>button{min-height:44px;padding:10px 0;font-size:10px;color:#526d63;text-shadow:none;letter-spacing:1px}
[data-layout="landscape"] .foreground{width:min(29vw,59vh)}
[data-layout="landscape"] .scene-header{color:#fff1d5}
[data-layout="landscape"] .bearing{display:none}
[data-layout="landscape"] .gesture{bottom:66px;font-size:10px}
[data-layout="landscape"] #art-fallback{left:calc(216px + var(--safe-left))}
[data-layout="landscape"] #art-fallback img{width:104%;left:0}
@media(max-width:355px){[data-layout="portrait"] .story{padding-left:19px}[data-layout="portrait"] h1{left:19px;letter-spacing:2px}[data-layout="portrait"] .poem{left:21px;font-size:9px}[data-layout="portrait"] .views{left:11px;width:183px}[data-layout="portrait"] .story-footer{right:16px}[data-layout="portrait"] .scene-header{right:12px}[data-layout="portrait"] .scene-footer{right:14px}[data-layout="portrait"] .foreground{max-width:68vw}}
@media(max-height:700px){[data-layout="portrait"] .story{height:calc(207px + var(--safe-top))}[data-layout="portrait"] .paper-veil{height:calc(265px + var(--safe-top))}[data-layout="portrait"] h1{top:calc(69px + var(--safe-top));font-size:31px}[data-layout="portrait"] .poem{top:calc(116px + var(--safe-top));font-size:9px;line-height:1.9}[data-layout="portrait"] .foreground{width:min(68vw,37vh)}}
@media(min-width:600px){[data-layout="portrait"] .story{height:calc(258px + var(--safe-top));padding-left:36px}[data-layout="portrait"] .paper-veil{height:340px}[data-layout="portrait"] h1{left:36px;top:calc(83px + var(--safe-top));font-size:45px}[data-layout="portrait"] .poem{left:38px;top:calc(150px + var(--safe-top));font-size:12px;line-height:2}[data-layout="portrait"] .views{left:29px;width:238px}[data-layout="portrait"] .story-footer{right:36px}[data-layout="portrait"] .scene-header{right:32px}[data-layout="portrait"] .foreground{width:min(51vw,38vh)}}
@media(pointer:coarse){[data-layout="desktop"] .icon-button{min-width:44px;min-height:44px}[data-layout="desktop"] .views button{min-height:44px}}