/* InnoBrain Decks: look of the custom pages on top of Filament. Kit colors: Innorange #fe9f43 (dark #fe830b),
   blue #2386df, dark #0c0a09, stone ramp. No build step: this file is linked as-is. */
:root {
    --deck-orange: #fe9f43;
    --deck-orange-dark: #fe830b;
    --deck-blue: #2386df;
    --deck-blue-dark: #1a69b0;
    --deck-blue-wash: rgba(35, 134, 223, 0.12);
    --deck-dark: #0c0a09;
    --deck-stone-50: #fafaf9;
    --deck-stone-100: #f5f5f4;
    --deck-stone-200: #e7e5e4;
    --deck-stone-300: #d6d3d1;
    --deck-stone-600: #57534e;
    --deck-stone-700: #44403c;
    --deck-stone-900: #1c1917;
    --deck-red: #b91c1c;
}

/* Filament shell: stone page, rounder cards, pill buttons (kit shapes). */
.fi-body { background: var(--deck-stone-100); }
.fi-section { border-radius: 1.25rem; }
.fi-btn, .fi-badge { border-radius: 9999px; }
.fi-input-wrp { border-radius: 0.875rem; }

/* Deck list */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 1.5rem; align-items: start; }
.deck-card { display: flex; flex-direction: column; gap: 0.625rem; background: #fff; border: 1px solid var(--deck-stone-200); border-radius: 1.5rem; padding: 1.625rem 1.75rem; transition: border-color 120ms ease; }
.deck-card:hover { border-color: var(--deck-stone-300); }
.deck-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deck-orange-dark); }
.deck-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 9999px; background: var(--deck-blue-wash); color: var(--deck-blue); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.deck-title { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--deck-dark); }
.deck-title a { color: inherit; text-decoration: none; }
.deck-title a:hover { color: var(--deck-blue); }
.deck-meta { margin: 0; font-size: 0.875rem; color: var(--deck-stone-600); }
.deck-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; background: var(--deck-stone-100); padding: 0.1rem 0.4rem; border-radius: 0.375rem; color: var(--deck-stone-700); }
.deck-preview { position: relative; width: 100%; overflow: hidden; border-radius: 1rem; border: 1px solid var(--deck-stone-200); background: #fff; pointer-events: none; }
.deck-preview iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.deck-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; font-size: 0.875rem; }
.deck-links a { color: var(--deck-blue); font-weight: 700; text-decoration: none; }
.deck-links a:hover { text-decoration: underline; }
.deck-status { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--deck-stone-700); }
.deck-status b { color: var(--deck-dark); }
.deck-counts { margin: 0; font-size: 0.875rem; color: var(--deck-stone-600); }
.deck-missing { margin: 0; padding: 0.625rem 0.875rem; border-radius: 0.875rem; background: rgba(185, 28, 28, 0.08); color: var(--deck-red); font-size: 0.875rem; line-height: 1.6; }
.deck-missing a { color: inherit; font-weight: 700; }
.deck-card-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.375rem; }

/* Shared building blocks */
.deck-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.deck-stack-tight { display: flex; flex-direction: column; gap: 0.75rem; }
.deck-two-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
.deck-edit-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1100px) { .deck-two-col, .deck-edit-grid { grid-template-columns: minmax(0, 1fr); } }
.deck-sticky { position: sticky; top: 5.5rem; }
.deck-list { margin: 0; padding-left: 1.125rem; font-size: 0.9375rem; line-height: 1.5; color: var(--deck-stone-700); }
.deck-list li { margin-bottom: 0.3rem; }
.deck-details { margin-top: 0.5rem; }
.deck-details summary { cursor: pointer; font-size: 0.875rem; font-weight: 700; color: var(--deck-blue); }
.deck-details .deck-list { margin-top: 0.5rem; }
.deck-empty { margin: 0; font-size: 0.9375rem; color: var(--deck-stone-600); }
.deck-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.deck-field label { font-size: 0.875rem; font-weight: 600; color: var(--deck-stone-900); }
.deck-textarea, .deck-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9375rem; line-height: 1.5; border: 1px solid var(--deck-stone-300); border-radius: 0.875rem; padding: 0.625rem 0.875rem; background: #fff; color: var(--deck-dark); }
.deck-textarea { min-height: 7rem; resize: vertical; }
.deck-textarea:focus, .deck-input:focus { outline: none; border-color: var(--deck-blue); box-shadow: 0 0 0 3px rgba(35, 134, 223, 0.25); }
.deck-prompt { min-height: 18rem; background: var(--deck-stone-50); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; line-height: 1.45; color: var(--deck-stone-900); }
.deck-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.deck-hint { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--deck-stone-600); }
.deck-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 700px) { .deck-form-grid { grid-template-columns: 1fr; } }

