:root{color-scheme:dark;--bg-page: #141210;--bg-surface: #1d1a15;--bg-sunken: #100e0c;--bg-hover: rgb(245 241 232 / .06);--bg-veil: rgb(20 18 16 / .72);--fg: #f5f1e8;--fg-muted: rgb(245 241 232 / .62);--fg-subtle: rgb(245 241 232 / .45);--fg-faint: rgb(245 241 232 / .35);--accent: #e2874f;--accent-ink: #141210;--ok: #5fa98c;--info: #6a9bcc;--alert: #c97b84;--loop-1: #e2874f;--loop-2: #5fa98c;--loop-3: #c97b84;--loop-4: #6a9bcc;--line: rgb(245 241 232 / .08);--line-strong: rgb(245 241 232 / .16);--border: .5px solid var(--line);--border-strong: .5px solid var(--line-strong);--focus-ring: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);--font-display: "Space Grotesk", system-ui, sans-serif;--font-ui: "IBM Plex Sans", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--t-xxs: .625rem;--t-xs: .6875rem;--t-sm: .75rem;--t-base: .8125rem;--t-md: .875rem;--t-lg: 1.0625rem;--t-xl: 1.1875rem;--t-display: 1.625rem;--w-regular: 400;--w-medium: 500;--w-bolder: 600;--lh-tight: 1.25;--lh-base: 1.55;--ls-caps: .06em;--gap-xxs: .125rem;--gap-xs: .25rem;--gap-sm: .375rem;--gap: .5rem;--gap-md: .75rem;--gap-lg: 1rem;--gap-xl: 1.375rem;--gap-xxl: 2rem;--r-xs: 5px;--r-sm: 7px;--r-md: 8px;--r-lg: 10px;--r-xl: 12px;--r-xxl: 14px;--r-full: calc(infinity * 1px);--ctl-xs: 1.625rem;--ctl-sm: 2rem;--ctl: 2.625rem;--ctl-lg: 3rem;--tap: 2.75rem;--head-h: 4rem;--gutter: 1.75rem;--page-max: 90rem;--dur-fast: .12s;--dur: .2s;--ease: cubic-bezier(.2, 0, .2, 1)}@media(width<48rem){:root{--gutter: 1rem;--head-h: 3.5rem;--ctl-xs: var(--tap);--ctl-sm: var(--tap)}}*,*:before,*:after{box-sizing:border-box}:where(html){-webkit-text-size-adjust:none}:where(body){margin:0;background:var(--bg-page);color:var(--fg);font-family:var(--font-ui);font-size:var(--t-md);line-height:var(--lh-base);-webkit-font-smoothing:antialiased}:where(h1,h2,h3,p,figure){margin:0}:where(button,input,select,textarea){font:inherit;color:inherit;background:none;border:none;padding:0}:where(button){cursor:pointer}:where(a){color:inherit;text-decoration:none}:where(svg){display:block;flex-shrink:0}:where(input)::placeholder{color:#f5f1e852}:where(:focus-visible){outline:var(--focus-ring);outline-offset:1px}:where(::selection){background:color-mix(in srgb,var(--accent) 45%,transparent)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap);height:var(--ctl-sm);padding-inline:var(--gap-md);border-radius:var(--r-sm);font-size:var(--t-base);font-weight:var(--w-medium);white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);&:disabled{opacity:.4;cursor:not-allowed}&.solid{background:var(--accent);color:var(--accent-ink);font-weight:var(--w-bolder);&:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 88%,#fff)}}&.outlined{border:var(--border-strong);&:hover:not(:disabled){background:var(--bg-hover)}}&.accent{border-color:var(--accent);color:var(--accent)}&.minor{color:var(--fg-muted);&:hover:not(:disabled){color:var(--fg);background:var(--bg-hover)}}&.large{height:var(--ctl-lg);padding-inline:var(--gap-lg);font-size:.9375rem;border-radius:var(--r-lg)}&.wide{width:100%}}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-xs);height:var(--ctl-xs);border-radius:var(--r-xs);border:var(--border-strong);color:var(--fg);font-family:var(--font-mono);transition:background var(--dur-fast) var(--ease);&:hover:not(:disabled){background:var(--bg-hover)}&:disabled{opacity:.4;cursor:not-allowed}&.round{border-radius:var(--r-full)}&.bare{border-color:transparent;color:var(--fg-subtle);&:hover:not(:disabled){color:var(--fg)}}&.large{width:var(--ctl);height:var(--ctl);border-radius:var(--r-md)}}.play-button{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl);height:var(--ctl);border-radius:var(--r-full);background:var(--accent);color:var(--accent-ink);flex-shrink:0;&:disabled{opacity:.4;cursor:not-allowed}}.eyebrow{font-family:var(--font-mono);font-size:var(--t-xs);font-weight:var(--w-medium);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg-subtle)}.caps{font-size:var(--t-xs);font-weight:var(--w-medium);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg-subtle);white-space:nowrap}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.muted{color:var(--fg-muted)}.subtle{color:var(--fg-subtle)}.faint{color:var(--fg-faint)}.small{font-size:var(--t-sm)}.field{display:flex;flex-direction:column;gap:var(--gap);>label{font-size:var(--t-base);font-weight:var(--w-medium);color:#f5f1e8c7}}.input{height:var(--ctl-lg);width:100%;padding-inline:var(--gap-lg);background:var(--bg-surface);border:var(--border-strong);border-radius:var(--r-lg);color:var(--fg);font-family:var(--font-mono);font-size:var(--t-md);&.small{height:var(--ctl-sm);padding-inline:var(--gap-md);border-radius:var(--r-sm);background:var(--bg-sunken);font-family:var(--font-ui);font-size:var(--t-base)}&.sunken{background:var(--bg-sunken)}}.chip{height:var(--ctl-xs);padding-inline:var(--gap-md);border-radius:var(--r-xs);color:var(--fg-muted);font-size:var(--t-sm);&[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:var(--w-bolder)}&:hover:not([aria-pressed=true]){background:var(--bg-hover);color:var(--fg)}}.pill{display:inline-flex;align-items:center;padding:.125rem .4375rem;border-radius:var(--r-xs);background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info);font-family:var(--font-mono);font-size:var(--t-xs);white-space:nowrap}.switch{appearance:none;width:2.125rem;height:1.25rem;border-radius:var(--r-full);background:var(--line-strong);position:relative;flex-shrink:0;cursor:pointer;transition:background var(--dur-fast) var(--ease);&:after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;width:1rem;height:1rem;border-radius:var(--r-full);background:var(--fg);transition:translate var(--dur-fast) var(--ease)}&:checked{background:var(--ok)}&:checked:after{translate:.875rem 0}}.check-row{display:flex;align-items:center;gap:var(--gap);font-size:var(--t-sm);color:var(--fg-muted);cursor:pointer}.range{accent-color:var(--accent);height:var(--tap);min-width:0;cursor:pointer}.stepper{display:flex;align-items:center;gap:var(--gap);>output{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--t-base);text-align:center}}.divider{background:var(--line);&.vertical{width:1px;height:1.375rem;flex-shrink:0}&.horizontal{height:1px}}.form-error{font-size:var(--t-base);color:var(--alert)}.panel{background:var(--bg-surface);border:var(--border);border-radius:var(--r-xl);padding:var(--gap-xl);display:flex;flex-direction:column;gap:var(--gap-md);&.flush{padding:var(--gap-lg)}}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);>h2{font-size:var(--t-md);font-weight:var(--w-bolder)}}.stack{display:flex;flex-direction:column;gap:var(--gap)}.row{display:flex;align-items:center;gap:var(--gap-md)}.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md)}.brand{display:flex;align-items:center;gap:var(--gap);font-family:var(--font-display);font-size:var(--t-xl);font-weight:var(--w-bolder);letter-spacing:.01em}.app-head{position:sticky;inset-block-start:0;z-index:5;flex-shrink:0;height:var(--head-h);background:var(--bg-page);padding-inline:var(--gutter);display:flex;align-items:center;gap:var(--gap-lg);border-bottom:var(--border)}.app-page{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-page)}.storage-chip{display:flex;align-items:center;gap:var(--gap);padding:var(--gap-xs) var(--gap-md);border:var(--border-strong);border-radius:var(--r-full);font-size:var(--t-sm);color:var(--fg-muted)}.storage-dot{width:.4375rem;height:.4375rem;border-radius:var(--r-full);background:var(--ok);flex-shrink:0}home-page{display:block;.head-spacer{flex-grow:1}.brand-mark{color:var(--accent)}.account{position:relative;flex-shrink:0}.account-trigger{display:flex;align-items:center;gap:var(--gap);padding:var(--gap-xs) var(--gap-md) var(--gap-xs) var(--gap-xs);border:.5px solid rgb(245 241 232 / .14);border-radius:var(--r-full);transition:background var(--dur-fast) var(--ease);&:hover{background:var(--bg-hover)}&[aria-expanded=true] .account-chevron{rotate:180deg}}.avatar{position:relative;display:flex;align-items:center;justify-content:center;width:var(--ctl-xs);height:var(--ctl-xs);border-radius:var(--r-full);background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-size:var(--t-xs);font-weight:var(--w-bolder);flex-shrink:0;& img{width:100%;height:100%;border-radius:inherit;object-fit:cover}}.avatar-badge{position:absolute;inset-block-end:-2px;inset-inline-end:-2px;display:flex;align-items:center;justify-content:center;width:.8125rem;height:.8125rem;border-radius:var(--r-full);background:var(--bg-page)}.account-name{font-size:.78125rem;color:#f5f1e8c7}.account-chevron{display:inline-flex;color:#f5f1e880;transition:rotate var(--dur-fast) var(--ease)}.account-menu{position:absolute;inset-block-start:calc(100% + var(--gap));inset-inline-end:0;z-index:10;width:13.75rem;display:flex;flex-direction:column;gap:var(--gap-xxs);padding:var(--gap);border:.5px solid rgb(245 241 232 / .14);border-radius:var(--r-lg);background:var(--bg-surface);box-shadow:0 16px 40px #0006;.divider{margin:var(--gap-xxs) var(--gap-sm)}}.account-info{display:flex;flex-direction:column;gap:var(--gap-xxs);padding:var(--gap) .625rem .625rem;min-width:0}.account-full-name{font-size:var(--t-base);font-weight:var(--w-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-action{padding:.5625rem .625rem;border-radius:var(--r-sm);text-align:start;font-size:var(--t-base);&:hover{background:var(--bg-hover)}}.home-body{flex-grow:1;display:flex;align-items:stretch;gap:0;padding:var(--gap-xxl) var(--gutter);max-width:var(--page-max);width:100%;margin-inline:auto}.hero{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--gap-xl);padding-inline-end:var(--gap-xxl);& h1{font-family:var(--font-display);font-size:var(--t-display);font-weight:var(--w-bolder);line-height:var(--lh-tight)}.eyebrow.accent{color:var(--accent)}& form{gap:var(--gap-md)}}.home-divider{width:1px;background:var(--line);flex-shrink:0}.recent{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;gap:var(--gap-lg);padding-inline-start:var(--gap-xxl);& h2{font-family:var(--font-display);font-size:.9375rem;font-weight:var(--w-bolder);color:#f5f1e8d9}}.session-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap-md)}.session-row{display:flex;align-items:stretch;gap:var(--gap-sm);padding:var(--gap-xs);background:var(--bg-surface);border:var(--border);border-radius:var(--r-xl);transition:border-color var(--dur-fast) var(--ease);&:hover{border-color:var(--line-strong)}>a{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--gap-xs);padding:var(--gap-md) .875rem;border-radius:var(--r-md)}}.session-name{font-weight:var(--w-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-remove{display:flex;align-items:center;justify-content:center;align-self:center;width:var(--ctl-sm);height:var(--ctl-sm);margin-inline-end:var(--gap-xs);flex-shrink:0;border-radius:var(--r-sm);color:#f5f1e866;transition:opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);&:hover{background:var(--bg-hover);color:var(--fg)}}.recent-empty{display:flex;flex-direction:column;gap:var(--gap-xs);padding:var(--gap-xl);border:.5px dashed var(--line-strong);border-radius:var(--r-xl)}}@media(hover:hover){home-page .session-remove{opacity:0}home-page .session-row:hover .session-remove,home-page .session-remove:focus-visible{opacity:1}}@media(width<62rem){home-page{.home-body{flex-direction:column;gap:var(--gap-xl);padding-block:var(--gap-xl)}.hero,.recent{padding-inline:0}.home-divider{width:auto;height:1px}.storage-chip,.account-name,.account-chevron{display:none}.account-trigger{padding:0;border:none}.avatar{width:2.25rem;height:2.25rem;font-size:var(--t-sm)}.avatar-badge{width:.875rem;height:.875rem}}}session-page{display:block;.head-copy{display:flex;flex-direction:column;gap:var(--gap-xxs);min-width:0;flex-grow:1;>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.shortcuts{position:relative;flex-shrink:0}.shortcuts-trigger{width:2.125rem;height:2.125rem;border-radius:var(--r-md);border-color:#f5f1e824;color:#f5f1e88c;&[aria-expanded=true]{color:var(--fg);background:var(--bg-hover)}}.shortcuts-menu{position:absolute;inset-block-start:calc(100% + var(--gap));inset-inline-end:0;z-index:20;width:16.75rem;padding:var(--gap-md);border:.5px solid rgb(245 241 232 / .14);border-radius:var(--r-lg);background:var(--bg-surface);box-shadow:0 16px 40px #0006}.shortcuts-title{display:block;margin-block-end:.5625rem;font-size:var(--t-sm);font-weight:var(--w-bolder);color:#f5f1e8d9}.shortcuts-list{display:flex;flex-direction:column;gap:var(--gap);margin:0;& dt{font-size:var(--t-sm);color:#f5f1e8a6}& dd{margin:0;flex-shrink:0}& kbd{padding:var(--gap-xxs) .4375rem;border-radius:var(--r-xs);background:#f5f1e814;font-family:var(--font-mono);font-size:var(--t-xs);white-space:nowrap}}.session-title{font-family:var(--font-display);font-size:var(--t-lg);font-weight:var(--w-bolder);width:100%;max-width:32rem;border-radius:var(--r-xs);padding-inline:var(--gap-xs);margin-inline-start:calc(var(--gap-xs) * -1);&:hover{background:var(--bg-hover)}}.session-body{flex-grow:1;display:flex;align-items:flex-start;gap:var(--gap-xl);padding:var(--gap-xl) var(--gutter);width:100%;max-width:var(--page-max);margin-inline:auto}.session-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--gap-lg)}.session-side{width:20.5rem;flex-shrink:0;display:flex;flex-direction:column;gap:var(--gap-lg)}.video-dock{position:relative;aspect-ratio:16 / 9;max-height:42dvh;border-radius:var(--r-xxl);border:var(--border);background:var(--bg-surface);overflow:hidden;&.collapsed{position:fixed;inset-block-start:0;inset-inline-start:0;width:1px;height:1px;max-height:none;aspect-ratio:auto;opacity:.01;pointer-events:none;z-index:-1}#player-host,iframe{width:100%;height:100%;border:none}}.video-badge{position:absolute;inset-block-start:var(--gap-md);inset-inline-start:var(--gap-md);padding:var(--gap-xs) var(--gap);border-radius:var(--r-xs);background:var(--bg-veil);color:#f5f1e8ad;pointer-events:none}.video-hide{position:absolute;inset-block-start:var(--gap-md);inset-inline-end:var(--gap-md);background:var(--bg-veil);color:#f5f1e8b3;font-size:var(--t-sm)}.video-collapsed{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);width:100%;height:var(--tap);padding-inline:var(--gap-lg);border:var(--border);border-radius:var(--r-lg);background:var(--bg-surface)}.accent-text{color:var(--accent);font-size:var(--t-sm);gap:var(--gap-sm)}.transport{flex-direction:row;align-items:center;gap:var(--gap-xl);flex-wrap:wrap}.transport-time{font-size:var(--t-base);white-space:nowrap}.loop-toggle,.compare{flex-shrink:0;color:#f5f1e8b3}.loop-toggle[aria-pressed=true]{border-color:var(--loop-color);background:color-mix(in srgb,var(--loop-color) 14%,transparent);color:var(--loop-color)}.compare{gap:var(--gap-xs);padding-inline:var(--gap-md);font-size:var(--t-sm);&[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}}.speed{display:flex;align-items:center;gap:var(--gap);flex-grow:1;min-width:13rem}.speed:has(.compare[aria-pressed=true]) :is(.icon-button,.speed-value,.range){opacity:.35}.speed-value{width:2.75rem;text-align:center;font-size:var(--t-base)}.speed .range{flex-grow:1;max-width:10rem;margin-inline-start:var(--gap-xs)}.info-button{border-color:color-mix(in srgb,var(--info) 40%,transparent);background:color-mix(in srgb,var(--info) 10%,transparent);color:var(--info);font-size:var(--t-sm)}.info-solid{background:var(--info);border-color:transparent;color:var(--accent-ink)}.nearest{display:flex;align-items:center;gap:var(--gap);padding:var(--gap-sm) var(--gap-md);border:.5px solid color-mix(in srgb,var(--info) 22%,transparent);border-radius:var(--r-md);background:color-mix(in srgb,var(--info) 8%,transparent)}.nearest-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nearest-tag{margin-inline-start:auto;white-space:nowrap}.pins{position:relative;height:1.125rem}.pin{position:absolute;inset-block-start:0;width:.75rem;height:.75rem;border-radius:var(--r-full);background:var(--info);border:2px solid var(--bg-surface);translate:-50% 0}.track{position:relative;height:3.75rem;border-radius:var(--r-md);background:var(--bg-sunken);overflow:hidden;touch-action:none;cursor:pointer}.bar-line{position:absolute;inset-block:0;width:1px;background:#f5f1e81a;pointer-events:none}.track-loop{position:absolute;inset-block:0;background:color-mix(in srgb,var(--loop-color) 14%,transparent);border-inline:2px solid var(--loop-color);border-block:none;cursor:grab;touch-action:none;&:active{cursor:grabbing}&.active{background:color-mix(in srgb,var(--loop-color) 30%,transparent)}}.playhead{position:absolute;inset-block:0;width:2px;background:var(--accent);pointer-events:none}.track-handle{position:absolute;inset-block:0;width:1rem;translate:-50% 0;cursor:ew-resize;touch-action:none;z-index:1;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;width:3px;border-radius:2px;background:var(--loop-color)}}.editor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap-md);flex-wrap:wrap}.loop-name{font-family:var(--font-display);font-size:var(--t-xl);font-weight:var(--w-bolder);width:100%;max-width:20rem;border-radius:var(--r-xs)}.color-picker{position:relative;flex-shrink:0}.color-trigger{gap:var(--gap-xs);height:var(--ctl-xs);padding-inline:var(--gap);border-radius:var(--r-xs);color:var(--fg-subtle);&[aria-expanded=true] .color-chevron{rotate:180deg}}.color-dot{width:.75rem;height:.75rem;border-radius:var(--r-full)}.color-chevron{display:inline-flex;transition:rotate var(--dur-fast) var(--ease)}.color-menu{position:absolute;inset-block-start:calc(100% + var(--gap));inset-inline-end:0;z-index:10;display:flex;align-items:center;gap:var(--gap);padding:var(--gap-md);border:var(--border-strong);border-radius:var(--r-lg);background:var(--bg-surface);box-shadow:0 16px 40px #0006}.swatch{width:1.375rem;height:1.375rem;border-radius:var(--r-full);background:var(--swatch);border:2px solid transparent;&[aria-pressed=true]{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg-page),0 0 0 3px var(--swatch)}}.time-fields{display:flex;align-items:center;margin-inline-start:auto;gap:var(--gap-sm);>label{display:flex;align-items:center;gap:var(--gap-xs);font-size:var(--t-xs);color:var(--fg-subtle)}}.input.tiny{width:4.125rem;height:var(--ctl-xs);padding-inline:var(--gap-sm);border-radius:var(--r-xs);background:var(--bg-sunken);font-size:var(--t-sm);appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{appearance:none;margin:0}}.editor-controls{display:flex;align-items:center;gap:var(--gap-xl);row-gap:var(--gap-md);flex-wrap:wrap}.grid-chips{gap:var(--gap-sm)}.bpm{width:4.75rem;text-align:center;font-family:var(--font-mono)}.zoom-track{position:relative;height:8.125rem;border-radius:var(--r-md);background:color-mix(in srgb,var(--loop-color) 10%,transparent);overflow:hidden;touch-action:none;cursor:pointer}.grid-line{position:absolute;inset-block:0;width:1px;background:#f5f1e812;pointer-events:none;&.beat{background:color-mix(in srgb,var(--ok) 45%,transparent)}&.bar{width:2px;background:color-mix(in srgb,var(--ok) 85%,transparent)}}.zoom-region{position:absolute;inset-block:0;background:color-mix(in srgb,var(--loop-color) 20%,transparent);pointer-events:none}.zoom-playhead{position:absolute;inset-block:0;width:2px;background:var(--accent);pointer-events:none}.zoom-handle{position:absolute;inset-block:0;width:1.5rem;translate:-50% 0;cursor:ew-resize;touch-action:none;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;width:5px;border-radius:3px;background:var(--loop-color)}}.zoom-label{position:absolute;inset-block-start:var(--gap);padding:var(--gap-xxs) var(--gap-sm);border-radius:var(--r-xs);background:var(--bg-veil);font-family:var(--font-mono);font-size:var(--t-xs);pointer-events:none;&.start{inset-inline-start:var(--gap-md)}&.end{inset-inline-end:var(--gap-md)}}.editor-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap);padding-block:var(--gap-md)}.loop-list,.comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap)}.loop-row{display:flex;align-items:stretch;gap:var(--gap-sm);padding:var(--gap-xs);border:1px solid var(--line);border-radius:var(--r-lg);background:#f5f1e808;&.active{border-color:var(--loop-color);background:color-mix(in srgb,var(--loop-color) 16%,transparent)}}.loop-select{display:flex;align-items:center;gap:var(--gap-md);flex:1 1 auto;min-width:0;padding:var(--gap);border-radius:var(--r-sm);text-align:start}.loop-delete{display:flex;align-items:center;justify-content:center;align-self:center;width:var(--ctl-sm);height:var(--ctl-sm);margin-inline-end:var(--gap-xs);border-radius:var(--r-sm);color:var(--fg-subtle);flex-shrink:0;&:hover:not(:disabled){background:var(--bg-hover);color:var(--fg)}&:disabled{color:#f5f1e826;cursor:not-allowed}}.loop-dot{width:.625rem;height:.625rem;border-radius:var(--r-full);background:var(--loop-color);flex-shrink:0}.loop-copy{flex-grow:1;min-width:0;gap:var(--gap-xxs)}.loop-title{font-size:var(--t-base);font-weight:var(--w-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comment-form{display:flex;align-items:center;gap:var(--gap);>.icon-button{width:var(--ctl-sm);height:var(--ctl-sm);border-radius:var(--r-sm);flex-shrink:0}}.comment-row{position:relative;display:flex;.icon-button{position:absolute;inset-block-start:var(--gap-xs);inset-inline-end:var(--gap-xs);opacity:0}&:hover .icon-button,.icon-button:focus-visible{opacity:1}}.comment-body{flex-grow:1;display:flex;flex-direction:column;gap:var(--gap-sm);padding:var(--gap-md);padding-inline-end:var(--gap-xxl);border:var(--border);border-radius:var(--r-sm);text-align:start;min-width:0}.comment-text{color:#f5f1e8d1;line-height:1.4}.info{display:flex;flex-direction:column;gap:var(--gap-sm);margin:0;& dd{margin:0}}.link{color:var(--info)}.missing{flex-grow:1;display:grid;place-content:center;justify-items:center;gap:var(--gap-lg);font-family:var(--font-display)}}@media(hover:hover){session-page .loop-delete{opacity:0;transition:opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}session-page .loop-row:hover .loop-delete,session-page .loop-delete:focus-visible{opacity:1}}@media(width<75rem){session-page{.session-body{flex-direction:column;align-items:stretch}.session-side{width:100%}}}@media(width<48rem){session-page{.session-body{padding-block:var(--gap-lg);gap:var(--gap-lg)}.session-title{font-size:var(--t-md)}.shortcuts-trigger{width:2.25rem;height:2.25rem}.shortcuts-menu{width:15rem}.transport{gap:var(--gap-md);>.divider{display:none}}.loop-toggle{margin-inline-start:auto}.speed{min-width:100%;flex-wrap:wrap;padding-block-start:var(--gap-md);border-block-start:var(--border)}.video-hide{inset-block-start:var(--gap);inset-inline-end:var(--gap);width:var(--tap);height:var(--tap);padding:0}.wide-only{display:none}.swatch{width:1.5rem;height:1.5rem}.speed .range{max-width:none}.nearest-tag{display:none}.comment-row .icon-button{opacity:1}.editor-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--gap-md)}.time-fields{grid-column:1 / -1;grid-row:2;margin-inline-start:0;flex-wrap:wrap;row-gap:var(--gap)}}}epistrophy-app{display:block;min-height:100dvh}