/* Approved mountain/sea homepage. Later screens retain their layout. */
:root{--paper:#f7f4e9;--rice:#e4e7d5;--stone:#47796e;--ink:#293c36;--muted:#778276;--oracle-title:clamp(64px,8.9vw,144px)}
html,body,.page,.overlay,.modal,.paywall,.birth-sheet,.purchase-sheet,.history-sheet{background:#f7f4e9}
.page:before{display:block;background:radial-gradient(ellipse at 15% 15%,#e5efdc77,transparent 55%),radial-gradient(ellipse at 85% 80%,#e7d8ab33,transparent 60%)}
.account,.option,.local-action,.detail-button,.pay-sheet button,.history-open,.history-more,.auth-primary{background:linear-gradient(135deg,#e7ead8,#d8e6d9);color:#375d50;box-shadow:0 0 20px #d9e8cd55;border:0}
.hex-wrap{background:linear-gradient(145deg,#eee6cc,#d8e6d8);box-shadow:0 0 30px #bed5bb44,inset 0 1px 0 #fffbed99}
.hex-title,.reflection{color:#40766c;text-shadow:0 0 20px #d4e8c766}.stage p,.detail-grid article p{color:#394c40}
.birth-sheet input,.birth-sheet select,.auth-sheet input{background:#edf0e366;border-color:#acbca555;color:#304d42}
.auth-sheet,.purchase-sheet,.history-sheet,.birth-sheet{background:linear-gradient(135deg,#fbf8ee,#f0f2e5);box-shadow:0 0 50px #d9e4ce66}
.card-layer,.birth-layer,.auth-layer,.purchase-layer,.history-layer{background:#dfe8d45c;backdrop-filter:blur(9px)}
.card-actions button{background:#e6ebda;color:#3e6555;box-shadow:0 0 18px #ecf4d87a}
.history-tile img{box-shadow:0 0 20px #b7d0b333}.profile .contact{color:#758674}
.ritual-info h2,.bits span,.trigram{color:#345e53;text-shadow:0 0 20px #b5d8b65c}
.auth-identity,.auth-note,.credit{color:#6b7c6c}
body.oracle-home .page{background:transparent;isolation:auto;min-height:var(--oracle-height,100svh)}
body.oracle-home .page:before,body.oracle-home .page:after{display:none}
#landscape{position:absolute;top:0;left:0;width:100%;height:var(--oracle-height,100svh);pointer-events:none;z-index:0}
.oracle-grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.nav{position:relative;z-index:5}.account{backdrop-filter:blur(8px)}
.hero{position:static;padding:0;min-height:calc(var(--oracle-height,100svh) - 110px)}
#experience{position:absolute;inset:0;height:var(--oracle-height,100svh);overflow:clip;isolation:isolate;z-index:2;color:#244c49}
#experience[data-state=intro]{touch-action:none;user-select:none;cursor:crosshair}
.oracle-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:12vh;transition:opacity 1.1s,filter 1.1s,transform 1.5s cubic-bezier(.22,1,.36,1)}
.oracle-intro h1{font:400 var(--oracle-title)/1.1 Huiwen,serif;letter-spacing:-.055em;margin:0;text-shadow:0 2px 30px #ffffffe0;transition:opacity 1s,filter 1s}
.begin{font:15px Huiwen,serif;letter-spacing:.36em;background:none;border:0;margin-top:36px;padding:16px;animation:oracle-breathe 3s ease-in-out infinite;color:#365148;cursor:inherit}
.drawing .oracle-intro h1{opacity:.3;filter:blur(2px)}.drawing .begin{animation:none;opacity:.95}
#experience:not([data-state=intro]) .oracle-intro{opacity:0;filter:blur(12px);transform:scale(1.08);pointer-events:none}
.oracle-reading{position:absolute;left:50%;top:46%;transform:translate(-50%,-46%);width:min(680px,82vw);text-align:center;opacity:0;pointer-events:none;transition:opacity 1.2s,filter 1.2s;filter:blur(6px)}
#experience[data-state=reading] .oracle-reading{opacity:1;filter:none;pointer-events:auto}
.dayline{display:flex;justify-content:center;gap:14px;align-items:center;font-size:12px;letter-spacing:.16em;color:#385c51;margin-bottom:25px}
.oracle-reading h2{font:400 calc(var(--oracle-title)*.8)/1.1 Huiwen,serif;letter-spacing:.12em;margin:0 0 72px;padding-left:.12em;text-shadow:0 1px 30px #fff6ce}
#experience .question{position:relative;inset:auto;width:min(500px,100%);margin:0 auto}
.main-mark{position:absolute;left:50%;transform:translateX(-50%);top:-36px;width:264px;height:25px;display:flex;justify-content:space-between;filter:drop-shadow(0 0 9px #ecffe2);z-index:2}
.mini-hex{width:28px;height:25px;display:flex;flex-direction:column;justify-content:space-between}.mini-hex .yao{height:2px;display:flex;gap:6px}.mini-hex i{flex:1;background:linear-gradient(90deg,#738b6b,#315d56 45%,#738b6b)}
#experience .paper-input{clip-path:none;padding:0;min-height:94px;background:linear-gradient(135deg,#fffbedb3,#f2f3db75);box-shadow:0 15px 60px #183e3c20;backdrop-filter:blur(15px);overflow:visible;border-radius:2px}
#experience .paper-input:before,#experience .paper-input:after{display:none}
#experience textarea{height:94px;width:100%;resize:none;border:0;outline:0;background:none;color:#294e48;font:20px/1.8 Huiwen,serif;text-align:center;padding:29px 22px;letter-spacing:.07em}
#experience textarea::placeholder{color:#697f70;opacity:.77}
#experience .enter{border:0;background:radial-gradient(ellipse,#f8eed191,transparent 72%);height:64px;width:88px;font:27px Huiwen,serif;padding:0;margin:17px auto 0;color:#345e53;min-height:0}
.replay{position:absolute;right:30px;top:max(30px,env(safe-area-inset-top));background:none;border:0;font:12px Huiwen,serif;letter-spacing:.2em;color:#2e524b;padding:12px;opacity:0;pointer-events:none;transition:opacity 1s;z-index:6}
body.finished .replay{opacity:.7;pointer-events:auto}
body.oracle-home .footer{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);margin:0;color:#eeeeda;opacity:.65;z-index:3;font-size:9px;width:min(760px,88vw);pointer-events:none}
@keyframes oracle-breathe{0%,100%{opacity:.32}50%{opacity:.85}}
@media(max-width:600px){:root{--oracle-title:clamp(54px,12vw,74px)}.oracle-intro{padding-bottom:20vh}.oracle-intro h1{letter-spacing:-.065em}.begin{font-size:12px;margin-top:24px;letter-spacing:.25em}.oracle-reading{width:80vw;top:43%}.dayline{font-size:10px;gap:10px}.oracle-reading h2{margin-bottom:65px;letter-spacing:.08em}.main-mark{width:228px;height:22px;top:-33px}.mini-hex{width:24px;height:22px}#experience .paper-input{min-height:84px}#experience textarea{height:84px;font-size:17px;padding:26px 14px}.replay{right:15px;top:34px}.nav{max-width:75%}body.oracle-home .footer{bottom:12px;font-size:8px;line-height:1.5}body.oracle-home .hero{min-height:calc(var(--oracle-height,100svh) - 105px)}}
@media(max-height:550px) and (orientation:landscape){:root{--oracle-title:64px}.oracle-reading{top:51%}.dayline{margin-bottom:12px}.oracle-reading h2{margin-bottom:44px;font-size:42px}.main-mark{top:-28px;height:20px}.mini-hex{height:20px;width:24px}#experience .paper-input{min-height:64px}#experience textarea{height:64px;padding:15px 20px}#experience .enter{height:40px;margin-top:8px}.oracle-intro{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){#experience *,#experience *:before{animation:none!important;transition:none!important}}
/* Result composition: a centered reading, with a compact mark matching its title. */
.nav{max-width:none;width:100%}.nav #backHome{margin-left:auto}
.result{width:min(940px,100%);margin-inline:auto;text-align:center}
.result-top{display:grid;grid-template-columns:88px auto;justify-content:center;align-items:stretch;gap:26px}
.result-top>div:last-child{text-align:left}
.result-top .hex-wrap{position:relative;width:88px;min-width:0;padding:0}
.result-top .hex{position:absolute;inset:9px 12px;gap:0;justify-content:space-between}
.result-top .line{height:3px;flex:none}
.result .reflection{margin-inline:auto}.result .stages,.result .detail-grid{text-align:left}
.result .numbers code{justify-items:center}.result .cast-line{justify-content:center}
@media(max-width:700px){.result{margin-inline:auto;padding-top:42px}.result-top{grid-template-columns:70px auto;gap:22px}.result-top .hex-wrap{width:70px}.result-top .hex{inset:7px 9px}.result-top .line{height:3px}.nav #backHome{padding-inline:8px}}