@font-face{font-family:'Unbounded';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/unbounded-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/unbounded-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/unbounded-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --ground:#F4F4F2; --ink:#0B0B0C; --ink-2:#3A3B3E; --muted:#6C6D71; --line:rgba(11,11,12,.12);
  --blob-a:rgba(11,11,12,.55); --blob-b:rgba(11,11,12,.22);
  --glass-top:rgba(255,255,255,.55); --glass-bot:rgba(255,255,255,.18);
  --glass-edge:rgba(255,255,255,.85); --glass-edge-2:rgba(11,11,12,.10);
  --glass-shadow:0 30px 60px -30px rgba(11,11,12,.45), 0 2px 6px -2px rgba(11,11,12,.12);
  --spec:rgba(255,255,255,.75);
  --chip:rgba(255,255,255,.45);
  --focus:#0B0B0C;
  --f-display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r-lg:34px; --r-md:22px; --r-sm:999px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#050506; --ink:#F2F2F0; --ink-2:#C9CACC; --muted:#8B8C90; --line:rgba(242,242,240,.12);
    --blob-a:rgba(242,242,240,.42); --blob-b:rgba(242,242,240,.16);
    --glass-top:rgba(255,255,255,.12); --glass-bot:rgba(255,255,255,.03);
    --glass-edge:rgba(255,255,255,.38); --glass-edge-2:rgba(255,255,255,.06);
    --glass-shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 2px 6px -2px rgba(0,0,0,.6);
    --spec:rgba(255,255,255,.28); --chip:rgba(255,255,255,.07); --focus:#F2F2F0;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#050506; --ink:#F2F2F0; --ink-2:#C9CACC; --muted:#8B8C90; --line:rgba(242,242,240,.12);
  --blob-a:rgba(242,242,240,.42); --blob-b:rgba(242,242,240,.16);
  --glass-top:rgba(255,255,255,.12); --glass-bot:rgba(255,255,255,.03);
  --glass-edge:rgba(255,255,255,.38); --glass-edge-2:rgba(255,255,255,.06);
  --glass-shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 2px 6px -2px rgba(0,0,0,.6);
  --spec:rgba(255,255,255,.28); --chip:rgba(255,255,255,.07); --focus:#F2F2F0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s ease,color .5s ease}
::selection{background:var(--ink);color:var(--ground)}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---------- ambient liquid ---------- */
#liquid{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}

.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);padding-block:0 60px}

/* ---------- glass material ---------- */
.glass{
  position:relative;isolation:isolate;
  background:linear-gradient(160deg,var(--glass-top),var(--glass-bot));
  -webkit-backdrop-filter:blur(var(--blur,22px)) saturate(170%);
  backdrop-filter:blur(var(--blur,22px)) saturate(170%);
  border-radius:var(--r-lg);
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-edge-2),
    inset 0 0 0 1px var(--glass-edge-2),
    var(--glass-shadow);
}
/* specular highlight that follows the pointer */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(420px circle at var(--mx,30%) var(--my,0%), var(--spec), transparent 45%);
  opacity:.55;transition:opacity .4s ease;
}
/* rim light */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--glass-edge) 0%,transparent 30%,transparent 70%,var(--glass-edge) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;
}

/* ---------- nav ---------- */
.nav-shell{position:sticky;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:20;display:flex;justify-content:center;margin-top:14px}
.nav{display:flex;align-items:center;gap:4px;padding:6px;border-radius:var(--r-sm);max-width:100%}
.nav .mark{width:44px;height:36px;display:grid;place-items:center;color:var(--ink);margin-right:4px}
.nav .mark svg{width:34px;height:auto}
.nav a.lnk{font-family:var(--f-mono);font-size:12.5px;text-decoration:none;padding:9px 14px;border-radius:var(--r-sm);color:var(--ink-2);transition:background .25s,color .25s;white-space:nowrap}
.nav a.lnk:hover{background:var(--chip);color:var(--ink)}
.theme-btn{appearance:none;border:0;background:var(--ink);color:var(--ground);width:36px;height:36px;border-radius:50%;cursor:pointer;display:grid;place-items:center;margin-left:4px;flex:none}
.theme-btn svg{width:16px;height:16px}
.nav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}

