:root{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#f4f4f0;font-synthesis:none;--ink:#1d1d1b;--panel:rgba(255,255,252,.91);--line:rgba(20,20,20,.16);--muted:#65655f;--active:#1d1d1b;--active-text:#fff;--bg:#f4f4f0}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--bg)}button,input,select{font:inherit}button,select{color:var(--ink)}button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:6px;min-height:42px;padding:10px 15px;touch-action:manipulation}button:hover{filter:brightness(.93)}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #728dfc;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}
#viewer{position:relative;width:100%;height:100%;min-height:260px;background:var(--bg);isolation:isolate}#canvas-wrap{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}#cover{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:var(--bg);z-index:3}#poster{position:absolute;inset:0;object-fit:contain;width:100%;height:100%;pointer-events:none}#start-card{display:flex;align-items:center;flex-direction:column;gap:20px;z-index:1}#start-card:has(~ #loading:not([hidden])){display:none}.cube{width:42px;height:42px;opacity:.65}.primary{background:var(--active);color:var(--active-text);border-color:var(--active);padding:16px 24px;display:flex;gap:28px;font-size:16px;align-items:center}#load-note{font-size:14px;color:var(--muted);margin:0;background:var(--panel);padding:4px 8px;border-radius:4px}#loading{text-align:center;z-index:2;background:var(--panel);padding:24px;border-radius:8px;max-width:100%}.spinner{display:inline-block;width:26px;height:26px;border:1.5px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin 1s linear infinite}progress{display:block;width:190px;height:4px;accent-color:var(--ink);margin:12px auto 0}#error{text-align:center;max-width:440px;z-index:2;background:var(--panel);padding:24px;border-radius:8px}#error-title{font-size:18px}#error-detail{font-size:14px;line-height:1.5;overflow-wrap:anywhere;color:var(--muted)}
#ui{position:absolute;inset:0;pointer-events:none}#ui button,#ui input,#ui select,#help-panel{pointer-events:auto}.topline{position:absolute;left:24px;right:24px;top:20px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}#stats{padding:6px 9px;border-radius:4px;background:var(--panel);font-variant-numeric:tabular-nums}#help{min-height:32px;width:32px;padding:5px;font-size:15px}.toolbar{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);display:flex;gap:12px;max-width:calc(100% - 24px);align-items:center}.modes,.actions{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--line);background:var(--panel);border-radius:8px;backdrop-filter:blur(10px)}.toolbar button{border:0;background:transparent;white-space:nowrap;font-size:14px}.modes button[aria-pressed=true]{background:var(--active);color:var(--active-text)}.actions button{width:42px;padding:10px}.actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.hint{position:absolute;bottom:17px;left:0;right:0;margin:0;text-align:center;font-size:14px;color:var(--muted)}#help-panel{position:absolute;z-index:4;right:24px;top:65px;max-width:320px;background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:8px;padding:15px 18px;font-size:14px;line-height:1.6;white-space:pre-line;box-shadow:0 8px 25px #00000008}#help-panel p{margin:0}#wire-note{color:var(--muted);margin-top:12px!important}#notice{position:absolute;top:64px;left:24px;max-width:calc(100% - 48px);padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:6px;font-size:14px;line-height:1.4}
#animation{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px);width:440px;padding:5px 8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:14px}#animation button{background:transparent;border:0;min-width:36px;min-height:34px;padding:5px}#timeline{min-width:45px;width:100%;accent-color:var(--ink);height:24px}#time{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);font-size:12px}#clips{max-width:135px;min-width:80px;border:0;background:transparent;padding:6px 0;font-size:12px}noscript{position:absolute;inset:40%;font-size:16px}
@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.5s}}@media(max-width:500px){.topline{left:14px;right:14px;top:14px}.toolbar{gap:6px;bottom:42px}.toolbar button{font-size:13px;padding:9px 10px;min-height:38px}.actions button{width:34px;padding:7px}.modes,.actions{padding:3px}.hint{font-size:12px;bottom:17px}#help-panel{right:14px;max-width:calc(100% - 28px)}#animation{bottom:104px;gap:6px}#clips{max-width:100px}#time{display:none}}@media(max-height:420px){.hint{display:none}.toolbar{bottom:12px}#animation{bottom:74px}.topline{top:10px}#help-panel{top:50px;max-height:calc(100% - 120px);overflow:auto}}@media(max-width:340px){.toolbar{gap:3px;max-width:calc(100% - 10px)}.toolbar button{font-size:12px;padding:8px}.actions button{width:30px;padding:5px}}
#error-more{text-align:left;margin:18px 0;font-size:13px;border-top:1px solid var(--line);padding-top:12px}#error-summary{cursor:pointer;color:var(--muted)}#error-technical{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 monospace;max-height:180px;overflow:auto;color:var(--ink)}
.top-actions{display:flex;align-items:center;gap:8px}#save-view{font-size:14px;max-width:240px;background:var(--active);color:var(--active-text)}
#view-dialog{box-sizing:border-box;width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;padding:28px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);box-shadow:0 20px 80px #0003;margin:auto;font:16px/1.5 Arial,sans-serif}#view-dialog::backdrop{background:#0006}#view-title{font-size:22px;line-height:1.2;font-weight:500;margin:0 0 16px}#view-instructions{margin:0 0 20px;color:var(--muted)}#view-url-label{display:block;font-size:14px;margin-bottom:8px}#saved-view-url{box-sizing:border-box;display:block;resize:vertical;width:100%;min-height:86px;border:1px solid var(--line);border-radius:6px;padding:10px;background:var(--panel);color:var(--ink);font:14px/1.5 Arial,sans-serif;overflow-wrap:anywhere}.view-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:16px}#copy-view{background:var(--active);color:var(--active-text)}#preview-view{font-size:14px;color:var(--ink);text-underline-offset:3px}#view-status{min-height:21px;font-size:14px;color:var(--muted);margin:12px 0}#close-view{font-size:14px}#view-dialog :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:500px){#save-view{font-size:13px;max-width:180px;padding:7px 10px;min-height:36px}.topline{align-items:flex-start;flex-wrap:wrap;gap:8px}#stats{font-size:12px;white-space:nowrap}.top-actions{gap:4px;margin-left:auto}#view-dialog{padding:20px}}
#animation{display:flex;flex-direction:column;align-items:stretch;width:460px;gap:0}
#animation-transport{display:flex;align-items:center;gap:10px;min-width:0}
#animation-setup{display:flex;align-items:center;gap:9px;padding:7px 4px 3px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
#animation-seconds{width:96px;min-width:0;border:1px solid var(--line);border-radius:4px;padding:5px 7px;background:var(--panel);color:var(--ink);font-variant-numeric:tabular-nums}
#animation-duration{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:500px){#animation-transport{gap:5px}}