@import url('/fonts/fonts.css');
:root{color-scheme:dark;--bg:#09070c;--text:#f4f1f5;--muted:#a29aa9;--accent:#ddf3a0;--line:#ffffff19;--purple:#8f76b3}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif;min-height:100svh;overflow-x:hidden}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{border:0}a{color:inherit;text-decoration:none}.ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 25% 49%,#4a36601c,transparent 48%)}header{height:112px;margin:0 5.4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:21px;font-weight:800;letter-spacing:-.7px;display:flex;align-items:center;gap:10px}.brand-symbol{font-size:35px;color:var(--accent);font-weight:400}.brand-dot{font-size:12px;align-self:flex-start;margin-top:10px}.header-note{color:var(--muted);font-size:13px}.help-button{background:none;font-size:13px}.help-button span{margin-left:20px;color:var(--accent)}main{min-height:calc(100svh - 192px)}footer{margin:0 5.4%;min-height:80px;display:flex;gap:20px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:12px;color:#a29aa9}.small-star{color:var(--accent);padding-left:14px}.home{position:relative;min-height:calc(100svh - 192px);display:grid;grid-template-columns:57% 43%;align-items:center;padding:60px 9% 95px 5%;animation:enter .65s ease}.hero-copy{position:relative;padding-left:38px;max-width:520px}.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:650;color:var(--accent);display:block}.deck-count{display:inline-block;color:var(--muted);margin-left:18px;letter-spacing:1px}.hero-copy h1{font-family:Prata,Georgia,serif;font-weight:400;font-size:clamp(72px,7.8vw,126px);line-height:1.1;letter-spacing:-4px;margin:26px 0 24px}.hero-copy h1 i{color:#b69ecd;font-style:normal}.hero-copy .intro{font-size:17px;line-height:1.9;color:#b7b0be;max-width:355px;margin:0 0 24px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:38px}.tags span{border:1px solid #ffffff20;border-radius:40px;padding:7px 12px;color:#c2b9cb;font-size:11px}.primary{background:var(--accent);color:#22251c;border-radius:6px;font-weight:700;font-size:15px;padding:20px 25px;min-width:255px;display:inline-flex;justify-content:space-between;gap:35px;align-items:center;transition:transform .2s,background .2s}.primary:hover{background:#eafdbe;transform:translateY(-3px)}.primary span{font-size:21px;line-height:1}.under-button{font-size:11px;color:#89818f;margin-top:15px}.scene-wrap{position:relative;width:100%;height:470px;perspective:1300px;touch-action:pan-y}.scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(-12deg);transition:transform .7s ease}.floor{position:absolute;bottom:20px;left:5%;width:94%;height:90px;background:#08060bb3;filter:blur(30px);border-radius:50%;transform:rotateX(70deg);pointer-events:none}.display-card{position:absolute;width:174px;height:292px;top:74px;left:50%;margin-left:-87px;border-radius:9px;transform-style:preserve-3d;transform:translate3d(var(--x),var(--y),var(--z)) rotateZ(var(--r)) rotateY(-13deg);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s;box-shadow:3px 2px 0 #84718f,5px 3px 0 #312937,8px 12px 19px #06030965;background:linear-gradient(125deg,#91819e,#493751 45%,#2e2537);border:1px solid #b59cc373;overflow:hidden}.display-card::after,.card-face::after{content:'';position:absolute;inset:9px;border:1px solid #e7d8f22a;border-radius:4px;pointer-events:none}.display-card::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#fff2,transparent 33%,#0002 72%);pointer-events:none}.display-card:nth-child(3){background:linear-gradient(130deg,#5a4368,#2c2135)}.display-card:nth-child(4){background:linear-gradient(125deg,#d6e7a7,#a5b47e);color:#333b2e;box-shadow:3px 2px 0 #f0f7d3,5px 3px 0 #748060,9px 20px 26px #08060b70}.display-card:nth-child(5){background:linear-gradient(125deg,#9c78ba,#493458)}.display-card:nth-child(6){background:linear-gradient(125deg,#44304f,#241c2d)}.display-card:hover{transform:translate3d(var(--x),calc(var(--y) - 25px),calc(var(--z) + 45px)) rotateZ(var(--r)) rotateY(-5deg);filter:brightness(1.12)}.card-number{position:absolute;top:22px;left:22px;font-size:11px;letter-spacing:1px;opacity:.7}.card-corner{position:absolute;top:21px;right:20px;font-size:13px;opacity:.6}.placeholder-mark{position:absolute;inset:0;display:grid;place-content:center;font-size:64px;font-weight:400;opacity:.65}.placeholder-label{position:absolute;bottom:25px;width:100%;text-align:center;letter-spacing:3px;font-size:8px;font-weight:650;opacity:.65}.scene-caption{position:absolute;bottom:-8px;left:0;right:0;text-align:center;font-size:11px;color:#a397ae;letter-spacing:1px}.scene-caption span{color:#c2adb4;margin-right:9px}.orbit{position:absolute;left:9%;right:5%;bottom:40px;height:120px;border:1px solid #aa8abc16;border-radius:50%;transform:rotate(-12deg);pointer-events:none}.nav-arrow{position:absolute;top:46%;width:40px;height:40px;border:1px solid #ffffff25;background:#211b2770;border-radius:50%;font-size:22px;z-index:3;transition:background .2s}.nav-arrow:hover{background:#51405c}.prev{left:2.2%}.next{right:2.2%}.deck-switch{position:absolute;bottom:35px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:8px}.deck-tab{padding:12px 23px;color:#928898;background:transparent;font-size:12px;border-radius:30px;display:flex;align-items:center;gap:8px}.deck-tab.active{background:#ffffff0b;color:#ede7f1}.deck-tab.active::before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%}.switch-divider{height:17px;background:var(--line);width:1px}.edition{position:absolute;left:5.7%;bottom:44px;font-size:10px;letter-spacing:2px;color:#746b7b}.anime{--accent:#e9caff;--purple:#bd8de7}.anime .display-card:nth-child(4){background:linear-gradient(125deg,#dcbdfe,#8855b2);color:#22172d}.anime .display-card:nth-child(3){background:linear-gradient(125deg,#f7c17f,#865348)}.anime .display-card:nth-child(5){background:linear-gradient(125deg,#bada8b,#566239)}.anime .hero-copy h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(68px,7vw,110px);font-weight:650;letter-spacing:-7px}.view{max-width:1120px;margin:auto;padding:38px 40px 60px;animation:enter .55s ease}.back{background:transparent;color:#a99caf;font-size:12px;padding:8px 0;margin-bottom:20px}.back:hover{color:var(--text)}.view-heading{text-align:center}.view h2{font-family:Prata,Georgia,serif;font-weight:400;font-size:42px;letter-spacing:-1px;margin:18px 0}.view-heading p{color:var(--muted);font-size:14px;line-height:1.7}.step{font-size:10px;letter-spacing:2px;color:var(--accent)}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:700px;margin:32px auto 20px}.topic{background:#ffffff03;border:1px solid #ffffff15;border-radius:9px;padding:23px;text-align:left;font-size:14px;display:flex;align-items:center;gap:18px;transition:.2s}.topic:hover,.topic.selected{background:#d6b7ef0b;border-color:#b2a182}.topic-icon{font-size:24px;color:#c4afd4;width:25px}.topic:last-child{grid-column:1/-1}.topic .topic-arrow{margin-left:auto;color:#7f7389}.question{max-width:700px;margin:0 auto 20px}.question label{font-size:12px;color:var(--muted)}textarea{display:block;margin-top:10px;width:100%;resize:vertical;min-height:85px;background:#ffffff04;border:1px solid #ffffff23;border-radius:7px;padding:15px;color:var(--text);font:inherit;font-size:14px}.center{text-align:center}.primary:disabled{opacity:.4;transform:none}.table{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:45px auto 25px;max-width:800px;perspective:1500px;position:relative}.table::before{content:'';position:absolute;inset:70% -10% -15%;background:radial-gradient(ellipse,#70527c28,transparent 65%);pointer-events:none}.slot{text-align:center;min-width:0}.card-perspective{perspective:1000px;margin:auto;width:190px;height:290px}.draw-card{width:100%;height:100%;position:relative;display:block;padding:0;background:transparent;transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-8deg) rotateZ(-3deg);transition:transform 1s cubic-bezier(.25,.75,.2,1);animation:deal .9s both;animation-delay:var(--delay);border-radius:8px}.slot:nth-child(2) .draw-card{transform:rotateX(18deg) rotateY(0deg) rotateZ(2deg)}.slot:nth-child(3) .draw-card{transform:rotateX(18deg) rotateY(8deg) rotateZ(5deg)}.draw-card:not(:disabled):hover{transform:translateY(-18px) rotateX(0deg) rotateY(0deg);filter:brightness(1.15)}.draw-card.revealed,.slot .draw-card.revealed{transform:translateY(-8px) rotateY(180deg);animation:none}.card-face{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;box-shadow:3px 3px 0 #82678a,5px 8px 0 #302638,12px 25px 35px #0006;border:1px solid #baa3ca6b}.card-back{background:linear-gradient(135deg,#766080,#3a2948 65%,#281f30)}.card-back .placeholder-mark{color:#d4bded;font-size:70px}.card-front{transform:rotateY(180deg);background:linear-gradient(125deg,#c6d99d,#8b9c72);color:#252f23;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px}.card-front .front-id{font-family:Prata,Georgia,serif;font-size:60px;opacity:.4}.card-front .front-label{font-size:8px;letter-spacing:2px;margin:20px 0;opacity:.6}.card-front strong{font-family:Prata,Georgia,serif;font-size:20px;font-weight:400}.anime .card-front{background:linear-gradient(125deg,#d0b0ed,#a078c0);color:#291b34}.position-name{font-size:12px;color:#aaa0b3;margin:24px 0 0}.position-name span{color:#685b75;margin-right:8px}.card-meaning{font-size:13px;line-height:1.7;color:#b8afc0;margin-top:12px;animation:enter .6s ease}.draw-status{font-size:12px;color:var(--muted);min-height:40px}.result-block{max-width:800px;margin:28px auto 0;padding:30px 35px;background:#ffffff04;border:1px solid var(--line);border-radius:10px;animation:enter .8s ease}.result-block h3{font-family:Prata,Georgia,serif;font-size:25px;font-weight:400;margin:12px 0 18px}.result-block p{line-height:1.9;font-size:14px;color:#c3bacb}.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:25px 0}.secondary{padding:15px 22px;background:transparent;border:1px solid #ffffff25;border-radius:6px;font-size:12px}.secondary:hover{background:#ffffff0a}.result-actions .primary{min-width:0;padding:15px 22px;font-size:12px}.result-disclaimer{font-size:11px;color:#8e829a;text-align:center}dialog{max-width:480px;width:calc(100% - 32px);background:#251e2d;border:1px solid #ffffff25;border-radius:15px;color:var(--text);padding:40px}dialog::backdrop{background:#0c0913ba;backdrop-filter:blur(8px)}dialog h2{font:32px Prata,Georgia,serif}dialog p{font-size:14px;color:#b7acbf;line-height:1.9}.close{position:absolute;right:15px;top:10px;background:none;font-size:28px;color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,30px);background:#e0edc5;color:#28301c;padding:15px 25px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:.3s;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes deal{from{opacity:0;translate:0 -80px;rotate:-15deg}to{opacity:1;translate:0 0;rotate:0deg}}.home.leaving{opacity:0;transform:translateX(var(--direction,30px));transition:opacity .22s,transform .22s}
@media(min-width:1450px){.scene-wrap{transform:scale(1.13)}.home{padding-left:8%;padding-right:12%}}
@media(max-width:1000px){header{height:90px}.header-note{display:none}.home{grid-template-columns:54% 46%;padding-left:4%;padding-right:7%;min-height:700px}.hero-copy{padding-left:18px}.scene-wrap{transform:scale(.85)}.hero-copy h1{font-size:76px}.hero-copy .intro{font-size:15px}.display-card{width:158px;height:272px}.primary{min-width:230px}.table{gap:20px}}
@media(max-width:700px){header{height:78px;margin:0 6%}.brand{font-size:17px;gap:7px}.brand-symbol{font-size:28px}.help-button{font-size:11px}.help-button span{margin-left:6px}.home{display:flex;flex-direction:column;padding:15px 24px 95px;min-height:0}.scene-wrap{height:340px;width:100%;max-width:470px;transform:none;margin:0 auto;perspective:950px}.scene{transform:scale(.7) rotateX(-8deg) rotateY(-12deg);transform-origin:50% 35%}.display-card{width:174px;height:292px}.scene-caption{bottom:10px;font-size:10px}.hero-copy{padding:10px 4px 20px;max-width:400px;width:100%}.hero-copy h1{font-size:70px;margin:16px 0;letter-spacing:-3px}.eyebrow{font-size:10px;letter-spacing:2px}.hero-copy .intro{font-size:14px;line-height:1.8;margin-bottom:18px;max-width:350px}.tags{margin-bottom:25px}.tags span{font-size:10px}.hero-copy .primary{width:100%;padding:19px 22px}.under-button{text-align:center}.nav-arrow{top:160px;width:34px;height:34px}.prev{left:12px}.next{right:12px}.deck-switch{bottom:25px}.edition{display:none}footer{padding:20px 0;min-height:80px;flex-direction:column;align-items:flex-start;gap:8px;font-size:10px}.view{padding:22px 20px 40px}.view h2{font-size:31px;line-height:1.4}.view-heading p{font-size:12px}.topic-grid{gap:10px;grid-template-columns:1fr;margin-top:25px}.topic{padding:17px;font-size:13px}.topic:last-child{grid-column:auto}.table{gap:12px;margin-top:35px}.card-perspective{width:100%;height:auto;aspect-ratio:190/290}.card-back .placeholder-mark{font-size:36px}.card-number{font-size:9px;left:17px;top:17px}.placeholder-label{font-size:6px;letter-spacing:1px;bottom:18px}.position-name{font-size:10px;line-height:1.5;margin-top:18px}.position-name span{display:block;margin:0}.card-front{padding:12px}.card-front .front-id{font-size:33px}.card-front .front-label{font-size:5px;letter-spacing:.8px;margin:10px 0}.card-front strong{font-size:13px}.card-meaning{font-size:11px}.result-block{padding:22px}.result-block h3{font-size:22px}.result-block p{font-size:13px}.result-actions{gap:8px}.result-actions button{flex:1;min-width:140px}.result-disclaimer{font-size:10px}.anime .hero-copy h1{font-size:64px;letter-spacing:-4px}}
#world{position:fixed;inset:0;z-index:-1;pointer-events:none}#world canvas{display:block;width:100%;height:100%}.ambient{z-index:-2}body:has(.webgl-ready){background:#17141c}header,footer{position:relative;z-index:2}.hero-copy{background:radial-gradient(ellipse,#17141ca8,transparent 75%);text-shadow:0 2px 14px #17141c}.webgl-ready.scene-wrap{cursor:grab;transform:none}.webgl-ready.orbiting{cursor:grabbing}.webgl-ready .scene,.webgl-ready .orbit{visibility:hidden}.webgl-ready .draw-card{opacity:0}.webgl-ready .draw-card:focus-visible{opacity:.22}.table.webgl-ready .card-perspective{height:var(--webgl-height,290px);width:100%;aspect-ratio:auto}.camera-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:15px;white-space:nowrap;font-size:10px;color:#b5a7c4;z-index:2}.camera-controls button{background:#241c2dbb;border:1px solid #c6aad52b;border-radius:20px;font-size:10px;padding:7px 10px;color:#d4c9df}.scene-wrap.webgl-ready .scene-caption{bottom:-14px}.table .camera-controls{bottom:auto;top:-31px;font-size:9px}.view:has(.webgl-ready) .view-heading{text-shadow:0 2px 15px #17141c}.result-block{background:#201a28e8;backdrop-filter:blur(16px)}.webgl-ready .card-meaning{background:#17141ca8;border-radius:8px;padding:8px}.table.webgl-ready{gap:20px}.webgl-ready .position-name{text-shadow:0 2px 8px #000}.view:has(.topic-grid){position:relative;background:radial-gradient(ellipse at center,#211a2caa,transparent 75%)}
@media(max-width:700px){.camera-controls{font-size:9px;gap:8px}.scene-wrap.webgl-ready .scene-caption{bottom:0}.scene-wrap.webgl-ready .camera-controls{bottom:26px}.table.webgl-ready{gap:8px}.table .camera-controls{top:-28px}.hero-copy{background:radial-gradient(ellipse,#17141cd9,transparent 80%)}.webgl-ready .card-meaning{padding:5px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.webgl-ready .draw-card .card-face{visibility:hidden}.webgl-ready .draw-card{box-shadow:none!important;background:none!important}.webgl-ready .draw-card:focus-visible{opacity:1;outline:2px solid var(--accent)}
.webgl-ready .draw-card{pointer-events:none}.table.webgl-ready{cursor:grab}.table.webgl-ready.orbiting{cursor:grabbing}

.card-title{display:block;font-size:14px;color:#eee5f5;margin-bottom:8px;font-weight:600}@media(max-width:700px){.card-title{font-size:12px}.scene-wrap .camera-controls span{font-size:0}.scene-wrap .camera-controls span::after{content:"Свайп — другая колода";font-size:10px}}

.scene-wrap,.table{user-select:none}#world{transition:filter .5s,opacity .5s}.choosing-topic #world{filter:blur(6px);opacity:.35}

/* Two equally weighted, centred halves; camera framing uses these exact bounds. */
@media(min-width:701px){
  .home{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:46px 0 96px;min-height:calc(100svh - 192px)}
  .home .scene-wrap{width:100%;height:clamp(410px,62vh,650px);margin:0;transform:none;max-width:none}
  .home .hero-copy{width:min(410px,76%);max-width:none;padding:0;justify-self:center;align-self:center}
  .hero-copy .intro{max-width:100%}
  .home .scene-wrap.webgl-ready .camera-controls{bottom:5px}
  .home .scene-wrap.webgl-ready .scene-caption{bottom:-23px}
  .nav-arrow{top:calc(50% - 35px)}
}
@media(min-width:701px) and (max-width:1000px){.home .hero-copy{width:78%}.home .scene-wrap{height:450px}.hero-copy h1{font-size:70px}.eyebrow{font-size:10px;letter-spacing:1.5px}.deck-count{margin-left:8px}.home .primary{min-width:0;width:100%}}
@media(max-width:700px){.home .scene-wrap{height:375px}.home .hero-copy{align-self:center}.scene-wrap.webgl-ready .camera-controls{bottom:22px}}
@media(min-width:701px){.home .scene-wrap.webgl-ready .camera-controls{left:calc(50% + min(90px,6vw))}.home .scene-wrap.webgl-ready .scene-caption{transform:translateX(min(90px,6vw))}}
/* Shade over the 3D scene: the spotlight stays on the cards, the text column sinks into darkness. */
#world::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 38%,#09070c8c 58%,#09070cd9 78%,#09070c 100%),radial-gradient(ellipse 80% 90% at 30% 50%,transparent 45%,#09070cb3 100%),linear-gradient(180deg,#09070c99,transparent 22%,transparent 80%,#09070cb3)}
.choosing-topic #world::after,body:not(:has(.home)) #world::after{background:radial-gradient(ellipse 75% 80% at 50% 45%,transparent 40%,#09070cd9 100%)}
@media(max-width:700px){#world::after{background:linear-gradient(180deg,#09070c80,transparent 12%,transparent 42%,#09070ce6 62%,#09070c 100%)}}