/* Keep the header and navigation outside the only scrolling content area. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.phone{display:flex;flex-direction:column;height:calc(var(--app-height,100vh) - 48px);min-height:0;max-height:1000px}
.phone .status{flex:none}
.phone .topbar{flex:none;min-height:60px;height:auto;gap:12px;justify-content:flex-start;padding:8px 16px}
.back-btn{flex:none;display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:8px;border:1px solid #f4cdd64a;border-radius:50%;color:#ffe0ad;background:#ffffff0b;font-size:15px}
.back-btn[hidden]{display:none}
.phone .topbar .brand{margin-left:auto;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.back-btn span{font-size:28px;line-height:1}
.brand{min-width:0;font-size:20px;letter-spacing:1px;white-space:normal;overflow-wrap:anywhere}
.phone .scroll{flex:1 1 0%;height:auto;min-height:0;max-height:none;min-width:0;overflow-y:auto;overflow-x:hidden;padding-bottom:24px;-webkit-overflow-scrolling:touch}
.phone .navbar{position:relative;inset:auto;flex:none;height:auto;min-height:74px;padding:9px 8px;gap:2px}
.navbtn{min-width:0;flex:1;font-size:13px;min-height:48px}
.phone input,.phone textarea,.phone select,.modal input,.modal textarea,.modal select{font-size:16px;max-width:100%}
.text-input{resize:vertical}
.phone .report-rich-text{font-size:16px}
.ritual-page .ritual-cover{padding:24px 0 10px}
.ritual-page .ritual-cover h1{font-size:25px;margin:12px 0}
.ritual-question{margin:12px 0 18px;padding:12px 14px;border-left:2px solid #e9c89a80;background:#ffffff06;border-radius:0 10px 10px 0;text-align:left;color:#e6d3ee;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.theme-spread-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme-spread{min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px 12px;text-align:left;border:1px solid #dac0f144;border-radius:15px;background:linear-gradient(145deg,#53356a66,#211632);color:#e4d6ed;cursor:pointer}
.theme-spread.active{border-color:#f1cf98;background:linear-gradient(145deg,#70507188,#33203f);box-shadow:inset 0 0 0 1px #f1cf9833}
.theme-spread-heading strong{display:block;color:#ffe4b8;font-family:var(--serif);font-size:17px}
.theme-spread-heading small{display:block;font-size:12px;color:#cdb9dc;margin-top:4px}
.theme-spread-description{font-size:13px;line-height:1.7;flex:1}
.theme-spread-status{color:#f4d29d;font-size:12px;margin-top:2px}
.spread-price-note{text-align:center;color:#d3b7ce;font-size:13px;margin:12px 0 20px;line-height:1.6}
.spread-preview{padding:0 10px 12px;border:1px solid #e9c89a33;border-radius:18px;background:#ffffff04;margin-bottom:20px}
.spread-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;margin:18px auto;max-width:350px;align-items:start;color:inherit}
.spread-position{text-align:center;min-width:0;font-size:12px;line-height:1.6}
.position-card{width:100%;max-width:86px;aspect-ratio:3/5;margin:0 auto 7px;border:1px dashed #b999c66b;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#3f2c5388,#1b132488);color:#c9a2df;font-size:28px;overflow:hidden}
.spread-position>span{display:block;overflow-wrap:anywhere}
.spread-position>span b{font-family:var(--serif);color:#b991ca}
.filled .position-card{border-style:solid;border-color:#e6bd91}
.position-card .card-art-frame{height:100%;aspect-ratio:auto}
.position-pick-name{display:block;font-size:11px;line-height:1.6;min-height:18px;margin-bottom:3px;color:inherit}
.layout-single .spread-position{grid-column:2}
.layout-triangle .position-3{grid-column:2;grid-row:2}
.layout-triangle .position-2{grid-column:3}
.layout-cross .position-1{grid-column:2;grid-row:2}
.layout-cross .position-2{grid-column:2;grid-row:1}
.layout-cross .position-3{grid-column:1;grid-row:2}
.layout-cross .position-4{grid-column:3;grid-row:2}
.layout-cross .position-5{grid-column:2;grid-row:3}
.layout-fork .position-1{grid-column:2;grid-row:1}
.layout-fork .position-2{grid-column:2;grid-row:2}
.layout-fork .position-3{grid-column:2;grid-row:3}
.layout-fork .position-4{grid-column:1;grid-row:3}
.layout-fork .position-5{grid-column:3;grid-row:3}
.report-paper .spread-position{color:#62486d}
.report-paper .position-card{border-color:#a67b9a80}
.theme-spread:focus-visible,.back-btn:focus-visible{outline:2px solid #ffe1ad;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.draw-flip{transition:none}}
.reward-card{align-items:flex-start}
.reward-copy{flex:1;min-width:0}
.reward-copy p{font-size:14px;line-height:1.7}
.reward-copy .btn{margin-top:8px}
.modal [data-act="confirm-pay"]{margin-top:10px}
.hero{height:390px}
.hero h1{font-size:38px}
.hero-kicker{white-space:normal;letter-spacing:1px;line-height:1.6}
.hero-portrait{height:380px}
.hero-cta small{max-width:100px}
.daily-tile,.cat{overflow-wrap:anywhere}
.daily-tile small,.cat small{white-space:normal}
.week-days{gap:4px}
.day{font-size:13px;min-width:0;letter-spacing:-.4px}
.pitch{height:calc(var(--app-height,100vh) - 48px);min-height:0}
.modal{max-height:calc(var(--app-height,100vh) - 36px)}
@supports(height:100dvh){.phone{height:calc(var(--app-height,100dvh) - 48px)}.modal{max-height:calc(var(--app-height,100dvh) - 36px)}}
@media(max-width:920px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  .stage{position:fixed;inset:0 0 auto;height:var(--app-height,100vh);display:flex;padding:0;overflow:hidden}
  .phone{width:100%;max-width:500px;height:100%;max-height:none;min-height:0;margin:0 auto;border:0;border-radius:0}
  .phone .status{display:none}
  .phone .topbar{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .phone .navbar{padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  .hero h1{font-size:clamp(30px,8.4vw,38px)}
  .toast{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
  @supports(height:100dvh){.stage{height:var(--app-height,100dvh)}}
}
@media(max-width:370px){.hero-copy{right:102px}.hero-cta{gap:8px}.hero-cta .btn{font-size:15px;padding:12px 8px}.hero-cta small{max-width:85px}.sample-body{gap:8px}.mini-cards{width:95px}.sample-bottom{flex-wrap:wrap}.hero{height:410px}.brand{font-size:18px}.topbar{gap:8px}}