html,body{color:#e8ecff;background:#04070d;width:100%;height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}*{box-sizing:border-box}.app{background:radial-gradient(circle at 42% 52%,#07e2ff2e,#0000 32%),linear-gradient(110deg,#03070d 0%,#05111d 56%,#080b17 100%);grid-template-columns:minmax(0,1fr) minmax(360px,440px);width:100%;height:100%;display:grid}.viewport{min-width:0;min-height:0;position:relative}#renderCanvas{touch-action:none;outline:none;width:100%;height:100%;display:block}.panel{z-index:2;background:linear-gradient(#0f162bf0,#050810fa),repeating-linear-gradient(0deg,#07e2ff0a 0 1px,#0000 1px 7px);border-left:1px solid #07e2ff3d;flex-direction:column;gap:18px;min-width:0;height:100%;padding:18px 20px 20px;display:flex;position:relative;overflow-y:auto;box-shadow:-18px 0 60px #00000061,inset 1px 0 #e8ecff14}.panel:before{pointer-events:none;content:"";background:linear-gradient(90deg,#07e2ff29,#0000 18px),linear-gradient(#ffc44612,#0000 180px);position:absolute;inset:0}.panel>*{position:relative}.panel h1{color:#f7fbff;letter-spacing:0;margin:0;font-size:clamp(22px,2vw,30px);line-height:1.05}.panel p{color:#aebbe0;max-width:38rem;margin:0;font-size:15px;line-height:1.55}.repo-link{color:#dffbff;background:#07e2ff12;border:1px solid #07e2ff61;border-radius:6px;justify-content:center;align-self:flex-start;align-items:center;min-height:38px;padding:0 14px;font-size:13px;font-weight:800;text-decoration:none;transition:border-color .14s,background .14s,box-shadow .14s;display:inline-flex}.repo-link:hover,.repo-link:focus-visible{background:#07e2ff24;border-color:#07e2ffd1;box-shadow:0 0 22px #07e2ff2e}.repo-link:focus-visible{outline-offset:3px;outline:2px solid #f5f8ff}.controls{width:100%}.panel pre{background:#02040ab8;border:1px solid #e8ecff14;border-radius:8px;min-height:0;margin:0;padding:18px;overflow:auto;box-shadow:inset 0 0 28px #00000042}.panel code{color:#bfd2ff;white-space:pre-wrap;font-family:Cascadia Code,SFMono-Regular,Consolas,monospace;font-size:12px;font-weight:700;line-height:1.58}.loading-screen{z-index:100;opacity:1;background:repeating-linear-gradient(0deg,#07e2ff0f 0 1px,#0000 1px 9px),radial-gradient(circle at 50% 48%,#07e2ff2e,#0000 28%),linear-gradient(135deg,#03070d,#07101e 54%,#04060c);place-items:center;gap:22px;padding:24px;transition:opacity .36s,visibility .36s;display:grid;position:fixed;inset:0}.loading-screen.is-hidden{visibility:hidden;opacity:0;pointer-events:none}.loading-sigil{aspect-ratio:1;filter:drop-shadow(0 0 20px #07e2ff7a);width:148px;position:relative}.loading-sigil:before,.loading-sigil:after,.loading-sigil span{content:"";position:absolute}.loading-sigil:before{clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);border:2px solid #07e2ffb8;animation:5.8s linear infinite sigil-spin;inset:5px}.loading-sigil:after{clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);border:1px solid #ffc446cc;animation:1.6s ease-in-out infinite sigil-pulse;inset:32px}.loading-sigil span:first-child{background:linear-gradient(#0000,#07e2ff,#0000);width:2px;height:82%;top:9%;left:50%;transform:translate(-50%)}.loading-sigil span:nth-child(2){background:linear-gradient(90deg,#0000,#ffc446,#0000);width:82%;height:2px;top:50%;left:9%;transform:translateY(-50%)}.loading-sigil span:nth-child(3){border:2px solid #e8ffffcc;border-radius:50%;animation:.98s steps(5,end) infinite sigil-scan;inset:47px;box-shadow:0 0 22px #07e2ff94,inset 0 0 20px #07e2ff3d}.loading-copy{text-align:center;width:min(100%,520px)}.loading-kicker{color:#82f4ff;letter-spacing:0;text-transform:uppercase;margin:0 0 10px;font-size:12px;font-weight:900}.loading-copy h2{color:#f7fbff;letter-spacing:0;margin:0;font-size:clamp(28px,5vw,54px);line-height:1}.loading-copy p:last-child{color:#aebbe0;margin:14px 0 0;font-size:15px;line-height:1.5}.loading-meter{background:#02040adb;border:1px solid #07e2ff57;border-radius:999px;width:min(100%,420px);height:8px;overflow:hidden;box-shadow:0 0 24px #07e2ff33}.loading-meter span{background:linear-gradient(90deg,#07e2ff,#ffc446,#07e2ff);width:42%;height:100%;animation:1.1s ease-in-out infinite loading-meter;display:block;box-shadow:0 0 18px #ffc4468c}.dissolve-style-controls{z-index:10;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#05070db8;border:1px solid #e8ecff29;border-radius:8px;gap:10px;width:min(100% - 32px,560px);padding:8px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 18px 48px #0000006b}.dissolve-style-button{isolation:isolate;border:1px solid color-mix(in srgb, var(--style-edge), transparent 42%);background:radial-gradient(circle at 50% -25%, color-mix(in srgb, var(--style-edge), transparent 38%), transparent 54%), linear-gradient(135deg, color-mix(in srgb, var(--style-mask), #05070d 76%), #05070de6);color:#f5f8ff;min-width:0;min-height:52px;font:inherit;letter-spacing:0;text-transform:uppercase;cursor:pointer;border-radius:7px;flex:1 1 0;justify-content:center;align-items:center;gap:9px;font-size:13px;font-weight:800;transition:border-color .14s,box-shadow .14s,transform .14s,background .14s;display:flex;position:relative;overflow:hidden}.dissolve-style-button:before{z-index:-1;content:"";background:linear-gradient(110deg, transparent, color-mix(in srgb, var(--style-edge), transparent 68%), transparent);opacity:0;transition:opacity .14s,transform .22s;position:absolute;inset:0;transform:translate(-70%)}.dissolve-style-button:hover,.dissolve-style-button:focus-visible{border-color:var(--style-edge);box-shadow:0 0 20px color-mix(in srgb, var(--style-edge), transparent 48%), inset 0 0 18px color-mix(in srgb, var(--style-mask), transparent 72%)}.dissolve-style-button:hover:before,.dissolve-style-button:focus-visible:before{opacity:1;transform:translate(70%)}.dissolve-style-button:active{transform:translateY(1px)scale(.99)}.dissolve-style-button:focus-visible{outline-offset:3px;outline:2px solid #f5f8ff}.dissolve-style-button.is-active{border-color:var(--style-edge);background:radial-gradient(circle at 50% -35%, color-mix(in srgb, var(--style-edge), transparent 8%), transparent 58%), linear-gradient(135deg, color-mix(in srgb, var(--style-mask), #05070d 48%), color-mix(in srgb, var(--style-edge), #05070d 72%));box-shadow:0 0 26px color-mix(in srgb, var(--style-edge), transparent 40%), inset 0 0 22px color-mix(in srgb, var(--style-edge), transparent 65%)}.dissolve-style-orb{background:radial-gradient(circle at 35% 30%, #fff, var(--style-edge) 24%, transparent 48%), radial-gradient(circle, var(--style-mask), transparent 70%);width:16px;height:16px;box-shadow:0 0 12px var(--style-edge), 0 0 24px color-mix(in srgb, var(--style-edge), transparent 35%);border-radius:50%;flex:0 0 16px}.dissolve-style-button-fire .dissolve-style-orb{border-radius:48% 52% 50% 50%/58% 58% 42% 42%;transform:rotate(45deg)}.dissolve-style-button-toxic .dissolve-style-orb{box-shadow:0 0 10px var(--style-edge), 0 0 0 4px color-mix(in srgb, var(--style-mask), transparent 78%), 0 0 25px color-mix(in srgb, var(--style-edge), transparent 28%)}.dissolve-style-button-void .dissolve-style-orb{background:radial-gradient(circle at 50% 50%, #05070d 0 31%, transparent 33%), radial-gradient(circle, var(--style-edge), var(--style-mask) 62%, transparent 72%)}.inspector-button{z-index:10;color:#e8ecff;min-width:104px;min-height:38px;font:inherit;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#05070dd1;border:1px solid #e8ecff47;border-radius:6px;font-size:14px;font-weight:600;transition:border-color .12s,background .12s,transform .12s;position:fixed;bottom:16px;left:16px}.inspector-button:hover{background:#141c2ce6;border-color:#e8ecff94}.inspector-button:active{transform:translateY(1px)}.inspector-button:focus-visible{outline-offset:3px;outline:2px solid #8ab4ff}@keyframes sigil-spin{to{transform:rotate(360deg)}}@keyframes sigil-pulse{0%,to{opacity:.48;transform:scale(.9)}50%{opacity:1;transform:scale(1.04)}}@keyframes sigil-scan{0%,to{opacity:.32;transform:scale(.82)}50%{opacity:1;transform:scale(1.12)}}@keyframes loading-meter{0%{transform:translate(-110%)}to{transform:translate(250%)}}@media (width<=900px){body{overflow:auto}.app{grid-template-rows:minmax(520px,70vh) auto;grid-template-columns:1fr;height:auto;min-height:100%}.panel{border-top:1px solid #07e2ff3d;border-left:0;height:auto;max-height:none}}@media (width<=560px){.dissolve-style-controls{flex-wrap:wrap;gap:8px;bottom:12px}.dissolve-style-button{flex-basis:calc(50% - 4px);min-height:46px;font-size:12px}}