body.willow-home,body.willow-home .page{background:#f9f8f3}.willow-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#scene{z-index:0}#water{z-index:3}body.willow-home .page{background:transparent;isolation:auto}.nav{z-index:5}.hero{position:static;min-height:calc(100vh - 160px);max-width:none}.hero .portrait{display:none}.hero .ask{position:absolute;z-index:2;left:43%;top:35vh;width:min(480px,45vw)}.hero .preface{font:12px Huiwen,serif;letter-spacing:6px;color:#82917c;margin:0 0 25px}.hero .ask h1{font:400 clamp(28px,2.48vw,41.6px)/1.4 Huiwen,serif;letter-spacing:.16em;margin:0 0 43px;color:#343e35}.hero .question{position:static;width:100%}.hero .paper-input{position:relative;background:linear-gradient(180deg,#d9dfd11f,#e3e5d74d 26%,#edeee545);clip-path:none;min-height:139px;padding:27px 25px 20px;box-shadow:0 -8px 20px #9dad8910;overflow:visible;--wet:.2}.hero .paper-input:before{display:block;content:'';position:absolute;left:-17px;right:-17px;top:0;height:1px;background:linear-gradient(90deg,transparent,#8b9d8030 22%,#9aa88d30 75%,transparent)}.hero .paper-input:after{display:block;content:'';position:absolute;inset:0;mask:none;pointer-events:none;opacity:var(--wet);background:radial-gradient(ellipse at 45% 0,#a7bba443,transparent 65%);transition:opacity .8s}.hero textarea{height:77px;font:17px/1.8 Huiwen,serif;color:#4a594a;caret-color:#6d8567}.hero .enter{background:#e7e9dd90;color:#5c7057;margin-top:26px}.willow-paper{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%235a604f' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
@media(max-width:700px){.hero .ask{left:12%;top:43vh;width:76vw}.hero .ask h1{font-size:27.2px;margin-bottom:30px}.hero .preface{margin-bottom:16px;font-size:11px}.hero .paper-input{min-height:123px;padding:19px}.hero textarea{height:70px}.hero{min-height:max(760px,calc(100vh - 130px))}}
/* Viewport based composition: centered desktop, touch-sized mobile flows. */
/* A document-anchored canvas and input share coordinates during Safari keyboard panning. */
body{position:relative}
.willow-canvas{position:absolute;bottom:auto}
.card-hint{top:auto;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:9px 16px;background:#faf9f2eb;border-radius:2px;width:max-content;max-width:90vw}
@media(max-width:900px){body.willow-editing .hero{padding-top:var(--resting-hero-pad);min-height:var(--resting-hero-height)}}
.hero .ask{left:50%;transform:translateX(-50%)}
.hero .ask h1,.hero .preface{text-align:center}
.profile,.birth-sheet,.purchase-sheet,.history-sheet,.card-scroll{overscroll-behavior:contain;scrollbar-width:thin}
.stage,.detail-grid article,.birth-summary{min-width:0;overflow-wrap:anywhere}
.purchase-sheet .options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.option{white-space:normal}
.birth-sheet input,.birth-sheet select{min-width:0}
@media(max-width:900px){
 .page{padding:22px clamp(20px,5vw,36px) 24px;padding-top:max(22px,env(safe-area-inset-top));overflow:clip}
 .nav{min-height:44px;gap:10px}.account{margin-left:10px;min-height:40px}.home-back{font-size:12px;min-height:44px}
 .hero{min-height:calc(100svh - 172px);padding-top:clamp(120px,24svh,220px);padding-bottom:34px}
 .hero .ask{position:relative;left:auto;top:auto;transform:none;width:min(480px,calc(100% - 20px));margin:0 auto}
 .hero .ask h1{font-size:30px;line-height:1.4;margin-bottom:34px}.hero .preface{font-size:11px;letter-spacing:4px;margin-bottom:22px}
 .hero .paper-input{min-height:140px;padding:23px 20px}.hero textarea{font-size:17px;height:88px}.hero .enter{min-height:44px;margin-top:24px;padding:10px 25px}
 .footer{position:relative;bottom:auto;width:100%;font-size:10px;line-height:1.8;margin:22px auto 0;padding-bottom:env(safe-area-inset-bottom)}
 .result{width:100%;margin:0;padding:42px 0 38px}.result-top{gap:25px}.hex-wrap{min-width:120px;width:120px;padding:23px 20px}.hex-title{font-size:29px}.hex-meta{font-size:12px}
 .reflection{font-size:18px;line-height:1.9;margin-top:30px}.result .stages{grid-template-columns:1fr;gap:25px;margin-top:30px}.stage{padding-left:18px}.stage small{font-size:12px;margin-bottom:8px}.stage p{font-size:16px;line-height:1.95}
 .result .detail{margin-top:30px}.detail-grid{grid-template-columns:1fr;gap:27px}.detail-grid article small{font-size:12px}.detail-grid article p{font-size:16px;line-height:2}
 .numbers{margin-top:28px}.numbers code{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 14px}.cast-line b{font-size:19px;letter-spacing:2px}.detail-button{min-height:46px;margin-top:30px}.history-hint{font-size:11px;line-height:1.8}
 .modal,.paywall{overflow-y:auto;height:100dvh}.profile{width:min(600px,100%);max-height:none;min-height:100dvh;padding:22px 26px max(30px,env(safe-area-inset-bottom))}.close{min-width:44px;min-height:44px}.profile h2{font-size:36px;margin-top:20px}.profile .credit{font-size:14px;line-height:1.95}.birth-summary{font-size:14px;line-height:2}.birth-summary button{min-height:44px;margin-left:0;display:block;padding:0 12px 0 0;font-size:12px}
 .profile .options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.option{padding:14px 8px;min-height:63px;font-size:17px}.option small{display:block;margin:3px 0 0;font-size:12px}.profile h3{font-size:18px}.history-open,.local-action{min-height:44px}.profile .contact{font-size:13px;line-height:1.9;padding-top:32px}
 .purchase-layer,.history-layer,.birth-layer{padding:16px 12px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .purchase-sheet,.history-sheet,.birth-sheet{width:min(600px,100%);max-height:calc(100dvh - 40px);padding:23px 22px;overflow-y:auto}.purchase-sheet h2,.history-sheet h2,.birth-sheet h2{font-size:28px;margin:14px 0 20px}.purchase-sheet p,.birth-sheet p{font-size:13px;line-height:1.8}.share-invite{margin-top:24px}.share-invite button{display:block;width:100%;min-height:44px;margin:12px 0}
 .birth-sheet label{font-size:14px;margin:16px 0}.birth-sheet input,.birth-sheet select{width:100%;min-height:46px;font-size:16px}.birth-sheet small{font-size:12px;line-height:1.8}.picker-top{gap:8px}.picker-grid{gap:4px;max-height:260px;grid-template-columns:repeat(7,minmax(0,1fr))}.picker-grid button{min-width:0;min-height:40px;padding:8px 0;font-size:14px}#birthPicker{padding:8px}
 .pay-sheet{width:min(600px,100%);padding:90px 28px 35px;min-height:100dvh}.pay-sheet h2{font-size:32px}.pay-sheet p{font-size:15px;line-height:1.9}.pay-sheet button{min-height:46px}
 .history-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 14px}.history-tile{font-size:11px;line-height:1.8;overflow-wrap:anywhere}.history-more{min-height:44px}.card-layer{padding:0}.card-scroll{width:100%;padding:16px 12px 26px;max-height:calc(100dvh - 94px - env(safe-area-inset-bottom));margin-bottom:42px}.oracle-card{width:min(660px,100%);margin:auto}.card-actions{bottom:max(18px,env(safe-area-inset-bottom));gap:25px}.card-actions button{width:48px;height:48px}
 .ritual-info{top:max(35px,env(safe-area-inset-top));left:28px;right:28px}.ritual-info h2{font-size:32px}.ritual-info p{font-size:14px;line-height:1.85;max-width:420px}.trigram{top:50%;font-size:60px}.trigram.first{left:17%}.trigram.second{right:18%}.binary{bottom:max(10svh,42px);width:calc(100% - 54px);max-width:460px}.bits{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 9px}.bits span{font-size:20px;letter-spacing:2px}.binary small{font-size:10px;letter-spacing:1px}.tap-note{font-size:13px;line-height:1.8;padding:0 24px}
}
@media(max-width:600px){.hero .question{width:calc(100% - 40px);margin-inline:auto}}
@media(max-width:380px){.hero .ask h1{font-size:27.2px}.hero .preface{letter-spacing:3px}.profile{padding-left:20px;padding-right:20px}.purchase-sheet,.history-sheet,.birth-sheet{padding:18px 16px}.cast-line b,.bits span{font-size:17px;letter-spacing:1px}.result-top{gap:18px}.hex-wrap{min-width:106px;width:106px}.hex-title{font-size:26px}}
@media(max-height:550px) and (orientation:landscape){.hero{padding-top:42px;min-height:380px}.hero .ask{width:min(480px,70vw)}.hero .preface{margin-bottom:12px}.hero .ask h1{margin-bottom:22px}.ritual-info{top:16px;left:26px}.ritual-info h2{font-size:23px;margin:3px 0}.ritual-info p{font-size:12px;max-width:70vw}.trigram{top:55%;font-size:46px}.tap-note{top:55%}.binary{bottom:17px;width:400px}.bits{gap:7px;margin-top:5px}.bits span{font-size:17px}.card-scroll{max-height:calc(100dvh - 76px)}.card-actions{bottom:12px}}