/* ============================================================ Anim Tool — UNIFIED REDESIGN skin (progressive disclosure) Non-invasive: layers over the existing engine. Activated by . Neutral grey chrome, one red accent. ============================================================ */ :root{ --t-stage:#2b2b2b; --t-bar:#1d1d1d; --t-panel:#1d1d1d; --t-panel-2:#262626; --t-line:#000; --t-text:#d6d6d6; --t-text-2:#8c8c8c; --t-micro:#777; --red:#B23A2E; --xs-action:#8f9285; --xs-timing:#cf9a3a; --xs-dialogue:#3b6ea5; --xs-camera:#6f8f86; --xs-important:#B23A2E; --xs-note:#b9b3a6; --ghost-before:#3b6ea5; --ghost-after:#cf7a33; --rd-topbar-h:52px; --rd-menu-h:32px; --rd-tl-h:236px; } /* ---- when the skin is on, calm everything down ---- */ body.redesign{ background:#0c0c0d; } /* thin desktop menu strip (kept for File/Load/Export access) */ body.redesign #menubar{ height:var(--rd-menu-h); min-height:var(--rd-menu-h); background:var(--t-bar); border-bottom:1px solid var(--t-line); font-size:12px; z-index:60; } body.redesign #menubar .mb-save{ color:var(--t-micro); } /* hide the dock plumbing + the panels we've replaced/relocated */ body.redesign #dock-left, body.redesign #dock-right, body.redesign #dock-bottom, body.redesign .dragger, body.redesign #dropzone{ display:none !important; } /* every floating engine-panel is hidden until summoned */ body.redesign .panelw{ display:none !important; position:fixed !important; z-index:70; width:248px; max-height:70vh; overflow:auto; background:var(--t-panel); color:var(--t-text); border:1px solid var(--t-line); border-radius:16px; box-shadow:0 18px 44px rgba(0,0,0,.55); } body.redesign .panelw.rd-summoned{ display:block !important; } body.redesign .panelw .panelw__bar{ background:#181818; border-radius:16px 16px 0 0; } /* the timeline panel is always-on and pinned to the bottom, not a summon */ body.redesign #pnl-timeline{ display:flex !important; flex-direction:column; position:fixed !important; left:0; right:0; bottom:0; width:auto !important; max-height:none; height:var(--rd-tl-h); border-radius:0; border:none; border-top:1px solid var(--t-line); box-shadow:none; background:var(--t-bar); z-index:45; } body.redesign #pnl-timeline .panelw__bar{ display:none; } body.redesign #pnl-timeline .panelw__body{ padding:0; height:100%; } /* ---- CANVAS HERO ---- */ body.redesign #stage{ position:fixed !important; top:calc(var(--rd-menu-h) + var(--rd-topbar-h)); left:0; right:0; bottom:var(--rd-tl-h); background:var(--t-stage); } body.redesign .zoomhud{ bottom:calc(var(--rd-tl-h) + 12px) !important; left:96px !important; z-index:30; } /* ============================================================ TOP CONTROL BAR (built by ui.js) ============================================================ */ .rd-topbar{ position:fixed; left:0; right:0; top:var(--rd-menu-h); height:var(--rd-topbar-h); display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--t-bar); border-bottom:1px solid var(--t-line); z-index:55; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:var(--t-text); } .rd-seal{ width:24px;height:24px;display:flex;align-items:center;justify-content:center; background:#333;border-radius:6px;font-family:Georgia,serif;font-size:12px;color:#9a9a9a; } .rd-proj{ font-weight:600;font-size:14px;color:#e8e8e8; } .rd-meta{ font-size:11px;color:var(--t-micro); } .rd-spacer{ flex:1; } .rd-ic{ width:38px;height:36px;border:none;border-radius:10px;background:#2c2c2c;color:#cfcfcf;font-size:17px;cursor:pointer; } .rd-ic:hover{ background:#383838; } .rd-chipbtn{ display:flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:none;border-radius:10px;background:#2c2c2c;color:#cfcfcf;font-size:13px;cursor:pointer; } .rd-chipbtn:hover{ background:#383838; } .rd-chipbtn.on{ background:var(--red); color:#fff; } .rd-playwrap{ display:flex;align-items:center;background:#161616;border-radius:11px;padding:4px;gap:2px; } .rd-play{ width:42px;height:30px;border:none;border-radius:8px;background:var(--red);color:#fff;font-size:13px;cursor:pointer; } .rd-count{ font-size:12px;font-weight:600;padding:0 10px;white-space:nowrap;color:#e0e0e0; } .rd-count span{ color:var(--t-micro);font-weight:400; } .rd-export{ height:36px;padding:0 16px;border:none;border-radius:10px;background:#efe9dd;color:#1b1b1b;font-size:13px;font-weight:600;cursor:pointer; } .rd-adv{ display:flex;align-items:center;background:#161616;border-radius:9px;padding:3px;gap:2px;margin-left:2px; } .rd-adv button{ border:none;background:transparent;color:#9a9a9a;font-size:11px;padding:5px 9px;border-radius:6px;cursor:pointer; } .rd-adv button.on{ background:#2c2c2c;color:#e8e8e8; } /* ============================================================ LEFT TOOL STRIP (floating pill) + ⋯ expander ============================================================ */ .rd-toolstrip{ position:fixed; left:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; z-index:40; background:#1b1b1bcc; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--t-line); border-radius:18px; padding:9px; box-shadow:0 12px 30px rgba(0,0,0,.4); } .rd-tool{ width:50px;height:50px;display:flex;align-items:center;justify-content:center; border:none;border-radius:13px;background:transparent;color:#cfcfcf;font-size:22px;cursor:pointer; } .rd-tool:hover{ background:#2a2a2a; } .rd-tool.active{ background:var(--red);color:#fff; } .rd-more{ width:50px;height:38px;border:none;border-radius:13px;background:transparent;color:#9a9a9a;font-size:18px;cursor:pointer; } .rd-more:hover{ background:#2a2a2a; } .rd-sep{ height:1px;background:var(--t-line);margin:2px 8px; } .rd-colorwell{ width:50px;height:50px;border-radius:14px;border:2px solid #3a3a3a;cursor:pointer;box-shadow:inset 0 0 0 3px #1b1b1b; } .rd-morepop{ position:fixed; left:84px; top:50%; transform:translateY(-50%); display:none; flex-direction:column; gap:6px; z-index:42; background:#1f1f1f; border:1px solid var(--t-line); border-radius:16px; padding:9px; box-shadow:0 14px 32px rgba(0,0,0,.5); } .rd-morepop.open{ display:flex; } .rd-morepop button{ display:flex;align-items:center;gap:9px;height:42px;padding:0 14px 0 11px; border:none;border-radius:11px;background:transparent;color:#cfcfcf;font-size:13px;cursor:pointer;white-space:nowrap; } .rd-morepop button:hover{ background:#2a2a2a; } .rd-morepop button.active{ background:var(--red);color:#fff; } .rd-morepop button span{ font-size:18px; } /* ============================================================ RIGHT LABELED EDGE SLIDERS (Size / Opac) ============================================================ */ .rd-rails{ position:fixed; right:18px; top:50%; transform:translateY(-50%); display:flex; gap:12px; z-index:40; } .rd-rail{ display:flex; flex-direction:column; align-items:center; gap:7px; } .rd-rail__lab{ font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#9a9a9a;font-weight:700; } .rd-rail__track{ position:relative;width:32px;height:188px;border-radius:16px;background:#1b1b1bcc;border:1px solid var(--t-line);cursor:pointer;overflow:hidden;touch-action:none; } .rd-rail__fill{ position:absolute;left:0;right:0;bottom:0; } .rd-rail--size .rd-rail__fill{ background:linear-gradient(#c25a4e,#B23A2E); } .rd-rail--opac .rd-rail__fill{ background:linear-gradient(#888,#444); } .rd-rail__knob{ position:absolute;left:50%;width:24px;height:16px;border-radius:5px;background:#efe9dd;transform:translateX(-50%);box-shadow:0 1px 4px rgba(0,0,0,.5); } .rd-rail__val{ font-size:11px;color:#cfcfcf;font-weight:600; } /* ============================================================ BOTTOM SUMMON CLUSTER (one-tap chips) — lives in transport ============================================================ */ .rd-summon{ display:flex;align-items:center;gap:4px;background:#161616;border-radius:11px;padding:4px;margin-left:auto; } .rd-summon button{ height:30px;padding:0 12px;border:none;border-radius:8px;background:#2c2c2c;color:#cfcfcf;font-size:12px;font-weight:600;cursor:pointer; } .rd-summon button:hover{ background:#383838; } .rd-summon button.on{ background:var(--red);color:#fff; } /* restyle the existing transport row into the calm control row */ body.redesign #pnl-timeline .transport{ display:flex;align-items:center;gap:6px;padding:9px 14px; border-bottom:1px solid var(--t-line);background:var(--t-bar);flex-wrap:nowrap;overflow-x:auto; } body.redesign #pnl-timeline .transport .t{ border:none;border-radius:9px;background:#2c2c2c;color:#cfcfcf;cursor:pointer; min-width:34px;height:34px;font-size:13px;padding:0 9px; } body.redesign #pnl-timeline .transport .t.play, body.redesign #pnl-timeline .transport .t.on{ background:var(--red);color:#fff; } body.redesign #pnl-timeline .grid-scroll{ background:var(--t-bar); } /* ============================================================ GUIDE STICKY NOTE (canvas reference) — built by ui.js later ============================================================ */ .rd-guidenote{ position:fixed; right:70px; top:calc(var(--rd-menu-h) + var(--rd-topbar-h) + 18px); width:206px; background:#f4efe4; border-radius:10px; border-left:4px solid var(--xs-action); padding:11px 13px; box-shadow:0 10px 26px rgba(0,0,0,.4); transform:rotate(-1deg); z-index:35; display:none; } .rd-guidenote.show{ display:block; } .rd-guidenote .cat{ font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#9a7a3a;font-weight:700; } .rd-guidenote .ttl{ font-size:19px;font-weight:700;color:#23201d; } /* ============================================================ v26 — POLISH LAYER (micro-interactions, one motion language) ============================================================ */ .rd-ic,.rd-chipbtn,.rd-play,.rd-export,.rd-tool,.rd-more,.rd-summon button,.rd-morepop button{ transition:background .15s ease, transform .08s ease, color .15s ease; } .rd-ic:active,.rd-chipbtn:active,.rd-tool:active,.rd-more:active,.rd-summon button:active, .rd-play:active,.rd-export:active{ transform:scale(.94); } .rd-play{ box-shadow:0 2px 10px rgba(178,58,46,.45); } .rd-play:hover{ background:#c4473a; } .rd-export:hover{ background:#fff8ea; } .rd-colorwell{ transition:transform .12s ease, border-color .15s; } .rd-colorwell:hover{ transform:scale(1.06); border-color:#555; } .rd-tool.active{ box-shadow:0 3px 12px rgba(178,58,46,.5); } /* panels: one open/close model, one animation */ body.redesign .panelw.rd-summoned{ animation:rd-pop .16s ease-out; } @keyframes rd-pop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } } /* the × is a REAL touch target everywhere (Apple minimum ≈44px) */ body.redesign .panelw .panelw__bar{ min-height:44px; display:flex; align-items:center; } body.redesign .panelw .x{ min-width:44px; min-height:44px; margin-left:auto; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; border:none; background:transparent; color:#9a9a9a; cursor:pointer; border-radius:12px; } body.redesign .panelw .x:hover{ background:#2c2c2c; color:#fff; } /* comfier controls inside summoned panels on touch */ body.redesign .panelw select{ background:#262626;color:#d6d6d6;border:1px solid #000;border-radius:8px;padding:6px 8px; } /* ---- toast ---- */ .rd-toast{ position:fixed; left:50%; bottom:calc(var(--rd-tl-h) + 22px); transform:translateX(-50%) translateY(14px); background:#111; color:#e8e8e8; border:1px solid #000; border-radius:12px; padding:10px 18px; font-size:13px; font-weight:600; z-index:95; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; box-shadow:0 12px 30px rgba(0,0,0,.5); max-width:78vw; text-align:center; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; } .rd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ---- TOOL OPTIONS popover (tap the active tool again) ---- */ .rd-toolpop{ position:fixed; left:86px; top:50%; transform:translateY(-50%); display:none; width:236px; z-index:74; background:#1d1d1d; border:1px solid var(--t-line); border-radius:16px; box-shadow:0 18px 44px rgba(0,0,0,.55); padding:10px 14px 14px; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:var(--t-text); } .rd-toolpop.open{ display:block; animation:rd-pop .16s ease-out; } .tp-head{ display:flex; align-items:center; font-size:10px; letter-spacing:.14em; font-weight:800; color:#9a9a9a; margin-bottom:4px; } .tp-x{ margin-left:auto; min-width:40px; min-height:40px; border:none; background:transparent; color:#9a9a9a; font-size:18px; border-radius:10px; cursor:pointer; } .tp-x:hover{ background:#2c2c2c; color:#fff; } .tp-row{ display:flex; align-items:center; gap:9px; min-height:36px; font-size:12px; } .tp-row label{ width:66px; flex:none; color:#b9b9b9; } .tp-row input[type="range"]{ flex:1; min-width:0; } .tp-row b{ width:30px; text-align:right; font-size:11px; color:#e4e4e4; } .tp-row select{ flex:1; background:#262626; color:#d6d6d6; border:1px solid #000; border-radius:8px; padding:7px 8px; } .tp-check{ cursor:pointer; } .tp-check input{ width:18px; height:18px; } .tp-check span{ color:#b9b9b9; } .tp-hint{ font-size:12px; color:#8c8c8c; line-height:1.5; margin:6px 0 2px; } .tp-texname{ flex:1; font-size:11px; color:#8c8c8c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tp-btn{ border:none; border-radius:8px; background:#2c2c2c; color:#cfcfcf; font-size:11px; font-weight:700; padding:8px 11px; cursor:pointer; } .tp-btn:hover{ background:#383838; } .tp-btn.clr:hover{ color:#e08a80; } .b-cyc.on{ color:#fff !important; background:var(--red) !important; } /* the drawn X-sheet lanes mirrored onto the main timeline */ .xs2-strip{ position:sticky; bottom:0; display:block; margin-left:172px; background:#191919; border-top:1px solid #000; cursor:pointer; z-index:5; } .xs2-strip:hover{ background:#1f1f1f; } /* ---- brush-size cursor ring ---- */ .rd-brushcur{ position:fixed; display:none; z-index:34; pointer-events:none; border:1.5px solid rgba(255,255,255,.85); border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.55); min-width:3px; min-height:3px; } .rd-brushcur.drawing{ opacity:.35; } .rd-brushcur span{ position:absolute; left:100%; top:50%; transform:translate(8px,-50%); font:600 11px -apple-system,'Helvetica Neue',Arial,sans-serif; color:#fff; background:#111c; padding:2px 7px; border-radius:6px; white-space:nowrap; } .rd-brushcur span:empty{ display:none; } /* no px readout = no pill */ /* ---- file popover under the 骨 seal ---- */ .rd-seal{ border:none; cursor:pointer; } .rd-seal:hover{ background:#3d3d3d; } .rd-filepop{ position:fixed; left:14px; top:calc(var(--rd-menu-h) + var(--rd-topbar-h) + 4px); transform:none; } /* ---- timeline: in/out range band + drag-to-extend handle ---- */ .rd-range{ position:absolute; top:0; height:26px; z-index:6; display:none; background:rgba(178,58,46,.16); border:1px solid rgba(178,58,46,.5); border-radius:6px; pointer-events:none; } .rd-range.on{ background:rgba(178,58,46,.28); } .rd-range.pending{ border-style:dashed; background:rgba(178,58,46,.08); } .rd-range__grip{ position:absolute; top:-2px; bottom:-2px; width:18px; pointer-events:auto; cursor:ew-resize; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800; background:var(--red); border-radius:6px; touch-action:none; } .rd-range__grip.in{ left:-9px; } .rd-range__grip.out{ right:-9px; } .rd-extend{ position:absolute; top:2px; height:24px; width:26px; z-index:6; display:flex; align-items:center; justify-content:center; cursor:ew-resize; background:#2c2c2c; color:#cfcfcf; border:1px solid #000; border-radius:7px; font-size:12px; font-weight:800; touch-action:none; user-select:none; } .rd-extend:hover{ background:var(--red); color:#fff; } /* ---- FLIP BAR (thumb, movable, both-handed) ---- */ .rd-flip{ position:fixed; left:0; bottom:calc(var(--rd-tl-h) + 26px); height:min(300px,32vh); width:30px; z-index:41; display:flex; flex-direction:column; } .rd-flip.right{ left:auto; right:0; align-items:flex-end; } .rd-flip__move{ width:26px; height:26px; border-radius:0 10px 0 0; background:#181818; border:1px solid var(--t-line); border-left:none; border-bottom:none; color:#666; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:move; touch-action:none; user-select:none; } .rd-flip.right .rd-flip__move{ border-radius:10px 0 0 0; border-left:1px solid var(--t-line); border-right:none; } .rd-flip__move:hover{ color:#fff; } .rd-flip__grip{ width:26px; flex:1; border-radius:0 0 14px 0; background:#1f1f1f; border:1px solid var(--t-line); border-left:none; color:#8c8c8c; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:ns-resize; touch-action:none; user-select:none; box-shadow:6px 0 18px rgba(0,0,0,.3); } .rd-flip.right .rd-flip__grip{ border-radius:0 0 0 14px; border-left:1px solid var(--t-line); border-right:none; box-shadow:-6px 0 18px rgba(0,0,0,.3); } .rd-flip__grip:active{ background:var(--red); color:#fff; } .rd-flip__lab{ position:absolute; left:34px; top:50%; transform:translateY(-50%); font:700 12px -apple-system,'Helvetica Neue',Arial,sans-serif; color:#fff; background:#111c; padding:2px 8px; border-radius:6px; } .rd-flip.right .rd-flip__lab{ left:auto; right:34px; } .rd-flippop.right{ left:auto; right:36px; } .rd-flippop{ position:fixed; left:36px; bottom:calc(var(--rd-tl-h) + 60px); display:none; z-index:80; background:#1d1d1d; border:1px solid #000; border-radius:14px; padding:12px 14px; color:#d6d6d6; width:206px; box-shadow:0 18px 44px rgba(0,0,0,.55); font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; } .rd-flippop.open{ display:block; animation:rd-pop .16s ease-out; } .rd-flippop b{ font-size:10px; letter-spacing:.12em; color:#9a9a9a; } .fp-row{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; } .fp-row span{ width:58px; color:#b9b9b9; } .fp-row i{ width:20px; text-align:center; font-style:normal; font-weight:800; } .fp-row button{ width:36px; height:36px; border:none; border-radius:9px; background:#2c2c2c; color:#cfcfcf; font-weight:800; cursor:pointer; } .fp-row button:hover{ background:#383838; } .rd-flippop p{ font-size:10px; color:#777; margin:10px 0 0; line-height:1.5; } /* ---- ANIMATION DISC ---- */ .rd-disc{ position:absolute; border-radius:50%; z-index:0; pointer-events:none; background:radial-gradient(circle at 50% 40%, #3b3b3d 0%, #333335 55%, #2d2d2f 80%, #28282a 100%); border:1px solid #1e1e1f; box-shadow:0 26px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -14px 40px rgba(0,0,0,.25); } .rd-pegs{ position:absolute; left:50%; top:-26px; transform:translateX(-50%); display:flex; gap:64px; align-items:center; pointer-events:none; z-index:3; } .rd-pegs i{ width:14px; height:14px; border-radius:50%; background:#1b1b1d; box-shadow:inset 0 2px 4px #000, 0 1px 0 rgba(255,255,255,.07); } .rd-pegs b{ width:36px; height:12px; border-radius:6px; background:#1b1b1d; box-shadow:inset 0 2px 4px #000, 0 1px 0 rgba(255,255,255,.07); } .rd-disc__knob{ position:absolute; width:34px; height:34px; z-index:4; cursor:grab; border-radius:50%; background:#2c2c2c; color:#cfcfcf; border:1px solid #000; display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 4px 12px rgba(0,0,0,.5); touch-action:none; user-select:none; } .rd-disc__knob:hover{ background:#383838; } .rd-disc__knob:active{ cursor:grabbing; background:var(--red); color:#fff; } /* ---- timeline resize grab ---- */ .rd-tlgrab{ position:fixed; left:0; right:0; bottom:calc(var(--rd-tl-h) - 5px); height:10px; z-index:48; cursor:ns-resize; touch-action:none; } .rd-tlgrab:hover{ background:linear-gradient(to bottom, transparent 3px, rgba(178,58,46,.6) 4px, rgba(178,58,46,.6) 6px, transparent 7px); } /* ---- hover explanations ---- */ .rd-tip{ position:fixed; transform:translateX(-50%); z-index:98; display:none; max-width:240px; background:#111; color:#e4e4e4; border:1px solid #000; border-radius:10px; padding:7px 11px; font:12px/1.45 -apple-system,'Helvetica Neue',Arial,sans-serif; box-shadow:0 10px 26px rgba(0,0,0,.5); pointer-events:none; text-align:center; } .rd-tip.show{ display:block; } .rd-tiptoggle{ display:flex; align-items:center; gap:9px; margin-top:12px; font-size:13px; cursor:pointer; } .rd-tiptoggle input{ width:17px; height:17px; } /* ---- hide what Bader asked to hide (+ redundant transport buttons: jump = F key, in/out = the draggable band, len = the ⇥ handle) ---- */ #new-pixel, #open-3d, #t-sheet, #t-note{ display:none !important; } body.redesign #t-jump, body.redesign #set-in, body.redesign #set-out{ display:none !important; } body.redesign #pnl-timeline label:has(#tl-len){ display:none !important; } body.redesign label:has(#pixel-mode), body.redesign label:has(#pixel-perfect){ display:none !important; } body.redesign #pnl-tools .tools{ display:none !important; } /* Colour card: swatches only (tools live in the strip) */ /* preview card sizing */ body.redesign #pnl-preview.rd-summoned{ width:300px; } body.redesign #pnl-preview #prev-canvas{ width:100%; display:block; border-radius:0 0 16px 16px; } /* ---- LIVE button + panel ---- */ .rd-livebtn .dot{ width:8px;height:8px;border-radius:50%;background:#666;display:inline-block; } .rd-livebtn.on{ background:var(--red); color:#fff; } .rd-livebtn.on .dot{ background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:rd-pulse 1.6s infinite; } @keyframes rd-pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%{ box-shadow:0 0 0 7px rgba(255,255,255,0);} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0);} } .rd-livepanel{ position:fixed; right:18px; top:calc(var(--rd-menu-h) + var(--rd-topbar-h) + 12px); width:264px; z-index:80; display:none; background:var(--t-panel); border:1px solid var(--t-line); border-radius:16px; box-shadow:0 18px 44px rgba(0,0,0,.55); padding:14px 16px 16px; color:var(--t-text); font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; } .rd-livepanel.open{ display:block; animation:rd-pop .16s ease-out; } .lv-head{ font-size:10px; letter-spacing:.14em; color:var(--t-text-2); font-weight:700; display:flex; align-items:center; margin-bottom:8px; } .lv-x{ margin-left:auto; min-width:40px; min-height:40px; border:none; background:transparent; color:#9a9a9a; font-size:19px; cursor:pointer; border-radius:10px; } .lv-x:hover{ background:#2c2c2c; color:#fff; } .lv-code{ font-size:30px; font-weight:800; letter-spacing:.24em; text-align:center; color:#fff; background:#161616; border-radius:12px; padding:12px 0 11px; margin-bottom:10px; } .lv-btn{ display:block; width:100%; height:42px; border:none; border-radius:11px; background:var(--red); color:#fff; font-size:13px; font-weight:700; cursor:pointer; margin-top:8px; } .lv-btn:hover{ background:#c4473a; } .lv-btn.ghost{ background:#2c2c2c; color:#cfcfcf; } .lv-btn.ghost:hover{ background:#383838; } .lv-btn.danger{ background:#2c2c2c; color:#e08a80; } .lv-btn.danger:hover{ background:#3a2a28; } .lv-or{ text-align:center; font-size:11px; color:var(--t-micro); margin:12px 0 4px; } .lv-row{ display:flex; gap:8px; margin-top:6px; } .lv-row input{ flex:1; min-width:0; text-transform:uppercase; letter-spacing:.18em; font-weight:700; text-align:center; } .lv-row .lv-btn{ width:84px; margin-top:0; } .lv-lab{ display:block; font-size:11px; color:var(--t-text-2); margin-top:10px; } .rd-livepanel input[type="text"]{ width:100%; box-sizing:border-box; margin-top:4px; height:40px; background:#161616; border:1px solid #000; border-radius:10px; color:#e8e8e8; padding:0 12px; font-size:14px; } .lv-chk{ display:flex; align-items:center; gap:9px; font-size:13px; margin-top:12px; min-height:32px; cursor:pointer; } .lv-chk input{ width:18px; height:18px; } .lv-members{ list-style:none; margin:10px 0 2px; padding:0; max-height:150px; overflow:auto; } .lv-members li{ display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 2px; color:#d6d6d6; } .lv-members li em{ color:var(--t-micro); font-style:normal; font-size:11px; } .lv-members li.host{ color:#fff; font-weight:600; } .lv-dot{ width:7px; height:7px; border-radius:50%; background:#5da065; flex:none; } .lv-hand{ margin-left:4px; animation:rd-pulse 1.6s infinite; border-radius:50%; } .lv-pen{ margin-left:auto; opacity:.25; filter:grayscale(1); font-size:13px; padding:4px 6px; border-radius:8px; } .lv-pen.on{ opacity:1; filter:none; } .lv-members li.grantable .lv-pen{ cursor:pointer; } .lv-members li.grantable .lv-pen:hover{ background:#2c2c2c; } /* ═══ ANIMSOUP account gate ═══ */ .as-gate{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 30%, #1a1a1c 0%, #0c0c0d 70%); font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; } .as-gate.open{ display:flex; } .as-card{ width:min(340px, 88vw); background:#1d1d1d; border:1px solid #000; border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.6); padding:28px 26px 22px; text-align:center; color:#d6d6d6; } .as-logo{ font-size:52px; line-height:1; } .as-card h1{ margin:8px 0 2px; font-size:26px; letter-spacing:.02em; color:#fff; } .as-sub{ margin:0 0 16px; font-size:12px; color:#8c8c8c; } .as-body{ font-size:13px; color:#b9b9b9; line-height:1.55; margin:0 0 12px; } .as-tabs{ display:flex; background:#161616; border-radius:11px; padding:4px; gap:4px; margin-bottom:14px; } .as-tabs button{ flex:1; border:none; border-radius:8px; background:transparent; color:#9a9a9a; padding:9px 0; font-size:13px; font-weight:700; cursor:pointer; } .as-tabs button.on{ background:#2c2c2c; color:#fff; } .as-card input{ width:100%; box-sizing:border-box; height:44px; margin:5px 0; padding:0 14px; background:#161616; border:1px solid #000; border-radius:11px; color:#e8e8e8; font-size:14px; } .as-btn{ display:block; width:100%; height:46px; margin-top:12px; border:none; border-radius:12px; background:var(--red); color:#fff; font-size:14px; font-weight:800; cursor:pointer; } .as-btn:hover{ background:#c4473a; } .as-btn.ghost{ background:#2c2c2c; color:#cfcfcf; } .as-btn:disabled{ opacity:.6; } .as-err{ color:#e08a80; font-size:12px; margin:8px 0 0; } .as-beta{ font-size:11px; color:#e0c56a; background:#3a331d55; border:1px solid #3a331d; border-radius:9px; padding:7px 10px; margin:0 0 14px; line-height:1.45; } .as-link{ display:block; width:100%; background:none; border:none; color:#8c8c8c; font-size:12px; margin-top:12px; cursor:pointer; text-decoration:underline; } .as-link:hover{ color:#e8e8e8; } .as-div{ height:1px; background:#262626; margin:16px 0 10px; } .as-avgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:4px 0 10px; } .as-avgrid button{ font-size:22px; padding:8px 0; border:none; border-radius:10px; background:#161616; cursor:pointer; } .as-avgrid button:hover{ background:#2c2c2c; } .as-avgrid button.on{ background:var(--red); } .lv-av{ font-size:15px; flex:none; } .as-note{ font-size:11px; color:#8c8c8c; margin:10px 0 0; line-height:1.5; } .as-priv{ font-size:10px; color:#666; margin:16px 0 0; line-height:1.55; border-top:1px solid #262626; padding-top:12px; } .as-priv a{ color:#8c8c8c; } /* ═══ export ad gate ═══ */ .as-admodal{ position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.75); } .as-admodal.open{ display:flex; } .as-adcard{ width:min(420px,90vw); background:#1d1d1d; border:1px solid #000; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; } .as-adhead{ padding:14px 18px; font-size:13px; font-weight:800; color:#e8e8e8; background:#181818; border-bottom:1px solid #000; } .as-adbody{ min-height:220px; display:flex; align-items:center; justify-content:center; background:#000; } .as-adtest{ text-align:center; color:#9a9a9a; font-size:12px; } .as-adtest b{ display:block; font-size:44px; color:#fff; margin-bottom:6px; } .as-adnote{ padding:11px 18px; font-size:11px; color:#8c8c8c; margin:0; } .lv-p{ font-size:12px; color:var(--t-text-2); line-height:1.45; margin:8px 0 0; } .lv-p.err{ color:#e08a80; } /* ---- first-run coach ---- */ .rd-coachring{ position:fixed; display:none; z-index:96; pointer-events:none; border:2px solid var(--red); border-radius:18px; box-shadow:0 0 0 6px rgba(178,58,46,.22), 0 0 0 9999px rgba(0,0,0,.45); } .rd-coachpop{ position:fixed; z-index:97; width:250px; background:#1d1d1d; color:#e4e4e4; border:1px solid #000; border-radius:14px; padding:13px 15px; box-shadow:0 18px 44px rgba(0,0,0,.6); font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; } .rd-coachpop b{ font-size:14px; } .rd-coachpop p{ font-size:12px; color:#a8a8a8; line-height:1.45; margin:6px 0 10px; } .rd-coachpop .row{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#777; } .rd-coachpop button{ border:none; border-radius:9px; padding:8px 13px; font-size:12px; font-weight:700; cursor:pointer; margin-left:6px; } .rd-coachpop .skip{ background:#2c2c2c; color:#9a9a9a; } .rd-coachpop .next{ background:var(--red); color:#fff; } /* ---- export pop section labels ---- */ .rd-poplbl{ font-size:9px; letter-spacing:.14em; color:var(--t-micro); font-weight:700; padding:7px 12px 3px; } /* ---- feedback + badge ---- */ .rd-feedback{ position:fixed; right:14px; bottom:calc(var(--rd-tl-h) + 10px); z-index:30; font-size:11px; color:#8c8c8c; text-decoration:none; background:#1b1b1bcc; border:1px solid var(--t-line); padding:6px 11px; border-radius:9px; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; cursor:pointer; } .rd-feedback:hover{ color:#e8e8e8; background:#262626; } .rd-fbpanel{ position:fixed; right:14px; bottom:calc(var(--rd-tl-h) + 44px); width:264px; z-index:81; display:none; background:var(--t-panel); border:1px solid var(--t-line); border-radius:16px; box-shadow:0 18px 44px rgba(0,0,0,.55); padding:12px 14px 14px; color:var(--t-text); font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; } .rd-fbpanel.open{ display:block; animation:rd-pop .16s ease-out; } .rd-fbpanel select, .rd-fbpanel textarea{ width:100%; box-sizing:border-box; background:#161616; border:1px solid #000; border-radius:10px; color:#e8e8e8; font-size:13px; padding:9px 11px; margin-top:8px; font-family:inherit; resize:vertical; } .rd-badge{ position:fixed; left:12px; bottom:calc(var(--rd-tl-h) + 10px); z-index:30; font-size:10px; color:#5c5c5c; background:#141414; border:1px solid var(--t-line); padding:4px 9px; border-radius:7px; font-family:ui-monospace,Menlo,Consolas,monospace; pointer-events:none; } /* ============================================================ VERTICAL X-SHEET (xsheet.js v27) — time runs DOWN, like paper ============================================================ */ .xs2-tab{ position:fixed; right:0; top:38%; z-index:47; writing-mode:vertical-rl; text-orientation:mixed; padding:16px 8px; border:1px solid var(--t-line); border-right:none; border-radius:12px 0 0 12px; background:#1f1f1f; color:#9a9a9a; font-size:11px; font-weight:800; letter-spacing:.14em; cursor:pointer; box-shadow:-6px 0 18px rgba(0,0,0,.35); } .xs2-tab:hover{ color:#fff; background:#262626; } .xs2-tab.open{ background:var(--red); color:#fff; } .xs2{ position:fixed; right:0; top:calc(var(--rd-menu-h) + var(--rd-topbar-h)); bottom:var(--rd-tl-h); z-index:46; display:flex; flex-direction:column; background:#151515; border-left:1px solid var(--t-line); box-shadow:-18px 0 44px rgba(0,0,0,.45); transform:translateX(105%); transition:transform .22s ease; visibility:hidden; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:var(--t-text); } .xs2.open{ transform:none; visibility:visible; } .xs2.open ~ .xs2-tab{ right:auto; } .xs2-head{ display:flex; align-items:center; gap:6px; min-height:46px; padding:0 8px; border-bottom:1px solid var(--t-line); background:var(--t-bar); flex:none; overflow-x:auto; } .xs2-ttl{ font-size:10px; letter-spacing:.13em; font-weight:800; color:#e4e4e4; white-space:nowrap; margin-right:2px; } .xs2-tools,.xs2-sec{ display:flex; gap:3px; background:#161616; border-radius:10px; padding:3px; } .xs2-head button{ height:34px; min-width:36px; padding:0 10px; border:none; border-radius:8px; background:#2c2c2c; color:#cfcfcf; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; } .xs2-head button:hover{ background:#383838; } .xs2-head button.on,.xs2-head button.red{ background:var(--red); color:#fff; } .xs2-x{ min-width:44px !important; min-height:44px; font-size:19px; background:transparent !important; margin-left:auto; } .xs2-x:hover{ background:#2c2c2c !important; } .xs2-lanehead{ display:flex; flex:none; border-bottom:1px solid #222; background:#191919; } .xs2-corner{ width:46px; flex:none; font-size:8px; letter-spacing:.1em; color:#666; display:flex; align-items:center; justify-content:center; } .xs2-lt{ width:108px; flex:none; display:flex; align-items:center; gap:4px; padding:7px 4px 7px 8px; box-sizing:border-box; font-size:9px; letter-spacing:.12em; font-weight:800; color:#9a9a9a; border-left:1px solid #222; } .xs2-clear{ margin-left:auto; border:none; background:transparent; color:#555; min-width:26px; min-height:26px; border-radius:7px; cursor:pointer; } .xs2-clear:hover{ background:#2c2c2c; color:#e08a80; } .xs2-scroll{ position:relative; flex:1; overflow:auto; touch-action:pan-y; overscroll-behavior:contain; } .xs2-content{ position:relative; } .xs2-ruler{ position:absolute; left:0; top:0; bottom:0; width:46px; background:#191919; border-right:1px solid #222; cursor:ns-resize; touch-action:none; z-index:3; } .xs2-cell{ position:absolute; left:0; width:46px; height:24px; box-sizing:border-box; border-top:1px solid #232323; font-size:9px; color:#7a7a7a; padding:6px 0 0 7px; } .xs2-cell.odd{ background:rgba(255,255,255,.015); } .xs2-cell.cur{ background:rgba(178,58,46,.3); color:#fff; font-weight:700; } .xs2-cell .on-b,.xs2-cell .on-a{ display:none; position:absolute; right:3px; width:3px; height:9px; border-radius:2px; top:3px; } .xs2-cell.ghost-b .on-b{ display:block; background:var(--ghost-before); } .xs2-cell.ghost-a .on-a{ display:block; background:var(--ghost-after); top:auto; bottom:3px; } .xs2-lanes{ position:absolute; top:0; left:0; } .xs2-lane{ position:absolute; top:0; border-left:1px solid #202020; } .xs2-lane canvas{ position:absolute; left:0; top:0; touch-action:pan-y; } .xs2-lane .xs2-wave{ pointer-events:none; opacity:.9; } .xs2-lane .xs2-ink{ cursor:crosshair; } /* faint frame lines across the lanes */ .xs2-lane{ background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 23px, #1e1e1e 23px, #1e1e1e 24px); } .xs2-brackets{ position:absolute; left:46px; top:0; bottom:0; width:12px; z-index:4; } .xs2-brk{ position:absolute; left:0; width:12px; box-sizing:border-box; border:2px solid var(--xs-action); border-right:none; border-radius:6px 0 0 6px; cursor:pointer; background:rgba(143,146,133,.18); } .xs2-brk span{ position:absolute; left:10px; top:2px; writing-mode:vertical-rl; font-size:9px; font-weight:800; letter-spacing:.06em; color:#d9dcd2; background:#151515cc; border-radius:4px; padding:3px 1px; max-height:calc(100% - 6px); overflow:hidden; white-space:nowrap; } .xs2-brk.cur{ border-color:var(--red); background:rgba(178,58,46,.22); } .xs2-brk.cur span{ color:#fff; } .xs2-brk .bx{ position:absolute; left:8px; bottom:-2px; border:none; background:#151515; color:#888; min-width:20px; min-height:20px; border-radius:6px; cursor:pointer; font-size:10px; } .xs2-brk .bx:hover{ color:#e08a80; } .xs2-playhead{ position:absolute; left:0; right:0; top:0; height:0; border-top:2px solid var(--red); z-index:5; pointer-events:none; } .xs2-playhead span{ position:absolute; left:0; top:-5px; width:10px; height:10px; background:var(--red); border-radius:0 6px 6px 0; } .xs2-io{ position:absolute; left:48px; z-index:6; font-size:10px; font-weight:800; color:var(--red); pointer-events:none; text-shadow:0 1px 3px #000; } /* ============================================================ TABLET / TOUCH branch — same language, hide the menu strip ============================================================ */ @media (poin