:root {
  
  
  --paper: #FFFFFF;                 
  --canvas: #000000;                
  --surface-1: #FFFFFF;             
  --surface-2: #F6F6F4;             
  --surface-3: #EEEEEB;             

  
  --ink: #0B0B0B;                   
  --ink-2: #2B2823;                 
  --ink-3: #4A473F;                 
  --smoke: #6E6A5F;                 
  --line: rgba(11, 11, 11, 0.12);   
  --line-strong: rgba(11, 11, 11, 0.85);

  
  --n-black: #000000;
  --n-graphite: #171717;
  --n-shadow: #3A362F;
  --n-smoke: #6E6A5F;
  --n-stone: #C9C2B3;
  --n-sand: #DDD5C5;
  --n-beige: #E9E1D2;
  --n-bone: #F5F1EA;
  --n-paper: #FFFFFF;

  
  --canvas-ink: #F5F1EA;
  --canvas-ink-2: rgba(245, 241, 234, 0.88);
  --canvas-ink-3: rgba(245, 241, 234, 0.66);
  --canvas-line: rgba(245, 241, 234, 0.16);
  --canvas-line-strong: rgba(245, 241, 234, 0.72);

  
  --signal: #E41B42;                
  --chanel: #B0091C;                
  --accent: var(--signal);          
  --accent-wash: rgba(228, 27, 66, 0.08);    
  --blue: #002FA7;                  
  --blue-electric: #3B6DFF;         
  --blue-wash: rgba(0, 47, 167, 0.08);       
  --gold: #B8892C;                  
  --gold-wash: rgba(184, 137, 44, 0.12);     
  

  
  --mark-active: var(--ink);
  --mark-shipped: var(--ink);       
  --mark-waiting: var(--paper);     
  --mark-parked: var(--n-stone);
  --mark-needs-you: var(--signal);

  
  --grotesk: "JG Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;  
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;                            

  --root: 17px;                     
  --fs-11: 11px;  --fs-13: 13px;  --fs-15: 15px;  --fs-18: 18px;  --fs-24: 24px;
  --fs-30: 30px;  --fs-38: 38px;  --fs-60: 60px;  --fs-96: 96px;  --fs-240: 240px;
  --fs-micro: 13px;                 
  --fs-meta: 13px;
  --fs-label: 15px;                 
  --fs-body: 17px;
  --fs-lead: 18px;
  --fs-h4: 24px;  --fs-h3: 30px;  --fs-h2: 38px;  --fs-h1: 60px;
  --fs-display: 96px;  --fs-giant: 240px;

  --lh-hero: .88;  --lh-head: .98;  --lh-body: 1.5;  --lh-long: 1.62;
  --ls-hero: -.025em;  --ls-head: -.02em;  --ls-micro: .16em;  --ls-label: .1em;  --ls-mono: .04em;
  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;  --fw-black: 900;
  --stroke: .75px;                  
  --measure-copy: 70ch;

  
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;
  --sec-gap: 88px;                  
  --measure: 1180px;                
  --measure-wide: 1320px;           
  --cell-pad: 5px;                  
  --page-pad: 28px;                 
  --grid-cols: 12;
  --grid-gap: 24px;

  
  --r-1: 8px;                       
  --r-2: 12px;                      
  --r-3: 16px;                      
  --r-4: 24px;                      
  --r-pill: 999px;                  

  --el-1: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .05);
  --el-2: 0 2px 6px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .08);
  --el-3: 0 8px 24px rgba(0, 0, 0, .10), 0 24px 64px rgba(0, 0, 0, .12);

  
  --glass: rgba(255, 255, 255, .50);            
  --glass-strong: rgba(255, 255, 255, .80);     
  --glass-dark: rgba(0, 0, 0, .60);
  --glass-blur: blur(24px) saturate(1.8);
  --glass-edge: rgba(255, 255, 255, .95);       
  --glass-line: rgba(11, 11, 11, .08);          
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 46%, rgba(255, 255, 255, 0) 100%);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);
  
  --light-a: rgba(0, 47, 167, .14);             
  --light-b: rgba(228, 27, 66, .09);            
  --light-c: rgba(184, 137, 44, .13);           

  --grain-opacity: .22;             

  
  --dur-fast: 160ms;  --dur-med: 320ms;  --dur-slow: 640ms;
  --ease: cubic-bezier(.22, .61, .36, 1);       
  --ease-cinema: cubic-bezier(.16, 1, .3, 1);
  --press-dur: 120ms;  --press-scale: .97;
  --reveal-failsafe: 1600ms;

  
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal);
  --target: 24px;
  --control-h: 40px;                

  
  --icon: 20px;                     
  --icon-stroke: 1.5;               

  
  --ground: var(--surface-2);       
  --tile: var(--surface-1);         

  
  --tile-col: 900px;                
  --tile-gutter: var(--page-pad);   
  --tile-gap: var(--s-4);           
  --tile-grid-gap: var(--s-2);      
  --tile-full-large-h: 480px;       
  --tile-full-small-h: 110px;       
  --tile-half-large-h: 480px;       
  --tile-half-small-h: 240px;       
  --tile-review-w: 209px;           
  --tile-review-h: 277px;
  --tile-big-square: 212px;         
  --tile-small-square: 134px;       
  --tile-nav-h: 60px;               
  --tile-tabbar-h: 55px;            

  
  --signal-text: #DA1A3F;           
  --fs-nav: var(--fs-11);           
  --wordmark-nav: 12px;             
  --icon-tab: 24px;                 

  
  --seg-thumb: var(--surface-1);    
  --seg-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .06);   
  --dur-glide: 360ms;               
  --ease-glide: linear(0, .061, .194, .347, .494, .622, .726, .807, .868, .913, .944, .966, .98, .99, .995, .999, 1, 1, 1);
                                    

  color-scheme: light;
}


