:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e5ecf4;background:#08111f;--border:#243248}*{box-sizing:border-box}html,body{height:100%;margin:0}button,input{font:inherit}button{cursor:pointer}.app{min-height:100vh}.topbar{height:75px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--border);background:#0c1727;gap:20px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,#7ca4ff,#9f89f4);color:#0b1623;display:grid;place-items:center;font-weight:950;font-size:24px;position:relative}.brand-mark span{position:absolute;font-size:12px;right:4px;top:4px;color:#fff}.brand b{font-size:17px;letter-spacing:-.5px}.brand-tld{color:#8baeff}.brand small{display:block;color:#72839a;font-size:9px;letter-spacing:1.8px;font-weight:750;margin-top:5px}.top-center{font-size:10px;color:#869bb6;font-weight:800;letter-spacing:1.7px}.top-sep{padding:0 13px;color:#455a78}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5fe1b3;margin-right:11px;box-shadow:0 0 11px #5fe1b3}.top-right{display:flex;align-items:center;gap:20px}.edition{font-size:10px;font-weight:700;letter-spacing:1px;color:#9badd0}.readme{text-decoration:none;color:#dae4f7;border:1px solid #33445b;padding:11px 14px;font-size:12px;font-weight:700;border-radius:8px}.main{display:grid;grid-template-columns:300px minmax(430px,1fr) 288px;min-height:calc(100vh - 75px)}.sidebar{border-right:1px solid var(--border);background:#0b1524;display:flex;flex-direction:column;min-width:0;height:calc(100vh - 75px)}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:23px 19px 16px}.eyebrow{color:#8396b4;font-size:10px;font-weight:850;letter-spacing:1.6px}.panel-heading h2{font-size:18px;margin:8px 0 0;letter-spacing:-.5px}.counter{font-size:11px;color:#91a3b8;border:1px solid #33435c;padding:4px 7px;border-radius:5px}.searchbar{height:42px;margin:0 16px 20px;border:1px solid #2c3d56;border-radius:9px;display:flex;align-items:center;padding:0 11px;background:#101f32;gap:8px;color:#8ca0ba}.searchbar>span{font-size:23px}.searchbar input{min-width:0;flex:1;border:0;outline:0;color:white;background:transparent;font-size:12px}.searchbar kbd{font-size:9px;color:#73849b;border:1px solid #33465f;border-radius:4px;padding:4px}.theme-list{padding:0 11px 18px;display:flex;flex-direction:column;gap:3px;border-bottom:1px solid var(--border)}.theme{border:0;background:transparent;border-radius:8px;width:100%;padding:11px;display:flex;align-items:center;justify-content:space-between;color:#a5b3ca;font-size:12px;font-weight:700;text-align:left}.theme small{color:#7084a1}.theme:hover,.theme.active{background:#172945;color:#dce9ff}.theme.active{box-shadow:inset 3px 0 #8ca9fa}.section-bar{padding:19px 18px 12px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.2px;color:#91a6bf;font-weight:900}.tiny{font-size:9px;letter-spacing:0;color:#637b98}.assets-list{min-height:100px;flex:1;overflow:auto;padding:0 9px;scrollbar-color:#33465c transparent;scrollbar-width:thin}.asset-card{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid transparent;width:100%;text-align:left;color:#dce8fa;padding:9px;border-radius:9px;margin-bottom:4px}.asset-card:hover{background:#142338}.asset-card.selected{border-color:#2f456b;background:linear-gradient(90deg,#1a304b,#112238)}.asset-icon{display:grid;place-items:center;width:39px;height:40px;background:color-mix(in srgb,var(--accent) 15%,#0e2036);border:1px solid color-mix(in srgb,var(--accent) 26%,#20354a);border-radius:9px;font-size:20px;flex-shrink:0}.card-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.card-copy b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-copy small{font-size:10px;color:#798da7}.card-arrow{color:#7188a5;font-size:22px}.empty{padding:25px;color:#8b9cb1;font-size:13px}.sidebar-footer{border-top:1px solid var(--border);padding:15px 18px;font-size:11px;color:#93a9bf;line-height:1.6}.sidebar-footer span{font-size:18px;color:#87a4ee;margin-right:5px}.sidebar-footer small{color:#637a96}.stage{display:flex;flex-direction:column;min-width:0;padding:24px 24px 0;background:radial-gradient(ellipse at 50% 24%,#111f35 0%,#0a1423 62%,#091321 100%)}.stage-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.breadcrumb{font-size:11px;letter-spacing:1.4px;color:#798eab;font-weight:850}.breadcrumb span{margin:0 8px;color:#384963}.breadcrumb strong{color:#b8c8de;font-weight:750}.badge{color:#74d9be;background:#11342f;border:1px solid #27634f;border-radius:5px;padding:7px 9px;font-size:9px;letter-spacing:1px;font-weight:900}.canvas-wrap{height:min(63vh,650px);min-height:345px;position:relative;border:1px solid #334460;overflow:hidden;border-radius:15px;background:radial-gradient(ellipse at 50% 33%,#172b45,#0a1221 75%);box-shadow:0 18px 80px #0004}.canvas-wrap:fullscreen{height:100vh;min-height:100vh;border-radius:0}.canvas-wrap canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.canvas-wrap canvas:active{cursor:grabbing}.canvas-left{position:absolute;top:22px;left:25px;display:flex;align-items:center;gap:11px;pointer-events:none}.cross{font-size:18px;color:#9cb3c9}.orbit-hint{font-size:9px;letter-spacing:1.4px;color:#6f8ca8;font-weight:750}.canvas-bottom{position:absolute;bottom:16px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}#status{background:#10243bdb;border:1px solid #31506b;padding:9px 11px;border-radius:6px;color:#9ad7c1;font-size:11px}#status[data-kind="bad"]{color:#f8a3a3;border-color:#8e4343}.canvas-actions{display:flex;gap:5px;pointer-events:auto}.canvas-actions button{width:33px;height:33px;border:1px solid #35506b;border-radius:7px;background:#102239bd;color:#cbdaf0;font-size:19px}.canvas-actions button:hover{background:#294565}.stage-controls{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:21px 1px 19px;border-bottom:1px solid var(--border)}.toggle-wrap{display:flex;align-items:center;gap:10px}.toggle-wrap b{font-size:11px;color:#adbed4;font-weight:650}.switch{display:inline-block;position:relative;width:35px;height:20px}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;border-radius:40px;background:#2d4059;transition:.2s}.switch span:before{content:'';position:absolute;width:14px;height:14px;border-radius:50%;top:3px;left:3px;background:#d5e1f0;transition:.2s}.switch input:checked+span{background:#638ce4}.switch input:checked+span:before{transform:translateX(15px);background:#fff}.brightness{display:flex;align-items:center;gap:10px;color:#9fb3ce;font-size:11px}.brightness span{font-size:19px}.brightness input{width:84px;accent-color:#7d9ef5}.keyboard{margin-left:auto;color:#a4b4cf;border:1px solid #2d405b;border-radius:6px;padding:8px 10px;font-size:11px}.keyboard span{font-size:9px;color:#6d84a2;margin-left:5px;letter-spacing:.6px}.stage-notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:23px 0}.note{display:flex;align-items:flex-start;gap:12px}.note-icon{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;background:#152a43;color:#98c1f1;border:1px solid #2c4360;border-radius:10px;font-size:18px}.note b{font-size:12px;display:block;font-weight:730;line-height:1.35}.note small{display:block;font-size:11px;color:#7f93ad;line-height:1.65;margin-top:5px}.inspector{border-left:1px solid var(--border);background:#0d192a;padding:25px 18px 19px;min-width:0}.inspector-top{display:flex;justify-content:space-between;gap:5px}.inspector-top>span:last-child{font-size:11px;color:#9cb0c9;font-variant-numeric:tabular-nums}.avatar{width:75px;height:75px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent,#74a6ff) 17%,#12243a);border:1px solid color-mix(in srgb,var(--accent,#74a6ff) 45%,#2a3c52);font-size:35px;border-radius:17px;margin:25px 0 16px}.inspector h1{font-size:24px;margin:0;line-height:1.2;letter-spacing:-.7px}.english{margin:7px 0;color:#8d9fbd;font-size:12px}.description{font-size:12px;line-height:1.8;color:#b5c4d8;margin:20px 0 20px}.inspector hr{border:0;border-top:1px solid var(--border)}.label-row{display:flex;justify-content:space-between;font-size:10px;color:#8ba3c1;margin:25px 0 14px;letter-spacing:.65px}.label-row span{color:#647993}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}.metrics div{background:#142338;border:1px solid #283c56;border-radius:8px;padding:12px 9px;min-width:0}.metrics b{font-size:16px;display:block;color:#e5effd;font-variant-numeric:tabular-nums}.metrics span{color:#7d93af;font-size:10px;display:block;margin-top:5px}.metrics div:last-child{grid-column:span 2}.format{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #23344c;font-size:11px;color:#8da1bb}.format strong{color:#d2deef;font-size:10px}.download{margin-top:22px;background:linear-gradient(100deg,#7da1fa,#8f90ee);border-radius:10px;display:block;text-align:center;padding:15px 8px;color:#081223;font-weight:900;font-size:12px;text-decoration:none}.download:hover{filter:brightness(1.13)}.snippet-top{display:flex;justify-content:space-between;align-items:center;color:#8fa5c5;font-size:10px;letter-spacing:1px;margin-top:29px;font-weight:850}.snippet-top button{background:#182b44;color:#b1d1ea;border:1px solid #2d445e;border-radius:6px;padding:5px 9px;font-size:16px}pre{overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#091323;border:1px solid #27374f;border-radius:8px;padding:12px;color:#a1c4e2;font-size:10.5px;line-height:1.7;margin-top:10px;max-height:185px}.inspector-foot{font-size:11px;color:#7e93af;line-height:1.75;margin-top:25px}.inspector-foot code{color:#b2c5de;font-size:10px}
@media(max-width:1220px){.main{grid-template-columns:262px minmax(350px,1fr)}.inspector{grid-column:2;border-top:1px solid var(--border);border-left:0}.inspector .metrics{grid-template-columns:repeat(3,1fr)}.metrics div:last-child{grid-column:auto}.sidebar{grid-row:1/3;height:auto;max-height:calc(100vh - 75px);position:sticky;top:0}.stage{min-height:670px}.top-center{display:none}}
@media(max-width:730px){.topbar{padding:0 14px;height:66px}.brand-mark{width:35px;height:35px;font-size:21px}.brand b{font-size:15px}.brand small{font-size:8px}.edition{display:none}.readme{font-size:10px;padding:9px}.main{display:block}.sidebar{max-height:none;position:static;height:auto;border-right:0}.theme-list{display:flex;flex-direction:row;overflow:auto;padding-bottom:13px}.theme{flex-shrink:0;width:auto}.theme small{margin-left:6px}.assets-list{display:flex;overflow:auto;gap:6px;padding:7px 12px 15px;max-height:115px}.asset-card{min-width:164px;margin:0}.card-arrow{display:none}.sidebar-footer{display:none}.section-bar{padding:13px 15px 3px}.panel-heading{margin:15px 16px 13px}.searchbar{margin-bottom:13px}.stage{padding:17px 12px 0;min-height:0}.canvas-wrap{height:52vh;min-height:320px}.stage-controls{gap:15px}.keyboard{display:none}.stage-notes{grid-template-columns:1fr;gap:14px;padding:17px 0}.inspector{padding:20px 15px}.inspector .metrics{grid-template-columns:repeat(3,1fr)}.inspector h1{font-size:21px}.inspector-foot{margin-bottom:20px}}

.asset-icon{overflow:hidden;padding:0}.asset-icon img{width:100%;height:100%;object-fit:cover;display:block}.asset-card.selected .asset-icon{box-shadow:0 0 0 1px var(--accent)}