:root{color-scheme:light;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17243b;background:#f4f6fb}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
[hidden]{display:none!important}
#viewport{position:fixed;inset:0;overflow:hidden;background:#f4f6fb;isolation:isolate}
#appFrame{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block;visibility:hidden;background:#fff}
body[data-loaded="true"] #appFrame{visibility:visible}
#loading{position:absolute;inset:0;display:grid;place-items:center;padding:30px 22px;overflow:auto;background:radial-gradient(ellipse at 50% 30%,#fff 0%,#f4f6fb 60%,#edf1f8 100%);isolation:isolate}
.ambient{position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.ambient-blue{width:520px;height:520px;max-width:100%;left:calc(50% - 420px);top:calc(50% - 340px);background:radial-gradient(circle,#dce8ffb3,transparent 68%)}
.ambient-gold{width:460px;height:460px;max-width:100%;right:calc(50% - 420px);bottom:calc(50% - 300px);background:radial-gradient(circle,#f9e8c68c,transparent 67%)}
.welcome{position:relative;isolation:isolate;width:min(100%,470px);padding:34px 34px 32px;text-align:center;border-radius:32px;background:linear-gradient(145deg,#fff,#f9fbff 70%,#f1f5fc);border:1px solid #fff;box-shadow:0 36px 80px -25px #253d692d,0 9px 0 -2px #d6dfed,0 12px 0 -3px #becce0,inset 0 1px 0 #fff;animation:welcome-in .2s ease-out both}
.welcome-edge{position:absolute;inset:10px;z-index:-1;border:1px solid #e5ebf6;border-radius:24px;pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:10px;line-height:1.5;font-weight:800;letter-spacing:.22em;color:#667893}
.welcome-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#dfad58;box-shadow:0 0 0 4px #fbf0df}
.scene{position:relative;width:220px;height:176px;margin:25px auto 20px;perspective:650px}
.scene-orbit{position:absolute;inset:3px 25px 3px;border:1px solid #dde6f4;border-radius:50%;transform:rotate(-24deg)}
.scene-orbit:after{content:"";position:absolute;inset:13px;border:1px dashed #e1e8f2;border-radius:50%}
.scene-shadow{position:absolute;left:37px;bottom:0;width:151px;height:35px;border-radius:50%;background:radial-gradient(ellipse,#274a8b26,transparent 70%)}
.sheet{position:absolute;width:107px;height:134px;left:57px;top:13px;border-radius:17px;transform-origin:50% 95%;border:1px solid #fff;box-shadow:0 8px 0 #cad6e9,0 18px 32px -14px #27487c36}
.sheet-back{background:linear-gradient(140deg,#e9f0ff,#b9ceee);transform:translate(-25px,-1px) rotate(-16deg) rotateY(-12deg)}
.sheet-middle{background:linear-gradient(145deg,#fff5de,#ead4aa);transform:translate(26px,5px) rotate(15deg) rotateY(9deg);box-shadow:0 7px 0 #c6b187,0 15px 28px -13px #826c4024}
.sheet-front{background:linear-gradient(145deg,#fff,#f9fbff 65%,#edf3ff);transform:rotate(-4deg) rotateY(-12deg) rotateX(8deg);box-shadow:0 2px 0 #fff,0 7px 0 #b4c4df,0 19px 32px -14px #1b3d7738;animation:paper-float 3.6s ease-in-out infinite}
.sheet-logo{display:block;width:41px;height:41px;margin:16px 0 12px 15px;fill:#edf3ff;stroke:#345ea7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sheet-line{display:block;height:4px;width:54px;margin:8px 0 0 19px;border-radius:3px;background:#dce5f3}
.sheet-line-long{width:66px;background:#93afdb}
.sheet-line-short{width:39px}
.sheet-seal{position:absolute;right:-15px;bottom:13px;width:33px;height:33px;display:grid;place-items:center;border-radius:11px;border:1px solid #fff1d9;background:linear-gradient(145deg,#f3d694,#dca855);box-shadow:0 4px 0 #b9873e,0 8px 16px #b7873629;transform:rotate(8deg)}
.sheet-seal svg{width:20px;fill:none;stroke:#684811;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.scene-spark{position:absolute;width:7px;height:7px;transform:rotate(45deg);border-radius:2px;opacity:.7;animation:spark-glow 2.6s ease-in-out infinite}
.spark-one{left:30px;top:42px;background:#6e94d0}
.spark-two{right:24px;bottom:52px;width:5px;height:5px;background:#d4a95f;animation-delay:.8s}
.title-wrap{position:relative;width:fit-content;max-width:100%;margin:0 auto;overflow:hidden}
h1{margin:0;font-size:clamp(25px,5vw,34px);font-weight:780;letter-spacing:-.045em;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere}
.title-splash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 10%,#ffffffb0 48%,transparent 78%);transform:translateX(-140%);animation:text-splash 3.3s ease-in-out infinite}
.welcome p{margin:15px auto 0;max-width:320px;font-size:14px;line-height:1.65;color:#687993}
.loading-motion{margin:27px auto 0;width:154px}
.loading-track{display:block;height:3px;overflow:hidden;border-radius:5px;background:#e1e8f3}
.loading-track span{display:block;width:45%;height:100%;border-radius:5px;background:linear-gradient(90deg,#b8cee9,#3662a8,#cfaa6d);animation:loading-sweep 1.5s ease-in-out infinite}
.loading-caption{display:block;margin-top:12px;font-size:8px;line-height:1.5;font-weight:700;letter-spacing:.17em;color:#74829a}
.loading-actions{display:flex;justify-content:center;align-items:center;gap:17px;flex-wrap:wrap}
.loading-actions:has(:not([hidden])){margin-top:25px}
.loading-actions button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:44px;padding:12px 21px;border:1px solid #375d9d;border-radius:12px;background:linear-gradient(145deg,#3a649f,#203e72);box-shadow:0 4px 0 #183058,0 9px 20px #24447218;color:#fff;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.loading-actions button:hover{background:linear-gradient(145deg,#4672b0,#294d87)}
.loading-actions button:active{transform:translateY(2px);box-shadow:0 2px 0 #183058}
.loading-actions a{font-size:12px;color:#345b99;text-underline-offset:4px}
.loading-actions button:focus-visible,.loading-actions a:focus-visible{outline:3px solid #6b94d4;outline-offset:5px}
#loading[data-state="error"] .sheet-front,#loading[data-state="error"] .scene-spark,#loading[data-state="error"] .title-splash{animation:none}
#loading[data-state="error"] .title-splash{display:none}
@keyframes welcome-in{from{opacity:.85;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes paper-float{0%,100%{transform:translateY(0) rotate(-4deg) rotateY(-12deg) rotateX(8deg)}50%{transform:translateY(-5px) rotate(-2deg) rotateY(-8deg) rotateX(5deg)}}
@keyframes spark-glow{0%,100%{opacity:.45;transform:rotate(45deg) scale(.8)}50%{opacity:.9;transform:rotate(45deg) scale(1.1)}}
@keyframes text-splash{0%,16%{transform:translateX(-140%)}55%,100%{transform:translateX(140%)}}
@keyframes loading-sweep{0%{transform:translateX(-105%)}100%{transform:translateX(325%)}}
@media(max-width:420px){#loading{padding:22px 16px}.welcome{padding:28px 24px 27px;border-radius:27px}.welcome-edge{border-radius:20px}.scene{margin-top:20px;margin-bottom:18px}.welcome p{font-size:13px}.loading-motion{margin-top:23px}}
@media(max-height:530px){#loading{place-items:center;padding:18px}.welcome{padding-top:21px;padding-bottom:22px}.scene{height:132px;width:190px;transform:scale(.78);margin:-6px auto 3px}.welcome p{margin-top:10px}.loading-motion{margin-top:15px}.loading-caption{margin-top:8px}}
#diagnostics{position:fixed;right:12px;bottom:12px;z-index:5;width:min(320px,calc(100vw - 24px));padding:14px;border:1px solid #b8c8de;border-radius:14px;background:#fffffff5;box-shadow:0 8px 30px #12223b26;font-size:12px;max-height:calc(100dvh - 24px);overflow:auto}
#diagnostics summary{font-weight:750;cursor:pointer}#diagnostics p{color:#52627c;line-height:1.45}#diagnostics dl{display:grid;grid-template-columns:1fr auto;gap:9px;margin:14px 0}#diagnostics dd{margin:0;font-variant-numeric:tabular-nums;font-weight:650}#diagnostics a{color:#234fbd}
.no-script{position:fixed;inset:0;display:grid;place-content:center;background:#fff;padding:30px;text-align:center;z-index:10}
.setup-body{height:auto;overflow:auto;overscroll-behavior:auto;background:linear-gradient(145deg,#e9effa,#f5f7fa)}
.setup{width:min(760px,100%);margin:0 auto;padding:48px 22px 64px}.setup header{margin-bottom:26px}.setup h1{font-size:35px}.setup .lead{color:#52627c;max-width:620px;line-height:1.65}.setup section{padding:25px;margin:20px 0;background:#fff;border:1px solid #dce4ef;border-radius:20px;box-shadow:0 5px 0 #d7e0ed,0 14px 32px #2435540d}.setup h2{font-size:18px;margin:0 0 14px}.setup p,.setup li{font-size:14px;line-height:1.7}.setup li+li{margin-top:12px}.setup ol{padding-left:20px}.setup a{color:#234fbd;text-underline-offset:3px}.setup code{font-size:12px;background:#f1f4f9;padding:3px 5px;border-radius:5px;overflow-wrap:anywhere}.setup button,.setup .button{border:1px solid #234aa5;border-radius:10px;background:linear-gradient(#3769dc,#234fbd);color:#fff;padding:12px 18px;box-shadow:0 3px 0 #183576;font:inherit;font-size:13px;font-weight:650;cursor:pointer;display:inline-block;text-decoration:none;margin:8px 8px 8px 0}.setup button:active{transform:translateY(2px);box-shadow:0 1px 0 #183576}.setup button:focus-visible,.setup a:focus-visible{outline:3px solid #5d92f7;outline-offset:4px}.setup textarea{display:block;width:100%;height:220px;margin:14px 0;padding:14px;border:1px solid #c7d4e7;border-radius:10px;resize:vertical;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#263951;background:#f8fafc}.setup .note{padding:12px 16px;border-left:3px solid #406ac3;background:#f2f6fd;border-radius:0 8px 8px 0}.setup #copyStatus{font-size:13px;color:#435f4d}.setup .meta{font-size:12px;color:#60708a}
@media(prefers-reduced-motion:reduce){.welcome,.sheet-front,.scene-spark,.title-splash,.loading-track span{animation:none}.title-splash{display:none}}