*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;background:#050508;color:#e8f6f4}body{font-family:Helvetica Neue,Arial,sans-serif;overflow:hidden}.app{height:100%;position:relative}.app>div:has(canvas),.app canvas{position:absolute!important;top:0;right:0;bottom:0;left:0}.topbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:baseline;gap:10px;padding:18px 24px;pointer-events:none}.logo-mark{font-size:1.4rem;font-weight:800;letter-spacing:.3em;color:#1fe0ce;text-shadow:0 0 10px #1fe0ce99,0 0 34px #1fe0ce44}.logo-sub{font-size:.8rem;font-weight:600;letter-spacing:.42em;color:#9ad9d2}.loader{color:#1fe0ce;letter-spacing:.3em;font-size:.8rem}.picker{position:absolute;top:64px;right:16px;bottom:46px;z-index:10;width:300px;display:flex;flex-direction:column;gap:12px;background:#080c0ec7;border:1px solid #1fe0ce2e;border-radius:14px;padding:14px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.picker-head{display:flex;justify-content:space-between;align-items:baseline}.picker-title{font-weight:700;letter-spacing:.24em;font-size:.78rem;color:#1fe0ce}.picker-count{font-size:.68rem;color:#7fa8a3}.section-label{font-size:.62rem;letter-spacing:.22em;color:#e34fd0;margin-bottom:6px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.tabs{display:flex;gap:4px;flex-wrap:wrap}.tab{background:none;border:1px solid #1fe0ce22;color:#9ad9d2;font-size:.6rem;letter-spacing:.08em;padding:4px 8px;border-radius:20px;cursor:pointer}.tab.active{border-color:#1fe0ce;color:#1fe0ce;background:#1fe0ce14}.swatch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;overflow-y:auto;flex:1;align-content:start;scrollbar-width:thin;scrollbar-color:#1fe0ce44 transparent}.swatch{aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:#101418;padding:0}.swatch img{width:100%;height:100%;object-fit:cover;display:block}.swatch.active{border-color:#1fe0ce;box-shadow:0 0 10px #1fe0ce66}.swatch:hover{border-color:#1fe0ce77}.film-card{display:flex;gap:10px;align-items:center;background:#0c1114;border:1px solid #1fe0ce22;border-radius:10px;padding:10px}.film-card-swatch{width:54px;height:54px;border-radius:8px;object-fit:cover}.film-card-title{font-size:.82rem;font-weight:700}.film-card-meta{font-size:.68rem;color:#7fa8a3;margin:3px 0 6px}.buy-link{font-size:.72rem;font-weight:700;color:#050508;background:#1fe0ce;padding:4px 10px;border-radius:16px;text-decoration:none;display:inline-block}.buy-link:hover{background:#4ff0e0}.footnote{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:10px 24px;font-size:.62rem;color:#5d7d79;pointer-events:none}@media (max-width: 760px){.picker{top:auto;right:0;left:0;bottom:0;width:100%;max-height:46%;border-radius:14px 14px 0 0}.swatch-grid{grid-template-columns:repeat(8,1fr)}}.intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center}.logo-mark.big{font-size:3.2rem;letter-spacing:.4em;padding-left:.4em}.intro-skip{position:absolute;bottom:34px;right:34px;z-index:3;background:none;border:1px solid #1fe0ce55;color:#1fe0ce;letter-spacing:.3em;font-size:.66rem;padding:8px 18px;border-radius:20px;cursor:pointer}.intro-skip:hover{background:#1fe0ce18}.logo-img{height:26px;display:block;filter:drop-shadow(0 0 8px #1fe0ce55)}.photo-mode{position:absolute;top:0;right:0;bottom:0;left:0;background:#050508}.photo-shot{width:100%;height:100%;object-fit:cover;display:block}.photo-missing{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#7fa8a3;font-size:.85rem;letter-spacing:.08em;padding:0 20%;text-align:center}.intro-wordmark{width:340px;display:block;filter:drop-shadow(0 0 14px #1fe0ce88) drop-shadow(0 0 44px #1fe0ce33)}.photo-mode{perspective:1100px;overflow:hidden}.photo-shot{transition:transform .8s cubic-bezier(.5,0,.4,1),filter .8s}.photo-mode.closing .photo-shot,.photo-mode.closed .photo-shot{transform:scale(1.08);filter:blur(7px) brightness(.55)}.photo-mode.opening .photo-shot{transform:scale(1);filter:none;transition-duration:1.1s}.photo-doors{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;perspective:1100px}.photo-door-3d{position:absolute;top:-2%;right:-4%;bottom:-2%;left:-4%;display:flex;flex-direction:column;transform-style:preserve-3d;transform:translateY(-102%);transition:transform .9s cubic-bezier(.4,0,.55,1)}.photo-doors.closing .photo-door-3d,.photo-doors.closed .photo-door-3d{transform:translateY(0)}.photo-doors.closing .photo-door-3d{animation:doorSettle 1.05s cubic-bezier(.4,0,.55,1)}@keyframes doorSettle{0%{transform:translateY(-102%)}80%{transform:translateY(.5%)}90%{transform:translateY(-.25%)}to{transform:translateY(0)}}.photo-doors.opening .photo-door-3d{transform:translateY(-102%);transition:transform 1.25s cubic-bezier(.55,.05,.45,1)}.door-slat3d{flex:1;background:linear-gradient(180deg,#23282e,#14181d 42%,#0a0d11 88%,#05070a);border-bottom:2px solid #02040688;box-shadow:inset 0 6px 10px #ffffff09,inset 0 -10px 22px #000c}.door-wordmark{position:absolute;left:50%;top:50%;width:240px;transform:translate(-50%,-170%);opacity:0;transition:opacity .3s .35s;filter:brightness(.5) drop-shadow(0 2px 3px #000)}.photo-doors.closed .door-wordmark{opacity:.55}.door-seal{position:absolute;left:0;right:0;bottom:-1%;height:10px;background:#04060a;box-shadow:0 -2px 18px #1fe0ce33;opacity:0;transition:opacity .3s}.photo-doors.closed .door-seal{opacity:1}.door-loader{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:#1fe0ce;font-size:.7rem;letter-spacing:.34em;opacity:0;transition:opacity .25s;transform:translateZ(60px)}.photo-doors.closed .door-loader{opacity:1}.door-spinner{width:44px;height:44px;border-radius:50%;border:3px solid #1fe0ce22;border-top-color:#1fe0ce;animation:spin .9s linear infinite;box-shadow:0 0 18px #1fe0ce44}@keyframes spin{to{transform:rotate(360deg)}}.mycar{position:absolute;top:0;right:0;bottom:0;left:0;background:#050508}.mycar-canvas{width:100%;height:100%;object-fit:cover;display:block}.mycar-bar{position:absolute;left:24px;bottom:40px;z-index:5;display:flex;align-items:center;gap:14px}.mycar-badge{font-size:.62rem;letter-spacing:.2em;color:#1fe0ce;background:#0c1114cc;border:1px solid #1fe0ce33;border-radius:18px;padding:7px 14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.door-lightgap{position:absolute;left:2%;right:2%;bottom:0;height:0;background:linear-gradient(180deg,#eafffb 0%,#1fe0ce66 60%,transparent 100%);filter:blur(6px);opacity:0}.photo-doors.opening .door-lightgap{animation:lightSpill 1.25s ease-out}@keyframes lightSpill{0%{height:0;opacity:0}18%{height:10px;opacity:1}55%{height:42vh;opacity:.55}to{height:100vh;opacity:0}}.toolbar{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:20;display:flex;gap:18px;align-items:center;pointer-events:auto}.toolbar-group{display:flex;gap:4px;background:#080c0ecc;border:1px solid #1fe0ce2e;border-radius:22px;padding:4px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.tool-btn{background:none;border:none;color:#9ad9d2;cursor:pointer;font-size:.64rem;font-weight:700;letter-spacing:.14em;padding:7px 14px;border-radius:18px;white-space:nowrap}.tool-btn:hover{color:#1fe0ce}.tool-btn.active{background:#1fe0ce;color:#05161a}@media (max-width: 900px){.toolbar{top:auto;bottom:8px;flex-wrap:wrap;justify-content:center;width:96%;gap:6px}}.mycar-upload{background:#1fe0ce;color:#05161a}.mycar-upload:hover{background:#4ff0e0;color:#05161a}.intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50}.intro-brand{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:52;transition:opacity .45s}.intro-brand.opening,.intro-brand.open{opacity:0}.intro .photo-doors{pointer-events:auto}.intro .door-wordmark{opacity:.9;filter:brightness(1.1) drop-shadow(0 0 18px #1fe0ce88);transition:opacity .3s}.intro-brand{top:58%}.intro-brand .logo-sub{letter-spacing:.5em;color:#9ad9d2}.angle-bar{position:absolute;left:24px;bottom:40px;z-index:6;display:flex;gap:4px;background:#080c0ecc;border:1px solid #1fe0ce2e;border-radius:22px;padding:4px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.top-scrim{position:absolute;top:0;left:0;right:0;height:76px;z-index:9;background:linear-gradient(180deg,rgba(4,6,8,.92) 0%,rgba(4,6,8,.55) 62%,transparent 100%);pointer-events:none}