.canvas, [data-surface="canvas"], [data-mode="dark"]:not(:has(.paper-register)) {
  --paper: var(--canvas);
  --surface-1: #0F0F0F;
  --surface-2: #161616;
  --surface-3: #1E1E1E;
  --ink: var(--canvas-ink);
  --ink-2: var(--canvas-ink-2);
  --ink-3: var(--canvas-ink-3);
  --smoke: rgba(245, 241, 234, .55);
  --line: var(--canvas-line);
  --line-strong: var(--canvas-line-strong);
  --blue: var(--blue-electric);
  --blue-wash: rgba(59, 109, 255, .16);
  --glass: rgba(24, 24, 26, .50);
  --glass-strong: rgba(14, 14, 16, .76);
  --glass-edge: rgba(255, 255, 255, .16);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0) 100%);
  --glass-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  --light-a: rgba(59, 109, 255, .22);
  --light-b: rgba(228, 27, 66, .16);
  --light-c: rgba(184, 137, 44, .16);
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--signal);
  --mark-active: var(--canvas-ink);
  --mark-shipped: var(--canvas-ink);   
  --mark-waiting: var(--canvas);       
  --ground: var(--canvas);          
  --tile: var(--surface-2);         
  --signal-text: #E94162;           
  --seg-thumb: rgba(245, 241, 234, .16);   
  --seg-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}


@media screen and (prefers-color-scheme: dark) {
  :root[data-modes]:not([data-mode="light"]):not(:has(.paper-register)) {
    --paper: var(--canvas);
    --surface-1: #0F0F0F;
    --surface-2: #161616;
    --surface-3: #1E1E1E;
    --ink: var(--canvas-ink);
    --ink-2: var(--canvas-ink-2);
    --ink-3: var(--canvas-ink-3);
    --smoke: rgba(245, 241, 234, .55);
    --line: var(--canvas-line);
    --line-strong: var(--canvas-line-strong);
    --blue: var(--blue-electric);
    --blue-wash: rgba(59, 109, 255, .16);
    --glass: rgba(24, 24, 26, .50);
    --glass-strong: rgba(14, 14, 16, .76);
    --glass-edge: rgba(255, 255, 255, .16);
    --glass-line: rgba(255, 255, 255, .10);
    --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0) 100%);
    --glass-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    --light-a: rgba(59, 109, 255, .22);
    --light-b: rgba(228, 27, 66, .16);
    --light-c: rgba(184, 137, 44, .16);
    --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--signal);
    --mark-active: var(--canvas-ink);
    --mark-shipped: var(--canvas-ink);
    --mark-waiting: var(--canvas);
    --ground: var(--canvas);          
    --tile: var(--surface-2);         
    --signal-text: #E94162;
    --seg-thumb: rgba(245, 241, 234, .16);
    --seg-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}


@media print { :root { --accent: var(--chanel); --accent-wash: rgba(176, 9, 28, .07); } }


@media (max-width: 735px) {
  :root {
    --page-pad: 16px; --sec-gap: 56px;
    --tile-gutter: 8px;               
    --tile-gap: var(--s-3);           
    --tile-full-large-h: 636px;       
    --tile-full-small-h: 127px;       
    --tile-review-w: 176px;           
    --tile-review-h: 233px;
    --tile-big-square: 175px;         
    --tile-nav-h: 33px;               
    
  }
}