:root {
      --color-accent: #4f46e5;
      --color-accent-hover: #4338ca;
      --color-accent-soft: rgba(79, 70, 229, 0.15);
    }

    [data-theme="anthracite"] { --color-accent: #3f3f46; --color-accent-hover: #27272a; --color-accent-soft: rgba(63, 63, 70, 0.15); }
    [data-theme="emerald"] { --color-accent: #059669; --color-accent-hover: #047857; --color-accent-soft: rgba(5, 150, 105, 0.15); }
    [data-theme="indigo"] { --color-accent: #4f46e5; --color-accent-hover: #4338ca; --color-accent-soft: rgba(79, 70, 229, 0.15); }
    [data-theme="amber"] { --color-accent: #d97706; --color-accent-hover: #b45309; --color-accent-soft: rgba(217, 119, 6, 0.15); }
    [data-theme="rose"] { --color-accent: #e11d48; --color-accent-hover: #be123c; --color-accent-soft: rgba(225, 29, 72, 0.15); }

    html {
      overflow-y: scroll;
    }

    .perspective-1000 { perspective: 1000px; }
    .transform-style-3d {
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s ease;
      min-height: 0;
    }
    .backface-hidden { backface-visibility: hidden; }

    .flashcard-item:hover .card-face {
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
      transition: box-shadow 0.25s ease;
    }

    .card-face {
      inset: 0;
      backface-visibility: hidden;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
    }

    .back-face {
      transform: rotateY(180deg);
    }

    .transform-style-3d.is-flipped {
      transform: rotateY(180deg);
    }

    .header-theme-button {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .header-theme-button.is-active {
      box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 0 3px var(--color-accent);
      transform: scale(1.15);
      margin: 0 0.4rem;
    }

    .theme-switch-track {
      display: inline-grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.15rem;
      padding: 0.15rem;
      border-radius: 9999px;
      background-color: rgb(244 244 245);
      border: 1px solid rgb(228 228 231);
      overflow: hidden;
    }

    .dark .theme-switch-track {
      background-color: rgb(39 39 42);
      border-color: rgb(63 63 70);
    }

    .theme-switch-option {
      width: 1.8rem;
      height: 1.8rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      color: rgb(113 113 122);
      transition: all 0.2s ease;
    }

    .theme-switch-option.is-active {
      background: var(--color-accent);
      color: white;
      box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }

    .dark .theme-switch-option {
      color: rgb(161 161 170);
    }

    @media print {
      html, body {
        overflow: visible !important;
        background: #ffffff !important;
        color: #111827 !important;
      }

      body {
        display: block !important;
        min-height: auto !important;
      }

      .no-print,
      header,
      footer,
      main,
      #drag-overlay,
      #cardModal,
      #uploadSection,
      #deckSidebar,
      #deckContentPanel,
      #activeDeckHeader,
      #cardsDisplayGrid,
      .flashcard-item,
      .flashcard-item * {
        display: none !important;
      }

      #printableArea {
        display: block !important;
        width: 100% !important;
      }

      .print-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8mm !important;
        align-items: stretch !important;
      }

      .print-card {
        background: #ffffff !important;
        color: #111827 !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: 86mm !important;
        padding: 6mm !important;
      }

      .print-card .print-question,
      .print-card .print-answer,
      .print-card .print-explanation {
        word-break: break-word !important;
      }

      .print-card .print-question {
        font-size: 12pt !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin-bottom: 4mm !important;
      }

      .print-card .print-answer {
        font-size: 11pt !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        color: #065f46 !important;
        margin-bottom: 3mm !important;
      }

      .print-card .print-explanation {
        font-size: 9pt !important;
        line-height: 1.35 !important;
        color: #334155 !important;
      }

      @page {
        size: A4 portrait;
        margin: 10mm;
      }
    }

:root {
  --ink: #18211f;
  --muted: #6e7773;
  --paper: #f7f7f3;
  --panel: #fffefa;
  --line: rgba(24, 33, 31, .12);
  --shadow: 0 20px 60px rgba(24, 33, 31, .08);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body.app-shell { background: radial-gradient(circle at 80% 0%, rgba(79,70,229,.06), transparent 32rem), var(--paper); color: var(--ink); }
.dark body.app-shell { --ink: #f4f5ef; --muted: #a1aaa5; --paper: #111513; --panel: #181d1b; --line: rgba(255,255,255,.11); background: radial-gradient(circle at 80% 0%, rgba(99,102,241,.16), transparent 32rem), var(--paper); }
button, label, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, label:focus-within, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.app-header { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand-mark { color: var(--ink); font: 700 2rem/1 'Stack Sans Notch', sans-serif; letter-spacing: -.08em; display:flex; align-items:center; gap:.42rem; text-decoration:none; }
.brand-mark-dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--color-accent); box-shadow: .42rem .18rem 0 color-mix(in srgb, var(--color-accent) 32%, transparent); }
.status-pill, .section-kicker, .eyebrow { letter-spacing: .14em; text-transform: uppercase; font-size: .65rem; font-weight: 700; color: var(--muted); }
.accent-picker { display:flex; gap:.35rem; padding:.38rem .45rem; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb, var(--panel) 75%, transparent); }
.header-theme-button { width:.72rem; height:.72rem; border-radius:50%; transition:transform .2s ease, box-shadow .2s ease; }
.header-theme-button.is-active { transform:scale(1.25); box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--color-accent); }
.button-primary, .button-secondary, .button-quiet { min-height:2.7rem; border-radius:.8rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; font-size:.78rem; font-weight:700; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.button-primary { background:var(--color-accent); color:#fff; border:1px solid var(--color-accent); box-shadow:0 8px 18px var(--color-accent-soft); }
.button-secondary { background:var(--panel); color:var(--ink); border:1px solid var(--line); }
.button-quiet { background:transparent; color:var(--muted); border:1px solid transparent; }
.button-primary:hover, .button-secondary:hover, .button-quiet:hover { transform:translateY(-2px); }
.hero-panel { min-height:29rem; display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden; border:1px solid var(--line); border-radius:1.8rem 1.8rem 0 0; background:var(--panel); box-shadow:var(--shadow); }
.hero-copy { padding:clamp(2rem, 6vw, 5.5rem); display:flex; flex-direction:column; justify-content:center; }
.eyebrow { display:flex; align-items:center; gap:.55rem; color:var(--color-accent); margin-bottom:1.3rem; }
.eyebrow-dot { width:.42rem; height:.42rem; border-radius:50%; background:var(--color-accent); }
.hero-title { max-width:35rem; margin:0 0 1.25rem; color:var(--ink); font:600 clamp(2.7rem, 6vw, 5.4rem)/.95 'Stack Sans Notch', sans-serif; letter-spacing:-.075em; }
.hero-title em { color:var(--color-accent); font-style:normal; }
.hero-description { max-width:30rem; margin:0 0 2rem; color:var(--muted); font-size:1rem; line-height:1.65; }
.hero-notes { margin-top:1.5rem; color:var(--muted); font-size:.72rem; display:flex; align-items:center; gap:.55rem; }
.hero-notes span:first-child { color:var(--color-accent); font-size:1rem; }.hero-divider { height:.9rem; width:1px; background:var(--line); }
.hero-art { min-height:29rem; position:relative; overflow:hidden; background:var(--color-accent); background-image:radial-gradient(circle at 20% 18%, rgba(255,255,255,.18), transparent 20rem); }
.hero-card { position:absolute; width:15rem; height:19rem; border-radius:1.25rem; padding:1.35rem; display:flex; flex-direction:column; color:#fff; box-shadow:0 24px 40px rgba(0,0,0,.18); }.hero-card-back { top:17%; left:17%; transform:rotate(-10deg); background:rgba(255,255,255,.19); }.hero-card-front { top:25%; left:31%; transform:rotate(7deg); background:#faf8ee; color:#333; }.hero-card-top { display:flex; justify-content:space-between; color:var(--color-accent); font-size:.65rem; font-weight:800; letter-spacing:.15em; }.hero-card-chip { border:1px solid currentColor; padding:.2rem .4rem; border-radius:99px; }.hero-card strong { margin-top:auto; font:600 2.4rem/.95 'Stack Sans Notch',sans-serif; letter-spacing:-.07em; }.hero-card-back strong { margin-top:auto; }.hero-card-line { width:65%; border-top:1px solid rgba(24, 33, 31, .12); margin-top:1.3rem; }.hero-card-hint { margin-top:.65rem; color:#6e7773; font-size:.65rem; }.hero-spark { position:absolute; right:16%; bottom:16%; color:#fff; font-size:2rem; }
.benefit-row { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-top:0; border-radius:0 0 1.2rem 1.2rem; overflow:hidden; }.benefit-row > div { padding:1.25rem 1.4rem; border-right:1px solid var(--line); }.benefit-row > div:last-child { border:0; }.benefit-index { color:var(--color-accent); font-size:.65rem; font-weight:800; display:block; margin-bottom:.7rem; }.benefit-row strong { display:block; font-size:.8rem; color:var(--ink); }.benefit-row p { color:var(--muted); font-size:.72rem; margin:.35rem 0 0; }
.deck-sidebar, .deck-toolbar, .mobile-deck-bar { border:1px solid var(--line); background:var(--panel); box-shadow:0 12px 30px rgba(24,33,31,.05); }.deck-sidebar { border-radius:1.25rem; padding:1.2rem; height:max-content; }.sidebar-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }.sidebar-heading h2 { color:var(--ink); font-size:1rem; font-weight:700; margin-top:.25rem; }.icon-action { width:2rem; height:2rem; border-radius:.65rem; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); border:1px solid var(--line); background:transparent; }.sidebar-footnote { margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.65rem; }.sidebar-lock { color:var(--color-accent); margin-right:.35rem; }.deck-toolbar { padding:1.3rem 1.5rem; border-radius:1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }.deck-toolbar-title h2 { color:var(--ink); font-size:1.5rem; font-weight:700; letter-spacing:-.04em; }.deck-toolbar-title p { color:var(--muted); font-size:.75rem; margin-top:.3rem; }.deck-toolbar-actions { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }.mobile-deck-bar { border-radius:1rem; padding:1rem; margin-bottom:1rem; align-items:center; justify-content:space-between; gap:1rem; }.mobile-deck-bar strong { display:block; color:var(--ink); margin-top:.25rem; }.mobile-deck-bar select { border:1px solid var(--line); border-radius:.65rem; background:var(--panel); color:var(--ink); padding:.65rem 2rem .65rem .7rem; }
.flashcard-item { min-height:19rem; }.flashcard-item .card-face { border-radius:1.2rem; border-color:var(--line); background:var(--panel); box-shadow:0 12px 28px rgba(24,33,31,.05); }.flashcard-item .back-face { background:color-mix(in srgb, var(--color-accent) 12%, var(--panel)); border-color:color-mix(in srgb, var(--color-accent) 30%, var(--line)); color:var(--ink); }.flashcard-item:hover .card-face { box-shadow:0 18px 35px rgba(24,33,31,.12); }.dark .flashcard-item .card-face { background:var(--panel); }
@media (max-width:1023px) { .mobile-deck-bar { display:flex; } }
@media (max-width:700px) { .hero-panel { grid-template-columns:1fr; }.hero-art { min-height:20rem; }.hero-card { width:11rem; height:14rem; }.hero-card-front { left:32%; }.hero-card strong { font-size:1.8rem; }.benefit-row { grid-template-columns:1fr; }.benefit-row > div { border-right:0; border-bottom:1px solid var(--line); }.deck-toolbar { align-items:flex-start; flex-direction:column; }.deck-toolbar-actions { width:100%; justify-content:flex-start; }.hero-notes { flex-wrap:wrap; }.hero-divider { display:none; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
@media (max-width:1023px) { .mobile-deck-bar.hidden { display: none; } }
.progress-track { height:.55rem; width:100%; max-width:26rem; border-radius:999px; background:var(--line); overflow:hidden; }.progress-value { height:100%; border-radius:inherit; background:var(--color-accent); transition:width .3s ease; }.progress-label { margin-top:.5rem; color:var(--muted); font:700 .65rem ui-monospace, SFMono-Regular, Menlo, monospace; }

.empty-deck-panel { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem; overflow:hidden; padding:1.5rem 1.75rem; border:1px solid var(--line); border-radius:1.25rem; background:linear-gradient(110deg, color-mix(in srgb, var(--color-accent) 9%, var(--panel)), var(--panel) 58%); box-shadow:0 12px 30px rgba(24,33,31,.05); }
.empty-deck-panel::after { content:''; position:absolute; width:15rem; height:15rem; right:-5rem; top:-8rem; border:1px solid color-mix(in srgb, var(--color-accent) 22%, transparent); border-radius:50%; box-shadow:0 0 0 2rem color-mix(in srgb, var(--color-accent) 6%, transparent), 0 0 0 4rem color-mix(in srgb, var(--color-accent) 4%, transparent); pointer-events:none; }
.empty-deck-mark { position:relative; z-index:1; display:grid; place-items:center; width:4.25rem; height:4.25rem; border:1px solid color-mix(in srgb, var(--color-accent) 34%, var(--line)); border-radius:1rem; color:var(--color-accent); background:color-mix(in srgb, var(--panel) 70%, transparent); font:400 2rem/1 'Stack Sans Notch',sans-serif; }
.empty-deck-mark i { position:absolute; width:1.3rem; height:1.3rem; border:1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); border-radius:.3rem; transform:translate(1rem, 1rem) rotate(14deg); opacity:.45; }.empty-deck-mark i:last-child { transform:translate(-1.1rem, -1rem) rotate(-12deg); opacity:.25; }
.empty-deck-copy { position:relative; z-index:1; }.empty-deck-copy h3 { margin:.3rem 0 .35rem; color:var(--ink); font:600 clamp(1.35rem, 2vw, 1.8rem)/1 'Stack Sans Notch',sans-serif; letter-spacing:-.06em; }.empty-deck-copy p { max-width:32rem; margin:0; color:var(--muted); font-size:.78rem; line-height:1.55; }
.empty-deck-panel .button-primary { position:relative; z-index:1; white-space:nowrap; }
.site-footer { margin-top:5rem; padding:3.5rem 0 1.25rem; color:var(--muted); border-top:1px solid var(--line); background:color-mix(in srgb, var(--panel) 45%, transparent); }
.footer-main { display:grid; grid-template-columns:1.15fr .85fr 1fr; gap:3rem; padding-bottom:3rem; }.footer-brand-block .brand-mark { margin-bottom:1rem; }.footer-brand-block p { max-width:16rem; margin:0; font-size:.8rem; line-height:1.6; }.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }.footer-links a, .footer-links button { color:var(--ink); background:none; border:0; padding:0; font-size:.78rem; text-decoration:none; }.footer-links a:hover, .footer-links button:hover { color:var(--color-accent); }.footer-links a span, .footer-links button span { color:var(--color-accent); margin-left:.25rem; }.footer-note { display:flex; align-items:flex-start; gap:.8rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:color-mix(in srgb, var(--paper) 65%, transparent); }.footer-note-mark { color:var(--color-accent); font-size:1.25rem; }.footer-note strong { color:var(--ink); font-size:.78rem; }.footer-note p { margin:.35rem 0 0; font-size:.72rem; line-height:1.5; }.footer-bottom { display:flex; justify-content:space-between; gap:1rem; padding-top:1.1rem; border-top:1px solid var(--line); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; }
@media (max-width:700px) { .empty-deck-panel { grid-template-columns:auto 1fr; }.empty-deck-panel .button-primary { grid-column:1 / -1; justify-self:start; }.footer-main { grid-template-columns:1fr; gap:2rem; padding-bottom:2rem; }.footer-bottom { flex-wrap:wrap; }.footer-bottom span:nth-child(2) { order:3; width:100%; } }

.library-summary { display:flex; align-items:center; gap:.65rem; margin:-.25rem 0 1rem; padding:.7rem .75rem; border:1px solid var(--line); border-radius:.8rem; color:var(--muted); font-size:.68rem; line-height:1.4; background:color-mix(in srgb, var(--color-accent) 5%, var(--panel)); }.library-summary-mark { color:var(--color-accent); font-size:1.05rem; }.library-summary strong { color:var(--ink); font-weight:700; }
.deck-sidebar #deckList { display:grid; gap:.45rem; }.deck-sidebar #deckList > div { min-width:0; padding:.75rem .65rem; border:1px solid transparent; border-radius:.85rem; background:transparent; }.deck-sidebar #deckList > div:hover { border-color:var(--line); background:color-mix(in srgb, var(--panel) 70%, var(--paper)); }.deck-sidebar #deckList > div.bg-accent-soft { border-color:color-mix(in srgb, var(--color-accent) 28%, var(--line)); background:var(--color-accent-soft); }.deck-item-main { min-width:0; display:flex; align-items:center; gap:.65rem; }.deck-item-marker { flex:0 0 auto; width:.38rem; height:1.9rem; border-radius:99px; background:var(--line); }.bg-accent-soft .deck-item-marker { background:var(--color-accent); }.deck-item-title { color:var(--ink); font-size:.75rem; font-weight:700; }.deck-item-count { margin-top:.25rem; color:var(--muted); font-size:.62rem; }.deck-item-delete { flex:0 0 auto; width:1.65rem; height:1.65rem; display:grid; place-items:center; border:0; border-radius:.5rem; background:transparent; color:var(--muted); font-size:1rem; opacity:.45; }.deck-item-delete:hover { background:color-mix(in srgb, #e11d48 10%, transparent); color:#e11d48; opacity:1; }
.deck-toolbar { padding:1.5rem 1.6rem; }.deck-toolbar-title h2 { font-size:1.7rem; }.deck-toolbar-meta { display:flex; align-items:center; gap:.55rem; margin-top:.45rem; color:var(--muted); font-size:.67rem; }.meta-divider { width:.22rem; height:.22rem; border-radius:50%; background:var(--color-accent); }
.populated-empty-state { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.25rem; padding:1.5rem; border:1px solid var(--line); border-radius:1.25rem; background:linear-gradient(110deg, color-mix(in srgb, var(--color-accent) 8%, var(--panel)), var(--panel) 65%); }.empty-state-mark { display:grid; place-items:center; width:3.25rem; height:3.25rem; border:1px solid color-mix(in srgb, var(--color-accent) 35%, var(--line)); border-radius:.9rem; color:var(--color-accent); font:400 1.7rem/1 var(--font-display, 'Stack Sans Notch', sans-serif); }.populated-empty-state h3 { margin:.3rem 0 .35rem; color:var(--ink); font:600 1.3rem/1.05 'Stack Sans Notch',sans-serif; letter-spacing:-.05em; }.populated-empty-state p { margin:0; color:var(--muted); font-size:.75rem; line-height:1.5; }
.flashcard-item { min-height:20rem; }.study-card-face { display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); background:var(--panel); box-shadow:0 12px 28px rgba(24,33,31,.05); }.study-card-content { min-width:0; }.study-card-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:2.3rem; }.card-index { color:var(--color-accent); font:700 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.08em; }.card-actions { display:flex; gap:.15rem; }.card-action { padding:.35rem .45rem; border:0; border-radius:.45rem; background:transparent; color:var(--muted); font-size:.65rem; font-weight:700; }.card-action:hover { background:color-mix(in srgb, var(--color-accent) 8%, transparent); color:var(--ink); }.card-action-danger:hover { color:#e11d48; background:color-mix(in srgb, #e11d48 8%, transparent); }.card-label { display:block; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.study-question { margin:.65rem 0 0; color:var(--ink); font:600 clamp(1.1rem, 2vw, 1.35rem)/1.18 var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif); letter-spacing:-.045em; }.study-options { display:grid; gap:.45rem; margin:1.35rem 0 0; padding:0; list-style:none; }.study-options li { display:flex; align-items:flex-start; gap:.55rem; padding:.55rem .65rem; border:1px solid var(--line); border-radius:.65rem; color:var(--muted); font-size:.68rem; line-height:1.4; }.study-options li span { flex:0 0 auto; color:var(--color-accent); font-weight:800; }.flip-hint { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.85rem; border-top:1px solid var(--line); color:var(--muted); font-size:.65rem; font-weight:700; }.flip-arrow { display:grid; place-items:center; width:1.55rem; height:1.55rem; border:1px solid var(--line); border-radius:50%; color:var(--color-accent); }.answer-face { border-color:color-mix(in srgb, var(--color-accent) 30%, var(--line)); background:color-mix(in srgb, var(--color-accent) 11%, var(--panel)); }.study-answer { margin:.7rem 0 0; color:var(--ink); font:700 1.05rem/1.3 'Stack Sans Notch',sans-serif; letter-spacing:-.025em; }.study-explanation { margin:1rem 0 0; color:var(--muted); font-size:.78rem; line-height:1.65; }.answer-hint { border-color:color-mix(in srgb, var(--color-accent) 22%, var(--line)); color:var(--muted); }.flashcard-item:hover .study-card-face { box-shadow:0 18px 35px rgba(24,33,31,.12); }
@media (max-width:700px) { .populated-empty-state { grid-template-columns:auto 1fr; }.populated-empty-state .button-primary { grid-column:1 / -1; justify-self:start; }.study-card-header { margin-bottom:1.8rem; }.deck-toolbar-title h2 { font-size:1.45rem; } }

.mobile-deck-bar { display:none; width:100%; }
.deck-sidebar { display:none; }
@media (max-width:1023px) { .mobile-deck-bar:not(.hidden) { display:flex; } }
@media (min-width:1024px) { .deck-sidebar:not(.hidden) { display:block; } }