:root{--bg: #07080b;--bg-top: #121418;--ink: #f4f1ea;--muted: #a7a093;--line: rgba(244, 241, 234, .14);--metal-0: #23262c;--metal-1: #3a3d44;--metal-2: #b7bdc6;--edge: #6e7480;--wash-c: #8c929c;--field-c: #464a52;--top-c: #121418;--wash: rgba(140, 146, 156, .2);--field: rgba(70, 74, 82, .2);color-scheme:dark;font-family:Avenir Next,Segoe UI,PingFang SC,Noto Sans SC,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--bg);color:var(--ink)}button,input,textarea{font:inherit;color:inherit}a{color:var(--edge)}.wash{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(24% 20% at var(--hx, 74%) var(--hy, 30%),color-mix(in srgb,var(--wash-c) 42%,transparent),transparent 66%),radial-gradient(62% 48% at 50% 24%,color-mix(in srgb,var(--field-c) 38%,transparent),transparent 74%),linear-gradient(180deg,var(--top-c),var(--bg) 54%,#050506);transition:--wash-c .5s,--field-c .5s,--top-c .5s,background .5s cubic-bezier(.22,.7,.2,1)}.wrap{position:relative;z-index:1;width:min(760px,calc(100% - 32px));margin:0 auto;padding:28px 0 48px}.top,.foot{display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}.brand .mark,.result-mark{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:10px;color:var(--edge)}.brand b{display:block;letter-spacing:.14em}.brand small,.tag,.foot{color:var(--muted);letter-spacing:.08em}.tag,.foot{font-size:12px}h1{font-size:clamp(32px,5vw,48px);line-height:1.05;font-weight:560;margin:8px 0}.lead,.panel p,.extra{color:var(--muted);line-height:1.6}.lead{margin:0}.layout{display:grid;gap:8px;margin-top:22px}.scene{height:320px;position:relative;z-index:1;isolation:isolate}.viewport{height:100%;display:grid;place-items:center;perspective:1700px}.card{width:min(440px,92%);height:236px;position:relative;transform-style:preserve-3d}.plate{position:absolute;inset:0;border-radius:18px;border:2px solid var(--edge);box-shadow:0 18px 22px #00000047;background:transparent;transform:rotateY(0);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,0,.2,1),--metal-0 .5s,--metal-1 .5s,--metal-2 .5s,--edge .5s,background .5s cubic-bezier(.22,.7,.2,1),border-color .5s cubic-bezier(.22,.7,.2,1),box-shadow .5s cubic-bezier(.22,.7,.2,1)}.card.is-edge .plate,.card.is-flipped .plate{transform:rotateY(-180deg)}.rim{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);overflow:visible;pointer-events:none;z-index:4}.rim-phone{display:none}.rim rect{fill:none;stroke:url(#rim-glow);stroke-width:2.5px;stroke-linecap:round;stroke-dasharray:16 84;animation:rim-run 14s linear infinite}.card.is-step1 .face-foot{order:2;align-self:center;margin:2px 0 8px;font-size:16px;letter-spacing:.1em}.card.is-step1 .digits{order:3}.plate-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;transform-style:preserve-3d}.side{position:absolute;inset:0;padding:20px 22px 16px;display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(155deg,var(--metal-1) 0%,var(--metal-0) 100%);border-radius:inherit}.side-front{transform:rotateY(0) translateZ(1px)}.side-rear{align-items:center;justify-content:center;transform:rotateY(180deg) translateZ(1px)}.rear-copy{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.face-top,.face-foot,.plan-name,.digits,.rear-title,.rear-plan{position:relative}.rear-title{font-size:clamp(22px,4vw,30px);letter-spacing:.12em;color:var(--metal-2);transition:color .26s ease .16s}.rear-plan{font-size:clamp(15px,2.4vw,18px);letter-spacing:.08em;color:var(--metal-2);transition:color .26s ease .16s}.face-top,.face-foot{color:var(--metal-2);letter-spacing:.14em;font-size:13px;transition:color .26s ease .16s}.plan-name{position:relative;text-align:center;margin-bottom:8px;font-size:clamp(22px,4vw,34px);line-height:1.1;color:var(--metal-2);opacity:1;transition:color .3s ease .16s,opacity .3s ease}.card.is-blank .plan-name,.card.is-blank .rear-plan{opacity:0}.digits{display:flex;justify-content:center;align-items:center;gap:6px}.digits span{display:flex;gap:1px;letter-spacing:.12em}.digits i{font-style:normal;color:#ffffff47;transition:color .26s ease .16s}.digits i.on{color:var(--metal-2)}.digits b{color:#ffffff47;font-weight:500}.back-title{font-size:clamp(26px,5vw,38px);letter-spacing:.14em;color:var(--metal-2);transition:color 2s ease}.panel{position:relative;z-index:3;margin-top:4px;border:1px solid var(--line);border-radius:18px;padding:22px;background:#101216;transform:none}.pane{display:none}.pane.on{display:block}h2{margin:0 0 8px;font-size:22px;font-weight:560}.ok{color:var(--edge)!important}label{display:block;margin:14px 0 8px;font-size:13px;letter-spacing:.08em}input,textarea{width:100%;border:1px solid var(--line);background:#0c0e12;border-radius:12px;padding:12px 14px}.check{display:flex;gap:8px;align-items:flex-start;letter-spacing:0;font-size:13px;color:var(--muted)}.check input{width:auto;margin-top:3px}.cta,.step-back{border:0;background:transparent;cursor:pointer}.cta{margin-top:16px;width:100%;border-radius:999px;padding:12px 16px;background:linear-gradient(90deg,var(--metal-0),var(--metal-2));color:#16120e}.cta:disabled{opacity:.55;cursor:default}.msg{min-height:1.4em;margin-top:10px;color:#e7c2a2}.step-back{color:var(--muted);padding:0;margin-bottom:12px}.result-mark{margin-bottom:8px}.track{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}.track button{border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--muted)}.track button.on{color:var(--ink);border-color:var(--edge)}.text-btn{margin-top:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0}.foot{margin-top:18px}body[data-family=blank]{--metal-0: #23262c;--metal-1: #3a3d44;--metal-2: #b7bdc6;--edge: #6e7480;--wash-c: #8c929c;--field-c: #464a52;--top-c: #121418}body[data-family=go]{--metal-0: #6e767e;--metal-1: #aeb6be;--metal-2: #f3f6f8;--edge: #d5dde4;--wash-c: #d2dae2;--field-c: #56606c;--top-c: #171b21}body[data-family=plus]{--metal-0: #8a5a3c;--metal-1: #f0c49a;--metal-2: #ffe7cf;--edge: #e8b0a0;--wash-c: #e8b0a0;--field-c: #964e3e;--top-c: #2c1c16}body[data-family=p100]{--metal-0: #241c12;--metal-1: #e2c17a;--metal-2: #f8e2ad;--edge: #d7b56a;--wash-c: #d7b56a;--field-c: #5c4418;--top-c: #241c10}body[data-family=p200]{--metal-0: #0c0c0c;--metal-1: #b99662;--metal-2: #e6d3b4;--edge: #8d7344;--wash-c: #a07c3e;--field-c: #282012;--top-c: #120f0c}body[data-family=p500]{--metal-0: #101114;--metal-1: #d5dee8;--metal-2: #f4f7fb;--edge: #c9d2dc;--wash-c: #c9d2dc;--field-c: #3a485c;--top-c: #141820}body[data-family=c250]{--metal-0: #10282c;--metal-1: #7eb8b0;--metal-2: #e7f7f3;--edge: #5f8f8a;--wash-c: #5f8f8a;--field-c: #103234;--top-c: #0c1c1e}body[data-family=c500]{--metal-0: #10282c;--metal-1: #9ed0c8;--metal-2: #e7f7f3;--edge: #7eb0aa;--wash-c: #7eb0aa;--field-c: #103636;--top-c: #0c1e20}body[data-family=c1000]{--metal-0: #10282c;--metal-1: #b7e4dc;--metal-2: #eefaf7;--edge: #8fd0c8;--wash-c: #8fd0c8;--field-c: #103e3e;--top-c: #0d2224}body[data-family=c2500]{--metal-0: #0e2428;--metal-1: #c9efe8;--metal-2: #f3fbf9;--edge: #a5ddd4;--wash-c: #a5ddd4;--field-c: #0c3032;--top-c: #0c2022}body[data-family=c5000]{--metal-0: #0c2024;--metal-1: #d9f4ee;--metal-2: #f7fdfb;--edge: #c6ebe4;--wash-c: #c6ebe4;--field-c: #0a282c;--top-c: #0b1c1e}body[data-family=c25000]{--metal-0: #0a1c20;--metal-1: #b7ddd6;--metal-2: #e7f7f3;--edge: #e7f7f3;--wash-c: #e7f7f3;--field-c: #081c20;--top-c: #091416}@keyframes orbit{0%{--spin: 0deg;--hx: 78%;--hy: 22%}25%{--spin: 90deg;--hx: 84%;--hy: 72%}50%{--spin: 180deg;--hx: 22%;--hy: 78%}75%{--spin: 270deg;--hx: 16%;--hy: 28%}to{--spin: 360deg;--hx: 78%;--hy: 22%}}@keyframes rim-run{to{stroke-dashoffset:-100}}@property --metal-0{syntax: "<color>"; inherits: true; initial-value: #23262c;}@property --metal-1{syntax: "<color>"; inherits: true; initial-value: #3a3d44;}@property --metal-2{syntax: "<color>"; inherits: true; initial-value: #b7bdc6;}@property --edge{syntax: "<color>"; inherits: true; initial-value: #6e7480;}@property --wash-c{syntax: "<color>"; inherits: true; initial-value: #8c929c;}@property --field-c{syntax: "<color>"; inherits: true; initial-value: #464a52;}@property --top-c{syntax: "<color>"; inherits: true; initial-value: #121418;}@property --spin{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --hx{syntax: "<percentage>"; inherits: false; initial-value: 74%;}@property --hy{syntax: "<percentage>"; inherits: false; initial-value: 30%;}@media(max-width:1100px)and (min-width:721px){.wrap{width:min(760px,calc(100% - 210px));margin-left:196px}}@media(max-width:720px){.wrap{width:min(100% - 28px,520px);margin-left:auto;margin-right:auto;padding:16px 0 calc(28px + env(safe-area-inset-bottom))}.top{align-items:center}h1{font-size:26px}.lead{font-size:14px}.layout{margin-top:12px;gap:4px}.scene{height:214px}.card{width:min(100%,360px);height:188px}.plate{border-radius:16px}.rim-desk{display:none}.rim-phone{display:block}.rim-phone rect{stroke:url(#rim-glow-phone)}.plan-name,.back-title{font-size:22px}.digits{gap:2px}.digits span{letter-spacing:.06em}.panel{padding:16px;border-radius:14px}input,textarea{font-size:16px}.cta{min-height:48px}}