@view-transition { navigation: auto; }

:root{
  --desk:#2f4a3c; --face:#c6c6c6; --hi:#fff; --hi2:#dfdfdf; --lo:#808080; --dk:#000;
  --navy:#4b1d82; --navy2:#2e9e5b; --ink:#111;
  --paper:#fff; --tick:#e6e6e6; --muted:#444; --hover:#d4d4d4; --head:#4b1d82; --link:#5a2a9a; --rowhover:#ece4f7;
  --raised:inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2);
  --sunken:inset -1px -1px var(--hi), inset 1px 1px var(--lo), inset -2px -2px var(--hi2), inset 2px 2px var(--dk);
}
html[data-theme="dark"]{
  --desk:#14201a; --face:#2b2b31; --hi:#55555e; --hi2:#3d3d45; --lo:#101013; --dk:#000;
  --ink:#e8e8ee; --paper:#18181c; --tick:#222228; --muted:#a6a6b2; --hover:#38383f; --head:#a36eff; --link:#c3a0ff; --rowhover:#2a2438;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;padding:5vh 0 10vh;color:var(--ink);
  background:var(--desk) url("/images/back.png") repeat;
  font:15px/1.45 Tahoma,Verdana,"Barlow Semi Condensed",sans-serif;
}
a{color:var(--link)}

/* window frame */
.window{display:flex;flex-direction:column;min-height:85vh;width:90vw;max-width:none;margin:0 auto;background:var(--face);padding:3px;box-shadow:var(--raised),4px 4px 0 rgba(0,0,0,.35)}
.titlebar{position:relative;min-height:34px;display:flex;justify-content:space-between;align-items:center;padding:3px 4px;color:#fff;font-weight:700;
  background:linear-gradient(90deg,var(--navy),var(--navy2))}
.titlebar-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.02em}
.titlebar-btns{display:flex;gap:2px}
.titlebar-btns i{width:18px;height:16px;display:grid;place-items:center;background:var(--face);color:var(--ink);
  font:700 11px/1 monospace;font-style:normal;box-shadow:var(--raised)}

/* menu-style header */
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 6px;border-bottom:1px solid var(--lo);box-shadow:0 1px var(--hi)}
header h1{margin:0;font-size:15px;text-transform:uppercase;letter-spacing:.12em}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{padding:3px 12px;color:var(--ink);text-decoration:none;border:1px solid transparent}
nav a:hover{box-shadow:var(--raised)}
nav a[aria-current="page"]{box-shadow:var(--sunken);background:repeating-conic-gradient(var(--tick) 0 25%,var(--face) 0 50%) 0 0/2px 2px}

