:root{--bg: #0c0c14;--surface: #13131e;--border: rgba(255,255,255,0.07);--text: #e8e8f0;--text-2: #7878a0;--text-3: rgba(255,255,255,0.04);--shadow: rgba(0,0,0,0.5)}[data-theme=light]{--bg: #f0f0ee;--surface: #ffffff;--border: rgba(0,0,0,0.08);--text: #13131e;--text-2: #606070;--text-3: rgba(0,0,0,0.04);--shadow: rgba(0,0,0,0.12)}*,*::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;display:flex;flex-direction:column;transition:background .4s,color .4s;overflow-x:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;background:var(--bg);transition:background .4s}.topbar__logo{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--text);text-decoration:none;opacity:.55;transition:opacity .2s}.topbar__logo:hover{opacity:1}.topbar__theme{width:34px;height:34px;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:border-color .2s;flex-shrink:0}.topbar__theme:hover{border-color:currentColor}.icon{width:15px;height:15px;display:none}[data-theme=dark] .icon--sun{display:block}[data-theme=light] .icon--moon{display:block}.set-nav{display:flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px}.set-nav__btn{padding:6px 16px;border-radius:8px;border:none;background:rgba(0,0,0,0);color:var(--text-2);font-size:12px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .2s,color .2s}.set-nav__btn.is-active{background:var(--text);color:var(--bg)}.set-nav__btn:hover:not(.is-active){color:var(--text)}.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:56px 32px}.grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;max-width:1100px}.tilt-card{position:relative;width:200px;height:270px;border-radius:20px;background:var(--surface);border:1px solid var(--border);cursor:pointer;outline:none;transform-style:preserve-3d;transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));transition:transform .5s cubic-bezier(0.23, 1, 0.32, 1),box-shadow .4s ease;box-shadow:0 8px 24px var(--shadow);will-change:transform;text-decoration:none;color:inherit;display:flex;flex-direction:column;padding:24px 20px;gap:0}.tilt-card:hover{box-shadow:0 20px 50px var(--shadow);transition:transform .1s linear,box-shadow .4s ease}.tilt-card:focus-visible{outline:2px solid var(--c, #7c3aed);outline-offset:3px;transform:rotateX(-4deg) rotateY(4deg) scale(1.02)}.tilt-card__glare{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.13), transparent 55%);pointer-events:none;opacity:0;transition:opacity .3s;transform:translateZ(1px)}.tilt-card:hover .tilt-card__glare{opacity:1}.tilt-card__icon{width:58px;height:58px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;letter-spacing:-0.02em;background:linear-gradient(135deg, color-mix(in srgb, var(--c, #7c3aed) 30%, #000), var(--c, #7c3aed));color:#fff;transform:translateZ(50px);transition:transform .5s cubic-bezier(0.23, 1, 0.32, 1);flex-shrink:0;margin-bottom:20px;position:relative}.tilt-card:hover .tilt-card__icon{transform:translateZ(70px)}.tilt-card__tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c, #7c3aed);transform:translateZ(35px);transition:transform .5s cubic-bezier(0.23, 1, 0.32, 1) .03s;margin-bottom:6px}.tilt-card:hover .tilt-card__tag{transform:translateZ(55px)}.tilt-card__title{font-size:20px;font-weight:700;letter-spacing:-0.02em;color:var(--text);transform:translateZ(40px);transition:transform .5s cubic-bezier(0.23, 1, 0.32, 1) .05s;margin-bottom:8px;line-height:1.2}.tilt-card:hover .tilt-card__title{transform:translateZ(60px)}.tilt-card__desc{font-size:12px;line-height:1.6;color:var(--text-2);transform:translateZ(25px);transition:transform .5s cubic-bezier(0.23, 1, 0.32, 1) .08s}.tilt-card:hover .tilt-card__desc{transform:translateZ(40px)}.tilt-card__art{position:absolute;bottom:20px;right:20px;transform:translateZ(20px);transition:transform .5s cubic-bezier(0.23, 1, 0.32, 1);opacity:.6}.tilt-card:hover .tilt-card__art{transform:translateZ(35px);opacity:1}.tilt-card--abstract{background:linear-gradient(135deg, color-mix(in srgb, var(--c, #7c3aed) 15%, var(--bg)), color-mix(in srgb, var(--c, #7c3aed) 5%, var(--surface)));border-color:color-mix(in srgb, var(--c, #7c3aed) 25%, transparent)}.art-hex{width:44px;height:50px;background:var(--c, #7c3aed);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);opacity:.5}.art-orbit{width:44px;height:44px;border-radius:50%;border:2px solid var(--c, #06b6d4);position:relative;opacity:.6}.art-orbit::after{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--c, #06b6d4)}.art-prism{width:0;height:0;border-left:22px solid rgba(0,0,0,0);border-right:22px solid rgba(0,0,0,0);border-bottom:44px solid var(--c, #f43f5e);opacity:.5}.art-wave{width:50px;height:30px;border-radius:50%;border-top:3px solid var(--c, #10b981);border-bottom:3px solid var(--c, #10b981);opacity:.6}.art-grid{display:grid;grid-template-columns:repeat(3, 10px);grid-template-rows:repeat(3, 10px);gap:4px;opacity:.5}.art-grid>span{border-radius:2px;background:var(--c, #f59e0b)}.grid--original{perspective:900px;transform-style:preserve-3d;min-height:480px;align-items:center}.og-card-overlay{padding:20px;cursor:pointer;perspective:900px;transform-style:preserve-3d}.og-card{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:20rem;height:28rem;padding:10px;background:#1c2026;border-radius:1.5rem;transform-style:preserve-3d;perspective:1000px;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 20px 60px rgba(0,0,0,.4)}.og-card::before{content:attr(data-title);position:absolute;font-size:6rem;font-weight:900;font-style:italic;text-transform:uppercase;text-align:center;color:hsla(0,0%,100%,.06);opacity:0;transition:opacity .5s;pointer-events:none;line-height:1;transform:translateZ(0)}.og-card .og-brand{color:#31353b;font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-family:"Oswald","Inter",system-ui,sans-serif;transition:color .3s,transform .3s;transform-style:preserve-3d}.og-card .og-main-img{max-width:19rem;transform-style:preserve-3d;transition:transform .4s ease;display:block}.og-card .og-sub-img{max-width:2.5rem;filter:invert(1);transform-style:preserve-3d;transition:transform .5s ease;display:block}.og-card-overlay:hover .og-card{transition:transform .05s linear;box-shadow:0 30px 80px rgba(0,0,0,.5)}.og-card-overlay:hover .og-card::before{opacity:1}.og-card-overlay:hover .og-card .og-brand{color:#bb3128;transform:translateZ(4rem)}.og-card-overlay:hover .og-card .og-main-img{transform:translateZ(2.1rem)}.og-card-overlay:hover .og-card .og-sub-img{transform:translateZ(4.5rem)}.tilt-card--breakout{overflow:visible;padding-top:110px}.tilt-card--breakout::before{content:attr(data-ghost);position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:62px;font-weight:900;letter-spacing:-0.04em;color:var(--c);opacity:0;pointer-events:none;transform:translateZ(8px);transition:opacity .4s;white-space:nowrap;overflow:hidden;filter:blur(1px)}.tilt-card--breakout:hover::before{opacity:.1}.char{position:absolute;left:50%;top:-52px;transform:translateX(-50%) translateZ(80px);transition:transform .5s cubic-bezier(0.23, 1, 0.32, 1) .04s;pointer-events:none;filter:drop-shadow(0 18px 28px rgba(0, 0, 0, 0.5))}.tilt-card--breakout:hover .char{transform:translateX(-50%) translateZ(115px) translateY(-8px)}.char--astro{width:80px}.char--astro .c-helmet{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg, #e8eef4, #c4d0dc);position:relative;margin:0 auto;box-shadow:inset -6px -6px 16px rgba(0,0,0,.2)}.char--astro .c-helmet::before{content:"";position:absolute;top:10px;left:12px;width:18px;height:18px;border-radius:50%;background:hsla(0,0%,100%,.65)}.char--astro .c-visor{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:46px;height:26px;border-radius:50%;background:linear-gradient(135deg, var(--c, #0ea5e9), rgba(6, 182, 212, 0.75));box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 0 10px rgba(14,165,233,.4)}.char--astro .c-body{width:58px;height:44px;background:linear-gradient(180deg, #d8e4ee, #b8ccd8);border-radius:12px 12px 6px 6px;margin:-4px auto 0;box-shadow:0 4px 10px rgba(0,0,0,.2)}.char--robot{width:70px}.char--robot .c-antenna{width:3px;height:22px;background:var(--c, #a855f7);margin:0 auto;position:relative}.char--robot .c-antenna::after{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:var(--c, #a855f7);box-shadow:0 0 10px var(--c, #a855f7)}.char--robot .c-head{width:60px;height:52px;border-radius:8px;background:#1a1025;border:2px solid var(--c, #a855f7);margin:0 auto;display:flex;align-items:center;justify-content:space-evenly;box-shadow:0 0 14px color-mix(in srgb, var(--c, #a855f7) 40%, transparent);position:relative}.char--robot .c-eye{width:12px;height:12px;border-radius:50%;background:var(--c, #a855f7);box-shadow:0 0 10px var(--c, #a855f7)}.char--robot .c-mouth{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:28px;height:5px;border-radius:3px;background:var(--c, #a855f7);opacity:.45}.char--robot .c-body{width:56px;height:36px;background:#1a1025;border:1px solid color-mix(in srgb, var(--c, #a855f7) 30%, transparent);border-radius:4px;margin:3px auto 0;display:flex;align-items:center;justify-content:center;gap:5px}.char--robot .c-body>span{width:8px;height:8px;border-radius:2px;background:var(--c, #a855f7);opacity:.35}.char--ninja{width:68px}.char--ninja .c-head{width:60px;height:60px;border-radius:50%;background:#1a1a1a;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.5)}.char--ninja .c-head::after{content:"";position:absolute;top:50%;left:0;right:0;height:20px;transform:translateY(-50%);background:var(--c, #64748b)}.char--ninja .c-eyes{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;gap:8px;z-index:1}.char--ninja .c-eyes span{width:10px;height:4px;border-radius:2px;background:#fff}.char--ninja .c-body{width:52px;height:46px;background:#111;border-radius:6px 6px 8px 8px;margin:-4px auto 0;position:relative}.char--ninja .c-body::after{content:"";position:absolute;top:50%;left:0;right:0;height:6px;background:var(--c, #64748b);transform:translateY(-50%)}.char--ghost{width:70px}.char--ghost .c-body{width:64px;height:82px;background:linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(210, 225, 240, 0.75));border-radius:32px 32px 0 0;margin:0 auto;position:relative;box-shadow:0 0 22px hsla(0,0%,100%,.15),0 8px 20px rgba(0,0,0,.2)}.char--ghost .c-body::after{content:"";position:absolute;bottom:-14px;left:0;right:0;height:28px;background:linear-gradient(180deg, rgba(210, 225, 240, 0.75), transparent);border-radius:0 0 50% 50%/0 0 80% 80%}.char--ghost .c-eyes{display:flex;justify-content:center;gap:14px;padding-top:28px}.char--ghost .c-eyes span{width:10px;height:14px;border-radius:50%;background:#1a1a2e}.char--wizard{width:72px}.char--wizard .c-hat{width:0;height:0;border-left:22px solid rgba(0,0,0,0);border-right:22px solid rgba(0,0,0,0);border-bottom:50px solid var(--c, #f59e0b);margin:0 auto;position:relative;filter:drop-shadow(0 0 8px color-mix(in srgb, var(--c, #f59e0b) 60%, transparent))}.char--wizard .c-hat::after{content:"";position:absolute;bottom:-54px;left:-34px;width:68px;height:10px;background:var(--c, #f59e0b);border-radius:5px}.char--wizard .c-face{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg, #fde8c8, #f5d0a0);margin:4px auto 0;position:relative}.char--wizard .c-face::after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid rgba(0,0,0,0);border-right:14px solid rgba(0,0,0,0);border-top:18px solid hsla(0,0%,100%,.9)}.char--wizard .c-eyes{display:flex;justify-content:center;gap:12px;padding-top:18px}.char--wizard .c-eyes span{width:6px;height:6px;border-radius:50%;background:#4a2800}@keyframes card-in{from{opacity:0;transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(24px) scale(0.92)}to{opacity:1;transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0) scale(1)}}.tilt-card.is-entering{animation:card-in .45s cubic-bezier(0.34, 1.56, 0.64, 1) both}@media(max-width: 600px){.topbar{padding:14px 16px}.set-nav__btn{padding:5px 10px;font-size:11px}.stage{padding:32px 16px}.tilt-card{width:160px;height:230px;padding:18px 16px}.tilt-card__icon{width:48px;height:48px;font-size:16px}.tilt-card__title{font-size:17px}}