/* Generated by web/playground/extract-css.mjs from ui/index.html: do not edit. */ :root { color-scheme: dark; } #surfaceHost * { box-sizing: border-box; } :root { --motion: 160ms; --ease: cubic-bezier(.2, .7, .2, 1); } @media (prefers-reduced-motion: reduce) { :root { --motion: 0ms; } } #surfaceHost .seethrough { background: rgba(16, 18, 24, 0.35) !important; pointer-events: none; } #surfaceHost .seethrough > :not(.winbar):not(.edge) { opacity: .38; } #surfaceHost .seethrough > .winbar, #surfaceHost .seethrough > .edge { pointer-events: auto; } #surfaceHost .seethrough > .winbar { background: #101218; } #surfaceHost .moves { transition: opacity var(--motion) var(--ease), transform var(--motion) var(--ease); transform-origin: 0 0; } #surfaceHost .moves.entering, #surfaceHost .moves.flipping { transition: none; } #surfaceHost .moves.entering, #surfaceHost .moves.leaving { opacity: 0; transform: translateX(var(--slide, 12px)); } #surfaceHost #searchPanel { --slide: -12px; } @keyframes appear { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(6px); } } #surfaceHost .dialogOverlay, .ctxmenu { animation: appear var(--motion) var(--ease); } #surfaceHost .dialogCard { animation: rise var(--motion) var(--ease); } #surfaceHost #liveControls { flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 6px 10px; } #surfaceHost #projectInfo { flex: 1 1 100%; } #surfaceHost label { color: #8b93a1; display: flex; gap: 6px; align-items: center; } #surfaceHost input[type=number] { width: 68px; background: #171a21; color: #d5d9e0; border: 1px solid #2c323c; border-radius: 4px; padding: 3px 6px; font: inherit; } #surfaceHost button { background: #232833; color: #d5d9e0; border: 1px solid #333a46; border-radius: 4px; padding: 4px 10px; font: inherit; cursor: pointer; } #surfaceHost button:hover { background: #2c323e; } #surfaceHost #exportBtn { position: relative; overflow: hidden; } #surfaceHost #exportBtn::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(213, 217, 224, .18); transform-origin: left; transform: scaleX(var(--done, 0)); opacity: 0; transition: opacity var(--motion) var(--ease); } #surfaceHost #exportBtn.exporting::after { opacity: 1; } #surfaceHost #exportBtn.rendering::after { transform: translateX(-100%) scaleX(.35); animation: sweep calc(var(--motion) * 8) var(--ease) infinite; } @keyframes sweep { to { transform: translateX(100%) scaleX(.35); } } @media (prefers-reduced-motion: reduce) { #surfaceHost #exportBtn.rendering::after { animation: none; transform: none; opacity: .4; } } #surfaceHost #playToggle { width: 64px; } #surfaceHost #audioToggle { width: 36px; padding-left: 0; padding-right: 0; white-space: nowrap; } #surfaceHost #audioToggle.on { background: #2c323e; color: #fff; } #surfaceHost #audioToggle.loading { opacity: .5; } #surfaceHost #transportInfo { font-variant-numeric: tabular-nums; display: inline-block; white-space: pre; width: 46ch; overflow: hidden; text-overflow: ellipsis; } #surfaceHost #readout { flex: 1 1 0; min-width: 0; color: #dfe3ea; overflow: hidden; text-overflow: ellipsis; } #surfaceHost #editStatus { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; } #surfaceHost #editStatus:hover { position: absolute; right: 14px; left: 14px; bottom: 0; max-width: none; max-height: calc(100vh - 8px); overflow-y: auto; white-space: normal; text-align: right; background: #0f1116; z-index: 19; border-top: 1px solid #262b33; } #surfaceHost #onsetsBtn { position: absolute; left: 6px; top: 3px; z-index: 3; height: 18px; padding: 0 7px; font-size: 10px; line-height: 16px; } #surfaceHost #noteDivider { flex: none; height: 5px; cursor: ns-resize; background: #1a1e26; } #surfaceHost #noteDivider[hidden] { display: none; } #surfaceHost #noteEditor { flex: 0 1 var(--note-editor-h, 280px); min-height: 96px; display: flex; flex-direction: column; background: #0c0e13; } #surfaceHost #noteEditor[hidden] { display: none; } #surfaceHost #noteEditor.moves.entering, #surfaceHost #noteEditor.moves.leaving { transform: translateY(12px); } #surfaceHost #noteEditor .bar { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-bottom: 1px solid #22262f; } #surfaceHost #noteEditor .bar .title { font-size: 12px; color: #d5d9e0; } #surfaceHost #noteEditor .bar .muted { flex: 1; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #surfaceHost #noteEditorBody { position: relative; flex: 1; min-height: 0; } #surfaceHost .pianoRollCanvas { display: block; outline: none; } #surfaceHost #historyPanel { width: 264px; border-left: 1px solid #262b33; overflow-y: auto; background: #101218; } #surfaceHost :is(#surfacePanel, .surfwin) { width: 340px; border-left: 1px solid #262b33; overflow: hidden; background: #101218; display: flex; flex-direction: column; font: 10px ui-monospace, monospace; } #surfaceHost :is(#surfacePanel, .surfwin)[hidden] { display: none; } #surfaceHost .filedrop { position: fixed; inset: 0; z-index: 60; pointer-events: none; } #surfaceHost .filedrop .fslot { position: fixed; box-sizing: border-box; border: 1px dashed rgba(213, 217, 224, 0.14); } #surfaceHost .filedrop .fslot.on { border: 1px solid #5f9ed6; background: rgba(95, 158, 214, 0.14); } #surfaceHost .filedrop .fgap { position: fixed; box-sizing: border-box; background: rgba(213, 217, 224, 0.12); } #surfaceHost .filedrop .fgap.on { background: #5f9ed6; box-shadow: 0 0 0 2px rgba(95, 158, 214, 0.35); } #surfaceHost .filedrop .fat { position: fixed; width: 2px; margin-left: -1px; background: #5f9ed6; } #surfaceHost .filedrop .flabel { position: fixed; max-width: 360px; padding: 4px 8px; font: 11px ui-monospace, monospace; color: #d5d9e0; background: #15181f; border: 1px solid #3d4656; border-radius: 3px; } #surfaceHost .dockzone { position: absolute; top: 0; right: 0; bottom: 0; width: 120px; z-index: 18; pointer-events: none; display: flex; align-items: center; justify-content: center; font: 10px ui-monospace, monospace; color: #7d8596; background: rgba(95, 158, 214, 0.06); border-left: 1px dashed #3d4656; } #surfaceHost .dockzone.over { color: #d5d9e0; background: rgba(95, 158, 214, 0.18); border-left-color: #5f9ed6; } #surfaceHost :is(#surfacePanel, .surfwin), #surfaceHost #paramsPanel { position: relative; } #surfaceHost .edge { position: absolute; z-index: 6; } #surfaceHost .edge.left, #surfaceHost .edge.right { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; } #surfaceHost .edge.left { left: -3px; } #surfaceHost .edge.right { right: -3px; } #surfaceHost .edge.top, #surfaceHost .edge.bottom { left: 8px; right: 8px; height: 6px; cursor: ns-resize; } #surfaceHost .edge.top { top: -3px; } #surfaceHost .edge.bottom { bottom: -3px; } #surfaceHost .edge.bottom-left, #surfaceHost .edge.bottom-right, #surfaceHost .edge.top-left, #surfaceHost .edge.top-right { width: 12px; height: 12px; } #surfaceHost .edge.bottom-left { left: -4px; bottom: -4px; cursor: nesw-resize; } #surfaceHost .edge.bottom-right { right: -4px; bottom: -4px; cursor: nwse-resize; } #surfaceHost .edge.top-left { left: -4px; top: -4px; cursor: nwse-resize; } #surfaceHost .edge.top-right { right: -4px; top: -4px; cursor: nesw-resize; } #surfaceHost .winbar { display: flex; flex: none; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid #262b33; font: 12px system-ui, sans-serif; } #surfaceHost .winbar .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #surfaceHost .winbar .note { font-size: 10px; white-space: nowrap; } #surfaceHost .winbar .note:empty { display: none; } #surfaceHost .winbar.tight { gap: 4px; } #surfaceHost .winbar.tight button { width: 20px; } #surfaceHost .winbar.tight .close { padding: 0 3px; } #surfaceHost .winbar.tight .audition { width: auto; padding: 0 4px; } #surfaceHost .winbar.tighter .audition .words { display: none; } #surfaceHost .winbar.tight .wtrim { min-width: 0; padding: 2px 3px; font-size: 10px; } #surfaceHost .winbar.tighter .wtrim, #surfaceHost .winbar.tighter .auto { display: none; } #surfaceHost .winbar .note.badge { font: 600 9px system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #12151b; background: #aeb6c4; border-radius: 3px; padding: 2px 6px; } #surfaceHost :is(#surfacePanel, .surfwin) .chaintabs { display: flex; flex: none; gap: 2px; padding: 4px 8px 0; overflow-x: auto; border-bottom: 1px solid #262b33; } #surfaceHost :is(#surfacePanel, .surfwin) .chaintabs[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .chaintabs .tab { font: 10px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid transparent; border-bottom: none; padding: 2px 8px; border-radius: 3px 3px 0 0; white-space: nowrap; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .chaintabs .tab:hover { color: #d5d9e0; background: #1a1e26; } #surfaceHost :is(#surfacePanel, .surfwin) .chaintabs .tab.on { color: #d5d9e0; background: #161a21; border-color: #333a46; cursor: default; } #surfaceHost :is(#surfacePanel, .surfwin) .chaintabs .tab.off { text-decoration: line-through; } #surfaceHost :is(#surfacePanel, .surfwin) .chaintabs .tab.missing { color: #6f7787; font-style: italic; } #surfaceHost :is(#surfacePanel, .surfwin).bypassed { border-color: #6b7382; } #surfaceHost :is(#surfacePanel, .surfwin).bypassed .winbar { background: repeating-linear-gradient(135deg, #1a1e26 0 8px, #161a21 8px 16px); } #surfaceHost .winbar button { font: 12px ui-monospace, monospace; padding: 0; width: 24px; height: 20px; flex: none; } #surfaceHost .winbar .close { padding: 0 6px; } #surfaceHost .winbar .enable { color: #6f7787; } #surfaceHost .winbar .wtrim { font: 12px ui-monospace, monospace; min-width: 58px; text-align: right; padding: 2px 6px; border: 1px solid #333a46; border-radius: 4px; color: #a9d0f5; background: #1a1f27; cursor: grab; flex: none; } #surfaceHost .winbar .wtrim.unity { color: #6f7787; } #surfaceHost .winbar .wtrim.held { cursor: default; } #surfaceHost .winbar .wtrim.off { color: #6f7787; border-color: #2a303a; background: #161a21; } #surfaceHost .winbar .auto { width: 14px; } #surfaceHost .winbar :is(.wmin, .wmax) { display: none; } #surfaceHost .winbar .fold { font-size: 10px; white-space: nowrap; } #surfaceHost .winbar .fold:empty { display: none; } #surfaceHost .winbar .enable.on, #surfaceHost .winbar .see.on, #surfaceHost .winbar .pin.on, #surfaceHost .winbar .match.on, #surfaceHost .winbar .auto.on, #surfaceHost .winbar .wmin.on, #surfaceHost .winbar .wmax.on { background: #7fb2e6; color: #15171c; border-color: #7fb2e6; } #surfaceHost :is(#surfacePanel, .surfwin).floating { position: absolute; z-index: 5; border: 1px solid #262b33; box-shadow: 0 18px 40px -16px rgba(0,0,0,0.85), 0 0 0 1px #0b0d12; overflow: visible; } #surfaceHost :is(#surfacePanel, .surfwin) .bar { cursor: grab; } #surfaceHost :is(#surfacePanel, .surfwin).called { box-shadow: 0 0 0 2px #5f9ed6; } #surfaceHost :is(#surfacePanel, .surfwin) .delta.on { background: #c9c94f; color: #15171c; border-color: #c9c94f; } #surfaceHost :is(#surfacePanel, .surfwin) .match.on { background: #7fb2e6; color: #15171c; border-color: #7fb2e6; } #surfaceHost :is(#surfacePanel, .surfwin) .body { display: grid; gap: 8px; padding: 8px 12px 10px; grid-template-areas: "readings" "macros" "curve" "pro" "times" "history"; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body { grid-template-columns: 1fr 200px; column-gap: 14px; grid-template-areas: "readings readings" "curve macros" "curve pro" "curve times" "history history"; align-items: start; } #surfaceHost :is(#surfacePanel, .surfwin) .cap .end { display: inline-flex; gap: 10px; align-items: baseline; } #surfaceHost :is(#surfacePanel, .surfwin) .cap .manual { color: #6f7787; text-decoration: none; border-bottom: 1px dotted #4a515e; } #surfaceHost :is(#surfacePanel, .surfwin) .cap .manual:hover { color: #d5d9e0; } #surfaceHost :is(#surfacePanel, .surfwin) .readings { grid-area: readings; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; container-type: inline-size; } #surfaceHost :is(#surfacePanel, .surfwin) .reading { background: #0c0e13; border: 1px solid #262b33; padding: 6px 8px 5px; } #surfaceHost :is(#surfacePanel, .surfwin) .reading b { display: block; font: 500 clamp(10px, calc((100cqi - 70px) / 19.8), 18px) ui-monospace, monospace; color: #e6e9ef; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } #surfaceHost :is(#surfacePanel, .surfwin) .reading.gr b, #surfaceHost :is(#surfacePanel, .surfwin) .reading.avg b { color: #c9c94f; } #surfaceHost :is(#surfacePanel, .surfwin) .reading.out b { color: #7fb2e6; } #surfaceHost :is(#surfacePanel, .surfwin) .reading small { display: block; font: 500 9px system-ui, sans-serif; color: #7d8596; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; } #surfaceHost :is(#surfacePanel, .surfwin) .cap .note2 { color: #c9c94f; } #surfaceHost :is(#surfacePanel, .surfwin) .cap .avg { color: #c9c94f; } #surfaceHost :is(#surfacePanel, .surfwin) .macros { grid-area: macros; display: grid; gap: 8px; } #surfaceHost :is(#surfacePanel, .surfwin) .macro { display: grid; gap: 4px; cursor: grab; user-select: none; padding: 2px 0; } #surfaceHost :is(#surfacePanel, .surfwin) .macro:focus-visible { outline: 1px solid #2f4a68; } #surfaceHost :is(#surfacePanel, .surfwin) .macro .row { display: flex; justify-content: space-between; align-items: baseline; } #surfaceHost :is(#surfacePanel, .surfwin) .macro .k { font: 500 10px system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #7d8596; } #surfaceHost :is(#surfacePanel, .surfwin) .macro .v { font: 500 12px ui-monospace, monospace; color: #e6e9ef; } #surfaceHost :is(#surfacePanel, .surfwin) .macro .maps { font: 10px/1.4 ui-monospace, monospace; color: #6f7787; margin-top: 3px; } #surfaceHost :is(#surfacePanel, .surfwin) .num.driven, #surfaceHost :is(#surfacePanel, .surfwin) .glyph.driven { background: #171a21; outline: 1px solid #5a5624; } #surfaceHost :is(#surfacePanel, .surfwin) .num.driven b, #surfaceHost :is(#surfacePanel, .surfwin) .glyph.driven b { color: #c9c94f; } #surfaceHost :is(#surfacePanel, .surfwin) .mtrack { position: relative; height: 8px; background: #171a21; border: 1px solid #262b33; } #surfaceHost :is(#surfacePanel, .surfwin) .mtrack i { position: absolute; left: 0; top: 0; bottom: 0; background: #2f4a68; } #surfaceHost :is(#surfacePanel, .surfwin) .mtrack b { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #7fb2e6; box-shadow: 0 0 10px rgba(127,178,230,0.55); } #surfaceHost :is(#surfacePanel, .surfwin) .macro[data-key="reduction"] .mtrack i { background: #5a5624; } #surfaceHost :is(#surfacePanel, .surfwin) .macro[data-key="reduction"] .mtrack b { background: #c9c94f; box-shadow: 0 0 10px rgba(201,201,79,0.55); } #surfaceHost :is(#surfacePanel, .surfwin) .presets, #surfaceHost :is(#surfacePanel, .surfwin) .characters { display: flex; gap: 4px; align-items: baseline; padding: 2px 0 0; flex-wrap: wrap; } #surfaceHost :is(#surfacePanel, .surfwin) .characters[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .presets .menu { font: 11px ui-monospace, monospace; color: #d5d9e0; background: #171a21; border: 1px solid #262b33; padding: 1px 4px; min-width: 9em; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .presets.on .menu { color: #c9c94f; border-color: #5a5624; } #surfaceHost :is(#surfacePanel, .surfwin) .presets .k, #surfaceHost :is(#surfacePanel, .surfwin) .characters .k { font: 500 10px system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #7d8596; margin-right: 4px; } #surfaceHost :is(#surfacePanel, .surfwin) .presets button, #surfaceHost :is(#surfacePanel, .surfwin) .characters button { font: 11px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid transparent; padding: 1px 6px; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .presets button:hover, #surfaceHost :is(#surfacePanel, .surfwin) .characters button:hover { color: #d5d9e0; border-color: #262b33; } #surfaceHost :is(#surfacePanel, .surfwin) .presets .name { font: 11px ui-monospace, monospace; color: #e6e9ef; background: #171a21; border: 1px solid #5a5624; padding: 1px 4px; min-width: 9em; } #surfaceHost :is(#surfacePanel, .surfwin) .presets .save, #surfaceHost :is(#surfacePanel, .surfwin) .presets .forget { font: 500 10px system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 5px; } #surfaceHost :is(#surfacePanel, .surfwin) .presets .forget { text-transform: none; font-size: 12px; line-height: 1; } #surfaceHost :is(#surfacePanel, .surfwin) .presets[hidden], #surfaceHost :is(#surfacePanel, .surfwin) .presets [hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .characters button.on { color: #a9d0f5; border-color: #2f4a68; background: #171a21; } #surfaceHost :is(#surfacePanel, .surfwin) .stack { grid-area: pro; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: flex-start; } #surfaceHost :is(#surfacePanel, .surfwin) .switches { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 1px solid #262b33; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="clean"] .switches { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .switches .num { grid-template-columns: 7em max-content; padding: 2px 6px; } #surfaceHost :is(#surfacePanel, .surfwin) .switches .num[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .sw { display: grid; grid-template-columns: 7em max-content; gap: 6px; font: 11px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid #262b33; padding: 2px 6px; cursor: pointer; text-align: left; white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .sw[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .sw .k { color: #7d8596; } #surfaceHost :is(#surfacePanel, .surfwin) .sw b { color: #d5d9e0; font-weight: 400; } #surfaceHost :is(#surfacePanel, .surfwin) .sw.on b { color: var(--character, #a9d0f5); } #surfaceHost :is(#surfacePanel, .surfwin) .sw:hover { border-color: #2f4a68; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="opto"] { --character: #ece3cf; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="fet"] { --character: #3c96ff; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="vca"] { --character: #ffc83c; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="bus"] { --character: #c6cedb; } #surfaceHost :is(#surfacePanel, .surfwin) .characters button.on { color: var(--character, #a9d0f5); border-color: color-mix(in srgb, var(--character, #a9d0f5) 45%, #171a21); background: color-mix(in srgb, var(--character, #a9d0f5) 12%, #171a21); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="opto"] .reading b, #surfaceHost :is(#surfacePanel, .surfwin)[data-character="fet"] .reading b, #surfaceHost :is(#surfacePanel, .surfwin)[data-character="vca"] .reading b, #surfaceHost :is(#surfacePanel, .surfwin)[data-character="bus"] .reading b { color: var(--character); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="fet"] .body { border-left: 10px solid #3c96ff; padding-left: 12px; background: linear-gradient(90deg, rgba(60,150,255,0.30), rgba(60,150,255,0.08) 28px, rgba(60,150,255,0) 60px); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="opto"] .body { box-shadow: inset 0 0 0 1px rgba(236,227,207,0.35); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="opto"] .curvewrap canvas { border: 1px solid #c9bea6; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="vca"] .body { box-shadow: inset 0 0 0 1px rgba(255,200,60,0.35); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="bus"] .body { box-shadow: inset 0 0 0 1px rgba(198,206,219,0.32), inset 0 0 0 4px #17181a, inset 0 0 0 5px rgba(198,206,219,0.16); } #surfaceHost :is(#surfacePanel, .surfwin) .curvewrap { grid-area: curve; } #surfaceHost :is(#surfacePanel, .surfwin) canvas { display: block; } #surfaceHost :is(#surfacePanel, .surfwin) .cap { display: flex; justify-content: space-between; gap: 8px; font: 10px system-ui, sans-serif; color: #6f7787; margin-top: 4px; } #surfaceHost :is(#surfacePanel, .surfwin) .cap b { color: #c9c94f; font-weight: 500; font-family: ui-monospace, monospace; } #surfaceHost :is(#surfacePanel, .surfwin) .cap i { font-style: normal; color: #e6e9ef; font-family: ui-monospace, monospace; } #surfaceHost :is(#surfacePanel, .surfwin) .pro { grid-area: pro; display: grid; grid-template-columns: 1fr; gap: 3px; } #surfaceHost :is(#surfacePanel, .surfwin) .num { display: grid; grid-template-columns: 6.5em max-content; gap: 8px; cursor: grab; user-select: none; padding: 2px 4px; color: #7d8596; white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .num:hover, #surfaceHost :is(#surfacePanel, .surfwin) .num:focus-visible, #surfaceHost :is(#surfacePanel, .surfwin) .glyph:focus-visible { background: #171a21; outline: 1px solid #2f4a68; } #surfaceHost :is(#surfacePanel, .surfwin) .num b { color: #d5d9e0; font-weight: 400; } #surfaceHost :is(#surfacePanel, .surfwin) .times { grid-area: times; display: flex; gap: 10px; } #surfaceHost :is(#surfacePanel, .surfwin) .glyph { display: grid; gap: 2px; color: #7d8596; cursor: grab; user-select: none; } #surfaceHost :is(#surfacePanel, .surfwin) .glyph b { color: #d5d9e0; font-weight: 400; } #surfaceHost :is(#surfacePanel, .surfwin) .history { grid-area: history; } #surfaceHost :is(#surfacePanel, .surfwin) .history canvas { cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .body.eq { grid-template-areas: "presets" "curve" "band"; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb { grid-template-areas: "macros" "room" "strip" "decay" "pro"; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.reverb { grid-template-areas: "macros macros" "room decay" "strip pro"; align-items: start; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .decaywrap { grid-area: decay; min-width: 0; } #surfaceHost .winbar .audition { width: auto; padding: 0 7px; white-space: nowrap; font-size: 11px; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .roomwrap { grid-area: room; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .stripwrap { grid-area: strip; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .pro { grid-template-columns: 1fr 1fr; column-gap: 8px; align-content: start; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.reverb .pro { grid-template-columns: 1fr; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .num[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .stripwrap .cap .src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .stripwrap .cap .end { flex: none; white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .cap button.sync { font: 12px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid #262b33; padding: 0 5px; cursor: pointer; line-height: 1.3; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .cap button.sync:hover { border-color: #2f4a68; color: #d5d9e0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .cap button.sync.on { color: #a9d0f5; border-color: #2f4a68; background: #171a21; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .pro .num { grid-template-columns: 7.5em max-content; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .cap .words { flex: 1; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .cap .num { grid-template-columns: max-content max-content; flex: none; } #surfaceHost :is(#surfacePanel, .surfwin) .body.reverb .characters button.on { color: var(--character, #a9d0f5); border-color: color-mix(in srgb, var(--character, #a9d0f5) 45%, #171a21); background: color-mix(in srgb, var(--character, #a9d0f5) 12%, #171a21); } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay { grid-template-areas: "macros" "readings" "train" "spectra" "pro" "toggles"; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.delay { grid-template-areas: "macros macros" "readings readings" "train pro" "spectra toggles"; align-items: start; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .trainwrap { grid-area: train; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .spectrawrap { grid-area: spectra; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .cap .cuts { display: flex; gap: 6px; flex: none; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .cap .num { grid-template-columns: max-content max-content; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .pro { grid-template-columns: 1fr 1fr; column-gap: 8px; align-content: start; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.delay .pro { grid-template-columns: 1fr; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .num[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .toggles { grid-area: toggles; display: flex; flex-wrap: wrap; gap: 4px 8px; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .toggles .sw { grid-template-columns: max-content max-content; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .cap .words { flex: 1; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.delay .cap .end { flex: none; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter { grid-template-areas: "macros macros" "readings readings" "hist meters" "hcap hcap" "ctl ctl" "say say"; column-gap: 10px; row-gap: 8px; align-items: start; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter { grid-template-areas: "macros macros macros" "hist meters readings" "hcap hcap hcap" "ctl ctl ctl" "say say say"; column-gap: 10px; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .macros { gap: 4px; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .histwrap { grid-area: hist; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .histwrap canvas { outline: 1px solid #1c2029; outline-offset: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .lmeters { grid-area: meters; position: relative; align-self: stretch; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .lmeters canvas { position: absolute; top: 0; left: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .readings { gap: 6px; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter .readings { grid-template-columns: 1fr; align-self: start; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .reading { background: none; border: none; border-top: 1px solid #262b33; padding: 5px 0 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .reading b { font-variant-numeric: tabular-nums; white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter .reading b { font-size: 15px; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .reading.tp b.hot { color: #c9c94f; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .hcap { grid-area: hcap; margin-top: -4px; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .hcap .time { flex: none; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .lctl { grid-area: ctl; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; border-top: 1px solid #1c2029; padding-top: 8px; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .lctl .tile { grid-column: span 2; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .lctl .tile.glyph { grid-column: span 3; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter .lctl { grid-template-columns: repeat(5, minmax(0, 1fr)); } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter .lctl .tile, #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter .lctl .tile.glyph { grid-column: span 1; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter .lctl .tile[data-key="link"] { order: 1; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile { display: grid; grid-template-rows: auto auto auto; gap: 3px; min-width: 0; padding: 2px 4px 3px; margin: -2px -4px -3px; cursor: grab; user-select: none; color: #7d8596; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile:hover, #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile:focus-visible { background: #141820; outline: 1px solid #2f4a68; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile .k { font: 500 9px system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #7d8596; white-space: nowrap; overflow: hidden; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile b { font: 500 13px ui-monospace, monospace; font-variant-numeric: tabular-nums; color: #e6e9ef; white-space: nowrap; overflow: hidden; text-overflow: clip; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile .pos { align-self: end; display: block; position: relative; height: 2px; margin: 3px 0 2px; background: #1f242d; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter .tile { grid-template-rows: auto auto 22px; } #surfaceHost :is(#surfacePanel, .surfwin).floating .body.limiter .tile .pos { margin: 0 0 4px; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile .pos s { position: absolute; left: 0; top: 0; bottom: 0; background: #5f9ed6; text-decoration: none; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile.driven { background: #171a21; outline: 1px solid #2f4a68; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .tile.driven b { color: #a9d0f5; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .say { grid-area: say; margin-top: 0; align-items: baseline; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .say .words { flex: 1; min-width: 0; color: #a3abb9; font-size: 10.5px; line-height: 1.4; } #surfaceHost :is(#surfacePanel, .surfwin) .body.limiter .say .end { flex: none; } #surfaceHost :is(#surfacePanel, .surfwin) .body.eq .cap .words { flex: 1; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .body.eq .cap .end { flex: none; } #surfaceHost :is(#surfacePanel, .surfwin) .eqpresets { grid-area: presets; } #surfaceHost :is(#surfacePanel, .surfwin) .body.eq .curvewrap { position: relative; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .anrow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 3px; } #surfaceHost :is(#surfacePanel, .surfwin) .anrow .k { font: 500 9px system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #6f7787; margin-right: 2px; } #surfaceHost :is(#surfacePanel, .surfwin) .anrow .gap { flex: 1; } #surfaceHost :is(#surfacePanel, .surfwin) .anrow button { font: 10px ui-monospace, monospace; color: #6f7787; background: none; border: 1px solid #262b33; padding: 0 5px; height: 16px; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .anrow button.on { color: #e6e9ef; border-color: #4a515e; background: #171a21; } #surfaceHost :is(#surfacePanel, .surfwin) .anrow button[data-view="post"].on { color: #a9d0f5; border-color: #2f4a68; } #surfaceHost :is(#surfacePanel, .surfwin) .anrow select { font: 10px ui-monospace, monospace; color: #d5d9e0; background: #171a21; border: 1px solid #262b33; height: 16px; padding: 0 2px; } #surfaceHost :is(#surfacePanel, .surfwin) .anrow select.solo.on { color: #15171c; background: #e6e9ef; border-color: #e6e9ef; } #surfaceHost :is(#surfacePanel, .surfwin) canvas.curve:focus-visible { outline: 1px solid #232a35; outline-offset: -1px; } #surfaceHost :is(#surfacePanel, .surfwin) canvas.decay:focus-visible { outline: 1px solid #2f4a68; outline-offset: -1px; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard { position: absolute; z-index: 3; display: grid; gap: 4px; padding: 5px 6px; background: #12151c; border: 1px solid var(--band, #333a46); box-shadow: 0 8px 22px -8px rgba(0,0,0,0.9); font: 10px ui-monospace, monospace; color: #a3abb9; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .row { display: flex; align-items: center; gap: 5px; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .gap { flex: 1; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .name { color: var(--band, #d5d9e0); font-weight: 500; letter-spacing: 0.04em; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard button { font: 10px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid #262b33; padding: 0 5px; height: 17px; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard button:hover { color: #d5d9e0; border-color: #4a515e; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard button svg, #surfaceHost :is(#surfacePanel, .surfwin) .band .bhear svg { display: block; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .chear, #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .crm { display: inline-flex; align-items: center; justify-content: center; width: 21px; padding: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .band .bhear { display: inline-flex; align-items: center; gap: 4px; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard button.on { color: #12151c; background: var(--band, #7fb2e6); border-color: var(--band, #7fb2e6); } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .ctype, #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .cplace { display: flex; align-items: center; gap: 6px; width: 100%; height: auto; padding: 3px 5px; color: #d5d9e0; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .ctype svg, #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .cplace svg { flex: none; color: var(--band, #d5d9e0); } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .ctype .word, #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .cplace .word { white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .eqcard .vals { color: #d5d9e0; white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .bands { grid-area: band; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .band[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .band .row { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } #surfaceHost :is(#surfacePanel, .surfwin) .band .row .k { display: inline-flex; align-items: center; gap: 5px; font: 500 10px system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--band, #7d8596); white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .band .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--band); border: 1px solid var(--band); } #surfaceHost :is(#surfacePanel, .surfwin) .band .dot.out { background: none; } #surfaceHost :is(#surfacePanel, .surfwin) .band .bprev, #surfaceHost :is(#surfacePanel, .surfwin) .band .bnext { width: 18px; height: 20px; padding: 0; font: 12px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid #262b33; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .band .bprev:hover:not(:disabled), #surfaceHost :is(#surfacePanel, .surfwin) .band .bnext:hover:not(:disabled) { color: #d5d9e0; border-color: #4a515e; } #surfaceHost :is(#surfacePanel, .surfwin) .band .bprev:disabled, #surfaceHost :is(#surfacePanel, .surfwin) .band .bnext:disabled { color: #333a46; cursor: default; } #surfaceHost :is(#surfacePanel, .surfwin) .band .pick { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; font: 11px ui-monospace, monospace; color: #d5d9e0; background: none; border: 1px solid #262b33; cursor: pointer; white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .band .pick:hover { border-color: #4a515e; } #surfaceHost :is(#surfacePanel, .surfwin) .band .pick svg { flex: none; display: block; color: var(--band, #d5d9e0); } #surfaceHost :is(#surfacePanel, .surfwin) .band .bon { width: 30px; height: 20px; padding: 0; font: 11px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid #262b33; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .band .bon.on { background: var(--band); color: #15171c; border-color: var(--band); } #surfaceHost :is(#surfacePanel, .surfwin) .band .bhear { height: 20px; padding: 0 6px; font: 11px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid #262b33; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .band .bhear.on { background: #e6e9ef; color: #15171c; border-color: #e6e9ef; } #surfaceHost :is(#surfacePanel, .surfwin) .band .nums { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; } #surfaceHost :is(#surfacePanel, .surfwin) .band .num { grid-template-columns: max-content max-content; } #surfaceHost :is(#surfacePanel, .surfwin) .band .num.inert b { color: #4a515e; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .characters { flex: 1; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .noise { font: 11px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid #262b33; padding: 1px 6px; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .noise.on { color: #15171c; background: #e6e9ef; border-color: #e6e9ef; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .noise[hidden], #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .cards[hidden], #surfaceHost :is(#surfacePanel, .surfwin) .sslrow[hidden] { display: none; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .cards { display: inline-flex; align-items: baseline; gap: 2px; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .cards .k { font: 500 10px system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #7d8596; margin-right: 4px; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .cards button { font: 11px ui-monospace, monospace; color: #7d8596; background: none; border: 1px solid #262b33; padding: 1px 6px; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .eqchar .cards button[aria-disabled="true"] { border-style: dashed; opacity: 0.55; cursor: default; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] { --character: #ece6d6; --ssl-print: #ece6d6; --ssl-dim: #aaa495; --ssl-font: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq { background: linear-gradient(180deg, #474c53, #3a3e44 140px, #363a40); color: var(--ssl-print); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq :is(.presets .k, .characters .k, .eqchar .cards .k, .presets .save, .sslrow .k) { font-family: var(--ssl-font); font-stretch: condensed; font-weight: 700; letter-spacing: 0.12em; color: var(--ssl-print); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq :is(.presets .menu, .anrow select) { background: #2a2e33; border-color: #555b63; color: var(--ssl-print); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq :is(.characters button, .anrow button, .eqchar .noise, .eqchar .cards button) { color: var(--ssl-dim); border-color: #555b63; background: #2a2e33; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq .characters button.on { color: #15171c; background: var(--ssl-print); border-color: var(--ssl-print); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq .anrow button.on { color: var(--ssl-print); border-color: #8a8f96; background: #1d2024; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq .anrow button[data-view="post"].on { color: #a9d0f5; border-color: #2f4a68; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq .eqchar .noise.on, #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq .eqchar .cards button.on { color: #15171c; background: #e6e9ef; border-color: #e6e9ef; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq canvas.curve { background: #1d2024; box-shadow: inset 0 1px 6px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.08); border: 1px solid #0c0d0f; border-radius: 2px; } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq .cap { color: var(--ssl-dim); } #surfaceHost :is(#surfacePanel, .surfwin)[data-character="ssl"] .body.eq .cap a { color: var(--ssl-print); } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow { display: flex; align-items: flex-end; gap: 4px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.35); } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .who { display: grid; gap: 5px; justify-items: start; align-self: center; margin-right: 2px; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .role { font: 700 13px/1 var(--ssl-font); font-stretch: condensed; letter-spacing: 0.12em; color: var(--ssl-print); } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .nav { display: inline-flex; align-items: center; gap: 3px; font: 11px ui-monospace, monospace; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .nav b { color: var(--ssl-print); font-weight: 600; min-width: 1.4em; text-align: center; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow :is(.sprev, .snext, .son) { font: 11px ui-monospace, monospace; color: var(--ssl-dim); background: #2a2e33; border: 1px solid #555b63; padding: 0 5px; height: 18px; cursor: pointer; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .son.on { color: #15171c; background: var(--ssl-print); border-color: var(--ssl-print); } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .knobs { display: flex; flex: 1; justify-content: space-around; min-width: 0; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .sknob { display: grid; justify-items: center; gap: 1px; cursor: grab; user-select: none; padding: 0 2px; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .sknob canvas { width: 60px; height: 60px; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .sknob.drive canvas { width: 50px; height: 50px; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .sknob .k { font-size: 10px; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .sknob b { font: 11px ui-monospace, monospace; color: #e6e9ef; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .sknob.inert b { color: #6a6f76; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .sknob.driven b { color: #c9c94f; } #surfaceHost :is(#surfacePanel, .surfwin) .sslrow .sknob:focus-visible { outline: 1px solid var(--ssl-print); outline-offset: 1px; } #surfaceHost #paramsPanel { width: 300px; border-left: 1px solid #262b33; overflow-y: auto; background: #101218; display: flex; flex-direction: column; } #surfaceHost #paramsPanel[hidden] { display: none; } #surfaceHost #paramsPanel .status { padding: 4px 10px; font-size: 10px; } #surfaceHost #paramsPanel .pmodule { padding: 6px 10px 2px; font-size: 10px; color: #6f7787; border-top: 1px solid #1c2028; } #surfaceHost #paramsPanel .prow { display: grid; grid-template-columns: 90px 1fr 62px; gap: 6px; align-items: center; padding: 2px 10px; font-size: 10px; } #surfaceHost #paramsPanel .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #surfaceHost #paramsPanel .pslider { position: relative; height: 14px; background: #171a21; border: 1px solid #2c323c; border-radius: 3px; cursor: grab; } #surfaceHost #paramsPanel .pfill { position: absolute; left: 0; top: 0; bottom: 0; background: #2f4a68; border-radius: 2px; } #surfaceHost #paramsPanel .pthumb { position: absolute; top: -1px; width: 6px; height: 14px; margin-left: -3px; background: #dfe3ea; border-radius: 2px; } #surfaceHost #paramsPanel .pselect { grid-column: 2 / 4; width: 100%; background: #171a21; color: #d5d9e0; border: 1px solid #2c323c; border-radius: 3px; font: inherit; font-size: 10px; } #surfaceHost #paramsPanel .pvalue { text-align: right; color: #8b93a1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #surfaceHost #searchPanel { width: 280px; border-right: 1px solid #262b33; overflow-y: auto; background: #101218; display: flex; flex-direction: column; } #surfaceHost #searchPanel[hidden] { display: none; } #surfaceHost #overview { display: block; width: 100%; height: 64px; flex: none; border-bottom: 1px solid #262b33; cursor: pointer; } #surfaceHost #deck { display: flex; flex: 1; min-height: 0; } #surfaceHost #strips { display: flex; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 6px; align-items: stretch; } #surfaceHost #masterPanel { flex: none; padding: 8px; border-left: 1px solid #262b33; background: #101318; display: flex; align-items: stretch; } .inline-edit { position: absolute; z-index: 5; font: inherit; font-size: 11px; background: #171a21; color: #fff; border: 1px solid #5f9ed6; border-radius: 3px; padding: 0 4px; outline: none; box-sizing: border-box; } #surfaceHost .strip { position: relative; width: 100px; flex: none; display: flex; flex-direction: column; gap: 6px; background: #14171e; border: 1px solid #262b33; border-radius: 6px; padding: 6px; user-select: none; } #surfaceHost .strip:not(.master):hover { border-color: #3d4656; } #surfaceHost .strip.selected, #surfaceHost .strip.selected:hover { border-color: #ff7043; } #surfaceHost .strip.differs { border-color: #8a7a34; } #surfaceHost .strip.drop { box-shadow: -3px 0 0 #5f9ed6; } #surfaceHost .strip.drop-after { box-shadow: 3px 0 0 #5f9ed6; } #surfaceHost .strip:not(.master) { cursor: grab; } #surfaceHost .strip .diff { font-size: 9px; color: #e8c76a; line-height: 1.3; white-space: normal; } #surfaceHost #compareRef { font-size: 11px; } #surfaceHost .strip .name { border-top: 3px solid #444; padding-top: 4px; font-size: 11px; display: flex; gap: 4px; align-items: baseline; overflow: hidden; cursor: default; } #surfaceHost .strip .name .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px dotted #6f7787; cursor: text; } #surfaceHost .strip .dry { color: #8b93a1; font-size: 9px; font-style: italic; } #surfaceHost .strip .live { color: #5f9ed6; font-size: 9px; margin-right: 4px; } :root { --return: #b08de0; } #surfaceHost .strip .ret { color: var(--return); font-size: 9px; } #surfaceHost .strip.return .name { border-top-color: var(--return); } #surfaceHost .strip .sends { display: flex; flex-direction: column; gap: 2px; height: var(--sends-h, 50px); flex: none; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } #surfaceHost .strip .sends.slot { visibility: hidden; } #surfaceHost .send { flex: none; display: flex; align-items: center; gap: 3px; font-size: 9px; min-width: 0; } #surfaceHost .send .knob { width: 14px; height: 14px; margin: 0; flex: none; } #surfaceHost .send .knob:focus-visible { outline: 1px solid #5f9ed6; outline-offset: 1px; } #surfaceHost .send .knob .ind { top: 1px; height: 5px; transform-origin: 1px 6px; background: var(--return); } #surfaceHost .send .to { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aab1bd; cursor: pointer; } #surfaceHost .send .to:hover { color: #d5d9e0; } #surfaceHost .send .pre { flex: none; font-size: 8px; padding: 0 2px; line-height: 12px; } #surfaceHost .send .pre.on { background: #2c323e; color: #d5d9e0; border-color: #4a515e; } #surfaceHost .send .power { flex: none; width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid #333a46; background: var(--return); } #surfaceHost .send.muted .power { background: #2c323c; } #surfaceHost .send .x { flex: none; width: 10px; padding: 0; font-size: 9px; line-height: 10px; background: none; border: none; color: #6f7787; visibility: hidden; } #surfaceHost .send:hover .x, #surfaceHost .send .x:focus-visible { visibility: visible; } #surfaceHost .send .x:hover { color: #d5d9e0; } #surfaceHost .send.muted .knob, #surfaceHost .send.muted .to { opacity: .45; } #surfaceHost .sends .add { flex: none; font-size: 9px; padding: 0 4px; background: none; text-align: left; border: 1px dashed #333a46; color: #6f7787; } #surfaceHost .strip .input { display: flex; align-items: flex-start; justify-content: center; gap: 8px; } #surfaceHost .strip .input .knob { margin: 2px 0 14px; flex: none; } #surfaceHost .strip .pol { width: 22px; height: 22px; padding: 0; margin-top: 3px; font-size: 12px; line-height: 1; } #surfaceHost .strip .pol.on { background: #c9a94f; color: #15171c; } #surfaceHost .strip .mono { width: 22px; height: 22px; padding: 0; margin-top: 3px; display: inline-flex; align-items: center; justify-content: center; } #surfaceHost .strip .mono svg circle { fill: none; stroke: currentColor; stroke-width: 1.4; } #surfaceHost .strip .mono.on { background: #c9a94f; color: #15171c; } #surfaceHost .strip .mono.on svg .l { cx: 8px; } #surfaceHost .strip .mono.on svg .r { display: none; } #surfaceHost canvas.vu { display: block; width: 86px; height: 46px; margin: 4px auto 0; } #surfaceHost .strip .delta { font-size: 10px; text-align: center; color: #8b93a1; height: 12px; line-height: 12px; } #surfaceHost .strip .delta.warn { color: #e8c76a; } #surfaceHost .strip .lufs { font-size: 10px; line-height: 12px; text-align: center; color: #8b93a1; cursor: default; margin: auto 0; font-variant-numeric: tabular-nums; white-space: nowrap; } #surfaceHost .strip .lufs .int { color: #c9d1d9; font-size: 13px; line-height: 15px; } #surfaceHost .strip .lufs .int small { font-size: 9px; color: #8b93a1; } #surfaceHost .strip .lufs .win { display: grid; grid-template-columns: 1fr 1fr; font-size: 9px; padding: 0 2px; } #surfaceHost .strip .lufs .win b { font-weight: normal; font-size: 10px; color: #c9d1d9; } #surfaceHost .strip .lufs .tp.hot { color: #e8c76a; } #surfaceHost .strip .inserts { display: flex; flex-direction: column; gap: 3px; height: var(--chain-h, 150px); overflow-y: auto; overflow-x: hidden; flex: none; scrollbar-width: thin; } #surfaceHost .insert { flex: none; font-size: 10px; padding: 2px 4px; background: #232833; border: 1px solid #333a46; border-radius: 3px; cursor: pointer; overflow: hidden; display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: baseline; min-width: 0; } #surfaceHost .insert .label { order: -1; flex: 1 1 100%; min-width: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.25; } #surfaceHost .insert .power { flex: none; align-self: center; width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid #333a46; background: #5f9ed6; } #surfaceHost .insert.bypassed .power { background: #2c323c; } #surfaceHost .insert.missing .power { background: none; border-color: #8b93a1; } #surfaceHost .insert .trim { flex: none; margin-left: auto; font-size: 9px; color: #8b93a1; cursor: grab; white-space: nowrap; min-width: 30px; text-align: center; padding: 0 3px; background: #171a21; border: 1px solid #333a46; border-radius: 3px; } #surfaceHost .insert .trim:hover { border-color: #5f9ed6; color: #d5d9e0; } #surfaceHost .insert .trim.set { color: #7fb2e6; border-color: #3d5d80; } #surfaceHost .insert.bypassed { opacity: .4; } #surfaceHost .inserts .chainhead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 1px 4px; font-size: 9px; color: #6f7787; background: #14171e; flex: none; } #surfaceHost .strip.master .chainhead { background: #171a21; } #surfaceHost .inserts .chainhead { cursor: grab; } #surfaceHost .chainhead .power { flex: none; width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid #333a46; background: #5f9ed6; cursor: pointer; } #surfaceHost .chainhead .power.off { background: #2c323c; } #surfaceHost .chainhead .grid { flex: none; margin-left: auto; display: inline-flex; padding: 1px 2px; background: none; border: 1px solid transparent; color: #6f7787; cursor: pointer; } #surfaceHost .chainhead .grid svg rect { fill: none; stroke: currentColor; stroke-width: 1; } #surfaceHost .chainhead .grid:hover { color: #d5d9e0; border-color: #3d4656; } #surfaceHost .chainhead .grid.on { color: #5f9ed6; } #surfaceHost .inserts.chain-out .insert { opacity: .4; } #surfaceHost .insert .trim.matched { color: #7fb2e6; } #surfaceHost .insert.missing { border-style: dashed; border-color: #6f7787; color: #8b93a1; } #surfaceHost .insert.missing .label { text-decoration: line-through; } #surfaceHost .insert.windowed { box-shadow: inset 2px 0 0 #5f9ed6; } #surfaceHost .insert.open { border-color: #5f9ed6; box-shadow: inset 0 0 0 1px #5f9ed6; } #surfaceHost .insert.clipped { border-color: #e05555; } #surfaceHost .strip .inserts { position: relative; } #surfaceHost .inserts .slotline { position: absolute; left: 2px; right: 2px; height: 2px; z-index: 2; pointer-events: none; background: #5f9ed6; box-shadow: 0 0 0 1px rgba(95, 158, 214, 0.35); } #surfaceHost .inserts.over { outline: 1px dashed #5f9ed6; outline-offset: -1px; } #surfaceHost .inserts .add { font-size: 10px; padding: 1px 4px; background: none; border: 1px dashed #333a46; color: #6f7787; } #surfaceHost .inserts .quicks { display: flex; gap: 3px; margin-top: 3px; } #surfaceHost .inserts .add.quick { display: flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; border-style: solid; padding: 1px 2px; } #surfaceHost .inserts .add.quick svg { max-width: 100%; } #surfaceHost .inserts .add.quick:hover { color: #d5d9e0; border-color: #4a515e; } #surfaceHost .strip .chain-grip { flex: none; height: 7px; margin: -4px 0 -3px; cursor: ns-resize; background: linear-gradient(#262b33, #262b33) center / 60% 1px no-repeat; } #surfaceHost .strip .chain-grip:hover, #surfaceHost .strip .chain-grip.held { background-image: linear-gradient(#5f9ed6, #5f9ed6); background-size: 80% 2px; } #surfaceHost .knob { position: relative; width: 28px; height: 28px; margin: 2px auto 14px; border-radius: 50%; background: #232833; border: 1px solid #333a46; cursor: grab; } #surfaceHost .knob .ind { position: absolute; left: 50%; top: 2px; width: 2px; height: 9px; margin-left: -1px; background: #c9a94f; transform-origin: 1px 11px; } #surfaceHost .knob .val { position: absolute; top: 29px; left: -20px; right: -20px; text-align: center; font-size: 9px; color: #8b93a1; } #surfaceHost .fader-row { display: flex; gap: 4px; flex: 1; min-height: 100px; justify-content: center; } #surfaceHost .scale { position: relative; width: 20px; font-size: 8px; color: #6f7787; } #surfaceHost .scale span { position: absolute; right: 2px; transform: translateY(50%); } #surfaceHost .fader { position: relative; width: 34px; cursor: grab; } #surfaceHost .fader .rail { position: absolute; left: 15px; top: 0; bottom: 0; width: 4px; background: rgba(255,255,255,0.10); border-radius: 2px; } #surfaceHost .fader .unity { position: absolute; left: -4px; width: 12px; height: 1px; background: rgba(255,255,255,0.35); } #surfaceHost .fader .handle { position: absolute; left: -7px; width: 18px; height: 10px; margin-bottom: -5px; background: #dfe3ea; border-radius: 2px; } #surfaceHost .fader[aria-disabled] { opacity: .35; cursor: default; } #surfaceHost .fader.automated { opacity: 1; cursor: default; } #surfaceHost .fader.automated .handle { background: #5f9ed6; } #surfaceHost .knob.automated { cursor: default; } body.automating [data-automate] { outline: 1px dashed rgba(111,195,160,0.7); outline-offset: 1px; cursor: crosshair; } #surfaceHost #paramsPanel .pslider.automated { cursor: default; border-color: #6fc3a0; } #surfaceHost #paramsPanel .pslider.automated .pthumb { background: #6fc3a0; } #surfaceHost #paramsPanel .pselect.automated { border-color: #6fc3a0; } #surfaceHost #paramsPanel.armed .pslider, #surfaceHost #paramsPanel.armed .pselect, #surfaceHost .armed [data-automate] { outline: 1px dashed rgba(111,195,160,0.7); outline-offset: 1px; } #surfaceHost canvas.meter { width: 14px; align-self: stretch; cursor: pointer; } #surfaceHost .strip input.db { width: 100%; background: #171a21; color: #d5d9e0; border: 1px solid #2c323c; border-radius: 3px; font: inherit; font-size: 10px; text-align: center; padding: 2px; } #surfaceHost .strip .ms { display: flex; gap: 4px; justify-content: center; } #surfaceHost .strip .ms button { width: 28px; padding: 2px 0; font-size: 10px; } #surfaceHost .strip .ms .m.on { background: #d08a3e; color: #15171c; } #surfaceHost .strip .ms .s.on { background: #c9c94f; color: #15171c; } #surfaceHost .strip.master { background: #171a21; } #surfaceHost .strip.master .name { cursor: default; } #surfaceHost .strip.master .slot { visibility: hidden; } #surfaceHost .strip .ms.clickctl { align-items: center; } #surfaceHost .strip .ms .clk { width: 24px; } #surfaceHost .strip .ms .clk.on { color: #d5e8f8; border-color: #5f9ed6; background: rgba(95, 158, 214, 0.28); } #surfaceHost .strip .clicklevel { width: 34px; padding: 2px 0; font-size: 10px; text-align: center; color: #8b93a1; border: 1px solid #2c323c; border-radius: 3px; background: #171a21; cursor: grab; user-select: none; } #surfaceHost .strip .clicklevel.on { color: #d5e8f8; } #surfaceHost .strip .clicklevel.held { cursor: grabbing; border-color: #5f9ed6; } #surfaceHost .strip.inert { opacity: .45; pointer-events: none; } #surfaceHost .seg { display: inline-flex; border: 1px solid #333a46; border-radius: 4px; overflow: hidden; } #surfaceHost .seg button { border: none; border-radius: 0; padding: 4px 8px; } #surfaceHost .seg button.on { background: #2c323e; color: #fff; } #surfaceHost #loopBtn.on, #surfaceHost #clickBtn.on, #surfaceHost #onsetsBtn.on { color: #d5e8f8; border-color: #5f9ed6; background: rgba(95, 158, 214, 0.28); } #surfaceHost button kbd.key { font: inherit; font-size: 9px; color: #8b93a1; border: 1px solid #3a414e; border-radius: 3px; padding: 0 3px; margin-left: 3px; } #surfaceHost #searchPanel .bar { display: flex; padding: 8px 10px; border-bottom: 1px solid #262b33; } #surfaceHost #searchInput { flex: 1; background: #171a21; color: #d5d9e0; border: 1px solid #2c323c; border-radius: 4px; padding: 5px 8px; font: inherit; } #surfaceHost #searchResults { overflow-y: auto; flex: 1; } #surfaceHost .srow { padding: 6px 10px; cursor: pointer; border-left: 2px solid transparent; } #surfaceHost .srow:hover { background: #1a1d25; } #surfaceHost .srow.playing { border-left-color: #4fae62; background: #16211a; } #surfaceHost .srow .top { display: flex; gap: 8px; align-items: baseline; } #surfaceHost .srow .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #surfaceHost .srow .sigma { color: #6f7787; font-size: 10px; } #surfaceHost .srow .meta { display: flex; gap: 8px; align-items: center; } #surfaceHost .srow .cat { color: #6f7787; font-size: 10px; flex: 1; } #surfaceHost .srow .like { color: #5f9ed6; font-size: 10px; cursor: pointer; } #surfaceHost .srow .like:hover { text-decoration: underline; } #surfaceHost .sbar { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 3px; } #surfaceHost .sbar div { height: 100%; background: #5f9ed6; border-radius: 2px; } #surfaceHost #historyPanel .bar { display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: #101218; border-bottom: 1px solid #262b33; flex-wrap: wrap; } #surfaceHost #historyPanel select { background: #171a21; color: #d5d9e0; border: 1px solid #2c323c; border-radius: 4px; padding: 3px 4px; font: inherit; max-width: 120px; } #surfaceHost #historyPanel .bar .title { color: #8b93a1; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; flex: 1; } #surfaceHost .hrow { padding: 5px 10px; cursor: pointer; display: flex; gap: 6px; align-items: baseline; border-left: 2px solid transparent; } #surfaceHost .hrow:hover { background: #1a1d25; } #surfaceHost .hrow.head { border-left-color: #ff7043; background: #191d26; } #surfaceHost .tag { background: #3a3320; color: #e8c76a; border-radius: 8px; padding: 0 6px; font-size: 10px; white-space: nowrap; } #surfaceHost .tag .x { margin-left: 4px; cursor: pointer; color: #8b7a3e; } #surfaceHost .tag .x:hover { color: #fff; } #surfaceHost .hrow .msg { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #surfaceHost .hrow .count { color: #6f7787; background: #232833; border-radius: 8px; padding: 0 6px; font-size: 10px; } #surfaceHost .hrow .when { color: #6f7787; font-size: 10px; } #surfaceHost .hrow.sub { padding-left: 26px; color: #9aa1ae; } #surfaceHost .hrow.abandoned { color: #6f7787; } #surfaceHost .hrow.abandoned .msg { text-decoration: line-through; } #surfaceHost .hrow .off { color: #6f7787; border: 1px solid #333a46; border-radius: 8px; padding: 0 6px; font-size: 10px; white-space: nowrap; } #surfaceHost .metrics { flex: none; display: flex; gap: 22px; padding: 10px 14px; overflow: hidden; border-top: 1px solid #262b33; flex-wrap: nowrap; align-items: center; white-space: nowrap; } #surfaceHost .metric { display: flex; flex-direction: column; } #surfaceHost .metric .k { color: #6f7787; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; } #surfaceHost .metric .v { font-size: 17px; font-variant-numeric: tabular-nums; } #surfaceHost .verdict { padding: 4px 10px; border-radius: 4px; font-weight: 600; } #surfaceHost .verdict.pass { background: #14361f; color: #6ee7a0; } #surfaceHost .verdict.fail { background: #3a1618; color: #ff8f8f; } #surfaceHost .muted { color: #6f7787; } .ctxmenu { position: fixed; z-index: 20; background: #171a21; border: 1px solid #333a46; border-radius: 6px; padding: 4px 0; min-width: 200px; box-shadow: 0 6px 24px rgba(0,0,0,0.5); } .ctxmenu .item { padding: 5px 14px; cursor: pointer; white-space: nowrap; } .ctxmenu .item:hover, .ctxmenu .item:focus { background: #2c323e; outline: none; } .ctxmenu .item.disabled { color: #6f7787; cursor: default; } .ctxmenu .item.disabled:hover { background: none; } .ctxmenu .item.drawn { display: flex; align-items: center; gap: 9px; } .ctxmenu .item.drawn .glyph { flex: none; color: #8d96a8; } .ctxmenu .item.drawn:hover .glyph, .ctxmenu .item.drawn:focus .glyph { color: #d5d9e0; } .ctxmenu .item.checked { background: #222733; color: #f2f4f8; } .ctxmenu .item.checked .glyph { color: #f2f4f8; } .ctxmenu .sep { border-top: 1px solid #2c323c; margin: 4px 0; } #manualOverlay { position: fixed; inset: 0; background: rgba(6, 8, 12, 0.72); display: flex; align-items: center; justify-content: center; z-index: 10; animation: appear var(--motion) var(--ease); } #manualOverlay[hidden] { display: none; } #manualCard { background: #14171e; border: 1px solid #2c323c; border-radius: 8px; width: min(760px, 92vw); max-height: 86vh; display: flex; flex-direction: column; animation: rise var(--motion) var(--ease); } #manualCard .head { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #262b33; } #manualCard .head h2 { flex: 1; margin: 0; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #8b93a1; } #manualBody { overflow-y: auto; padding: 6px 24px 18px; line-height: 1.55; } #manualBody h1 { font-size: 15px; margin: 14px 0 6px; } #manualBody h2 { font-size: 13px; margin: 18px 0 6px; letter-spacing: .04em; text-transform: uppercase; color: #8b93a1; } #manualBody h3 { font-size: 12px; margin: 14px 0 4px; } #manualBody p, #manualBody li { color: #d5d9e0; } #manualBody table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 12px; } #manualBody th, #manualBody td { text-align: left; vertical-align: top; padding: 4px 8px; border-bottom: 1px solid #262b33; } #manualBody th { color: #8b93a1; font-weight: 600; } #manualBody code { background: #1c2028; padding: 0 4px; border-radius: 3px; } #manualBody pre { background: #1c2028; padding: 8px 10px; border-radius: 4px; overflow-x: auto; } #manualBody a { color: #5f9ed6; } #surfaceHost .dialogOverlay { position: fixed; inset: 0; background: rgba(6, 8, 12, 0.72); display: flex; align-items: center; justify-content: center; z-index: 30; } #surfaceHost .dialogCard { background: #14171e; border: 1px solid #2c323c; border-radius: 8px; padding: 16px 20px; min-width: 320px; max-width: 520px; margin: 0; display: flex; flex-direction: column; gap: 10px; } #surfaceHost .dialogCard h2 { margin: 0; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #8b93a1; } #surfaceHost .dialogCard p { margin: 0; color: #c8ccd4; white-space: pre-wrap; } #surfaceHost .dialogCard input, #surfaceHost .dialogCard select { font: inherit; background: #171a21; color: #fff; border: 1px solid #333a46; border-radius: 3px; padding: 4px 6px; outline: none; } #surfaceHost .dialogCard input:focus, #surfaceHost .dialogCard select:focus { border-color: #5f9ed6; } #surfaceHost .dialogFields { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; } #surfaceHost .dialogFields label { display: contents; } #surfaceHost .dialogFields span { color: #8b93a1; } #surfaceHost .dialogCard .buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } #surfaceHost .dialogCard button.danger { border-color: #8a3a3a; color: #f0b3b3; } #surfaceHost .dialogCard button.danger:hover { background: #4a2626; }