/* content well */
main{flex:1;margin:6px 0 3px;padding:20px;background:var(--paper);box-shadow:var(--sunken)}
.statusbar{display:flex;gap:3px;font-size:12px}
.statusbar span{flex:1;padding:2px 6px;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.statusbar span+span{flex:none}

/* shared bits */
.banner{padding:36px 0 28px;text-align:center;border-bottom:2px groove var(--face)}
.banner h2{margin:0;font-size:clamp(32px,7vw,64px);line-height:1;letter-spacing:.04em;color:var(--head)}
.banner p{margin:12px 0 0;color:var(--muted)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 18px;min-height:130px;color:var(--ink);text-decoration:none;background:var(--face);box-shadow:var(--raised)}
.panel:hover{background:var(--hover)}
.panel:active{box-shadow:var(--sunken)}
.panel-label{font-size:12px;color:var(--muted);letter-spacing:.15em}
.panel h3{margin:6px 0;font-size:22px;color:var(--head)}
.panel p{margin:0}
@media (max-width:600px){.panels{grid-template-columns:1fr}.file{grid-template-columns:1fr!important}}

/* buttons / tags */
.tag,.open{display:inline-block;padding:3px 12px;background:var(--face);color:var(--ink);text-decoration:none;box-shadow:var(--raised)}
.tag:hover,.open:hover{background:var(--hover)}
.tag:active,.open:active{box-shadow:var(--sunken)}
.tag-list{list-style:none;margin:12px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud{margin-top:28px}
.banner .tag{margin-top:4px}

/* properties-dialog profile */
.props{max-width:900px;font-size:18px;margin:10px auto 30px;padding:6px;background:var(--face);box-shadow:var(--raised),3px 3px 0 rgba(0,0,0,.2)}
.props>input{position:absolute;opacity:0;pointer-events:none}
.props-tabs{display:flex;gap:1px;padding-left:2px;position:relative;top:1px;z-index:1}
.props-tabs label{padding:3px 12px;cursor:pointer;background:var(--face);box-shadow:inset 1px 1px var(--hi),inset -1px 0 var(--dk);margin-top:2px}
#t1:checked~.props-tabs label[for=t1],#t2:checked~.props-tabs label[for=t2],#t3:checked~.props-tabs label[for=t3]{margin-top:0;padding-bottom:5px;font-weight:700}
#t1:focus-visible~.props-tabs label[for=t1],#t2:focus-visible~.props-tabs label[for=t2],#t3:focus-visible~.props-tabs label[for=t3]{outline:1px dotted var(--dk);outline-offset:-4px}
.props-body{padding:24px;background:var(--face);box-shadow:var(--raised);min-height:420px}
.props-head{display:flex;align-items:center;gap:14px;padding-bottom:12px;margin-bottom:12px;border-bottom:2px groove var(--face)}
.props-head .photo{width:140px;padding:2px;flex:none}
.props-name{font-size:30px}
.props-sub{color:var(--muted);font-family:"Courier Prime",monospace}
.pane{display:none}
#t1:checked~.props-body .pane1,#t2:checked~.props-body .pane2,#t3:checked~.props-body .pane3{display:block}
fieldset{margin:0;padding:12px 18px 18px;border:2px groove var(--face)}
legend{padding:0 4px}
dl{display:grid;grid-template-columns:150px 1fr;gap:12px 12px;align-items:center;margin:6px 0 0}
dt{text-align:right}
dd{margin:0}
.field{display:block;padding:3px 6px;background:var(--paper);box-shadow:var(--sunken);overflow-wrap:anywhere}
.props-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.props-btns .open{min-width:100px;text-align:center;margin:0;font-weight:400}
.props-btns .open:first-child{outline:1px solid var(--dk);outline-offset:-4px}
.open.disabled{color:var(--lo);text-shadow:1px 1px var(--hi)}
.photo{position:relative;padding:6px;background:var(--face);box-shadow:var(--raised)}
.photo .img{aspect-ratio:1;background:#888 center/cover;box-shadow:var(--sunken)}

/* projects */
.project .back{color:var(--head);font-size:13px}
.project h2{font-size:clamp(28px,5vw,44px);margin:12px 0 4px;color:var(--head)}
.project .meta{color:var(--muted);margin:0}
.project-body img{max-width:100%;height:auto;padding:3px;background:var(--face);box-shadow:var(--sunken)}
.downloads{margin-top:28px;padding:10px 14px;border:2px groove var(--face)}
.downloads h3{margin:0 0 6px;font-size:15px}
.titlebar-text a{color:inherit;text-decoration:none}
.titlebar-text a:hover{text-decoration:underline}
header{justify-content:center}
nav{justify-content:center}

/* theme toggle (right end of nav bar) */
header{position:relative}
.theme-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:3px 12px;font:inherit;color:var(--ink);background:var(--face);border:0;cursor:pointer;box-shadow:var(--raised)}
.theme-toggle:hover{background:var(--hover)}
.theme-toggle:active{box-shadow:var(--sunken)}
@media (max-width:700px){.theme-toggle{position:static;transform:none}}

/* CVE console ticker in the title bar */
.titlebar{gap:14px;background:#000}
.titlebar-text{position:relative;z-index:1;flex:none;max-width:45%;color:#fff;text-shadow:none}
.cve-ticker{flex:1;min-width:0;overflow:hidden;white-space:nowrap;align-self:stretch;display:flex;align-items:center;
  font:700 13px "Courier Prime",monospace;color:#39ff6a;text-shadow:0 0 6px rgba(57,255,106,.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.cve-track{display:inline-flex;white-space:pre}
.cve-track.run{animation:cve-scroll linear infinite}
@keyframes cve-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cve-track.run{animation:none}}
@media (max-width:700px){.cve-ticker{display:none}}
.cve-track a{color:inherit;text-decoration:none}
.cve-track a:hover{color:#fff;text-decoration:underline}
.cve-ticker:hover .cve-track.run{animation-play-state:paused}

/* centred project pages */
.project{text-align:center}
.project .tag-list{justify-content:center}
.project-body{max-width:820px;margin:0 auto}
.project-body picture,.project-body img{display:block;margin:16px auto}
.project-body ul,.project-body ol{list-style-position:inside;padding:0}
.project-body pre,.project-body code{text-align:left}
.project-body pre{display:block;margin:16px auto;padding:10px 14px;overflow-x:auto;box-shadow:var(--sunken)}
.project-body pre code{white-space:pre}
.downloads{max-width:820px;margin:28px auto 0}
.downloads ul{list-style:none;padding:0}