:root{--bg:#15171c;--panel:#1c1f26db;--line:#ffffff17;--text:#eceae6;--muted:#9a9ca3;--accent:#e8a48c;--blue:#5fa0ff;--green:#2bd47d;--red:#ff6250;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}.app{position:fixed;inset:0}.canvas{touch-action:none;inset:0;position:absolute!important}.topbar{padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:0;left:0;right:0}.brand{letter-spacing:.2px;pointer-events:auto;font-size:17px;font-weight:650}.tag{text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);vertical-align:2px;border-radius:6px;margin-left:6px;padding:1px 6px;font-size:11px;font-weight:600}.modes{background:var(--panel);border:1px solid var(--line);pointer-events:auto;-webkit-backdrop-filter:blur(12px);border-radius:12px;padding:4px;display:flex}.modes button{color:var(--muted);background:0 0;border:0;border-radius:9px;padding:9px 16px;font-weight:550}.modes button.on{background:var(--accent);color:#1b1410}.panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);-webkit-overflow-scrolling:touch;border-radius:16px;position:absolute;overflow:auto}.panel.left{width:230px;max-height:calc(100% - 150px);padding:10px 14px 14px;top:70px;left:14px}.panel.left.collapsed{width:auto;padding:6px 10px}.panel.right{width:340px;max-height:calc(100% - 150px);top:70px;right:14px}.panel-toggle{background:0 0;border:0;padding:4px 0;font-weight:650}.layer-row{grid-template-columns:88px 1fr;align-items:center;gap:8px;padding:6px 0;display:grid}.switch{align-items:center;gap:8px;font-size:15px;display:flex}.switch input{width:20px;height:20px;accent-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent);height:28px}h3{margin:4px 0;font-size:19px}h4{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 8px;font-size:13px;font-weight:600}.card{padding:14px 16px 18px}.muted{color:var(--muted);font-size:14px;line-height:1.4}.latin{color:var(--accent);margin:0 0 12px;font-style:italic}.zone{text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-top:8px;font-size:12px}dl{margin:12px 0 0}dl>div{border-top:1px solid var(--line);padding:8px 0}dt{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;font-size:12px}dd{margin:0;font-size:15px;line-height:1.4}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);background:#ffffff0d;border-radius:999px;padding:8px 12px;font-size:14px}.chip.on{background:var(--accent);border-color:var(--accent);color:#1b1410}.btn{border:1px solid var(--line);background:#ffffff12;border-radius:10px;margin-top:10px;padding:10px 14px;font-weight:550}.btn.primary{background:var(--accent);color:#1b1410;border-color:var(--accent)}.btn.on{outline:2px solid var(--green)}.btn:disabled{opacity:.4}.link{color:var(--accent);background:0 0;border:0;padding:0;font-size:14px}.row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.group{margin-top:6px}.list-item{border:0;border-top:1px solid var(--line);text-align:left;background:0 0;flex-direction:column;align-items:flex-start;width:100%;padding:10px 0;display:flex}.list-item span{font-size:15px}.list-item small{color:var(--muted);font-style:italic}.stats{border-collapse:collapse;width:100%;font-size:13px}.stats td{padding:4px 0}.stats td:first-child{width:48%;padding-right:6px}.bar{background:#ffffff14;border-radius:4px;height:8px;margin:0 3px;display:block;overflow:hidden}.bar span{background:var(--blue);height:100%;display:block}.legend{color:var(--muted);font-size:13px}.dot{border-radius:50%;width:10px;height:10px;margin:0 4px -1px 8px;display:inline-block}.dot.red{background:#bd3330}.dot.blue{background:#788cae}.task{background:#e8a48c1a;border:1px solid #e8a48c59;border-radius:12px;margin-top:14px;padding:12px;font-size:15px;line-height:1.4}.task-label{text-transform:uppercase;color:var(--accent);letter-spacing:.4px;margin-bottom:4px;font-size:12px}.result{border:1px solid var(--line);border-radius:12px;margin-top:16px;padding:12px}.result.ok{border-color:#2bd47d80}.result.fail{border-color:#ff625080}.score{align-items:baseline;gap:4px;font-size:15px;display:flex}.score b{font-size:34px}.score span{margin-left:auto;font-weight:650}.result.ok .score span{color:var(--green)}.result.fail .score span{color:var(--red)}.result ul{margin:8px 0;padding-left:18px}.result li{margin:5px 0;font-size:14px;line-height:1.35}.result li.ok{color:var(--green)}.result li.err{color:#ffb2a8}.expr-bar{left:50%;bottom:calc(env(safe-area-inset-bottom) + 30px);background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);border-radius:999px;align-items:center;gap:6px;max-width:calc(100% - 24px);padding:6px 8px;display:flex;position:absolute;overflow-x:auto;transform:translate(-50%)}.expr-label{color:var(--muted);white-space:nowrap;padding:0 4px 0 8px;font-size:13px}.expr-bar .chip{white-space:nowrap}.credits{bottom:calc(env(safe-area-inset-bottom) + 6px);text-align:center;color:#ffffff59;pointer-events:none;font-size:10.5px;position:absolute;left:0;right:0}.credits a{color:inherit;pointer-events:auto}.loader{background:var(--bg);color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.loader-ring{border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:42px;height:42px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.panel.right{width:auto;top:auto;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 84px);max-height:38%}.panel.left{width:200px}.expr-bar{bottom:calc(env(safe-area-inset-bottom) + 26px)}.brand{font-size:15px}.modes button{padding:8px 10px}}@media (width<=560px){.topbar{flex-direction:column;align-items:flex-start;gap:8px}.panel.left{top:110px}.panel.right{max-height:30%}}
