/* Polair Studio — scoped presentation, preserving the Tử Vi edition. */
html { background:#101a2d; scrollbar-width:thin; scrollbar-color:#526077 #101a2d; }
body { overscroll-behavior-y:none; }
button:focus-visible,a:focus-visible { outline:2px solid #dcc8f0; outline-offset:5px; }
#screen-mode { overflow:hidden; }
#screen-mode .topbar { position:relative; z-index:2; }
.portal-cover { position:relative; height:405px; margin:0 24px; isolation:isolate; }
.portal-meta,.portal-footer { display:flex; justify-content:space-between; font:8px/1.5 var(--font-body); letter-spacing:1.7px; color:#b9b5b1; }
.portal-meta { border-top:1px solid #e9dfcc30; padding-top:14px; }
.portal-cover h1 { position:relative; z-index:2; font:300 106px/.84 var(--font-headline); letter-spacing:-3px; margin:31px 0 0; pointer-events:none; }
.portal-cover h1 em { font-style:normal; padding-left:72px; }
.portal-caption { position:absolute; left:0; bottom:19px; font:11px/1.8 var(--font-body); color:#c3bbad; z-index:2; }
.portal-prism { position:absolute; width:300px; height:300px; right:-65px; top:104px; }
.portal-orbit { position:absolute; inset:30px; border:1px solid #c4b7e13d; border-radius:50%; transform:rotate(-32deg) scaleY(.56); }
.portal-orbit:after { content:''; position:absolute; inset:-26px; border:1px solid #c4b7e118; border-radius:50%; }
.portal-spectrum { position:absolute; left:-120px; top:164px; width:460px; height:25px; transform:rotate(-35deg); background:linear-gradient(0deg,transparent,#5967ed 12%,#54d9de 28%,#eaf6da 46%,#fff4e2 53%,#e4b387 66%,#df92c6 79%,transparent); filter:blur(7px); box-shadow:0 0 40px #b0bfee35; animation:studio-light 9s ease-in-out infinite; }
.portal-lens { position:absolute; width:142px; height:174px; left:80px; top:62px; border:1px solid #fff4dd39; border-radius:80px 80px 5px 5px; background:linear-gradient(130deg,#e8e4ff16,#ffffff02 55%,#e8e4ff19); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); transform:rotate(18deg); box-shadow:inset 1px 1px 20px #f1dfff09,0 15px 50px #0002; }
.portal-axis { position:absolute; top:242px; left:120px; color:#d8cbba88; font:8px var(--font-body); letter-spacing:3px; }
#screen-mode .mode-select { display:block; padding:0 24px; }
#screen-mode .mode-card,#screen-mode .mode-card:nth-child(2) { display:grid; grid-template-columns:1fr 70px; gap:0; padding:21px 0 22px; border-top:1px solid #e9dfcc35; min-height:142px; overflow:visible; }
#screen-mode .mode-index { grid-column:1; font:8px var(--font-body); letter-spacing:1.7px; margin:0 0 10px; }
#screen-mode .mode-card .mode-name { grid-column:1; padding:0; margin:0; font:300 61px/.95 var(--font-headline); letter-spacing:-1px; }
#screen-mode .mode-card .mode-desc { grid-column:1; border:0; padding:0; margin:10px 0 0; font:10px/1.6 var(--font-body); }
#screen-mode .mode-card:after,#screen-mode .mode-card:nth-child(2):after { top:auto; bottom:25px; right:0; font-size:18px; color:#d7c6df; }
.portal-mini-deck { position:absolute; right:6px; top:27px; width:54px; height:58px; }
.portal-mini-deck i { position:absolute; inset:0 7px; border:1px solid #cebad68a; border-radius:3px; background:linear-gradient(145deg,#42435f,#142137); transform:rotate(-18deg); }
.portal-mini-deck i:nth-child(2) { transform:rotate(0); }.portal-mini-deck i:nth-child(3) { transform:rotate(18deg); }
.portal-mini-orbit { position:absolute; right:0; top:28px; width:62px; height:62px; border:1px solid #c8b4da80; border-radius:50%; background:radial-gradient(ellipse,#c8b4da33,transparent 65%); }
.portal-mini-orbit:before,.portal-mini-orbit:after { content:''; position:absolute; inset:8px -8px; border:1px solid #a9cad04d; border-radius:50%; transform:rotate(45deg); }.portal-mini-orbit:after { transform:rotate(-45deg); }
.portal-footer { margin:9px 24px 0; padding:20px 0 max(22px,env(safe-area-inset-bottom)); border-top:1px solid #e9dfcc20; font-size:7px; }
#screen-home .home-hero { padding-top:8px; }
#screen-home #home-headline { font-size:112px; margin-top:22px; padding:0; }
#screen-home .home-hero:after { display:none; }
#screen-home .home-figure { height:306px; margin:0; width:100%; overflow:hidden; display:block; }
#screen-home .home-figure>img { width:100%; height:100%; border:0; filter:grayscale(1) brightness(.42); opacity:.45; mask-image:linear-gradient(transparent,#000 30%,#000 60%,transparent); }
#screen-home .home-figure:before { display:none; }
#screen-home .home-figure:after { display:block; inset:auto 0 29px; width:100%; height:28px; border-radius:50%; background:linear-gradient(90deg,transparent,#718bcb,#b79fc9,#d6b99b,transparent); filter:blur(23px); opacity:.4; }
#screen-home #tarot-cover-note { left:24px; top:auto; bottom:8px; max-width:100%; font:9px/1.65 var(--font-body); z-index:3; }
.studio-deck { position:absolute; z-index:2; width:160px; height:225px; left:calc(50% - 80px); top:22px; perspective:800px; animation:studio-float 8s ease-in-out infinite; }
.studio-card { position:absolute; inset:0; border:1px solid #d7c8b469; border-radius:5px; background:linear-gradient(140deg,#3b3d59,#15243b 60%,#374459); box-shadow:0 13px 35px #040a1640; transform-origin:50% 110%; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.studio-card:before { content:''; position:absolute; inset:9px; border:1px solid #d7c8b43a; border-radius:60px 60px 2px 2px; background:radial-gradient(ellipse at 50% 60%,#c3b6df18,transparent 68%); }
.studio-card:nth-child(1) { transform:rotate(-24deg) translateX(-14px); }.studio-card:nth-child(2) { transform:rotate(22deg) translateX(14px); }.studio-card:nth-child(3) { transform:rotate(-3deg); }
.studio-deck:hover .studio-card:first-child { transform:rotate(-33deg) translateX(-20px); }.studio-deck:hover .studio-card:nth-child(2) { transform:rotate(31deg) translateX(20px); }
.studio-card>span { position:absolute; left:19px; top:23px; font:7px var(--font-body); letter-spacing:2px; color:#d4c8b6; }
#screen-home .studio-card img { position:absolute; width:85px; height:85px; left:37px; top:67px; object-fit:contain; border:0; filter:none; }
.studio-card small { position:absolute; bottom:23px; width:100%; text-align:center; font:7px var(--font-body); letter-spacing:2px; }
#screen-home #tarot-topics-label { margin-top:20px; font-size:28px; border-bottom:0; }
#screen-home .intent-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
#screen-home .intent-step { display:flex; flex-direction:column; align-items:flex-start; min-height:143px; position:relative; gap:9px; padding:16px 0 22px; }
#screen-home .intent-step .topic-number { font-size:8px; align-self:flex-start; }
#screen-home .intent-step .label { font-size:34px; letter-spacing:-.3px; }
#screen-home .intent-step .sub { font-size:10px; line-height:1.6; max-width:95%; }
#screen-home .intent-step:after { position:absolute; right:0; top:14px; font-size:15px; }
#screen-home .intent-step:nth-child(1) { --topic:#de91b3; }#screen-home .intent-step:nth-child(2) { --topic:#adaddb; }#screen-home .intent-step:nth-child(3) { --topic:#cbb892; }#screen-home .intent-step:nth-child(4) { --topic:#8bbdc1; }
#screen-home .intent-step:hover,#screen-home .intent-step:focus-visible { background:linear-gradient(180deg,color-mix(in srgb,var(--topic) 15%,transparent),transparent); }
.spread-glyph { display:flex; justify-content:center; align-items:center; height:51px; margin-bottom:11px; }
.spread-glyph i { display:block; width:18px; height:30px; border:1px solid #c4b1d0a0; border-radius:2px; margin-left:-7px; transform:rotate(-12deg); background:#1c2940; }.spread-glyph i:nth-child(even) { transform:rotate(12deg) translateY(-5px); }
.spread-number { text-align:center; font-size:26px; color:#b8acc2; }
.spread-option { min-height:144px; }
#screen-draw .viewfinder-frame { border-radius:130px 130px 5px 5px; overflow:hidden; }
#screen-draw .hud-layer { padding-top:50px; }.hud-row:first-child { justify-content:center; gap:15px; }
#screen-chat .article-copy p { font-size:14px; line-height:1.85; }
#screen-chat .suggest-chip { padding:11px 14px; font-size:11px; }
@keyframes studio-light { 0%,100% { opacity:.65; transform:rotate(-35deg) translateY(-5px) scaleY(.85); }50% { opacity:1; transform:rotate(-31deg) translateY(7px) scaleY(1.18); } }
@keyframes studio-float { 0%,100% { translate:0 0; }50% { translate:0 -8px; } }
@media(max-width:350px) { .portal-cover { height:365px; }.portal-cover h1 { font-size:92px; }.portal-prism { right:-86px; top:87px; }#screen-home .intent-step .label { font-size:30px; }#screen-home #home-headline { font-size:100px; } }
@media(prefers-reduced-motion:reduce) { .portal-spectrum,.studio-deck { animation:none; }.studio-card { transition:none; } }
/* Quiet cover; light is refracted behind the frosted glass. */
#screen-home #tarot-cover-note,#screen-home .intent-step .sub { display:none; }
#screen-home .intent-step { min-height:105px; }
.portal-cover { height:376px; padding-top:1px; }
.portal-cover h1 { margin-top:24px; }
#screen-mode .mode-card,#screen-mode .mode-card:nth-child(2) { min-height:119px; padding-block:19px; }
#screen-mode .mode-select { padding-bottom:max(28px,env(safe-area-inset-bottom)); }
.portal-prism { top:125px; right:-38px; isolation:isolate; }
.prism-light { position:absolute; inset:0; transform:rotate(-32deg); animation:prism-exposure 8s ease-in-out infinite; }
.prism-input { position:absolute; left:-124px; top:147px; width:270px; height:4px; background:linear-gradient(90deg,transparent,#fff 65%); box-shadow:0 0 5px #fff,0 0 16px #dcecff,0 0 32px #afc9ea88; border-radius:50%; }
.prism-output { position:absolute; left:123px; top:107px; width:252px; height:86px; transform-origin:0 50%; mask-image:linear-gradient(90deg,#000 75%,transparent); }
.prism-output i { position:absolute; left:0; top:33px; width:100%; height:19px; border-radius:50%; mix-blend-mode:screen; filter:blur(6px); transform-origin:0 50%; }
.prism-output i:nth-child(1) { background:#ff5263; transform:rotate(-8deg); box-shadow:0 0 17px #ff435a; }
.prism-output i:nth-child(2) { background:#59ffad; box-shadow:0 0 17px #58ffb1; }
.prism-output i:nth-child(3) { background:#558dff; transform:rotate(8deg); box-shadow:0 0 17px #4981ff; }
.prism-output b { position:absolute; left:-10px; top:39px; width:95%; height:6px; background:linear-gradient(90deg,#fff,#fffdf4 35%,#ffffff99 70%,transparent); border-radius:50%; filter:blur(3px); box-shadow:0 0 17px #fff8; }
.portal-lens { left:69px; top:48px; width:160px; height:180px; border:0; border-radius:0; transform:rotate(13deg); clip-path:polygon(50% 0,100% 100%,0 100%); background:linear-gradient(115deg,#eef0ff45,transparent 27%,#dceaff08 62%,#fff5d530); backdrop-filter:blur(11px) saturate(1.65); -webkit-backdrop-filter:blur(11px) saturate(1.65); box-shadow:none; }
.portal-lens:before { content:''; position:absolute; inset:0; background:linear-gradient(118deg,transparent 30%,#fff9 31%,transparent 32%),linear-gradient(62deg,transparent 67%,#d5e3ff70 68%,transparent 69%); opacity:.65; }
.portal-lens:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:linear-gradient(90deg,transparent,#eff4ffa0,transparent); box-shadow:0 -4px 14px #d6e8ff50; }
.portal-lens i { position:absolute; inset:10px 12px 8px; clip-path:polygon(50% 0,100% 100%,0 100%); background:linear-gradient(125deg,#e4eaff14,transparent 55%,#e4eaff12); }
.prism-caustic { position:absolute; left:78px; top:232px; width:151px; height:11px; border-radius:50%; background:linear-gradient(90deg,#799bff20,#e4ecff60,#ffaaba20); filter:blur(12px); transform:rotate(13deg); }
@keyframes prism-exposure { 0%,100% { opacity:.76; }50% { opacity:1; } }
@media(max-width:350px) { .portal-cover { height:350px; }.portal-prism { top:104px; right:-63px; } }
@media(prefers-reduced-motion:reduce) { .prism-light { animation:none; } }
.prism-input { left:-72px; width:218px; }
/* Native touch scrolling: no double-tap zoom, retain pinch zoom. */
html, body { touch-action:manipulation; scroll-behavior:smooth; }
#app { touch-action:manipulation; }
.screen, .chat-messages, .drawn-cards-strip { -webkit-overflow-scrolling:touch; }
@media (prefers-reduced-motion:reduce) {
  html, body { scroll-behavior:auto; }
}