/* The first working cube study, for Preston's next-layer review. */
:root { color-scheme:dark; font-family:"Segoe UI",system-ui,sans-serif; color:#f6edd4; background:#10211c; --size:300px; --half:150px; --gold:#dfc78c; }
* {box-sizing:border-box} [hidden] {display:none!important}
body {margin:0;min-width:280px;min-height:100svh;isolation:isolate;background:#10211c}
body::before {content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,#0d241cec 0%,#132a20b0 48%,#1a282482),url('/data/design/garden-entrance-thailand-05.png') center/cover;filter:saturate(.68);transition:filter .8s}
body::after {content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(0deg,#0b1b18ed,transparent 65%);pointer-events:none}
body.dusk::before {filter:saturate(.5) brightness(.52) hue-rotate(24deg)}
button,a { -webkit-tap-highlight-color:transparent;touch-action:manipulation }
button {font:inherit;cursor:pointer;color:inherit;background:#172d25;border:1px solid #d8c69155;border-radius:30px;min-height:44px;padding:10px 18px}
button:hover,a.face-action:hover {background:#d6bb7230}
a {color:inherit;text-underline-offset:5px}
:focus-visible {outline:3px solid #ffdf91;outline-offset:5px}
.site-header {max-width:1480px;margin:auto;padding:26px 42px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand {font-size:12px;text-transform:uppercase;letter-spacing:.18em;text-decoration:none;line-height:1.5}
.languages {display:flex;align-items:center;gap:2px;border:1px solid #dcc89250;border-radius:30px;padding:0 3px;background:#122a207a}
.languages button {font-size:12px;border:0;background:transparent;padding:8px 11px;color:#b9c5b6}
.languages button[aria-pressed="true"] {color:#ffe3a4}.languages span{opacity:.35}
main {max-width:1250px;margin:20px auto 0;padding:0 44px 30px;display:grid;grid-template-columns: .85fr 1.15fr;align-items:center;column-gap:42px}
.introduction {padding:0 0 50px}.eyebrow {text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:#d9ceaa;margin:0 0 25px}
h1 {font-family:Georgia,serif;font-weight:400;line-height:1.12;font-size:clamp(38px,4.5vw,62px);max-width:430px;margin:0 0 24px;text-wrap:balance}
.intro-copy {color:#c4d0be;line-height:1.85;font-size:15px;max-width:330px;margin-bottom:34px}
.back-link {font-size:12px;color:#e6cc91}.back-link::before{content:'←';margin-right:12px}
.cube-area {min-width:0;text-align:center}.stage {height:475px;position:relative;display:grid;place-items:center;perspective:1200px;touch-action:pan-y;outline-offset:-5px;border-radius:24px;cursor:grab}
.stage:active {cursor:grabbing}.cube-position {width:var(--size);height:var(--size);perspective:1200px;position:relative;z-index:1;transform-style:preserve-3d}
.cube {width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-18deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.stage.dragging .cube {transition:none}.cube.dragged a,.cube.dragged button {pointer-events:none}
.face {position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 26px 25px;border:1px solid #f0d498b0;border-radius:6px;background:linear-gradient(135deg,#50694bef,#19392ff7 60%,#183327);box-shadow:inset 0 0 0 7px #d9c88b08,inset 0 0 65px #d2c78013;color:#f4ead1;text-align:center;touch-action:none}
.face::before {content:"";position:absolute;inset:12px;border:1px solid #eed38c30;border-radius:3px;pointer-events:none}
.face::after {content:"";position:absolute;left:20%;right:20%;top:0;height:1px;background:#fff5c4;box-shadow:0 0 14px 2px #ffe6ab70;pointer-events:none}
.face-front {transform:translateZ(var(--half));background:linear-gradient(140deg,#82609e,#4b3267 65%,#302844)}.face-right {transform:rotateY(90deg) translateZ(var(--half));background:linear-gradient(135deg,#50694b,#19392f 60%,#183327)}
.face-back {transform:rotateY(180deg) translateZ(var(--half));background:linear-gradient(140deg,#766647,#384d3a 70%)}
.face-left {transform:rotateY(-90deg) translateZ(var(--half));background:linear-gradient(140deg,#46676a,#183a3b 70%)}
.face-top {transform:rotateX(90deg) translateZ(var(--half));background:linear-gradient(140deg,#7f7249,#3c4a35 70%)}
.face-bottom {transform:rotateX(-90deg) translateZ(var(--half));background:linear-gradient(140deg,#655679,#23382f 70%)}
.face-number {position:absolute;left:27px;top:24px;font-size:9px;letter-spacing:.2em;color:#d8cdb0}
.face h3 {font:400 30px/1.2 Georgia,serif;margin:15px 0 10px}.face p{font-size:12px;line-height:1.6;max-width:210px;color:#e1e3ce;margin:0 0 20px}
.face-action {position:relative;border:1px solid #e1c98485;background:#ddc48a16;display:inline-flex;align-items:center;justify-content:center;border-radius:30px;min-height:44px;padding:10px 16px;font-size:12px;text-decoration:none;color:#fff0c7}
.light-options {display:flex;gap:6px;position:relative}.light-options button{font-size:12px;background:transparent}.light-options [aria-pressed="true"]{background:#dfc990;color:#253528}
.emblem {width:35px;height:35px;position:relative;border:1px solid #e0cd91b0;flex-shrink:0}.sprout {border-radius:100% 0 100% 0;transform:rotate(-8deg)}.sprout::after{content:"";position:absolute;width:1px;height:32px;background:#e0cd91;left:16px;top:10px;transform:rotate(35deg)}
.flower {border-radius:12px;transform:rotate(45deg)}.flower::after{content:"";position:absolute;inset:8px;border:1px solid #e0cd91;border-radius:50%}
.rings {border-radius:50%}.rings::after{content:"";position:absolute;inset:-1px;transform:translateX(12px);border:1px solid #e0cd91;border-radius:50%}
.sun {border-radius:50%;box-shadow:0 0 22px #f8d58755}.arch{height:38px;border-radius:20px 20px 0 0;border-bottom:0}.letter-emblem{font:32px Georgia,serif;color:#ead39a;height:35px}
.ground-ring {position:absolute;width:390px;height:130px;bottom:5px;border:1px solid #e4cf9033;border-radius:50%;box-shadow:0 0 45px #e4cb7511,inset 0 0 40px #e4cb750d;background:radial-gradient(ellipse,#080f0c99,transparent 65%);pointer-events:none}
.rotate-hint{font-size:11px;color:#c5cfbe;line-height:1.7;margin:2px 0 12px}.turn-controls{display:flex;gap:12px;align-items:center;justify-content:center}.turn-controls button{border-color:#e2cc8840;background:#132c2399;width:44px;padding:0;font-size:20px}.turn-controls p{min-width:150px;font-size:12px;color:#ecdfb8;margin:0}
.face-nav {grid-column:1/-1;display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:30px}.face-nav button{font-size:12px;background:#12271fbc;border-color:#d7cdad30;padding:10px 19px}.face-nav [aria-pressed="true"]{background:#e3cb9330;border-color:#e5cc87;color:#ffe6b0}
.view-controls{grid-column:1/-1;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:16px}.view-controls button{background:transparent;border:0;font-size:11px;color:#c9d0bb;padding:5px 10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;border:0}
.mist{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible}.mist span{position:absolute;width:80px;height:80px;left:50%;top:45%;border-radius:50%;opacity:0;background:radial-gradient(ellipse,#dedfbd70,transparent 68%);filter:blur(8px)}
.vanishing .cube-position{animation:evaporate 1.3s forwards}.vanishing .mist span{animation:mist 1.6s ease-out forwards}.return-cube{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3}.return-cube p{font:24px Georgia,serif;color:#dfd6b6}.return-cube button{background:#264439}
@keyframes evaporate{0%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(25px);transform:translateY(-40px) scale(.83)}}
@keyframes mist{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:.7}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(2.3)}}
dialog{color:#eceddc;background:#112b21;border:1px solid #dec98e88;border-radius:16px;padding:0;width:min(940px,calc(100% - 28px));max-height:90svh;box-shadow:0 35px 100px #0009}dialog::backdrop{background:#07150fd9;backdrop-filter:blur(8px)}
.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid #e1cc9440}.dialog-header h2{font:400 26px Georgia,serif;margin:0}.dialog-header button{font-size:12px}
#corner-dialog .dialog-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:20px 16px}
#corner-dialog .dialog-header h2{grid-column:1/-1;line-height:1.3;text-align:center}
#back-worlds{justify-self:start;max-width:100%;text-align:left;line-height:1.5}
#close-dialog{grid-column:2;grid-row:1}
#corner-content .app-note{max-width:none;text-align:center}
#corner-content{padding:35px;line-height:1.8}#corner-content p{margin:0 0 18px;max-width:570px}#corner-content button{margin-top:12px}#corner-content.app-content{padding:0}#corner-content iframe{display:block;width:100%;height:70svh;border:0;background:#fff}.app-note{font-size:12px;color:#d7d6be;padding:10px 24px;margin:0!important}
body.list-mode .stage{height:auto;display:block;perspective:none;cursor:auto}body.list-mode .cube-position{width:100%;height:auto;perspective:none}body.list-mode .cube{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;transform:none!important;transform-style:flat}body.list-mode .face{position:relative;inset:auto;transform:none;min-height:300px;padding:34px 20px;touch-action:auto}body.list-mode .ground-ring,body.list-mode .turn-controls,body.list-mode .rotate-hint,body.list-mode #dissolve,body.list-mode .face-nav{display:none}body.list-mode main{grid-template-columns:1fr}body.list-mode .introduction{padding-bottom:25px}body.list-mode h1{max-width:none;font-size:36px}body.list-mode .intro-copy{max-width:600px;margin:0 0 18px}
:lang(th){font-family:'Leelawadee UI',Tahoma,sans-serif}:lang(th) h1,:lang(th) h2,:lang(th) h3{font-family:'Leelawadee UI',Tahoma,sans-serif;line-height:1.35}:lang(th) .brand,:lang(th) .eyebrow{letter-spacing:.025em}:lang(th) .face h3{font-size:26px}
@media(max-width:900px){:root{--size:260px;--half:130px}main{column-gap:10px;padding:0 28px 24px}.stage{height:405px}.ground-ring{width:320px;height:100px}.face{padding:35px 20px 20px}.face h3{font-size:27px;margin:12px 0 8px}.face p{margin-bottom:14px}.site-header{padding:20px 28px}.intro-copy{font-size:14px}}
@media(max-width:650px){:root{--size:238px;--half:119px}.site-header{padding:18px 16px}.brand{font-size:10px;letter-spacing:.09em;max-width:150px}main{display:block;margin-top:14px;padding:0 16px 24px}.introduction{text-align:center;padding:0}.eyebrow{font-size:10px;margin-bottom:12px}h1{font-size:34px;max-width:360px;margin:0 auto 13px}.intro-copy{font-size:12px;line-height:1.65;max-width:300px;margin:0 auto 13px}.back-link{font-size:11px}.stage{height:380px;margin-top:12px}.face{padding:35px 18px 18px}.face h3{font-size:25px}.face p{font-size:11px;margin:0 0 12px}.emblem{width:29px;height:29px}.face-number{top:21px;left:23px}.face-action{font-size:11px;padding:9px 12px}.ground-ring{bottom:12px;width:290px;height:95px}.face-nav{gap:6px;margin-top:22px}.face-nav button{font-size:11px;padding:9px 13px}.view-controls{gap:12px}.rotate-hint{font-size:10px}.dialog-header{padding:14px}#corner-content{padding:23px}body.list-mode .cube{grid-template-columns:1fr}body.list-mode .face{min-height:280px}body.list-mode h1{font-size:30px}:lang(th) h1{font-size:30px}:lang(th) .face h3{font-size:24px}}
@media(max-width:340px){:root{--size:212px;--half:106px}.stage{height:345px}.face p{font-size:10px}.face h3{font-size:23px;margin:10px 0 5px}.emblem{width:25px;height:25px}.ground-ring{width:250px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the arrival and the working cube on the same central axis. */
body:not(.list-mode) main{grid-template-columns:1fr}
body:not(.list-mode) .cube-area{grid-area:1/1}
body:not(.list-mode) .introduction{grid-area:1/1;width:calc(50% - 225px);z-index:2;align-self:start;padding-top:60px}
body:not(.list-mode) h1{font-size:clamp(32px,3.4vw,48px)}
body:not(.list-mode) .stage,body:not(.list-mode) .stage *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
@media(max-width:1100px){body:not(.list-mode) .introduction{grid-area:auto;width:auto;text-align:center;padding:0}body:not(.list-mode) .cube-area{grid-area:auto}body:not(.list-mode) .introduction h1{max-width:none;margin:0 0 12px;font-size:34px}body:not(.list-mode) .intro-copy{max-width:480px;margin:0 auto 14px}body:not(.list-mode) .introduction .eyebrow{margin-bottom:12px}}

#corner-dialog{height:96vh;height:96dvh;max-height:96dvh;overflow:hidden;width:min(1000px,98vw)}
#corner-dialog[open]{display:flex;flex-direction:column}
#corner-dialog .dialog-header{flex:none;display:flex;gap:10px;padding:8px 12px}
#corner-dialog .dialog-header h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#corner-dialog .dialog-header button{margin:0;font-size:14px;line-height:1.25;padding:6px 12px}
#corner-content.app-content{flex:1;min-height:0;display:flex;flex-direction:column}
#corner-content .app-note{display:none}
#corner-content iframe{flex:1;height:100%;min-height:0}
@media(max-width:650px){input,select,textarea{font-size:max(16px,1em)!important}}