style.css

@font-face{
  font-family:'DIN Round Pro';
  font-weight:400;
  font-style:normal;
  src:local('DIN Round Pro'), local('DINRoundPro'), local('DIN Round Pro Regular');
  font-display:swap;
}
@font-face{
  font-family:'DIN Round Pro';
  font-weight:500;
  font-style:normal;
  src:local('DIN Round Pro Medium'), local('DINRoundPro-Medium');
  font-display:swap;
}
@font-face{
  font-family:'DIN Round Pro';
  font-weight:700;
  font-style:normal;
  src:local('DIN Round Pro Bold'), local('DINRoundPro-Bold');
  font-display:swap;
}
@font-face{
  font-family:'DIN Round Pro';
  font-weight:900;
  font-style:normal;
  src:local('DIN Round Pro Black'), local('DINRoundPro-Black');
  font-display:swap;
}
@font-face{
  font-family:'DIN Round Pro Black';
  font-weight:900;
  font-style:normal;
  src:local('DIN Round Pro Black'), local('DINRoundPro-Black');
  font-display:swap;
}

:root{

    --ink:#052235;
    --ink-soft:#07304c;
    --ink-line:#0b466d;
    --parchment:#FBFAF6;
    --parchment-deep:#F3F1E8;
    --rule:#b3dcf7;
    --charcoal:#0b2a4a;
    --slate:#1483cd;
    --crimson:#1479d4;
    --crimson-bright:#1cb0f6;
    --crimson-deep:#0a4a6b;
    --brass:#1482cc;
    --forest:#58cc02;
    --shadow:rgba(8,20,36,0.4);
    --score-red:#ff4b4b;
    --score-orange:#ffc800;
    --score-yellow:#ffc800;
    --score-green:#58cc02;
    --score-cyan:#1cb0f6;
    --crimson-bright-dark:#0f6187;
    --brass-dark:#0b4870;
    --forest-dark:#307001;
    --score-red-dark:#8c2929;
    --score-orange-dark:#8c6e00;
    --score-yellow-dark:#8c6e00;
    --score-green-dark:#307001;
    --score-cyan-dark:#0f6187;
    --font-display:'DIN Round Pro','Baloo 2','Quicksand','Comfortaa',ui-rounded,-apple-system,'Segoe UI',sans-serif;
    --font-body:'DIN Round Pro','Quicksand','Baloo 2',ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-black:'DIN Round Pro Black','DIN Round Pro','Baloo 2','Quicksand',ui-rounded,-apple-system,'Segoe UI',sans-serif;
    --font-mono:'DIN Round Pro','Quicksand','Baloo 2',ui-rounded,-apple-system,'Segoe UI',sans-serif;

    --chrome-text:#eaf6fe;
    --chrome-text-dim:#9fd2f7;

    --header-bg:var(--charcoal);
    --header-text:#ffffff;
    --header-text-dim:#72bef1;
    --header-border:#0c507e;

    --on-accent:#f1f5f7;
    --watermark:rgba(255,255,255,0.09);
    --watermark-hover:rgba(255,255,255,0.55);

    --color-green:        #58CC02;
    --color-green-shadow:  #3E8500;
    --color-green-hover:   #4FBB02;
    --color-green-pale:    #EAF9E3;
    --color-green-pale-2:  #D1F0C2;

    --color-blue:          #1479D4;
    --color-blue-shadow:   #073349;
    --color-blue-hover:    #126FC3;
    --color-blue-field:    #2F9AE6;
    --color-blue-accent:   #1CB0F6;
    --color-blue-pale:     #EAF6FE;
    --color-blue-pale-2:   #D2EDFC;

    --color-gold:          #FFC800;
    --color-gold-shadow:   #A67200;
    --color-gold-hover:    #EBB800;
    --color-gold-pale:     #FFF6DD;
    --color-gold-pale-2:   #FFECB3;
    --color-gold-ink:      #9E6D12;

    --color-red:           #FF4B4B;
    --color-red-shadow:    #B82121;
    --color-red-hover:     #F13A3A;
    --color-red-pale:      #FFE8E8;
    --color-red-pale-2:    #FFCFCF;

    --color-navy:          #0B2A4A;
    --color-navy-shadow:   #071E37;
    --color-navy-light:    #17395C;
    --color-navy-light-2:  #2C567F;

    --color-success-wash:  #DAFEB9;

    --radius-pill:   999px;
    --radius-lg:     20px;
    --radius-md:     16px;
    --radius-sm:     12px;
    --radius-xs:     6px;

    --shadow-offset-lg: 7px;
    --shadow-offset-md: 5px;
    --shadow-offset-sm: 3px;

    --ease-hover:    150ms ease-out;
    --ease-gleam:    550ms ease-out;
    --ease-dropdown-open:  180ms cubic-bezier(0.2, 0.8, 0.4, 1);
    --ease-dropdown-close: 120ms cubic-bezier(0.2, 0.8, 0.4, 1);
    --ease-handoff:  220ms ease-out;
    --ease-progress: 400ms ease-out;
  }
  :root[data-theme="light"]{
    --ink:#eaf1f7;
    --ink-soft:#ffffff;
    --ink-line:#cddcea;
    --rule:#cddcea;
    --slate:#1378bb;
    --shadow:rgba(45,60,85,0.14);
    --chrome-text:#072c44;
    --chrome-text-dim:#1378bb;
    --watermark:rgba(11,42,74,0.55);
    --watermark-hover:rgba(11,42,74,0.85);
    --header-bg:#ffffff;
    --header-text:#0b2a4a;
    --header-text-dim:#1483cd;
    --header-border:#dbe6ee;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    color:var(--chrome-text);
    font-family:var(--font-body);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    transition:background-color 0.3s ease, color 0.3s ease;
  }
  .stage, .playback-stage, .brand .mark, .brand .sub{
    transition:background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  button{font-family:inherit;}
  button:focus-visible, input:focus-visible, summary:focus-visible{
    outline:2px solid var(--brass);
    outline-offset:2px;
  }

  header.topbar{
    padding:16px 24px;
    background:var(--header-bg);
    opacity:1;
    border-bottom:1px solid var(--header-border);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:24px;
    max-width:none;
    margin:0;
    position:relative;
    z-index:2;
    transition:background .25s ease, border-color .25s ease;
  }
  header.topbar{padding-left:calc((100% - 880px)/2 + 24px);padding-right:calc((100% - 880px)/2 + 24px);}
  @media(max-width:928px){ header.topbar{padding-left:24px;padding-right:24px;} }
  .brand{display:flex;flex-direction:row;align-items:center;gap:14px;flex-wrap:nowrap;flex-shrink:0;}
  .brand .mark{
    font-family:Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua',serif;font-size:34px;letter-spacing:0.5px;color:var(--header-text);
    display:flex;align-items:center;line-height:1;
  }
  .mark-e-wrap{
    position:relative;top:0.12em;display:inline-flex;align-items:center;justify-content:center;
    width:1.9em;height:1.75em;margin-right:2px;flex-shrink:0;
    color:#2f79c9;
  }
  .mark-e-wrap svg{width:100%;height:100%;display:block;}
  .brand .sub{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--header-text-dim);margin-top:4px;}
  .session-tag{
    font-family:var(--font-mono);font-size:12px;line-height:1;letter-spacing:0.6px;
    display:inline-flex;align-items:center;height:36px;box-sizing:border-box;
    background:#116daa;border-radius:12px;padding:0 10px;
  }
  .session-tag .rt-num{color:#ffffff;font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:0.3px;}

  main{max-width:880px;margin:0 auto;padding:28px 24px 60px;position:relative;z-index:1;}

  .side-words{
    position:fixed;top:0;height:100vh;
    width:calc((100vw - 928px)/2);
    overflow:hidden;pointer-events:none;z-index:0;

    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
  }
  .side-words.left{left:0;}
  .side-words.right{right:0;}
  .side-words-inner{position:absolute;top:-80vh;left:0;width:100%;height:800vh;will-change:transform;}
  .side-word{
    position:absolute;left:50%;
    font-family:'IBM Plex Mono','SF Mono','Courier New',monospace;font-size:13px;line-height:1.5;letter-spacing:4px;text-transform:uppercase;
    color:var(--watermark);white-space:nowrap;font-weight:500;
    transform:translateX(-50%);
    transition:opacity 0.6s ease, color 0.35s ease;
  }

  .side-words-glow{
    position:fixed;top:0;height:100vh;
    width:calc((100vw - 928px)/2);
    overflow:hidden;pointer-events:none;z-index:0;
    -webkit-mask-image:radial-gradient(circle 220px at var(--gx,-9999px) var(--gy,-9999px), black 0%, transparent 100%);
    mask-image:radial-gradient(circle 220px at var(--gx,-9999px) var(--gy,-9999px), black 0%, transparent 100%);
  }
  .side-words-glow.left{left:0;}
  .side-words-glow.right{right:0;}
  .side-words-glow .side-word{color:var(--watermark-hover);transition:none;}
  @media(max-width:1180px){ .side-words-glow{display:none;} }

  @keyframes driftWobble{
    from { transform: translateX(-50%) translateX(-32px); }
    to   { transform: translateX(-50%) translateX(32px); }
  }
  @media(max-width:1180px){ .side-words{display:none;} }

  .ballot{
    background:var(--parchment);
    color:var(--charcoal);
    border-radius:10px;
    position:relative;
    overflow:hidden;
  }
  .ballot::before{
    content:"";position:absolute;top:0;right:0;
    width:0;height:0;border-style:solid;border-width:0 26px 26px 0;
    border-color:transparent var(--parchment-deep) transparent transparent;
    box-shadow:-1px 1px 3px rgba(0,0,0,0.15);
  }

  .rubric-toggle-btn{
    position:absolute;top:14px;right:34px;z-index:3;
    background:none;border:none;cursor:pointer;
    color:var(--slate);padding:4px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;box-sizing:border-box;
    transition:color .15s;
  }
  .rubric-toggle-btn:hover, .rubric-toggle-btn.active{color:var(--crimson);}
  body.previewing-example .rubric-toggle-btn{display:none;}

  .cancel-ballot-btn{
    position:absolute;top:14px;right:34px;z-index:5;
    background:none;border:none;cursor:pointer;
    color:var(--slate);padding:6px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;box-sizing:border-box;
    transition:color .15s,background .15s;
  }
  .cancel-ballot-btn:hover{color:var(--crimson);background:rgba(0,0,0,0.05);}
  .cancel-ballot-btn.hidden{display:none;}

  .rubric-panel{width:min(640px, calc(100vw - 24px));}

  .ai-compare-toggle-btn{
    position:absolute;top:14px;right:70px;z-index:3;
    background:none;border:none;cursor:pointer;
    color:var(--slate);padding:4px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;box-sizing:border-box;
    transition:color .15s;
  }
  .ai-compare-toggle-btn:hover, .ai-compare-toggle-btn.active{color:var(--crimson);}
  body.previewing-example .ai-compare-toggle-btn{display:none;}

  .ai-compare-table{
    display:flex;flex-direction:column;font-family:var(--font-body);gap:8px;
    max-width:900px;margin:0 auto;
  }
  .ai-compare-row.ai-compare-row-head{
    display:grid;grid-template-columns:30px 168px 1fr 1fr;align-items:center;gap:14px;
    font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:1.1px;color:var(--slate);padding:0 16px 8px 18px;
    background:none;border:none;border-bottom:1px dashed var(--rule);border-radius:0;
    box-shadow:none;margin-bottom:4px;
  }
  .ai-compare-row.ai-compare-row-head:hover{transform:none;box-shadow:none;}
  .ai-compare-row.ai-compare-row-head .ai-compare-rank{text-align:left;}
  .ai-compare-row.ai-compare-row-head .ai-compare-model{padding-left:8px;}
  .ai-compare-row.ai-compare-row-head .ai-compare-metric{font-weight:700;}

  .ai-compare-row{
    position:relative;
    display:grid;grid-template-columns:30px 168px 1fr 1fr;
    align-items:center;gap:14px;padding:12px 16px 12px 14px;
    background:var(--parchment);
    border:1px solid var(--rule);border-left:6px solid var(--acc);border-radius:14px;
    box-shadow:0 1px 3px rgba(10,20,35,0.06);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    --acc:var(--crimson-bright);
  }
  .ai-compare-row[data-provider="anthropic"]{--acc:#d2970d;}
  .ai-compare-row[data-provider="deepseek"]{--acc:#269cea;}
  .ai-compare-row[data-provider="moonshot"]{--acc:#3ba5ec;}
  .ai-compare-row[data-provider="openai"]{--acc:#419605;}
  .ai-compare-row[data-provider="xai"]{--acc:#111827;}
  .ai-compare-row[data-provider="meta"]{--acc:#ed1515;}
  .ai-compare-row[data-provider="google"]{--acc:#e3a40f;}
  .ai-compare-row[data-provider="zhipu"]{--acc:#116ca9;}
  .ai-compare-row:hover{
    transform:translateY(-1px);
    box-shadow:0 5px 14px rgba(10,20,35,0.1);
    border-color:var(--acc);
  }

  .ai-compare-rank{
    font-family:var(--font-mono);font-size:14px;color:var(--charcoal);font-weight:700;text-align:center;
    justify-self:center;
  }
  .ai-compare-model{font-size:13.5px;color:var(--charcoal);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .ai-compare-row.available .ai-compare-model{font-weight:700;}

  .ai-compare-model .ai-model-logo{
    width:18px;height:18px;object-fit:contain;border-radius:12px;
  }
  .ai-compare-model .ai-model-logo[src*="kimi"]{border-radius:0;}
  .ai-compare-model .ai-model-logo[src*="openai"]{border-radius:12px;}
  .ai-compare-metric{display:flex;align-items:center;gap:8px;}

  .ai-bar-num{font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--charcoal);min-width:24px;text-align:right;}
  .ai-bar-track{
    flex:1;height:10px;min-width:70px;border-radius:10px;background:var(--rule);
    border:none;overflow:hidden;
  }
  .ai-bar-fill{
    display:block;height:100%;border-radius:10px;min-width:2px;
    transition:width .4s cubic-bezier(0.2,0.8,0.3,1);
  }
  @media(max-width:600px){
    .ai-compare-row.ai-compare-row-head{grid-template-columns:22px 110px 1fr 1fr;gap:8px;padding:0 8px 8px 12px;}
    .ai-compare-row{grid-template-columns:22px 110px 1fr 1fr;gap:8px;font-size:12px;padding:10px 10px 10px 12px;}
    .ai-compare-metric{gap:5px;}
  }

  .ai-compare-row.has-example{cursor:pointer;}
  .ai-compare-row.has-example.example-open{border-color:var(--acc);box-shadow:0 5px 14px rgba(10,20,35,0.14);}

  .ai-compare-example{
    margin:-2px 0 8px 0;padding:16px 18px;background:#fff;
    border:1px solid var(--rule);border-radius:14px;box-shadow:0 1px 3px rgba(10,20,35,0.06);
  }
  .ai-compare-example-head{
    display:flex;justify-content:flex-end;
  }
  .ai-compare-example-close{
    background:none;border:none;font-size:20px;line-height:0.8;color:var(--slate);cursor:pointer;padding:0 2px;flex:0 0 auto;
  }
  .ai-compare-example-close:hover{color:var(--charcoal);}
  .ai-compare-example-body{
    max-height:600px;overflow-y:auto;
  }

  .rubric-mode-bar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--rule);
  }
  .rubric-mode-label{
    font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.6px;font-weight:700;
    border-radius:10px;padding:4px 10px;color:#fff;display:inline-block;
  }
  .rubric-mode-label.is-regular{background:#116daa;}
  .rubric-mode-label.is-intro{background:#bf0e0e;}
  .rubric-mode-label.is-body{background:#a7780b;}
  .rubric-mode-label.is-roughdraft{background:#49a705;}
  .rubric-mode-select{
    font-family:var(--font-mono);font-size:11.5px;padding:6px 9px;border:1px solid var(--rule);
    border-radius:12px;background:#ffffff;color:var(--charcoal);cursor:pointer;
  }

  .mode-switch-row{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin-bottom:26px;
  }
  .mode-switch{
    display:inline-flex;gap:4px;padding:4px 4px 8px;background:var(--parchment-deep);
    border:1px solid rgba(22,40,60,0.22);border-radius:999px;margin-bottom:6px;
    box-shadow:inset 0 1px 3px rgba(22,40,60,0.14);
  }
  .start-timer-btn{
    font-family:var(--font-body);font-size:12.5px;font-weight:700;
    width:38px;height:38px;padding:0;border-radius:14px;border:1px solid transparent;cursor:pointer;
    color:#fff;margin-bottom:6px;transition:background .15s, border-color .15s, transform .1s;
    white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  }

  .model-picker{
    position:relative;margin-left:auto;margin-bottom:6px;flex-shrink:0;
  }
  .model-picker-btn{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-body);font-size:12.5px;font-weight:500;
    padding:8px 12px;border-radius:10px;border:1px solid rgba(22,40,60,0.22);
    background:var(--parchment-deep);color:var(--charcoal);cursor:pointer;
    box-shadow:inset 0 1px 3px rgba(22,40,60,0.10), 0 var(--shadow-offset-sm) 0 rgba(11,42,74,0.28);
    transition:background .15s, border-color .15s, box-shadow .15s, transform 100ms ease-out;white-space:nowrap;
  }
  .model-picker-btn:hover{background:#fff;border-color:rgba(22,40,60,0.32);}
  .model-picker-btn:active{box-shadow:inset 0 1px 3px rgba(22,40,60,0.10);transform:translateY(var(--shadow-offset-sm));}
  .model-picker.open .model-picker-btn{background:#fff;border-color:var(--brass);}
  .model-picker-label{max-width:150px;overflow:hidden;text-overflow:ellipsis;}
  .model-picker-chevron{flex-shrink:0;opacity:0.6;transition:transform .15s;}
  .model-picker.open .model-picker-chevron{transform:rotate(180deg);}
  .model-picker-menu{
    position:absolute;top:calc(100% + 8px);right:0;z-index:60;
    width:280px;max-width:min(280px, calc(100vw - 48px));
    background:var(--parchment);border:1px solid var(--rule);border-radius:16px;
    padding:6px;display:flex;flex-direction:column;gap:6px;
  }
  .model-picker-menu.hidden{display:none;}
  .tier-switch{
    display:flex;width:100%;box-sizing:border-box;margin-bottom:2px;
    padding:4px 4px 7px;
  }
  .tier-switch .tier-switch-btn{
    flex:1;text-align:center;padding:7px 0;font-size:11.5px;font-weight:700;
  }
  #tierSwitch .tier-switch-btn.tier-free:hover{color:#1c7a2e;background:rgba(28,122,46,0.10);}
  #tierSwitch .tier-switch-btn.tier-advanced:hover{color:#a35a06;background:rgba(163,90,6,0.10);}
  #tierSwitch .tier-switch-btn.tier-frontier:hover{color:#bf0e0e;background:rgba(191,14,14,0.08);}
  #tierSwitch .tier-switch-btn.tier-free.active{background:#1c9c3c;color:#fff;border-color:#157a2e;box-shadow:0 var(--shadow-offset-sm) 0 #157a2e;}
  #tierSwitch .tier-switch-btn.tier-advanced.active{background:#d97b0d;color:#fff;border-color:#a35a06;box-shadow:0 var(--shadow-offset-sm) 0 #a35a06;}
  #tierSwitch .tier-switch-btn.tier-frontier.active{background:#c81e1e;color:#fff;border-color:#8b0b0b;box-shadow:0 var(--shadow-offset-sm) 0 #8b0b0b;}
  .model-picker-option{
    display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    text-align:left;padding:8px 10px;border-radius:14px;border:none;
    background:none;cursor:pointer;color:var(--charcoal);transition:background .12s;
  }
  .model-picker-option:hover{background:var(--parchment-deep);}
  .model-picker-option.active{background:rgba(29,92,158,0.10);}
  .model-picker-option-inner{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
  .model-picker-option-logo{
    flex-shrink:0;width:32px;height:32px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--rule);overflow:hidden;
  }
  .model-picker-option-logo img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box;}
  .model-picker-option-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
  .model-picker-option-name-row{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:nowrap;}
  .model-picker-option-name{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .model-star-rating{display:inline-flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0;}
  .star-icon{width:13px;height:13px;fill:none;stroke:rgba(22,40,60,0.28);stroke-width:1.6;flex-shrink:0;}
  .star-icon.filled{fill:#d9a417;stroke:#a97b0c;}
  .model-picker-option-badge{
    font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;
    color:var(--slate);text-align:center;
  }
  .model-picker-option-sub{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.8px;color:var(--charcoal);}
  .model-picker-check{flex-shrink:0;color:var(--crimson);visibility:hidden;}
  .model-picker-option.active .model-picker-check{visibility:visible;}
  @media(max-width:600px){
    .model-picker{order:1;margin-left:0;}
    .model-picker-label{max-width:110px;}
    .start-timer-btn{order:2;margin-left:auto;}
    .mode-switch-row{flex-wrap:wrap;}
  }
  .start-timer-btn svg{ width:19px;height:19px;stroke:#fff;fill:none; }
  .start-timer-btn:active{ box-shadow:none !important;transform:translateY(var(--shadow-offset-sm)); }
  .start-timer-btn.mode-regular{ background:#116daa;border-color:#0b446a;box-shadow:0 var(--shadow-offset-sm) 0 #0b446a; }
  .start-timer-btn.mode-regular:hover{ background:#0e5788; }
  .start-timer-btn.mode-introdrill{ background:#bf0e0e;border-color:#8b0b0b;box-shadow:0 var(--shadow-offset-sm) 0 #8b0b0b; }
  .start-timer-btn.mode-introdrill:hover{ background:#9b0c0c; }
  .start-timer-btn.mode-bodydrill{ background:#a7780b;border-color:#7a5808;box-shadow:0 var(--shadow-offset-sm) 0 #7a5808; }
  .start-timer-btn.mode-bodydrill:hover{ background:#8a6309; }
  .start-timer-btn.mode-roughdraft{ background:#49a705;border-color:#337404;box-shadow:0 var(--shadow-offset-sm) 0 #337404; }
  .start-timer-btn.mode-roughdraft:hover{ background:#3b8804; }
  .mode-switch-btn{
    font-family:var(--font-body);font-size:12.5px;font-weight:500;
    padding:8px 15px;border-radius:999px;border:1px solid transparent;background:none;color:var(--charcoal);
    cursor:pointer;transition:background .15s, color .15s, border-color .15s;white-space:nowrap;
  }
  #modeRegularBtn:hover{color:#116daa;background:rgba(29,92,158,0.08);}
  #modeIntroDrillBtn:hover{color:#bf0e0e;background:rgba(163,50,42,0.08);}
  #modeBodyDrillBtn:hover{color:#a7780b;background:rgba(166,121,12,0.08);}
  #modeRoughDraftBtn:hover{color:#49a705;background:rgba(47,125,60,0.08);}
  #modeRegularBtn.active{background:#116daa;color:#fff;border-color:#0b446a;box-shadow:0 var(--shadow-offset-sm) 0 #0b446a;}
  #modeIntroDrillBtn.active{background:#bf0e0e;color:#fff;border-color:#8b0b0b;box-shadow:0 var(--shadow-offset-sm) 0 #8b0b0b;}
  #modeBodyDrillBtn.active{background:#a7780b;color:#fff;border-color:#7a5808;box-shadow:0 var(--shadow-offset-sm) 0 #7a5808;}
  #modeRoughDraftBtn.active{background:#49a705;color:#fff;border-color:#337404;box-shadow:0 var(--shadow-offset-sm) 0 #337404;}
  .mode-switch-btn.active:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}
  .mode-switch-btn[data-rtab="feedback"]:hover{color:#116daa;background:rgba(29,92,158,0.08);}
  .mode-switch-btn[data-rtab="factcheck"]:hover{color:#bf0e0e;background:rgba(163,50,42,0.08);}
  .mode-switch-btn[data-rtab="delivery"]:hover{color:#a7780b;background:rgba(166,121,12,0.08);}
  .mode-switch-btn[data-rtab="transcript"]:hover{color:#49a705;background:rgba(47,125,60,0.08);}
  .mode-switch-btn[data-rtab="feedback"].active{background:#116daa;color:#fff;border-color:#0b446a;box-shadow:0 var(--shadow-offset-sm) 0 #0b446a;}
  .mode-switch-btn[data-rtab="factcheck"].active{background:#bf0e0e;color:#fff;border-color:#8b0b0b;box-shadow:0 var(--shadow-offset-sm) 0 #8b0b0b;}
  .mode-switch-btn[data-rtab="delivery"].active{background:#a7780b;color:#fff;border-color:#7a5808;box-shadow:0 var(--shadow-offset-sm) 0 #7a5808;}
  .mode-switch-btn[data-rtab="transcript"].active{background:#49a705;color:#fff;border-color:#337404;box-shadow:0 var(--shadow-offset-sm) 0 #337404;}
  .mode-switch-hint{
    font-family:var(--font-body);font-size:11px;font-weight:500;line-height:1.4;
    color:#ffffff;background:var(--crimson);border:1px solid var(--crimson-deep);
    border-radius:10px;padding:5px 10px;width:460px;margin-right:8px;margin-left:auto;
    box-sizing:border-box;flex:0 0 auto;min-width:0;
  }
  .mode-switch-hint.is-intro{background:#bf0e0e;border-color:#8b0b0b;}
  .mode-switch-hint.is-body{background:#a7780b;border-color:#7a5808;}
  .mode-switch-hint.is-roughdraft{background:#49a705;border-color:#337404;}

  .ballot-head-top{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:8px;width:100%;box-sizing:border-box;padding-right:76px;
  }
  .ballot-head-left{margin:0;flex:0 0 auto;display:flex;flex-direction:column;gap:4px;}
  .ballot-head-left .ballot-title{white-space:nowrap;}

  .ballot-mode-label{
    font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;
    padding:4px 10px;border-radius:10px;color:#fff;display:inline-block;
    justify-self:start;width:fit-content;
  }
  .ballot-mode-label.is-regular{background:#116daa;}
  .ballot-mode-label.is-intro{background:#bf0e0e;}
  .ballot-mode-label.is-body{background:#a7780b;}
  .ballot-mode-label.is-roughdraft{background:#49a705;}

  .rubric-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed;}
  .rubric-table th, .rubric-table td{
    border:1px solid var(--charcoal);padding:8px 10px;text-align:left;vertical-align:top;
  }
  .rubric-table thead th{
    background:var(--charcoal);color:var(--on-accent);
    font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  }
  .rubric-table th:nth-child(1), .rubric-table td:nth-child(1){width:26%;}
  .rubric-table th:nth-child(2), .rubric-table td:nth-child(2){width:9%;text-align:center;}
  .rubric-table th:nth-child(3), .rubric-table td:nth-child(3){width:65%;}
  .rubric-table td:nth-child(2){font-family:var(--font-mono);font-weight:bold;}
  .rubric-table td{line-height:1.5;color:#000000;}
  .rubric-table tbody tr:nth-child(even){background:rgba(0,0,0,0.025);}
  .rubric-table tfoot td{
    font-family:var(--font-mono);font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;
    background:var(--parchment-deep);
  }
  .ballot-head{
    padding:16px 28px 12px;
    border-bottom:2px solid var(--charcoal);
    display:block;
  }
  .ballot-head .field{font-family:var(--font-mono);font-size:12px;}
  .ballot-head .field b{text-transform:uppercase;letter-spacing:1px;color:var(--slate);font-weight:500;margin-right:6px;}
  .ballot-title{grid-column:1/-1;font-family:var(--font-display);font-size:22px;font-weight:700;margin:0;}

  .page-heading{font-family:var(--font-display);font-size:22px;font-weight:700;margin:0 0 16px;color:inherit;}
  .ballot-body{padding:24px 28px 28px;}

  .flight{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;}
  .flight .chip{
    font-family:var(--font-mono);font-size:11px;border:1px solid var(--rule);
    border-radius:20px;padding:4px 10px;color:var(--slate);background:rgba(255,255,255,0.4);
  }
  .flight .chip b{color:var(--charcoal);}

  #authGate{
    position:fixed;inset:0;z-index:900;
    background:linear-gradient(135deg, var(--ink) 0%, var(--ink) 45%, var(--ink-soft) 100%);
    background-size:220% 220%;
    animation:bgDrift 22s ease-in-out infinite;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
  }
  @keyframes bgDrift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
  }
  #authGate.hidden{display:none;}

  body.previewing-example header.topbar{ display:none !important; }
  body.previewing-example main{ position:relative; z-index:950; max-width:none; margin:0; padding:0; min-height:100vh; }
  body.previewing-example .ballot{ border-radius:0; min-height:100vh; }
  body.previewing-example .ballot::before{ display:none; }
  body.previewing-example .ballot-body{ padding-top:64px; }

  #previewExitBtn{
    display:none;position:fixed;top:18px;right:18px;z-index:1000;
    width:38px;height:38px;border-radius:50%;border:3px solid var(--crimson-deep);cursor:pointer;
    background:#1276b9;color:#fff;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.35);transition:transform 0.2s ease, background 0.2s ease;
  }
  #previewExitBtn:hover{background:#0e5e93;transform:scale(1.06);}
  #previewExitBtn svg{width:18px;height:18px;}
  body.previewing-example #previewExitBtn{ display:flex; }

  #wrVideoModal{
    position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px;
  }
  #wrVideoModal.show{display:flex;}
  #wrVideoModal .wr-video-backdrop{position:absolute;inset:0;background:rgba(6,10,16,0.86);}
  #wrVideoModal .wr-video-frame{
    position:relative;width:100%;max-width:860px;background:#000;border-radius:14px;overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,0.6);animation:wrVideoIn 0.3s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes wrVideoIn{ from{opacity:0;transform:scale(0.96);} to{opacity:1;transform:scale(1);} }
  #wrVideoModal .wr-video-embed{position:relative;width:100%;padding-top:56.25%;}
  #wrVideoModal .wr-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  #wrVideoModal .wr-video-close{
    position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
    background:rgba(0,0,0,0.6);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  #wrVideoModal .wr-video-close svg{width:16px;height:16px;}
  #wrVideoModal .wr-video-close:hover{background:rgba(0,0,0,0.8);}

  .landing-hero{
    min-height:100vh;display:flex;flex-direction:row;align-items:center;justify-content:center;
    gap:64px;flex-wrap:wrap;
    padding:24px 24px 100px;position:relative;
    perspective:1200px;overflow:hidden;
  }
  #heroConstellation{
    position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  }
  .landing-hero-photo{

    position:absolute;top:5vh;left:5%;width:90%;height:90vh;
    object-fit:cover;border-radius:16px;z-index:1;opacity:0.55;
    pointer-events:none;
  }
  .landing-hero-headline{
    max-width:440px;position:relative;z-index:2;
    animation:heroSlideIn 0.8s cubic-bezier(.2,.8,.3,1) both;

    align-self:flex-start;
    margin-top:14vh;
  }
  @keyframes heroSlideIn{
    from{opacity:0;transform:translateX(-18px);}
    to{opacity:1;transform:translateX(0);}
  }
  .landing-hero-headline h2{
    font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);margin:0 0 14px;color:var(--chrome-text);
    line-height:1.15;
  }
  .landing-hero-headline h2 .hl-word{color:#31a1eb;}
  .landing-hero-headline p{
    font-family:var(--font-body);font-size:18px;font-weight:500;color:var(--chrome-text);line-height:1.55;margin:0;
    opacity:0;animation:heroFadeUp 0.7s ease 0.35s both;
  }
  @keyframes heroFadeUp{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
  }
  @media (max-width:860px){
    .landing-hero{flex-direction:column-reverse;gap:32px;text-align:center;}
    .landing-hero-headline{max-width:480px;text-align:center;align-self:center;margin-top:0;}
  }

  .auth-card{
    width:100%;max-width:432px;background:var(--parchment);color:var(--charcoal);
    border-radius:10px;padding:34px 40px 34px;
    border:1px solid var(--ink-line);margin-top:-56px;position:relative;z-index:2;
    animation:authCardIn 0.7s cubic-bezier(.2,.8,.3,1) both;
    overflow:hidden;
  }

  .auth-card::before{
    content:"";position:absolute;top:0;right:0;
    width:0;height:0;border-style:solid;border-width:0 22px 22px 0;
    border-color:transparent var(--parchment-deep) transparent transparent;
  }
  @keyframes authCardIn{
    from{opacity:0;transform:translateY(22px) scale(0.97);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  .auth-card > *{opacity:0;animation:authFieldIn 0.5s ease both;}
  .auth-card > *:nth-child(1){animation-delay:0.18s;}
  .auth-card > *:nth-child(2){animation-delay:0.25s;}
  .auth-card > *:nth-child(3){animation-delay:0.32s;}
  .auth-card > *:nth-child(4){animation-delay:0.39s;}
  .auth-card > *:nth-child(5){animation-delay:0.46s;}
  @keyframes authFieldIn{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }
  .auth-card-logo{
    font-family:var(--font-display);letter-spacing:0.5px;line-height:1;
    display:flex;align-items:center;justify-content:center;text-align:center;margin:0 0 10px;
    color:var(--charcoal);font-size:36px;
  }
  .auth-card-logo .mark-e-wrap{
    position:relative;top:0.12em;display:inline-flex;align-items:center;justify-content:center;
    width:1.9em;height:1.75em;margin-right:2px;flex-shrink:0;color:#2f79c9;
  }
  .auth-card-logo .mark-e-wrap svg{width:100%;height:100%;display:block;}
  .auth-card .auth-sub{
    font-family:var(--font-body);font-size:13px;color:var(--charcoal);margin:0 0 22px;
    letter-spacing:-0.1px;line-height:1.4;text-align:center;
  }
  .auth-tabs{
    display:flex;position:relative;margin-bottom:22px;
    background:var(--parchment-deep);border:2px solid var(--charcoal);border-radius:12px;padding:3px;
  }
  .auth-tab{
    flex:1;text-align:center;padding:8px 4px;font-family:var(--font-mono);font-size:11.5px;
    letter-spacing:0.5px;text-transform:uppercase;color:var(--slate);background:none;border:none;
    cursor:pointer;position:relative;z-index:1;border-radius:10px;font-weight:500;
    transition:color 0.25s ease;
  }
  .auth-tab.active{color:#fff;}
  .auth-tab-indicator{
    position:absolute;top:3px;left:3px;bottom:3px;width:calc(50% - 3px);
    background:var(--charcoal);border-radius:10px;
    transition:transform 0.3s cubic-bezier(.3,.7,.3,1);
  }
  .auth-field{margin-bottom:14px;}
  .auth-field label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--charcoal);font-weight:700;margin-bottom:5px;}
  .auth-field input{
    width:100%;padding:10px 12px;border:2px solid var(--charcoal);border-radius:12px;
    font-family:var(--font-body);font-size:14px;background:#fff;color:var(--charcoal);
    transition:border-color 0.2s ease;outline:none;
  }
  .auth-field input:hover{border-color:var(--ink-line);}
  .auth-field input:focus{outline:none;border-color:var(--crimson-deep);}
  .auth-field input:focus-visible{outline:none;border-color:var(--crimson-deep);}

  .auth-field, .auth-info{
    max-height:120px;opacity:1;overflow:hidden;
    transition:max-height 0.35s cubic-bezier(.2,.8,.3,1), opacity 0.28s ease, margin 0.35s ease;
  }
  .auth-field.hidden, .auth-info.hidden{
    display:block !important;max-height:0;opacity:0;margin-bottom:0;pointer-events:none;
  }
  .auth-info{
    font-family:var(--font-body);font-size:12.5px;color:var(--charcoal);
    background:var(--parchment-deep);border:1px solid var(--ink-line);
    border-radius:10px;padding:10px 12px;margin:-2px 0 14px;line-height:1.5;
  }
  .auth-info strong{color:var(--crimson-deep);}
  .auth-code-input{
    text-align:center;font-family:var(--font-mono);font-size:22px;font-weight:700;
    letter-spacing:8px;padding-left:8px !important;
  }
  .auth-code-input::placeholder{letter-spacing:normal;font-size:13px;font-weight:400;color:var(--slate);}
  .auth-resend{
    display:block;margin-top:8px;background:none;border:none;padding:0;cursor:pointer;
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.3px;color:var(--crimson-deep);
    text-decoration:underline;text-underline-offset:2px;transition:opacity 0.2s ease;
  }
  .auth-resend:hover{opacity:0.75;}
  .auth-resend:disabled{opacity:0.5;cursor:default;text-decoration:none;}
  .auth-error{
    font-family:var(--font-mono);font-size:12px;color:#bf0e0e;margin:-4px 0 12px;display:none;
    padding-left:9px;border-left:2px solid #bf0e0e;line-height:1.4;
  }
  .auth-error.visible{display:block;}
  .auth-submit{
    width:100%;padding:12px;border-radius:var(--radius-md);border:2px solid var(--color-blue-shadow);
    background:var(--color-blue);color:var(--on-accent);font-family:var(--font-body);font-size:14px;font-weight:700;
    cursor:pointer;outline:none;
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
    position:relative;overflow:hidden;transition:background-color var(--ease-hover), box-shadow var(--ease-hover), transform 100ms ease-out;
    transform:translateY(0);
  }
  .auth-submit:hover{background:var(--color-blue-hover);}
  .auth-submit:active{box-shadow:none;transform:translateY(var(--shadow-offset-md));transition:none;}
  .auth-submit:focus, .auth-submit:focus-visible{outline:none;}
  .auth-submit:disabled{opacity:0.65;cursor:default;box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);transform:none;}

  body.landing-page .auth-submit{
    border-width:1.5px;box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);
  }
  body.landing-page .auth-submit:active{transform:translateY(var(--shadow-offset-sm));}
  body.landing-page .auth-submit:disabled{box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);}
  body.landing-page .btn.primary{box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);}
  body.landing-page .btn.primary:active{transform:translateY(var(--shadow-offset-sm));}
  body.landing-page .demo-signup-btn{border-width:1.5px;box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);}
  body.landing-page .demo-signup-btn:active{transform:translateY(var(--shadow-offset-sm));}

  .landing-scroll-cue{
    position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--chrome-text-dim);
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
    animation:landingBounce 2.2s ease-in-out infinite;
  }
  .landing-scroll-cue svg{width:16px;height:16px;}
  @keyframes landingBounce{
    0%,100%{transform:translateX(-50%) translateY(0);}
    50%{transform:translateX(-50%) translateY(7px);}
  }

  .landing-features, .landing-example{
    --ink-soft:#ffffff;
    --ink-line:#dee7ed;
    --chrome-text:#07304b;
    --chrome-text-dim:#1171b1;
    --shadow:rgba(60,90,130,0.14);
  }
  .light-zone{
    position:relative; overflow:hidden; z-index:1;
  }
  .light-zone-bg{
    position:absolute;left:0;right:0;top:0;height:100%;z-index:-1;
    background-image:url('Images/speechbackgr22.png');background-repeat:no-repeat;
    background-attachment:fixed;background-position:center center;
    background-color:#edf2f5;
  }
  .landing-features{
    max-width:1080px;margin:0 auto;padding:90px 24px 70px;position:relative;z-index:1;
  }
  .feature-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(230px,1fr));gap:16px;
  }
  .feature-card{
    background:var(--ink-soft);border:3px solid var(--crimson-deep);border-radius:10px;padding:18px 18px;
    opacity:0;
    transition:box-shadow 0.35s ease, border-color 0.35s ease;
    transform-style:preserve-3d;will-change:transform, opacity;
  }
  .feature-card.revealed{opacity:1;transition:transform 0.15s cubic-bezier(.22,.9,.3,1), box-shadow 0.35s ease, border-color 0.35s ease;}
  .feature-card:hover{border-color:var(--brass);box-shadow:0 20px 46px rgba(0,0,0,0.28);}
  .feature-card .fc-icon{
    width:34px;height:34px;border-radius:11px;background:var(--crimson);color:var(--on-accent);
    display:flex;align-items:center;justify-content:center;margin-bottom:12px;
    border:1.5px solid var(--fc-accent-dark, rgba(0,0,0,0.3));
    box-shadow:inset 0 -3px 0 var(--fc-accent-dark, rgba(0,0,0,0.3));
    box-sizing:border-box;
    transform:translateZ(24px);transition:transform 0.35s ease;
  }
  .feature-card:hover .fc-icon{}
  .feature-card .fc-icon svg{width:20px;height:20px;}

  .feature-card{ position:relative; }
  .feature-card .fc-icon{ background:var(--fc-accent, var(--crimson)); }
  .feature-card:hover{ border-color:var(--fc-accent, var(--brass)); }

  .fc-head-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;min-height:34px;}
  .fc-head-row .fc-icon{margin-bottom:0;}
  .fc-decor{flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;}

  .fc-decor-flame svg{width:58px;height:58px;overflow:visible;}
  .fc-decor-flame .flame-layer{transform-box:fill-box;transform-origin:50% 85%;}
  .fc-decor-flame .flame-sway{transform-box:fill-box;transform-origin:50% 100%;animation:flameSway 2.6s ease-in-out infinite;}
  .fc-decor-flame .flame-outer{fill:#ff8a2b;animation:flameOuter 1.85s ease-in-out infinite;}
  .fc-decor-flame .flame-mid{fill:#ffab4d;transform:translateY(3.2px) scale(1.14);animation:flameMid 1.35s ease-in-out infinite;animation-delay:-0.4s;}
  .fc-decor-flame .flame-inner{fill:#ffcf4d;transform:translateY(2.2px) scale(1.2);animation:flameInner 0.95s ease-in-out infinite;animation-delay:-0.15s;}
  .fc-decor-flame .flame-core{fill:#fff6d8;transform:translateY(2.6px) scale(1.3);animation:flameCore 0.7s ease-in-out infinite;animation-delay:-0.3s;}
  .fc-decor-flame .flame-spark{fill:#f7d688;opacity:0;transform-box:fill-box;transform-origin:50% 50%;}
  .fc-decor-flame .flame-spark-1{animation:flameSpark 2.2s ease-in infinite;animation-delay:.3s;}
  .fc-decor-flame .flame-spark-2{animation:flameSpark 1.9s ease-in infinite;animation-delay:1.1s;}
  .fc-decor-flame .flame-spark-3{animation:flameSpark 2.5s ease-in infinite;animation-delay:1.8s;}

  .fc-decor-goal-seal{width:58px;height:58px;}
  .fc-decor-goal-seal .goal-card-seal-pct{font-size:14px;}

  .fc-mini-trend-group{display:flex;flex-direction:column;gap:16px;margin-top:16px;}
  .fc-mini-trend-wrap{height:11px;border-radius:12px;}
  .fc-mini-trend-fill{
    display:block;height:100%;border-radius:12px;width:var(--trend-pct, 75%);
    transform:scaleX(0);transform-origin:left center;
    animation:fcMiniTrendExpand 0.9s cubic-bezier(.22,.9,.3,1) forwards;
    animation-delay:var(--trend-delay, 0s);
  }
  @keyframes fcMiniTrendExpand{ to{ transform:scaleX(1); } }

  .fc-mini-history{margin-top:14px;background:rgba(255,255,255,0.55);overflow:hidden;}
  .fc-mini-history .history-card-head{padding:10px 12px;gap:6px;}
  .fc-mini-history .hc-top{flex-wrap:wrap;row-gap:4px;}
  .fc-mini-history .hc-round, .fc-mini-history .hc-mode-badge{font-size:8px;padding:2px 6px;letter-spacing:0.3px;}
  .fc-mini-history .hc-date{font-size:9px;}
  .fc-mini-history .hc-top-left{gap:5px;row-gap:4px;}
  .fc-mini-history .hc-score{font-size:15px;}
  .fc-mini-history .hc-score .hc-score-max{font-size:9px;}
  .tut-skel-cats.fc-mini-cats{display:flex;flex-direction:column;gap:0;padding:0 12px 10px !important;}
  .fc-mini-cats .hc-cat{font-size:9.5px;padding:3px 0 3px 8px;border-left-width:2px;line-height:1.3;}

  .fc-mini-chart{
    margin-top:14px;width:100%;max-width:220px;height:52px;
    display:flex;align-items:flex-end;gap:3%;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);
    border-radius:12px;padding:6px 8px;
  }
  .fc-mini-chart .tut-skel-bar{border-radius:10px;}

  .fc-mini-notes{margin-top:12px;padding:12px 14px;}
  .fc-mini-notes .tut-skel-block{height:9px;margin:6px 0;}

  .fc-mini-trendrows{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
  .fc-mini-trendrows .trend-row{padding:0;border-bottom:none;gap:8px;}
  .fc-mini-trendrows .trend-bar-wrap{height:8px;border-radius:12px;background:rgba(255,255,255,0.18);}
  .fc-mini-trendrows .trend-avg{background:rgba(255,255,255,0.3);}

  .fc-mini-summary{margin-top:14px;gap:10px;}
  .fc-mini-summary .col{padding:9px 11px;min-width:0;}
  .fc-mini-summary h4{font-size:9px;margin-bottom:6px;gap:5px;}
  .fc-mini-summary ul{gap:5px;}
  .fc-mini-summary li{padding-left:12px;}
  .fc-mini-summary li::before{width:4px;height:4px;top:5px;}

  .fc-mini-suggested-group{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
  .fc-mini-suggested{padding:8px 10px;gap:8px;}

  .vocal-wave-icon{gap:2.5px;}
  .vocal-wave-icon .vw-bar{
    width:3px;height:8px;border-radius:10px;background:var(--on-accent);
    transform:scaleY(0.4);transform-origin:center;
    transition:transform 0.16s cubic-bezier(.3,.6,.4,1);
  }
  .demo-record-mock{
    margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .demo-record-mock .rec-pill{position:static;}
  .demo-record-btn{
    width:44px;height:44px;pointer-events:none;
  }
  .rec-btn.recording.demo-record-btn{
    border:none;box-shadow:none;background:#db1010;animation:none;
  }
  .demo-record-btn:hover{transform:none;}
  .demo-record-btn .inner{width:15px;height:15px;}
  .demo-record-btn.recording .inner{width:13px;height:13px;}
  .feature-card h3{font-family:var(--font-display);font-size:16px;margin:0 0 6px;color:var(--chrome-text);transform:translateZ(14px);}
  .feature-card p{font-family:var(--font-body);font-size:13px;color:var(--chrome-text-dim);line-height:1.5;margin:0;transform:translateZ(10px);}
  .feature-card.wide{grid-column:1 / -1;}
  .feature-card.wide .fc-body{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:26px;align-items:start;}
  .feature-card.wide .fc-body.stacked{display:flex;flex-direction:column;gap:16px;}
  @media (max-width:720px){ .feature-card.wide .fc-body{grid-template-columns:1fr;} }

  .demo-panel{
    background:var(--parchment);color:var(--charcoal);border-radius:14px;padding:16px 16px 14px;
    margin-top:16px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule);
    transform:translateZ(6px);
  }
  .demo-panel .q-hint, .demo-panel .progress-phrase{color:var(--slate);}
  .demo-locked-overlay{
    position:absolute;inset:0;background:rgba(20,26,36,0.72);backdrop-filter:blur(2px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
    padding:20px;opacity:0;pointer-events:none;transition:opacity 0.35s ease;
    border:3px solid var(--crimson-deep);
    z-index:60;transform:translateZ(60px);
  }
  .demo-locked-overlay.show{opacity:1;pointer-events:auto;}
  .demo-locked-overlay svg{
    width:24px;height:24px;min-width:24px;min-height:24px;flex-shrink:0;
    stroke-width:2.75;color:#4eaded;

    display:block;
  }
  .demo-locked-overlay svg use{width:100%;height:100%;}
  .demo-locked-overlay p{color:#fff;font-family:var(--font-body);font-size:13px;margin:0;max-width:260px;line-height:1.5;}
  .demo-locked-overlay .demo-signup-btn{
    padding:11px 20px;border-radius:var(--radius-md);background:var(--color-blue);color:var(--on-accent);
    border:2px solid var(--color-blue-shadow);
    font-family:var(--font-body);font-size:14px;cursor:pointer;font-weight:700;
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
    transition:background-color var(--ease-hover), box-shadow var(--ease-hover), transform 100ms ease-out;
    transform:translateY(0);
  }
  .demo-signup-btn:hover{background:var(--color-blue-hover);}
  .demo-signup-btn:active{box-shadow:none;transform:translateY(var(--shadow-offset-md));transition:none;}

  .mini-timer-display{
    font-family:var(--font-mono);font-size:40px;text-align:center;color:var(--charcoal);letter-spacing:1px;padding:6px 0 2px;
  }
  .mini-timer-display.warn{color:var(--crimson);}
  .mini-timer-btn-row{display:flex;gap:8px;justify-content:center;margin-top:6px;}

  .demo-category-reveal .score{
    opacity:0;animation:demoFadeUp 0.5s ease 0.9s forwards;
  }
  .demo-category-reveal .cat-name{
    opacity:0;transform:translateY(8px);animation:demoFadeUp 0.5s ease 0.5s forwards;
  }
  .demo-category-reveal .cat-row{
    opacity:0;transform:translateY(8px);animation:demoFadeUp 0.5s ease forwards;
  }
  .demo-category-reveal .cat-row.worked{animation-delay:0.65s;}
  .demo-category-reveal .cat-row.flaws{animation-delay:0.8s;}
  .demo-category-reveal .cat-row.evidence{animation-delay:0.95s;}
  @keyframes demoFadeUp{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

  .wr-preview{display:flex;gap:14px;align-items:flex-start;}
  .wr-thumb{
    position:relative;width:150px;flex-shrink:0;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,0.25);
    cursor:pointer;background:#000;
  }
  .wr-thumb img{width:100%;display:block;transition:transform 0.4s ease;}
  .wr-thumb:hover img{transform:scale(1.05);}
  .wr-thumb .wr-play{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  }
  .wr-thumb .wr-play svg{width:34px;height:34px;color:#fff;}
  .wr-snippet{font-family:var(--font-body);font-size:13px;line-height:1.7;color:var(--charcoal);}
  .wr-snippet .tw{cursor:default;}

  .landing-example{
    max-width:640px;margin:0 auto 90px;padding:32px 32px 36px;text-align:center;position:relative;z-index:1;
    background:rgba(255,255,255,0.9);border-radius:16px;box-shadow:0 20px 50px rgba(30,50,80,0.18);
    opacity:0;transform:translateY(24px);transition:opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
    border:3px solid var(--crimson-deep);
  }
  .landing-example.in-view{opacity:1;transform:translateY(0);}
  .landing-example h2{font-family:var(--font-display);font-size:26px;margin:0 0 10px;color:var(--chrome-text);}
  .landing-example p{font-family:var(--font-body);font-size:14px;color:var(--chrome-text-dim);margin:0 0 22px;line-height:1.6;}
  .landing-example-btn{
    display:inline-flex;align-items:center;justify-content:center;padding:11px 32px;border-radius:var(--radius-md);
    background:var(--color-blue);color:var(--on-accent);border:2px solid var(--color-blue-shadow);cursor:pointer;
    font-family:var(--font-body);font-size:14px;font-weight:700;
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
    transition:background-color var(--ease-hover), box-shadow var(--ease-hover), transform 100ms ease-out;
    position:relative;overflow:hidden;transform:translateY(0);
  }
  .landing-example-btn:hover{background:var(--color-blue-hover);}
  .landing-example-btn:active{box-shadow:none;transform:translateY(var(--shadow-offset-md));transition:none;}

  .history-list{display:flex;flex-direction:column;gap:18px;}
  .history-empty{font-family:var(--font-mono);font-size:12.5px;color:#000;text-align:center;padding:40px 10px;}
  @keyframes htFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  .history-trends{
    border:2px solid var(--charcoal);border-radius:10px;padding:26px 28px 28px;margin-bottom:26px;
    background:rgba(255,255,255,0.6);
    animation:htFadeIn .45s ease both;
  }
  .history-trends h3{
    font-family:var(--font-display);font-size:19px;font-weight:700;margin:0 0 20px;color:#000;
    padding-bottom:14px;border-bottom:2px solid var(--rule);
  }
  .trend-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding-bottom:14px;border-bottom:2px solid var(--rule);margin-bottom:20px;}
  .trend-head-row h3{margin:0;padding-bottom:0;border-bottom:none;}
  .trend-mode-filter{display:flex;align-items:center;gap:8px;}
  .trend-mode-filter label{font-family:var(--font-mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.6px;color:#000;}
  .trend-rows{display:flex;flex-direction:column;}
  .trend-row{display:flex;align-items:center;gap:14px;padding:11px 0;font-size:13px;border-bottom:1px solid rgba(0,0,0,0.07);}
  .trend-row:last-child{border-bottom:none;}
  .trend-row .trend-name{width:170px;flex-shrink:0;font-family:var(--font-mono);font-size:12px;font-weight:500;color:#000;}
  .trend-row .trend-bar-wrap{flex:1;background:var(--rule);border-radius:10px;height:10px;overflow:hidden;}
  .trend-row .trend-bar{display:block;height:100%;border-radius:10px;min-width:2px;transition:width 0.9s cubic-bezier(.22,.9,.3,1);}
  .trend-row .trend-avg{width:48px;text-align:right;font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:#000;flex-shrink:0;}

  .trend-row.trend-row-overall{border-bottom:2px solid var(--rule);margin-bottom:4px;padding-bottom:14px;}
  .trend-row.trend-row-overall .trend-name{font-weight:700;}
  .trend-row.trend-row-overall .trend-bar-wrap{height:13px;}
  .trend-row.trend-row-overall .trend-avg{width:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;}
  .trend-avg-sub{font-size:9.5px;font-weight:500;opacity:0.6;}

  .trend-summary{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;}
  .trend-summary .col{
    flex:1;min-width:200px;border-radius:10px;padding:16px 18px;
    background:#fff;border:1px solid var(--rule);
    transition:border-color .15s, transform .15s;
  }
  .trend-summary .col:hover{border-color:var(--brass);transform:translateY(-1px);}
  .trend-summary .col.strength{border-left:4px solid #61e007;background:#fff;}
  .trend-summary .col.weakness{border-left:4px solid #f14242;background:#fff;}
  .trend-summary h4{
    display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:0.6px;margin:0 0 11px;
  }
  .trend-summary .col.strength h4{color:#4eb306;}
  .trend-summary .col.weakness h4{color:#ed1515;}
  .trend-summary ul{margin:0;padding:0;list-style:none;font-size:13.5px;font-weight:500;color:#000;display:flex;flex-direction:column;gap:8px;}
  .trend-summary li{padding-left:16px;position:relative;}
  .trend-summary .col.strength li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#61e007;}
  .trend-summary .col.weakness li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#f14242;}

  .history-card{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.5);transition:border-color .15s;}
  .history-card:hover{border-color:var(--brass);}
  .history-card-head{
    display:flex;flex-direction:column;gap:14px;padding:18px 20px;cursor:pointer;
  }
  .history-card-head:hover{background:rgba(255,255,255,0.35);}

  .hc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .hc-top-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
  .hc-round{
    font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;
    color:var(--on-accent);background:var(--charcoal);border-radius:10px;padding:4px 9px;flex-shrink:0;
  }
  .hc-mode-badge{
    font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;
    color:#fff;border-radius:10px;padding:4px 9px;flex-shrink:0;
  }
  .hc-mode-badge.is-regular{background:#116daa;}
  .hc-mode-badge.is-intro{background:#bf0e0e;}
  .hc-mode-badge.is-body{background:#a7780b;}
  .hc-mode-badge.is-roughdraft{background:#49a705;}
  .hc-date{font-family:var(--font-mono);font-size:12px;color:#000;opacity:0.6;}
  .history-card-head .hc-score{font-family:var(--font-display);font-size:30px;font-weight:900;flex-shrink:0;line-height:1;}
  .history-card-head .hc-score .hc-score-max{font-size:15px;font-weight:500;opacity:0.55;margin-left:1px;}

  .hc-question{
    position:relative;text-align:center;padding:14px 34px 2px;
    border-top:1px dashed var(--rule);
    font-family:var(--font-display);font-size:17.5px;font-weight:700;font-style:italic;
    line-height:1.45;color:var(--charcoal);
  }
  .hc-question::before, .hc-question::after{
    position:absolute;top:8px;font-family:var(--font-display);font-size:30px;font-weight:700;font-style:normal;
    color:var(--brass);opacity:0.55;line-height:1;
  }
  .hc-question::before{content:'\201C';left:0;}
  .hc-question::after{content:'\201D';right:0;}

  .history-card-body{padding:0 20px 22px;display:none;}
  .history-card-body.open{display:block;}
  .history-card video{width:100%;max-height:280px;border-radius:10px;background:#000;margin-bottom:14px;display:block;}
  .history-card .hc-cats{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
  .history-card .hc-cat{font-size:13px;font-weight:500;color:#000;border-left:3px solid var(--rule);padding:5px 0 5px 12px;}
  .history-card .hc-cat b{display:inline-block;min-width:36px;font-weight:700;}
  .history-card .hc-transcript{
    border-top:1px dashed var(--rule);padding-top:18px;margin-top:8px;
  }
  .history-card .hc-full-ballot{margin-bottom:8px;}
  .history-card .hc-transcript-body{font-size:13.5px;line-height:1.7;color:#000;}
  .history-card .hc-actions{display:flex;gap:12px;margin-top:14px;}
  .history-card .hc-actions button{
    font-family:var(--font-mono);font-size:11.5px;font-weight:500;padding:7px 12px;border:1px solid var(--rule);
    background:none;border-radius:10px;cursor:pointer;color:#000;transition:border-color .15s, color .15s;
  }
  .history-card .hc-actions button:hover{color:var(--crimson);border-color:var(--crimson);}
  .flight .chip b{color:var(--charcoal);}

  .trend-chart-panel{margin-top:28px;border-top:2px solid var(--rule);padding-top:22px;}
  .tcp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
  .tcp-head label{font-family:var(--font-mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.6px;color:#000;}
  .tcp-select{
    font-family:var(--font-body);font-size:13px;font-weight:500;color:#000;
    padding:9px 36px 9px 14px;border:1.5px solid var(--rule);border-radius:10px;background-color:#fff;cursor:pointer;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
    transition:border-color .15s;
  }
  .tcp-select:hover{border-color:var(--brass);}
  .tcp-select:focus{outline:none;border-color:var(--brass);}

  .trend-chart-big{
    border:1px solid var(--rule);border-radius:10px;padding:22px 24px 16px;background:#ffffff;
    animation:htFadeIn .35s ease both;
  }
  .trend-chart-big .tcb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
  .trend-chart-big h5{
    font-family:var(--font-mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.6px;color:#000;margin:0;
  }
  .trend-chart-big .tcb-latest{font-family:var(--font-display);font-size:24px;font-weight:900;color:#000;}
  .trend-chart-big svg{width:100%;height:260px;display:block;}
  .trend-chart-big svg circle{opacity:0;animation:tcDot .35s ease forwards;}
  @keyframes tcDot{to{opacity:1;}}
  .trend-chart-big path.tc-line{stroke-dasharray:2000;stroke-dashoffset:2000;animation:tcDraw 1.1s cubic-bezier(.3,.6,.3,1) forwards;}
  @keyframes tcDraw{to{stroke-dashoffset:0;}}
  .trend-chart-big .axis-label{font-family:var(--font-mono);font-size:10.5px;font-weight:500;fill:#000;}
  .trend-chart-big .grid-line{stroke:var(--rule);stroke-width:1;}
  .trend-chart-big .axis-line{stroke:#000;stroke-width:1.5;}

  .history-overall{
    position:relative;overflow:hidden;
    border:1px solid var(--crimson-deep);border-radius:10px;
    padding:20px 24px 20px 26px;margin-bottom:22px;
    background:var(--crimson);
    animation:htFadeIn .45s ease both;
  }
  .history-overall .ho-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
  .history-overall .ho-icon{width:21px;height:21px;flex-shrink:0;color:#ffffff;}
  .history-overall h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin:0;color:#ffffff;}
  .history-overall p{margin:0;font-size:14px;font-weight:500;line-height:1.7;color:#ffffff;}
  .history-overall.loading{
    font-family:var(--font-mono);font-size:12px;color:#000;font-style:italic;
    padding:16px 20px 16px 26px;
    background:rgba(255,255,255,0.6);border-color:var(--rule);
  }

  .stage{background:var(--ink);border-radius:12px;padding:10px;border:1px solid var(--ink-line);}
  .stage .frame{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/10;}
  .stage video{width:100%;height:100%;object-fit:cover;display:block;}
  .rec-pill{
    position:absolute;top:10px;left:10px;
    background:rgba(0,0,0,0.55);color:#fff;font-family:var(--font-mono);font-size:12px;
    padding:4px 9px;border-radius:20px;display:flex;align-items:center;gap:6px;letter-spacing:0.5px;
  }
  .rec-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--crimson);animation:pulse 1.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.25;}}
  .clock{
    position:absolute;top:10px;right:10px;
    background:rgba(0,0,0,0.55);font-family:var(--font-mono);font-size:16px;font-weight:bold;
    padding:5px 12px;border-radius:20px;color:#cafca6;letter-spacing:1px;
  }
  .clock.warn{color:#f8d990;}
  .clock.over{color:#f8a8a8;}
  .stage-note{font-family:var(--font-mono);font-size:11px;color:#dee7ed;padding:8px 4px 2px;text-align:center;}

  .controls-row{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:18px;}
  .rec-btn{
    width:62px;height:62px;border-radius:50%;border:3px solid #6b0808;
    background:#bf0e0e;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 var(--shadow-offset-lg) 0 #6b0808;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .rec-btn:hover{transform:translateY(-2px);}
  .rec-btn:active{box-shadow:none;transform:translateY(var(--shadow-offset-lg));transition:none;}
  .rec-btn .inner{width:20px;height:20px;border-radius:50%;background:#fde3e3;}
  .rec-btn.recording .inner{border-radius:12px;background:#fff;width:18px;height:18px;}
  .rec-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none;}
  .btn-label{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:#0a3e61;text-transform:uppercase;text-align:center;margin-top:6px;}

  .rec-btn.recording{
    background:#db1010;
    border-color:#f03333;
    animation:recPulse 1.1s ease-out infinite;
  }
  .rec-btn.recording:hover{transform:scale(1.05);}
  @keyframes recPulse{
    0%  {outline:0px solid rgba(231,76,60,0.65);}
    70% {outline:14px solid rgba(231,76,60,0);}
    100%{outline:0px solid rgba(231,76,60,0);}
  }

  .gear-btn{
    background:var(--brass);
    border-style:solid;border-color:#0a446a;
    border-width:1.5px;
    cursor:pointer;
    color:#ffffff;padding:5px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;gap:3px;
    transition:color .15s, transform .2s, border-color .15s;flex-shrink:0;
    width:36px;height:36px;box-sizing:border-box;
    box-shadow:0 3px 0 #0a446a;
  }
  .gear-btn:hover{color:#ffffff;border-color:#0a446a;}
  .gear-btn.active{background:#0a446a;border-color:#062a42;box-shadow:0 3px 0 #062a42;}
  #timerToggle.active{transform:none;}
  #helpToggle.active{transform:none;}
  #shortcutsToggle.active{transform:none;}
  #themeToggle.active{transform:none;}
  #briefingToggle.active{transform:none;}
  #citationToggle.active{transform:none;color:var(--score-green);}
  #themeToggle{background:#7a3fc9;border-color:#4a2280;box-shadow:0 3px 0 #4a2280;}
  #themeToggle:hover{border-color:#4a2280;}
  #themeToggle.active{background:#4a2280;border-color:#2f1552;box-shadow:0 3px 0 #2f1552;}
  html[data-theme="light"] #themeToggle{background:#e2790f;border-color:#a1560a;box-shadow:0 3px 0 #a1560a;}
  html[data-theme="light"] #themeToggle:hover{border-color:#a1560a;}
  html[data-theme="light"] #themeToggle.active{background:#a1560a;border-color:#6e3b06;box-shadow:0 3px 0 #6e3b06;}

  #timerToggle.timer-running{background:#49a705;border-color:#337404;box-shadow:0 3px 0 #337404;}
  #timerToggle.timer-running:hover{border-color:#337404;}
  #timerToggle.timer-paused{background:#bf0e0e;border-color:#8b0b0b;box-shadow:0 3px 0 #8b0b0b;}
  #timerToggle.timer-paused:hover{border-color:#8b0b0b;}

  #streakToggle.active{transform:none;}
  #streakToggle.active.has-streak{color:#f2ba38;}
  #timerToggle{position:relative;}
  .timer-badge{
    font-family:var(--font-mono);font-size:10px;font-weight:bold;letter-spacing:0.3px;
    color:var(--brass);margin-left:2px;
  }
  .timer-badge.running{color:var(--forest);}
  .timer-badge.warn{color:var(--crimson-bright);}

  #timerToggle .timer-hand{
    transform-box: view-box;
    transform-origin: 12px 14px;
  }
  #timerToggle.ticking .timer-hand{
    animation: clockHandTick 4s steps(4) infinite;
  }
  @keyframes clockHandTick{
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .timer-display{
    font-family:var(--font-mono);font-size:38px;font-weight:bold;
    color:var(--charcoal);letter-spacing:1px;margin-bottom:14px;
  }
  .timer-display.warn{color:var(--crimson);}
  .timer-btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
  .timer-btn-row .btn{font-size:12.5px;padding:8px 16px;}

  .question-block{margin-bottom:20px;}
  .question-block label{
    display:block;font-family:var(--font-mono);font-size:11px;
    text-transform:uppercase;letter-spacing:1.2px;color:#000;margin-bottom:7px;
  }
  .question-block textarea{
    width:100%;font-family:var(--font-body);font-size:14px;line-height:1.5;
    padding:11px 13px;border:1.5px solid #d9d4c4;border-radius:16px;
    background:#fbfaf5;color:var(--charcoal);resize:vertical;min-height:72px;
    box-shadow:0 3px 0 #d9d4c4;box-sizing:border-box;
    transition:border-color .15s;
  }
  .question-block textarea:focus{outline:none;border-color:var(--brass);}
  .question-block textarea.error{border-color:var(--crimson);}

  .rd-form{margin-top:6px;}
  .rd-section{
    border:2px solid var(--rule);border-left:5px solid #49a705;border-radius:10px;
    padding:12px 14px;margin-bottom:14px;background:#ffffff;
  }
  .rd-section-head{
    font-family:var(--font-mono);font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:1.2px;color:#49a705;margin-bottom:8px;
  }
  .rd-field{margin-bottom:10px;}
  .rd-field:last-child{margin-bottom:0;}
  .rd-field label{
    display:block;font-family:var(--font-mono);font-size:10px;
    text-transform:uppercase;letter-spacing:1px;color:var(--slate);margin-bottom:4px;
  }
  .rd-field textarea{
    width:100%;font-family:var(--font-body);font-size:13.5px;line-height:1.5;
    padding:9px 11px;border:1.5px solid #d9d4c4;border-radius:16px;
    background:#fbfaf5;color:var(--charcoal);resize:vertical;min-height:50px;
    box-shadow:0 3px 0 #d9d4c4;box-sizing:border-box;transition:border-color .15s;
  }
  .rd-field textarea:focus{outline:none;border-color:#49a705;}
  .rd-field textarea.error{border-color:var(--crimson);}
  .rd-field textarea[readonly]{background:#eaeff3;color:var(--slate);cursor:default;box-shadow:0 3px 0 #d5dbe0;}

  .rd-card-meta-row{display:flex;gap:10px;margin-top:8px;}
  .rd-card-meta-row .rd-field{flex:1;margin-bottom:0;}
  .rd-field input[type="text"]{
    width:100%;font-family:var(--font-body);font-size:13px;
    padding:7px 10px;border:1.5px solid #d9d4c4;border-radius:16px;
    background:#fbfaf5;color:var(--charcoal);box-sizing:border-box;
    box-shadow:0 3px 0 #d9d4c4;transition:border-color .15s;
  }
  .rd-field input[type="text"]:focus{outline:none;border-color:#49a705;}
  .rd-field input[type="text"].error{border-color:var(--crimson);}
  .rd-field-hint{font-family:var(--font-body);font-size:11px;color:var(--slate);margin-top:4px;}
  .rd-error{display:none;margin-top:6px;color:var(--score-red);font-size:12.5px;}
  .rd-prep-row{
    display:flex;align-items:center;gap:10px;margin-bottom:16px;
    font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
    letter-spacing:1px;color:var(--slate);
  }
  .rd-prep-row select{
    font-family:var(--font-body);font-size:13px;padding:6px 10px;
    border:1.5px solid #d9d4c4;border-radius:16px;background:#fbfaf5;color:var(--charcoal);
    box-shadow:0 3px 0 #d9d4c4;
  }
  .question-block input[type=text]{
    width:100%;font-family:var(--font-body);font-size:14px;
    padding:11px 13px;border:1.5px solid #d9d4c4;border-radius:16px;
    background:#fbfaf5;color:var(--charcoal);box-shadow:0 3px 0 #d9d4c4;
    box-sizing:border-box;transition:border-color .15s;
  }
  .question-block input[type=text]:focus{outline:none;border-color:var(--brass);}
  .question-block input[type=text].error{border-color:var(--crimson);}
  .question-block .q-hint{font-size:11px;color:var(--slate);margin-top:5px;font-family:var(--font-mono);}
  .q-error{font-size:12px;color:var(--crimson);margin-top:5px;display:none;}

  .cc-verdict-row{display:flex;justify-content:center;margin:6px 0 20px;}
  .cc-verdict-stamp{text-align:center;border:1.5px solid var(--color-blue-shadow);border-radius:var(--radius-md);padding:8px 20px;background:var(--color-blue);box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);}
  .cc-verdict-stamp .label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.8);}
  .cc-verdict-stamp .num{font-family:var(--font-display);font-size:16px;font-weight:bold;letter-spacing:1px;margin-top:2px;color:#ffffff;}
  .cc-verdict-stamp.true{background:#49a705;border-color:#337404;box-shadow:0 var(--shadow-offset-sm) 0 #337404;}
  .cc-verdict-stamp.false{background:#bf0e0e;border-color:#8b0b0b;box-shadow:0 var(--shadow-offset-sm) 0 #8b0b0b;}
  .cc-verdict-stamp.unverified{background:#116daa;border-color:#0b446a;box-shadow:0 var(--shadow-offset-sm) 0 #0b446a;}
  .cc-claim-recap{
    font-family:var(--font-mono);font-size:12px;color:var(--slate);line-height:1.6;
    background:rgba(0,0,0,0.03);border-left:3px solid var(--rule);padding:9px 12px;margin-bottom:14px;
  }
  .cc-claim-recap b{color:var(--charcoal);}
  .cc-explanation{font-size:14px;line-height:1.6;margin-bottom:12px;color:var(--charcoal);}
  .cc-source-link{font-size:13px;margin-bottom:4px;}
  .cc-source-link a{color:var(--crimson-deep);word-break:break-all;}

  .q-mode-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .q-mode-btn{flex:1;min-width:170px;font-size:13px;padding:10px 14px;border:1px solid transparent;}
  #qModeCustomBtn, #qModeReceiveBtn{color:#f2f5f8;}
  #qModeCustomBtn{background:var(--crimson);border-color:var(--crimson-deep);box-shadow:0 var(--shadow-offset-sm) 0 var(--crimson-deep);}
  #qModeCustomBtn:hover{background:#0d5788;color:#f2f5f8;}
  #qModeCustomBtn:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}
  #qModeReceiveBtn{background:var(--brass);border-color:#0a446a;box-shadow:0 var(--shadow-offset-sm) 0 #0a446a;}
  #qModeReceiveBtn:hover{background:#1069a5;color:#f2f5f8;}
  #qModeReceiveBtn:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}
  .q-mode-btn.active{outline:3px solid var(--score-cyan);outline-offset:2px;}

  .av-btn-row{display:flex;gap:14px;flex-wrap:wrap;max-width:560px;margin:0 auto;}
  .av-btn-row .btn{flex:1;min-width:210px;font-size:14px;font-weight:700;padding:12px 18px;border:1px solid transparent;}
  #uploadVideoBtn, #captureYoutubeBtn{color:#ffffff;}
  #uploadVideoBtn{background:var(--crimson);border-color:var(--crimson-deep);box-shadow:0 var(--shadow-offset-sm) 0 var(--crimson-deep);}
  #uploadVideoBtn:hover{background:#0d5788;color:#ffffff;}
  #uploadVideoBtn:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}
  #captureYoutubeBtn{background:var(--brass);border-color:#0a446a;box-shadow:0 var(--shadow-offset-sm) 0 #0a446a;}
  #captureYoutubeBtn:hover{background:#1069a5;color:#ffffff;}
  #captureYoutubeBtn:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}

  .q-change-link{font-family:var(--font-mono);color:var(--brass);text-decoration:underline;cursor:pointer;}
  .q-change-link:hover{color:var(--charcoal);}

  .q-cat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
  .q-cat-btn{flex:1;min-width:110px;font-size:13px;padding:9px 12px;border:1px solid var(--rule);}
  .btn.ghost.q-cat-btn.active{background:var(--brass);color:#fff;border-color:#0a446a;box-shadow:0 var(--shadow-offset-sm) 0 #0a446a;}
  .btn.ghost.q-cat-btn.active:hover{background:var(--brass);border-color:#0a446a;}
  .q-cat-btn.active:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}

  .q-diff-slider-wrap{ padding:8px 6px 0; }

  .q-diff-badge-row{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-bottom:14px;flex-wrap:wrap;
  }
  .q-diff-badge{
    font-family:var(--font-mono);font-weight:700;font-size:11.5px;letter-spacing:0.6px;text-transform:uppercase;
    color:#fff;background:var(--brass);
    padding:5px 12px;border-radius:10px;
  }
  .q-diff-badge-sub{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.4px;
    color:var(--slate);
  }

  .q-diff-track-outer{
    position:relative;display:flex;align-items:center;height:34px;margin:4px 0 10px;
  }
  .q-diff-track-stops{
    position:absolute;left:9px;right:9px;top:50%;transform:translateY(-50%);
    display:flex;justify-content:space-between;z-index:1;
  }
  .q-diff-stop{
    width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,0.55);
    border:1px solid rgba(22,40,60,0.35);
    cursor:pointer;
  }
  .q-diff-stop.is-passed{ background:rgba(255,255,255,0.85); }
  .q-diff-stop.is-active{ background:var(--charcoal);border-color:#fff; }

  .q-diff-slider{
    position:relative;z-index:2;
    -webkit-appearance:none;appearance:none;width:100%;height:18px;border-radius:12px;
    outline:none;cursor:pointer;margin:0;
    background:var(--parchment-deep);
    border:1px solid var(--rule);
  }
  .q-diff-slider:focus-visible{ border-color:var(--brass); }

  .q-diff-slider::-webkit-slider-runnable-track{
    height:18px;border-radius:12px;
    background:linear-gradient(to right, var(--score-green) 0%, var(--score-yellow) 50%, var(--score-orange) 75%, var(--score-red) 100%);
  }
  .q-diff-slider::-moz-range-track{
    height:18px;border-radius:12px;
    background:linear-gradient(to right, var(--score-green) 0%, var(--score-yellow) 50%, var(--score-orange) 75%, var(--score-red) 100%);
  }
  .q-diff-slider::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:16px;height:30px;margin-top:-6px;border-radius:10px;
    background:var(--charcoal);
    border:2px solid #ffffff;
    box-shadow:-1px 1px 3px rgba(0,0,0,0.35);
    cursor:pointer;
  }
  .q-diff-slider::-moz-range-thumb{
    width:16px;height:30px;border-radius:10px;
    background:var(--charcoal);
    border:2px solid #ffffff;
    box-shadow:-1px 1px 3px rgba(0,0,0,0.35);
    cursor:pointer;
  }

  .q-diff-ticks{
    display:flex;justify-content:space-between;font-family:var(--font-body);font-size:12px;
    line-height:1.3;color:#000;padding:0 2px;margin-bottom:14px;
  }
  .q-diff-ticks span{ flex:1;text-align:center;font-weight:500;transition:color 0.15s ease,font-weight 0.15s ease; }
  .q-diff-ticks span:first-child{ text-align:left; }
  .q-diff-ticks span:last-child{ text-align:right; }
  .q-diff-ticks span.is-active{ color:var(--crimson-deep);font-weight:700; }

  .q-diff-example-card{
    background:var(--parchment-deep);
    border:1px solid var(--rule);
    border-left:3px solid var(--brass);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:14px;
  }
  .q-diff-example-label{
    font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
    color:var(--brass);font-weight:700;margin-bottom:5px;
  }
  .q-diff-example{
    font-family:var(--font-display);font-size:14.5px;font-style:italic;line-height:1.55;
    color:var(--charcoal);margin:0;
  }
  .q-diff-actions{display:flex;gap:10px;}
  .q-diff-actions .btn{flex:1;}

  .q-option-card{
    border:2px solid var(--rule);border-radius:10px;background:#ffffff;
    padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .12s,background .12s;
    font-family:var(--font-body);font-size:14px;line-height:1.45;color:var(--charcoal);
  }
  .q-option-card:hover{border-color:var(--brass);background:#f1f5f7;}

  .q-confirmed-text{
    font-family:var(--font-display);font-size:15px;font-style:italic;line-height:1.5;
    color:var(--charcoal);border:1px solid var(--rule);border-radius:10px;
    padding:12px 14px;background:#ffffff;margin-top:4px;
  }

  .q-spinner{
    width:22px;height:22px;margin:10px auto 0;border-radius:50%;
    border:3px solid var(--rule);border-top-color:var(--brass);
    animation:qSpin .8s linear infinite;
  }
  @keyframes qSpin{to{transform:rotate(360deg);}}

  .progress-bar-wrap{
    width:100%;max-width:300px;margin:16px auto 0;
  }
  .progress-bar-track{
    height:7px;border-radius:999px;
    background:var(--rule);overflow:hidden;
    border-top:1px solid rgba(0,0,0,0.12);
  }
  .progress-bar-fill{
    height:100%;width:0%;border-radius:999px;
    background:var(--crimson);
    transition:width .35s cubic-bezier(.25,.8,.35,1);
  }
  .progress-phrase{
    font-family:var(--font-mono);font-size:11.5px;color:var(--slate);
    margin-top:10px;min-height:15px;transition:opacity .22s ease;
    letter-spacing:0.3px;text-align:center;
  }

  .result-question{
    border:1.5px solid var(--color-blue-shadow);border-radius:var(--radius-md);
    padding:14px 16px;margin-bottom:22px;
    background:var(--color-blue);
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
  }
  .result-question .rq-label{
    font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
    letter-spacing:1.5px;color:rgba(255,255,255,0.8);margin-bottom:6px;
  }
  .result-question .rq-text{
    font-family:var(--font-display);font-size:16px;font-style:italic;font-weight:700;
    color:#ffffff;line-height:1.4;
  }
  .example-note{
    font-family:var(--font-body);font-size:16px;color:var(--charcoal);
    line-height:1.6;margin:-10px 0 22px;padding-bottom:18px;
    border-bottom:1px solid var(--rule);
  }
  .example-note a{color:var(--forest);}
  .example-video-wrap{
    position:relative;width:100%;padding-top:56.25%;
    margin-bottom:24px;background:#000;border-radius:12px;overflow:hidden;
    border:1px solid var(--rule);
  }
  .example-video-wrap iframe{
    position:absolute;top:0;left:0;width:100%;height:100%;border:0;
  }
  .video-thumb-link{
    position:absolute;top:0;left:0;width:100%;height:100%;
    display:block;text-decoration:none;
  }
  .video-thumb-img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .video-thumb-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:68px;height:48px;transition:transform .15s ease;
  }
  .video-thumb-link:hover .video-thumb-play{transform:translate(-50%,-50%) scale(1.08);}
  .video-thumb-caption{
    position:absolute;bottom:10px;right:12px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;
    color:#fff;background:rgba(0,0,0,0.55);padding:4px 10px;border-radius:20px;
  }

  .settings-panel{
    position:fixed;z-index:710;top:0;right:0;
    max-height:80vh;overflow-y:auto;overflow-x:hidden;
    background:var(--parchment);border:1px solid var(--charcoal);border-radius:12px;
    box-shadow:0 10px 30px rgba(10,20,35,0.28), 0 2px 8px rgba(10,20,35,0.14);
  }
  .settings-panel:not(.hidden){animation:spPanelIn .2s cubic-bezier(0.2,0.8,0.3,1) both;}
  @keyframes spPanelIn{from{opacity:0;transform:translateY(-6px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}}
  .settings-panel .sp-head{
    background:var(--charcoal);padding:13px 16px;
    font-family:var(--font-display);font-size:15px;letter-spacing:0.3px;
    color:var(--on-accent);border-bottom:3px double var(--crimson);
    display:flex;justify-content:space-between;align-items:center;
  }
  .settings-panel .sp-head span{color:var(--on-accent);font-size:15px;}
  .settings-panel .sp-head #signalCount, .settings-panel .sp-head #timerStateTag{
    font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
    color:#ffffff;border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:3px 9px;
  }
  .sp-body{padding:16px 16px 14px;}
  #youtubePopover .sp-body{padding-bottom:8px;}
  .shortcut-group-label{
    font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:1.2px;
    color:var(--slate);margin:16px 0 8px;
  }
  .shortcut-group-label:first-child{margin-top:0;}
  .shortcut-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:9px 12px;font-family:var(--font-body);font-size:13px;color:var(--charcoal);
    background:#fbfaf5;border:1.5px solid #d9d4c4;border-radius:14px;
    box-shadow:0 3px 0 #d9d4c4;margin-bottom:8px;
  }
  .shortcut-row:last-child{margin-bottom:0;}
  .shortcut-row kbd{
    font-family:var(--font-mono);font-size:11px;font-weight:700;color:#ffffff;flex-shrink:0;
    background:var(--color-blue);border:1.5px solid var(--color-blue-shadow);
    border-radius:10px;padding:5px 10px;
    box-shadow:0 2px 0 var(--color-blue-shadow);
  }

  .signal-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;}
  .signal-row{
    display:flex;align-items:center;gap:10px;
    padding:9px 10px 9px 12px;background:#fbfaf5;
    border:1.5px solid #d9d4c4;border-left:4px solid var(--sig-color, var(--brass));
    border-radius:14px;margin-bottom:8px;
    box-shadow:0 3px 0 #d9d4c4;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .signal-row:hover{transform:translateX(2px);}
  .signal-row .sig-time{
    font-family:var(--font-mono);font-size:13px;font-weight:bold;
    color:var(--charcoal);min-width:46px;
  }
  .signal-row .sig-label{flex:1;font-size:13px;color:var(--charcoal);}
  .signal-row .sig-color{display:none;}
  .signal-row .sig-del{
    display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;
    background:#bf0e0e;border:1.5px solid #8b0b0b;border-radius:9px;cursor:pointer;color:#fff;
    font-size:14px;line-height:1;font-weight:700;padding:0;
    box-shadow:0 2px 0 #8b0b0b;
    transition:transform .12s;
  }
  .signal-row .sig-del:hover{transform:translateY(1px);box-shadow:0 1px 0 #8b0b0b;}
  .signal-row .sig-edit{
    display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;
    background:#49a705;border:1.5px solid #337404;border-radius:9px;cursor:pointer;color:#fff;
    padding:0;box-shadow:0 2px 0 #337404;
    transition:transform .12s;
  }
  .signal-row .sig-edit svg{width:13px;height:13px;display:block;}
  .signal-row .sig-edit:hover{transform:translateY(1px);box-shadow:0 1px 0 #337404;}

  .add-signal-form{
    display:grid;grid-template-columns:1fr 1fr;
    gap:10px 8px;align-items:end;
    padding-top:14px;border-top:1px dashed var(--rule);
  }
  .add-signal-form > div:nth-child(1){order:1;}
  .add-signal-form > div:nth-child(3){order:2;}
  .add-signal-form > div:nth-child(2){order:3;grid-column:1 / -1;}
  .add-signal-form > .btn-add{order:4;}
  .add-signal-form > .btn.ghost{order:5;}
  .add-signal-form .btn-add, .add-signal-form .btn.ghost{width:100%;}
  .add-signal-form input[type=text], .add-signal-form input[type=number]{
    font-family:var(--font-mono);font-size:13px;padding:7px 9px;
    border:1.5px solid #d9d4c4;border-radius:14px;background:#fbfaf5;color:var(--charcoal);
    box-shadow:0 3px 0 #d9d4c4;transition:border-color .15s;
  }
  .add-signal-form input[type=text]:focus, .add-signal-form input[type=number]:focus{
    outline:none;border-color:var(--brass);
  }
  .add-signal-form input[type=number]{width:100%;}
  .add-signal-form label.color-pick{
    display:flex;align-items:center;gap:6px;cursor:pointer;
    font-family:var(--font-mono);font-size:11px;color:var(--slate);
  }
  .add-signal-form input[type=color]{
    width:100%;height:34px;padding:2px;border:1.5px solid #d9d4c4;border-radius:14px;
    cursor:pointer;background:#fbfaf5;box-shadow:0 3px 0 #d9d4c4;
  }
  .btn-add{
    font-family:var(--font-body);font-size:13px;font-weight:700;
    padding:9px 16px;border-radius:var(--radius-md);border:1.5px solid var(--color-blue-shadow);
    background:var(--color-blue);color:#ffffff;cursor:pointer;white-space:nowrap;
    box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);
    transition:box-shadow .12s, transform .12s;
  }
  .btn-add:hover{background:var(--color-blue);}
  .btn-add:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));transition:none;}
  .sp-note{font-size:11px;font-family:var(--font-mono);color:var(--slate);margin-top:10px;}

  .preset-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--rule);}
  .preset-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--slate);margin-bottom:8px;}
  .preset-row{display:flex;flex-wrap:wrap;gap:8px;}

  .btn-preset{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;font-weight:700;
    padding:7px 14px;border-radius:var(--radius-md);border:1.5px solid var(--color-blue-shadow);
    background:var(--color-blue);color:#ffffff;cursor:pointer;
    box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);
    white-space:nowrap;transition:box-shadow .12s, transform .12s;
  }
  .btn-preset:hover{background:var(--color-blue);}
  .btn-preset:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));transition:none;}

  .bf-timing-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
  .bf-timing-btn{flex:1;min-width:130px;font-size:13px;padding:10px 12px;border:1px solid var(--rule);background:#ffffff;color:var(--charcoal);border-radius:10px;cursor:pointer;font-family:var(--font-body);
    box-shadow:0 var(--shadow-offset-sm) 0 rgba(11,42,74,0.22);
  }
  .bf-timing-btn:hover{border-color:var(--brass);background:rgba(11,42,74,0.06);}
  .bf-timing-btn.active{background:var(--brass);color:#fff;border-color:#0a446a;box-shadow:0 var(--shadow-offset-sm) 0 #0a446a;}
  .bf-timing-btn:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}

  #authGate .bf-timing-row{margin-bottom:10px;}
  #authGate .bf-timing-btn{
    background:transparent;font-weight:500;padding:9px 12px;
  }
  #authGate .bf-timing-btn:hover{background:rgba(0,0,0,0.05);border-color:var(--rule);}
  #authGate .bf-timing-btn.active{background:var(--brass);color:#fff;border-color:#0a446a;box-shadow:0 var(--shadow-offset-sm) 0 #0a446a;}
  .bf-custom-row{display:none;margin-bottom:14px;}
  .bf-custom-row.show{display:block;}
  .bf-custom-row input[type=datetime-local]{
    width:100%;font-family:var(--font-mono);font-size:13px;padding:8px 10px;
    border:1px solid var(--rule);border-radius:10px;background:#ffffff;color:var(--charcoal);
  }
  .bf-result{font-family:var(--font-body);color:var(--charcoal);line-height:1.55;font-size:14px;}
  .bf-result h4{
    font-family:var(--font-display);font-size:15.5px;letter-spacing:0.2px;
    margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule);color:var(--crimson-deep);
  }
  .bf-result h4:first-child{margin-top:0;}
  .bf-result ul{margin:0 0 4px;padding-left:20px;}
  .bf-result li{margin-bottom:7px;}
  .bf-result li strong{color:var(--crimson-deep);}
  .bf-result li a{color:var(--crimson-deep);text-decoration:none;border-bottom:1px solid var(--rule);}
  .bf-result li a:hover{border-bottom-color:var(--crimson-deep);}
  .bf-result p{margin:0 0 10px;}
  .bf-verified-badge{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.6px;text-transform:uppercase;
    color:var(--forest);border:1px solid var(--forest);border-radius:20px;padding:3px 10px;
    display:inline-block;margin-bottom:14px;
  }
  .bf-warning{
    background:#fcefd0;color:#735207;border:1px solid #f8d991;border-radius:14px;
    padding:10px 12px;margin-bottom:14px;font-size:0.88em;font-family:var(--font-body);
  }
  .bf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}

  .btn{
    font-family:var(--font-body);font-size:14px;font-weight:700;
    padding:11px 20px;border-radius:var(--radius-md);border:2px solid var(--color-blue-shadow);
    background:var(--color-blue);color:var(--on-accent);cursor:pointer;
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
    transition:background-color var(--ease-hover), box-shadow var(--ease-hover), transform 100ms ease-out;
    transform:translateY(0);
  }
  .btn:hover{background:var(--color-blue-hover);}
  .btn:active{box-shadow:none;transform:translateY(var(--shadow-offset-md));transition:none;}
  .btn.primary{background:var(--color-blue);border-color:var(--color-blue-shadow);
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
  }
  .btn.primary:hover{background:var(--color-blue-hover);}
  .btn.primary:active{box-shadow:none;transform:translateY(var(--shadow-offset-md));}
  .btn.ghost{
    background:transparent;color:var(--chrome-text);border:1.5px solid rgba(255,255,255,0.4);
    box-shadow:0 var(--shadow-offset-sm) 0 rgba(0,0,0,0.4);
  }
  .btn.ghost:hover{background:rgba(0,0,0,0.18);border-color:rgba(255,255,255,0.7);}

  .ballot .btn.ghost, .dl-modal-card:not(.prep-card-regular):not(.prep-card-intro):not(.prep-card-body):not(.prep-card-roughdraft) .btn.ghost,
  .settings-panel .btn.ghost, .goal-modal .btn.ghost, .history-card .btn.ghost, .demo-panel .btn.ghost{
    color:var(--charcoal);border-color:rgba(11,42,74,0.22);
    box-shadow:0 var(--shadow-offset-sm) 0 rgba(11,42,74,0.22);
  }
  .ballot .btn.ghost:hover, .dl-modal-card:not(.prep-card-regular):not(.prep-card-intro):not(.prep-card-body):not(.prep-card-roughdraft) .btn.ghost:hover,
  .settings-panel .btn.ghost:hover, .goal-modal .btn.ghost:hover, .history-card .btn.ghost:hover, .demo-panel .btn.ghost:hover{
    background:rgba(11,42,74,0.1);border-color:rgba(11,42,74,0.35);
  }
  .btn.ghost:active{transform:translateY(var(--shadow-offset-sm));box-shadow:none;}
  .btn:disabled{opacity:0.45;cursor:not-allowed;box-shadow:none;transform:none;}
  .btn:focus-visible{outline:3px solid var(--color-blue-accent);outline-offset:2px;}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}

  .field-block{margin-top:18px;}
  .field-block label{
    display:block;font-family:var(--font-mono);font-size:11px;
    text-transform:uppercase;letter-spacing:1px;color:var(--slate);margin-bottom:6px;
  }
  .field-block input[type=password], .field-block input[type=text]{
    width:100%;font-family:var(--font-mono);font-size:13px;
    padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:#ffffff;color:var(--charcoal);
  }
  .field-hint{font-size:11px;color:var(--slate);margin-top:5px;}
  .field-error{font-size:12px;color:var(--crimson);margin-top:6px;display:none;}

  #signalOverlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    pointer-events:none;opacity:0;transition:opacity 0.25s ease;
  }
  #signalOverlay.visible{opacity:1;}
  .overlay-backdrop{
    position:absolute;inset:0;
    background:rgba(8,14,24,0.78);
  }
  .overlay-card{
    position:relative;z-index:1;
    background:var(--charcoal);
    border:3px double #fff;
    border-radius:12px;
    padding:38px 58px;
    text-align:center;
    min-width:260px;
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
    animation:popIn 0.32s cubic-bezier(0.22,1.4,0.4,1) both;
  }
  @keyframes popIn{from{opacity:0;transform:scale(0.85) translateY(6px);}to{opacity:1;transform:scale(1) translateY(0);}}
  .overlay-card .ov-label{
    font-family:var(--font-mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;
    color:rgba(255,255,255,0.55);margin-bottom:10px;
  }
  .overlay-card .ov-time{
    font-family:var(--font-display);font-size:74px;font-weight:bold;line-height:1;
    letter-spacing:0.5px;
  }
  .overlay-card .ov-sub{
    font-family:var(--font-body);font-size:15px;
    margin-top:12px;opacity:0.85;
  }
  .overlay-card .ov-warn{
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
    margin-top:10px;color:rgba(255,255,255,0.5);
  }
  .overlay-dismiss{
    position:absolute;top:10px;right:14px;
    background:none;border:none;color:rgba(255,255,255,0.4);
    font-size:20px;cursor:pointer;pointer-events:auto;
  }
  .overlay-dismiss:hover{color:#fff;}

  .processing{
    display:flex;flex-direction:column;align-items:center;
    padding:44px 32px 40px;text-align:center;gap:14px;
    max-width:640px;width:100%;margin:0 auto;box-sizing:border-box;
  }
  .blot{
    width:52px;height:52px;border-radius:50% 50% 50% 4px;
    background:var(--crimson);
    animation:breathe 1.8s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes breathe{0%,100%{transform:scale(1) rotate(-2deg);}50%{transform:scale(0.86) rotate(3deg);}}
  .processing .status{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--charcoal);letter-spacing:0.2px;}
  .processing .sub{font-size:13.5px;color:var(--slate);max-width:420px;line-height:1.5;}
  .processing .sub:empty{display:none;}

  .proc-phase-label{
    font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--crimson);margin-top:6px;min-height:13px;
  }

  .proc-timeline{width:100%;max-width:560px;margin-top:18px;}
  .proc-timeline-track{
    position:relative;height:26px;border-radius:16px;
    background:var(--rule);overflow:visible;
    border:3px solid var(--ink);
    margin-bottom:48px;
  }
  .proc-timeline-fill{
    position:absolute;top:0;left:0;height:100%;width:0%;border-radius:14px;
    background:var(--crimson);
    transition:width .35s cubic-bezier(.25,.8,.35,1), background .35s linear;
  }
  .proc-tick{
    position:absolute;top:0;transform:translateX(-50%);
    height:100%;display:flex;flex-direction:column;align-items:center;z-index:2;
  }

  .proc-tick-line{
    width:2.5px;height:100%;
    background:var(--ink);opacity:0.55;
  }

  .proc-tick-check{
    position:absolute;top:calc(100% + 6px);left:50%;width:15px;height:15px;
    border-radius:50%;background:var(--crimson-deep);
    display:flex;align-items:center;justify-content:center;color:#ffffff;
    opacity:0;transform:translateX(-50%) translateY(-3px) scale(0.6);
    transition:opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .proc-tick-check svg{width:9px;height:9px;}
  .proc-tick-label{
    position:absolute;top:calc(100% + 26px);left:50%;transform:translateX(-50%);
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.3px;text-transform:uppercase;
    color:var(--slate);white-space:nowrap;transition:color .25s ease, font-weight .25s ease;
  }

  .proc-tick.active .proc-tick-label{color:var(--charcoal);font-weight:700;animation:procLabelPulse 1.6s ease-in-out infinite;}
  @keyframes procLabelPulse{0%,100%{opacity:1;}50%{opacity:0.6;}}

  .proc-tick.done .proc-tick-check{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  .proc-tick.done .proc-tick-label{color:var(--crimson-deep);font-weight:500;}

  .processing .progress-phrase{margin-top:2px;font-size:14px;font-weight:700;color:var(--crimson);}

  .stamp-row{
    display:flex;justify-content:center;align-items:stretch;
    gap:16px;flex-wrap:wrap;margin:8px 0 26px;
  }
  .verdict-stamp, .rank-stamp{
    border:1.5px solid var(--color-blue-shadow);color:#ffffff;background:var(--color-blue);
    width:fit-content;margin:0;padding:10px 26px;
    text-align:center;border-radius:var(--radius-md);
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
  }
  .verdict-stamp .label, .rank-stamp .label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.8);}
  .verdict-stamp .num, .rank-stamp .num{font-family:var(--font-display);font-size:34px;font-weight:bold;line-height:1.1;}
  .verdict-stamp .num small{font-size:18px;}
  .rank-stamp .num small{font-size:14px;}
  .rank-stamp{display:flex;flex-direction:column;justify-content:center;}
  .stamp-tier-1{background:#116daa;border-color:#0b446a;box-shadow:0 var(--shadow-offset-md) 0 #0b446a;}
  .stamp-tier-2{background:#49a705;border-color:#337404;box-shadow:0 var(--shadow-offset-md) 0 #337404;}
  .stamp-tier-3{background:#c99a10;border-color:#8f6d0a;box-shadow:0 var(--shadow-offset-md) 0 #8f6d0a;}
  .stamp-tier-4{background:#d9720b;border-color:#a15206;box-shadow:0 var(--shadow-offset-md) 0 #a15206;}
  .stamp-tier-5{background:#bf0e0e;border-color:#8b0b0b;box-shadow:0 var(--shadow-offset-md) 0 #8b0b0b;}

  .category{
    border-top:1px solid var(--rule);padding:20px 0;
    display:grid;grid-template-columns:64px 1fr;gap:16px;
  }
  .category:first-of-type{border-top:none;}
  .badge-wrap{
    position:relative;width:64px;height:64px;border-radius:16px;
    background:var(--bc, var(--score-cyan));
    box-shadow:0 var(--shadow-offset-sm) 0 var(--bc-dark, rgba(0,0,0,0.4));
    border:1.5px solid var(--bc-dark, rgba(0,0,0,0.28));
    box-sizing:border-box;
  }
  .badge-wrap .score{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:bold;font-size:25px;line-height:1;
  }
  .badge-wrap .score small{font-family:var(--font-mono);font-weight:normal;font-size:10px;color:rgba(255,255,255,0.85);margin-top:2px;}

  .rank-explanation{
    max-width:520px;margin:0 auto 26px;font-size:13px;line-height:1.6;
    color:var(--charcoal);text-align:center;font-style:italic;
  }
  .badge-wrap .score{color:#ffffff;}

  .cat-name{font-family:var(--font-display);font-size:17px;margin:0 0 10px;}
  .cat-row{
    margin-bottom:12px;font-size:13.5px;line-height:1.6;
    padding:14px 16px;border-radius:var(--radius-md);color:#ffffff;
  }
  .cat-row .tag{
    font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
    letter-spacing:1px;color:rgba(255,255,255,0.8);display:block;margin-bottom:6px;
  }
  .cat-row.worked{background:#49a705;border:1.5px solid #337404;box-shadow:0 var(--shadow-offset-sm) 0 #337404;}
  .cat-row.flaws{background:#bf0e0e;border:1.5px solid #8b0b0b;box-shadow:0 var(--shadow-offset-sm) 0 #8b0b0b;}
  .cat-row.evidence{
    font-family:var(--font-mono);font-size:12.5px;
    background:#c99a10;border:1.5px solid #8f6d0a;box-shadow:0 var(--shadow-offset-sm) 0 #8f6d0a;
  }
  .cat-row.evidence strong{color:#ffffff;font-weight:700;}

  .fc-claim-row{color:var(--charcoal);}
  .fc-claim-row strong{color:var(--charcoal);}

  .drill{
    margin-top:24px;border:1px dashed var(--charcoal);
    padding:16px 18px;border-radius:10px;
  }
  .drill .tag{
    font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
    letter-spacing:1.5px;color:var(--crimson);display:block;margin-bottom:6px;
  }
  .drill p{margin:0;font-size:14px;line-height:1.6;}
  .drill.feedback-box{
    border:1.5px solid var(--color-blue-shadow);border-style:solid;background:var(--color-blue);
    padding:22px 26px;border-radius:var(--radius-md);
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
  }
  .drill.feedback-box .tag{color:rgba(255,255,255,0.8);}
  .drill.feedback-box p{color:#ffffff;font-size:15px;}

  .transcript-section{
    margin-top:28px;
    border-top:2px solid var(--charcoal);
    padding-top:18px;
  }
  .transcript-section .ts-head{
    font-family:var(--font-display);font-size:16px;font-weight:bold;
    margin:0 0 4px;
    display:flex;align-items:center;gap:10px;
  }
  .transcript-section .ts-meta{
    font-family:var(--font-mono);font-size:11px;color:var(--slate);
    text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;
  }
  .transcript-body{
    white-space:pre-wrap;
    font-family:var(--font-mono);
    font-size:13px;
    line-height:1.75;
    background:#ffffff;
    border:1px solid var(--rule);
    padding:18px;
    border-radius:10px;
    color:var(--charcoal);

    background-image:repeating-linear-gradient(
      to bottom,
      transparent,
      transparent calc(1.75em - 1px),
      rgba(199,212,227,0.4) calc(1.75em - 1px),
      rgba(199,212,227,0.4) 1.75em
    );
    background-size:100% 1.75em;
  }

  .raw-fallback{font-size:13.5px;line-height:1.6;}
  .raw-fallback h4{font-family:var(--font-display);margin:18px 0 6px;}
  .raw-fallback strong{color:var(--crimson);}

  .ann-legend{
    display:flex;flex-wrap:wrap;align-items:center;gap:14px;
    font-family:var(--font-mono);font-size:10.5px;color:var(--slate);
    margin-bottom:10px;
  }
  .ann-legend-item{display:flex;align-items:center;gap:5px;}
  .ann-swatch{
    width:11px;height:11px;border-radius:10px;display:inline-block;
    border:1px solid rgba(0,0,0,0.25);
  }
  .ann-swatch.ann-red{background:#db1010;}
  .ann-swatch.ann-blue{background:#1276b9;}
  .ann-swatch.ann-green{background:#49a705;}
  .ann-swatch.ann-yellow{background:#d1960d;}
  .ann-legend-hint{font-style:italic;color:var(--slate);opacity:0.8;}

  .ts-section{margin:0 0 18px;}
  .ts-section:last-child{margin-bottom:0;}
  .ts-section-label{
    font-family:var(--font-mono);font-size:10px;font-weight:bold;
    text-transform:uppercase;letter-spacing:1.3px;color:#fff;
    background:var(--charcoal);display:inline-block;
    padding:2px 9px;border-radius:10px;margin-bottom:8px;
  }
  .ts-section-text{padding-left:22px;border-left:2px solid var(--rule);}

  .ann-comment{
    cursor:pointer;border-bottom:2px solid;border-radius:10px;
    padding-bottom:1px;transition:background-color .15s ease;
  }
  .ann-comment:hover{filter:brightness(0.97);}
  .ann-comment.ann-red{border-color:#db1010;background:rgba(192,57,43,0.10);}
  .ann-comment.ann-blue{border-color:#1276b9;background:rgba(35,86,168,0.10);}
  .ann-comment.ann-green{border-color:#49a705;background:rgba(47,125,60,0.12);}
  .ann-comment.ann-yellow{border-color:#d1960d;background:rgba(202,163,20,0.16);}
  .ann-comment.ann-active{filter:brightness(0.9);}

  .comment-popover{
    position:fixed;z-index:1300;max-width:300px;
    background:#ffffff;border:1px solid var(--charcoal);
    border-radius:12px;
    padding:10px 13px;font-size:12.5px;line-height:1.5;
  }
  .comment-popover.hidden{display:none;}
  .comment-popover .cp-tag{
    font-family:var(--font-mono);font-size:9.5px;font-weight:bold;
    text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;
    display:inline-block;padding:1px 7px;border-radius:10px;color:#fff;
  }
  .comment-popover .cp-tag.tag-red{background:#db1010;}
  .comment-popover .cp-tag.tag-blue{background:#1276b9;}
  .comment-popover .cp-tag.tag-green{background:#49a705;}
  .comment-popover .cp-tag.tag-yellow{background:#b07e0b;}
  .comment-popover .cp-text{color:var(--charcoal);}
  .comment-popover .cp-arrow{
    position:absolute;top:-6px;left:18px;width:11px;height:11px;
    background:#ffffff;border-left:1px solid var(--charcoal);
    border-top:1px solid var(--charcoal);transform:rotate(45deg);
  }
  .comment-popover.cp-flip .cp-arrow{
    top:auto;bottom:-6px;
    border-left:none;border-top:none;
    border-right:1px solid var(--charcoal);
    border-bottom:1px solid var(--charcoal);
  }

  .dl-modal{
    position:fixed;inset:0;z-index:300;
    background:rgba(11,42,74,0.45);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
  }
  .dl-modal.hidden{display:none;}
  .dl-modal-card{
    background:#ffffff;border:none;
    border-radius:var(--radius-lg);padding:24px 26px;max-width:340px;width:100%;
    box-shadow:0 8px 24px rgba(0,0,0,0.16);
  }
  .dl-modal-head{font-family:var(--font-display);font-size:18px;font-weight:bold;margin:0 0 6px;}
  .dl-modal-sub{font-size:13px;color:var(--slate);margin:0 0 18px;}
  .dl-modal-btn{display:block;width:100%;margin-bottom:10px;text-align:center;}
  .dl-modal-btn:last-child{margin-bottom:0;}

  .prep-card-regular, .prep-card-intro, .prep-card-body, .prep-card-roughdraft{
    --prep-ink:#07304b;
    border-width:2px;border-top-width:6px;border-radius:14px;
    box-shadow:0 10px 28px rgba(22,40,60,0.22);
    background:#ffffff;
    max-width:360px;width:100%;text-align:center;
    padding:22px 24px 20px;
    border-color:var(--prep-ink);
  }
  .prep-card-regular{ --prep-accent:#116daa;--prep-accent-dark:#0b446a;--prep-accent-hover:#0e5788; }
  .prep-card-intro{ --prep-accent:#bf0e0e;--prep-accent-dark:#8b0b0b;--prep-accent-hover:#9b0c0c; }
  .prep-card-body{ --prep-accent:#a7780b;--prep-accent-dark:#7a5808;--prep-accent-hover:#8a6309; }

  .prep-card-roughdraft{ --prep-accent:#116daa;--prep-accent-dark:#0b446a;--prep-accent-hover:#0e5788; }

  .prep-card-regular .dl-modal-head, .prep-card-intro .dl-modal-head,
  .prep-card-body .dl-modal-head, .prep-card-roughdraft .dl-modal-head{
    color:var(--prep-ink);margin-bottom:14px;
  }
  .prep-card-regular .timer-display, .prep-card-intro .timer-display,
  .prep-card-body .timer-display, .prep-card-roughdraft .timer-display{
    color:var(--prep-ink);font-size:42px;font-weight:900;margin:4px 0 12px;
  }
  .prep-card-regular .timer-display.warn, .prep-card-intro .timer-display.warn,
  .prep-card-body .timer-display.warn, .prep-card-roughdraft .timer-display.warn{
    color:var(--crimson);
  }
  .prep-card-regular .progress-phrase, .prep-card-intro .progress-phrase,
  .prep-card-body .progress-phrase, .prep-card-roughdraft .progress-phrase{
    color:var(--prep-ink);margin:0 0 12px;
  }
  .prep-card-regular .timer-btn-row, .prep-card-intro .timer-btn-row,
  .prep-card-body .timer-btn-row, .prep-card-roughdraft .timer-btn-row{
    justify-content:center;margin-bottom:10px;
  }
  .prep-card-regular .timer-btn-row .btn.ghost, .prep-card-intro .timer-btn-row .btn.ghost,
  .prep-card-body .timer-btn-row .btn.ghost, .prep-card-roughdraft .timer-btn-row .btn.ghost{
    border-color:rgba(0,0,0,0.4);color:var(--prep-ink);
  }
  .prep-card-regular .timer-btn-row .btn.ghost:hover, .prep-card-intro .timer-btn-row .btn.ghost:hover,
  .prep-card-body .timer-btn-row .btn.ghost:hover, .prep-card-roughdraft .timer-btn-row .btn.ghost:hover{
    background:rgba(22,40,60,0.08);
  }
  .prep-card-regular .dl-modal-btn, .prep-card-intro .dl-modal-btn,
  .prep-card-body .dl-modal-btn, .prep-card-roughdraft .dl-modal-btn,
  .prep-card-roughdraft #roughDraftPrepBeginBtn{
    background:var(--prep-accent);border-color:var(--prep-accent-dark);color:#fff;
    margin-top:4px;transition:background .15s ease,transform .1s ease;
  }
  .prep-card-regular .dl-modal-btn:hover, .prep-card-intro .dl-modal-btn:hover,
  .prep-card-body .dl-modal-btn:hover, .prep-card-roughdraft .dl-modal-btn:hover,
  .prep-card-roughdraft #roughDraftPrepBeginBtn:hover{
    background:var(--prep-accent-hover);
  }
  .prep-card-regular .dl-modal-btn:active, .prep-card-intro .dl-modal-btn:active,
  .prep-card-body .dl-modal-btn:active, .prep-card-roughdraft .dl-modal-btn:active,
  .prep-card-roughdraft #roughDraftPrepBeginBtn:active{
    transform:scale(0.97);
  }
  .rd-prep-row{ justify-content:center;align-items:center;gap:10px;margin-bottom:12px; }
  .prep-modal-regular, .prep-modal-intro, .prep-modal-body, .prep-modal-roughdraft{
    z-index:1600;background:rgba(10,14,20,0.65);
  }

  .delivery-section{margin-top:28px;border-top:2px solid var(--charcoal);padding-top:18px;}
  .results-tab-panel{margin-top:20px;}
  .results-tab-panel .delivery-section{margin-top:0;border-top:none;padding-top:0;}
  .delivery-section .ts-head{font-family:var(--font-display);font-size:16px;font-weight:bold;margin:0 0 4px;display:flex;align-items:center;gap:10px;}
  .delivery-section .ts-meta{font-family:var(--font-mono);font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
  .delivery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px;}
  .delivery-stat{
    background:var(--color-blue);border:1.5px solid var(--color-blue-shadow);border-radius:var(--radius-md);
    padding:10px 12px;box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
  }
  .delivery-stat .dv-label{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.75);display:block;margin-bottom:5px;}
  .delivery-stat .dv-val{font-family:var(--font-display);font-size:19px;color:#ffffff;font-weight:bold;}
  .delivery-stat .dv-sub{font-size:10.5px;color:rgba(255,255,255,0.85);margin-top:3px;line-height:1.4;}
  .delivery-note{font-family:var(--font-mono);font-size:11px;color:var(--slate);margin-top:12px;font-style:italic;line-height:1.5;}

  .tw{
    cursor:pointer;border-radius:10px;transition:background-color .1s ease, color .1s ease;
  }
  .tw:hover{background:rgba(16,24,36,0.10);}
  .tw.tw-active{
    background:var(--charcoal);color:#f1f5f7;
    box-shadow:0 0 0 1px var(--charcoal);
  }
  .transcript-highlight-demo .tw{cursor:default;}
  .transcript-highlight-demo .tw:hover{background:none;}

  .playback-section{margin-top:28px;border-top:2px solid var(--charcoal);padding-top:18px;}
  .playback-section .ts-head{font-family:var(--font-display);font-size:16px;font-weight:bold;margin:0 0 4px;}
  .playback-section .ts-meta{font-family:var(--font-mono);font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
  .playback-stage{background:var(--ink);border-radius:12px;padding:10px;border:1px solid var(--ink-line);}
  .playback-frame{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/10;}
  .playback-frame video{width:100%;height:100%;object-fit:cover;display:block;}
  .playback-frame #exampleYtPlayer,
  .playback-frame #exampleYtPlayer iframe{width:100% !important;height:100% !important;display:block;}
  .pb-play-btn{
    position:absolute;inset:0;width:100%;height:100%;
    background:rgba(8,20,36,0.28);border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:#f1f5f7;padding:0;transition:background-color .15s ease;
  }
  .pb-play-btn:hover{background:rgba(8,20,36,0.4);}
  .pb-play-btn .pb-icon-circle{
    width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,0.55);
    display:flex;align-items:center;justify-content:center;
    border:2px solid rgba(255,255,255,0.85);
  }
  .pb-play-btn.pb-playing{background:transparent;}
  .pb-play-btn.pb-playing .pb-icon-circle{opacity:0;pointer-events:none;}
  .pb-play-btn.pb-playing:hover .pb-icon-circle{opacity:1;}
  .pb-scrub-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding:0 2px;}
  .pb-time{font-family:var(--font-mono);font-size:11px;color:var(--chrome-text-dim);min-width:36px;text-align:center;}
  .pb-scrub{
    flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:10px;
    background:var(--ink-line);outline:none;cursor:pointer;
  }
  .pb-scrub::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
    background:var(--brass);cursor:pointer;border:2px solid var(--on-accent);
  }
  .pb-scrub::-moz-range-thumb{
    width:13px;height:13px;border-radius:50%;background:var(--brass);cursor:pointer;border:2px solid var(--on-accent);
  }
  .sync-fix-row{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 2px;flex-wrap:wrap;}
  .sync-fix-btn{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.3px;
    border:1px solid var(--ink-line);background:rgba(255,255,255,0.04);color:var(--chrome-text-dim);
    border-radius:20px;padding:5px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
    transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;
  }
  .sync-fix-btn:hover{color:var(--chrome-text);border-color:var(--brass);background:rgba(0,0,0,0.15);}
  .sync-fix-btn.armed{background:var(--brass);color:var(--on-accent);border-color:#0a446a;box-shadow:0 var(--shadow-offset-sm) 0 #0a446a;}
  .sync-fix-btn.armed:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}
  .sync-fix-hint{font-family:var(--font-mono);font-size:11px;color:var(--brass);}

  .error-box{
    border:1px solid #bf0e0e;background:rgba(163,50,42,0.07);
    color:#920b0b;padding:14px 16px;border-radius:10px;font-size:13px;margin-top:14px;
  }
  .legal{text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--chrome-text-dim);margin-top:30px;letter-spacing:0.3px;}
  .hidden{display:none !important;}

  .toast-container{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    z-index:600;display:flex;flex-direction:column;gap:8px;align-items:center;
    pointer-events:none;
  }
  .toast{
    background:var(--charcoal);color:var(--on-accent);
    font-family:var(--font-body);font-size:13px;font-weight:500;
    padding:10px 18px;border-radius:20px;box-shadow:0 6px 20px var(--shadow);
    border:1px solid rgba(255,255,255,0.08);
    opacity:0;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease;
    display:flex;align-items:center;gap:8px;
  }
  .toast.show{opacity:1;transform:translateY(0);}
  .toast svg{flex-shrink:0;color:var(--score-green);}

  .hint-banner{
    position:fixed;top:auto;right:18px;bottom:18px;left:auto;
    width:250px;max-height:none;z-index:400;
  }
  .hint-banner .sp-body{
    font-family:var(--font-body);font-size:12.5px;color:var(--charcoal);line-height:1.5;
  }
  .hint-banner .sp-body kbd{
    font-family:var(--font-mono);font-size:11px;color:var(--charcoal);
    background:var(--parchment-deep);border:1px solid var(--rule);border-bottom-width:2px;
    border-radius:12px;padding:2px 7px;
  }
  .hint-banner-close{
    position:absolute;top:8px;right:10px;background:none;border:none;
    color:rgba(255,255,255,0.6);cursor:pointer;font-size:16px;line-height:1;padding:0;
  }
  .hint-banner-close:hover{color:#fff;}
  @media(max-width:600px){ .hint-banner{left:14px;right:14px;width:auto;bottom:14px;} }

  .print-brand{display:none;}

  .export-menu-wrap{position:relative;display:inline-block;}
  .export-menu{
    position:fixed;top:0;left:0;right:auto;
    width:230px;max-height:none;z-index:600;
  }
  .export-menu .sp-body{padding:8px;display:flex;flex-direction:column;gap:6px;}
  .export-item{
    display:flex;align-items:center;gap:10px;width:100%;
    background:none;border:none;text-align:left;cursor:pointer;
    font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--charcoal);
    padding:9px 10px;border-radius:12px;transition:background .12s;
  }
  .export-item:hover{background:rgba(11,42,74,0.1);}
  .export-item svg{flex-shrink:0;color:var(--slate);}

  .nav-drawer-head{
    position:sticky;top:0;z-index:700;
    width:100%;
    background:var(--charcoal);
    padding:14px 16px;flex-shrink:0;
    display:flex;align-items:center;gap:10px;
    border-bottom:2px solid var(--crimson);
  }
  .nav-drawer-user{
    display:flex;flex-direction:column;gap:6px;min-width:0;
  }
  .nav-drawer-username{
    font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:0.3px;
    color:#ffffff;background:none;border:none;padding:0;text-align:left;line-height:1.1;
    cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;
    transition:opacity .15s ease;
  }
  .nav-drawer-username:hover{opacity:0.8;}
  .nav-drawer-username:active{opacity:0.6;}
  .nav-drawer-email{
    font-family:var(--font-mono);font-size:10.5px;color:rgba(255,255,255,0.6);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;
  }
  .nav-hamburger-fab{
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;
    color:#ffffff;cursor:pointer;
    box-shadow:none;
    transition:opacity .15s, transform .15s;
  }
  .nav-hamburger-fab:hover{opacity:0.8;}
  .nav-hamburger-fab svg{transition:opacity .15s;}

  .nav-hamburger-persistent{
    position:fixed;top:16px;left:16px;z-index:700;
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--charcoal);border:none;
    color:#ffffff;cursor:pointer;
    box-shadow:none;
    transition:opacity .15s;
  }
  .nav-hamburger-persistent:hover{opacity:0.8;}

  .nav-drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:690;
    width:270px;max-width:82vw;
    background:var(--parchment);
    box-shadow:none;
    transform:translateX(0);pointer-events:auto;
    transition:transform .3s cubic-bezier(.2,.8,.25,1);
    display:flex;flex-direction:column;overflow-y:auto;
  }
  .nav-drawer.nav-drawer-collapsed{transform:translateX(-100%);pointer-events:none;}

  .nav-drawer-close{
    background:none;border:none;color:var(--on-accent);cursor:pointer;
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:background .12s;
  }
  .nav-drawer-close:hover{background:rgba(255,255,255,0.12);}
  .nav-menu-body{padding:12px;display:flex;flex-direction:column;gap:10px;}
  .nav-menu-item{
    display:flex;align-items:center;gap:14px;width:100%;
    background:none;border:2px solid transparent;text-align:left;cursor:pointer;
    font-family:var(--font-body);font-size:14.5px;font-weight:700;color:var(--charcoal);
    padding:13px 12px;border-radius:var(--radius-sm);transition:background-color var(--ease-hover);
  }
  .nav-menu-item:hover{background:rgba(11,42,74,0.1);}
  .nav-menu-item svg{flex-shrink:0;color:var(--slate);}
  .nav-menu-item:hover svg{color:var(--charcoal);}
  .nav-menu-item.active{background:var(--color-blue);color:#ffffff;border-color:var(--color-blue-shadow);box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);}
  .nav-menu-item.active svg{color:#ffffff;}
  .nav-menu-item.active:hover{background:var(--color-blue);}
  .nav-menu-divider{height:1px;background:var(--rule);margin:8px 6px;}

  .nav-signout-btn{
    width:calc(100% - 12px);margin:4px 6px 6px;
    text-align:center;
  }

  @media print{
    @page{ margin:0.6in; }
    *{ box-shadow:none !important; text-shadow:none !important; }
    html,body{background:#ffffff !important; height:auto !important; overflow:visible !important;}
    body{color:#07304b !important; display:block !important; min-height:0 !important;}

    header.topbar, .side-words, .toast-container, .hint-banner,
    .settings-panel, #dlModal, .comment-popover,
    #view-record, .flight, .actions, .export-menu,
    .ann-legend-hint, .mode-switch-row{
      display:none !important;
    }
    #view-results .delivery-section.hidden{ display:none !important; }
    .results-tab-panel.hidden{ display:block !important; }

    main{
      display:block !important; max-width:none !important; width:100% !important;
      margin:0 !important; padding:0 !important; height:auto !important;
    }
    .ballot{
      display:block !important; visibility:visible !important;
      background:#ffffff !important; color:#07304b !important;
      max-width:none !important; width:100% !important; height:auto !important;
      box-shadow:none !important; border:none !important;
      border-radius:0; padding:0; overflow:visible !important;
    }
    .ballot::before{ display:none !important; }
    .ballot-body{ display:block !important; padding:0 !important; height:auto !important; }

    .print-brand{
      display:flex !important; visibility:visible !important;
      align-items:center; gap:8px;
      font-family:Georgia,'Iowan Old Style',serif; font-size:22px; font-weight:700;
      color:#123a63 !important; margin:0 0 12px 0; opacity:1 !important;
    }
    .print-brand svg{ display:inline-block !important; width:28px !important; height:26px !important; }
    .print-brand-name{ letter-spacing:0.3px; display:inline-block !important; }

    .ballot-head{
      display:flex !important; visibility:visible !important;
      border-bottom:2px solid #0b446a; padding-bottom:10px; margin-bottom:16px;
      flex-wrap:wrap; gap:4px 20px; align-items:baseline;
    }
    .ballot-title{ color:#0b446a !important; }
    .field{ color:#07304b !important; }
    .field b{ color:#1483cd !important; }

    .result-question{ border:1px solid #b3dcf7; background:#eff3f6 !important; }
    .rq-label{ color:#1483cd !important; }
    .rq-text{ color:#07304b !important; }

    .delivery-section{ break-inside:avoid; }
    .ts-head{ color:#0b446a !important; }
    .ts-meta{ color:#1483cd !important; }

    #resultsContent{ break-inside:auto; }
    .cat-name{ color:#0b446a !important; break-after:avoid; }
    .cat-row{ break-inside:avoid; }
    .cat-row .tag{ color:#1483cd !important; }

    .ann-legend{ border:1px solid #b3dcf7 !important; background:#eff3f6 !important; }
    .ann-legend-item{ color:#07304b !important; }

    .transcript-section{ break-before:page; }
    .transcript-body{ color:#07304b !important; }
    .ts-section-text{ orphans:3; widows:3; }

    .ann-comment{
      text-decoration:none !important; cursor:default;
      background:transparent !important; padding:0 !important;
    }
    .ann-comment.ann-red{ color:#9d0c0c !important; }
    .ann-comment.ann-blue{ color:#0c4f7c !important; }
    .ann-comment.ann-green{ color:#337504 !important; }
    .ann-comment.ann-yellow{ color:#7f5b08 !important; }
    .ann-comment::after{
      content:" [" attr(data-comment) "] ";
      font-style:italic; font-size:0.85em; color:#1483cd !important;
      font-family:var(--font-mono);
    }
  }

  @media(max-width:600px){
    .ballot-head-top{flex-direction:column;align-items:stretch;padding-right:0;}
    .mode-switch-hint{width:auto;max-width:none;margin-top:36px;margin-right:0;margin-left:0;}
    .category{grid-template-columns:48px 1fr;}
    .badge-wrap{width:48px;height:48px;}
    .badge-wrap svg{width:48px;height:48px;}
    .badge-wrap .score{font-size:20px;}
    .add-signal-form{grid-template-columns:1fr 1fr;}
    .overlay-card{padding:28px 30px;}
    .overlay-card .ov-time{font-size:52px;}
  }

  .streak-fab{
    position:fixed;top:16px;right:16px;z-index:700;
    display:flex;align-items:center;gap:7px;
    padding:9px 16px 9px 11px;border-radius:20px;border:none;cursor:pointer;
    background:rgba(0,0,0,0.28);color:#ffffff;
    transition:opacity .15s, transform .15s, background .15s;
  }
  .streak-fab:hover{opacity:0.85;}
  .streak-fab svg{color:inherit;flex-shrink:0;width:29px;height:29px;}
  .streak-fab-count{font-family:var(--font-display);font-size:20px;font-weight:900;line-height:1;}

  #streakFabIcon{overflow:visible;}
  #streakFabIcon .flame-layer{transform-box:fill-box;transform-origin:50% 85%;}
  #streakFabIcon .flame-sway{transform-box:fill-box;transform-origin:50% 100%;}

  #streakFabIcon .flame-outer{fill:#ff8a2b;}
  #streakFabIcon .flame-mid{fill:#ffab4d;transform:translateY(3.2px) scale(1.14);}

  #streakFabIcon .flame-inner{fill:#ffcf4d;transform:translateY(2.2px) scale(1.2);}
  #streakFabIcon .flame-core{fill:#fff6d8;transform:translateY(2.6px) scale(1.3);}
  #streakFabIcon .flame-spark{fill:#f7d688;opacity:0;transform-box:fill-box;transform-origin:50% 50%;}

  #streakFabIcon:not(.flame-live) .flame-outer{fill:#9aa0a8;}
  #streakFabIcon:not(.flame-live) .flame-mid{fill:#b7bcc2;}
  #streakFabIcon:not(.flame-live) .flame-inner{fill:#cfd2d6;}
  #streakFabIcon:not(.flame-live) .flame-core{fill:#e6e8ea;}

  #streakFabIcon.flame-live .flame-sway{animation:flameSway 2.6s ease-in-out infinite;}
  #streakFabIcon.flame-live .flame-outer{animation:flameOuter 1.85s ease-in-out infinite;}
  #streakFabIcon.flame-live .flame-mid{animation:flameMid 1.35s ease-in-out infinite;animation-delay:-0.4s;}
  #streakFabIcon.flame-live .flame-inner{animation:flameInner 0.95s ease-in-out infinite;animation-delay:-0.15s;}
  #streakFabIcon.flame-live .flame-core{animation:flameCore 0.7s ease-in-out infinite;animation-delay:-0.3s;}
  #streakFabIcon.flame-live .flame-spark-1{animation:flameSpark 2.2s ease-in infinite;animation-delay:.3s;}
  #streakFabIcon.flame-live .flame-spark-2{animation:flameSpark 1.9s ease-in infinite;animation-delay:1.1s;}
  #streakFabIcon.flame-live .flame-spark-3{animation:flameSpark 2.5s ease-in infinite;animation-delay:1.8s;}

  @keyframes flameSway{
    0%{transform:rotate(0deg);}
    9%{transform:rotate(-1.4deg);}
    20%{transform:rotate(0.6deg);}
    33%{transform:rotate(-2.1deg);}
    47%{transform:rotate(1.1deg);}
    58%{transform:rotate(-0.5deg);}
    71%{transform:rotate(1.8deg);}
    84%{transform:rotate(-1.1deg);}
    100%{transform:rotate(0deg);}
  }
  @keyframes flameOuter{
    0%{transform:scale(1,1) translateY(0);}
    8%{transform:scale(0.97,1.05) translateY(-0.2px);}
    17%{transform:scale(1.03,0.94) translateY(0.3px);}
    26%{transform:scale(0.95,1.08) translateY(-0.4px);}
    35%{transform:scale(1.02,0.97) translateY(0.1px);}
    44%{transform:scale(0.98,1.03) translateY(-0.2px);}
    53%{transform:scale(1.04,0.95) translateY(0.3px);}
    62%{transform:scale(0.96,1.06) translateY(-0.3px);}
    71%{transform:scale(1.01,0.98) translateY(0.1px);}
    80%{transform:scale(0.99,1.02) translateY(-0.1px);}
    90%{transform:scale(1.03,0.96) translateY(0.2px);}
    100%{transform:scale(1,1) translateY(0);}
  }
  @keyframes flameMid{
    0%{transform:translateY(3.2px) scale(1.14) scaleY(1) skewX(0deg);}
    11%{transform:translateY(3.2px) scale(1.14) scaleY(0.92) skewX(1.5deg);}
    22%{transform:translateY(3.2px) scale(1.14) scaleY(1.08) skewX(-1deg);}
    33%{transform:translateY(3.2px) scale(1.14) scaleY(0.96) skewX(0.8deg);}
    44%{transform:translateY(3.2px) scale(1.14) scaleY(1.1) skewX(-1.6deg);}
    55%{transform:translateY(3.2px) scale(1.14) scaleY(0.9) skewX(1.2deg);}
    66%{transform:translateY(3.2px) scale(1.14) scaleY(1.05) skewX(-0.6deg);}
    77%{transform:translateY(3.2px) scale(1.14) scaleY(0.95) skewX(1deg);}
    88%{transform:translateY(3.2px) scale(1.14) scaleY(1.04) skewX(-0.9deg);}
    100%{transform:translateY(3.2px) scale(1.14) scaleY(1) skewX(0deg);}
  }
  @keyframes flameInner{
    0%{transform:translateY(2.2px) scale(1.2);opacity:0.95;}
    14%{transform:translateY(2.2px) scale(1.32);opacity:1;}
    28%{transform:translateY(2.2px) scale(1.1);opacity:0.88;}
    42%{transform:translateY(2.2px) scale(1.27);opacity:1;}
    57%{transform:translateY(2.2px) scale(1.14);opacity:0.9;}
    71%{transform:translateY(2.2px) scale(1.3);opacity:0.97;}
    85%{transform:translateY(2.2px) scale(1.16);opacity:0.92;}
    100%{transform:translateY(2.2px) scale(1.2);opacity:0.95;}
  }
  @keyframes flameCore{
    0%{transform:translateY(2.6px) scale(1.3) translateY(0);opacity:0.9;}
    20%{transform:translateY(2.6px) scale(1.5) translateY(-0.3px);opacity:1;}
    40%{transform:translateY(2.6px) scale(1.17) translateY(0.2px);opacity:0.8;}
    60%{transform:translateY(2.6px) scale(1.43) translateY(-0.2px);opacity:1;}
    80%{transform:translateY(2.6px) scale(1.24) translateY(0.1px);opacity:0.85;}
    100%{transform:translateY(2.6px) scale(1.3) translateY(0);opacity:0.9;}
  }
  @keyframes flameSpark{
    0%{transform:translateY(0) scale(1);opacity:0;}
    10%{opacity:0.8;}
    35%{transform:translateY(-3px) scale(0.8);opacity:0.6;}
    60%{opacity:0.5;}
    100%{transform:translateY(-6px) scale(0.3);opacity:0;}
  }

  .streak-summary-card{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
    border:1.5px solid var(--color-blue-shadow);border-radius:var(--radius-md);padding:20px 26px;margin-bottom:22px;
    background:var(--color-blue);color:#fff;
    box-shadow:0 var(--shadow-offset-md) 0 var(--color-blue-shadow);
  }
  .ssc-flame{width:44px;height:44px;flex-shrink:0;color:#f2ba38;}
  .ssc-flame svg{width:100%;height:100%;}
  .ssc-stats{display:flex;gap:28px;}
  .ssc-stat{display:flex;flex-direction:column;align-items:center;}
  .ssc-stat .ssc-val{font-family:var(--font-display);font-size:30px;font-weight:900;line-height:1;color:#fff;}
  .ssc-stat .ssc-cap{font-family:var(--font-mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;color:rgba(255,255,255,0.85);margin-top:3px;}
  .ssc-note{font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,0.85);flex:1;min-width:220px;}

  .streak-calendar{
    border:1.5px solid var(--rule);border-radius:var(--radius-md);padding:20px 22px 18px;margin-bottom:22px;
    background:#ffffff;
  }
  .scal-head{
    display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;
    border-bottom:1px solid var(--rule);
  }
  .scal-head h3{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    font-family:var(--font-display);font-size:19px;font-weight:700;margin:0;color:var(--charcoal);letter-spacing:0.3px;
  }
  .scal-head h3::before{
    content:"Streak Calendar";
    font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
    color:var(--brass);opacity:0.85;order:-1;
  }
  .scal-nav{
    width:32px;height:32px;border-radius:11px;border:1.5px solid var(--color-blue-shadow);background:var(--color-blue);color:#ffffff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);
    transition:transform .12s;
  }
  .scal-nav:hover{background:var(--color-blue);}
  .scal-nav:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}
  .scal-dow{
    display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;
    background:rgba(22,40,60,0.05);border-radius:10px;
  }
  .scal-dow span{
    text-align:center;font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
    color:var(--charcoal);opacity:0.7;padding:7px 0;
  }

  .scal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
  .scal-cell{
    position:relative;min-height:72px;border-radius:12px;border:1.5px solid #e4e0d3;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
    padding:7px 4px 8px;
    cursor:pointer;background:#fbfaf5;transition:background .15s, box-shadow .15s, border-color .15s;
  }
  .scal-cell:hover{border-color:var(--brass);}
  .scal-cell.empty{visibility:hidden;cursor:default;}

  .scal-cell.lit{background:#fff4d8;border-color:#f2ba38;}
  .scal-cell:hover.lit{border-color:#dd9f0e;}

  .scal-cell.today{background:var(--color-blue);border-color:var(--color-blue-shadow);}
  .scal-cell.today .scal-daynum{
    background:#ffffff;color:var(--color-blue);opacity:1;font-weight:700;
    width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  }
  .scal-daynum{font-family:var(--font-mono);font-size:10.5px;font-weight:500;color:var(--charcoal);opacity:0.7;flex-shrink:0;}
  .scal-flame{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .scal-flame svg{width:100%;height:100%;}
  .scal-flame.lit{color:#dd9f0e;}
  .scal-flame.unlit{color:#dee7ed;}
  .scal-cell.today .scal-flame.unlit{color:rgba(255,255,255,0.4);}

  .scal-event-label{
    display:block;width:100%;font-family:var(--font-mono);font-size:12.5px;font-weight:700;
    line-height:1.3;text-align:center;overflow-wrap:break-word;white-space:normal;
    text-transform:uppercase;letter-spacing:0.3px;
    background:var(--brass);color:#fff;border-radius:10px;padding:4px 5px;cursor:pointer;
  }
  .scal-goal-ring{
    position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;
    border:2.5px solid var(--crimson);background:none;
  }
  .scal-event-tooltip{
    position:absolute;z-index:400;max-width:220px;padding:7px 11px;border-radius:10px;
    background:var(--charcoal);color:#fff;font-family:var(--font-mono);font-size:11.5px;line-height:1.4;
    pointer-events:none;
  }
  .scal-event-tooltip::after{
    content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:6px solid transparent;border-top-color:var(--charcoal);
  }
  .scal-legend{
    display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--rule);
    font-family:var(--font-mono);font-size:11px;color:var(--charcoal);opacity:0.75;
  }
  .scal-legend span{display:flex;align-items:center;gap:6px;}
  .scal-legend .scal-event-dot{background:var(--brass);}
  .scal-legend .scal-goal-ring{border-color:var(--crimson);}

  .sec-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--rule);}
  .sec-head-title{display:flex;align-items:center;gap:11px;}
  .sec-icon{
    width:34px;height:34px;flex-shrink:0;color:#fff;background:var(--crimson);
    border:1.5px solid var(--crimson-deep);border-radius:11px;
    box-shadow:inset 0 -3px 0 var(--crimson-deep);
    display:flex;align-items:center;justify-content:center;
  }
  .sec-icon svg{width:19px;height:19px;}
  .sec-icon-trophy{background:#dd9f0e;border-color:#8f6d0a;box-shadow:inset 0 -3px 0 #8f6d0a;}
  .sec-icon-target{background:#bf0e0e;border-color:#8b0b0b;box-shadow:inset 0 -3px 0 #8b0b0b;}
  .sec-head h3{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0;color:var(--charcoal);}

  .streak-events{
    border:1.5px solid var(--rule);border-radius:var(--radius-md);padding:20px 22px;margin-bottom:22px;
    background:#ffffff;
  }
  .se-add-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
  .se-add-row input[type=date]{
    font-family:var(--font-body);font-size:13px;padding:8px 10px;border:1.5px solid #d9d4c4;border-radius:14px;
    color:var(--charcoal);background:#fbfaf5;box-shadow:0 3px 0 #d9d4c4;
  }
  .se-add-row input[type=text]{
    flex:1;min-width:180px;font-family:var(--font-body);font-size:13px;padding:8px 12px;
    border:1.5px solid #d9d4c4;border-radius:14px;color:var(--charcoal);background:#fbfaf5;box-shadow:0 3px 0 #d9d4c4;
  }
  .se-add-row input:focus{outline:none;border-color:var(--brass);}
  .se-list{display:flex;flex-direction:column;gap:8px;}
  .se-item{
    display:flex;align-items:center;gap:12px;padding:10px 12px;
    border:1.5px solid #d9d4c4;border-left:4px solid var(--brass);border-radius:14px;background:#fbfaf5;
    box-shadow:0 3px 0 #d9d4c4;
    transition:border-color .15s;
  }
  .se-item:hover{border-color:var(--brass);}
  .se-item.past{opacity:0.6;}
  .se-item-date{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--brass);flex-shrink:0;width:92px;}
  .se-item-title{flex:1;font-size:13.5px;font-weight:500;color:var(--charcoal);}
  .se-item-del{
    display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;
    background:#bf0e0e;border:1.5px solid #8b0b0b;border-radius:9px;color:#fff;cursor:pointer;padding:0;
    box-shadow:0 2px 0 #8b0b0b;transition:transform .12s;
  }
  .se-item-del:hover{transform:translateY(1px);box-shadow:0 1px 0 #8b0b0b;}
  .se-past-toggle{
    margin-top:10px;font-family:var(--font-mono);font-size:11.5px;font-weight:500;color:var(--brass);cursor:pointer;text-decoration:underline;
  }

  .streak-goals, .history-goals{
    border:1.5px solid var(--rule);border-radius:var(--radius-md);padding:20px 22px;margin-bottom:22px;
    background:#ffffff;
  }
  .hg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--rule);}
  .hg-head h3{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0;color:var(--charcoal);}
  .goals-empty{
    font-family:var(--font-mono);font-size:12px;color:var(--charcoal);opacity:0.6;text-align:center;padding:18px 10px;
  }
  .goals-list{display:flex;flex-direction:column;}
  .goal-card{
    display:flex;align-items:center;gap:22px;padding:20px 4px;
    border-bottom:1px solid rgba(0,0,0,0.09);
  }
  .goals-list .goal-card:last-child{border-bottom:none;}
  .goal-card-seal{
    flex-shrink:0;width:74px;height:74px;border-radius:50%;position:relative;
  }
  .goal-card-seal-ring{
    position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(var(--brass) calc(var(--goal-pct,0) * 1%), var(--rule) 0);
  }
  .goal-card-seal-hole{
    position:absolute;inset:8px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .goal-card-seal-pct{
    font-family:var(--font-mono);font-size:16.5px;font-weight:700;color:var(--charcoal);opacity:0.8;
  }
  .goal-card.done .goal-card-seal-ring{background:conic-gradient(#61e007 calc(var(--goal-pct,0) * 1%), var(--rule) 0);}
  .goal-card.done .goal-card-seal-pct{display:none;}
  .goal-card-check{
    flex-shrink:0;width:30px;height:30px;color:#4eb306;display:none;
  }
  .goal-card.done .goal-card-check{display:inline-flex;}
  .goal-card-main{flex:1;min-width:0;}
  .goal-card-label{
    font-family:var(--font-display);font-size:18.5px;font-weight:700;color:var(--charcoal);margin-bottom:6px;line-height:1.25;
  }
  .goal-card-progress{
    font-family:var(--font-mono);font-size:11.5px;font-weight:500;color:var(--charcoal);opacity:0.55;letter-spacing:0.2px;
  }
  .goal-card.done .goal-card-progress{color:#4eb306;opacity:0.85;}
  .goal-card-del{
    flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    background:#bf0e0e;border:1.5px solid #8b0b0b;border-radius:10px;color:#fff;cursor:pointer;padding:0;
    box-shadow:0 2px 0 #8b0b0b;
    font-weight:700;transition:transform .12s;
  }
  .goal-card-del svg{stroke-width:3.5;width:15px;height:15px;}
  .goal-card-del:hover{transform:translateY(1px);box-shadow:0 1px 0 #8b0b0b;}

  .suggested-goals{margin-top:20px;padding-top:16px;border-top:1px dashed var(--rule);}
  .suggested-goals h4{
    font-family:var(--font-mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;
    margin:0 0 12px;color:var(--charcoal);opacity:0.7;
  }
  .suggested-goals-list{display:flex;flex-direction:column;gap:10px;}
  .suggested-goal-card{
    position:relative;display:flex;align-items:center;gap:14px;
    padding:12px 16px;border-radius:14px;
    background:#fbfaf5;border:1.5px solid #d9d4c4;box-shadow:0 3px 0 #d9d4c4;
  }
  .sg-icon{
    flex-shrink:0;width:32px;height:32px;border-radius:11px;
    background:var(--brass);border:1.5px solid var(--color-blue-shadow);color:#fff;
    box-shadow:inset 0 -3px 0 var(--color-blue-shadow);
    display:flex;align-items:center;justify-content:center;
  }
  .sg-icon svg{width:17px;height:17px;}
  .sg-text{flex:1;min-width:0;}
  .sg-label{font-size:13.5px;font-weight:500;color:var(--charcoal);}
  .sg-why{font-size:12px;color:var(--charcoal);opacity:0.6;margin-top:3px;line-height:1.4;}
  .sg-add{
    flex-shrink:0;font-family:var(--font-mono);font-size:12px;font-weight:700;
    padding:9px 16px;border-radius:var(--radius-md);
    background:var(--color-blue);border:1.5px solid var(--color-blue-shadow);color:#fff;cursor:pointer;
    box-shadow:0 var(--shadow-offset-sm) 0 var(--color-blue-shadow);
    transition:transform .12s;
  }
  .sg-add:hover{background:var(--color-blue);}
  .sg-add:active{box-shadow:none;transform:translateY(var(--shadow-offset-sm));}

  .goal-modal-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:780;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .goal-modal-backdrop:not(.hidden){opacity:1;pointer-events:auto;}
  .goal-modal{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:790;
    width:380px;max-width:90vw;max-height:86vh;overflow-y:auto;
    background:var(--parchment);border-radius:var(--radius-md);box-shadow:0 12px 40px rgba(0,0,0,0.35);
  }
  .goal-modal.hidden, .goal-modal-backdrop.hidden{display:none;}
  .goal-modal-head{
    display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
    background:var(--charcoal);border-radius:var(--radius-md) var(--radius-md) 0 0;
  }
  .goal-modal-head span{font-family:var(--font-display);font-size:16px;color:var(--on-accent);}
  .goal-modal-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px;}
  .gm-field{display:flex;flex-direction:column;gap:6px;}
  .gm-field label{
    font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;color:var(--charcoal);opacity:0.7;
  }
  .gm-field select, .gm-field input{
    font-family:var(--font-body);font-size:13.5px;padding:9px 12px;border:1.5px solid #d9d4c4;border-radius:14px;
    background:#fbfaf5;color:var(--charcoal);box-shadow:0 3px 0 #d9d4c4;
  }
  .gm-field select:focus, .gm-field input:focus{outline:none;border-color:var(--brass);}

  @media (max-width: 640px){
    .streak-fab-count{display:none;}
    .streak-fab{padding:10px;border-radius:50%;}
    .scal-daynum{font-size:9px;}
    .scal-flame{width:19px;height:19px;}
    .streak-summary-card{padding:18px 20px;}
  }

#tutOverlayRoot{position:fixed;inset:0;z-index:2147483000;pointer-events:none;font-family:var(--font-body);}
#tutDim{position:fixed;inset:0;background:rgba(12,16,24,0.55);opacity:0;transition:opacity .25s ease;pointer-events:none !important;z-index:2147483000;}
#tutDim.tut-visible{opacity:1;}
.tut-highlight-box{
  position:fixed;z-index:2147483002;pointer-events:none;
  border-radius:16px;

  box-shadow:0 0 0 9999px rgba(12,16,24,0.65);
  transition:top .15s ease, left .15s ease, width .15s ease, height .15s ease;
}
.tut-ring{
  display:none;
}

#tutBox{
  position:fixed;top:50%;right:22px;left:auto;
  transform:translateY(-50%) translateX(16px);
  z-index:2147483004;width:336px;max-width:calc(100vw - 44px);
  max-height:calc(100vh - 44px);overflow-y:auto;
  background:linear-gradient(180deg,#f2f5f8,#e8eef2);
  border:2px solid #0b446a;border-radius:16px;
  box-shadow:0 2px 0 rgba(255,255,255,0.6) inset;
  padding:18px 20px 16px;pointer-events:none;
  opacity:0;transition:opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), right .28s ease, left .28s ease;
}
#tutBox.tut-visible{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto;}

#tutBox.tut-dock-left{right:auto;left:22px;transform:translateY(-50%) translateX(-16px);}
#tutBox.tut-dock-left.tut-visible{transform:translateY(-50%) translateX(0);}

#tutBox.tut-center{right:22px;left:auto;}

#tutBox.tut-box-formal{
  border:2px solid var(--crimson-deep,#0b446a);
  box-shadow:0 2px 0 rgba(255,255,255,0.6) inset, 0 0 0 4px rgba(29,92,158,0.08);
}
#tutBox.tut-box-formal::before{
  content:'OFFICIAL';
  display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:2px;color:var(--crimson,#116daa);text-align:center;
  margin:-4px 0 10px;
}
#tutBox.tut-box-formal .tut-head{border-bottom:2px double var(--crimson,#116daa);padding-bottom:10px;}
#tutBox.tut-box-formal .tut-avatar{background:var(--crimson-deep,#0b446a);border-radius:50%;}
#tutBox.tut-box-formal .tut-title{font-size:16.5px;}
.tut-field-label{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:#d89b0e;margin:14px 0 5px;
}

.tut-progress-track{height:4px;border-radius:12px;background:rgba(18,58,99,0.12);margin:-2px -2px 14px;overflow:hidden;}
.tut-progress-fill{height:100%;border-radius:12px;background:#0b446a;transition:width .3s ease;}

.tut-arrow{display:none;}

.tut-skel-block{
  background:rgba(0,0,0,0.08);border-radius:4px;display:inline-block;
}
.tut-skel-line{height:12px;margin:6px 0;}
.tut-skel-bar{border-radius:3px;}
.history-overall.tut-skel{
  background:var(--crimson);border:1px solid var(--crimson-deep);border-radius:8px;
  padding:20px 24px 20px 26px;margin-bottom:22px;
}
.history-overall.tut-skel .ho-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.history-overall.tut-skel h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin:0;color:#ffffff;}
.history-overall.tut-skel .tut-skel-block{background:rgba(255,255,255,0.28);}
.tut-skel-trends h3, .tut-skel-goals h3{
  font-family:var(--font-display);font-size:17px;font-weight:700;margin:0 0 14px;color:#000;
}
.tut-skel-trends{margin-bottom:22px;}
.tut-skel-trend-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.tut-skel-chart{
  border:1px solid var(--rule);border-radius:var(--radius-sm);padding:16px;
  display:flex;align-items:flex-end;gap:8px;height:120px;background:rgba(255,255,255,0.5);
}
.tut-skel-goals{margin-bottom:22px;}
.tut-skel-goal-card{
  border:1px solid var(--rule);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(255,255,255,0.5);
}
.tut-skel-card{
  border:1px solid var(--rule);border-radius:var(--radius-sm);padding:16px 20px;margin-bottom:14px;background:rgba(255,255,255,0.5);
}
.tut-skel-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.tut-skel-cats{display:flex;flex-direction:column;gap:8px;}

.history-trends.tut-skel .trend-avg{display:inline-flex;}
.goal-card.tut-skel .goal-card-seal-ring{background:conic-gradient(var(--color-blue) calc(var(--goal-pct,0) * 1%), var(--rule) 0);}
.history-card.tut-skel .history-card-head{cursor:default;}
.history-card.tut-skel .history-card-head:hover{background:none;}
.history-goals.tut-skel .btn[disabled]{pointer-events:none;}
#trendChartSelectSkel{pointer-events:none;}

.tut-confetti-root{
  position:fixed;inset:0;z-index:2147483005;pointer-events:none;overflow:hidden;
}
.tut-confetti-piece{
  position:absolute;top:-24px;opacity:0.95;
  animation-name:tutConfettiFall;animation-timing-function:cubic-bezier(.35,0,.65,1);animation-fill-mode:forwards;
}
@keyframes tutConfettiFall{
  0%{transform:translate(0,0) rotate(0deg);opacity:1;}
  100%{transform:translate(var(--tut-confetti-drift,0px),110vh) rotate(var(--tut-confetti-rotate,360deg));opacity:0.85;}
}

.tut-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.tut-avatar{
  font-size:20px;line-height:1;flex:0 0 auto;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:#0b446a;border-radius:14px;
}
.tut-title{font-family:var(--font-display);font-weight:900;font-size:15px;color:#0b446a;line-height:1.25;}
.tut-step-count{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;color:#d89b0e;white-space:nowrap;
  background:rgba(138,122,92,0.12);padding:3px 7px;border-radius:20px;flex:0 0 auto;
}
.tut-text{font-size:13.5px;line-height:1.6;color:#3e2d04;}
.tut-type-example{
  display:block;margin:10px 0;padding:10px 12px;background:#0b446a;color:#f0f4f7;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.55;
  border-radius:14px;white-space:pre-wrap;border-left:3px solid #f4c558;
}
.tut-hint{
  margin-top:12px;font-size:11.5px;font-weight:700;color:#bf0e0e;display:flex;align-items:center;gap:7px;
  background:rgba(163,50,42,0.08);border:1px solid rgba(163,50,42,0.25);border-radius:14px;padding:8px 10px;
}
.tut-hint .tut-dot{width:8px;height:8px;border-radius:50%;background:#bf0e0e;flex:0 0 auto;animation:tutDotBlink 1s ease-in-out infinite;}
@keyframes tutDotBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
.tut-name-input{
  margin-top:12px;width:100%;box-sizing:border-box;padding:9px 12px;font-size:13.5px;font-family:inherit;
  border:1px solid rgba(18,58,99,0.3);border-radius:14px;background:#f0f4f7;color:#3e2d04;outline:none;
}
.tut-name-input:focus{border-color:#0b446a;box-shadow:0 0 0 3px rgba(18,58,99,0.12);}
.tut-name-error{
  margin-top:8px;font-size:12px;font-weight:700;color:#bf0e0e;
}
.tut-name-input.tut-name-input-checking{opacity:0.65;}
.tut-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:8px;}
.tut-btn{border:2px solid transparent;border-radius:14px;padding:9px 15px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s ease,box-shadow .15s ease,transform .1s ease;}
.tut-btn:active{box-shadow:none !important;transform:translateY(var(--shadow-offset-sm));}
.tut-btn-skip{background:transparent;color:#d89b0e;text-decoration:underline;padding:8px 4px;box-shadow:none;}
.tut-btn-skip:hover{color:#a5770b;background:rgba(0,0,0,0.08);}
.tut-btn-skip:active{transform:none;}
.tut-btn-next{background:#0b446a;color:#f0f4f7;border-color:#062a42;box-shadow:0 var(--shadow-offset-sm) 0 #062a42;}
.tut-btn-next:hover{background:#083350;}
.tut-btn-choice{background:#116daa;color:#fff;margin-left:6px;border-color:#083350;box-shadow:0 var(--shadow-offset-sm) 0 #083350;}
.tut-btn-choice.tut-btn-no{background:#d1960d;border-color:#8a6309;box-shadow:0 var(--shadow-offset-sm) 0 #8a6309;}

@media (max-width: 780px), (max-height: 560px){
  #tutBox, #tutBox.tut-dock-left, #tutBox.tut-center{
    top:auto;bottom:14px;left:50%;right:auto;
    width:calc(100vw - 28px);max-width:420px;
    transform:translateX(-50%) translateY(14px);
  }
  #tutBox.tut-visible, #tutBox.tut-dock-left.tut-visible{transform:translateX(-50%) translateY(0);}
}
@media (max-width:640px){
  #tutBox{max-width:88vw;min-width:0;left:6vw !important;right:6vw !important;}
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display);}

button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, a:focus-visible{
  outline:3px solid var(--color-blue-accent);
  outline-offset:2px;
}

.gear-btn, .mode-switch-btn, .q-cat-btn, .dl-modal-btn, .bf-timing-btn,
.model-picker-option, .btn-add, .btn-preset, .q-change-link{
  transition:background-color var(--ease-hover), transform 100ms ease-out, box-shadow 100ms ease-out;
}
.gear-btn:active, .mode-switch-btn:active, .q-cat-btn:active,
.dl-modal-btn:active, .bf-timing-btn:active, .model-picker-option:active{
  transform:scale(0.96);
  transition:transform 60ms ease-out;
}

.pb-icon-circle, .rubric-toggle-btn, .comment-popover-close,
.cancel-ballot-btn, .ai-compare-toggle-btn{
  transition:transform 100ms ease-out, color var(--ease-hover), box-shadow 100ms ease-out;
  box-shadow:0 3px 0 rgba(0,0,0,0.55);
}
.gear-btn{
  transition:transform 100ms ease-out, color var(--ease-hover), border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.gear-btn:active, .pb-icon-circle:active, .rubric-toggle-btn:active,
.cancel-ballot-btn:active, .ai-compare-toggle-btn:active{
  transform:scale(0.88);
  box-shadow:none;
  transition:transform 60ms ease-out;
}
.gear-btn:active{
  box-shadow:none;
  transform:translateY(3px);
  transition:transform 60ms ease-out, box-shadow 60ms ease-out;
}
.pb-icon-circle{box-shadow:0 3px 0 rgba(0,0,0,0.45);}

@keyframes btnClickPop{
  0%{transform:scale(1);}
  45%{transform:scale(1.02);}
  100%{transform:scale(1);}
}
.btn-pop-anim{
  animation:btnClickPop 220ms cubic-bezier(0.34,1.56,0.64,1);
  transform-origin:center;
}

.gear-btn.btn-pop-anim, .pb-icon-circle.btn-pop-anim, .rubric-toggle-btn.btn-pop-anim,
.comment-popover-close.btn-pop-anim, .cancel-ballot-btn.btn-pop-anim,
.ai-compare-toggle-btn.btn-pop-anim{
  animation-name:btnClickPopSmall;
}
@keyframes btnClickPopSmall{
  0%{transform:scale(1);}
  45%{transform:scale(1.04);}
  100%{transform:scale(1);}
}

.settings-panel, .export-menu, .comment-popover, #dlModal .dl-modal-card{
  transition:transform var(--ease-dropdown-open), opacity 150ms ease-out;
}

@media (prefers-reduced-motion: reduce){
  .tut-skel-block::after,
  .feature-card,
  .settings-panel:not(.hidden),
  .flame-layer, .flame-spark, .flame-sway,
  .btn-pop-anim{
    animation:none !important;
    transition-duration:1ms !important;
  }
}

.bf-warning, .bf-verified-badge{
  color:var(--color-gold-ink);
}

.progress-bar-fill{
  transition:width var(--ease-progress);
}