/* ===== BEGIN app.css ===== */ /* ============================================================ ARCANA TAROT 单文件本地演示版：78张牌、洗牌/抽牌/手动翻牌、三档服务、 多语言、本地用户、历史、月历、趋势图、程序化音效。 ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#08050e;--bg2:#120a20;--bg3:#1c1030;--panel:rgba(24,14,40,.74); --panel2:rgba(11,7,19,.9);--gold:#d7b65b;--gold2:#f2dc92;--gold3:#8f7130; --violet:#9a79d0;--silver:#b8b3c2;--ink:#f1eadc;--muted:#b8abc2;--faint:#786d85; --danger:#9a4d59;--success:#879b72;--line:rgba(215,182,91,.26); --ease:cubic-bezier(.22,.7,.18,1);--serif:'Cormorant Garamond','Noto Serif SC',serif; --display:'Cinzel','Noto Serif SC',serif;--cn:'Noto Serif SC','Noto Serif TC',serif; } html{scroll-behavior:smooth;background:var(--bg)} body{min-height:100vh;color:var(--ink);background:var(--bg);font-family:var(--serif);font-size:18px;line-height:1.65;overflow-x:hidden} button,input,select,textarea{font:inherit} button{color:inherit} a{color:inherit;text-decoration:none} ::selection{background:rgba(215,182,91,.28)} .hidden{display:none!important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ambient */ #starCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .ambient-veil{position:fixed;inset:0;z-index:1;pointer-events:none;background: radial-gradient(900px 560px at 70% -10%,rgba(125,78,184,.22),transparent 64%), radial-gradient(820px 520px at 8% 108%,rgba(215,182,91,.12),transparent 62%), linear-gradient(180deg,rgba(8,5,14,.12),rgba(8,5,14,.68));} .ambient-veil:before{content:"";position:absolute;inset:0;opacity:.24;background-image: repeating-radial-gradient(circle at 50% 140%,transparent 0 46px,rgba(215,182,91,.045) 47px 48px), linear-gradient(90deg,transparent 49.8%,rgba(215,182,91,.035) 50%,transparent 50.2%)} .ambient-veil:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,transparent 45%,rgba(0,0,0,.58) 100%)} /* opening rite */ #splash{position:fixed;inset:0;z-index:999;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,#201236 0,#0b0612 52%,#030205 100%);transition:opacity 1s ease,visibility 1s} #splash.gone{opacity:0;visibility:hidden} .splash-dust{position:absolute;inset:0} .splash-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:var(--gold2);box-shadow:0 0 10px var(--gold);animation:splashGather 3.6s var(--ease) forwards;animation-delay:var(--d)} @keyframes splashGather{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:.85}78%{opacity:1;transform:translate(calc(50vw - var(--x)),calc(45vh - var(--y))) scale(1)}100%{opacity:0;transform:translate(calc(50vw - var(--x)),calc(45vh - var(--y))) scale(0)}} .splash-core{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;transform:translateY(-2vh)} .splash-card{position:relative;width:124px;height:204px;border-radius:12px;transform-style:preserve-3d;animation:splashCard 3.8s var(--ease) forwards;box-shadow:0 0 60px rgba(215,182,91,.18)} @keyframes splashCard{0%{opacity:0;transform:scale(.62) rotateY(-80deg)}18%{opacity:1}58%{transform:scale(1) rotateY(360deg)}82%{transform:scale(1.06) rotateY(540deg)}100%{transform:scale(.92) rotateY(720deg);opacity:.25}} .card-back-pattern{position:absolute;inset:0;border-radius:inherit;background: radial-gradient(circle at 50% 50%,#d7b65b 0 4px,transparent 5px), radial-gradient(circle at 50% 50%,transparent 0 18px,rgba(215,182,91,.75) 19px 20px,transparent 21px), conic-gradient(from 22.5deg at 50% 50%,transparent 0 11.25deg,rgba(215,182,91,.18) 11.25deg 13deg,transparent 13deg 45deg), repeating-linear-gradient(45deg,rgba(154,121,208,.14) 0 2px,transparent 2px 10px), linear-gradient(145deg,#291848,#10091e 70%);border:1px solid rgba(242,220,146,.8);box-shadow:inset 0 0 0 4px #10091e,inset 0 0 0 5px rgba(215,182,91,.42),0 20px 50px rgba(0,0,0,.55)} .card-back-pattern:before,.card-back-pattern:after{content:"";position:absolute;inset:12px;border:1px solid rgba(215,182,91,.28);border-radius:7px;transform:rotate(45deg) scale(.64)} .card-back-pattern:after{transform:rotate(0) scale(.72);border-radius:50%} .splash-runes{position:absolute;inset:-44px;border:1px solid rgba(215,182,91,.35);border-radius:50%;animation:runeSpin 7s linear infinite} .splash-runes:before{content:"✦ ☾ ✧ ᚱ ✦ ᛟ ✧ ☽";position:absolute;inset:-16px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:12px;letter-spacing:13px;word-break:break-all;text-align:center;text-shadow:0 0 12px var(--gold)} @keyframes runeSpin{to{transform:rotate(360deg)}} .deck-ghosts{position:absolute;left:50%;top:50%;width:320px;height:230px;transform:translate(-50%,-50%);opacity:0;animation:ghostDeck 3.8s var(--ease) forwards} .deck-ghosts i{position:absolute;left:50%;top:50%;width:50px;height:82px;margin:-41px 0 0 -25px;border:1px solid rgba(215,182,91,.24);border-radius:5px;transform:rotate(var(--r)) translateY(-96px);transform-origin:50% 136px} @keyframes ghostDeck{0%,45%{opacity:0;transform:translate(-50%,-50%) scale(.7)}70%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}} .splash-title{font-family:var(--display);letter-spacing:.42em;padding-left:.42em;font-size:clamp(30px,6vw,48px);text-shadow:0 0 28px rgba(215,182,91,.5);animation:titleRise 1.1s ease 1.1s both} .splash-sub{font-size:13px;letter-spacing:.3em;color:#a99ab7;text-transform:uppercase;animation:titleRise 1.1s ease 1.4s both} @keyframes titleRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* nav */ .app-shell{position:relative;z-index:5;min-height:100vh} .topbar{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:18px;padding:14px clamp(14px,4vw,48px);background:linear-gradient(180deg,rgba(8,5,14,.94),rgba(8,5,14,.42),transparent);backdrop-filter:blur(14px)} .brand{font-family:var(--display);font-size:21px;letter-spacing:.34em;white-space:nowrap;cursor:pointer;text-shadow:0 0 18px rgba(215,182,91,.32);border:0!important;background:transparent!important;color:var(--ink);appearance:none;-webkit-appearance:none;padding:0;box-shadow:none!important} .brand em{font-style:normal;color:var(--gold)} .nav-links{display:flex;gap:5px;margin:0 auto;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(20,12,33,.62)} .nav-link,.icon-btn,.ghost-btn{border:1px solid transparent;background:transparent;cursor:pointer;transition:.35s var(--ease)} .nav-link{padding:7px 16px;border-radius:999px;color:var(--muted);font-size:14px;letter-spacing:.08em} .nav-link:hover,.nav-link.active{color:var(--ink);background:rgba(215,182,91,.12);border-color:rgba(215,182,91,.18)} .nav-tools{display:flex;align-items:center;gap:8px} .icon-btn,.ghost-btn,.lang-select{min-height:38px;border:1px solid var(--line);border-radius:999px;background:rgba(20,12,33,.62);color:var(--muted);padding:7px 13px;cursor:pointer;transition:.35s var(--ease)} .icon-btn{width:40px;padding:0;display:grid;place-items:center;color:var(--gold);font-size:17px} .icon-btn:hover,.ghost-btn:hover,.lang-select:hover{color:var(--ink);border-color:rgba(215,182,91,.55);box-shadow:0 0 18px rgba(215,182,91,.14)} .lang-select{appearance:none;padding-right:26px;font-size:13px} .lang-select option{color:#19111f;background:#f0e6d3} /* V4 icon language — restrained outline glyphs used across navigation, actions and content. */ .ui-icon{width:1.08em;height:1.08em;display:inline-block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.16em;filter:drop-shadow(0 0 7px rgba(215,182,91,.16))} .nav-link,.ghost-btn,.rite-btn,.danger-btn,.close-modal{display:inline-flex;align-items:center;justify-content:center;gap:.52em} .nav-link .ui-icon{font-size:15px;color:var(--gold2)} .nav-link.active .ui-icon{filter:drop-shadow(0 0 7px rgba(242,220,146,.55))} .rite-btn .ui-icon,.ghost-btn .ui-icon,.danger-btn .ui-icon{font-size:1.05em} .brand{display:inline-flex;align-items:center;gap:10px}.brand-sigil{width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(215,182,91,.34);border-radius:50%;color:var(--gold2);box-shadow:inset 0 0 13px rgba(215,182,91,.08),0 0 14px rgba(215,182,91,.08)}.brand-sigil .ui-icon{width:15px;height:15px} .select-with-icon{position:relative;display:flex;align-items:center}.select-with-icon>.ui-icon{position:absolute;left:11px;z-index:1;width:15px;height:15px;color:var(--gold);pointer-events:none}.select-with-icon .lang-select{padding-left:32px} .icon-btn .ui-icon{width:18px;height:18px} .hero-note[data-icon],.trust-point[data-icon],.service-card h3[data-icon],.stat-chip[data-icon],.panel h3[data-icon],.calendar-head h3[data-icon],.detail-section h3[data-icon],.interpret-card h4[data-icon],.deep-head h3[data-icon]{display:flex;align-items:center;gap:.58em} .hero-note>.ui-icon{color:var(--gold);font-size:15px}.trust-point>.ui-icon{width:22px;height:22px;color:var(--gold);margin-right:3px}.trust-point>b{flex:0 0 auto} .service-card h3>.ui-icon{width:24px;height:24px;color:var(--gold2)}.stat-chip>.ui-icon{width:23px;height:23px;color:var(--gold);margin-bottom:3px}.stat-chip[data-icon]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} .panel h3>.ui-icon,.calendar-head h3>.ui-icon{color:var(--gold2)}.overview-card>.ui-icon{width:24px;height:24px;color:var(--gold);margin-bottom:9px}.overview-card{position:relative}.overview-card span{display:block} .field label[data-icon]{display:flex;align-items:center;gap:.48em}.field label[data-icon]>.ui-icon{color:var(--gold);width:15px;height:15px} .eyebrow[data-icon],.history-hero h1[data-icon],.detail-sheet>h1[data-icon]{display:flex;align-items:center;gap:.58em}.eyebrow[data-icon]{justify-content:center}.history-hero h1[data-icon]>.ui-icon{color:var(--gold);width:.8em;height:.8em} .api-error h3[data-icon],.api-note[data-icon],.witch-voice[data-icon],.modal h2[data-icon],.api-config h3[data-icon],.parchment h2[data-icon]{display:flex;align-items:center;gap:.55em}.api-note[data-icon]{justify-content:center}.witch-voice[data-icon]{justify-content:center} @media(max-width:520px){.nav-link{gap:.34em}.nav-link .ui-icon{font-size:13px}.brand-sigil{width:22px;height:22px}.select-with-icon>.ui-icon{display:none}.select-with-icon .lang-select{padding-left:10px}} /* routing views */ .view{display:none;min-height:calc(100vh - 70px);animation:viewIn .72s var(--ease)} .view.active{display:block} @keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .container{width:min(1160px,calc(100% - 32px));margin:0 auto} .section{padding:90px 0} .eyebrow{font-size:12px;letter-spacing:.42em;color:var(--gold);text-transform:uppercase;margin-bottom:14px} .display-title{font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:.055em;text-wrap:balance} .section-title{font-size:clamp(30px,4.7vw,52px)} .muted{color:var(--muted)} /* hero */ .hero{min-height:86vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px;padding:50px 0 80px} .hero-copy h1{font-size:clamp(42px,6.8vw,82px);text-shadow:0 0 36px rgba(215,182,91,.18)} .hero-copy h1 span{display:block;color:var(--gold2);font-style:italic;font-family:var(--serif);font-weight:500;font-size:.62em;letter-spacing:.08em;margin-top:9px} .hero-copy p{max-width:620px;color:var(--muted);font-size:clamp(18px,2vw,22px);margin-top:24px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .rite-btn{position:relative;border:1px solid rgba(215,182,91,.62);border-radius:12px;padding:15px 28px;background:linear-gradient(180deg,rgba(215,182,91,.18),rgba(215,182,91,.04));font-family:var(--display);font-size:14px;letter-spacing:.16em;cursor:pointer;transition:.4s var(--ease);overflow:hidden} .rite-btn:before{content:"";position:absolute;inset:4px;border:1px solid rgba(215,182,91,.2);border-radius:8px;pointer-events:none} .rite-btn:hover{transform:translateY(-3px);box-shadow:0 18px 45px -20px rgba(215,182,91,.6);background:linear-gradient(180deg,rgba(215,182,91,.26),rgba(215,182,91,.06))} .rite-btn.secondary{color:var(--muted);border-color:rgba(184,179,194,.28);background:rgba(255,255,255,.025)} .rite-btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none} .hero-note{margin-top:18px;color:var(--faint);font-size:14px;letter-spacing:.08em} .hero-deck{position:relative;height:580px;perspective:1300px;display:grid;place-items:center} .hero-card{position:absolute;width:218px;height:358px;border-radius:18px;transform-style:preserve-3d;animation:heroFloat 6s ease-in-out infinite;filter:drop-shadow(0 30px 34px rgba(0,0,0,.48))} .hero-card:nth-child(2){transform:translate(-115px,35px) rotate(-17deg) scale(.86);opacity:.65;animation-delay:-1.4s} .hero-card:nth-child(3){transform:translate(118px,34px) rotate(17deg) scale(.86);opacity:.65;animation-delay:-2.8s} .hero-card .card-back-pattern{position:absolute} .hero-card:after{content:"78";position:absolute;left:50%;bottom:-58px;transform:translateX(-50%);font-family:var(--display);font-size:34px;color:var(--gold);text-shadow:0 0 20px rgba(215,182,91,.5)} @keyframes heroFloat{0%,100%{translate:0 0}50%{translate:0 -15px}} .orbit{position:absolute;width:470px;height:470px;border:1px solid rgba(215,182,91,.14);border-radius:50%;animation:runeSpin 30s linear infinite} .orbit:before,.orbit:after{content:"";position:absolute;inset:50px;border:1px dashed rgba(154,121,208,.18);border-radius:50%} .orbit:after{inset:100px;border-style:solid} .moon-phase{position:absolute;inset:0;animation:runeSpin 18s linear infinite reverse} .moon-phase i{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px rgba(215,182,91,.7);transform:rotate(var(--a)) translateY(-232px)} /* home sections */ .trust{border-top:1px solid rgba(215,182,91,.12);border-bottom:1px solid rgba(215,182,91,.12);background:linear-gradient(90deg,transparent,rgba(34,20,53,.45),transparent)} .trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center} .coven-portrait{position:relative;min-height:430px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background: radial-gradient(circle at 50% 34%,rgba(215,182,91,.18),transparent 20%), radial-gradient(circle at 30% 75%,rgba(154,121,208,.18),transparent 28%), linear-gradient(160deg,#241438,#09060f 70%);box-shadow:inset 0 0 80px rgba(0,0,0,.6)} .coven-portrait .figure{position:absolute;bottom:-40px;width:170px;height:360px;border-radius:48% 48% 20% 20%;background:linear-gradient(180deg,#17101d,#050307);filter:drop-shadow(0 0 20px rgba(0,0,0,.7))} .coven-portrait .figure:before{content:"";position:absolute;left:50%;top:-35px;width:96px;height:112px;border-radius:48% 48% 42% 42%;transform:translateX(-50%);background:linear-gradient(180deg,#201624,#08060b);box-shadow:inset 0 -32px 30px rgba(0,0,0,.8)} .coven-portrait .figure:after{content:"";position:absolute;left:50%;top:-54px;width:150px;height:58px;transform:translateX(-50%);clip-path:polygon(50% 0,100% 100%,0 100%);background:#0b0710} .coven-portrait .f1{left:8%;transform:scale(.86);opacity:.7}.coven-portrait .f2{left:34%;z-index:2}.coven-portrait .f3{right:7%;transform:scale(.86);opacity:.7} .coven-portrait .table{position:absolute;left:8%;right:8%;bottom:0;height:90px;background:linear-gradient(#2b1734,#100912);clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)} .candle{position:absolute;bottom:70px;width:8px;height:70px;background:#d6c59c;box-shadow:0 0 20px rgba(255,196,92,.2)} .candle:before{content:"";position:absolute;left:50%;top:-22px;width:14px;height:24px;border-radius:50% 50% 45% 45%;transform:translateX(-50%);background:radial-gradient(circle at 50% 70%,#fff3ae,#ffb24f 42%,transparent 70%);filter:drop-shadow(0 0 10px #ffb24f);animation:flame 1.2s ease-in-out infinite alternate} .candle.c1{left:18%}.candle.c2{right:18%;height:48px} @keyframes flame{to{transform:translateX(-50%) scale(.82,1.14) rotate(3deg)}} .trust-copy blockquote{font-size:clamp(24px,3.3vw,38px);line-height:1.38;color:var(--gold2);margin:25px 0;font-style:italic} .trust-points{display:grid;gap:15px;margin-top:28px} .trust-point{display:grid;grid-template-columns:34px 1fr;gap:14px;color:var(--muted)} .trust-point b{color:var(--gold);font-family:var(--display);font-size:12px;border:1px solid var(--line);width:30px;height:30px;border-radius:50%;display:grid;place-items:center} .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px} .service-card{position:relative;padding:30px 24px;min-height:300px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,rgba(35,20,55,.72),rgba(10,6,17,.78));overflow:hidden;transition:.4s var(--ease)} .service-card:after{content:"";position:absolute;inset:auto -20% -35% 20%;height:180px;background:radial-gradient(circle,rgba(215,182,91,.13),transparent 68%)} .service-card:hover{transform:translateY(-7px);border-color:rgba(215,182,91,.5)} .service-no{font-family:var(--display);color:var(--gold);font-size:12px;letter-spacing:.24em} .service-card h3{font-family:var(--display);font-size:22px;margin:16px 0 12px}.service-card p{color:var(--muted);font-size:16px} .deck-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:36px} .stat-chip{padding:18px 14px;border:1px solid var(--line);border-radius:16px;text-align:center;background:rgba(18,10,31,.56)} .stat-chip b{display:block;font-family:var(--display);font-size:28px;color:var(--gold2)}.stat-chip span{font-size:13px;color:var(--muted)} /* ritual */ #view-ritual{overflow:hidden} .ritual-shell{min-height:calc(100vh - 66px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:28px 0 70px} .ritual-head{text-align:center;min-height:95px} .ritual-head h2{font-family:var(--display);font-weight:500;font-size:clamp(24px,4vw,40px);letter-spacing:.08em} .ritual-head p{color:var(--muted);font-style:italic;margin-top:8px} .progress-orbs{display:flex;align-items:center;gap:8px;margin:18px 0 4px} .progress-orbs i{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold3);background:transparent;transition:.4s}.progress-orbs i.on{background:var(--gold);box-shadow:0 0 12px rgba(215,182,91,.8)} .deck-stage{position:relative;width:min(1100px,96vw);height:520px;perspective:1500px;margin-top:8px} .deck-card{position:absolute;left:50%;top:43%;width:84px;height:138px;margin:-69px 0 0 -42px;transform-style:preserve-3d;border-radius:9px;will-change:transform,opacity,filter;transition:transform .55s var(--ease),filter .3s,opacity .4s;cursor:default} .deck-card .card-back-pattern{position:absolute} .deck-card.shuffle{animation:ritualShuffle 5.2s var(--ease) both;animation-delay:var(--delay)} @keyframes ritualShuffle{ 0%{transform:translate(0,0) rotate(0);opacity:0} 7%{opacity:1} 22%{transform:translate(var(--fanX),var(--fanY)) rotate(var(--fanR))} 36%{transform:translate(var(--splitX),var(--riffleY)) rotate(var(--splitR))} 51%{transform:translate(calc(var(--splitX)*-.84),calc(var(--riffleY)*-.45)) rotate(calc(var(--splitR)*-1))} 66%{transform:translate(var(--swirlX),var(--swirlY)) rotate(var(--swirlR))} 82%{transform:translate(calc(var(--fanX)*.35),calc(var(--fanY)*.22)) rotate(calc(var(--fanR)*.35))} 100%{transform:translate(0,0) rotate(0);opacity:1} } .deck-stage.selecting .deck-card{cursor:pointer} .deck-stage.selecting .deck-card:hover,.deck-card.hovered{filter:brightness(1.26) drop-shadow(0 0 15px rgba(215,182,91,.68));z-index:110!important} .deck-card.chosen{opacity:0;pointer-events:none} .shuffle-label{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:var(--faint);letter-spacing:.22em;font-size:13px;white-space:nowrap;animation:pulse 2.2s ease-in-out infinite} @keyframes pulse{50%{opacity:.45}} .hand-zone{width:min(760px,94vw);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,4vw,40px);margin-top:-35px;position:relative;z-index:130;transition:.7s var(--ease)} .hand-slot{min-height:205px;border:1px dashed rgba(215,182,91,.24);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;color:var(--faint);transition:.5s var(--ease)} .hand-slot.filled{border-style:solid;border-color:rgba(215,182,91,.44);background:rgba(12,7,20,.42)} .hand-slot .slot-label{font-size:13px;letter-spacing:.18em;text-align:center;position:absolute;bottom:12px;left:4px;right:4px} .mini-back{width:76px;height:124px;position:relative;border-radius:8px;box-shadow:0 12px 25px rgba(0,0,0,.4)} .mini-back .card-back-pattern{position:absolute} .flying-card{position:fixed;z-index:500;width:84px;height:138px;border-radius:9px;transition:transform .92s var(--ease),opacity .92s;pointer-events:none} .flying-card .card-back-pattern{position:absolute} .reveal-mode .deck-stage{height:80px;opacity:0;pointer-events:none} .reveal-mode .hand-zone{margin-top:70px;width:min(920px,96vw);gap:clamp(10px,4vw,54px)} .reveal-mode .hand-slot{min-height:400px;border-color:transparent;background:transparent} .reveal-card{width:clamp(110px,18vw,184px);aspect-ratio:0.62;position:relative;transform-style:preserve-3d;cursor:pointer;transition:transform 1.05s var(--ease);border-radius:13px} .reveal-card .face{position:absolute;inset:0;border-radius:13px;backface-visibility:hidden;overflow:hidden;box-shadow:0 22px 45px rgba(0,0,0,.5)} .reveal-card .back{position:absolute} .reveal-card .front{transform:rotateY(180deg);background:#e6d3a8;border:1px solid #d5b560;color:#2a1b33} .reveal-card.flipped{transform:rotateY(180deg)} .reveal-card.locked{cursor:default;opacity:.82} .reveal-card:not(.flipped):not(.locked):hover{transform:translateY(-10px) rotateZ(-1deg);filter:drop-shadow(0 0 20px rgba(215,182,91,.35))} .reveal-card.flipped.reversed .card-art-wrap{transform:rotate(180deg)} .card-frame{position:absolute;inset:5px;border:1px solid rgba(99,65,23,.65);border-radius:9px;pointer-events:none;z-index:5;box-shadow:inset 0 0 0 3px rgba(255,244,204,.42)} .card-art-wrap{position:absolute;inset:11px 10px 30px;overflow:hidden;border:1px solid rgba(90,56,18,.55);background:#d2bd8c;transition:transform .65s var(--ease)} .card-art-wrap svg{width:100%;height:100%;display:block} .card-art-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transform:scale(1.015)} .card-art-wrap:after{content:"";position:absolute;inset:-25%;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,240,172,.16) 49%,transparent 60%);transform:translateX(-45%);animation:cardShimmer 6.5s ease-in-out infinite} .reveal-card.flipped .card-art-wrap img,.result-mini-card .card-art-wrap img{animation:cardBreath 8s ease-in-out infinite alternate} @keyframes cardBreath{to{transform:scale(1.045) translateY(-1.2%)}}@keyframes cardShimmer{50%,100%{transform:translateX(45%)}} .card-nameplate{position:absolute;left:9px;right:9px;bottom:6px;height:20px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(8px,1.4vw,12px);letter-spacing:.04em;text-align:center} .orientation-badge{position:absolute;right:8px;top:8px;z-index:8;background:rgba(18,10,26,.82);border:1px solid rgba(215,182,91,.5);color:var(--gold2);border-radius:999px;padding:3px 7px;font-size:9px;letter-spacing:.08em} .reveal-card .burst{position:absolute;inset:-45%;z-index:-1;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(242,220,146,.82),rgba(215,182,91,.2) 32%,transparent 68%)} .reveal-card.flipped .burst{animation:goldBurst 1.1s ease .38s} @keyframes goldBurst{0%{opacity:0;transform:scale(.25)}35%{opacity:1}100%{opacity:0;transform:scale(1.1)}} .flip-prompt{font-size:13px;color:var(--gold);letter-spacing:.12em;text-align:center;min-height:22px} .selected-count{margin-top:20px;color:var(--muted);font-size:14px;letter-spacing:.14em} /* animated SVG layers */ .anim-cloud{animation:cloudDrift 8s ease-in-out infinite alternate;transform-origin:center}.anim-cloud.slow{animation-duration:12s;animation-delay:-3s} .anim-water{animation:waterMove 4s ease-in-out infinite alternate;transform-origin:center}.anim-flame{animation:svgFlame 1.1s ease-in-out infinite alternate;transform-origin:bottom} .anim-glow{animation:svgGlow 2.2s ease-in-out infinite alternate}.anim-banner{animation:bannerWave 2.8s ease-in-out infinite alternate;transform-origin:left}.anim-star{animation:starTwinkle 1.7s ease-in-out infinite alternate} @keyframes cloudDrift{to{transform:translateX(8px)}}@keyframes waterMove{to{transform:translateX(-5px) skewX(-2deg)}} @keyframes svgFlame{to{transform:scale(.86,1.16) skewX(4deg)}}@keyframes svgGlow{to{opacity:.42;filter:drop-shadow(0 0 8px #ffe59b)}} @keyframes bannerWave{to{transform:skewY(3deg) scaleX(.98)}}@keyframes starTwinkle{to{opacity:.35;transform:scale(.75)}} /* result */ .result-page{padding:50px 0 90px} .result-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:36px} .result-mini-card{width:118px;aspect-ratio:.62;border-radius:10px;overflow:hidden;position:relative;background:#e6d3a8;color:#281a30;box-shadow:0 18px 35px rgba(0,0,0,.44)} .result-mini-card.reversed .card-art-wrap{transform:rotate(180deg)} .result-mini-card .card-art-wrap{inset:8px 8px 25px}.result-mini-card .card-nameplate{font-size:8px;height:17px} .scroll-wrap{position:relative;width:min(900px,100%);margin:0 auto;filter:drop-shadow(0 30px 42px rgba(0,0,0,.5))} .parchment{position:relative;padding:clamp(38px,7vw,76px) clamp(26px,7vw,80px);min-height:310px;color:#34251f;background: radial-gradient(circle at 16% 16%,rgba(126,81,39,.12),transparent 30%), radial-gradient(circle at 82% 80%,rgba(126,81,39,.12),transparent 32%), repeating-linear-gradient(0deg,rgba(82,51,26,.022) 0 1px,transparent 1px 4px), linear-gradient(100deg,#d8bd83,#eed9a3 16%,#e5cc96 50%,#f0dba6 83%,#c9a96e);border-top:10px solid #7b5227;border-bottom:10px solid #7b5227;clip-path:polygon(2% 0,98% 0,100% 5%,99% 95%,97% 100%,3% 100%,0 94%,1% 6%);transform-origin:center;animation:scrollOpen 1.7s var(--ease) both} @keyframes scrollOpen{from{opacity:0;transform:scaleX(.08) scaleY(.82)}60%{opacity:1}to{transform:none}} .parchment:before{content:"";position:absolute;inset:16px;border:1px solid rgba(111,69,28,.34);pointer-events:none} .parchment h2{font-family:var(--cn);text-align:center;font-size:clamp(25px,4vw,38px);letter-spacing:.12em;color:#4c321f} .oracle-line{font-family:var(--cn);font-size:clamp(20px,3vw,29px);line-height:1.85;text-align:center;margin:32px auto;max-width:700px;color:#4a2f25} .tier-mark{text-align:center;font-size:12px;letter-spacing:.28em;color:#81643a;border-top:1px solid rgba(93,61,29,.28);padding-top:18px} .result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0} .deep-section,.witch-section{width:min(960px,100%);margin:35px auto 0;border:1px solid var(--line);border-radius:22px;padding:clamp(24px,5vw,48px);background:linear-gradient(160deg,rgba(31,17,48,.86),rgba(8,5,13,.92));animation:sectionUnveil 1.3s var(--ease)} @keyframes sectionUnveil{from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} .deep-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px} .deep-head h3{font-family:var(--display);font-size:clamp(22px,3vw,32px)} .badge{font-size:11px;letter-spacing:.18em;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:5px 10px;white-space:nowrap} .interpret-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px} .interpret-card{padding:22px 18px;border-left:2px solid var(--gold3);background:rgba(215,182,91,.045);border-radius:0 14px 14px 0} .interpret-card h4{font-family:var(--display);font-size:16px;color:var(--gold2);letter-spacing:.08em;margin-bottom:10px}.interpret-card p{color:var(--muted);font-family:var(--cn);font-size:16px} .loading-ritual{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px;color:var(--muted)} .loading-sigil{width:66px;height:66px;border:1px solid var(--gold3);border-radius:50%;position:relative;animation:runeSpin 2.2s linear infinite}.loading-sigil:before{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:22px}.loading-sigil:after{content:"";position:absolute;inset:8px;border:1px dashed var(--violet);border-radius:50%} .followup{margin-top:26px;border-top:1px solid var(--line);padding-top:22px} .chat-log{display:grid;gap:12px;margin-bottom:14px;max-height:340px;overflow:auto} .chat-bubble{max-width:86%;padding:13px 16px;border-radius:16px;font-size:15px}.chat-bubble.user{justify-self:end;background:rgba(215,182,91,.12);border:1px solid var(--line)}.chat-bubble.oracle{justify-self:start;background:rgba(154,121,208,.1);color:var(--muted)} .followup-row{display:grid;grid-template-columns:1fr auto;gap:10px}.followup-row textarea{min-height:58px;resize:vertical;border:1px solid var(--line);border-radius:13px;padding:11px 13px;background:rgba(4,3,8,.58);color:var(--ink);outline:none}.followup-row textarea:focus{border-color:rgba(215,182,91,.58)} .followup-note{font-size:12px;color:var(--faint);margin-top:8px} .witch-section{position:relative;overflow:hidden;border-color:rgba(215,182,91,.38);box-shadow:inset 0 0 90px rgba(0,0,0,.54)} .witch-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 0,rgba(255,172,70,.1),transparent 25%),radial-gradient(circle at 88% 0,rgba(255,172,70,.1),transparent 25%)} .crystal-ball{width:98px;height:98px;border-radius:50%;margin:0 auto 22px;background:radial-gradient(circle at 40% 32%,rgba(255,255,255,.8),rgba(154,121,208,.28) 18%,rgba(62,25,94,.7) 55%,#12071e 80%);box-shadow:inset -12px -12px 24px rgba(0,0,0,.45),0 0 35px rgba(154,121,208,.45);animation:orbPulse 3s ease-in-out infinite} @keyframes orbPulse{50%{box-shadow:inset -12px -12px 24px rgba(0,0,0,.45),0 0 60px rgba(215,182,91,.35);transform:translateY(-3px)}} .fable{position:relative;z-index:2;font-family:var(--cn);font-size:18px;line-height:2;color:#d8ccda;white-space:pre-wrap} .api-note{width:min(960px,100%);margin:20px auto;color:var(--faint);font-size:12px;text-align:center} /* profile */ .profile-page{padding:50px 0 90px} .profile-header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px} .user-card{display:flex;align-items:center;gap:16px}.avatar{width:62px;height:62px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:25px;color:var(--gold);background:radial-gradient(circle,#29183f,#0b0712)} .user-card h2{font-family:var(--display);font-size:28px}.user-card p{color:var(--muted);font-size:14px} .overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}.overview-card{padding:21px;border:1px solid var(--line);border-radius:18px;background:rgba(22,12,36,.64)}.overview-card span{font-size:12px;color:var(--faint);letter-spacing:.13em}.overview-card b{display:block;font-family:var(--display);font-size:29px;color:var(--gold2);margin-top:4px} .profile-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:22px}.panel{border:1px solid var(--line);border-radius:20px;padding:22px;background:rgba(16,9,27,.7)}.panel h3{font-family:var(--display);font-size:20px;margin-bottom:17px} .calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal-cell{aspect-ratio:1;border:1px solid rgba(215,182,91,.12);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;color:var(--muted);cursor:default;position:relative}.cal-cell.has{cursor:pointer;color:var(--ink);background:rgba(215,182,91,var(--heat));box-shadow:inset 0 0 12px rgba(215,182,91,.06)}.cal-cell.has:hover{border-color:var(--gold)}.cal-head{aspect-ratio:auto;border:none;color:var(--faint);font-size:11px}.cal-cell small{font-size:8px;color:var(--gold2)} #trendCanvas{width:100%;height:230px;display:block}.history-list{display:grid;gap:10px;max-height:520px;overflow:auto}.history-item{padding:15px;border:1px solid rgba(215,182,91,.14);border-radius:14px;background:rgba(255,255,255,.018);cursor:pointer;transition:.3s}.history-item:hover{border-color:rgba(215,182,91,.45);transform:translateX(3px)}.history-meta{display:flex;justify-content:space-between;color:var(--faint);font-size:11px}.history-item h4{font-size:16px;margin:7px 0;color:var(--gold2)}.history-cards{font-size:13px;color:var(--muted)} .settings-form{display:grid;gap:13px}.field{display:grid;gap:6px}.field label{font-size:12px;color:var(--faint);letter-spacing:.1em}.field input,.field select{border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);background:rgba(4,3,8,.55);outline:none}.danger-btn{border:1px solid rgba(154,77,89,.45);background:rgba(154,77,89,.08);color:#d1a4aa;border-radius:10px;padding:10px 13px;cursor:pointer} .empty{text-align:center;color:var(--faint);padding:35px 10px;font-style:italic} /* history detail */ .detail-page{padding:50px 0 90px}.detail-sheet{width:min(940px,100%);margin:auto;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,5vw,48px);background:rgba(15,8,25,.82)}.detail-sheet h1{font-family:var(--display);font-size:clamp(28px,4vw,45px)}.detail-section{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}.detail-section h3{color:var(--gold2);font-family:var(--display);font-size:18px;margin-bottom:10px}.detail-section p{color:var(--muted);white-space:pre-wrap} /* modal/toast */ .modal-wrap{position:fixed;inset:0;z-index:800;display:none;place-items:center;padding:18px;background:rgba(2,1,4,.72);backdrop-filter:blur(10px)}.modal-wrap.open{display:grid}.modal{width:min(520px,100%);border:1px solid var(--line);border-radius:22px;padding:28px;background:linear-gradient(160deg,#241337,#09060f 70%);box-shadow:0 30px 70px rgba(0,0,0,.6)}.modal h2{font-family:var(--display);font-size:24px;margin-bottom:9px}.modal p{color:var(--muted);font-size:15px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.close-modal{float:right;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:20px}.api-config{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.api-config code{font-size:11px;color:var(--gold2)} #toast{position:fixed;left:50%;bottom:28px;z-index:900;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(14,8,23,.94);color:var(--ink);font-size:14px;transition:.35s}.show-toast{opacity:1!important;transform:translate(-50%,0)!important} footer{position:relative;z-index:5;text-align:center;padding:28px 20px 44px;color:var(--faint);font-size:12px;letter-spacing:.24em} /* ============================================================ V3 精修：声音状态、第二层仪式界面、可读月历、独立历史档案 ============================================================ */ #musicBtn.music-live{color:#fff0b3;border-color:rgba(242,220,146,.72);box-shadow:0 0 22px rgba(215,182,91,.28),inset 0 0 14px rgba(215,182,91,.08);animation:musicPulse 2.8s ease-in-out infinite} @keyframes musicPulse{50%{text-shadow:0 0 16px #f2dc92;transform:translateY(-1px)}} .api-state{display:flex;align-items:center;gap:9px;margin:12px 0 4px;padding:10px 12px;border:1px solid rgba(215,182,91,.18);border-radius:10px;background:rgba(4,3,8,.38);font-size:13px;color:var(--muted)} .api-state i{width:9px;height:9px;border-radius:50%;background:#756b80;box-shadow:0 0 9px currentColor}.api-state.ok i{background:#98b77e}.api-state.bad i{background:#c66c78}.api-state.testing i{background:var(--gold);animation:pulse 1s infinite} .check-row{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:13px;margin-top:8px}.check-row input{accent-color:var(--gold);margin-top:4px} .api-error{width:min(960px,100%);margin:28px auto 0;padding:24px;border:1px solid rgba(198,108,120,.46);border-radius:18px;background:linear-gradient(145deg,rgba(65,20,35,.34),rgba(11,6,18,.92));text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35)} .api-error h3{font-family:var(--display);font-size:20px;color:#ecc0c6;margin-bottom:9px}.api-error p{color:#cbb8c4;font-size:15px;max-width:720px;margin:0 auto 16px}.api-error code{color:var(--gold2);font-size:12px} /* 第二层：像一间真正被打开的解读圣所，而不是普通卡片列表 */ .deep-section{position:relative;isolation:isolate;overflow:hidden;width:min(1040px,100%);padding:clamp(30px,6vw,68px);border-radius:28px;border:1px solid rgba(215,182,91,.44);background: radial-gradient(circle at 50% -10%,rgba(154,121,208,.22),transparent 38%), linear-gradient(145deg,rgba(31,17,49,.97),rgba(7,4,12,.98) 68%);box-shadow:0 36px 90px -32px rgba(0,0,0,.88),inset 0 0 95px rgba(126,77,178,.08)} .deep-section:before,.deep-section:after{content:"";position:absolute;pointer-events:none;z-index:-1} .deep-section:before{inset:12px;border:1px solid rgba(215,182,91,.18);border-radius:20px;background: linear-gradient(90deg,transparent 49.8%,rgba(215,182,91,.055) 50%,transparent 50.2%), radial-gradient(circle at 50% 16%,rgba(215,182,91,.08),transparent 24%)} .deep-section:after{width:410px;height:410px;left:50%;top:-250px;transform:translateX(-50%);border:1px solid rgba(215,182,91,.23);border-radius:50%;box-shadow:0 0 0 34px rgba(215,182,91,.025),0 0 0 68px rgba(154,121,208,.018);animation:runeSpin 42s linear infinite} .deep-head{position:relative;align-items:center;padding:0 0 28px;margin-bottom:34px;border-bottom:1px solid rgba(215,182,91,.34)} .deep-head:after{content:"✦";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:30px;text-align:center;color:var(--gold);background:#10091b;text-shadow:0 0 14px var(--gold)} .deep-head h3{font-size:clamp(30px,4.4vw,48px);letter-spacing:.12em;text-shadow:0 0 28px rgba(215,182,91,.18)} .deep-subtitle{margin-top:7px;color:#a999b5;font-family:var(--cn);font-size:14px;letter-spacing:.09em} .reading-sigil-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-10px 0 30px} .reading-sigil{min-height:74px;padding:12px 14px;border:1px solid rgba(215,182,91,.2);border-radius:14px;background:linear-gradient(180deg,rgba(215,182,91,.055),rgba(255,255,255,.01));display:flex;align-items:center;gap:12px;color:var(--muted)} .reading-sigil b{width:33px;height:33px;display:grid;place-items:center;border:1px solid rgba(215,182,91,.4);border-radius:50%;font-family:var(--display);font-size:11px;color:var(--gold2);flex:none}.reading-sigil span{font-family:var(--cn);font-size:14px}.reading-sigil em{display:block;font-style:normal;font-size:11px;color:var(--faint)} .interpret-grid{gap:20px;counter-reset:oracle} .interpret-card{position:relative;min-height:290px;padding:34px 24px 28px;border:1px solid rgba(215,182,91,.22);border-left:1px solid rgba(215,182,91,.42);border-radius:18px;background: linear-gradient(180deg,rgba(215,182,91,.075),rgba(255,255,255,.015)), repeating-linear-gradient(0deg,transparent 0 31px,rgba(215,182,91,.025) 32px);box-shadow:inset 0 0 34px rgba(0,0,0,.18);overflow:hidden} .interpret-card:before{counter-increment:oracle;content:"0" counter(oracle);position:absolute;right:17px;top:10px;font-family:var(--display);font-size:44px;color:rgba(215,182,91,.08);line-height:1} .interpret-card:after{content:"";position:absolute;left:22px;right:22px;top:72px;height:1px;background:linear-gradient(90deg,var(--gold3),transparent)} .interpret-card h4{font-size:19px;margin-bottom:30px;color:var(--gold2);letter-spacing:.14em}.interpret-card p{font-size:17px;line-height:1.95;color:#d7cdd9;text-align:justify} .interpret-card p:first-letter{float:left;font-family:var(--display);font-size:44px;line-height:.9;margin:8px 8px 0 0;color:var(--gold2);text-shadow:0 0 18px rgba(215,182,91,.24)} .followup{position:relative;margin-top:38px;padding:28px 24px 22px;border:1px solid rgba(215,182,91,.19);border-radius:17px;background:rgba(4,2,8,.43)} .followup:before{content:"QUILL OF INQUIRY";position:absolute;left:18px;top:-10px;background:#10091b;padding:0 10px;font-family:var(--display);font-size:10px;letter-spacing:.24em;color:var(--gold)} .followup-row textarea{min-height:82px;padding:15px 16px;line-height:1.6;background:linear-gradient(180deg,rgba(9,5,15,.96),rgba(24,12,36,.7));box-shadow:inset 0 0 24px rgba(0,0,0,.25)} .chat-bubble.oracle{border:1px solid rgba(154,121,208,.22);line-height:1.75}.chat-bubble.user{line-height:1.65} /* 第三层：更明确地表现“我”正在亲口讲述 */ .witch-section{width:min(1040px,100%);padding:clamp(30px,6vw,66px);border-radius:28px;background: radial-gradient(circle at 12% 0,rgba(255,162,65,.12),transparent 28%), radial-gradient(circle at 88% 0,rgba(255,162,65,.1),transparent 28%), linear-gradient(155deg,rgba(29,12,36,.97),rgba(5,3,9,.99));box-shadow:0 36px 90px -35px rgba(0,0,0,.9),inset 0 0 120px rgba(0,0,0,.45)} .witch-voice{display:flex;align-items:center;justify-content:center;gap:10px;margin:-8px auto 26px;color:#bda9c3;font-size:13px;letter-spacing:.12em}.witch-voice i{width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.witch-voice i:last-child{transform:scaleX(-1)} .fable{max-width:860px;margin:auto;padding:30px 34px;border-left:1px solid rgba(215,182,91,.28);border-right:1px solid rgba(215,182,91,.28);background:linear-gradient(90deg,transparent,rgba(215,182,91,.025),transparent);font-size:19px;line-height:2.08;color:#e0d5e2;text-align:justify} /* 月历：提高字号、线条与背景对比度 */ .calendar-head{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(215,182,91,.25)} .calendar-head h3{margin:0;font-size:23px}.calendar-head .muted{font-size:16px;color:#d2c5d7;font-weight:600} .calendar-grid{gap:7px}.cal-cell{min-height:64px;aspect-ratio:auto;border:1px solid rgba(215,182,91,.31);border-radius:10px;background:rgba(255,255,255,.025);font-size:17px;font-weight:600;color:#d9cedd;text-shadow:0 1px 1px rgba(0,0,0,.7)} .cal-cell:hover{background:rgba(215,182,91,.06)}.cal-cell.has{color:#fff7df;border-color:rgba(242,220,146,.58);background:linear-gradient(145deg,rgba(215,182,91,calc(var(--heat) + .08)),rgba(107,70,141,.12));box-shadow:inset 0 0 18px rgba(215,182,91,.08),0 0 0 1px rgba(0,0,0,.2)} .cal-head{min-height:34px;border:0;background:transparent;color:#c8b8ce;font-size:13px;font-weight:700;letter-spacing:.12em;text-shadow:none}.cal-cell small{margin-top:3px;padding:1px 6px;border:1px solid rgba(242,220,146,.38);border-radius:999px;background:rgba(5,3,8,.52);font-size:11px;color:#ffe89e;line-height:1.4} /* 独立历史档案页 */ .history-page{padding:50px 0 90px}.history-hero{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}.history-hero h1{font-family:var(--display);font-size:clamp(34px,5vw,58px)} .history-toolbar{display:flex;gap:10px;flex-wrap:wrap}.history-archive{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.archive-card{position:relative;padding:22px;border:1px solid rgba(215,182,91,.25);border-radius:18px;background:linear-gradient(150deg,rgba(28,15,44,.8),rgba(8,5,13,.9));cursor:pointer;transition:.35s var(--ease);overflow:hidden}.archive-card:hover{transform:translateY(-4px);border-color:rgba(215,182,91,.58);box-shadow:0 22px 40px -28px rgba(215,182,91,.45)} .archive-card:after{content:"";position:absolute;width:130px;height:130px;right:-60px;bottom:-70px;border:1px solid rgba(215,182,91,.17);border-radius:50%}.archive-top{display:flex;justify-content:space-between;gap:14px;color:#b8a9bf;font-size:13px}.archive-card h3{font-family:var(--cn);font-size:20px;color:var(--gold2);margin:14px 0 10px}.archive-cards{color:#d3c6d5;font-size:14px;line-height:1.7}.archive-foot{display:flex;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid rgba(215,182,91,.15);font-size:12px;color:var(--faint)} @media(max-width:780px){.reading-sigil-row{grid-template-columns:1fr}.history-archive{grid-template-columns:1fr}.interpret-card{min-height:auto}.fable{padding:22px 18px;font-size:17px}.cal-cell{min-height:48px;font-size:15px}.calendar-head .muted{font-size:14px}} /* responsive */ @media(max-width:960px){ .topbar{flex-wrap:wrap}.nav-links{order:3;width:100%;justify-content:center}.hero{grid-template-columns:1fr;text-align:center;padding-top:34px}.hero-copy p{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-deck{height:430px}.hero-card{width:170px;height:280px}.orbit{width:350px;height:350px}.moon-phase i{transform:rotate(var(--a)) translateY(-172px)}.trust-grid{grid-template-columns:1fr}.coven-portrait{min-height:360px}.service-grid{grid-template-columns:1fr}.deck-stats{grid-template-columns:repeat(3,1fr)}.profile-grid{grid-template-columns:1fr}.overview-grid{grid-template-columns:repeat(2,1fr)}.interpret-grid{grid-template-columns:1fr}.deck-stage{height:430px} } @media(max-width:620px){ body{font-size:16px}.topbar{padding:10px 12px}.brand{font-size:17px}.nav-link{padding:6px 10px;font-size:12px}.ghost-btn{display:none}.container{width:min(100% - 22px,1160px)}.hero{min-height:auto;padding-bottom:60px}.hero-deck{height:330px}.hero-card{width:136px;height:224px}.hero-card:nth-child(2){transform:translate(-72px,28px) rotate(-16deg) scale(.82)}.hero-card:nth-child(3){transform:translate(72px,28px) rotate(16deg) scale(.82)}.orbit{width:270px;height:270px}.moon-phase i{transform:rotate(var(--a)) translateY(-132px)}.section{padding:66px 0}.deck-stats{grid-template-columns:repeat(2,1fr)}.deck-stage{height:350px;width:100vw}.deck-card{width:62px;height:102px;margin:-51px 0 0 -31px}.hand-zone{gap:7px;margin-top:-15px}.hand-slot{min-height:155px}.mini-back{width:56px;height:92px}.reveal-mode .hand-zone{margin-top:40px;gap:4px}.reveal-mode .hand-slot{min-height:320px}.reveal-card{width:min(29vw,118px)}.flip-prompt{font-size:10px;letter-spacing:.06em}.result-mini-card{width:92px}.parchment{padding:38px 23px}.deep-section,.witch-section{border-radius:16px;padding:22px 16px}.followup-row{grid-template-columns:1fr}.overview-grid{grid-template-columns:1fr 1fr}.overview-card b{font-size:23px}.panel{padding:16px}.calendar-grid{gap:3px}.cal-cell{border-radius:6px}.flying-card{width:62px;height:102px}.ritual-head{min-height:110px}.progress-orbs{margin-top:10px} } @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important;scroll-behavior:auto!important}} /* ============================================================ V5 · 单一「今日占卜」仪式、全屏服务图鉴、精细转场与辅助体验 ============================================================ */ html[lang="zh-CN"]{--display:'Noto Serif SC','Songti SC',serif;--serif:'Noto Serif SC','Songti SC',serif} html[lang="zh-TW"]{--display:'Noto Serif TC','PMingLiU',serif;--serif:'Noto Serif TC','PMingLiU',serif} html[lang="ja"]{--display:'Shippori Mincho','Yu Mincho',serif;--serif:'Shippori Mincho','Yu Mincho',serif} html[lang="ko"]{--display:'Noto Serif KR','Batang',serif;--serif:'Noto Serif KR','Batang',serif} html[lang="en"],html[lang="fr"],html[lang="de"]{--display:'Cinzel','Libre Baskerville',serif;--serif:'Cormorant Garamond','Libre Baskerville',serif} .display-title,.service-copy-full h1,.detail-sheet>h1,.history-hero h1{background:linear-gradient(180deg,#fff5cc 0,#e7c96f 42%,#9f7930 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(215,182,91,.18))} @media (pointer:fine){body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 23 16l-8 2 4 9-4 2-4-9-6 6Z' fill='%2308050e' stroke='%23e7c96f' stroke-width='1.4'/%3E%3C/svg%3E") 4 3,auto}button,a,.deck-card,.reveal-card,.result-mini-card,.cal-cell.has,.history-item,.archive-card{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='%2308050e' stroke='%23e7c96f' stroke-width='1.5'/%3E%3Cpath d='m16 7 2.1 6.1L24 16l-5.9 2.1L16 25l-2.1-6.9L8 16l5.9-2.9Z' fill='none' stroke='%23e7c96f'/%3E%3C/svg%3E") 16 16,pointer}} .single-entry{display:block}.hero-rite{min-width:min(390px,88vw);padding:21px 46px;font-size:17px;box-shadow:0 0 0 1px rgba(215,182,91,.12),0 18px 48px -24px rgba(215,182,91,.7)} .hero-rite:after{content:"";position:absolute;inset:-22px;background:radial-gradient(circle,rgba(215,182,91,.22),transparent 68%);opacity:.2;transition:.65s;z-index:-1}.hero-rite:hover:after{opacity:1;transform:scale(1.12)} .service-detail-link{margin-top:18px;border:0;background:transparent;color:var(--gold2);font-size:14px;letter-spacing:.18em;display:inline-flex;align-items:center;gap:8px;position:relative;padding:7px 2px;cursor:pointer}.service-detail-link:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:.45s var(--ease)}.service-detail-link:hover:after{transform:scaleX(1)} .deck-codex{padding-top:26px}.deck-codex .deck-stats{margin-top:30px} /* 服务详情：每一档独占一个视口，以横向缓动切换。 */ #view-services{min-height:calc(100vh - 66px);overflow:hidden}.service-atlas{position:relative;height:calc(100vh - 66px);min-height:650px;overflow:hidden;background:#08050e}.service-track{display:flex;height:100%;transition:transform 1.05s cubic-bezier(.22,.76,.18,1);will-change:transform}.service-slide{position:relative;min-width:100%;height:100%;display:grid;place-items:center;padding:90px clamp(24px,9vw,150px);overflow:hidden}.service-slide:before{content:"";position:absolute;inset:0;pointer-events:none} .service-copy-full{position:relative;z-index:4;width:min(780px,100%);text-align:center}.service-copy-full h1{font-family:var(--display);font-size:clamp(48px,8vw,104px);font-weight:600;letter-spacing:.08em;margin:20px 0 30px}.service-copy-full p{font-size:clamp(18px,2.1vw,27px);line-height:1.9;color:#ddd0df;max-width:760px;margin:auto}.service-position{display:inline-block;margin-top:34px;padding:12px 22px;border-top:1px solid rgba(215,182,91,.38);border-bottom:1px solid rgba(215,182,91,.22);color:var(--gold2);letter-spacing:.11em;font-size:14px} .service-parchment{background:radial-gradient(circle at 50% 45%,rgba(233,211,164,.16),transparent 45%),linear-gradient(135deg,#130c16,#09060e)}.service-parchment:before{background:linear-gradient(90deg,rgba(133,88,36,.08),transparent 20% 80%,rgba(133,88,36,.08)),repeating-linear-gradient(0deg,rgba(232,215,176,.018) 0 1px,transparent 1px 5px)}.service-ornament{position:absolute;width:min(520px,70vw);aspect-ratio:1;border:1px solid rgba(215,182,91,.16);border-radius:50%;display:grid;place-items:center;animation:serviceBreathe 7s ease-in-out infinite}.service-ornament:before,.service-ornament:after{content:"";position:absolute;inset:11%;border:1px dashed rgba(215,182,91,.19);border-radius:50%;animation:runeSpin 24s linear infinite}.service-ornament:after{inset:24%;animation-direction:reverse}.service-ornament span{font:150px var(--display);color:rgba(215,182,91,.055)} .service-deep{background:radial-gradient(circle at 50% 44%,rgba(104,62,157,.36),transparent 38%),linear-gradient(145deg,#180b2c,#08050e 70%)}.service-deep:before{background:conic-gradient(from 35deg at 50% 50%,transparent,rgba(215,182,91,.04),transparent 18%,rgba(154,121,208,.06),transparent 38%)}.service-orbit{position:absolute;width:min(620px,76vw);aspect-ratio:1;border:1px solid rgba(215,182,91,.18);border-radius:50%;animation:runeSpin 26s linear infinite}.service-orbit:before,.service-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(154,121,208,.24);inset:14%;transform:rotate(45deg)}.service-orbit:after{inset:29%;border-style:dashed}.service-orbit i{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--gold);box-shadow:0 0 24px var(--gold);left:50%;top:-7px;transform-origin:0 calc(min(620px,76vw)/2)} .service-witch{background:radial-gradient(circle at 50% 42%,rgba(91,61,122,.22),transparent 32%),radial-gradient(circle at 20% 70%,rgba(147,74,35,.14),transparent 24%),linear-gradient(160deg,#09060d,#16091e 54%,#050306)}.service-witch:before{background:repeating-radial-gradient(circle at 50% 48%,transparent 0 80px,rgba(215,182,91,.025) 81px 82px)}.witch-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:min(30vw,420px);pointer-events:none}.service-crystal{width:min(290px,46vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.4),rgba(154,121,208,.19) 24%,rgba(35,14,50,.65) 66%,rgba(4,2,7,.95));box-shadow:0 0 70px rgba(154,121,208,.25),inset 0 -35px 55px rgba(0,0,0,.55);opacity:.52;animation:crystalPulse 5.5s ease-in-out infinite}.service-candle{width:16px;height:150px;background:linear-gradient(#e7d4a1,#7b5b31);border-radius:5px;position:relative;opacity:.55}.service-candle:before{content:"";position:absolute;width:22px;height:36px;left:-3px;top:-31px;border-radius:55% 45% 55% 45%;background:radial-gradient(circle at 50% 70%,#fff6bd,#e98d35 50%,transparent 70%);filter:drop-shadow(0 0 16px #e98d35);animation:candleFlicker 1.7s ease-in-out infinite alternate}.service-candle.right:before{animation-delay:-.8s} @keyframes serviceBreathe{50%{transform:scale(1.05);opacity:.72}}@keyframes crystalPulse{50%{transform:scale(1.035);filter:brightness(1.2)}} .service-arrow{position:absolute;z-index:8;top:50%;width:52px;height:52px;border:1px solid rgba(215,182,91,.35);border-radius:50%;background:rgba(8,5,14,.54);color:var(--gold2);display:grid;place-items:center;backdrop-filter:blur(10px);transition:.35s;cursor:pointer}.service-arrow:hover{background:rgba(215,182,91,.14);box-shadow:0 0 25px rgba(215,182,91,.2)}.service-arrow.prev{left:clamp(15px,3vw,48px)}.service-arrow.next{right:clamp(15px,3vw,48px)}.service-arrow:disabled{opacity:.22;pointer-events:none}.service-dots{position:absolute;z-index:8;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:11px}.service-dots button{width:34px;height:3px;border:0;background:rgba(215,182,91,.22);transition:.5s;cursor:pointer}.service-dots button.on{background:var(--gold2);box-shadow:0 0 12px var(--gold)}.service-home{position:absolute;z-index:8;left:50%;bottom:65px;transform:translateX(-50%);border:0;background:transparent;color:var(--gold2);display:flex;align-items:center;gap:8px;letter-spacing:.16em;font-size:13px;cursor:pointer} /* 3秒静心引导 */ .calm-guide{height:0;opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.8s var(--ease);overflow:hidden}.calm-guide.on{height:420px;opacity:1}.calm-guide p{font-family:var(--display);font-size:clamp(22px,4vw,38px);letter-spacing:.12em;margin-top:28px;color:var(--gold2)}.calm-guide span{margin-top:10px;color:var(--muted);letter-spacing:.2em;font-size:13px}.breath-ring{position:relative;width:150px;height:150px;border:1px solid rgba(215,182,91,.35);border-radius:50%;animation:breath 3s ease-in-out infinite;box-shadow:0 0 40px rgba(215,182,91,.08)}.breath-ring:before,.breath-ring:after{content:"";position:absolute;inset:17px;border:1px dashed rgba(154,121,208,.34);border-radius:50%;animation:runeSpin 10s linear infinite}.breath-ring:after{inset:42px;border-style:solid}.breath-ring i{position:absolute;inset:50%;width:7px;height:7px;border-radius:50%;background:var(--gold2);box-shadow:0 0 22px var(--gold);transform:translate(-50%,-50%)}@keyframes breath{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.08);opacity:1}} .ritual-shell.calm .deck-stage,.ritual-shell.calm .hand-zone,.ritual-shell.calm .selected-count{opacity:0;pointer-events:none;height:0;margin:0;overflow:hidden}.ritual-shell.calm .calm-guide{height:420px;opacity:1} /* 两轮真实洗牌：展开→交错→收拢，重复两次。 */ .deck-card.shuffle{animation-duration:5s} @keyframes ritualShuffle{0%{transform:translate(0,0) rotate(0);opacity:0}5%{opacity:1}16%{transform:translate(var(--fanX),var(--fanY)) rotate(var(--fanR))}29%{transform:translate(var(--splitX),var(--riffleY)) rotate(var(--splitR))}40%{transform:translate(0,0) rotate(0)}53%{transform:translate(calc(var(--fanX)*.86),calc(var(--fanY)*.72)) rotate(calc(var(--fanR)*.9))}67%{transform:translate(calc(var(--splitX)*-.94),calc(var(--riffleY)*-.55)) rotate(calc(var(--splitR)*-1))}80%{transform:translate(var(--swirlX),var(--swirlY)) rotate(var(--swirlR))}92%{transform:translate(calc(var(--fanX)*.18),calc(var(--fanY)*.1)) rotate(calc(var(--fanR)*.18))}100%{transform:translate(0,0) rotate(0);opacity:1}} .card-back-pattern{overflow:hidden}.card-back-pattern .gilt-flow,.card-back-pattern:global{pointer-events:none}.deck-stage.selecting .card-back-pattern:after{animation:giltFlow 3.8s linear infinite;box-shadow:0 0 18px rgba(215,182,91,.25),inset 0 0 12px rgba(215,182,91,.12)}@keyframes giltFlow{to{transform:rotate(360deg) scale(.72)}} /* 选满三张后的牌堆消散。 */ .deck-stage.dissolving .deck-card:not(.chosen){animation:deckDim 1.2s var(--ease) forwards}.deck-dust-layer{position:absolute;inset:0;z-index:140;pointer-events:none}.deck-dust-layer i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff3b4,var(--gold) 45%,transparent 72%);box-shadow:0 0 10px rgba(215,182,91,.9);animation:deckDust 1.2s var(--ease) var(--d) forwards}@keyframes deckDim{0%{opacity:1;filter:brightness(1)}35%{opacity:.58;filter:brightness(.62) saturate(.7)}100%{opacity:0;filter:blur(3px);transform:translate(0,-10px) scale(.93)}}@keyframes deckDust{0%{opacity:0;transform:translate(0,0) scale(.2)}22%{opacity:1}100%{opacity:0;transform:translate(calc(50vw - var(--x) - 50%),calc(42% - var(--y))) scale(1.8)}} .flying-card{transition:none}.hand-slot.landed .mini-back{animation:landBounce .55s var(--ease)}@keyframes landBounce{0%{transform:translateY(-18px) scale(.93)}60%{transform:translateY(5px) scale(1.03)}100%{transform:none}}.slot-label{animation:labelReveal .8s var(--ease) both;animation-delay:var(--labelDelay,0s)}@keyframes labelReveal{from{opacity:0;transform:translateY(9px);letter-spacing:.3em}to{opacity:1;transform:none}} .reveal-card:before{content:"";position:absolute;inset:-8% -55%;z-index:20;background:linear-gradient(100deg,transparent 35%,rgba(255,247,205,.72) 50%,transparent 65%);transform:translateX(-120%) skewX(-12deg);pointer-events:none}.reveal-card.flipped:before{animation:cardSheen 1s ease .12s both}@keyframes cardSheen{to{transform:translateX(120%) skewX(-12deg)}} /* 暗化转场、塔罗加载符文、错误星尘 */ .ritual-fade{position:fixed;inset:0;z-index:880;background:radial-gradient(circle at 50% 45%,#120a20,#020103 72%);opacity:0;visibility:hidden;display:grid;place-items:center;transition:opacity .65s ease,visibility .65s}.ritual-fade.on{opacity:1;visibility:visible}.fade-sigil{width:100px;height:160px;border:1px solid rgba(215,182,91,.55);border-radius:9px;background:linear-gradient(145deg,#291848,#10091e);box-shadow:0 0 40px rgba(215,182,91,.2);animation:fadeSigil 1.6s ease-in-out infinite}@keyframes fadeSigil{50%{transform:scale(1.04);box-shadow:0 0 70px rgba(215,182,91,.34)}} .loading-ritual{min-height:230px}.loading-sigil{width:86px;height:138px;border-radius:8px;background:radial-gradient(circle at 50% 50%,#d7b65b 0 3px,transparent 4px),conic-gradient(from 0deg,transparent,rgba(215,182,91,.4),transparent 28%),linear-gradient(145deg,#291848,#10091e);border:1px solid rgba(242,220,146,.75);box-shadow:inset 0 0 0 4px #10091e,0 0 36px rgba(215,182,91,.22);animation:oracleCard 2.2s var(--ease) infinite}@keyframes oracleCard{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(180deg) translateY(-9px)}100%{transform:rotateY(360deg) translateY(0)}} .api-error{position:relative;overflow:hidden}.api-error:before,.api-error:after{content:"✦ · ✧ · ✦";position:absolute;color:rgba(198,108,120,.55);letter-spacing:18px;animation:brokenDust 3s ease-in-out infinite}.api-error:before{left:8%;top:18%}.api-error:after{right:4%;bottom:14%;animation-delay:-1.3s}@keyframes brokenDust{50%{opacity:.2;transform:translateY(12px) rotate(7deg)}} .scroll-wrap{animation:resultRise 1.4s var(--ease) both}.parchment{transform-origin:center top;animation:scrollUnfurl 1.8s var(--ease) both}.parchment:before,.parchment:after{transition:1.4s var(--ease)}@keyframes resultRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}@keyframes scrollUnfurl{0%{opacity:0;transform:perspective(900px) rotateX(-24deg) scaleY(.2);filter:brightness(.45)}55%{opacity:1;transform:perspective(900px) rotateX(3deg) scaleY(1.03)}100%{transform:none;filter:none}} /* 可放大的动态牌面 */ .result-mini-card{cursor:zoom-in;transition:.4s var(--ease)}.result-mini-card:hover{transform:translateY(-7px) scale(1.025);box-shadow:0 22px 40px rgba(0,0,0,.5),0 0 24px rgba(215,182,91,.18)}.card-zoom-wrap{position:fixed;inset:0;z-index:920;background:rgba(2,1,4,.87);backdrop-filter:blur(14px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.55s var(--ease)}.card-zoom-wrap.open{opacity:1;visibility:visible}.zoom-stage{display:flex;align-items:center;gap:clamp(24px,5vw,70px);max-width:900px;padding:50px 24px}.zoom-card{position:relative;width:min(340px,70vw);aspect-ratio:.62;border-radius:18px;overflow:hidden;background:#ead9b9;box-shadow:0 35px 90px rgba(0,0,0,.72),0 0 48px rgba(215,182,91,.24)}.zoom-card.reversed{transform:rotate(180deg)}.zoom-meta{max-width:340px}.zoom-meta h2{font-family:var(--display);font-size:clamp(28px,4vw,48px);color:var(--gold2);margin-bottom:12px}.zoom-meta p{color:var(--muted);font-size:18px}.zoom-close{position:absolute;right:28px;top:24px;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:rgba(8,5,14,.7);color:var(--gold2);display:grid;place-items:center;cursor:pointer} /* 每日限制与分享 */ .daily-modal{text-align:center}.daily-seal{width:90px;height:90px;margin:0 auto 18px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold2);box-shadow:0 0 35px rgba(215,182,91,.14)}.daily-seal .ui-icon{width:42px;height:42px}.share-btn{position:relative}.share-btn.generating{pointer-events:none;opacity:.7}.share-btn.generating:after{content:"";position:absolute;inset:-4px;border:1px solid var(--gold);border-radius:inherit;animation:ringPulse 1s infinite} /* 个人中心对比度与趋势微光 */ .calendar-grid{gap:8px}.cal-cell{min-height:70px;border-color:rgba(215,182,91,.38);background:rgba(16,9,27,.82);font-size:18px;color:#f2e8f3}.cal-head{min-height:36px!important;background:rgba(215,182,91,.08);color:var(--gold2);font-size:14px}.cal-cell small{font-size:11px;font-weight:700;color:#fff2bc}.cal-cell.has{border-color:rgba(242,220,146,.58);text-shadow:0 1px 2px #000}#trendCanvas{filter:drop-shadow(0 0 7px rgba(215,182,91,.28))} @media(max-width:700px){.service-slide{padding:80px 52px}.service-copy-full h1{font-size:46px}.service-copy-full p{font-size:17px}.service-arrow{width:42px;height:42px}.service-arrow.prev{left:8px}.service-arrow.next{right:8px}.zoom-stage{flex-direction:column;overflow:auto;max-height:100vh}.zoom-meta{text-align:center}.cal-cell{min-height:52px;font-size:16px}.cal-cell small{font-size:9px}.cal-head{font-size:12px}.calm-guide.on,.ritual-shell.calm .calm-guide{height:330px}.breath-ring{width:118px;height:118px}.hero-rite{min-width:92vw}.service-position{font-size:12px}} /* commercial region, account, payment and compliance surfaces */ .region-wrap select{min-width:118px}.commercial-footer{display:grid;gap:10px;padding:38px 20px 52px;border-top:1px solid var(--line);background:rgba(5,3,8,.7)}.footer-disclaimer{font-size:15px;color:var(--gold2);letter-spacing:.12em}.legal-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.legal-links button{border:0;background:transparent;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:4px}.filing-placeholder{font-size:12px;color:var(--faint)}.calm-skip{margin-top:20px;border:0;border-bottom:1px solid rgba(215,182,91,.5);background:transparent;color:var(--gold2);cursor:pointer;padding:5px 8px}.commercial-price{margin-top:24px;display:inline-block;padding:8px 16px;border:1px solid rgba(215,182,91,.48);border-radius:999px;color:var(--gold2);background:rgba(8,5,14,.38)}.inline-field{display:grid;grid-template-columns:1fr auto;gap:8px}.oauth-row{display:flex;gap:8px;flex-wrap:wrap}.oauth-chip{flex:1;min-width:90px;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);color:var(--ink)}.login-divider{display:flex;align-items:center;gap:12px;color:var(--faint);margin:16px 0}.login-divider:before,.login-divider:after{content:"";height:1px;flex:1;background:var(--line)}.test-login{margin:15px 0;padding:12px;border:1px solid var(--line);border-radius:12px}.modal-status{min-height:1.5em;color:var(--gold2);margin-top:12px}.payment-price{font-family:var(--display);font-size:38px;color:var(--gold2);margin:16px 0}.payment-method{display:flex;align-items:center;gap:10px;padding:12px;margin:8px 0;border:1px solid var(--line);border-radius:12px}.withdrawal-consent{display:flex;gap:10px;font-size:13px;color:var(--muted);margin:18px 0}.legal-modal{max-height:82vh;overflow:auto}.legal-body{white-space:pre-wrap;color:var(--muted);line-height:1.9;margin:20px 0}.legal-review{font-size:12px;color:var(--gold)}.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:980;display:none;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(12,7,20,.96);box-shadow:0 18px 60px #000}.cookie-banner.open{display:grid}.cookie-banner p{color:var(--muted);font-size:14px}.cookie-banner button{margin:4px;padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:rgba(215,182,91,.08);color:var(--ink)}.legal-entertainment,.generation-note{max-width:820px;margin:20px auto 0;text-align:center;padding:12px;border:1px solid rgba(215,182,91,.25);border-radius:12px;color:var(--gold2);font-size:14px}.generation-note{font-size:12px;color:var(--muted)}.ten-second-ritual{position:relative;min-height:330px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 50% 45%,rgba(55,31,80,.72),rgba(5,3,9,.94) 68%)}.ten-second-ritual .loading-sigil{grid-area:1/1}.loading-stars{position:absolute;inset:12%;border:1px dashed rgba(215,182,91,.34);border-radius:50%;animation:runeSpin 8s linear infinite}.ritual-candles i{position:absolute;bottom:20px;width:8px;height:70px;background:#cfbd92}.ritual-candles i:first-child{left:12%}.ritual-candles i:last-child{right:12%;height:55px}.ritual-candles i:before{content:"";position:absolute;left:50%;top:-20px;width:14px;height:22px;transform:translateX(-50%);border-radius:50%;background:#ffc05e;box-shadow:0 0 22px #ffad45;animation:flame 1s infinite alternate}.phase-copy{position:absolute;bottom:36px;left:20px;right:20px;text-align:center;color:var(--gold2);letter-spacing:.12em}.phase-copy span{position:absolute;left:0;right:0;opacity:0;animation:phaseTen 10s linear forwards}.phase-copy span:nth-child(2){animation-delay:3s}.phase-copy span:nth-child(3){animation-delay:6s}.phase-copy span:nth-child(4){animation-delay:9s}@keyframes phaseTen{0%{opacity:0;transform:translateY(8px)}8%,85%{opacity:1;transform:none}100%{opacity:0}}.commercial-account{margin-top:22px}.account-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.account-grid article{padding:14px;border:1px solid var(--line);border-radius:12px}.account-grid b,.account-grid span{display:block}.account-grid span{color:var(--gold2);margin-top:5px}.order-list article{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}.order-list em{color:var(--gold);font-style:normal}.privacy-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}@media(max-width:760px){.region-wrap{order:2}.cookie-banner{grid-template-columns:1fr;left:8px;right:8px;bottom:8px}.account-grid{grid-template-columns:1fr 1fr}.inline-field{grid-template-columns:1fr}.commercial-footer{padding-bottom:88px}} /* ===== END app.css ===== */ /* ===== BEGIN v7.css ===== */ :root{--v7-gold:#d8b85f;--v7-ink:#f4ecd7;--v7-panel:rgba(17,10,31,.94);--v7-line:rgba(216,184,95,.36)} .v7-launch{position:fixed;right:22px;bottom:22px;z-index:70;border:1px solid var(--v7-gold);background:#140d24;color:var(--v7-ink);border-radius:999px;padding:12px 18px;font:600 14px 'Noto Serif SC',serif;box-shadow:0 0 24px rgba(216,184,95,.25);cursor:pointer} .v7-shell{position:fixed;inset:0;z-index:90;background:radial-gradient(circle at 70% 5%,rgba(101,61,145,.2),transparent 34%),#090610;color:var(--v7-ink);display:none;overflow:auto}.v7-shell.open{display:block;animation:v7in .4s ease both}@keyframes v7in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .v7-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:16px;padding:14px 22px;background:rgba(9,6,16,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--v7-line)}.v7-top strong{font-family:Cinzel,serif;letter-spacing:.18em;color:var(--v7-gold)}.v7-close{margin-left:auto;background:none;border:1px solid var(--v7-line);color:var(--v7-ink);border-radius:50%;width:38px;height:38px;cursor:pointer} .v7-layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 68px)}.v7-side{padding:24px 14px;border-right:1px solid var(--v7-line);background:rgba(18,11,31,.7)}.v7-nav{width:100%;display:flex;align-items:center;gap:12px;margin:5px 0;padding:13px 14px;border:0;border-radius:10px;background:transparent;color:#cfc3d6;text-align:left;cursor:pointer}.v7-nav:hover,.v7-nav.on{background:linear-gradient(90deg,rgba(216,184,95,.18),transparent);color:#fff0ba}.v7-icon{width:20px;text-align:center;color:var(--v7-gold)} .v7-main{padding:clamp(20px,4vw,48px);max-width:1120px;width:100%;margin:auto}.v7-title{font-family:Cinzel,'Noto Serif SC',serif;font-size:clamp(28px,4vw,48px);margin:0 0 8px;background:linear-gradient(180deg,#fff2bd,#b8892e);-webkit-background-clip:text;color:transparent}.v7-muted{color:#b9abc2}.v7-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px}.v7-card{border:1px solid var(--v7-line);border-radius:16px;padding:20px;background:linear-gradient(145deg,rgba(40,24,65,.72),rgba(12,8,22,.86));box-shadow:inset 0 1px rgba(255,255,255,.04)} .v7-balance{font:700 clamp(44px,8vw,88px) Cinzel,serif;color:#f3d77f;text-shadow:0 0 25px rgba(216,184,95,.4)}.v7-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid var(--v7-gold);border-radius:10px;background:linear-gradient(180deg,rgba(216,184,95,.28),rgba(216,184,95,.08));color:#fff2cb;cursor:pointer}.v7-btn:disabled{opacity:.45}.v7-table{width:100%;border-collapse:collapse;margin-top:18px}.v7-table th,.v7-table td{padding:12px;border-bottom:1px solid rgba(216,184,95,.18);text-align:left}.v7-pos{color:#9ee4b1}.v7-neg{color:#ffb0aa} .v7-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.v7-day{min-height:76px;border:1px solid rgba(216,184,95,.23);border-radius:10px;padding:8px;background:rgba(24,14,40,.7)}.v7-day.done{background:rgba(216,184,95,.18);box-shadow:inset 0 0 18px rgba(216,184,95,.12)}.v7-day.today{border-color:#f5d878;box-shadow:0 0 14px rgba(216,184,95,.25)} .v7-field{display:grid;gap:7px;margin:14px 0}.v7-field input,.v7-field select{padding:12px 14px;border:1px solid var(--v7-line);border-radius:9px;background:#100a1d;color:#f3ead5;outline:none}.v7-field input:focus,.v7-field select:focus{border-color:#f2d478;box-shadow:0 0 0 3px rgba(216,184,95,.12)}.v7-tags{display:flex;gap:9px;flex-wrap:wrap}.v7-tag{appearance:none;-webkit-appearance:none;padding:8px 14px;border:1px solid rgba(151,137,165,.42);border-radius:999px;background:rgba(32,20,53,.78);color:#aaa0b4;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease}.v7-tag:hover{background:rgba(49,29,76,.92);color:#d8cfdf;border-color:rgba(213,180,91,.48);transform:translateY(-1px)}.v7-tag.on{background:linear-gradient(180deg,rgba(77,55,51,.96),rgba(46,30,39,.98));color:#ffe398;border-color:rgba(224,188,91,.72);box-shadow:0 0 18px rgba(216,184,95,.14),inset 0 1px rgba(255,255,255,.04)}.v7-cloud{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.v7-cloud span{color:#f1d57d;text-shadow:0 0 14px rgba(216,184,95,.32)} .v7-toast{position:fixed;left:50%;bottom:30px;z-index:110;transform:translate(-50%,20px);opacity:0;padding:13px 20px;border:1px solid var(--v7-gold);border-radius:999px;background:#160e25;color:#fff1c4;transition:.3s}.v7-toast.show{opacity:1;transform:translate(-50%,0)} .v7-loader{display:none;position:fixed;inset:0;z-index:120;background:rgba(4,2,8,.82);place-items:center;text-align:center}.v7-loader.on{display:grid}.v7-rune{width:90px;height:90px;border:1px solid var(--v7-gold);border-radius:50%;animation:v7spin 2.5s linear infinite;box-shadow:0 0 30px rgba(216,184,95,.3);position:relative}.v7-rune:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;font-size:32px;color:#f4da83}@keyframes v7spin{to{transform:rotate(360deg)}} @media(max-width:760px){.v7-layout{grid-template-columns:1fr}.v7-side{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--v7-line);padding:8px}.v7-nav{min-width:max-content}.v7-main{padding:22px 14px}.v7-calendar{gap:4px}.v7-day{min-height:60px;font-size:12px}} /* ============================================================ visible integration layer The previous build kept the member system behind a small floating button, so the homepage looked almost identical to . These styles integrate the economy, growth and account entry points into the primary navigation and home. ============================================================ */ .v7-nav-entry{position:relative;color:#f4dda0!important}.v7-nav-entry:after{content:"NEW";position:absolute;right:2px;top:-6px;padding:1px 5px;border-radius:999px;background:#8b2144;color:#fff3d0;font:700 8px/1.5 Cinzel,serif;letter-spacing:.08em;box-shadow:0 0 12px rgba(190,63,101,.5)} .v7-mini-icon{color:var(--v7-gold);margin-right:5px}.v7-coin-pill{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 12px;border:1px solid rgba(216,184,95,.44);border-radius:999px;background:linear-gradient(180deg,rgba(216,184,95,.16),rgba(28,15,48,.62));color:#f8e7ad;box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 18px rgba(216,184,95,.12);cursor:pointer}.v7-coin-pill span{font-size:18px;color:#e6c66b}.v7-coin-pill b{font-family:Cinzel,serif;font-size:14px;min-width:1.5em} .v7-user-hub{position:relative;display:flex;align-items:center}.v7-avatar-trigger{display:flex;align-items:center;gap:8px;min-height:40px;padding:5px 10px 5px 6px;border:1px solid rgba(216,184,95,.28);border-radius:999px;background:rgba(16,9,29,.74);color:#eadfc7;cursor:pointer;transition:.35s var(--ease)}.v7-avatar-trigger:hover,.v7-user-hub.open .v7-avatar-trigger{border-color:#d8b85f;box-shadow:0 0 18px rgba(216,184,95,.24)}.v7-avatar-orb{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(216,184,95,.5);background:radial-gradient(circle at 35% 30%,#675084,#1b102d 65%);color:#f0d778;box-shadow:inset 0 0 12px rgba(255,255,255,.08)}#v7AvatarName{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}#v7SignDot{display:none;width:8px;height:8px;border-radius:50%;background:#d93b58;box-shadow:0 0 10px #f1516c}.v7-user-hub.needs-sign #v7SignDot{display:block} .v7-user-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:250;width:220px;padding:9px;border:1px solid rgba(216,184,95,.38);border-radius:14px;background:rgba(12,7,22,.96);box-shadow:0 22px 60px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .28s ease,transform .35s var(--ease),visibility .35s}.v7-user-hub.open .v7-user-menu{opacity:1;visibility:visible;transform:none}.v7-user-menu button{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;border:0;border-radius:9px;background:transparent;color:#d9cde0;text-align:left;cursor:pointer;transition:.25s}.v7-user-menu button:hover{color:#fff0ba;background:linear-gradient(90deg,rgba(216,184,95,.17),transparent);transform:translateX(3px)}.v7-user-menu button span{width:20px;text-align:center;color:#d8b85f} .v7-sanctum-preview{position:relative;overflow:hidden;padding-top:78px!important;background:radial-gradient(circle at 8% 18%,rgba(117,72,164,.15),transparent 31%),radial-gradient(circle at 90% 70%,rgba(216,184,95,.08),transparent 32%)}.v7-sanctum-preview:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 18%,rgba(216,184,95,.035) 49%,transparent 78%);animation:v7PreviewSweep 9s ease-in-out infinite}@keyframes v7PreviewSweep{50%{transform:translateX(5%)}} .v7-preview-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:28px}.v7-preview-head>div{max-width:760px}.v7-preview-head .section-title span{font-size:.62em;color:#bfa9ce}.v7-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.v7-preview-card{position:relative;min-height:205px;padding:23px 20px;border:1px solid rgba(216,184,95,.28);border-radius:18px;background:linear-gradient(155deg,rgba(45,26,70,.68),rgba(10,6,18,.9));color:#eee4cf;text-align:left;overflow:hidden;cursor:pointer;transition:transform .42s var(--ease),border-color .35s,box-shadow .35s}.v7-preview-card:before{content:"";position:absolute;inset:-35%;background:radial-gradient(circle,rgba(216,184,95,.12),transparent 55%);opacity:0;transition:.4s}.v7-preview-card:hover{transform:translateY(-7px);border-color:rgba(236,207,117,.68);box-shadow:0 22px 45px rgba(0,0,0,.34),0 0 24px rgba(216,184,95,.12)}.v7-preview-card:hover:before{opacity:1}.v7-preview-card.featured{background:linear-gradient(145deg,rgba(83,53,115,.72),rgba(18,9,30,.95));border-color:rgba(216,184,95,.48)}.v7-preview-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(216,184,95,.5);border-radius:50%;color:#f1d576;font-size:21px;box-shadow:0 0 22px rgba(216,184,95,.15)}.v7-preview-card small{display:block;margin-top:20px;color:#9485a3;letter-spacing:.15em}.v7-preview-card b{display:block;margin:9px 0 7px;font-family:var(--display);font-size:clamp(20px,2vw,29px);color:#f5dda0}.v7-preview-card em{font-style:normal;color:#b9acc2;font-size:13px;line-height:1.65} /* Five projection questions shown before the existing ritual state machine. */ .v7-projection-wrap{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 43%,rgba(50,28,76,.76),rgba(4,2,8,.96) 68%);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}.v7-projection-wrap.open{opacity:1;visibility:visible}.v7-projection-panel{width:min(760px,94vw);padding:clamp(26px,5vw,54px);border:1px solid rgba(216,184,95,.43);border-radius:24px;background:linear-gradient(150deg,rgba(31,17,50,.96),rgba(8,4,14,.98));box-shadow:0 35px 90px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.04);text-align:center;transform:translateY(14px) scale(.985);transition:.55s var(--ease)}.v7-projection-wrap.open .v7-projection-panel{transform:none}.v7-projection-panel h2{font-family:var(--display);font-size:clamp(25px,4vw,39px);color:#f1dda8;margin:23px 0 10px}.v7-projection-panel p{color:#a99ab2}.v7-projection-progress{display:flex;justify-content:center;gap:9px;margin-top:18px}.v7-projection-progress i{width:34px;height:3px;border-radius:99px;background:rgba(216,184,95,.17);transition:.35s}.v7-projection-progress i.on{background:#d8b85f;box-shadow:0 0 12px rgba(216,184,95,.5)}.v7-projection-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 18px}.v7-projection-options button{min-height:66px;padding:15px;border:1px solid rgba(216,184,95,.28);border-radius:13px;background:rgba(255,255,255,.025);color:#e6dcc9;font-family:var(--body);font-size:16px;cursor:pointer;transition:.32s var(--ease)}.v7-projection-options button:hover{border-color:#d8b85f;background:rgba(216,184,95,.1);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.25)}.v7-text-skip{border:0;border-bottom:1px solid rgba(216,184,95,.42);background:transparent;color:#a99ab2;padding:7px;cursor:pointer} /* Correct one-to-one vertical selection beams. They are separate stage elements, therefore they do not inherit the curved card rotation and cannot tilt. */ .selection-beam{position:absolute;left:50%;top:43%;z-index:0;width:82px;height:245px;margin-left:-41px;pointer-events:none;opacity:.28;transform-origin:50% 100%;background:linear-gradient(to bottom,transparent 0%,rgba(255,232,155,.04) 12%,rgba(230,196,102,.15) 58%,rgba(230,196,102,.32) 100%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(.2px) drop-shadow(0 0 10px rgba(216,184,95,.16));transition:opacity .25s,filter .25s}.selection-beam.active{opacity:.72;filter:drop-shadow(0 0 17px rgba(236,207,117,.54))}.deck-stage.dissolving .selection-beam{animation:v7BeamFade .55s ease forwards}@keyframes v7BeamFade{to{opacity:0}} /* A single fixed text node is used during the ten-second rite. JS changes the text only after the previous sentence has fully faded out. */ .phase-copy{min-height:28px;display:grid;place-items:center}.phase-copy .v71-phase-current{position:static!important;display:block;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}.phase-copy .v71-phase-current.leaving{opacity:0;transform:translateY(-5px)}.phase-copy .v71-phase-current.entering{opacity:0;transform:translateY(5px)} .v7-login-gate{text-align:center;padding:50px 24px}.v7-login-gate .v7-gate-sigil{width:82px;height:82px;margin:0 auto 20px;display:grid;place-items:center;border:1px solid #d8b85f;border-radius:50%;font-size:30px;color:#efd77d;box-shadow:0 0 34px rgba(216,184,95,.22)} @media (hover:hover){.v7-user-hub:hover .v7-user-menu{opacity:1;visibility:visible;transform:none}.v7-user-hub:hover .v7-avatar-trigger{border-color:#d8b85f}} @media(max-width:1050px){.v7-preview-grid{grid-template-columns:1fr 1fr}.v7-nav-entry{display:none}#loginBtn{display:none}.v7-avatar-trigger #v7AvatarName{display:none}.v7-coin-pill{padding:7px 9px}} @media(max-width:760px){.v7-preview-head{display:grid;align-items:start}.v7-preview-grid{grid-template-columns:1fr}.v7-preview-card{min-height:165px}.v7-user-menu{position:fixed;left:10px;right:10px;top:74px;width:auto}.v7-projection-options{grid-template-columns:1fr}.selection-beam{height:190px;width:58px;margin-left:-29px}.v7-sanctum-preview{padding-top:60px!important}} /* ===== END v7.css ===== */ /* ===== BEGIN v8.css ===== */ /* ============================================================ ARCANA — Gothic stained-glass visual system This layer intentionally overrides the / presentation without weakening the existing security, payment or account boundaries. ============================================================ */ :root{ --v8-ink:#f3eadb;--v8-gold:#d6b15a;--v8-gold-hi:#ffe7a0; --v8-silver:#aaa7b8;--v8-purple:#1a0d2c;--v8-purple-2:#291447; --v8-glass-blue:#224f90;--v8-glass-violet:#5b2e91;--v8-glass-red:#9d273a; --v8-ease:cubic-bezier(.22,.73,.17,1); } body{ background:#05040a; background-image: radial-gradient(circle at 50% -5%,rgba(93,46,145,.16),transparent 36%), radial-gradient(circle at 8% 85%,rgba(205,165,72,.06),transparent 30%), repeating-radial-gradient(ellipse at 50% 120%,transparent 0 70px,rgba(215,182,91,.018) 71px 72px); } body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.16;background: linear-gradient(112deg,transparent 0 47%,rgba(255,255,255,.018) 48%,transparent 49%), linear-gradient(24deg,transparent 0 51%,rgba(112,72,156,.03) 52%,transparent 53%);background-size:240px 240px,310px 310px;animation:v8TextureDrift 38s linear infinite} @keyframes v8TextureDrift{to{background-position:240px -120px,-310px 160px}} /* Title shimmer is long and subtle so it reads as material, not an effect. */ .display-title,.history-hero h1,.detail-sheet>h1,.v7-title{ color:transparent;background:linear-gradient(100deg,#ad8c46 0,#fae5a2 28%,#c89943 48%,#fff0b5 55%,#a77d34 78%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;animation:v8TitleSweep 12s ease-in-out infinite; } @keyframes v8TitleSweep{0%,70%,100%{background-position:100% 50%}85%{background-position:0 50%}} /* ------------------------------------------------------------ Custom region/language menus. Native selects remain in the DOM only as state carriers for the existing business code. ------------------------------------------------------------ */ .v8-custom-select{position:relative;min-width:142px;z-index:95} .v8-select-trigger{width:100%;min-height:40px;display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:12px;border:1px solid rgba(215,177,90,.34);background:linear-gradient(145deg,rgba(28,15,45,.92),rgba(8,6,14,.9));color:#cfc5d7;cursor:pointer;box-shadow:inset 0 0 24px rgba(117,72,166,.06);transition:.35s var(--v8-ease)} .v8-select-trigger:hover,.v8-custom-select.open .v8-select-trigger{border-color:rgba(255,222,137,.76);color:var(--v8-gold-hi);box-shadow:0 0 24px rgba(215,177,90,.15),inset 0 0 22px rgba(114,65,160,.16)} .v8-select-icon{width:23px;height:23px;display:grid;place-items:center;border:1px solid rgba(215,177,90,.38);border-radius:50%;font-size:10px;color:var(--v8-gold)} .v8-select-label{flex:1;text-align:left;font-size:13px;white-space:nowrap}.v8-select-trigger i{font-style:normal;transition:transform .35s var(--v8-ease)} .v8-custom-select.open .v8-select-trigger i{transform:rotate(180deg)} .v8-select-menu{position:absolute;right:0;top:calc(100% + 9px);width:max(100%,190px);padding:7px;border:1px solid rgba(215,177,90,.42);border-radius:14px;background:linear-gradient(160deg,rgba(22,12,38,.98),rgba(6,5,11,.98));box-shadow:0 22px 55px rgba(0,0,0,.58),0 0 30px rgba(109,64,162,.12);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top right;transition:opacity .28s ease,transform .34s var(--v8-ease),visibility .28s;max-height:360px;overflow:auto} .v8-custom-select.open .v8-select-menu{opacity:1;visibility:visible;transform:none} .v8-select-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border:0;border-radius:9px;background:transparent;color:#aba1b7;text-align:left;cursor:pointer;transition:.25s ease} .v8-select-menu button span{width:27px;height:25px;display:grid;place-items:center;border:1px solid rgba(215,177,90,.18);border-radius:7px;color:#b9974f;font-size:10px} .v8-select-menu button:hover,.v8-select-menu button.active{background:linear-gradient(90deg,rgba(81,40,125,.46),rgba(39,18,70,.25));color:#f7d984;box-shadow:inset 2px 0 rgba(238,202,112,.72)} /* ------------------------------------------------------------ Home service ladder — immediately visible beneath the main CTA. ------------------------------------------------------------ */ .v8-home-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:24px;max-width:910px} .v8-service-card{position:relative;min-height:214px;padding:22px 20px 18px;border-radius:18px;text-align:left;overflow:hidden;cursor:pointer;isolation:isolate;transition:transform .48s var(--v8-ease),border-color .45s,box-shadow .45s,filter .45s} .v8-service-card:before,.v8-service-card:after{content:"";position:absolute;pointer-events:none;z-index:-1} .v8-service-card:after{inset:-35%;opacity:0;background:radial-gradient(circle,rgba(255,224,137,.18),transparent 58%);transition:opacity .45s;animation:v8Particles 8s linear infinite} .v8-service-card:hover{transform:translateY(-9px);filter:brightness(1.08)}.v8-service-card:hover:after{opacity:1} .v8-service-card:active{transform:translateY(-3px) scale(.992)} .v8-service-card small{display:block;letter-spacing:.18em;font-size:10px;margin:8px 0;color:inherit;opacity:.72} .v8-service-card h3{font-size:25px;line-height:1.1;margin:9px 0 11px;font-family:var(--cn)} .v8-service-card p{font-size:14px;line-height:1.7;min-height:47px;color:#b9afc0}.v8-service-card b{display:block;margin-top:14px;font-family:var(--display);font-size:18px}.v8-service-card b em{font-size:11px;font-style:normal;opacity:.58} .tier-mark-icon{font-family:var(--display);font-size:19px}.tier-badge{position:absolute;right:14px;top:14px;padding:3px 9px;border-radius:999px;font-size:10px;letter-spacing:.12em} .tier-one{border:1px solid rgba(169,169,187,.5);color:#c5c2cc;background:linear-gradient(150deg,rgba(61,43,79,.45),rgba(16,10,27,.8))}.tier-one h3{color:#d3d0d8}.tier-one b{color:#c9c6d0} .tier-two{border:1px solid rgba(222,181,83,.72);color:#e4bf63;background:linear-gradient(145deg,rgba(67,29,105,.76),rgba(20,9,34,.94));box-shadow:0 0 30px rgba(215,177,90,.13),inset 0 0 28px rgba(121,70,166,.13);animation:v8TierBreathe 4.5s ease-in-out infinite} .tier-two .tier-badge{background:rgba(219,176,76,.16);border:1px solid rgba(239,207,122,.48);color:#ffe29a}.tier-two h3{color:#f1cf78}.tier-two b{color:#ffe59b} @keyframes v8TierBreathe{50%{box-shadow:0 0 38px rgba(215,177,90,.23),inset 0 0 35px rgba(121,70,166,.18)}} .tier-three{border:2px solid rgba(210,165,71,.72);color:#dfba65;background:radial-gradient(circle at 78% 22%,rgba(132,76,181,.18),transparent 24%),linear-gradient(145deg,#190b26,#09060f 72%);box-shadow:inset 0 0 0 4px rgba(17,9,28,.92),inset 0 0 0 5px rgba(221,178,82,.22)} .tier-three:before{inset:8px;border:1px solid rgba(225,182,83,.3);border-radius:12px;clip-path:polygon(0 0,35% 0,37% 2%,63% 2%,65% 0,100% 0,100% 35%,98% 37%,98% 63%,100% 65%,100% 100%,65% 100%,63% 98%,37% 98%,35% 100%,0 100%,0 65%,2% 63%,2% 37%,0 35%)} .tier-three h3{font-family:'UnifrakturMaguntia',var(--display);font-size:31px;color:transparent;background:linear-gradient(90deg,#b98bcf,#ffe091,#8e52a7);-webkit-background-clip:text;background-clip:text}.tier-three b{color:#e8c26b} .witch-orb{position:absolute;right:17px;bottom:16px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#d9bcff 0 6%,#7a479d 24%,#190e29 72%);box-shadow:0 0 22px rgba(166,101,214,.38);animation:v8Orb 3s ease-in-out infinite} @keyframes v8Orb{50%{transform:translateY(-3px);box-shadow:0 0 30px rgba(207,139,255,.5)}} @keyframes v8Particles{to{transform:rotate(360deg)}} /* Existing preview is demoted to a clean account utility strip. */ .v7-preview-grid{grid-template-columns:repeat(3,1fr)!important}.v7-sanctum-preview .v7-preview-head .eyebrow:before{content:"✦ ";color:var(--v8-gold)} /* ------------------------------------------------------------ Stained-glass card face and card back. ------------------------------------------------------------ */ .card-back-pattern{background-image:url('tarot-deck/back/card-back.gif')!important;background-size:cover!important;background-position:center!important;border-color:rgba(240,204,111,.74)!important;box-shadow:inset 0 0 0 3px #0a0710,inset 0 0 0 5px rgba(215,177,90,.4),0 16px 38px rgba(0,0,0,.64)!important} .card-back-pattern:before,.card-back-pattern:after{display:none!important} .reveal-card,.result-mini-card,.zoom-card{filter:drop-shadow(0 20px 26px rgba(0,0,0,.46))} .reveal-card .front,.result-mini-card{background:#09070d!important;border:1px solid rgba(233,195,96,.86)!important;box-shadow:inset 0 0 0 4px #08060c,inset 0 0 0 5px rgba(225,182,79,.38),0 22px 55px rgba(0,0,0,.62)!important} .card-frame{inset:4px!important;border:1px solid rgba(231,190,89,.67)!important;box-shadow:inset 0 0 0 3px rgba(5,4,9,.86)!important;clip-path:polygon(0 9%,9% 0,91% 0,100% 9%,100% 100%,0 100%)} .card-art-wrap{inset:8px 7px 29px!important;border:1px solid rgba(227,186,83,.54)!important;background:#090710!important;border-radius:52% 52% 5px 5px/15% 15% 5px 5px;transition:transform .75s var(--v8-ease)} .card-art-wrap img{object-fit:cover!important;transform:scale(1.006)!important;filter:saturate(1.09) contrast(1.05);animation:none!important} .card-art-wrap svg{opacity:0} .card-art-wrap:after{background:linear-gradient(108deg,transparent 36%,rgba(255,248,205,.32) 49%,rgba(129,203,255,.14) 52%,transparent 64%)!important;animation:v8GlassSweep 7.2s ease-in-out infinite!important;mix-blend-mode:screen} @keyframes v8GlassSweep{0%,52%{transform:translateX(-80%)}82%,100%{transform:translateX(80%)}} .card-nameplate{color:#f0cf7b!important;text-shadow:0 1px 0 #000,0 0 8px rgba(215,177,90,.22);font-size:clamp(8px,1.25vw,11px)!important} .orientation-badge{background:rgba(7,5,11,.9)!important;border-color:rgba(228,188,89,.62)!important} .reveal-card.flipped .burst{background:radial-gradient(circle,rgba(255,236,162,.9),rgba(101,155,218,.24) 28%,rgba(118,55,166,.15) 46%,transparent 70%)!important} .reveal-card:before{background:linear-gradient(100deg,transparent 30%,rgba(255,250,215,.75) 47%,rgba(124,197,255,.28) 53%,transparent 69%)!important} /* ------------------------------------------------------------ Perfectly vertical beams. They are positioned by JS from measured card centers and never inherit card rotation. ------------------------------------------------------------ */ .selection-beam{position:absolute!important;top:0!important;left:0!important;margin:0!important;width:78px!important;height:160px;z-index:0!important;transform:translateX(-50%)!important;transform-origin:50% 0!important;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%)!important;background:linear-gradient(to bottom,rgba(255,247,210,.12),rgba(255,233,153,.22) 42%,rgba(223,190,92,.34) 100%)!important;filter:blur(.3px) drop-shadow(0 0 12px rgba(229,194,103,.16))!important;opacity:.18!important;transition:left .45s var(--v8-ease),height .45s var(--v8-ease),opacity .25s,filter .25s,width .25s!important;pointer-events:none} .selection-beam.active{opacity:.76!important;width:68px!important;filter:drop-shadow(0 0 22px rgba(255,224,132,.55)) blur(.15px)!important} .reveal-beam{position:absolute;z-index:-1;left:50%;top:-210px;width:92px;height:225px;transform:translateX(-50%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(to bottom,rgba(255,246,206,.08),rgba(244,221,149,.2) 54%,rgba(224,187,87,.38));opacity:.16;filter:blur(.5px);transition:.4s var(--v8-ease);pointer-events:none} .hand-slot.reveal-active .reveal-beam{opacity:.68;width:74px;filter:drop-shadow(0 0 24px rgba(252,224,145,.48)) blur(.25px)} .hand-slot.reveal-done .reveal-beam{opacity:.08} .reveal-mode .hand-slot{z-index:2} /* ------------------------------------------------------------ History filters: never use white backgrounds. ------------------------------------------------------------ */ .history-filters button,.filter-chip,.history-tabs button,.v7-filter,.v7-chip,.v7-tag{ background:rgba(41,22,65,.64)!important;border:1px solid rgba(163,158,176,.28)!important;color:#aaa6b4!important;box-shadow:none!important;transition:.32s var(--v8-ease)!important } .history-filters button:hover,.filter-chip:hover,.history-tabs button:hover,.v7-filter:hover,.v7-chip:hover,.v7-tag:hover{border-color:rgba(215,177,90,.48)!important;color:#d7c9a3!important;background:rgba(55,28,85,.78)!important} .history-filters button.active,.filter-chip.active,.history-tabs button.active,.v7-filter.on,.v7-chip.on,.v7-tag.on{background:linear-gradient(145deg,#29163f,#130b20)!important;color:#f3d47f!important;border-color:rgba(230,190,90,.72)!important;box-shadow:0 0 18px rgba(215,177,90,.12)!important} /* Page transitions and universal micro interaction. */ .view.active{animation:v8PageIn .62s var(--v8-ease)}@keyframes v8PageIn{from{opacity:0;filter:brightness(.45);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}} button,.panel,.history-item,.archive-card,.v7-card{transition:transform .34s var(--v8-ease),border-color .34s,box-shadow .34s,background .34s} button:active{transform:translateY(1px) scale(.988)} .panel:hover,.history-item:hover,.archive-card:hover{border-color:rgba(215,177,90,.43);box-shadow:0 18px 45px rgba(0,0,0,.24)} /* Result parchment receives a moving candle-shadow instead of a flat texture. */ .parchment{box-shadow:inset 0 0 60px rgba(84,43,18,.18)} .parchment:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 8% 88%,rgba(255,139,45,.12),transparent 18%),radial-gradient(circle at 92% 14%,rgba(255,170,65,.1),transparent 20%);animation:v8CandleShadow 5.5s ease-in-out infinite alternate;mix-blend-mode:multiply} @keyframes v8CandleShadow{to{opacity:.58;transform:translate(2px,-1px)}} /* Remove all visible build/version identifiers. */ .v7-top strong{font-size:0}.v7-top strong:after{content:'ARCANA · MEMBER SANCTUM';font-size:13px;letter-spacing:.18em} /* Admin page */ .admin-shell{position:relative;z-index:4;width:min(1240px,calc(100% - 30px));margin:0 auto;padding:30px 0 80px}.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.admin-card{padding:20px;border:1px solid rgba(215,177,90,.26);border-radius:16px;background:rgba(24,13,40,.78)}.admin-card b{font-size:30px;color:#f3d47f}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:12px;border-bottom:1px solid rgba(215,177,90,.15);text-align:left} @media(max-width:1050px){.v8-home-services{grid-template-columns:1fr 1fr}.tier-three{grid-column:1/-1}.v8-custom-select{min-width:120px}} @media(max-width:760px){ .v8-home-services{grid-template-columns:1fr}.tier-three{grid-column:auto}.v8-service-card{min-height:180px} .v8-custom-select{min-width:auto}.v8-select-trigger{width:43px;padding:7px}.v8-select-label,.v8-select-trigger i{display:none}.v8-select-menu{position:fixed;left:12px;right:12px;top:68px;width:auto;max-height:70vh} .v7-preview-grid{grid-template-columns:1fr!important}.reveal-beam{top:-155px;height:170px;width:62px}.hand-slot.reveal-active .reveal-beam{width:52px} .admin-grid{grid-template-columns:1fr 1fr} } @media(max-width:470px){.admin-grid{grid-template-columns:1fr}.v8-service-card h3{font-size:23px}} @media(prefers-reduced-motion:reduce){.v8-service-card,.tier-two,.witch-orb,.display-title{animation:none!important}} /* reveal-beam alignment fix: each beam is trapped inside its own slot stacking context, centered on the actual card axis and never leaks into the neighboring grid column. */ .reveal-mode .hand-slot{isolation:isolate;overflow:visible} .reveal-mode .hand-slot>.reveal-beam{left:50%!important;right:auto!important;top:-205px!important;width:86px!important;height:225px!important;margin:0!important;transform:translateX(-50%)!important;transform-origin:50% 100%!important;z-index:0!important;clip-path:polygon(45% 0,55% 0,100% 100%,0 100%)!important;background:linear-gradient(180deg,rgba(255,249,221,0) 0%,rgba(255,242,190,.10) 18%,rgba(241,215,137,.26) 62%,rgba(220,183,84,.42) 100%)!important;filter:blur(.45px) drop-shadow(0 0 15px rgba(239,207,119,.18))!important} .reveal-mode .hand-slot>.flip-prompt,.reveal-mode .hand-slot>.reveal-card,.reveal-mode .hand-slot>.slot-label{position:relative;z-index:2} .reveal-mode .hand-slot.reveal-active>.reveal-beam{width:72px!important;opacity:.78!important;filter:blur(.25px) drop-shadow(0 0 24px rgba(255,226,143,.58))!important} .reveal-mode .hand-slot.reveal-done>.reveal-beam{opacity:.07!important} @media(max-width:760px){.reveal-mode .hand-slot>.reveal-beam{top:-150px!important;height:170px!important;width:58px!important}.reveal-mode .hand-slot.reveal-active>.reveal-beam{width:48px!important}} /* ===== END v8.css ===== */ /* ===== BEGIN v9.css ===== */ /* ARCANA commercial visual layer. Public UI intentionally contains no version or provider labels. */ :root{--v9-silver:#a7a0ad;--v9-gold:#d8b85f;--v9-gold2:#f2db91;--v9-purple:#2a1743;--v9-ease:cubic-bezier(.22,.72,.22,1)} html{scrollbar-color:#8f7335 #08050e;scrollbar-width:thin}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#08050e}::-webkit-scrollbar-thumb{border:2px solid #08050e;border-radius:99px;background:linear-gradient(#b38d39,#5d4822)} .v9-breadcrumb{position:relative;z-index:8;display:none;align-items:center;gap:8px;max-width:1320px;margin:12px auto -24px;padding:0 28px;color:#897b92;font-size:12px}.v9-breadcrumb.on{display:flex}.v9-breadcrumb button{border:0;background:none;color:#cbb576;cursor:pointer}.v9-breadcrumb i{opacity:.45} .hero{min-height:calc(100vh - 84px);align-items:center}.hero-copy{max-width:1120px;width:100%}.hero-copy>p{max-width:720px}.hero-deck{opacity:.45;right:-5vw}.v9-service-gateway{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:34px 0 22px;perspective:1200px} .v9-tier-card{position:relative;min-height:330px;padding:30px 26px 25px;overflow:hidden;text-align:left;border-radius:20px;cursor:pointer;transition:transform .48s var(--v9-ease),box-shadow .48s,border-color .4s,filter .4s;font-family:var(--body)}.v9-tier-card:hover{transform:translateY(-10px) scale(1.012)}.v9-tier-card:active{transform:translateY(-3px) scale(.995)}.v9-tier-card:after{content:"";position:absolute;inset:-70%;pointer-events:none;background:conic-gradient(from 20deg,transparent,rgba(255,225,132,.14),transparent 17%);animation:v9CardDust 10s linear infinite}.v9-tier-card>*{position:relative;z-index:2}.v9-tier-card small{display:block;letter-spacing:.18em;font:600 10px/1.4 Cinzel,serif}.v9-tier-card h3{margin:20px 0 10px;font-size:clamp(25px,2.2vw,36px)}.v9-tier-card p{min-height:70px;line-height:1.7}.v9-tier-card strong{display:flex;align-items:flex-end;gap:8px;margin-top:23px;font-family:Cinzel,serif}.v9-tier-card strong span{font-size:clamp(44px,5vw,72px);line-height:.85}.v9-tier-card strong em{padding-bottom:6px;font-size:12px;font-style:normal;letter-spacing:.14em}.v9-tier-card>i{display:block;margin-top:14px;font-style:normal;font-size:12px}.v9-tier-roman{position:absolute;right:22px;top:20px;font:600 40px/1 Cinzel,serif;opacity:.18} .v9-tier-card.tier-one{border:1px solid rgba(184,181,190,.44);background:linear-gradient(150deg,rgba(64,48,77,.55),rgba(18,12,27,.9));color:var(--v9-silver);box-shadow:inset 0 1px rgba(255,255,255,.045)}.tier-one h3,.tier-one strong{color:#d0cad4}.tier-one:hover{border-color:#d0cad4;box-shadow:0 28px 55px rgba(0,0,0,.42),0 0 24px rgba(181,177,188,.13)} .v9-tier-card.tier-two{border:1px solid rgba(223,185,80,.7);background:radial-gradient(circle at 50% -15%,rgba(120,84,166,.38),transparent 45%),linear-gradient(150deg,#321c4f,#10081d);color:#dccb9f;box-shadow:0 0 30px rgba(216,184,95,.17),inset 0 0 32px rgba(107,70,154,.12);animation:v9Recommended 4.5s ease-in-out infinite}.tier-two h3,.tier-two strong{color:#f1d57f;text-shadow:0 0 18px rgba(216,184,95,.3)}.v9-recommend{position:absolute;top:18px;left:20px;padding:5px 10px;border-radius:999px;background:rgba(216,184,95,.14);border:1px solid rgba(216,184,95,.5);color:#f0d987;font:700 9px Cinzel,serif;letter-spacing:.1em} .v9-tier-card.tier-three{border:2px solid #b58c39;background:radial-gradient(circle at 88% 20%,rgba(177,94,192,.18),transparent 26%),radial-gradient(circle at 15% 85%,rgba(255,170,63,.1),transparent 28%),linear-gradient(155deg,#24102f,#07040b 76%);color:#d2bfdc;box-shadow:inset 0 0 0 4px #08050d,inset 0 0 0 5px rgba(216,184,95,.38),0 24px 65px rgba(0,0,0,.55)}.tier-three h3,.tier-three strong{background:linear-gradient(90deg,#d6a9e7,#f2d477,#a876cc);-webkit-background-clip:text;background-clip:text;color:transparent}.tier-three:before{content:"✦ ❦ ✦";position:absolute;left:18px;right:18px;bottom:14px;text-align:center;color:#b88b3d;letter-spacing:1.2em;opacity:.55}.v9-witch-orb{position:absolute;right:22px;bottom:28px;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#ab89cd,#35174a 45%,#07030d 70%);box-shadow:0 0 28px rgba(163,101,195,.28),inset -8px -9px 18px #08020e} @keyframes v9CardDust{to{transform:rotate(360deg)}}@keyframes v9Recommended{50%{box-shadow:0 0 45px rgba(216,184,95,.27),inset 0 0 34px rgba(107,70,154,.2)}} /* Strictly vertical card beams. JS writes absolute pixel x positions from card centers. */ .selection-beam,.reveal-beam{left:var(--beam-x,50%)!important;right:auto!important;margin-left:0!important;transform:translateX(-50%)!important;rotate:0deg!important;skew:0deg!important;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)!important;background:linear-gradient(180deg,rgba(255,246,201,0) 0%,rgba(255,239,176,.14) 28%,rgba(243,216,134,.38) 100%)!important;filter:blur(.4px) drop-shadow(0 0 16px rgba(236,207,117,.25))!important}.selection-beam.active,.reveal-beam.active{filter:blur(.2px) drop-shadow(0 0 26px rgba(255,227,139,.62))!important;opacity:.88!important}.selection-beam.focused,.reveal-beam.focused{width:66px!important;opacity:1!important} /* Never allow browser-default white history/filter controls. */ .history-filters button,.v7-tag,.v7-filter,.record-filter{appearance:none!important;background:rgba(36,21,55,.82)!important;color:#aaa0b2!important;border:1px solid rgba(176,146,91,.36)!important;box-shadow:none!important}.history-filters button:hover,.v7-tag:hover,.v7-filter:hover,.record-filter:hover{background:linear-gradient(180deg,rgba(70,42,96,.9),rgba(29,17,45,.94))!important;color:#ead18a!important}.history-filters button.on,.v7-tag.on,.v7-filter.on,.record-filter.on{background:linear-gradient(180deg,#4a3428,#2c1c27)!important;color:#f1d47c!important;border-color:#b88c3d!important} .v8-custom-select{min-width:142px}.v8-select-trigger{width:100%;background:rgba(13,7,23,.9)!important;border:1px solid rgba(216,184,95,.48)!important;color:#ded2bc!important}.v8-select-menu{overflow:hidden;padding:7px!important;background:rgba(9,5,16,.98)!important;border:1px solid rgba(216,184,95,.5)!important;box-shadow:0 25px 60px rgba(0,0,0,.58)!important}.v8-select-menu button{border-radius:8px!important;color:#bdb0c7!important}.v8-select-menu button:hover,.v8-select-menu button.active{background:linear-gradient(90deg,rgba(76,42,104,.92),rgba(35,19,54,.92))!important;color:#f2d981!important} .v9-service-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0}.v9-benefit{padding:12px 14px;border:1px solid rgba(216,184,95,.24);border-radius:10px;background:rgba(10,6,16,.33);color:#c7bacb;font-size:14px}.v9-service-price{display:flex;align-items:flex-end;gap:9px;margin:20px 0}.v9-service-price strong{font:600 clamp(48px,7vw,86px)/.8 Cinzel,serif;color:#efd47e}.v9-service-price span{padding-bottom:5px;color:#ab9aae;font:600 12px Cinzel}.v9-service-price small{margin-left:10px;padding-bottom:6px;color:#8f8097}.v9-detail-start{margin-top:8px} .v9-page{min-height:70vh;padding-top:72px}.v9-page-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:28px}.v9-page h1{font:600 clamp(38px,6vw,70px) var(--display);color:#efd47d}.v9-recharge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.v9-recharge-card{padding:26px 20px;border:1px solid rgba(216,184,95,.32);border-radius:18px;background:linear-gradient(150deg,rgba(45,25,68,.75),rgba(9,5,15,.95));color:#e5d9c1;cursor:pointer;transition:.35s var(--v9-ease)}.v9-recharge-card:hover{transform:translateY(-7px);border-color:#d8b85f;box-shadow:0 20px 45px rgba(0,0,0,.4)}.v9-recharge-card b{display:block;font:600 42px Cinzel;color:#f1d47c}.v9-recharge-card strong{display:block;margin:10px 0;font:600 24px Cinzel}.v9-recharge-card em{font-style:normal;color:#9e90a5}.v9-faq{display:grid;gap:12px}.v9-faq details{padding:18px 20px;border:1px solid rgba(216,184,95,.27);border-radius:14px;background:rgba(31,17,47,.66)}.v9-faq summary{cursor:pointer;color:#e6d2a0;font-family:var(--display);font-size:19px}.v9-faq p{padding-top:12px;color:#aaa0af}.v9-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}.v9-about-card{padding:30px;border:1px solid rgba(216,184,95,.3);border-radius:20px;background:linear-gradient(145deg,rgba(44,25,65,.78),rgba(8,5,14,.94))}.v9-error-page{min-height:72vh;display:grid;place-items:center;align-content:center;text-align:center}.v9-error-sigil{font-size:80px;color:#d8b85f;animation:v9Recommended 4s infinite}.v9-error-page h1{font:600 clamp(34px,7vw,78px) Cinzel;color:#efd47c}.v9-footer{padding:45px max(20px,5vw)!important}.v9-footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;max-width:1200px;margin:auto;text-align:left}.v9-footer section{display:flex;flex-direction:column;gap:8px}.v9-footer h4,.v9-footer b{color:#d8b85f;font-family:Cinzel}.v9-footer button,.v9-footer a{border:0;background:none;padding:0;color:#92869a;text-align:left;text-decoration:none;cursor:pointer}.v9-footer button:hover,.v9-footer a:hover{color:#e5cf8c}.v9-footer .footer-disclaimer{margin-top:32px}.v9-captcha{display:flex;align-items:center;gap:10px}.v9-captcha span{min-width:100px;padding:11px;border:1px solid rgba(216,184,95,.28);border-radius:9px;text-align:center;color:#efd47b}.v9-captcha input{max-width:90px}.v9-coin-modal{text-align:center}.v9-coin-symbol{font-size:60px;color:#efd47c;text-shadow:0 0 28px rgba(216,184,95,.5)} .view{animation:v9ViewIn .48s var(--v9-ease)}@keyframes v9ViewIn{from{opacity:0;filter:brightness(.55);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}} @media(max-width:980px){.v9-service-gateway{grid-template-columns:1fr}.v9-tier-card{min-height:260px}.v9-recharge-grid{grid-template-columns:1fr 1fr}.v9-footer-grid{grid-template-columns:1fr 1fr}.v9-about-grid{grid-template-columns:1fr}.hero-deck{display:none}} @media(max-width:620px){.v9-service-gateway{margin-top:25px}.v9-tier-card{min-height:245px;padding:24px 20px}.v9-recharge-grid,.v9-footer-grid{grid-template-columns:1fr}.v9-service-benefits{grid-template-columns:1fr}.v9-breadcrumb{padding:0 16px}.v8-custom-select{min-width:0}.v8-select-trigger{padding:8px!important}.v8-select-label{display:none}} /* ============================================================ Release-candidate readability and interaction system ------------------------------------------------------------ The earlier build inherited several 10–12px utility labels from the prototype. This layer raises the public interface to a consistent, readable scale while preserving small typography only inside card art. ============================================================ */ :root{ --v9-readable:clamp(16px,1.08vw,18px); --v9-small:clamp(14px,.92vw,16px); --v9-control:clamp(15px,1vw,17px); --v9-leading:1.72; } body{font-size:var(--v9-readable);line-height:var(--v9-leading);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} .muted,.v7-muted,.v9-page p,.v9-about-card p,.v9-faq p{font-size:var(--v9-readable);line-height:1.82} .nav-link,.v8-select-trigger,.v8-select-menu button,.ghost-btn,.rite-btn,.danger-btn{font-size:var(--v9-control);min-height:44px} .nav-link{padding:9px 17px}.topbar{min-height:74px} .v9-breadcrumb{font-size:14px;gap:10px;margin-top:18px}.v9-breadcrumb button{font-size:14px;padding:7px 2px;min-height:38px} .v9-tier-card{min-height:360px;padding:34px 30px 29px}.v9-tier-card small{font-size:12px;line-height:1.55}.v9-tier-card p{font-size:17px;line-height:1.78;min-height:76px}.v9-tier-card strong em,.v9-tier-card>i{font-size:14px}.v9-recommend{font-size:11px;padding:6px 12px} .v9-benefit{font-size:16px;line-height:1.58;padding:14px 16px}.v9-service-price span,.v9-service-price small{font-size:14px}.service-copy-full p{font-size:clamp(19px,2vw,26px)}.service-position{font-size:15px} .v9-page{padding-top:88px;padding-bottom:90px}.v9-page-head{margin-bottom:36px}.v9-recharge-card em{font-size:15px}.v9-faq details{padding:22px 24px}.v9-faq summary{font-size:20px;line-height:1.5}.v9-about-card h2{font-size:clamp(24px,2.5vw,34px);line-height:1.3;margin-bottom:14px} .modal{padding:32px}.modal h2{font-size:clamp(26px,3vw,34px)}.modal p,.modal-status,.withdrawal-consent{font-size:16px;line-height:1.7}.field label{font-size:14px}.field input,.field select{font-size:16px;min-height:46px} .history-filters button,.v7-tag,.v7-filter,.record-filter{font-size:15px!important;min-height:42px!important;padding:9px 15px!important} .history-item h4{font-size:18px}.history-meta{font-size:13px}.history-cards{font-size:15px}.detail-section h3{font-size:21px}.detail-section p{font-size:17px;line-height:1.85} .overview-card span{font-size:14px}.user-card p{font-size:16px}.panel h3{font-size:22px}.cal-head{font-size:13px}.cal-cell{font-size:15px}.cal-cell small{font-size:11px}.settings-form label{font-size:14px} .v9-footer{padding:64px max(24px,6vw) 42px!important;background:linear-gradient(180deg,rgba(6,3,10,.74),rgba(3,2,6,.96))!important} .v9-footer-grid{max-width:1280px;gap:clamp(32px,5vw,72px)}.v9-footer section{gap:12px}.v9-footer h4{font-size:17px;letter-spacing:.08em;margin-bottom:4px}.v9-footer b{font-size:24px;letter-spacing:.18em}.v9-footer p{font-size:16px;line-height:1.8;color:#aaa0af;max-width:360px}.v9-footer button,.v9-footer a{font-size:16px;line-height:1.75;min-height:34px;padding:2px 0}.v9-footer .footer-disclaimer{font-size:14px;line-height:1.65;letter-spacing:.06em;color:#b3a381}.v9-footer .filing-placeholder{font-size:13px;line-height:1.6;color:#817889} .legal-links{gap:10px 18px}.legal-links button{font-size:15px!important} #toast{font-size:15px;padding:13px 20px;max-width:min(92vw,680px);text-align:center} button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:2px solid #efd47c!important;outline-offset:4px!important;box-shadow:0 0 0 5px rgba(239,212,124,.12)!important} button[disabled]{cursor:not-allowed;opacity:.55;filter:saturate(.6)} /* Stable card playback: the image itself never scales, translates or rocks. Only the glass-light overlay is animated by compositor-friendly transforms. */ .card-art-wrap img.stained-card-asset{transform:none!important;inset:0!important;width:100%!important;height:100%!important;animation:none!important;will-change:auto} .card-art-wrap:after{will-change:transform,opacity;animation:v9GlassOrbit 8.4s cubic-bezier(.45,.05,.55,.95) infinite!important} @keyframes v9GlassOrbit{ 0%,100%{transform:translate3d(-74%,-4%,0) rotate(-3deg);opacity:.2} 48%{transform:translate3d(65%,3%,0) rotate(4deg);opacity:.5} 52%{transform:translate3d(65%,3%,0) rotate(4deg);opacity:.5} } @media(max-width:760px){ body{font-size:17px}.topbar{min-height:66px}.nav-link{font-size:14px;min-height:42px}.v9-tier-card{min-height:280px;padding:27px 23px}.v9-tier-card p{font-size:16px;min-height:auto}.v9-page{padding-top:66px}.v9-footer{padding:50px 22px 36px!important}.v9-footer-grid{gap:34px}.v9-footer button,.v9-footer a,.v9-footer p{font-size:16px}.v9-footer h4{font-size:18px}.modal{padding:26px 22px}.cal-cell{font-size:14px}} @media(prefers-reduced-motion:reduce){.card-art-wrap:after{animation:none!important;opacity:.22}} /* ===== END v9.css ===== */ /* ===== BEGIN v10.css ===== */ /* ARCANA premium experience layer. User-facing pages deliberately avoid build numbers and technical labels. */ :root{ --arcana-gold:#d9b85c;--arcana-gold-2:#f3dda0;--arcana-ink:#08050d; --arcana-panel:rgba(24,13,38,.82);--arcana-line:rgba(217,184,92,.34); --arcana-soft:#b8aebd;--arcana-ease:cubic-bezier(.22,.72,.22,1); --arcana-space-1:8px;--arcana-space-2:14px;--arcana-space-3:22px; --arcana-space-4:36px;--arcana-space-5:64px;--arcana-radius:22px; } html{scroll-padding-top:96px} body{font-size:clamp(17px,1.15vw,19px);line-height:1.82;background:#08050d} body:before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background: radial-gradient(circle at 10% 14%,rgba(94,56,131,.15),transparent 28%), radial-gradient(circle at 87% 28%,rgba(180,124,58,.08),transparent 26%), linear-gradient(180deg,#09050f,#050308 72%)} body:after{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;opacity:.24;background: repeating-radial-gradient(ellipse at 50% 40%,transparent 0 70px,rgba(153,117,188,.06) 71px 72px,transparent 73px 128px);animation:v10VeilDrift 28s ease-in-out infinite alternate} @keyframes v10VeilDrift{to{transform:translate3d(2.5%,-1.5%,0) scale(1.025);opacity:.33}} /* Accessible focus and controls */ button,a,input,select,textarea{font:inherit} button,a,[role=button]{-webkit-tap-highlight-color:transparent} button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--arcana-gold-2)!important;outline-offset:4px!important} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} /* Navigation: roomier and legible */ .topbar{gap:18px;padding-inline:clamp(16px,3vw,44px);background:linear-gradient(180deg,rgba(8,5,13,.97),rgba(8,5,13,.77) 78%,transparent);border-bottom:1px solid rgba(217,184,92,.1)} .brand{font-size:24px}.nav-links{gap:4px}.nav-link{font-size:15px!important;padding:10px 16px!important;white-space:nowrap}.v10-nav-extra{display:inline-flex} .nav-tools{gap:9px} /* Homepage hero and service cards */ .hero{padding-top:clamp(36px,7vh,100px);padding-bottom:clamp(70px,10vh,130px)} .hero-copy{position:relative}.hero-copy:before{content:"";position:absolute;left:-10vw;top:-20%;width:560px;height:560px;pointer-events:none;background:radial-gradient(circle,rgba(112,76,151,.18),transparent 67%);filter:blur(10px)} .display-title{letter-spacing:.015em}.hero .display-title{font-size:clamp(52px,7vw,106px);line-height:1.03}.hero-copy>p{font-size:clamp(18px,1.6vw,23px);color:#c0b4c5;line-height:1.85} .v9-service-gateway{gap:clamp(16px,2vw,28px);margin-top:42px} .v9-tier-card{min-width:0;isolation:isolate;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .v9-tier-card h3{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;font-size:clamp(28px,2.6vw,42px)!important;line-height:1.22!important;letter-spacing:.01em} html[lang^="zh"] .v9-tier-card h3{font-family:'Noto Serif SC','Noto Serif TC',serif!important;font-weight:700!important;letter-spacing:.08em!important} .v9-tier-card:before{pointer-events:none}.v9-tier-card:hover{transform:translateY(-12px) scale(1.018);filter:saturate(1.08)} .v9-tier-card:hover:after{opacity:1}.v9-tier-card:after{opacity:.7} .tier-three h3{font-size:clamp(27px,2.45vw,40px)!important} .v9-tier-card p{font-size:18px!important}.v9-tier-card>i{font-size:15px!important}.v9-tier-card strong span{font-size:clamp(58px,5.3vw,80px)!important} /* Long-scroll premium content */ .v10-reveal{position:relative;opacity:0;transform:translateY(36px);filter:brightness(.72);transition:opacity .9s var(--arcana-ease),transform .9s var(--arcana-ease),filter .9s} .v10-reveal.is-visible{opacity:1;transform:none;filter:none} .v10-oracle-callout{position:relative;padding:clamp(100px,15vw,210px) 0;overflow:hidden;border-block:1px solid rgba(217,184,92,.13);background:radial-gradient(ellipse at 50% 50%,rgba(61,31,89,.42),transparent 65%)} .v10-oracle-callout:before,.v10-oracle-callout:after{content:"";position:absolute;top:0;bottom:0;width:28%;pointer-events:none;background:linear-gradient(90deg,rgba(5,3,9,.95),transparent)} .v10-oracle-callout:before{left:0}.v10-oracle-callout:after{right:0;transform:scaleX(-1)} .v10-callout-inner{max-width:1200px;text-align:center;position:relative;z-index:1}.v10-arch-icon{display:block;margin-bottom:18px;font-size:34px;color:var(--arcana-gold);text-shadow:0 0 28px rgba(217,184,92,.5)} .v10-callout-inner h2{margin:0;font-family:var(--display);font-size:clamp(38px,5.7vw,80px);line-height:1.26;background:linear-gradient(90deg,#9e7a30,#f7e6a9 30%,#c9a24d 70%,#f7e6a9);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v10TitleSweep 9s linear infinite} .v10-callout-inner h2 em{font-style:normal}.v10-callout-inner p{max-width:930px;margin:32px auto 0;color:#c5bacb;font-size:clamp(18px,1.7vw,24px);line-height:1.95} @keyframes v10TitleSweep{to{background-position:220% center}} .v10-knowledge,.v10-why,.v10-masters{padding:clamp(86px,10vw,150px) 0} .v10-split{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.35fr);gap:clamp(40px,7vw,100px);align-items:start} .v10-section-heading{position:sticky;top:120px}.v10-section-heading.centered{position:static;text-align:center;max-width:850px;margin:0 auto 52px}.v10-section-heading>span{display:block;margin-bottom:13px;color:#ab8d48;font:600 12px/1.5 Cinzel,serif;letter-spacing:.28em}.v10-section-heading h2{margin:0;font-family:var(--display);font-size:clamp(40px,5.2vw,76px);line-height:1.18;color:#f0d783;text-shadow:0 0 28px rgba(217,184,92,.16)}.v10-section-heading p{font-size:19px;color:#b9aebd} .v10-prose-card{position:relative;padding:clamp(34px,5vw,68px);border:1px solid var(--arcana-line);border-radius:30px;background:linear-gradient(145deg,rgba(42,23,61,.77),rgba(8,5,13,.92));box-shadow:0 32px 80px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04)} .v10-prose-card:before{content:"";position:absolute;inset:11px;border:1px solid rgba(217,184,92,.12);border-radius:22px;pointer-events:none}.v10-prose-card p{position:relative;margin:0 0 26px;font-size:clamp(18px,1.4vw,21px);line-height:2;color:#c4b9c7}.v10-prose-card p:last-child{margin-bottom:0}.v10-prose-card .v10-lead{font-family:var(--display);font-size:clamp(25px,2.5vw,37px);color:#ead59a;line-height:1.55} .v10-why{background:linear-gradient(180deg,transparent,rgba(32,17,48,.38),transparent)} .v10-advantage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,34px)} .v10-advantage-card{position:relative;min-height:440px;padding:38px 32px;border:1px solid rgba(217,184,92,.26);border-radius:24px;background:linear-gradient(155deg,rgba(46,26,66,.72),rgba(8,5,13,.94));overflow:hidden;transition:.55s var(--arcana-ease)} .v10-advantage-card:before{content:"";position:absolute;inset:-70% 35% auto -70%;height:140%;background:linear-gradient(110deg,transparent,rgba(255,224,137,.08),transparent);transform:rotate(20deg);transition:.7s}.v10-advantage-card:hover{transform:translateY(-10px);border-color:rgba(240,211,126,.62);box-shadow:0 30px 70px rgba(0,0,0,.38),0 0 34px rgba(217,184,92,.08)}.v10-advantage-card:hover:before{transform:translateX(120%) rotate(20deg)} .v10-line-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:28px;border:1px solid rgba(217,184,92,.46);border-radius:50%;color:#e5c975;font-size:24px;box-shadow:inset 0 0 22px rgba(217,184,92,.08)}.v10-advantage-card h3{font-family:var(--display);font-size:30px;color:#ead38c}.v10-advantage-card p{font-size:17px;line-height:1.9;color:#b8aebc} .v10-master-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.v10-master-grid article{padding:24px;border:1px solid rgba(217,184,92,.24);border-radius:22px;background:rgba(18,10,28,.8);text-align:center;transition:.45s var(--arcana-ease)}.v10-master-grid article:hover{transform:translateY(-8px);border-color:rgba(217,184,92,.56)}.v10-master-silhouette{position:relative;height:210px;margin:-4px -4px 24px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 25%,rgba(221,187,101,.2),transparent 22%),linear-gradient(180deg,#2c1a40,#09050e)}.v10-master-silhouette:before{content:"";position:absolute;left:50%;bottom:-18px;width:120px;height:175px;border-radius:60px 60px 15px 15px;transform:translateX(-50%);background:linear-gradient(160deg,#170d22,#030205);box-shadow:0 0 55px rgba(120,74,157,.18)}.v10-master-silhouette i{position:absolute;left:50%;top:42px;width:66px;height:82px;border-radius:50% 50% 46% 46%;transform:translateX(-50%);background:#060309;box-shadow:0 -14px 0 15px #0e0717}.v10-master-grid h3{font-family:var(--display);font-size:24px;color:#ead28a}.v10-master-grid p{font-size:16px;color:#afa4b3;line-height:1.75}.v10-master-grid span{display:block;color:#947b9c;font-size:13px;letter-spacing:.06em} /* New independent pages */ .v10-page{min-height:72vh;padding:clamp(70px,9vw,120px) 0 100px}.v10-page-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:44px}.v10-page-head h1{margin:0;font-family:var(--display);font-size:clamp(44px,6vw,82px);color:#f0d781}.v10-page-head p{max-width:680px;color:#b6aaba;font-size:18px}.v10-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.v10-content-card{position:relative;padding:28px;border:1px solid rgba(217,184,92,.25);border-radius:22px;background:linear-gradient(145deg,rgba(39,22,57,.77),rgba(8,5,13,.94));transition:.42s var(--arcana-ease);overflow:hidden}.v10-content-card:hover{transform:translateY(-7px);border-color:rgba(217,184,92,.58);box-shadow:0 24px 60px rgba(0,0,0,.35)}.v10-content-card h3{font-family:var(--display);font-size:25px;color:#ead28b}.v10-content-card p{color:#b4a9b8;font-size:16px}.v10-content-card small{color:#967e9f}.v10-card-number{position:absolute;right:20px;top:14px;font:600 42px Cinzel;color:rgba(217,184,92,.14)} .v10-search{display:flex;gap:12px;margin-bottom:24px}.v10-search input,.v10-note-form textarea{width:100%;border:1px solid rgba(217,184,92,.3);border-radius:14px;background:rgba(11,6,18,.78);color:#efe5d6;padding:14px 16px}.v10-search input:focus,.v10-note-form textarea:focus{border-color:#d9b85c;box-shadow:0 0 0 4px rgba(217,184,92,.08);outline:0}.v10-achievement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.v10-achievement{padding:24px 18px;border:1px solid rgba(217,184,92,.22);border-radius:18px;background:rgba(20,11,30,.82);text-align:center;opacity:.62}.v10-achievement.unlocked{opacity:1;border-color:#c6a24d;box-shadow:0 0 30px rgba(217,184,92,.08)}.v10-badge{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 16px;border:1px solid #a48643;border-radius:50%;font-size:30px;color:#e8ce78;background:radial-gradient(circle,rgba(217,184,92,.18),transparent 68%)}.v10-achievement h3{font-size:18px;color:#dac584}.v10-achievement p{font-size:14px;color:#a89dab}.v10-progress{height:8px;border-radius:99px;background:#120b1b;overflow:hidden}.v10-progress i{display:block;height:100%;background:linear-gradient(90deg,#7e5a25,#f0d277);box-shadow:0 0 14px rgba(217,184,92,.4)} .v10-note-form{display:grid;gap:14px;margin-bottom:28px}.v10-note-form textarea{min-height:140px;resize:vertical}.v10-note-list{display:grid;gap:14px}.v10-note-item{padding:24px;border:1px solid rgba(217,184,92,.22);border-radius:18px;background:rgba(21,12,32,.82)}.v10-note-item time{font-size:13px;color:#8e8096}.v10-note-item p{white-space:pre-wrap;color:#c3b8c6}.v10-note-actions{display:flex;justify-content:flex-end}.v10-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.v10-theme-card{min-height:260px;padding:26px;border:1px solid rgba(217,184,92,.3);border-radius:24px;cursor:pointer;text-align:left;transition:.45s var(--arcana-ease)}.v10-theme-card[data-theme="night"]{background:linear-gradient(145deg,#2b1740,#07040c)}.v10-theme-card[data-theme="stained"]{background:linear-gradient(145deg,#162c4f,#3f173f 55%,#a57329)}.v10-theme-card[data-theme="parchment"]{background:linear-gradient(145deg,#5d432c,#c6a56b);color:#21150c}.v10-theme-card.active{box-shadow:0 0 0 2px #e8ce78,0 25px 60px rgba(0,0,0,.38)} /* Theme tokens */ body[data-arcana-theme="stained"]{--arcana-panel:rgba(13,25,49,.82)}body[data-arcana-theme="stained"]:before{background:radial-gradient(circle at 15% 20%,rgba(28,92,142,.22),transparent 30%),radial-gradient(circle at 85% 30%,rgba(147,57,118,.18),transparent 27%),linear-gradient(180deg,#050911,#07030b 72%)} body[data-arcana-theme="parchment"]{--arcana-panel:rgba(66,45,28,.86);color:#f0dfbd}body[data-arcana-theme="parchment"]:before{background:radial-gradient(circle at 20% 20%,rgba(178,139,78,.16),transparent 32%),linear-gradient(180deg,#1b120c,#080503 75%)} /* Card light / physical response */ .reveal-card,.zoom-card,.v10-mini-back{--rx:0deg;--ry:0deg;--shine-x:50%;--shine-y:50%;transition:transform .55s var(--arcana-ease),filter .45s,box-shadow .45s;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0)} .reveal-card:after,.zoom-card:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,242,198,.28),transparent 32%);mix-blend-mode:screen;opacity:.58;transition:opacity .35s} .reveal-card:hover,.zoom-card:hover{filter:saturate(1.08) brightness(1.035);box-shadow:0 30px 62px rgba(0,0,0,.48),0 0 28px rgba(217,184,92,.11)} /* Beam is locked to the exact center of its own card slot. */ .reveal-mode .hand-slot{position:relative!important} .reveal-mode .hand-slot>.reveal-beam{left:50%!important;right:auto!important;translate:-50% 0!important;transform:none!important;rotate:0deg!important;skew:0deg!important;transform-origin:50% 100%!important} .selection-beam{translate:-50% 0!important;transform:none!important;rotate:0deg!important;skew:0deg!important;transform-origin:50% 0!important} .selection-beam.focused,.reveal-mode .hand-slot.reveal-active>.reveal-beam{background:linear-gradient(180deg,rgba(255,251,224,0),rgba(255,241,183,.21) 30%,rgba(238,205,112,.52) 100%)!important;filter:blur(.22px) drop-shadow(0 0 27px rgba(255,225,140,.58))!important} /* History labels: never white, including native button defaults. */ .history-filters button,.v7-tag,.v7-filter,.record-filter,.history-filter button{appearance:none!important;-webkit-appearance:none!important;background:rgba(34,19,52,.86)!important;color:#b4a9b8!important;border:1px solid rgba(172,142,91,.43)!important;font-size:16px!important;font-weight:600!important} .history-filters button.on,.v7-tag.on,.v7-filter.on,.record-filter.on,.history-filter button.on{background:linear-gradient(180deg,#4c3425,#261825)!important;color:#f4db8a!important;border-color:#d0a94d!important;box-shadow:0 0 22px rgba(217,184,92,.12)!important} /* Footer is deliberately readable, not micro-copy. */ .v10-footer{border-top:1px solid rgba(217,184,92,.16)}.v10-footer .v9-footer-grid{grid-template-columns:1.4fr repeat(3,1fr);max-width:1360px}.v10-footer h4{font-size:19px!important}.v10-footer b{font-size:28px!important}.v10-footer p,.v10-footer button,.v10-footer a{font-size:17px!important;line-height:1.85!important}.v10-footer .footer-disclaimer{font-size:15px!important;max-width:1120px;margin-inline:auto;text-align:center}.v10-footer-seal{margin-top:20px;color:#9a7e41;font:600 12px Cinzel;letter-spacing:.28em} /* Page transition overlay */ .v10-transition{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(47,26,68,.95),#050308 72%);transition:opacity .28s ease}.v10-transition.on{opacity:1} .v10-skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.035);border-radius:12px}.v10-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(217,184,92,.12),transparent);animation:v10Skeleton 1.5s infinite}@keyframes v10Skeleton{to{transform:translateX(100%)}} @media(max-width:1100px){.v10-master-grid{grid-template-columns:1fr 1fr}.v10-achievement-grid{grid-template-columns:repeat(3,1fr)}.v10-card-grid{grid-template-columns:1fr 1fr}.v10-nav-extra{display:none}.v10-split{grid-template-columns:1fr}.v10-section-heading{position:static}.v10-daily-grid{grid-template-columns:1fr;gap:44px}} @media(max-width:820px){.v10-advantage-grid{grid-template-columns:1fr}.v10-advantage-card{min-height:auto}.v10-theme-grid{grid-template-columns:1fr}.v10-achievement-grid{grid-template-columns:1fr 1fr}.v10-footer .v9-footer-grid{grid-template-columns:1fr 1fr}.v9-tier-card h3{font-size:clamp(29px,8vw,40px)!important}.v10-callout-inner h2 br{display:none}} @media(max-width:620px){body{font-size:17px}.hero .display-title{font-size:clamp(45px,14vw,68px)}.v10-oracle-callout{padding:96px 0}.v10-callout-inner h2{font-size:clamp(36px,10vw,54px)}.v10-prose-card{padding:30px 23px}.v10-master-grid,.v10-card-grid,.v10-achievement-grid,.v10-footer .v9-footer-grid{grid-template-columns:1fr}.v9-tier-card h3{white-space:nowrap!important;font-size:clamp(30px,10vw,42px)!important}.v10-page{padding-top:56px}.v10-page-head{display:block}.v10-page-head h1{font-size:45px}.v10-footer button,.v10-footer a,.v10-footer p{font-size:17px!important}.nav-tools .v8-custom-select{max-width:54px}.v7-coin-pill{display:flex}} @media(hover:none){.v9-tier-card:hover,.v10-content-card:hover,.v10-advantage-card:hover,.v10-master-grid article:hover{transform:none}.v10-marquee-track{animation-duration:70s}} /* V10 ecosystem pages and resilient interaction states */ .v10-empty{grid-column:1/-1;min-height:220px;display:grid;place-items:center;padding:38px;border:1px dashed rgba(217,184,92,.28);border-radius:22px;color:#aa9ead;text-align:center;background:rgba(18,10,28,.48)} .v10-academy-card{appearance:none;text-align:left;color:inherit;cursor:pointer}.v10-academy-card img{display:block;width:100%;aspect-ratio:3/5;object-fit:cover;border-radius:14px;border:1px solid rgba(217,184,92,.3);box-shadow:0 20px 45px rgba(0,0,0,.42);margin-bottom:20px}.v10-academy-card h3{margin:0 0 6px}.v10-academy-card p{margin:0}.v10-info-modal{width:min(920px,94vw)!important}.v10-card-detail{display:grid;grid-template-columns:minmax(220px,.68fr) minmax(0,1.25fr);gap:34px;align-items:start}.v10-card-detail>img{width:100%;max-height:68vh;object-fit:contain;border-radius:18px;border:1px solid rgba(217,184,92,.4);box-shadow:0 30px 70px rgba(0,0,0,.55)}.v10-card-detail h2{font-family:var(--display);font-size:clamp(34px,4vw,58px);color:#eed384;margin:0 0 26px}.v10-card-detail h3{color:#d5b65e;font-size:18px;margin:22px 0 6px}.v10-card-detail p{font-size:17px;color:#beb3c1;line-height:1.85}.v10-card-detail small{display:block;margin-top:30px;color:#8f8394;line-height:1.7} .v10-growth-overview{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:18px;margin-bottom:72px}.v10-growth-overview article{display:flex;flex-direction:column;justify-content:center;min-height:170px;padding:28px;border:1px solid rgba(217,184,92,.27);border-radius:22px;background:linear-gradient(145deg,rgba(46,26,66,.74),rgba(8,5,13,.92));box-shadow:0 24px 55px rgba(0,0,0,.28)}.v10-growth-overview article:first-child{min-height:220px}.v10-growth-overview span{color:#9d8aa5;font:600 12px Cinzel;letter-spacing:.15em}.v10-growth-overview b{font-family:var(--display);font-size:48px;color:#ecd17d}.v10-growth-overview h2{margin:8px 0;font-family:var(--display);font-size:32px;color:#f0d681}.v10-growth-overview p{margin:0 0 16px;color:#b6a9bb}.v10-achievement small{display:block;margin-top:10px;color:#a89153}.v10-content-card>strong{display:block;margin:20px 0;font-family:var(--display);font-size:32px;color:#eed47e}.v10-content-card .ghost-btn{margin-top:18px} .v10-spread-card .v10-line-icon{margin-bottom:22px}.v10-access-panel{display:grid;gap:15px;margin-top:32px;padding:26px;border:1px solid rgba(217,184,92,.25);border-radius:20px;background:rgba(22,12,34,.78)}.v10-access-panel label{display:flex;align-items:center;gap:12px;font-size:17px;color:#c5b9c9}.v10-access-panel input{width:20px;height:20px;accent-color:#d9b85c} .v10-result-note{margin-top:30px;padding:25px;border:1px solid rgba(217,184,92,.24);border-radius:20px;background:rgba(23,13,35,.74)}.v10-result-note h3{margin:0 0 14px;color:#e2c878;font-family:var(--display);font-size:23px}.v10-result-note textarea{width:100%;min-height:120px;padding:15px;border:1px solid rgba(217,184,92,.28);border-radius:14px;background:rgba(7,4,11,.78);color:#efe7dc;resize:vertical;margin-bottom:12px}.v10-result-note textarea:focus{outline:0;border-color:#d9b85c;box-shadow:0 0 0 4px rgba(217,184,92,.09)} .v10-undo{position:fixed;left:50%;bottom:32px;z-index:10010;display:flex;align-items:center;gap:20px;padding:14px 18px;border:1px solid rgba(217,184,92,.52);border-radius:999px;background:rgba(12,7,18,.95);box-shadow:0 18px 52px rgba(0,0,0,.48);color:#e7dccd;opacity:0;transform:translate(-50%,25px);pointer-events:none;transition:.32s var(--arcana-ease)}.v10-undo.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}.v10-undo button{border:0;background:transparent;color:#e9cb72;cursor:pointer;font-weight:700} .v10-page .rite-btn,.v10-page .ghost-btn{min-height:46px}.v10-theme-card:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.45)} .v10-highContrast body,html.v10-highContrast body{--ink:#fff;--muted:#ded5e2}.v10-highContrast .muted,.v10-highContrast p{color:#ded5e2!important}.v10-reduceMotion .v10-marquee-track,.v10-reduceMotion body:after{animation:none!important}.v10-reduceMotion .v10-reveal{opacity:1!important;transform:none!important;filter:none!important} /* Gyroscope and pointer motion are translated only by a few pixels to avoid nausea. */ .hero-deck,.reveal-card.flip,.zoom-card{translate:var(--gyro-x,0) var(--gyro-y,0)} /* No title wrapping in Chinese service cards, even on compact screens. */ html[lang="zh-CN"] .v9-tier-card h3,html[lang="zh-TW"] .v9-tier-card h3{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;hyphens:none!important} /* Card beams use each slot as the containing block; no global coordinate drift. */ .reveal-mode .hand-slot>.reveal-beam{width:min(180px,135%)!important;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)!important;background:linear-gradient(180deg,rgba(255,247,211,0),rgba(246,224,162,.13) 34%,rgba(227,193,100,.34) 100%)!important} .reveal-mode .hand-slot.reveal-active>.reveal-beam{width:min(148px,112%)!important;clip-path:polygon(45% 0,55% 0,100% 100%,0 100%)!important} /* Custom scrollbars */ *{scrollbar-color:#8d6f31 #0b0710;scrollbar-width:thin}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:#09060e}::-webkit-scrollbar-thumb{border:3px solid #09060e;border-radius:999px;background:linear-gradient(#6f4e1e,#d2ae55,#6f4e1e)} /* Service-card titles retain a stable vertical rhythm. */ .v9-tier-card h3{min-height:1.3em;display:flex;align-items:center}.v9-tier-card p{min-height:3.6em}.v9-tier-card strong{margin-top:auto} @media(max-width:900px){.v10-growth-overview{grid-template-columns:1fr 1fr}.v10-growth-overview article:first-child{grid-column:1/-1}.v10-card-detail{grid-template-columns:1fr}.v10-card-detail>img{max-width:340px;margin:auto}.v10-card-grid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.v10-growth-overview,.v10-card-grid{grid-template-columns:1fr}.v10-growth-overview article:first-child{grid-column:auto}.v10-info-modal{padding:22px!important}.v10-card-detail>img{max-width:260px}.v10-undo{width:calc(100% - 28px);justify-content:space-between}.v9-tier-card p{min-height:auto}.v9-tier-card h3{justify-content:flex-start}} .v10-captcha-widget{min-height:66px;padding:8px 0;display:flex;align-items:center}.v10-captcha-widget[hidden]{display:none!important} /* V10.1: Chinese service-title fit and home-page overlap corrections. */ html[lang="zh-CN"] .v9-tier-card h3, html[lang="zh-TW"] .v9-tier-card h3{ width:100%!important; max-width:100%!important; min-height:1.28em!important; margin:18px 0 12px!important; padding:0!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; word-break:keep-all!important; overflow-wrap:normal!important; font-size:clamp(25px,2.05vw,33px)!important; line-height:1.22!important; letter-spacing:.025em!important; justify-content:flex-start!important; } .v9-tier-card.recommended>.v9-recommend{top:20px!important;left:24px!important;z-index:4!important} .v9-tier-card.recommended>small{margin-top:34px!important} .v10-daily .v10-section-heading{position:static!important;top:auto!important;margin:0 0 26px!important} .v10-daily .v10-section-heading h2{margin:0!important;line-height:1.22!important} .v10-daily-copy>p{display:block!important;position:relative!important;margin:0 0 30px!important;max-width:640px!important;font-size:20px!important;line-height:1.85!important} .v10-why-sub[hidden]{display:none!important} .v10-advantage-card p:only-of-type{margin-bottom:0} @media(max-width:1100px){ html[lang="zh-CN"] .v9-tier-card h3,html[lang="zh-TW"] .v9-tier-card h3{font-size:clamp(25px,4vw,34px)!important} } @media(max-width:620px){ html[lang="zh-CN"] .v9-tier-card h3,html[lang="zh-TW"] .v9-tier-card h3{font-size:clamp(25px,8.5vw,32px)!important;letter-spacing:.015em!important} .v9-tier-card.recommended>small{margin-top:32px!important} .v10-daily .v10-section-heading{margin-bottom:22px!important} .v10-daily-copy>p{font-size:18px!important} } /* ===== END v10.css ===== */ /* ===== BEGIN v10_2.css ===== */ /* V10.2 — service alignment, account roles, member pricing and growth polish */ .v9-service-gateway{align-items:stretch} .v9-tier-card{display:flex!important;flex-direction:column!important;min-height:390px!important;padding:30px 28px 30px!important;overflow:hidden!important} .v9-tier-card>small{display:flex!important;align-items:flex-end!important;min-height:54px!important;margin:0!important;padding-top:30px!important;line-height:1.45!important} .v9-tier-card.recommended>small{margin:0!important;padding-top:30px!important} .v9-tier-card h3{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;max-width:100%!important;min-height:54px!important;margin:10px 0 10px!important;padding:0 2px!important;line-height:1.14!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;box-sizing:border-box!important} .v9-tier-card p{min-height:76px!important;margin:0 0 12px!important} .v9-tier-card strong{width:100%!important;max-width:100%!important;margin-top:auto!important;padding:4px 8px 0 0!important;overflow:visible!important;flex-shrink:0!important} .v9-tier-card strong span{display:block!important;max-width:100%!important;white-space:nowrap!important;letter-spacing:-.04em!important} .v9-tier-card.tier-three strong span{font-size:clamp(52px,4.8vw,72px)!important} .v9-tier-card>i{min-height:24px!important;margin-top:15px!important;line-height:1.45!important} .v9-recommend{top:16px!important;left:28px!important;z-index:6!important} .v9-tier-roman{right:24px!important} html[lang="zh-CN"] .v9-tier-card h3,html[lang="zh-TW"] .v9-tier-card h3{font-size:clamp(23px,1.85vw,30px)!important;letter-spacing:.035em!important} html[lang="zh-CN"] .v9-tier-card.tier-three h3,html[lang="zh-TW"] .v9-tier-card.tier-three h3{font-size:clamp(22px,1.78vw,29px)!important} .v102-account-badge{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:3px 8px;border:1px solid rgba(215,182,91,.35);border-radius:999px;background:rgba(80,43,105,.28);color:#dfc36e;font-size:11px;line-height:1;white-space:nowrap} .v102-account-badge.member{background:linear-gradient(90deg,rgba(108,58,141,.52),rgba(213,177,76,.16));box-shadow:0 0 16px rgba(213,177,76,.12)} .v102-account-badge.admin{border-color:#e2c66e;color:#ffe9a3}.v102-account-badge.tester{border-color:#8e78ba;color:#cdb8f0} .v102-member-price{display:inline-flex;align-items:center;width:max-content;margin:8px 0 0;padding:5px 9px;border:1px solid rgba(218,182,83,.43);border-radius:999px;background:rgba(109,60,137,.32);color:#efd27c;font-size:12px;font-style:normal;letter-spacing:.04em} .v9-tier-card.is-member-price strong:after{content:attr(data-original-price);align-self:center;margin-left:8px;color:#817685;font-size:16px;text-decoration:line-through;text-decoration-thickness:1px} .v102-growth-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:28px 0 20px}.v102-growth-filters{display:flex;gap:8px;flex-wrap:wrap}.v102-growth-filters button{min-height:38px;padding:8px 14px;border:1px solid rgba(215,182,91,.26);border-radius:999px;background:rgba(32,18,46,.72);color:#aaa0ae;cursor:pointer;transition:.25s}.v102-growth-filters button:hover,.v102-growth-filters button.on{border-color:#d9b85c;background:rgba(96,53,125,.48);color:#ecd17c;box-shadow:0 0 16px rgba(217,184,92,.12)} .v10-achievement{position:relative;overflow:hidden;min-height:245px;transition:.35s var(--arcana-ease)}.v10-achievement:hover{transform:translateY(-5px);border-color:rgba(224,192,103,.48)}.v10-achievement:before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 20% 10%,rgba(217,184,92,.09),transparent 28%);pointer-events:none}.v10-achievement.unlocked{background:linear-gradient(145deg,rgba(67,38,84,.88),rgba(12,7,18,.95));box-shadow:0 18px 45px rgba(0,0,0,.25),inset 0 0 30px rgba(219,185,83,.05)}.v10-achievement[data-rarity="RARE"]{border-color:rgba(139,111,187,.4)}.v10-achievement[data-rarity="EPIC"]{border-color:rgba(187,91,191,.52)}.v10-achievement[data-rarity="LEGENDARY"]{border-color:rgba(236,196,84,.66);box-shadow:0 0 24px rgba(236,196,84,.08)}.v102-rarity{position:absolute;right:15px;top:14px;padding:4px 7px;border-radius:999px;background:rgba(7,4,12,.56);color:#a99aad;font:600 10px Cinzel,serif;letter-spacing:.08em}.v10-achievement.unlocked .v10-badge{animation:v102Badge 4s ease-in-out infinite}@keyframes v102Badge{50%{transform:translateY(-3px) scale(1.04);filter:drop-shadow(0 0 12px rgba(236,207,113,.34))}} .v102-role-card{border-color:rgba(218,182,83,.42)!important;background:linear-gradient(145deg,rgba(69,39,91,.78),rgba(12,7,18,.95))!important}.v102-role-card b{font-size:30px!important}.v102-discount-note{display:block;margin-top:10px;color:#e0c16b;font-size:13px} .v10-footer button,.v10-footer a{min-height:34px;display:flex;align-items:center}.v10-footer h4{margin-bottom:16px}.v10-footer .v9-footer-grid{align-items:start} @media(max-width:980px){.v9-tier-card{min-height:330px!important}.v9-tier-card>small{min-height:48px!important}.v9-tier-card p{min-height:auto!important}} @media(max-width:620px){.v9-tier-card{min-height:305px!important;padding:25px 22px 27px!important}.v9-tier-card h3{min-height:46px!important;font-size:clamp(24px,7vw,31px)!important}.v9-tier-card.tier-three h3{font-size:clamp(23px,6.7vw,30px)!important}.v9-tier-card>small{min-height:44px!important;padding-top:27px!important}.v9-tier-card.tier-three strong span{font-size:clamp(48px,15vw,66px)!important}.v102-account-badge{display:none}} /* Service-card alignment hardening: every title occupies the same measured row. */ .v9-service-gateway .v9-tier-card{container-type:inline-size} .v9-service-gateway .v9-tier-card>small{justify-content:center!important;text-align:center!important} .v9-service-gateway .v9-tier-card h3{ justify-content:center!important; text-align:center!important; min-width:0!important; height:56px!important; min-height:56px!important; padding-inline:8px!important; margin-block:10px 12px!important; font-size:clamp(24px,2.05vw,31px)!important; line-height:1.06!important; } html[lang="zh-CN"] .v9-service-gateway .v9-tier-card h3, html[lang="zh-TW"] .v9-service-gateway .v9-tier-card h3{ font-size:clamp(23px,1.72vw,28px)!important; letter-spacing:.02em!important; font-weight:700!important; word-break:keep-all!important; overflow-wrap:normal!important; } .v9-service-gateway .v9-tier-card strong{ position:relative!important; display:flex!important; align-items:flex-end!important; min-width:0!important; width:100%!important; padding-right:4px!important; box-sizing:border-box!important; } .v9-service-gateway .v9-tier-card strong span{ min-width:0!important; max-width:calc(100% - 42px)!important; overflow:visible!important; } .v9-service-gateway .v9-tier-card.tier-three strong{ padding-right:78px!important; } .v9-service-gateway .v9-tier-card.tier-three strong span{ max-width:100%!important; font-size:clamp(46px,4.25vw,65px)!important; letter-spacing:-.065em!important; } .v9-service-gateway .v9-tier-card.tier-three .v9-witch-orb{ right:16px!important; bottom:31px!important; width:52px!important; height:52px!important; opacity:.78!important; pointer-events:none!important; } @media(max-width:980px){ .v9-service-gateway .v9-tier-card h3{height:50px!important;min-height:50px!important} .v9-service-gateway .v9-tier-card.tier-three strong{padding-right:68px!important} } @media(max-width:620px){ html[lang="zh-CN"] .v9-service-gateway .v9-tier-card h3, html[lang="zh-TW"] .v9-service-gateway .v9-tier-card h3{font-size:clamp(22px,6.2vw,27px)!important} .v9-service-gateway .v9-tier-card.tier-three strong span{font-size:clamp(44px,13vw,60px)!important} } /* Enhanced growth and membership presentation. */ .v102-overview{grid-template-columns:minmax(260px,1.5fr) repeat(4,minmax(145px,1fr))!important} .v102-level-card h2{margin:8px 0 3px;color:#efd27d;font:600 clamp(24px,2.2vw,34px) var(--display)} .v102-achievement-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;color:#aa9eac;font-size:13px} .v102-achievement-meta small:last-child{color:#d7ba69;text-align:right} .v102-membership-head{margin-top:70px}.v102-membership-head p{max-width:700px;margin:10px auto 0;color:#aca0af;font-size:16px;line-height:1.75} .v102-membership-grid .v10-content-card{display:flex;flex-direction:column;min-height:285px} .v102-membership-grid .v10-content-card strong{margin-top:auto;color:#efd27d;font:600 34px Cinzel,serif} .v102-plan-active{border-color:#e2c568!important;box-shadow:0 0 30px rgba(226,197,104,.13)!important} .v102-plan-active:after{content:"✦";position:absolute;right:18px;top:14px;color:#e6c96f;text-shadow:0 0 12px rgba(230,201,111,.5)} .v10-achievement[hidden]{display:none!important} @media(max-width:1180px){.v102-overview{grid-template-columns:repeat(3,minmax(160px,1fr))!important}.v102-level-card{grid-column:span 2}} @media(max-width:720px){.v102-overview{grid-template-columns:1fr 1fr!important}.v102-level-card{grid-column:1/-1}.v102-role-card{grid-column:1/-1}.v102-achievement-meta{align-items:flex-start;flex-direction:column}} /* V10.2 final service-card geometry: identical title rows and zero right clipping. */ .v9-service-gateway .v9-tier-card{ display:grid!important; grid-template-rows:58px 62px minmax(86px,1fr) 86px 36px!important; align-items:stretch!important; min-width:0!important; padding-inline:clamp(22px,2.1vw,31px)!important; } .v9-service-gateway .v9-tier-card>small{ display:flex!important;align-items:flex-end!important;justify-content:center!important; width:100%!important;min-width:0!important;height:58px!important;min-height:58px!important; padding:24px 42px 0!important;margin:0!important;text-align:center!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } .v9-service-gateway .v9-tier-card h3{ grid-row:2!important;display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;min-width:0!important;max-width:100%!important;height:62px!important;min-height:62px!important; margin:0!important;padding:0 4px!important;text-align:center!important;white-space:nowrap!important; overflow:visible!important;text-overflow:clip!important;line-height:1.12!important;box-sizing:border-box!important; } .v9-service-gateway .v9-tier-card p{grid-row:3!important;min-width:0!important;min-height:0!important;margin:0!important;padding:10px 0 12px!important;text-align:center!important} .v9-service-gateway .v9-tier-card strong{ grid-row:4!important;display:flex!important;align-items:flex-end!important;justify-content:center!important; width:100%!important;min-width:0!important;max-width:100%!important;height:86px!important;margin:0!important; padding:10px 0 4px!important;overflow:visible!important;box-sizing:border-box!important; } .v9-service-gateway .v9-tier-card strong span{display:block!important;max-width:none!important;min-width:0!important;white-space:nowrap!important;overflow:visible!important;line-height:.9!important} .v9-service-gateway .v9-tier-card strong em{flex:0 0 auto!important;padding-bottom:8px!important} .v9-service-gateway .v9-tier-card>i{grid-row:5!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;margin:0!important;text-align:center!important} html[lang="zh-CN"] .v9-service-gateway .v9-tier-card h3, html[lang="zh-TW"] .v9-service-gateway .v9-tier-card h3{ font-size:clamp(22px,1.58vw,27px)!important;letter-spacing:.015em!important;font-family:'Noto Serif SC','Noto Serif TC',serif!important; } .v9-service-gateway .v9-tier-card.tier-three strong{padding-right:0!important} .v9-service-gateway .v9-tier-card.tier-three strong span{font-size:clamp(45px,4vw,62px)!important;letter-spacing:-.055em!important} .v9-service-gateway .v9-tier-card.tier-three .v9-witch-orb{right:17px!important;top:93px!important;bottom:auto!important;width:38px!important;height:38px!important;opacity:.55!important;z-index:1!important} .v9-service-gateway .v9-recommend{top:15px!important;left:50%!important;transform:translateX(-50%)!important;max-width:44%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .v9-service-gateway .v9-tier-card.recommended>small{padding-top:30px!important} @media(max-width:980px){ .v9-service-gateway .v9-tier-card{grid-template-rows:52px 58px auto 80px 34px!important} .v9-service-gateway .v9-tier-card>small{height:52px!important;min-height:52px!important;padding-top:20px!important} .v9-service-gateway .v9-tier-card h3{height:58px!important;min-height:58px!important} .v9-service-gateway .v9-tier-card.tier-three .v9-witch-orb{top:78px!important} } @media(max-width:620px){ .v9-service-gateway .v9-tier-card{grid-template-rows:48px 54px auto 76px 34px!important} .v9-service-gateway .v9-tier-card>small{height:48px!important;min-height:48px!important;padding:18px 34px 0!important} .v9-service-gateway .v9-tier-card h3{height:54px!important;min-height:54px!important} html[lang="zh-CN"] .v9-service-gateway .v9-tier-card h3,html[lang="zh-TW"] .v9-service-gateway .v9-tier-card h3{font-size:24px!important} .v9-service-gateway .v9-tier-card.tier-three strong span{font-size:50px!important} } /* ===== END v10_2.css ===== */ /* ===== BEGIN v11.css ===== */ /* ARCANA immersive account, payment and readability refinements. */ :root{--v11-gold:#e2c269;--v11-gold-soft:#aa8744;--v11-violet:#170d25;--v11-panel:rgba(13,7,21,.96);--v11-danger:#ff8e9c} /* The user requested a twofold luminance lift for the shipped animated cards. */ .stained-card-asset,.v10-card-detail img,.v10-academy-card img,.v11-payment-qr img{filter:brightness(2) saturate(1.08) contrast(.94)} .card-back-pattern{filter:brightness(2) saturate(1.08) contrast(.94)!important} .reveal-card,.hero-card,.deck-card,.mini-back,.v10-mini-back{--card-luminance:2} .reveal-card .card-back-pattern,.hero-card .card-back-pattern,.deck-card .card-back-pattern,.mini-back .card-back-pattern{filter:brightness(var(--card-luminance)) saturate(1.08) contrast(.94)!important} .v11-auth-card{width:min(560px,calc(100vw - 28px));padding:38px;border:1px solid rgba(226,194,105,.55);background:radial-gradient(circle at 50% -10%,rgba(91,52,132,.28),transparent 45%),linear-gradient(155deg,rgba(25,13,39,.98),rgba(6,3,10,.99));box-shadow:0 35px 100px rgba(0,0,0,.76),inset 0 0 48px rgba(126,77,166,.08)} .v11-auth-card h2{font-size:clamp(31px,5vw,47px);margin:8px 0 10px;color:#efd783;text-shadow:0 0 24px rgba(226,194,105,.24)} .v11-auth-card .field{margin-top:16px}.v11-auth-card label{display:block;margin-bottom:8px;color:#cabfce;font-size:15px;letter-spacing:.04em} .v11-auth-card input,.v11-auth-card select,.v11-reset-page input,.v11-reset-page select{width:100%;min-height:48px;padding:11px 14px;border:1px solid rgba(213,183,103,.35);border-radius:12px;background:rgba(7,3,12,.78);color:#f4edf6;font:500 16px/1.4 var(--body);outline:none;transition:border-color .25s,box-shadow .25s,background .25s} .v11-auth-card input:focus,.v11-auth-card select:focus,.v11-reset-page input:focus,.v11-reset-page select:focus{border-color:#e2c269;box-shadow:0 0 0 3px rgba(226,194,105,.12),0 0 26px rgba(162,105,200,.12);background:rgba(15,7,23,.94)} .v11-password{position:relative}.v11-password input{padding-right:52px}.v11-password button{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;color:#bda466;font-size:19px;cursor:pointer} .v11-auth-links{display:flex;justify-content:space-between;margin-top:18px}.v11-auth-links button{border:0;background:transparent;color:#c7ad68;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:4px} .v11-field-errors{min-height:20px;margin-top:10px;color:var(--v11-danger);font-size:14px;line-height:1.5}.v11-field-errors:empty{min-height:0} .v11-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.v11-tabs button{min-height:44px;border:1px solid rgba(211,178,88,.3);border-radius:11px;background:rgba(50,26,75,.38);color:#a99faf;font-size:15px;cursor:pointer;transition:.25s}.v11-tabs button.active{border-color:#d9b85c;background:linear-gradient(145deg,rgba(105,63,139,.62),rgba(32,16,47,.92));color:#f0d57b;box-shadow:inset 0 0 18px rgba(226,194,105,.08)} .v11-register-card{width:min(760px,calc(100vw - 24px));max-height:min(92vh,980px);overflow:auto}.v11-register-card .inline-field,.v11-reset-shell .inline-field{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}.v11-country-code{display:grid;place-items:center;min-width:64px;height:48px;border:1px solid rgba(213,183,103,.35);border-radius:12px;background:rgba(7,3,12,.78);color:#e5cf8a}.v11-country-code.hidden{display:none}.v11-optional{margin:20px 0;padding:14px 16px;border:1px solid rgba(203,170,83,.22);border-radius:14px;background:rgba(30,15,45,.34)}.v11-optional summary{color:#cfb86f;cursor:pointer;font-size:16px}.v11-birth{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.v11-interest-grid{display:flex;flex-wrap:wrap;gap:9px}.v11-interest-grid button{padding:9px 14px;border:1px solid rgba(180,166,187,.25);border-radius:999px;background:rgba(40,31,48,.72);color:#aaa1ae;cursor:pointer}.v11-interest-grid button.active{border-color:#d9b85c;background:rgba(112,75,137,.52);color:#f1d47a;box-shadow:0 0 18px rgba(217,184,92,.13)} .v11-reset-page{position:fixed;z-index:10050;inset:0;display:none;overflow:auto;background:radial-gradient(circle at 50% 18%,rgba(78,46,111,.34),transparent 32%),linear-gradient(rgba(5,2,9,.94),rgba(6,3,10,.99));backdrop-filter:blur(18px)}.v11-reset-page.open{display:grid;place-items:center}.v11-reset-shell{width:min(620px,calc(100vw - 28px));margin:60px auto;padding:48px;border:1px solid rgba(226,194,105,.46);border-radius:24px;background:var(--v11-panel);box-shadow:0 35px 100px rgba(0,0,0,.7)}.v11-reset-shell h1{font:600 clamp(40px,7vw,70px)/1.05 var(--display);color:#ecd37c}.v11-reset-close{position:fixed;right:24px;top:20px;width:48px;height:48px;border:1px solid rgba(226,194,105,.38);border-radius:50%;background:#12091b;color:#e9d183;font-size:28px;cursor:pointer} .v11-payment-qr{margin:20px auto;padding:20px;border:1px solid rgba(226,194,105,.38);border-radius:18px;background:rgba(12,6,19,.84);text-align:center}.v11-payment-qr img{width:min(260px,70vw);height:auto;padding:13px;border-radius:12px;background:#fff;filter:none}.v11-payment-qr p{margin:12px 0 0;color:#d3bf82} /* Vertical beams are centered by the card slot itself, never by a translated page coordinate. This removes accumulated horizontal errors. */ .hand-slot{position:relative}.hand-slot::before{left:50%!important;right:auto!important;transform:translateX(-50%)!important;rotate:0deg!important;transform-origin:50% 100%!important} .reveal-beam,.v9-reveal-beam,.card-beam{left:50%!important;right:auto!important;transform:translateX(-50%)!important;rotate:0deg!important} @media(max-width:720px){.v11-auth-card,.v11-reset-shell{padding:28px 20px}.v11-register-card .inline-field,.v11-reset-shell .inline-field{grid-template-columns:auto 1fr}.v11-register-card .inline-field .ghost-btn,.v11-reset-shell .inline-field .ghost-btn{grid-column:1/-1;width:100%;display:block}.v11-birth{gap:6px}.v11-interest-grid button{font-size:14px}.v11-auth-card h2{font-size:34px}} @media(prefers-reduced-motion:reduce){.v11-auth-card,.v11-reset-shell{scroll-behavior:auto}} .v11-country-code[type="text"],input.v11-country-code{width:76px!important;min-width:76px!important;padding:0 8px!important;text-align:center} .v11-interest-grid button.selected{border-color:#d9b85c;background:rgba(112,75,137,.52);color:#f1d47a;box-shadow:0 0 18px rgba(217,184,92,.13)} .v11-captcha-slot{min-height:0;margin:14px 0;display:flex;justify-content:center}.v11-captcha-slot:empty{display:none} .v11-payment-note{margin:18px 0 28px;padding:14px 18px;border:1px solid rgba(226,194,105,.22);border-radius:14px;background:rgba(50,25,72,.28);color:#cbbdce;font-size:16px;line-height:1.7} .v11-recharge-grid .v9-recharge-card{position:relative;overflow:hidden;min-height:230px;padding:30px 24px}.v11-recharge-grid .v9-recharge-card:after{content:"";position:absolute;inset:-80% -40%;background:linear-gradient(105deg,transparent 42%,rgba(255,228,142,.12) 50%,transparent 58%);transform:translateX(-60%);transition:transform .8s}.v11-recharge-grid .v9-recharge-card:hover:after{transform:translateX(60%)} .v11-checkout{margin-top:30px}.v11-checkout-card{padding:28px;border:1px solid rgba(226,194,105,.36);border-radius:22px;background:linear-gradient(145deg,rgba(31,16,46,.88),rgba(8,4,13,.96));box-shadow:0 28px 80px rgba(0,0,0,.42)}.v11-checkout-card>div:first-child{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.v11-checkout-card>div:first-child span{font-size:18px;color:#d8cbdc}.v11-checkout-card>div:first-child strong{font:600 30px/1 var(--display);color:#efd57d}.v11-provider-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:20px 0}.v11-provider-list label{cursor:pointer}.v11-provider-list input{position:absolute;opacity:0}.v11-provider-list span{display:flex;min-height:52px;align-items:center;justify-content:center;padding:10px 16px;border:1px solid rgba(206,174,91,.26);border-radius:13px;background:rgba(45,25,62,.38);color:#bcb0c0;transition:.25s}.v11-provider-list input:checked+span{border-color:#e2c269;color:#efd57d;background:linear-gradient(145deg,rgba(100,61,132,.62),rgba(28,13,42,.9));box-shadow:0 0 28px rgba(226,194,105,.09)} .v11-coin-arrival:after{content:"✦ ◉ ✦";position:fixed;z-index:12000;left:50%;top:50%;transform:translate(-50%,-50%);font:700 clamp(48px,9vw,100px)/1 var(--display);color:#f4d878;text-shadow:0 0 30px #d5a83c,0 0 70px rgba(134,71,181,.7);pointer-events:none;animation:v11CoinArrival 1.2s ease both}@keyframes v11CoinArrival{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.25)}} @media(max-width:720px){input.v11-country-code{width:66px!important;min-width:66px!important}.v11-checkout-card>div:first-child{align-items:flex-start;flex-direction:column}.v11-provider-list{grid-template-columns:1fr}} /* ===== END v11.css ===== */ /* ===== BEGIN v11_2.css ===== */ /* ARCANA service renaming, brighter hero cards and account-hub refinements. */ :root{ --v112-panel:rgba(17,9,27,.92); --v112-line:rgba(225,190,98,.32); --v112-gold:#e7c970; --v112-muted:#b9adbd; } /* The home deck must read as illuminated stained glass rather than a dim silhouette. */ .hero-deck{opacity:.96!important;filter:brightness(1.26) saturate(1.16)!important} .hero-card{opacity:1!important} .hero-card:nth-child(2),.hero-card:nth-child(3){opacity:.96!important} .hero-card .card-back-pattern,.hero-deck .card-back-pattern{ opacity:1!important; filter:brightness(2.3) saturate(1.14) contrast(.94)!important; box-shadow:inset 0 0 0 3px #08050d,inset 0 0 0 5px rgba(238,202,105,.55),0 26px 54px rgba(0,0,0,.66),0 0 34px rgba(140,82,186,.2)!important; } /* Equal title baselines and enough width for all Chinese service names. */ .v9-service-gateway{align-items:stretch} .v9-tier-card{display:flex!important;flex-direction:column;min-width:0;isolation:isolate} .v9-tier-card>small{min-height:35px;padding-right:48px} .v9-tier-card h3{ display:flex; align-items:center; min-height:58px; margin:16px 0 10px!important; line-height:1.12!important; white-space:nowrap; overflow:visible; text-overflow:clip; letter-spacing:.015em; } .v9-tier-card p{flex:1} html[lang="zh-CN"] .v9-tier-card h3,html[lang="zh-TW"] .v9-tier-card h3{ font-size:clamp(25px,2.15vw,34px)!important; letter-spacing:.04em!important; } .v9-tier-card.tier-three{padding-right:30px!important} .v9-tier-card.tier-three h3,.v9-tier-card.tier-three strong{max-width:100%;padding-right:0} .v9-witch-orb{right:18px!important;bottom:18px!important;width:48px!important;height:48px!important;opacity:.66} /* The middle recommendation badge and kicker occupy separate visual rows. */ .v9-tier-card.tier-two>small{padding-top:34px!important} .v9-recommend{top:16px!important;left:24px!important;z-index:5} /* Detail-page prose is long by design; improve readability without rewriting it. */ .service-copy-full{width:min(900px,calc(100vw - 44px))!important} .service-copy-full>p{font-size:clamp(17px,1.25vw,20px)!important;line-height:1.95!important;max-width:900px!important;text-wrap:pretty} .service-copy-full h1{font-size:clamp(44px,6.6vw,94px)!important;white-space:nowrap;overflow:visible} html[lang="zh-CN"] .service-copy-full h1,html[lang="zh-TW"] .service-copy-full h1{letter-spacing:.08em} /* Feed-like information rhythm: stable navigation, clear cards, less visual noise. */ .topbar{backdrop-filter:blur(22px) saturate(1.15);background:rgba(8,4,13,.86)!important} .v7-preview-card,.v10-advantage-card,.v10-master-grid article{ transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease; } .v7-preview-card:hover,.v10-advantage-card:hover,.v10-master-grid article:hover{ transform:translateY(-5px); border-color:rgba(231,201,112,.42)!important; box-shadow:0 24px 58px rgba(0,0,0,.3),0 0 22px rgba(135,78,174,.08); } .v10-knowledge,.v10-why,.v10-masters,.v7-sanctum-preview,.trust,.deck-codex{ content-visibility:auto; contain-intrinsic-size:850px; } /* Unified account activity stream. */ .v7-activity-list{display:grid;gap:12px;margin-top:18px} .v7-activity-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid rgba(224,190,98,.18);border-radius:15px;background:linear-gradient(145deg,rgba(44,23,62,.46),rgba(10,5,16,.82));transition:.25s} .v7-activity-item:hover{border-color:rgba(224,190,98,.42);transform:translateX(3px)} .v7-activity-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(224,190,98,.28);border-radius:50%;color:var(--v112-gold);background:rgba(88,48,118,.32);font-size:19px} .v7-activity-copy{min-width:0}.v7-activity-copy b{display:block;color:#ead48b;font-size:16px}.v7-activity-copy p{margin:4px 0 0;color:var(--v112-muted);font-size:14px;line-height:1.5;overflow-wrap:anywhere}.v7-activity-time{color:#8f8395;font-size:12px;white-space:nowrap} .v7-activity-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.v7-activity-filter button{min-height:38px;padding:8px 14px;border:1px solid rgba(210,177,87,.24);border-radius:999px;background:rgba(44,25,59,.52);color:#aaa0ae;cursor:pointer}.v7-activity-filter button.on{border-color:#d9b85c;color:#efd47d;background:rgba(100,60,130,.58)} /* Improve member center density and keyboard visibility. */ .v7-side{scrollbar-width:thin;scrollbar-color:#72518d #100817} .v7-nav{min-height:48px!important;font-size:15px!important} .v7-nav:focus-visible,.v9-tier-card:focus-visible,.v7-preview-card:focus-visible{outline:2px solid #efd47d;outline-offset:3px} @media(max-width:980px){ .hero-deck{opacity:.92!important} .service-copy-full h1{white-space:normal} } @media(max-width:620px){ .v9-tier-card h3{min-height:48px} html[lang="zh-CN"] .v9-tier-card h3,html[lang="zh-TW"] .v9-tier-card h3{font-size:27px!important} .v7-activity-item{grid-template-columns:42px 1fr}.v7-activity-time{grid-column:2;margin-top:-6px} } @media(prefers-reduced-motion:reduce){ .v7-preview-card,.v10-advantage-card,.v10-master-grid article,.v7-activity-item{transition:none!important} } /* ===== END v11_2.css ===== */ /* ===== BEGIN v11_3.css ===== */ /* ARCANA experience system: responsive app shell, personalized continuity hub, keyboard navigation, adaptive motion and operationally safe loading states. */ :root{ --v113-gold:#e8c96f; --v113-gold-soft:#bfa45d; --v113-ink:#09060f; --v113-panel:rgba(18,10,28,.86); --v113-panel-strong:rgba(12,7,20,.96); --v113-border:rgba(232,201,111,.22); --v113-border-strong:rgba(232,201,111,.52); --v113-text:#f4edf6; --v113-muted:#b9aebe; --v113-danger:#ef8f98; --v113-success:#9ad5b2; --v113-radius-sm:12px; --v113-radius:18px; --v113-radius-lg:28px; --v113-shadow:0 24px 70px rgba(0,0,0,.36); --v113-ease:cubic-bezier(.2,.75,.2,1); --v113-content:min(1320px,calc(100vw - 48px)); } html{scroll-padding-top:96px} body{min-width:320px} .skip-link{position:fixed;left:16px;top:10px;z-index:10000;transform:translateY(-150%);padding:10px 16px;border:1px solid var(--v113-border-strong);border-radius:999px;background:#12091d;color:var(--v113-gold);transition:transform .18s ease} .skip-link:focus{transform:translateY(0)} .v113-site-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:9998;pointer-events:none;background:rgba(255,255,255,.025)} .v113-site-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#8e5fb1,#f0d477,#fff0a6);box-shadow:0 0 16px rgba(236,205,115,.7);transition:width .08s linear} /* A platform-like shell: stable navigation, clear hierarchy, no visual jump. */ .topbar{max-width:none!important;padding-inline:max(18px,calc((100vw - 1480px)/2))!important;border-bottom:1px solid rgba(225,190,98,.1);box-shadow:0 10px 36px rgba(0,0,0,.16)} .nav-links{gap:4px!important} .nav-link{position:relative;min-height:44px;padding:0 13px!important;border-radius:12px!important} .nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;transform:scaleX(0);background:var(--v113-gold);transition:transform .22s var(--v113-ease)} .nav-link.active::after,.nav-link:hover::after{transform:scaleX(1)} .nav-tools{gap:8px!important} .v113-tool-btn{position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(224,190,98,.18);border-radius:50%;background:rgba(28,15,43,.72);color:#d7c5da;cursor:pointer;transition:.22s var(--v113-ease)} .v113-tool-btn:hover,.v113-tool-btn:focus-visible{border-color:var(--v113-border-strong);color:var(--v113-gold);transform:translateY(-2px)} .v113-tool-btn b{position:absolute;right:-3px;top:-3px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#9f3650;color:white;font:700 10px/1 system-ui;box-shadow:0 0 0 2px #09060f} /* Wider, more disciplined editorial grid inspired by high-traffic content sites. */ .container{width:var(--v113-content)!important;max-width:none!important} .hero{min-height:clamp(650px,82vh,900px);grid-template-columns:minmax(0,1.16fr) minmax(310px,.84fr)!important;gap:clamp(40px,6vw,96px)!important;align-items:center} .hero-copy{max-width:830px} .hero-copy>p{max-width:740px;font-size:clamp(17px,1.25vw,20px)!important;line-height:1.9!important} .v9-service-gateway{gap:clamp(14px,1.7vw,24px)!important;margin-top:34px!important} .v9-tier-card{min-height:338px;padding:30px 27px 26px!important;border-radius:22px!important;overflow:hidden!important;box-shadow:0 18px 58px rgba(0,0,0,.28);transition:transform .32s var(--v113-ease),border-color .32s ease,box-shadow .32s ease!important} .v9-tier-card::after{content:"";position:absolute;inset:auto -20% -55% -20%;height:70%;background:radial-gradient(ellipse,rgba(221,185,94,.14),transparent 66%);opacity:0;transition:opacity .32s ease;pointer-events:none} .v9-tier-card:hover{transform:translateY(-9px)!important;box-shadow:0 30px 78px rgba(0,0,0,.42),0 0 30px rgba(137,79,177,.1)!important} .v9-tier-card:hover::after{opacity:1} .v9-tier-card h3{min-height:64px!important;justify-content:flex-start;text-align:left} .v9-tier-card strong{margin-top:auto!important} .v9-tier-card p{font-size:16px!important;line-height:1.65!important} .v9-tier-card>i{font-size:13px!important;line-height:1.4!important} /* Personalized continuity hub: server-authoritative data rendered as a calm feed. */ .v113-dashboard{padding:10px 0 86px;content-visibility:auto;contain-intrinsic-size:560px} .v113-dashboard-shell{width:var(--v113-content);margin:auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);gap:22px;align-items:stretch} .v113-dashboard-main,.v113-dashboard-side{border:1px solid var(--v113-border);border-radius:var(--v113-radius-lg);background:linear-gradient(145deg,rgba(34,18,48,.78),rgba(8,5,14,.93));box-shadow:var(--v113-shadow);overflow:hidden} .v113-dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:28px 30px 22px;border-bottom:1px solid rgba(230,197,103,.12)} .v113-dashboard-head small,.v113-dashboard-side small{display:block;color:#9d8fa2;letter-spacing:.14em;font:600 11px/1.3 Cinzel,serif;text-transform:uppercase} .v113-dashboard-head h2{margin:7px 0 0;color:#f0d47d;font-size:clamp(24px,2.5vw,38px);line-height:1.16} .v113-account-chip{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid rgba(228,195,101,.22);border-radius:999px;background:rgba(94,54,119,.22);color:#d8c7dd;white-space:nowrap} .v113-account-chip i{width:8px;height:8px;border-radius:50%;background:var(--v113-success);box-shadow:0 0 14px var(--v113-success)} .v113-dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(229,193,97,.11)} .v113-stat{min-height:134px;padding:22px;background:rgba(13,8,21,.88)} .v113-stat span{display:block;color:#9e91a4;font-size:13px} .v113-stat b{display:block;margin:10px 0 5px;color:#f5e2a0;font:600 clamp(25px,3vw,39px)/1 Cormorant Garamond,serif} .v113-stat em{color:#817587;font-size:12px;font-style:normal} .v113-recommendation{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:27px 30px} .v113-recommendation h3{margin:4px 0 7px;color:#ede2ef;font-size:22px} .v113-recommendation p{margin:0;color:var(--v113-muted);line-height:1.65} .v113-recommendation button{min-width:155px} .v113-dashboard-side{padding:28px} .v113-dashboard-side h3{margin:7px 0 18px;color:#e9d17d;font-size:24px} .v113-achievement-progress{height:8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)} .v113-achievement-progress i{display:block;height:100%;background:linear-gradient(90deg,#76508f,#e2be62);box-shadow:0 0 14px rgba(226,190,98,.38)} .v113-achievement-meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#94889a;font-size:12px} .v113-security-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:19px;border-top:1px solid rgba(229,193,97,.12);color:#ada0b2;font-size:13px} .v113-security-line b{color:#d8c47e} .v113-dashboard-skeleton{min-height:350px;background:linear-gradient(100deg,rgba(255,255,255,.02) 20%,rgba(234,202,112,.08) 38%,rgba(255,255,255,.02) 56%);background-size:250% 100%;animation:v113Skeleton 1.8s linear infinite} @keyframes v113Skeleton{to{background-position:-250% 0}} /* Dense information blocks use consistent card geometry and readable measure. */ .v10-prose-card{max-width:860px!important;padding:clamp(28px,4vw,52px)!important;border-radius:var(--v113-radius-lg)!important} .v10-prose-card p,.v10-advantage-card p{max-width:74ch} .v10-advantage-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px!important} .v10-advantage-card{padding:30px!important;border-radius:20px!important} .v10-master-grid{gap:18px!important} .v10-master-grid article{border-radius:20px!important;overflow:hidden} .section{position:relative} .section::before{content:"";position:absolute;left:50%;top:0;width:min(86vw,1180px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(228,195,101,.15),transparent)} /* Command palette and notifications. */ .v113-command,.v113-notifications{position:fixed;z-index:10020;opacity:0;pointer-events:none;transition:opacity .2s ease} .v113-command.open,.v113-notifications.open{opacity:1;pointer-events:auto} .v113-command{inset:0;display:grid;place-items:start center;padding-top:min(16vh,140px);background:rgba(4,2,8,.72);backdrop-filter:blur(18px)} .v113-command-card{width:min(680px,calc(100vw - 28px));max-height:min(70vh,680px);overflow:hidden;border:1px solid var(--v113-border-strong);border-radius:22px;background:var(--v113-panel-strong);box-shadow:0 38px 100px rgba(0,0,0,.58)} .v113-command-search{display:flex;align-items:center;gap:13px;padding:19px 21px;border-bottom:1px solid rgba(230,196,102,.13)} .v113-command-search input{width:100%;border:0!important;outline:0;background:transparent!important;color:var(--v113-text);font-size:17px} .v113-command-search kbd{padding:4px 7px;border:1px solid rgba(255,255,255,.13);border-radius:6px;color:#918594;font:11px/1 system-ui} .v113-command-list{max-height:520px;overflow:auto;padding:9px} .v113-command-item{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 13px;border:0;border-radius:13px;background:transparent;color:#e6dfe8;text-align:left;cursor:pointer} .v113-command-item:hover,.v113-command-item.active{background:linear-gradient(90deg,rgba(111,65,137,.36),rgba(64,36,82,.18));color:#f1d57c} .v113-command-item i{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(230,196,102,.18);border-radius:10px;font-style:normal} .v113-command-item small{color:#887d8e} .v113-notifications{top:74px;right:max(18px,calc((100vw - 1480px)/2));width:min(420px,calc(100vw - 28px));max-height:min(76vh,660px);overflow:auto;border:1px solid var(--v113-border);border-radius:18px;background:var(--v113-panel-strong);box-shadow:0 30px 90px rgba(0,0,0,.52)} .v113-notification-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:18px 19px;border-bottom:1px solid rgba(228,195,101,.12);background:rgba(12,7,20,.97);z-index:2} .v113-notification-head h3{margin:0;color:#ecd27d;font-size:19px} .v113-notification-list{padding:8px} .v113-notification-item{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:13px;border-radius:13px;color:#d8cfdc} .v113-notification-item:hover{background:rgba(83,46,105,.25)} .v113-notification-item i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(116,70,143,.28);color:#e9c96d;font-style:normal} .v113-notification-item p{margin:0;font-size:14px;line-height:1.5}.v113-notification-item time{display:block;margin-top:4px;color:#827789;font-size:11px} .v113-empty{padding:32px;text-align:center;color:#8f8395} /* Mobile-first navigation inspired by mature social apps. */ .v113-mobile-nav{display:none;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:9990;height:64px;padding:6px;border:1px solid rgba(231,199,105,.22);border-radius:20px;background:rgba(10,6,16,.91);box-shadow:0 18px 54px rgba(0,0,0,.55);backdrop-filter:blur(22px)} .v113-mobile-nav button{min-width:0;flex:1;display:grid;place-items:center;gap:2px;border:0;border-radius:14px;background:transparent;color:#9d91a2;font-size:10px;cursor:pointer} .v113-mobile-nav button i{font-style:normal;font-size:20px;line-height:1} .v113-mobile-nav button.active{color:#edcf72;background:rgba(111,65,137,.26)} .v113-backtop{position:fixed;right:20px;bottom:24px;z-index:9950;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--v113-border);border-radius:50%;background:rgba(13,8,21,.86);color:#d6bd6e;opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s var(--v113-ease);cursor:pointer} .v113-backtop.visible{opacity:1;transform:none;pointer-events:auto} .v113-network{position:fixed;left:50%;top:78px;z-index:9995;transform:translate(-50%,-140%);padding:9px 15px;border:1px solid rgba(239,143,152,.36);border-radius:999px;background:rgba(62,17,29,.94);color:#ffd7dc;font-size:13px;transition:transform .25s var(--v113-ease)} .v113-network.visible{transform:translate(-50%,0)} /* Motion/performance controls. */ .performance-lite #starCanvas,.performance-lite .splash-dust,.performance-lite .ambient-veil{display:none!important} .performance-lite .hero-deck,.performance-lite .v9-tier-card,.performance-lite .service-slide{animation:none!important;transition-duration:.01ms!important} .performance-lite img[data-v113-gif]{filter:brightness(1.2) saturate(1.08)} img[data-v113-gif]{aspect-ratio:2/3;object-fit:cover} .modal-wrap[aria-hidden="false"],.modal-wrap.open{overscroll-behavior:contain} body.v113-modal-open{overflow:hidden} @media(max-width:1180px){ .nav-links .v10-nav-extra{display:none!important} .v113-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .v113-dashboard-shell{grid-template-columns:1fr} .v113-dashboard-side{display:grid;grid-template-columns:1fr 1fr;gap:24px}.v113-security-line{margin:0;padding:0 0 0 24px;border-top:0;border-left:1px solid rgba(229,193,97,.12)} } @media(max-width:900px){ :root{--v113-content:min(100% - 28px,760px)} .hero{grid-template-columns:1fr!important;min-height:auto;padding-top:96px!important} .hero-deck{order:-1;min-height:330px!important;max-width:470px;margin:auto} .v9-service-gateway{grid-template-columns:1fr!important} .v9-tier-card{min-height:270px} .v10-advantage-grid{grid-template-columns:1fr} .nav-links{display:none!important} .v113-mobile-nav{display:flex} .commercial-footer{padding-bottom:100px!important} .v113-backtop{bottom:92px} } @media(max-width:620px){ :root{--v113-content:calc(100vw - 22px)} .topbar{padding-inline:12px!important} .brand span:last-child{font-size:20px!important} .v8-custom-select[data-select-for="regionSelect"],#musicBtn,.ghost-btn#loginBtn{display:none!important} .v113-tool-btn{width:39px;height:39px} .hero{padding-top:76px!important;gap:22px!important} .hero-copy{text-align:left!important} .display-title{font-size:clamp(39px,12vw,58px)!important} .v9-tier-card{padding:25px 22px!important} .v9-tier-card h3{font-size:27px!important;min-height:50px!important} .v113-dashboard{padding-bottom:56px}.v113-dashboard-head{padding:22px;display:block}.v113-account-chip{margin-top:14px;width:max-content}.v113-dashboard-grid{grid-template-columns:1fr 1fr}.v113-stat{min-height:112px;padding:17px}.v113-recommendation{grid-template-columns:1fr;padding:22px}.v113-dashboard-side{display:block;padding:22px}.v113-security-line{margin-top:20px;padding:18px 0 0;border-left:0;border-top:1px solid rgba(229,193,97,.12)} .v10-prose-card,.v10-advantage-card{padding:24px!important} .v113-notifications{top:66px;right:10px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ===== END v11_3.css ===== */ /* ===== BEGIN v11_4.css ===== */ /* ARCANA V11.4 — adaptive experience layer. Existing brand copy is untouched. */ :root{ --v114-font-scale:1; --v114-gold:#e4c768; --v114-gold-soft:#b99d53; --v114-panel:rgba(15,9,23,.90); --v114-panel-2:rgba(28,16,40,.82); --v114-line:rgba(228,199,104,.18); --v114-text:#eee7f1; --v114-muted:#a79aaa; --v114-ease:cubic-bezier(.2,.8,.2,1); } html{font-size:calc(16px * var(--v114-font-scale))} body{background-attachment:fixed} body.v114-font-compact{--v114-font-scale:.94} body.v114-font-large{--v114-font-scale:1.1} body.v114-high-contrast{--v114-line:rgba(255,222,121,.48);--v114-text:#fff;--v114-muted:#d0c7d4} body.v114-high-contrast .muted,body.v114-high-contrast small{color:#d0c7d4!important} body.v114-reduced-motion *,body.v114-reduced-motion *::before,body.v114-reduced-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} body.v114-data-saver #starCanvas,body.v114-data-saver .ambient-veil,body.v114-data-saver .splash-dust{display:none!important} /* Stronger information hierarchy and stable service geometry. */ .v9-service-gateway{align-items:stretch!important;gap:clamp(16px,2vw,26px)!important} .v9-tier-card{display:grid!important;grid-template-rows:auto auto minmax(58px,auto) minmax(56px,1fr) auto auto!important;align-content:start!important;overflow:visible!important;padding:clamp(26px,2.8vw,38px)!important;border-radius:24px!important} .v9-tier-card h3{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;min-height:58px!important;margin:9px 0 7px!important;padding-inline:4px!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;line-height:1.12!important;letter-spacing:.02em!important} html[lang^="zh"] .v9-tier-card h3{font-size:clamp(24px,2.4vw,34px)!important;letter-spacing:.04em!important} .v9-tier-card strong{justify-self:center!important;max-width:100%!important;white-space:nowrap!important;overflow:visible!important} .v9-tier-card strong span{font-size:clamp(46px,5vw,72px)!important;line-height:1!important} .v9-tier-card p{min-height:3.4em!important} .v9-tier-card i{justify-self:center!important;text-align:center!important} .v9-recommend{top:16px!important;right:16px!important;left:auto!important;max-width:calc(100% - 32px)!important} .v9-tier-card small{padding-top:18px!important} .tier-three .v9-witch-orb{right:10px!important;opacity:.35!important;pointer-events:none!important} .hero-deck{filter:brightness(1.35) saturate(1.12)!important} .hero-card{opacity:.98!important;filter:brightness(1.45) saturate(1.16) contrast(1.03)!important} .card-back-pattern{opacity:1!important} /* New account pulse strip. */ .v114-account-pulse{width:min(1480px,calc(100% - 40px));margin:0 auto 58px;border:1px solid var(--v114-line);border-radius:26px;background:linear-gradient(145deg,rgba(41,23,57,.76),rgba(9,5,14,.94));box-shadow:0 30px 90px rgba(0,0,0,.34);overflow:hidden} .v114-pulse-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:23px 26px;border-bottom:1px solid var(--v114-line)} .v114-pulse-head h2{margin:0;color:#efd37b;font-size:clamp(22px,2.2vw,34px)} .v114-pulse-head p{margin:5px 0 0;color:var(--v114-muted)} .v114-pulse-badge{padding:8px 12px;border:1px solid var(--v114-line);border-radius:999px;color:#d9c477;background:rgba(90,53,112,.22);white-space:nowrap} .v114-pulse-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--v114-line)} .v114-pulse-card{min-height:132px;padding:22px;background:rgba(13,8,20,.94)} .v114-pulse-card span{display:block;color:var(--v114-muted);font-size:.82rem} .v114-pulse-card b{display:block;margin:9px 0 7px;color:#f4df98;font:600 clamp(25px,2.7vw,39px)/1 Cormorant Garamond,serif} .v114-pulse-card small{color:#8e8293} .v114-pulse-actions{display:flex;flex-wrap:wrap;gap:10px;padding:20px 24px} .v114-pulse-actions button{min-height:44px;padding:10px 16px;border:1px solid var(--v114-line);border-radius:12px;background:rgba(76,43,97,.24);color:#e4dce7;cursor:pointer} .v114-pulse-actions button:hover{color:#f0d579;border-color:rgba(228,199,104,.46);transform:translateY(-1px)} /* Preference center uses progressive disclosure instead of crowding navigation. */ .v114-settings{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:20px;background:rgba(3,1,6,.74);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .2s ease} .v114-settings.open{opacity:1;pointer-events:auto} .v114-settings-card{width:min(620px,100%);max-height:min(84vh,760px);overflow:auto;border:1px solid rgba(228,199,104,.34);border-radius:24px;background:#0e0816;box-shadow:0 42px 120px rgba(0,0,0,.66)} .v114-settings-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:21px 23px;border-bottom:1px solid var(--v114-line);background:rgba(14,8,22,.97)} .v114-settings-head h2{margin:0;color:#ebce72;font-size:24px} .v114-settings-head button{width:42px;height:42px;border:1px solid var(--v114-line);border-radius:50%;background:transparent;color:#e6ce78;font-size:23px;cursor:pointer} .v114-setting-group{padding:22px 24px;border-bottom:1px solid rgba(228,199,104,.1)} .v114-setting-group h3{margin:0 0 8px;color:#e7d5ea;font-size:18px}.v114-setting-group p{margin:0 0 15px;color:var(--v114-muted);line-height:1.6} .v114-segment{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .v114-segment button,.v114-toggle{min-height:44px;border:1px solid var(--v114-line);border-radius:11px;background:rgba(58,32,75,.28);color:#bfb3c3;cursor:pointer} .v114-segment button.active,.v114-toggle.active{border-color:rgba(231,202,112,.55);background:linear-gradient(145deg,rgba(121,75,145,.42),rgba(72,39,91,.30));color:#f2d87d} .v114-settings-save{display:flex;justify-content:flex-end;padding:20px 24px} .v114-live{position:fixed;left:-9999px;width:1px;height:1px;overflow:hidden} .v114-session-warning{position:fixed;right:18px;bottom:90px;z-index:10030;width:min(380px,calc(100vw - 36px));padding:18px;border:1px solid rgba(232,192,91,.35);border-radius:16px;background:rgba(17,10,26,.96);box-shadow:0 24px 70px rgba(0,0,0,.5);display:none} .v114-session-warning.show{display:block}.v114-session-warning b{color:#edce70}.v114-session-warning p{color:#b4a8b8}.v114-session-warning div{display:flex;gap:9px;justify-content:flex-end} /* Better dense footer and touch targets without changing copy. */ .commercial-footer button,.commercial-footer a{min-height:38px!important;font-size:clamp(15px,1.1vw,17px)!important;line-height:1.45!important} .commercial-footer h4{font-size:clamp(17px,1.3vw,20px)!important} .footer-disclaimer,.filing-placeholder{font-size:14px!important;line-height:1.7!important} button,input,select,textarea{font-size:1rem} :focus-visible{outline:2px solid #f0d372!important;outline-offset:3px!important} @media(max-width:1050px){.v114-pulse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.v114-account-pulse{width:calc(100% - 22px);margin-bottom:34px}.v114-pulse-head{display:block}.v114-pulse-badge{display:inline-flex;margin-top:12px}.v114-pulse-grid{grid-template-columns:1fr 1fr}.v114-pulse-card{min-height:112px;padding:17px}.v114-segment{grid-template-columns:1fr}.v9-tier-card h3{min-height:50px!important}.v9-recommend{position:static!important;justify-self:center!important;margin-bottom:4px!important}.v9-tier-card small{padding-top:4px!important}} @media(max-width:430px){html[lang^="zh"] .v9-tier-card h3{font-size:25px!important}.v114-pulse-grid{grid-template-columns:1fr}.v114-pulse-card{min-height:auto}.nav-tools .v114-settings-open{display:none}} /* ===== END v11_4.css ===== */ /* ===== BEGIN v11_5.css ===== */ /* ARCANA V11.5 — layout integrity, mobile polish and local-card workflow. Brand copy is intentionally untouched. This layer only changes presentation. */ :root{ --v115-page-pad:clamp(16px,3vw,44px); --v115-reading:72ch; --v115-radius:clamp(16px,2vw,26px); --v115-safe-bottom:max(18px,env(safe-area-inset-bottom)); --v115-ui-line:rgba(232,202,111,.22); --v115-panel:linear-gradient(150deg,rgba(39,22,54,.82),rgba(9,5,15,.94)); --v115-shadow:0 28px 78px rgba(0,0,0,.34); } html{overflow-x:clip;scroll-padding-top:92px} body{min-width:320px;overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} .app-shell,.view,.container,.hero,.hero-copy,.nav-tools,.nav-links,.service-copy-full,.v9-tier-card,.v10-prose-card,.v10-advantage-card,.v10-master-grid>article,.v7-preview-card,.v9-footer section{min-width:0} img,svg,canvas,video{max-width:100%} button,input,textarea,select{max-width:100%} /* Avoid single-character orphan lines while preserving every character of locked copy. */ :where(p,li,blockquote,.muted,.v9-tier-card>i,.v9-tier-card small,.service-position,.footer-disclaimer,.filing-placeholder){ text-wrap:pretty; orphans:2; widows:2; } :where(h1,h2,h3,h4,.display-title,.eyebrow){text-wrap:balance} html[lang^="zh"] :where(p,li,blockquote,h1,h2,h3,h4){line-break:strict;word-break:normal;overflow-wrap:break-word} .v115-no-break-tail{white-space:nowrap} /* Long pages render progressively without changing layout geometry. */ #view-home>.section,.v7-sanctum-preview,.trust,.deck-codex{content-visibility:auto;contain-intrinsic-size:720px} /* Navigation: clean desktop alignment and safe compact mobile behaviour. */ .topbar{isolation:isolate;min-height:76px;gap:clamp(8px,1.4vw,20px);padding-inline:var(--v115-page-pad)} .brand{flex:0 0 auto;white-space:nowrap} .nav-links{min-width:0;flex:1;justify-content:center;gap:clamp(2px,.5vw,8px)} .nav-link{white-space:nowrap;min-height:42px;padding-inline:clamp(8px,1vw,16px)} .nav-tools{flex:0 0 auto;min-width:0;gap:6px} .v8-custom-select{min-width:0} .v8-select-trigger{min-height:42px;max-width:176px} .v8-select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v7-avatar-trigger{max-width:170px} #v7AvatarName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:92px} /* Hero geometry. The copy and deck never compete for the same pixels. */ .hero{grid-template-columns:minmax(0,1.16fr) minmax(310px,.84fr);gap:clamp(28px,5vw,78px);align-items:center} .hero-copy{position:relative;z-index:3} .hero-copy>p{max-width:min(var(--v115-reading),100%);font-size:clamp(16px,1.3vw,19px);line-height:1.9} .display-title{max-width:100%} .hero-deck{min-width:0;overflow:visible;contain:layout paint style} .hero-card{will-change:transform;transform-origin:center} /* Service cards use a shared internal grid so titles, descriptions and prices align. */ .v9-service-gateway{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:clamp(14px,1.8vw,24px)} .v9-tier-card{ container-type:inline-size; isolation:isolate; width:100%; min-height:380px!important; display:grid!important; grid-template-rows:34px 66px minmax(86px,1fr) 78px 32px!important; align-items:start!important; gap:8px!important; padding:clamp(26px,2.4vw,36px)!important; overflow:hidden!important; } .v9-tier-card>*{min-width:0;max-width:100%} .v9-tier-card .v9-tier-roman{z-index:0;pointer-events:none} .v9-tier-card small{ align-self:end; padding:0!important; margin:0!important; line-height:1.35!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .v9-tier-card h3{ align-self:center!important; justify-self:stretch!important; display:block!important; min-height:0!important; margin:0!important; padding:0 2px!important; text-align:center!important; white-space:nowrap!important; overflow:visible!important; line-height:1.08!important; max-width:100%!important; } html[lang^="zh"] .v9-tier-card h3{font-size:clamp(22px,2.15vw,32px)!important;letter-spacing:.035em!important} .v9-tier-card p{margin:0!important;min-height:0!important;align-self:start;font-size:clamp(15px,1.15vw,17px)!important;line-height:1.72!important} .v9-tier-card strong{align-self:end!important;justify-self:start!important;margin:0!important;min-height:70px;display:flex!important;align-items:flex-end!important;white-space:nowrap!important} .v9-tier-card strong span{font-size:clamp(46px,4.5vw,68px)!important;line-height:.92!important} .v9-tier-card>i{align-self:end!important;justify-self:start!important;margin:0!important;text-align:left!important;white-space:normal!important;line-height:1.45!important} .v9-recommend{ position:absolute!important; inset:14px 14px auto auto!important; max-width:calc(100% - 28px)!important; z-index:5!important; margin:0!important; white-space:nowrap!important; } .v9-tier-card.recommended small{padding-right:92px!important} .tier-three .v9-witch-orb{right:12px!important;bottom:18px!important;max-width:52px;max-height:52px;opacity:.28!important} /* Details: readable measure and zero decoration/text overlap. */ .service-atlas,.service-track,.service-slide{min-width:0} .service-slide{overflow:hidden} .service-copy-full{width:min(900px,calc(100% - 2 * var(--v115-page-pad)));max-width:100%;margin-inline:auto;padding-inline:0} .service-copy-full h1{max-width:100%;line-height:1.08;text-wrap:balance} .service-copy-full p{max-width:72ch;margin-inline:auto;line-height:1.9;text-wrap:pretty} .service-position{max-width:72ch;margin-inline:auto} .service-ornament,.service-orbit,.witch-scene{pointer-events:none;z-index:0} .service-copy-full{position:relative;z-index:2} .v9-service-price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px 12px;max-width:100%} .v9-service-price small{flex-basis:100%;text-align:center} /* Brand/content sections share rhythm and readable line lengths. */ .section{padding-block:clamp(64px,8vw,118px)} .v10-split{grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:clamp(30px,6vw,90px);align-items:start} .v10-section-heading{min-width:0} .v10-section-heading h2{line-height:1.16} .v10-prose-card{padding:clamp(24px,4vw,52px);border-radius:var(--v115-radius);box-shadow:var(--v115-shadow)} .v10-prose-card p{max-width:var(--v115-reading);margin-inline:auto;line-height:2} .v10-advantage-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);align-items:stretch} .v10-advantage-card{display:grid;grid-template-rows:auto auto 1fr;align-content:start;padding:clamp(24px,2.8vw,38px)} .v10-advantage-card h3{min-height:1.4em;margin-block:12px 18px} .v10-advantage-card p{margin:0;line-height:1.9} .v10-master-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.7vw,24px)} .v10-master-grid>article{display:flex;flex-direction:column;height:100%} .v10-master-grid>article>span{margin-top:auto} .v7-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch} .v7-preview-card{height:100%;display:flex!important;flex-direction:column!important;align-items:flex-start!important} .v7-preview-card em{margin-top:auto} .trust-grid{grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px)} /* Footer is intentionally spacious; every label gets its own line box. */ .v9-footer{padding-inline:var(--v115-page-pad)!important;padding-bottom:calc(46px + var(--v115-safe-bottom))!important} .v9-footer-grid{grid-template-columns:minmax(240px,1.35fr) repeat(3,minmax(150px,1fr));gap:clamp(26px,4vw,64px);align-items:start} .v9-footer section{min-width:0;gap:10px} .v9-footer h4{margin:0 0 8px;line-height:1.35;white-space:normal} .v9-footer button,.v9-footer a{display:inline-flex;align-items:center;width:fit-content;max-width:100%;min-height:40px;line-height:1.45!important;white-space:normal;text-wrap:pretty} .v9-footer p{max-width:34ch} .footer-disclaimer,.filing-placeholder{max-width:1000px;margin-inline:auto;padding-inline:8px;text-align:center;letter-spacing:.03em!important} /* Forms and modals never use brittle fixed widths. */ .modal{width:min(640px,calc(100vw - 28px));max-height:min(88dvh,840px);overflow:auto;padding:clamp(22px,4vw,38px)} .v11-register-card{width:min(760px,calc(100vw - 28px))} .field,.inline-field,.v11-password,.v11-birth,.v11-interest-grid{min-width:0} .inline-field{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px} .inline-field input{min-width:0} .v11-birth{grid-template-columns:repeat(3,minmax(0,1fr))} .v11-interest-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .modal-actions{flex-wrap:wrap} .modal-actions>*{min-width:min(170px,100%);flex:1} .payment-modal label{line-height:1.6} /* Tables and generated pages remain usable on narrow screens. */ .v10-page,.v9-page,.profile-page,.history-page,.detail-page,.result-page{min-width:0} .ops-table-wrap,.v10-table-wrap,.history-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch} :where(.panel,.v10-content-card,.overview-card,.deep-section,.witch-section){min-width:0;overflow-wrap:break-word} /* Stable card artwork sizing and brighter local assets. */ .stained-card-asset,.v10-academy-card img,.v10-card-detail img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(1.55) saturate(1.16) contrast(1.03);opacity:1} .card-art-wrap{overflow:hidden} .card-back-pattern{background-position:center!important;background-repeat:no-repeat!important} /* Mobile and tablet. */ @media(max-width:1180px){ .topbar{flex-wrap:wrap} .nav-links{order:3;flex-basis:100%;overflow-x:auto;justify-content:flex-start;padding-bottom:3px;scrollbar-width:none} .nav-links::-webkit-scrollbar{display:none} .hero{grid-template-columns:minmax(0,1fr) minmax(260px,.58fr);gap:28px} .v10-master-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .v9-footer-grid{grid-template-columns:1.25fr repeat(2,minmax(150px,1fr))} .v9-footer-grid section:last-child{grid-column:2/4} } @media(max-width:980px){ .hero{grid-template-columns:1fr;text-align:center} .hero-copy>p{margin-inline:auto} .hero-deck{display:grid!important;height:350px;max-width:520px;width:100%;margin-inline:auto;opacity:.78} .v9-service-gateway{grid-template-columns:1fr} .v9-tier-card{min-height:310px!important;grid-template-rows:32px 58px minmax(76px,auto) 74px 30px!important} .v9-tier-card h3{font-size:clamp(25px,5vw,34px)!important} .v9-tier-card p{max-width:58ch} .v10-split,.trust-grid{grid-template-columns:1fr} .v10-advantage-grid{grid-template-columns:1fr} .v10-advantage-card h3{min-height:0} .v7-preview-grid{grid-template-columns:1fr 1fr!important} .v9-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .v9-footer-grid section:last-child{grid-column:auto} } @media(max-width:760px){ html{scroll-padding-top:70px} body{padding-bottom:calc(72px + var(--v115-safe-bottom))} .topbar{min-height:64px;padding:9px 12px;flex-wrap:nowrap} .brand{font-size:17px} .nav-links{display:none} .nav-tools{margin-left:auto;max-width:calc(100% - 116px);overflow:visible} .v8-custom-select{max-width:48px} .v8-select-trigger{width:42px;min-width:42px;padding:7px!important;justify-content:center} .v8-select-trigger i,.v8-select-label{display:none!important} .v113-tool-btn,#musicBtn,.v7-coin-pill,.v7-avatar-trigger{min-width:42px;min-height:42px} #v113CommandOpen,#v113NotificationOpen{display:none} .v7-coin-pill{padding-inline:8px} .v7-avatar-trigger #v7AvatarName{display:none} .container{width:min(100% - 24px,1160px)} .hero{padding-top:34px;gap:16px} .display-title{font-size:clamp(38px,11vw,64px);line-height:1.1;letter-spacing:.025em} .hero-copy>p{font-size:17px;line-height:1.85} .hero-deck{height:290px;max-width:390px} .hero-card{width:126px!important;height:210px!important} .v9-service-gateway{margin-top:26px!important;gap:14px!important} .v9-tier-card{min-height:292px!important;padding:24px 21px!important;border-radius:20px!important;grid-template-rows:28px 52px minmax(70px,auto) 66px 28px!important} .v9-tier-card h3,html[lang^="zh"] .v9-tier-card h3{font-size:clamp(24px,8vw,31px)!important} .v9-tier-card small{font-size:10px!important} .v9-tier-card p{font-size:16px!important;line-height:1.65!important} .v9-tier-card strong span{font-size:52px!important} .v9-recommend{position:absolute!important;inset:12px 12px auto auto!important;font-size:9px!important;padding:5px 8px!important} .v9-tier-card.recommended small{padding-right:84px!important} .section{padding-block:64px} .v10-prose-card{padding:23px 19px} .v10-prose-card p,.v10-advantage-card p,.service-copy-full p{font-size:16.5px!important;line-height:1.9!important} .v10-master-grid{grid-template-columns:1fr} .v7-preview-grid{grid-template-columns:1fr!important} .v7-preview-head{gap:20px} .v9-footer-grid{grid-template-columns:1fr 1fr;gap:30px 18px} .v9-footer-grid section:first-child{grid-column:1/-1} .v9-footer button,.v9-footer a{font-size:16px!important} .service-copy-full{width:calc(100% - 28px)} .service-copy-full h1{font-size:clamp(38px,11vw,62px)} .service-copy-full p{max-width:100%} .service-arrow{width:44px;height:44px} .modal-wrap{align-items:flex-end;padding:0} .modal{width:100%;max-width:none;max-height:92dvh;border-radius:22px 22px 0 0;padding:26px 18px calc(24px + var(--v115-safe-bottom))} .v11-register-card{width:100%} .inline-field{grid-template-columns:auto minmax(0,1fr)} .inline-field>button{grid-column:1/-1;width:100%} .v11-birth{grid-template-columns:1fr 1fr 1fr} .v11-interest-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cookie-banner{left:10px!important;right:10px!important;bottom:calc(78px + var(--v115-safe-bottom))!important;width:auto!important} .v114-session-warning{bottom:calc(84px + var(--v115-safe-bottom))} .v113-mobile-nav{padding-bottom:var(--v115-safe-bottom)} } @media(max-width:480px){ .nav-tools{gap:3px;max-width:calc(100% - 102px)} #musicBtn,.v114-settings-open{display:none!important} .v7-coin-pill b{font-size:13px} .hero-deck{height:245px} .hero-card{width:106px!important;height:177px!important} .v9-tier-card{padding:22px 18px!important} .v9-tier-card.recommended small{padding-right:76px!important} .v9-footer-grid{grid-template-columns:1fr} .v9-footer-grid section:first-child{grid-column:auto} .v9-footer h4{font-size:18px!important} .v9-footer button,.v9-footer a{min-height:42px} .v114-pulse-grid{grid-template-columns:1fr!important} .v114-pulse-actions>*{flex:1 1 calc(50% - 8px)} .v11-birth{grid-template-columns:1fr} .modal-actions>*{flex-basis:100%} } @media(max-width:360px){ .brand span:last-child{letter-spacing:.08em} .v7-coin-pill{display:none} .display-title{font-size:36px} .v9-tier-card h3,html[lang^="zh"] .v9-tier-card h3{font-size:23px!important} .v9-tier-card strong span{font-size:46px!important} } @media(orientation:landscape) and (max-height:540px) and (pointer:coarse){ .hero-deck{display:none!important} .modal{max-height:96dvh} .v113-mobile-nav{height:58px} body{padding-bottom:calc(58px + var(--v115-safe-bottom))} } @media(prefers-reduced-motion:reduce){ #view-home>.section,.v7-sanctum-preview,.trust,.deck-codex{content-visibility:visible} } /* ===== END v11_5.css ===== */ /* ===== BEGIN v11_6.css ===== */ /* ARCANA frontend layout integrity patch. Presentation only: locked copy and backend behaviour are untouched. */ :root{ --v116-gutter:clamp(16px,3.2vw,48px); --v116-gap:clamp(16px,2.2vw,30px); --v116-reading:74ch; --v116-card-radius:22px; --v116-nav-h:76px; } *,*::before,*::after{box-sizing:border-box} html,body{max-width:100%;overflow-x:clip} body{min-width:320px} main,.view,.container,.section,.hero,.hero-copy,.hero-deck,.v9-service-gateway,.v9-tier-card,.v10-split,.v10-prose-card,.v10-advantage-grid,.v10-advantage-card,.v10-master-grid,.v7-preview-grid,.trust-grid,.v9-footer-grid,.service-copy-full{min-width:0} img,video,canvas,svg{display:block;max-width:100%;height:auto} button,input,textarea,select{min-width:0} /* Text must wrap cleanly but never be clipped by decorative containers. */ :where(h1,h2,h3,h4,p,li,blockquote,small,strong,em,i,span,a,button){overflow-wrap:break-word} :where(h1,h2,h3,h4,.display-title,.section-title){text-wrap:balance} :where(p,li,blockquote,.muted,.service-position,.footer-disclaimer,.filing-placeholder){text-wrap:pretty;orphans:2;widows:2} html[lang^="zh"] :where(h1,h2,h3,h4,p,li,blockquote){word-break:normal;line-break:strict} /* Remove brittle clipping inherited from older visual layers. */ :where(.hero,.hero-copy,.v9-service-gateway,.v9-tier-card,.v10-prose-card,.v10-advantage-card,.v10-master-grid>article,.v7-preview-card,.trust-copy,.service-copy-full,.panel,.modal){text-overflow:clip} /* Header: one stable row on desktop, scrollable navigation on narrower screens. */ .topbar{ min-height:var(--v116-nav-h)!important; display:grid!important; grid-template-columns:auto minmax(0,1fr) auto!important; align-items:center!important; gap:clamp(10px,1.6vw,24px)!important; padding:10px var(--v116-gutter)!important; } .brand{white-space:nowrap;align-self:center} .nav-links{display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(2px,.6vw,10px)!important;min-width:0!important} .nav-link{min-height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;padding:8px clamp(8px,1vw,15px)!important;line-height:1.2!important} .nav-tools{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;min-width:0!important;flex-wrap:nowrap!important} .v8-select-trigger,.v113-tool-btn,#musicBtn,.v7-coin-pill,.v7-avatar-trigger{min-height:42px!important} .v8-select-label,#v7AvatarName{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} /* Hero: copy and artwork have independent columns and cannot overlap. */ .hero{ min-height:auto!important; display:grid!important; grid-template-columns:minmax(0,1.14fr) minmax(320px,.86fr)!important; align-items:center!important; gap:clamp(32px,5vw,84px)!important; padding:clamp(54px,8vh,104px) 0 clamp(68px,9vh,118px)!important; } .hero-copy{position:relative!important;z-index:3!important;max-width:860px!important} .hero-copy .display-title{max-width:100%!important;margin:0!important;line-height:1.08!important} .hero-copy>p{max-width:min(720px,100%)!important;margin:24px 0 0!important;line-height:1.88!important} .hero-deck{position:relative!important;z-index:1!important;width:100%!important;min-height:480px!important;height:auto!important;overflow:visible!important;isolation:isolate} .hero-card{max-width:42%!important} .hero-note{max-width:100%;line-height:1.6!important} /* Service cards: a deterministic five-row grid, no inherited flex conflicts. */ .v9-service-gateway{ width:100%!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; align-items:stretch!important; gap:var(--v116-gap)!important; margin-top:clamp(30px,4vw,48px)!important; } .v9-tier-card{ position:relative!important; width:100%!important; min-height:390px!important; height:auto!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:42px 66px minmax(92px,1fr) 82px 34px!important; align-content:stretch!important; align-items:start!important; gap:8px!important; padding:30px clamp(22px,2.2vw,34px) 28px!important; overflow:hidden!important; border-radius:var(--v116-card-radius)!important; } .v9-tier-card>*{min-width:0!important;max-width:100%!important} .v9-tier-roman,.v9-witch-orb{pointer-events:none!important} .v9-tier-card>small{ grid-row:1!important; align-self:end!important; margin:0!important; padding:0!important; min-height:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; line-height:1.3!important; } .v9-tier-card h3{ grid-row:2!important; align-self:center!important; justify-self:stretch!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:0!important; margin:0!important; padding:0 2px!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; text-align:center!important; line-height:1.08!important; letter-spacing:.02em!important; } html[lang^="zh"] .v9-tier-card h3{font-size:clamp(23px,2.15vw,32px)!important;letter-spacing:.04em!important} .v9-tier-card p{ grid-row:3!important; align-self:start!important; margin:0!important; padding:0!important; min-height:0!important; font-size:clamp(15px,1.12vw,17px)!important; line-height:1.72!important; } .v9-tier-card strong{ grid-row:4!important; align-self:end!important; justify-self:center!important; display:flex!important; align-items:flex-end!important; justify-content:center!important; width:100%!important; min-height:0!important; margin:0!important; padding:0!important; white-space:nowrap!important; overflow:visible!important; } .v9-tier-card strong span{font-size:clamp(48px,4.55vw,70px)!important;line-height:.95!important;letter-spacing:-.04em!important} .v9-tier-card strong em{flex:0 0 auto!important;margin-left:6px!important;line-height:1.3!important} .v9-tier-card>i{ grid-row:5!important; align-self:end!important; justify-self:center!important; margin:0!important; padding:0!important; min-height:0!important; text-align:center!important; white-space:normal!important; line-height:1.4!important; } .v9-recommend{ position:absolute!important; top:12px!important; right:12px!important; left:auto!important; bottom:auto!important; z-index:8!important; max-width:calc(100% - 24px)!important; margin:0!important; padding:6px 10px!important; white-space:nowrap!important; line-height:1.15!important; } .v9-tier-card.recommended>small{padding-right:104px!important} .tier-three .v9-witch-orb{right:14px!important;bottom:14px!important;width:48px!important;height:48px!important;opacity:.2!important} /* Content sections: avoid fixed heights and equal-height text collisions. */ .section{padding-block:clamp(62px,8vw,116px)!important} .v10-split{display:grid!important;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr)!important;align-items:start!important;gap:clamp(34px,6vw,92px)!important} .v10-prose-card{height:auto!important;min-height:0!important;padding:clamp(24px,4vw,52px)!important} .v10-prose-card p{max-width:var(--v116-reading)!important;margin-inline:auto!important;line-height:1.95!important} .v10-advantage-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:var(--v116-gap)!important} .v10-advantage-card{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;padding:clamp(24px,2.8vw,38px)!important;overflow:hidden!important} .v10-advantage-card h3{min-height:0!important;margin:14px 0 18px!important;line-height:1.25!important} .v10-advantage-card p{margin:0!important;line-height:1.88!important} .v10-master-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important;gap:var(--v116-gap)!important} .v10-master-grid>article{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important} .v10-master-grid>article>span{margin-top:auto!important} .v7-preview-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important;flex-wrap:wrap!important} .v7-preview-head>div{min-width:0!important;flex:1 1 620px!important} .v7-preview-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:var(--v116-gap)!important} .v7-preview-card{height:auto!important;min-height:190px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;overflow:hidden!important} .v7-preview-card b,.v7-preview-card em,.v7-preview-card small{max-width:100%!important;white-space:normal!important} .v7-preview-card em{margin-top:auto!important} .trust-grid{display:grid!important;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr)!important;align-items:center!important;gap:clamp(36px,6vw,90px)!important} .trust-copy,.trust-copy>*{min-width:0!important} .trust-point{align-items:flex-start!important} /* Service detail slides: content owns the foreground; ornaments cannot cover it. */ .service-slide{position:relative!important;overflow:hidden!important;padding:clamp(70px,9vw,128px) var(--v116-gutter)!important} .service-copy-full{position:relative!important;z-index:5!important;width:min(920px,100%)!important;max-width:100%!important;margin-inline:auto!important;padding:0!important} .service-copy-full h1{max-width:100%!important;margin:18px 0 26px!important;line-height:1.08!important;white-space:normal!important;overflow:visible!important} html[lang^="zh"] .service-copy-full h1{white-space:nowrap!important;font-size:clamp(42px,7vw,92px)!important} .service-copy-full p{max-width:var(--v116-reading)!important;margin-inline:auto!important;font-size:clamp(17px,1.35vw,21px)!important;line-height:1.92!important} .service-position{max-width:var(--v116-reading)!important;line-height:1.65!important;white-space:normal!important} .service-ornament,.service-orbit,.witch-scene{z-index:0!important;pointer-events:none!important;opacity:.55!important} .v9-service-price{display:flex!important;align-items:baseline!important;justify-content:center!important;flex-wrap:wrap!important;gap:8px 12px!important;max-width:100%!important} .v9-service-price small{flex:1 0 100%!important;text-align:center!important} .v9-detail-start{max-width:100%!important;white-space:normal!important} /* Footer: readable columns and no tiny compressed links. */ .v9-footer{padding:64px var(--v116-gutter) 42px!important} .v9-footer-grid{display:grid!important;grid-template-columns:minmax(250px,1.35fr) repeat(3,minmax(160px,1fr))!important;align-items:start!important;gap:clamp(28px,4vw,64px)!important} .v9-footer section{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important} .v9-footer h4{margin:0 0 8px!important;font-size:17px!important;line-height:1.35!important;white-space:normal!important} .v9-footer button,.v9-footer a{width:auto!important;max-width:100%!important;min-height:40px!important;display:inline-flex!important;align-items:center!important;padding:4px 0!important;font-size:16px!important;line-height:1.45!important;white-space:normal!important;text-align:left!important} .v9-footer p{max-width:36ch!important;line-height:1.75!important} .footer-disclaimer,.filing-placeholder{max-width:1000px!important;margin-inline:auto!important;padding-inline:10px!important;text-align:center!important;line-height:1.7!important} /* Dialogs/forms: no field or button can sit on top of another. */ .modal-wrap{padding:16px!important} .modal{width:min(680px,calc(100vw - 32px))!important;max-width:100%!important;max-height:calc(100dvh - 32px)!important;height:auto!important;overflow:auto!important;padding:clamp(22px,4vw,38px)!important} .v11-register-card{width:min(780px,calc(100vw - 32px))!important} .field,.inline-field,.v11-password,.v11-birth,.v11-interest-grid,.modal-actions{min-width:0!important} .inline-field{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important} .inline-field>*{min-width:0!important} .v11-birth{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important} .v11-interest-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important} .modal-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important} .modal-actions>*{flex:1 1 180px!important;min-width:0!important} /* Tablet */ @media(max-width:1180px){ .topbar{grid-template-columns:auto minmax(0,1fr) auto!important} .nav-links{grid-column:1/-1!important;order:3!important;justify-content:flex-start!important;overflow-x:auto!important;scrollbar-width:none!important;padding-bottom:2px!important} .nav-links::-webkit-scrollbar{display:none} .hero{grid-template-columns:minmax(0,1fr) minmax(270px,.62fr)!important;gap:30px!important} .v10-master-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .v9-footer-grid{grid-template-columns:minmax(220px,1.2fr) repeat(2,minmax(150px,1fr))!important} .v9-footer-grid section:last-child{grid-column:2/4!important} } /* Mobile / small tablet */ @media(max-width:820px){ :root{--v116-nav-h:68px} .topbar{display:flex!important;flex-wrap:nowrap!important;min-height:68px!important;padding:8px 12px!important;gap:8px!important} .nav-links{display:none!important} .brand{margin-right:auto!important} .nav-tools{max-width:calc(100% - 108px)!important;overflow:visible!important} .v8-select-trigger{width:42px!important;min-width:42px!important;padding:7px!important;justify-content:center!important} .v8-select-trigger i,.v8-select-label{display:none!important} #v7AvatarName{display:none!important} .container{width:min(100% - 24px,1160px)!important} .hero{grid-template-columns:1fr!important;gap:30px!important;padding:42px 0 72px!important} .hero-copy{max-width:100%!important;text-align:center!important} .hero-copy>p{margin-inline:auto!important} .hero-note{justify-content:center!important} .hero-deck{min-height:300px!important;width:min(420px,100%)!important;margin-inline:auto!important} .v9-service-gateway{grid-template-columns:1fr!important;gap:16px!important} .v9-tier-card{min-height:330px!important;grid-template-rows:36px 58px minmax(76px,auto) 76px 32px!important;padding:26px 22px!important} html[lang^="zh"] .v9-tier-card h3{font-size:clamp(26px,8vw,34px)!important} .v9-tier-card strong span{font-size:56px!important} .v10-split{grid-template-columns:1fr!important;gap:24px!important} .v10-section-heading{text-align:center!important} .v10-advantage-grid{grid-template-columns:1fr!important} .v10-master-grid{grid-template-columns:1fr!important} .v7-preview-grid{grid-template-columns:1fr!important} .trust-grid{grid-template-columns:1fr!important;gap:32px!important} .coven-portrait{min-height:300px!important} .v9-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:30px 20px!important} .v9-footer-grid section:first-child{grid-column:1/-1!important} .v9-footer-grid section:last-child{grid-column:auto!important} .service-slide{padding:72px 14px 82px!important} .service-copy-full h1{white-space:normal!important} html[lang^="zh"] .service-copy-full h1{white-space:nowrap!important;font-size:clamp(38px,11vw,58px)!important} .modal-wrap{align-items:flex-end!important;padding:0!important} .modal,.v11-register-card{width:100%!important;max-width:none!important;max-height:92dvh!important;border-radius:22px 22px 0 0!important;padding:26px 18px calc(24px + env(safe-area-inset-bottom))!important} .inline-field{grid-template-columns:auto minmax(0,1fr)!important} .inline-field>button{grid-column:1/-1!important;width:100%!important} .v11-interest-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:520px){ .nav-tools{gap:3px!important;max-width:calc(100% - 96px)!important} #musicBtn,.v114-settings-open,#v113CommandOpen,#v113NotificationOpen{display:none!important} .hero-copy .display-title{font-size:clamp(36px,10.8vw,52px)!important} .hero-deck{min-height:250px!important} .v9-tier-card{padding:24px 19px!important} .v9-tier-card.recommended>small{padding-right:86px!important} .v9-recommend{top:10px!important;right:10px!important;font-size:9px!important;padding:5px 8px!important} .v9-footer-grid{grid-template-columns:1fr!important} .v9-footer-grid section:first-child{grid-column:auto!important} .v11-birth{grid-template-columns:1fr!important} .modal-actions>*{flex-basis:100%!important} } @media(max-width:360px){ .brand span:last-child{letter-spacing:.07em!important} .v7-coin-pill{display:none!important} html[lang^="zh"] .v9-tier-card h3{font-size:24px!important} .v9-tier-card strong span{font-size:48px!important} } /* Accessibility / low motion: never preserve invisible translated layers. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .section,.v10-reveal{transform:none!important;opacity:1!important} } /* ===== END v11_6.css ===== */ /* ===== FRONTEND BUNDLE READY MARKER ===== */ #arcanaStyleEmergency{display:none!important} body>*{visibility:visible!important}