:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none;color:#eef3ff;background:#0b1120;color-scheme:dark;line-height:1.5}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 700px 430px at 78% 0,rgba(49,90,160,.18),transparent),radial-gradient(ellipse 620px 420px at 1% 53%,rgba(28,83,104,.12),transparent),#0b1120}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid #5df2d6;outline-offset:3px}
.shell{max-width:1120px;margin:0 auto;padding:28px 30px 32px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:700;letter-spacing:-.04em}.brand img{border-radius:10px}.brand b{color:#80f2d9}.offline{display:inline-flex;align-items:center;gap:9px;background:#142b2e;border:1px solid #20514c;color:#8bedda;padding:8px 12px;border-radius:40px;font-size:12px;font-weight:650}.status-dot{width:7px;height:7px;background:#57e9ae;border-radius:50%;box-shadow:0 0 0 4px #2b6a5755}
.intro{max-width:670px;margin:86px 0 45px}.eyebrow{font-size:12px;letter-spacing:.18em;color:#77f1d5;font-weight:800}.intro h1{font-size:clamp(34px,4.8vw,58px);line-height:1.17;letter-spacing:-.065em;margin:19px 0 21px;font-weight:760}.intro h1 span{color:#8cf2dd}.intro p{color:#a2b1c9;font-size:15px;line-height:1.85;max-width:580px;margin:0}.intro code,.field-help code{font-size:.88em;color:#bfeee6}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:20px;align-items:stretch}.panel{min-width:0;border:1px solid #26344f;border-radius:22px;background:linear-gradient(135deg,rgba(26,36,58,.95),rgba(18,28,46,.95));box-shadow:0 22px 70px rgba(0,0,0,.12);padding:27px}.panel-heading{display:flex;align-items:center;gap:15px;margin-bottom:29px}.step{display:inline-flex;align-items:center;justify-content:center;width:41px;height:41px;flex-shrink:0;background:#162b36;border:1px solid #28505b;color:#82efdc;border-radius:12px;font:700 14px ui-monospace,SFMono-Regular,Consolas,monospace}.panel h2{font-size:16px;letter-spacing:-.02em;margin:0 0 3px}.panel-heading p{font-size:12px;color:#8294af;margin:0}
.field-label{display:block;font-weight:650;font-size:13px;margin-bottom:10px}.input-wrap{position:relative}.input-wrap input{width:100%;height:53px;border:1px solid #334360;border-radius:12px;background:#0d1629;color:#ecf4ff;padding:0 67px 0 15px;font:500 14px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.01em;outline:none}.input-wrap input:focus{border-color:#6adfcf;box-shadow:0 0 0 3px #5df2d615}.input-wrap input::placeholder{color:#677993}.reveal-button{position:absolute;top:8px;right:8px;height:37px;padding:0 11px;border:0;background:#24334d;color:#c9d9eb;border-radius:8px;font-size:12px}.field-help{color:#7587a1;font-size:12px;line-height:1.75;margin:11px 0 19px}
.advanced{border-top:1px solid #2a3650;padding-top:16px}.advanced summary{list-style:none;display:flex;align-items:center;justify-content:flex-start;gap:8px;cursor:pointer;font-size:13px;font-weight:650}.advanced summary::-webkit-details-marker{display:none}.advanced summary:before{content:'+';color:#78e9d7;margin-right:6px}.advanced[open] summary:before{content:'−'}.advanced summary span{margin-left:auto;color:#7587a1;font-size:11px;font-weight:400}.advanced-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:19px}.advanced-grid label{color:#8b9bb6;font-size:11px}.advanced-grid select,.advanced-grid input{display:block;background:#0d1629;color:#e6f0fd;border:1px solid #334360;border-radius:9px;min-width:0;width:100%;height:39px;margin-top:8px;padding:0 9px;font-size:12px}.advanced-grid option{background:#0d1629}.actions{display:flex;gap:10px;margin-top:25px}.primary-button{border:0;background:#83efd7;color:#0c2630;font-weight:800;flex:1;display:flex;align-items:center;justify-content:center;gap:11px;height:49px;border-radius:11px}.primary-button:hover{background:#a1ffea}.secondary-button{background:#24324b;color:#c3d1e2;border:1px solid #334360;border-radius:11px;width:82px}.secondary-button:hover{background:#30425e}.message{min-height:22px;color:#93b8c9;font-size:12px;margin:12px 0 -7px;line-height:1.55}.message[data-kind="error"]{color:#ffb6b6}.message[data-kind="success"]{color:#88e8c8}
.code-panel{display:flex;flex-direction:column}.code-card{flex:1;border:1px solid #2f4659;border-radius:16px;background:radial-gradient(ellipse at 70% 0%,#213d48 0,transparent 63%),#101c30;padding:23px 22px 19px}.code-label{text-align:center;color:#9ab7bd;font-size:13px;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:5px 0 16px}.code-digits{display:block;font:700 clamp(29px,3.6vw,45px)/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.065em;color:#a3f5e3;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 1px}.timer-row{display:flex;justify-content:center;align-items:center;gap:13px;margin:23px 0 1px}.timer{flex-shrink:0}.timer-track{stroke:#2d4052}.timer-progress{stroke:#7beed7;stroke-dasharray:131.946 131.946;stroke-dashoffset:131.946;transition:stroke-dashoffset .18s linear}.timer-row strong{display:block;font:700 22px/1.2 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}.timer-row strong small{font:500 12px ui-sans-serif,system-ui;color:#7f96ad}.timer-label{display:block;color:#8398ab;font-size:11px;margin-top:4px}.copy-button{height:49px;border-radius:11px;background:#263950;border:1px solid #345064;color:#d8f8ef;font-size:13px;font-weight:730;margin-top:16px}.copy-button:not(:disabled):hover{background:#31546a}.copy-button:disabled{opacity:.42}.session-note{font-size:11px;color:#8392ab;line-height:1.8;margin:13px 2px 0;text-align:center}.is-empty .code-digits{color:#547083}.footer{display:flex;justify-content:space-between;gap:12px;margin-top:25px;color:#667994;font-size:11px}
@media(max-width:800px){.shell{max-width:610px;padding:22px 19px 28px}.intro{margin:58px 0 33px}.workspace{grid-template-columns:1fr;gap:14px}.panel{padding:23px}.code-digits{font-size:clamp(34px,8vw,46px)}.code-card{padding:24px 15px}.footer{flex-wrap:wrap}.panel-heading{margin-bottom:24px}}
@media(max-width:400px){.shell{padding:18px 12px 24px}.panel{padding:19px}.intro{margin:45px 5px 29px}.intro h1{font-size:35px}.advanced summary span{display:none}.code-digits{font-size:31px}.brand{font-size:17px}}
.runtime-status{color:#a2b1c9;font-size:12px;line-height:1.75;margin:-20px 0 25px}.runtime-status p{margin:5px 0}.runtime-status [role="alert"]{color:#ffb6b6}#update-status{color:#bfeee6}.primary-button:disabled{opacity:.5}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
.runtime-status{margin:32px 0 20px}.runtime-status p:empty,#offline-status{display:none}.workspace{margin-top:32px}
.toast:not(:empty){position:fixed;z-index:10;top:max(20px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:14px 24px;border:1px solid #7beed7;border-radius:14px;background:#173b39;color:#dcfff5;box-shadow:0 12px 36px #0009;font-size:15px;font-weight:700;text-align:center;pointer-events:none}