*{box-sizing:border-box;margin:0;padding:0}:root{--panel-bg:#1008209e;--panel-border:#ffb47838;--text:#f5ecff;--text-dim:#f5ecffa6;--accent:#ff8c42;--accent-hover:#ffa35e}html,body{width:100%;height:100%;color:var(--text);background:#150a28;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;overflow:hidden}#banner-frame{width:min(100vw,300vh);height:min(33.3333vw,100vh);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 48px #00000073}#scene-container{position:absolute;inset:0}#scene-container canvas{display:block}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(14px);border-radius:14px;box-shadow:0 8px 32px #00000059}.top-panel{z-index:10;width:min(340px,100vw - 48px);padding:20px 22px;position:fixed;top:24px;left:24px}.top-panel h1{letter-spacing:.4px;background:linear-gradient(90deg,#ffd166,#ff8c42,#e05780);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:700}.tagline{color:var(--text-dim);margin-top:4px;font-size:12.5px}#user-form{gap:8px;margin-top:14px;display:flex}#username-input{min-width:0;color:var(--text);background:#00000052;border:1px solid #ffffff24;border-radius:9px;outline:none;flex:1;padding:10px 12px;font-size:14px;transition:border-color .15s}#username-input:focus{border-color:var(--accent)}#username-input::placeholder{color:#f5ecff59}#generate-btn{background:var(--accent);color:#2b1200;cursor:pointer;white-space:nowrap;border:none;border-radius:9px;padding:10px 16px;font-size:14px;font-weight:600;transition:background .15s,transform .1s}#generate-btn:hover:not(:disabled){background:var(--accent-hover)}#generate-btn:active:not(:disabled){transform:scale(.97)}#generate-btn:disabled{opacity:.55;cursor:wait}.status{min-height:16px;color:var(--text-dim);margin-top:10px;font-size:12.5px}.status.error{color:#ff9d9d}.city-footer{z-index:10;pointer-events:none;justify-content:space-between;align-items:flex-end;gap:12px;height:28%;padding:0 2.8% 2.2%;display:flex;position:absolute;bottom:0;left:0;right:0}.city-footer>*{pointer-events:auto}.city-meta{flex-direction:column;gap:4px;min-width:0;padding-top:10px;display:flex}.footer-user{font-size:clamp(18px,2vw,30px);font-weight:700;line-height:1.3}.footer-total{color:var(--text-dim);font-size:clamp(12px,1.2vw,18px);line-height:1.35}.footer-link{color:#ffb478d9;margin-top:2px;font-size:clamp(11px,1.05vw,16px);line-height:1.35;text-decoration:none}.footer-link:hover{color:var(--accent-hover);text-decoration:underline}.action-bar{flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:8px;display:flex}.action-btn{color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(10px);white-space:nowrap;background:#100820b8;border:1px solid #ffffff29;border-radius:7px;padding:7px 12px;font-size:clamp(10px,1.4vw,12px);font-weight:600;transition:border-color .15s,background .15s}.action-btn:hover{border-color:var(--accent);background:#ff8c421f}.action-btn.primary{background:var(--accent);color:#2b1200;border-color:#0000}.action-btn.primary:hover{background:var(--accent-hover)}.credit-link{color:#f5ecff6b;z-index:10;font-size:clamp(11px,1vw,15px);text-decoration:none;transition:color .15s;position:absolute;top:10px;right:12px}.credit-link:hover{color:#f5ecffbf}.hidden{display:none!important}@media (width<=640px){.city-footer{flex-direction:column;align-items:stretch;padding:0 2% 1.5%}.action-bar{justify-content:stretch}.action-btn{text-align:center;flex:1;padding:6px 8px}}