/* Self-hosted fonts (latin subset) — passes font-src 'self', works offline */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('./fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/inter-latin-600-normal.woff2') format('woff2'); }

body { margin:0; background:#050505; color:#fff; font-family:'Inter','Segoe UI',sans-serif; height:100vh; overflow:hidden; display:flex; justify-content:center; align-items:center; }
.tp-container { position:fixed; bottom:20px; right:20px; width:360px; max-height:90vh; height:fit-content; background:#1a1a1a; border:1px solid #333; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.8); z-index:100; overflow-y:auto; padding-bottom:16px; }
.tp-container::-webkit-scrollbar{width:6px} .tp-container::-webkit-scrollbar-thumb{background:#444;border-radius:3px}
.logo-header{ display:flex; align-items:center; gap:10px; padding:12px 14px 10px 14px; position:sticky; top:0; background:#1a1a1a; z-index:10; border-radius:16px 16px 0 0; border-bottom:1px solid #2a2a2a; }
.logo{ width:36px; height:36px; border-radius:8px; flex-shrink:0; }
.logo-title{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; color:#fafafa; line-height:1.2; }
.logo-sub{ font-family:'Inter',sans-serif; font-weight:500; font-size:10px; color:#999; margin-top:2px;}
.canvas-wrapper{ position:fixed; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; padding:20px 400px 20px 20px; box-sizing:border-box; }
@media (max-width:900px){ .canvas-wrapper{ padding:12px 12px 400px 12px; } .tp-container{ left:12px; right:12px; width:auto; bottom:12px; max-height:46vh; } }
#canvas, #glCanvas { max-width:100%; max-height:100%; object-fit:contain; display:block; box-shadow:0 0 40px rgba(0,0,0,0.9); background:#000; background-image: linear-gradient(45deg, #222 25%, transparent 25%), linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%), linear-gradient(-45deg, transparent 75%, #222 75%); background-size:20px 20px; background-position:0 0, 0 10px, 10px -10px, -10px 0px; }
#glCanvas{ display:none; }
.tp-dfwv{ font-family:'Inter',sans-serif !important; width:100%; }
.tp-rotv_t,.tp-fldv_t{ font-family:'DM Sans',sans-serif !important; font-weight:700 !important; letter-spacing:0.5px; }
.tp-rotv{ --btn-bg:#2a2a2a; --btn-bg-active:#3a3a3a; --input-bg:#2a2a2a; --input-bg-active:#3a3a3a; background-color:#1a1a1a; }
.mode-hint{ font-size:10px; color:#888; padding:0 8px 6px 8px; line-height:1.4; }