/* ---------- hero ---------- */
.hero{margin-top:clamp(36px,7vw,80px);display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(20px,3vw,36px);align-items:stretch}
.hero-main{padding:clamp(26px,4vw,52px);display:flex;flex-direction:column;gap:22px;overflow:hidden}
.prompt{font-family:var(--f-mono);font-size:13px;color:var(--muted);letter-spacing:.01em}
.prompt b{color:var(--ink);font-weight:500}
.caret{display:inline-block;width:.6em;height:1.05em;background:var(--ink);vertical-align:-2px;margin-left:3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sig{width:min(300px,62%);color:var(--ink);margin-block:-6px -18px;align-self:flex-start}
.sig svg{width:100%;height:auto;display:block;clip-path:inset(0 100% 0 0);animation:sign 2.2s cubic-bezier(.65,.05,.25,1) .25s forwards}
@keyframes sign{to{clip-path:inset(0 0 0 0)}}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,7.2vw,92px);line-height:.92;letter-spacing:-.035em;margin:0;text-wrap:balance}
h1 .thin{font-weight:300;display:block}
.role{font-family:var(--f-display);font-weight:300;font-size:clamp(15px,1.7vw,20px);letter-spacing:-.01em;margin:0;color:var(--ink-2);max-width:32ch}
.about{max-width:56ch;margin:0;color:var(--ink-2);font-size:16.5px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{font-family:var(--f-mono);font-size:13px;text-decoration:none;padding:13px 20px;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:0;transition:transform .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--ink);color:var(--ground)}
.btn.glass{color:var(--ink);border-radius:var(--r-sm)}

.hero-side{display:grid;grid-template-rows:1fr auto;gap:clamp(20px,3vw,36px)}
.lens{padding:18px;display:grid;place-items:center;overflow:hidden;min-height:340px}
.portrait{position:relative;width:min(100%,380px);aspect-ratio:1;max-width:100%;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--glass-edge-2),0 30px 60px -25px rgba(0,0,0,.55)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.08) brightness(1.02);transform:scale(1.04);transition:filter .8s ease,transform .8s ease}
.lens:hover .portrait img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1)}
/* glass dome over the photo */
.portrait::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(120% 70% at 30% 8%,rgba(255,255,255,.55),transparent 40%),
    radial-gradient(90% 60% at 70% 110%,rgba(255,255,255,.22),transparent 55%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 -10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.35);mix-blend-mode:screen}
.lens-cap{position:absolute;left:18px;bottom:16px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}

.status{padding:20px 22px;display:grid;gap:10px;font-family:var(--f-mono);font-size:12.5px}
.status .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:9px}
.status .row:last-child{border:0;padding-bottom:0}
.status .k{color:var(--muted)}
.status .v{text-align:right}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 0 var(--ink);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 50%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- sections ---------- */
section.block{margin-top:clamp(70px,10vw,130px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 30px;margin-bottom:28px}
h2{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4.4vw,52px);letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
.sec-head .prompt{order:-1;width:100%}
.sec-note{color:var(--muted);max-width:40ch;margin:0;font-size:15px}

/* experience */
.timeline{display:grid;gap:18px}
.job{padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:200px 1fr;gap:10px 34px}
.job .when{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.proc{font-family:var(--f-mono);font-size:11px;padding:4px 10px;border-radius:var(--r-sm);background:var(--chip);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);white-space:nowrap}
.proc.run{background:var(--ink);color:var(--ground);box-shadow:none}
.job h3{font-family:var(--f-display);font-weight:500;font-size:clamp(18px,2vw,23px);letter-spacing:-.02em;margin:0;line-height:1.2}
.job .co{margin:4px 0 12px;color:var(--ink-2);font-weight:600}
.job .co span{font-weight:400;color:var(--muted)}
.job p{margin:0 0 12px;color:var(--ink-2);max-width:62ch}
.job ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:6px 26px}
.job li{position:relative;padding-left:18px;color:var(--ink-2);font-size:15px}
.job li::before{content:"›";position:absolute;left:0;font-family:var(--f-mono);color:var(--muted)}
.job.compact ul{grid-template-columns:1fr}

/* skills */
.skills{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.panel{padding:clamp(22px,3vw,32px)}
.panel h3{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 16px;border-radius:var(--r-sm);background:var(--chip);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--line);font-size:14.5px;font-weight:500;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s}
.chip:hover{transform:translateY(-3px) scale(1.03)}
.chip small{font-family:var(--f-mono);font-size:11px;color:var(--muted);font-weight:400;margin-left:6px}
.soft{display:grid;gap:0}
.soft div{padding:11px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-weight:500}
.soft div:last-child{border:0}
.soft div span{font-family:var(--f-mono);font-size:11px;color:var(--muted);font-weight:400}

