:root {
  
  --color-ink: #080E1B;          
  --color-main: #080E1B;         
  --color-main-2: #0068B7;       
  --color-accent: #0068B7;       
  --color-accent-2: #0068B7;
  --color-base: #F5F8FF;         
  --color-pale: #F5F8FF;         
  --color-line: rgb(8 14 27 / 0.22);
  --color-on-dark: #F5F8FF;      
  --color-on-dark-line: rgb(245 248 255 / 0.7);
  --color-on-dark-faint: rgb(245 248 255 / 0.32);   
  --color-hair: rgb(245 248 255 / 0.14);            
  --color-rule-dark: rgb(245 248 255 / 0.24);       
  --color-sink: rgb(8 14 27 / 0.8);                 
  --color-error: #0068B7;
  --color-shadow: rgb(8 14 27 / 0.16);
  --color-frag-a: #0068B7;       
  --color-frag-b: #F5F8FF;       
  
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.12;
  --grain-size: 64px;
  --color-load-bar: rgb(245 248 255 / 0.6);         
  --load-fs: clamp(28px, 8.2vw, 48px);              
  --para: polygon(0.55em 0, 100% 0, calc(100% - 0.55em) 100%, 0 100%);   
  --edge: 0.34em;      
  --p2-hold: 800ms;    
  --p2-move: 500ms;    
  --win-at: 300ms;     
  --p2-flow: calc(var(--p2-hold) + var(--win-at));   
  --win-step: 350ms;
  --win-dur: 850ms;    
  --p2-txt: calc(var(--p2-flow) + var(--win-step) * 3 + var(--win-dur) + 100ms);   
  --load-top-opacity: 0.4;                          
  --load-gap: clamp(28px, 10vw, 64px);              
  --load-ease: cubic-bezier(0.77, 0, 0.175, 1);     

  
  --bg-dark: #080E1B;            
  --bg-accent: var(--color-accent);

  
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Archivo", "Noto Sans JP", sans-serif;
  --font-stripe: "Archivo Black", "Archivo", sans-serif;   
  --font-num: "Bodoni Moda", "Times New Roman", serif;     
  --font-catch: "Noto Serif JP", "Shippori Mincho", serif; 
  --fs-min: 13px;
  --fs-base: clamp(var(--fs-min), min(2.26dvh, 3.85vw), 17px);   
  --fs-ui: max(var(--fs-min), 13px);
  --fs-input: 16px;
  --fs-head: 1.75em;             
  --fs-box: 1.2em;               
  --fs-head-xl: 2.12em;          
  --fw-body: 500;                
  --fw-head: 500;                
  --ls-body: 0.02em;
  --ls-head: -0.04em;            
  --lh-body: 1.75;
  --lh-head: 1.3;

  
  --col: 480px;
  --header-h: 56px;
  --gutter: 22px;
  --sp-1: 0.45em;
  --sp-p: max(0.75em, calc(3.2dvh - 12px));   
  --sp-g: max(1.1em, calc(5dvh - 20px));   
  --pad-y: 1.2em;
  --next-h: 0px;
  --radius-pill: 999px;
  --radius-s: 4px;
  --shadow-soft: 0 0 10px 0 var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);
  --win-img: max(2.9em, 6.4dvh);   
  --card-img-h: clamp(56px, min(15dvh, calc(45dvh - 180px)), 220px);   
  --duo-img-h: clamp(90px, 18dvh, 200px);    
  --stack-peek: 1.1em;           
  --box-depth: 0.62em;           

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 32px;
  --dur-in: 600ms;
  --dur-hover: 300ms;
  --rot-dur: 300ms;              
  --frag-swap: 1100ms;           
  --strip-speed: 26s;            
}
@media (max-height: 600px) { :root { --pad-y: 0.7em; } }