:root{--bg: #0d0d14;--surface: #14141f;--border: rgba(255,255,255,0.08);--text: #e8e8f0;--text-2: #8888a0;--accent: #7c3aed;--accent-glow: rgba(124,58,237,0.25);--card-bg: #ffffff;--card-shadow: rgba(0,0,0,0.35);--card-name: #1a1a2e;--tab-active: #ffffff;--tab-idle: rgba(255,255,255,0.35);--indicator: var(--accent);--num-color: rgba(255,255,255,0.18);--link-color: var(--accent)}[data-theme=light]{--bg: #f4f3f0;--surface: #ffffff;--border: rgba(0,0,0,0.08);--text: #1a1a2e;--text-2: #6b6b80;--accent: #6d28d9;--accent-glow: rgba(109,40,217,0.15);--card-bg: #ffffff;--card-shadow: rgba(0,0,0,0.15);--card-name: #1a1a2e;--tab-active: #1a1a2e;--tab-idle: rgba(0,0,0,0.35);--num-color: rgba(0,0,0,0.12);--link-color: var(--accent)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{min-height:100dvh;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,sans-serif;transition:background .4s,color .4s;display:flex;flex-direction:column}img{display:block;max-width:100%}.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--border)}.topbar__logo{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;letter-spacing:.02em;opacity:.7;transition:opacity .2s}.topbar__logo:hover{opacity:1}.topbar__theme{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}.topbar__theme:hover{border-color:var(--accent)}.icon{width:16px;height:16px;display:none}[data-theme=dark] .icon--sun{display:block}[data-theme=light] .icon--moon{display:block}.stage{flex:1;display:grid;place-items:center;padding:48px 32px}.tabs{width:100%;max-width:1200px;display:grid;gap:0}@media(min-width: 900px){.tabs{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav  deck" "content deck";column-gap:80px}}.tabs__nav{grid-area:nav;display:flex;gap:0;position:relative;border-bottom:1px solid var(--border);margin-bottom:36px}@media(max-width: 899px){.tabs__nav{margin-bottom:28px}}.tabs__btn{display:flex;align-items:center;gap:8px;padding:0 20px 16px;background:none;border:none;cursor:pointer;color:var(--tab-idle);transition:color .3s;position:relative}.tabs__btn:first-child{padding-left:0}.tabs__btn.is-active{color:var(--tab-active)}.tabs__btn:hover:not(.is-active){color:var(--text)}@media(max-width: 560px){.tabs__btn{padding:0 12px 14px}.tabs__btn:first-child{padding-left:0}}.tabs__num{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--num-color);transition:color .3s}.tabs__btn.is-active .tabs__num{color:var(--accent)}.tabs__label{font-size:14px;font-weight:600;letter-spacing:.01em}@media(max-width: 560px){.tabs__label{font-size:13px}}.tabs__indicator{position:absolute;bottom:-1px;height:2px;background:var(--accent);border-radius:2px 2px 0 0;box-shadow:0 0 8px var(--accent-glow);transition:left .35s cubic-bezier(0.4, 0, 0.2, 1),width .35s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.tabs__content{grid-area:content;align-self:start}.tabs__panel{animation:panelIn .4s cubic-bezier(0.4, 0, 0.2, 1) forwards}.tabs__overline{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}.tabs__title{font-size:clamp(26px,3.5vw,42px);font-weight:700;line-height:1.15;letter-spacing:-0.02em;color:var(--text);margin-bottom:16px}.tabs__desc{font-size:15px;line-height:1.7;color:var(--text-2);max-width:380px;margin-bottom:32px}.tabs__link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--link-color);text-decoration:none;transition:gap .2s}.tabs__link svg{width:16px;height:16px;transition:transform .2s}.tabs__link:hover{gap:12px}.tabs__link:hover svg{transform:translateX(3px)}.tabs__deck{grid-area:deck;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}@media(max-width: 899px){.tabs__deck{margin-bottom:40px;order:-1}}@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.deck__track{position:relative;width:280px;height:240px;perspective:800px}@media(min-width: 900px){.deck__track{width:320px;height:270px}}.deck__card{position:absolute;inset:0;background:var(--card-bg);border-radius:10px;padding:14px 14px 52px;box-shadow:4px 6px 18px var(--card-shadow);transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rot, 0deg));transform-style:preserve-3d;will-change:transform;transition:transform .08s linear;cursor:default}.deck__card.is-front{z-index:3;cursor:grab}.deck__card.is-front:active{cursor:grabbing}.deck__card.is-mid{z-index:2}.deck__card.is-back{z-index:1}.deck__card.move-to-back{animation:moveToBack .6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards}.deck__card.move-to-front{animation:moveToFront .6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards}.deck__img{width:100%;border-radius:5px;aspect-ratio:4/3;background:var(--grad, linear-gradient(135deg, #7c3aed, #f43f5e));position:relative;overflow:hidden}.deck__img::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, transparent 60%)}.deck__label{position:absolute;bottom:16px;left:14px;right:14px;font-size:12px;font-weight:600;color:var(--card-name);letter-spacing:.01em}.deck__dots{display:flex;gap:6px;align-items:center}.deck__dot{width:6px;height:6px;border-radius:50%;background:var(--border);border:1px solid var(--text-2);cursor:pointer;transition:background .2s,transform .2s;opacity:.4}.deck__dot.is-active{background:var(--accent);border-color:var(--accent);opacity:1;transform:scale(1.3)}@keyframes moveToBack{0%{transform:rotateZ(var(--rot, 0deg)) translateX(0);z-index:3}40%{transform:rotateZ(var(--rot, 0deg)) translateX(12%) scale(0.97);z-index:2}100%{transform:rotateZ(var(--rot, 0deg)) translateX(0);z-index:1}}@keyframes moveToFront{0%{transform:rotateZ(var(--rot, 0deg)) translateX(0);z-index:1}40%{transform:rotateZ(var(--rot, 0deg)) translateX(-105%) scale(0.97);z-index:2}100%{transform:rotateZ(var(--rot, 0deg)) translateX(0);z-index:3}}