/* certs */
.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.cert{padding:20px 22px;border-radius:var(--r-md);display:flex;flex-direction:column;gap:6px;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.cert:hover{transform:translateY(-4px)}
.cert .top{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.cert h4{margin:4px 0 0;font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.005em}
.cert .id{font-family:var(--f-mono);font-size:11px;color:var(--muted);word-break:break-all;margin-top:auto;padding-top:8px}
.cert .proc{align-self:flex-start;margin-top:4px}
.filters{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:var(--r-sm);width:max-content;max-width:100%;margin-bottom:18px}
.filters button{appearance:none;border:0;background:transparent;color:var(--ink-2);font-family:var(--f-mono);font-size:12.5px;padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;transition:background .25s,color .25s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}

/* education + languages */
.edu{display:grid;gap:26px 34px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.edu-item{display:grid;grid-template-columns:100px 1fr;gap:4px 18px}
.edu-item .yr{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);padding-top:3px}
.edu-item h4{margin:0;font-size:17px;font-weight:600;line-height:1.3}
.edu-item p{margin:4px 0 0;color:var(--ink-2);font-size:15px}
.grade{font-family:var(--f-mono);font-size:12px;margin-top:8px;display:inline-block}
.grade b{font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-.02em}
.langs{display:grid;gap:26px 34px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.lang .l{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-weight:600}
.lang .l span{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:400}
.cefr{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.cefr i{height:8px;border-radius:4px;background:var(--line)}
.cefr i.on{background:var(--ink)}
.scale{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;font-family:var(--f-mono);font-size:10px;color:var(--muted);margin-top:4px;text-align:center}

/* contact */
.contact{padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;overflow:hidden}
.contact h2{font-size:clamp(34px,6vw,76px)}
.contact .big-sig{position:absolute;right:-40px;bottom:-60px;width:min(520px,70%);color:var(--ink);opacity:.06;pointer-events:none;z-index:-1}
.lines{display:grid;gap:12px}
.line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 20px;border-radius:var(--r-md);background:var(--chip);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--line);min-width:0}
.line .t{min-width:0}
.line .k{font-family:var(--f-mono);font-size:11px;color:var(--muted);display:block}
.line .v{font-weight:600;overflow-wrap:anywhere;user-select:all}
.line a.v{text-decoration:none;user-select:auto}
.line a.v:hover{text-decoration:underline}
.mini{appearance:none;border:0;background:var(--ink);color:var(--ground);font-family:var(--f-mono);font-size:11.5px;padding:9px 14px;border-radius:var(--r-sm);cursor:pointer;flex:none;text-decoration:none}

footer{margin-top:60px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}


/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero,.skills,.contact{grid-template-columns:1fr}
  .hero-side{grid-template-rows:auto auto}
  .lens{min-height:0;padding:26px}
  .portrait{width:min(78%,320px)}
  .job{grid-template-columns:1fr}
  .job .when{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (max-width:560px){
  .nav a.lnk{padding:9px 10px;font-size:12px}
  .nav .mark{display:none}
  .edu-item{grid-template-columns:1fr}
  .status .row{flex-direction:column;gap:2px}
  .status .v{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .sig svg{clip-path:none}
}

/* ---------- extra section types ---------- */
.photo-color .portrait img{filter:none;transform:none}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.project{padding:24px 26px;border-radius:var(--r-md);display:flex;flex-direction:column;gap:10px}
.project .top{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.project .top a{color:var(--ink);text-decoration:none}
.project .top a:hover{text-decoration:underline}
.project h3{font-family:var(--f-display);font-weight:500;font-size:20px;letter-spacing:-.02em;margin:0;line-height:1.2}
.project p{margin:0;color:var(--ink-2);font-size:15px}
.project .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.prose p{margin:0 0 14px;max-width:68ch;color:var(--ink-2);font-size:16.5px}
.prose p:last-child{margin:0}
.lang .scale{margin-top:5px}
.block,#top{scroll-margin-top:96px}
.editing .sig svg{animation:none;clip-path:none}

/* ---------- site builder ---------- */
.adm-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;appearance:none;border:0;cursor:pointer;
  background:var(--ink);color:var(--ground);font-family:var(--f-mono);font-size:12.5px;padding:13px 18px;border-radius:999px;display:flex;align-items:center;gap:8px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.adm-fab .dd{width:7px;height:7px;border-radius:50%;background:var(--ground)}
.editing .adm-fab{display:none}
.adm{position:fixed;z-index:50;top:12px;right:12px;bottom:12px;width:420px;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ground) 80%,transparent),color-mix(in srgb,var(--ground) 66%,transparent));
  -webkit-backdrop-filter:blur(34px) saturate(170%);backdrop-filter:blur(34px) saturate(170%);font-size:14px}
.adm::after{opacity:.35}
body.editing{padding-right:444px}
.adm-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 18px 12px 22px}
.adm-head strong{font-family:var(--f-display);font-weight:500;font-size:18px;letter-spacing:-.02em;display:block}
.adm-head .prompt{font-size:11.5px}
.icon-btn{appearance:none;border:0;cursor:pointer;width:34px;height:34px;border-radius:50%;background:var(--chip);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;display:grid;place-items:center;flex:none}
.icon-btn:disabled{opacity:.3;cursor:default}
.adm-tabs{display:flex;gap:4px;margin:0 18px;padding:4px;border-radius:999px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.adm-tabs button{flex:1;appearance:none;border:0;background:transparent;color:var(--ink-2);font-family:var(--f-mono);font-size:12px;padding:8px 10px;border-radius:999px;cursor:pointer}
.adm-tabs button[aria-selected="true"]{background:var(--ink);color:var(--ground)}
.adm-body{flex:1;overflow-y:auto;padding:16px 18px 20px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.adm-foot{border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.adm-status{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);min-width:0;flex:1 1 150px}
.adm-status.err{color:var(--ink);font-weight:500}
.adm-status .pip{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:1px}
.adm-status.dirty .pip{background:var(--ink)}
.adm-foot .acts{display:flex;gap:8px}
.b{appearance:none;border:0;cursor:pointer;font-family:var(--f-mono);font-size:12px;padding:10px 15px;border-radius:999px;background:var(--chip);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.b.solid{background:var(--ink);color:var(--ground);box-shadow:none}
.b.danger[data-armed]{background:var(--ink);color:var(--ground)}
.b:disabled{opacity:.4;cursor:default}
.b.wide{width:100%}
.adm h5{margin:6px 0 0;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hint{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
.fld{display:grid;gap:6px}
.fld>label{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.fld.row{grid-template-columns:auto 1fr;align-items:center;gap:10px}
.fld.row>label{font-family:var(--f-body);font-size:14px;color:var(--ink)}
.adm input[type=text],.adm textarea,.adm select{font:inherit;font-size:14px;color:var(--ink);background:var(--chip);border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%;min-width:0}
.adm textarea{resize:vertical;line-height:1.5}
.adm input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink);margin:0}
.adm input[type=range]{width:100%;accent-color:var(--ink)}
.sec-list{display:flex;flex-direction:column;gap:8px}
.sec-card{border-radius:16px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.sec-card.open{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sec-card.off .sec-name{opacity:.45}
.sec-row,.item-row{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 4px}
.sec-name,.item-name{flex:1;min-width:0;appearance:none;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;padding:6px 8px;font:inherit;display:flex;flex-direction:column;gap:1px;border-radius:10px}
.sec-name .ty{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.sec-name span:last-child,.item-name span{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-name span{font-weight:500}
.tools{display:flex;gap:4px;flex:none}
.tools .icon-btn{width:30px;height:30px;font-size:12px}
.sec-body{padding:6px 14px 16px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line)}
.items{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.items-h{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.item{border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);background:color-mix(in srgb,var(--ground) 50%,transparent)}
.item.open{box-shadow:inset 0 0 0 1.5px var(--ink)}
.item-body{padding:4px 12px 14px;display:flex;flex-direction:column;gap:10px}
.add-row{display:flex;gap:8px}
.add-row select{flex:1}
.thumb{display:flex;align-items:center;gap:12px}
.thumb img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 1px var(--line)}
.thumb .logo-prev{width:90px;height:64px;color:var(--ink);display:grid;place-items:center;border-radius:12px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line);padding:8px}
.thumb .logo-prev svg{width:100%;height:100%}
.thumb .btns{display:flex;flex-wrap:wrap;gap:6px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){
  body.editing{padding-right:0;padding-bottom:62vh}
  .adm{left:8px;right:8px;top:auto;bottom:8px;width:auto;height:60vh;border-radius:22px}
}

/* ---------- dedicated pages ---------- */
.page-head{margin-top:clamp(36px,7vw,80px);padding:clamp(26px,4vw,52px);display:flex;flex-direction:column;gap:18px;overflow:hidden}
.page-head h1{font-size:clamp(34px,6vw,76px)}
.page-head .about{font-size:17px}
.back{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);text-decoration:none;align-self:flex-start;padding:8px 14px;border-radius:999px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.back:hover{color:var(--ink)}
.nav a.lnk[aria-current="page"]{background:var(--ink);color:var(--ground)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.shot{margin:0;padding:10px;border-radius:var(--r-md);display:flex;flex-direction:column;gap:10px}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;display:block;background:var(--chip)}
.shot figcaption{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding:0 6px 4px}
.panel.prose h3{font-family:var(--f-display);font-weight:500;font-size:20px;letter-spacing:-.02em;text-transform:none;color:var(--ink);margin:22px 0 10px}
.panel.prose h3:first-child{margin-top:0}
.prose ul{margin:0 0 14px;padding-left:20px;color:var(--ink-2);max-width:68ch}
.prose li{margin:4px 0}
.prose code{font-family:var(--f-mono);font-size:.88em;padding:2px 6px;border-radius:6px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.prose a{color:var(--ink);text-underline-offset:3px}
.notfound{margin-top:clamp(60px,10vw,120px);padding:clamp(28px,5vw,60px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}

/* ---------- admin: pages + login ---------- */
.ctx{display:flex;gap:8px;align-items:center;margin:0 18px 10px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.ctx select{flex:1}
.adm .ctx select{font-size:13px;padding:7px 10px}
.img-field{display:flex;align-items:center;gap:10px}
.img-field img{width:64px;height:48px;object-fit:cover;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line)}
.ver{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;padding:8px 10px;border-radius:10px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding-block:40px}
.login{width:min(100%,400px);padding:34px 30px;display:flex;flex-direction:column;gap:16px}
.login .mark{width:120px;color:var(--ink)}
.login .mark svg{width:100%;height:auto;display:block}
.login h1{font-size:28px;line-height:1.1}
.login form{display:flex;flex-direction:column;gap:14px}
.login input{font:inherit;font-size:15px;color:var(--ink);background:var(--chip);border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
.login .fld>label{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.login .err{font-family:var(--f-mono);font-size:12px;padding:10px 12px;border-radius:12px;background:var(--ink);color:var(--ground);margin:0}
.login .btn{justify-content:center}
.adm-user{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.adm-head .tools{gap:6px;align-items:center}
.adm-head .b{padding:8px 11px;font-size:11.5px;text-decoration:none}
.adm a.b{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.adm code{font-family:var(--f-mono);font-size:.92em}

/* ---------- privacy notice ---------- */
.notice{position:fixed;z-index:30;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100% - 36px));
  padding:16px 16px 16px 20px;border-radius:22px;display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.5;
  animation:notice-in .6s cubic-bezier(.2,.8,.2,1) .8s both}
.notice p{margin:0;color:var(--ink-2)}
.notice a{color:var(--ink);text-underline-offset:3px;white-space:nowrap}
.notice .btn{padding:11px 18px;flex:none}
@keyframes notice-in{from{transform:translateY(12px);opacity:0}}
.editing .notice{left:18px;bottom:18px}
footer .foot-link{color:var(--muted);text-underline-offset:3px}
footer .foot-link:hover{color:var(--ink)}
@media (max-width:560px){.notice{flex-direction:column;align-items:stretch;gap:12px}.notice .btn{justify-content:center}}

/* ---------- maintenance ---------- */
.maint{gap:18px}
.maint .mark{width:140px}
.maint-state{align-self:flex-start}
.maint h1{font-size:clamp(32px,6vw,44px)}
.maint .about{margin:0}
.maint-until{margin:0;font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.maint .line{margin-top:4px}
.maint-pill{position:fixed;z-index:45;top:calc(env(safe-area-inset-top,0px) + 76px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--ground);font-family:var(--f-mono);font-size:12px;padding:9px 16px;border-radius:999px;text-decoration:none;white-space:nowrap;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.maint-box{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.maint-box.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.maint-row{display:flex;gap:10px;align-items:center}
.maint-row .hint{flex:1}
.maint-badge{appearance:none;border:0;cursor:pointer;margin-left:6px;vertical-align:3px}
.adm input[type=datetime-local]{font:inherit;font-size:14px;color:var(--ink);background:var(--chip);border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%}