html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#eee8df;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}canvas{display:block}.hud{position:fixed;inset:0;pointer-events:none;color:#f6f1e8}.pill{pointer-events:auto;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(53,43,35,.72);border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 38px rgba(47,35,25,.18),inset 0 1px rgba(255,255,255,.12);border-radius:999px}.topbar{position:absolute;top:22px;left:50%;transform:translateX(-50%);height:50px;display:flex;align-items:center;gap:16px;padding:0 20px;font-size:12px;letter-spacing:.26em;font-weight:750}.dot{width:8px;height:8px;background:#f7f1e8;border-radius:50%}.more{font-size:18px;letter-spacing:.15em;opacity:.82;margin-left:4px}.settings{position:absolute;top:84px;left:50%;transform:translateX(-50%);width:315px;padding:16px 20px;border-radius:22px;display:none}.settings.open{display:block}.row{margin:8px 0 16px}.row label{display:block;font-size:13px;margin-bottom:8px;color:#f1ebe2}.row input[type=range]{width:100%;accent-color:#f5efe6}.wire{display:flex;align-items:center;gap:10px;font-size:13px}.bottom{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center}.views{display:flex;padding:4px}.views button,.actions button{border:0;background:transparent;color:#f2ece4;padding:10px 18px;border-radius:999px;font:600 13px/1 inherit;cursor:pointer}.views button.active{background:#f3ede4;color:#2f2924;box-shadow:0 1px 7px rgba(0,0,0,.12)}.actions{display:flex;padding:4px}.actions button{font-size:17px;padding:9px 14px}.brand{position:absolute;right:20px;bottom:20px;color:rgba(83,64,48,.45);font-size:11px;letter-spacing:.12em}.hint{position:absolute;left:18px;bottom:18px;color:rgba(74,56,43,.48);font-size:11px}@media(max-width:700px){.settings{width:min(78vw,315px)}.views button{padding:10px 12px}.hint,.brand{display:none}}
/* Keep the version and view controls legible in a narrow preview panel. */
.topbar{white-space:nowrap;letter-spacing:.14em;gap:12px;font-size:11px}
.bottom{max-width:calc(100vw - 24px)}
.views{min-width:0;overflow-x:auto;scrollbar-width:none}
.views button{white-space:nowrap;flex-shrink:0}
.actions{flex-shrink:0}
@font-face{font-family:DreamerTM;src:url('../assets/DreamerTM-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.brand-name{font-family:DreamerTM,Inter,ui-sans-serif,system-ui,sans-serif;font-size:32px;letter-spacing:.10em;font-weight:400}
.topbar{height:auto;min-height:0;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;pointer-events:none}
.brand-name{text-transform:uppercase;color:#639eae}
.controls-toggle{width:30px;height:30px;margin-left:2px;padding:5px;border:0;border-radius:50%;background:transparent;color:#f2ece4;display:grid;place-items:center;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.controls-toggle:hover,.controls-toggle:focus-visible{background:rgba(255,255,255,.14);color:#fff;outline:none}
.controls-toggle:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.36)}
.controls-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.icon-button{width:38px;height:38px;padding:9px;border:0;border-radius:50%;background:transparent;color:#f2ece4;display:grid;place-items:center;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.icon-button:hover,.icon-button:focus-visible{background:rgba(255,255,255,.14);color:#fff;outline:none}
.icon-button:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.36)}
.icon-button:active,.controls-toggle:active{transform:scale(.94)}
.icon{width:20px;height:20px;display:block;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.play-icon{display:none}
#pause[data-paused="true"] .pause-icon{display:none}
#pause[data-paused="true"] .play-icon{display:block}
.actions{gap:1px}
.actions .controls-toggle{width:38px;height:38px;padding:9px;margin-left:0}
.actions .controls-toggle svg{width:20px;height:20px}
.x-link{pointer-events:auto;width:44px;height:52px;margin-left:4px;color:#639eae;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;align-self:center;border-radius:22px;transition:background .18s ease,color .18s ease,transform .18s ease}
.x-link:hover,.x-link:focus-visible{background:rgba(99,158,174,.14);color:#477e8d;outline:none}
.x-link:focus-visible{box-shadow:0 0 0 2px rgba(99,158,174,.30)}
.x-link:active{transform:scale(.94)}
.x-follow{font:600 7px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em}
.x-link svg{width:30px;height:30px;fill:currentColor;stroke:none}