/* Edit page: slide navigator, facts, comments */
.deck-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.deck-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.deck-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2rem; padding: 0 0.625rem; border-radius: 9999px; border: 1px solid var(--deck-stone-200); background: #fff; color: var(--deck-dark); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
.deck-chip:hover { background: var(--deck-stone-100); }
.deck-chip.is-current { background: var(--deck-orange); border-color: var(--deck-orange); }
.deck-chip-badge { position: absolute; top: -0.4rem; right: -0.4rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3rem; border-radius: 9999px; background: var(--deck-blue); color: #fff; font-size: 0.6875rem; font-weight: 800; }
.deck-slide-facts { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; align-items: baseline; margin: 0; font-size: 0.875rem; color: var(--deck-stone-600); }
.deck-slide-facts strong { font-size: 1.0625rem; color: var(--deck-dark); }
.deck-slide-facts a { color: var(--deck-blue); font-weight: 700; text-decoration: none; }
.deck-slide-facts a:hover { text-decoration: underline; }
.deck-over { color: #dc2626; font-weight: 700; }
.deck-comments { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.deck-comment { border: 1px solid var(--deck-stone-200); border-radius: 1rem; padding: 0.75rem 1rem; background: #fff; }
.deck-comment.is-done { background: var(--deck-stone-50); }
.deck-comment.is-done .deck-comment-body { color: var(--deck-stone-600); text-decoration: line-through; }
.deck-comment-body { margin: 0 0 0.375rem; white-space: pre-wrap; font-size: 0.9375rem; line-height: 1.5; color: var(--deck-dark); }
.deck-comment-foot { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; align-items: center; font-size: 0.8125rem; color: var(--deck-stone-600); }
.deck-comment-foot button { font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--deck-blue); background: none; border: 0; padding: 0; cursor: pointer; }
.deck-comment-foot button:hover { text-decoration: underline; }
.deck-comment-foot button.is-danger { color: #b91c1c; }
.deck-comments-empty { margin: 1rem 0 0; font-size: 0.875rem; color: var(--deck-stone-600); }

/* Material groups on the detail page */
.deck-material-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .deck-material-groups { grid-template-columns: 1fr; } }
.deck-material-group .deck-lab { margin-top: 0; }
.deck-material-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.deck-material-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; padding: 0.625rem 0.875rem; border: 1px solid var(--deck-stone-200); border-radius: 0.875rem; font-size: 0.9375rem; color: var(--deck-dark); }
.deck-material-list a { color: var(--deck-blue); font-weight: 700; text-decoration: none; white-space: nowrap; }
.deck-material-list a:hover { text-decoration: underline; }

/* Screen page for the projector: dark, large type, no chrome */
.fi-body.deck-screen-body { background: var(--deck-dark); color: var(--deck-stone-50); }
.deck-screen { box-sizing: border-box; max-width: 80rem; min-height: 100vh; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 3rem; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); }
.deck-screen-head { display: flex; flex-direction: column; gap: 0.5rem; }
.deck-screen-brand { margin: 0; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deck-orange); }
.deck-screen-title { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: #fff; }
.deck-screen-event { margin: 0; font-size: clamp(1.125rem, 1.8vw, 1.5rem); color: var(--deck-stone-300); }
.deck-screen-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 720px) { .deck-screen-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .deck-screen-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.deck-screen-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem; min-height: 220px; padding: 1.75rem; border-radius: 1.5rem; background: var(--deck-stone-900); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, transform 150ms ease; }
.deck-screen-tile:hover { background: #292524; border-color: rgba(255, 255, 255, 0.16); }
.deck-screen-tile:active { transform: scale(0.98); }
.deck-screen-tile:focus-visible { outline: 3px solid var(--deck-blue); outline-offset: 3px; }
.deck-screen-tile-primary { background: var(--deck-orange); border-color: var(--deck-orange); color: var(--deck-dark); }
.deck-screen-tile-primary:hover { background: var(--deck-orange-dark); border-color: var(--deck-orange-dark); }
.deck-screen-tag { align-self: flex-start; padding: 0.25rem 0.75rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.deck-screen-tile-primary .deck-screen-tag { background: rgba(12, 10, 9, 0.12); }
.deck-screen-tile-label { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.deck-screen-tile-meta { font-size: 1.0625rem; opacity: 0.8; }
.deck-screen-empty { margin: 0; font-size: 1.5rem; color: var(--deck-stone-300); }
.deck-screen-foot { margin-top: auto; }
.deck-screen-foot a { color: var(--deck-stone-300); font-size: 0.9375rem; text-decoration: none; }
.deck-screen-foot a:hover { color: #fff; text-decoration: underline; }

/* Preview fitted into both dimensions of its container (focus mode) */
.deck-preview-contain { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; }
.deck-preview-contain iframe { border-radius: 1.5rem; background: #fff; }

/* Focus mode of the edit page: slide and comment field side by side, dark, no page scroll */
.fi-body.deck-focus-body { background: var(--deck-dark); color: var(--deck-stone-50); overflow: hidden; }
.deck-focus { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }
.deck-focus-stage { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; min-height: 0; padding: 1rem 1.5rem 1.25rem; }
.deck-focus-head { display: flex; align-items: baseline; gap: 1rem; font-size: 0.875rem; color: var(--deck-stone-300); }
.deck-focus-brand { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deck-orange); white-space: nowrap; }
.deck-focus-deck { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #fff; }
.deck-focus-leave { color: var(--deck-stone-300); text-decoration: none; white-space: nowrap; }
.deck-focus-leave:hover { color: #fff; text-decoration: underline; }
.deck-focus-slide { flex: 1; min-height: 0; min-width: 0; }
.deck-focus-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 0.9375rem; color: var(--deck-stone-300); }
.deck-focus-facts { flex: 1; min-width: 0; }
.deck-focus-facts strong { color: #fff; }
.deck-focus-nav { display: flex; gap: 0.5rem; }
.deck-focus-nav a { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.875rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.8125rem; font-weight: 700; text-decoration: none; transition: background-color 120ms ease; }
.deck-focus-nav a:hover { background: rgba(255, 255, 255, 0.08); }
.deck-focus-nav a.is-disabled { opacity: 0.35; pointer-events: none; }
.deck-focus-keys { font-size: 0.8125rem; color: var(--deck-stone-600); }
.deck-focus-panel { display: flex; flex-direction: column; gap: 1rem; min-height: 0; padding: 1.25rem; overflow-y: auto; background: var(--deck-stone-900); border-left: 1px solid rgba(255, 255, 255, 0.08); }
.deck-focus-label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; color: #fff; }
.deck-focus-panel .deck-textarea { background: var(--deck-dark); color: #fff; border-color: rgba(255, 255, 255, 0.16); }
.deck-focus-panel .deck-textarea::placeholder { color: var(--deck-stone-600); }
.deck-focus-panel .deck-comments { margin-top: 0; }
.deck-focus-panel .deck-comment { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.deck-focus-panel .deck-comment.is-done { background: transparent; }
.deck-focus-panel .deck-comment-body { color: #fff; }
.deck-focus-panel .deck-comment.is-done .deck-comment-body { color: var(--deck-stone-600); }
.deck-focus-panel .deck-comment-foot { color: var(--deck-stone-300); }
.deck-focus-panel .deck-comments-empty { margin-top: 0; color: var(--deck-stone-300); }
.deck-focus-copy { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.deck-focus-count { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--deck-stone-300); }
@media (max-width: 900px) {
    .fi-body.deck-focus-body { overflow: auto; }
    .deck-focus { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; min-height: 100vh; }
    .deck-focus-slide { min-height: 45vh; }
    .deck-focus-panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

/* Inline text editing of the preview (edit page): the preview takes the pointer, the navigation waits */
[x-cloak] { display: none !important; }
.deck-row-group { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.deck-chips[inert], .deck-row-group[inert], .deck-focus-nav[inert], .deck-focus-leave[inert], .deck-strip[inert] { opacity: 0.4; }
.deck-preview.is-editing, .deck-preview.is-editing iframe { pointer-events: auto; }
.deck-preview.is-editing iframe { box-shadow: 0 0 0 4px rgba(35, 134, 223, 0.5); }
.deck-focus-nav button { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.875rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: background-color 120ms ease; }
.deck-focus-nav button:hover { background: rgba(255, 255, 255, 0.08); }
.deck-focus-nav button:disabled { opacity: 0.35; cursor: default; background: transparent; }
.deck-focus-nav button.is-primary { background: var(--deck-orange); border-color: var(--deck-orange); color: var(--deck-dark); }
.deck-focus-nav button.is-primary:hover { background: var(--deck-orange-dark); border-color: var(--deck-orange-dark); }

/* Archive: held decks, collapsed by default so the active list stays the page. */
.deck-archive { margin-top: 2rem; border-top: 1px solid var(--deck-stone-200); padding-top: 1rem; }
.deck-archive-summary { cursor: pointer; font-weight: 700; font-size: 0.875rem; color: var(--deck-stone-600); }
.deck-archive-summary::marker { color: var(--deck-stone-300); }
.deck-archive-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.deck-archive-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
                    padding: 0.875rem 1rem; border: 1px solid var(--deck-stone-200); border-radius: 0.5rem; }
.deck-archive-title { font-size: 1rem; font-weight: 700; margin: 0.25rem 0; }
.deck-archive-title a { color: var(--deck-dark); text-decoration: none; }
.deck-archive-title a:hover { text-decoration: underline; }

/* Filmstrip: the slides of a deck as thumbnails, draggable into another order, deletable. Used on the edit
   page below the preview and, in the dark variant, across the bottom of the focus mode. */
.deck-strip { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.deck-strip.is-busy { opacity: 0.55; pointer-events: none; }
.deck-strip-list { display: flex; gap: 0.5rem; align-items: flex-start; list-style: none; margin: 0; padding: 0.25rem 0.125rem 0.5rem;
                   overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.deck-strip-item { position: relative; flex: 0 0 auto; border-radius: 0.75rem; }
.deck-strip-item.is-dragging { opacity: 0.4; }
.deck-strip-item.is-before::before, .deck-strip-item.is-after::before { content: ""; position: absolute; top: 0; bottom: 1.25rem;
                   width: 3px; border-radius: 3px; background: var(--deck-blue); }
.deck-strip-item.is-before::before { left: -0.34rem; }
.deck-strip-item.is-after::before { right: -0.34rem; }
.deck-strip-card { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 0; border: 0; background: none;
                   font: inherit; cursor: pointer; }
.deck-strip-frame { position: relative; display: block; overflow: hidden; border-radius: 0.5rem; border: 1px solid var(--deck-stone-200);
                    background: #fff; }
.deck-strip-frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.deck-strip-card:hover .deck-strip-frame { border-color: var(--deck-stone-300); }
.deck-strip-item.is-current .deck-strip-frame { border-color: var(--deck-orange); box-shadow: 0 0 0 2px var(--deck-orange); }
.deck-strip-card:focus-visible { outline: none; }
.deck-strip-card:focus-visible .deck-strip-frame { border-color: var(--deck-blue); box-shadow: 0 0 0 3px var(--deck-blue-wash); }
.deck-strip-label { display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 700;
                    color: var(--deck-stone-600); }
.deck-strip-item.is-current .deck-strip-label { color: var(--deck-dark); }
.deck-strip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1rem; height: 1rem; padding: 0 0.25rem;
                    border-radius: 9999px; background: var(--deck-blue); color: #fff; font-size: 0.625rem; font-weight: 800; }
.deck-strip-drop { position: absolute; top: -0.375rem; right: -0.375rem; display: none; align-items: center; justify-content: center;
                   width: 1.25rem; height: 1.25rem; border-radius: 9999px; border: 1px solid var(--deck-stone-200); background: #fff;
                   color: var(--deck-red); font: inherit; font-size: 0.875rem; line-height: 1; cursor: pointer; }
.deck-strip-item:hover .deck-strip-drop, .deck-strip-drop:focus-visible { display: flex; }
.deck-strip-drop:hover { background: var(--deck-red); border-color: var(--deck-red); color: #fff; }
/* wider than the thumbnail on purpose: both buttons have to fit next to each other */
.deck-strip-confirm { position: absolute; top: 0; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 5; width: 10rem;
                      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
                      padding: 0.25rem; border-radius: 0.5rem; background: rgba(12, 10, 9, 0.94); color: #fff; text-align: center; }
.deck-strip-confirm p { margin: 0; font-size: 0.6875rem; line-height: 1.3; }
.deck-strip-confirm span { display: flex; gap: 0.25rem; }
.deck-strip-confirm button { padding: 0.15rem 0.5rem; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.16); color: #fff;
                             font: inherit; font-size: 0.6875rem; font-weight: 700; cursor: pointer; }
.deck-strip-confirm button.is-danger { background: var(--deck-red); }
.deck-strip-confirm button:hover { filter: brightness(1.15); }
.deck-strip-hint { margin: 0; font-size: 0.75rem; color: var(--deck-stone-600); }

/* Dark variant for the focus mode */
.deck-strip-dark .deck-strip-frame { border-color: rgba(255, 255, 255, 0.16); background: var(--deck-stone-900); }
.deck-strip-dark .deck-strip-card:hover .deck-strip-frame { border-color: rgba(255, 255, 255, 0.4); }
.deck-strip-dark .deck-strip-label { color: var(--deck-stone-300); }
.deck-strip-dark .deck-strip-item.is-current .deck-strip-label { color: #fff; }
.deck-strip-dark .deck-strip-drop { background: var(--deck-dark); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.deck-strip-dark .deck-strip-hint { color: var(--deck-stone-300); }
.deck-strip-dark .deck-strip-list { scrollbar-color: rgba(255, 255, 255, 0.24) transparent; }
.deck-focus-strip { grid-column: 1 / -1; min-width: 0; padding: 0.5rem 1.5rem 0.25rem; background: var(--deck-stone-900);
                    border-top: 1px solid rgba(255, 255, 255, 0.08); }