/* Decryptech, "under construction" page. Tokens and rules: see DESIGN.md. */
@font-face{font-family:"Chivo";src:url("../fonts/chivo-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("../fonts/chivo-mono-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{--bg:#D7DBE0;--surface:#F4F5F7;--ink:#14171B;--muted:#4C535B;--line:#A3AAB3;--accent:#F59300;--on-accent:#14171B;
  --t1:#D42A3A;--t2:#0C7A3D;--t3:#2459D9;--t4:#F59300;--on1:#fff;--on2:#fff;--on3:#fff;--on4:#14171B;
  --mono:"Chivo Mono",ui-monospace,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0A0C0F;--surface:#191C21;--ink:#EEF1F4;--muted:#A6AEB8;--line:#3A4048;--accent:#FFB224;--on-accent:#0A0C0F;
  --t1:#FF5C6A;--t2:#3EE07F;--t3:#7AA5FF;--t4:#FFB224;--on1:#0A0C0F;--on2:#0A0C0F;--on3:#0A0C0F;--on4:#0A0C0F;color-scheme:dark}}
:root[data-theme=dark]{--bg:#0A0C0F;--surface:#191C21;--ink:#EEF1F4;--muted:#A6AEB8;--line:#3A4048;--accent:#FFB224;--on-accent:#0A0C0F;
  --t1:#FF5C6A;--t2:#3EE07F;--t3:#7AA5FF;--t4:#FFB224;--on1:#0A0C0F;--on2:#0A0C0F;--on3:#0A0C0F;--on4:#0A0C0F;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:400 1rem/1.55 "Chivo",system-ui,sans-serif}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:60rem;margin:0 auto;padding:0 16px}

/* Header */
.head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem clamp(16px,3vw,2rem)}
.tools{display:flex;align-items:center;gap:1rem;font:600 .85rem var(--mono)}
.tools a{text-decoration:none;color:var(--muted)}
.tools a[aria-current]{color:var(--ink)}
.tools a:hover{color:var(--ink)}
.theme{font:inherit;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;cursor:pointer;white-space:nowrap;transition:box-shadow .5s}
.theme:hover{box-shadow:0 0 .9rem 1px color-mix(in srgb,var(--accent) 40%,transparent);transition-duration:.2s}

/* Logo */
.logo{--fs:1.65rem;--bw:max(1px,calc(var(--fs)*.03));display:inline-flex;align-items:stretch;border:var(--bw) solid var(--ink);border-radius:.12em;font-size:var(--fs);color:var(--ink);text-decoration:none}
.logo .tag{display:flex;align-items:center;justify-content:center;padding:0 .4em;border-right:var(--bw) solid var(--ink);font:700 .5em/1 var(--mono)}
.logo .word{display:flex;padding:.14em .3em .4em;font:800 .8em/1 "Chivo",sans-serif;letter-spacing:.005em}
.logo .word span{position:relative;z-index:0}
.logo i{position:absolute;z-index:-1;left:.05em;right:.07em;bottom:-.24em;height:max(2.5px,.085em);border-radius:1px;background:var(--c);transition:box-shadow .6s ease}
.logo:hover i{transition-duration:.22s;box-shadow:0 0 .5em 1px color-mix(in srgb,var(--c) 80%,transparent)}

/* Main */
main{flex:1;display:flex;align-items:center}
.hero{padding-top:clamp(2rem,8vh,5rem);padding-bottom:clamp(2rem,8vh,5rem)}
.soon{display:inline-block;margin:0 0 1.4rem;padding:.35rem .6rem;border-radius:3px;background:var(--accent);color:var(--on-accent);font:700 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
h1{margin:0;font:900 clamp(2.2rem,7vw,4.4rem)/1.02 "Chivo",sans-serif;letter-spacing:-.01em}
.lede{margin:1.2rem 0 0;max-width:38rem;font-size:clamp(1.05rem,2.4vw,1.25rem);color:var(--muted)}

/* Demo: a decoded model number, linked hover between parts and legend */
.demo{margin:clamp(2.5rem,7vh,4rem) 0 0;padding:1.4rem clamp(1rem,4vw,2rem) 1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:6px;
  background-image:linear-gradient(180deg,#ffffff12,#0000000a),repeating-linear-gradient(90deg,transparent 0 2px,#8881 2px 3px)}
.model{margin:0;padding-top:1.9rem;font:600 clamp(2.8rem,13vw,6rem)/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.tok{position:relative;display:inline-block;padding-bottom:.2em;transition:text-shadow .6s ease,opacity .6s ease}
.tok::before{content:attr(data-n);position:absolute;left:50%;bottom:100%;transform:translate(-50%,-.3rem);font:700 .75rem/1 var(--mono);min-width:1.5rem;padding:.3rem .35rem;border-radius:2px;background:var(--c);color:var(--o);text-align:center}
.tok::after{content:"";position:absolute;left:.06em;right:.06em;bottom:0;height:max(4px,.06em);border-radius:1px;background:var(--c);transition:box-shadow .6s ease}
.legend{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.legend li{display:flex;align-items:center;gap:.5rem;color:var(--muted);transition:color .6s ease}
.legend b{display:inline-grid;place-items:center;min-width:1.5rem;padding:.25rem .3rem;border-radius:2px;background:var(--c);color:var(--o);font:700 .72rem/1 var(--mono);transition:box-shadow .6s ease}
.legend span{display:inline-grid}
.legend span::after{content:attr(data-text);font-weight:800;height:0;visibility:hidden;overflow:hidden}

/* 1..4: hovering a part or its legend lights both */
.demo:has([data-n]:hover) .tok{opacity:.45}
.tok[data-n]{cursor:default}
.tok:is(.demo:has([data-n="1"]:hover) [data-n="1"],.demo:has([data-n="2"]:hover) [data-n="2"],.demo:has([data-n="3"]:hover) [data-n="3"],.demo:has([data-n="4"]:hover) [data-n="4"]){
  opacity:1;transition-duration:.22s;text-shadow:0 0 .1em color-mix(in srgb,var(--c) 70%,transparent),0 0 .4em color-mix(in srgb,var(--c) 55%,transparent)}
.tok:is(.demo:has([data-n="1"]:hover) [data-n="1"],.demo:has([data-n="2"]:hover) [data-n="2"],.demo:has([data-n="3"]:hover) [data-n="3"],.demo:has([data-n="4"]:hover) [data-n="4"])::after{
  transition-duration:.22s;box-shadow:0 0 .5rem 1px color-mix(in srgb,var(--c) 80%,transparent)}
.legend li:is(.demo:has([data-n="1"]:hover) [data-n="1"],.demo:has([data-n="2"]:hover) [data-n="2"],.demo:has([data-n="3"]:hover) [data-n="3"],.demo:has([data-n="4"]:hover) [data-n="4"]){
  color:var(--ink);font-weight:800;transition-duration:.22s}
.legend li:is(.demo:has([data-n="1"]:hover) [data-n="1"],.demo:has([data-n="2"]:hover) [data-n="2"],.demo:has([data-n="3"]:hover) [data-n="3"],.demo:has([data-n="4"]:hover) [data-n="4"]) b{
  transition-duration:.22s;box-shadow:0 0 .8rem 1px color-mix(in srgb,var(--c) 65%,transparent)}
.demo-cap{margin:1rem 0 0;font-size:.85rem;color:var(--muted)}

/* Footer */
.foot{padding:1.5rem 0 2rem;font-size:.85rem;color:var(--muted)}
.foot .wrap{display:grid;gap:.6rem}
.foot p{margin:0}
details summary{cursor:pointer;width:max-content;font-weight:600;color:var(--ink)}
details dl{margin:.8rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem}
details dt{font:600 .75rem/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em}
details dd{margin:0}
@media (max-width:30rem){details dl{grid-template-columns:1fr}details dd{margin-bottom:.5rem}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
@media (max-width:26rem){.tools{gap:.6rem}.theme{padding:.3rem .55rem;font-size:.78rem}.logo{--fs:1.4rem}}