:root{
  --paper:oklch(0.972 0.007 90); --surface:oklch(0.995 0.003 90);
  --ink:oklch(0.23 0.012 70); --muted:oklch(0.52 0.010 70); --faint:oklch(0.70 0.008 80);
  --line:oklch(0.90 0.007 85); --line2:oklch(0.84 0.008 85);
  --accent:oklch(0.47 0.058 145); --accent-2:oklch(0.40 0.06 145); --accent-soft:oklch(0.945 0.020 145);
  --sans:'Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
:root[data-theme="dark"]{
  --paper:oklch(0.185 0.008 80); --surface:oklch(0.225 0.009 80);
  --ink:oklch(0.945 0.008 90); --muted:oklch(0.68 0.010 85); --faint:oklch(0.52 0.010 80);
  --line:oklch(0.30 0.008 80); --line2:oklch(0.36 0.009 80);
  --accent:oklch(0.72 0.09 148); --accent-2:oklch(0.80 0.09 148); --accent-soft:oklch(0.28 0.03 148);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:oklch(0.185 0.008 80); --surface:oklch(0.225 0.009 80);
  --ink:oklch(0.945 0.008 90); --muted:oklch(0.68 0.010 85); --faint:oklch(0.52 0.010 80);
  --line:oklch(0.30 0.008 80); --line2:oklch(0.36 0.009 80);
  --accent:oklch(0.72 0.09 148); --accent-2:oklch(0.80 0.09 148); --accent-soft:oklch(0.28 0.03 148);
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); min-height:100vh; font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; letter-spacing:-0.006em}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft)}

.hdr{border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
  background:color-mix(in oklab,var(--paper) 92%, transparent); backdrop-filter:blur(8px)}
.hdr__in{max-width:1320px; margin:0 auto; padding:22px 40px 18px; display:flex; align-items:flex-end; gap:32px}
.mark{margin-right:auto; line-height:1}
.mark__n{font-size:19px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase}
.mark__t{display:block; font-size:10.5px; letter-spacing:0.34em; text-transform:uppercase; color:var(--muted); margin-top:8px}
.tools{display:flex; align-items:center; gap:10px}
.srch{position:relative}
.srch input{width:230px; padding:9px 13px 9px 32px; border:1px solid var(--line2); border-radius:2px;
  background:transparent; color:var(--ink); font:inherit; font-size:13px; outline:none; transition:border-color .2s, width .25s}
.srch input:focus{border-color:var(--accent); width:270px}
.srch::before{content:''; position:absolute; left:12px; top:50%; width:12px; height:12px; transform:translateY(-50%);
  border:1.5px solid var(--faint); border-radius:50%; box-shadow:5px 5px 0 -4px var(--faint)}
.tgl{border:1px solid var(--line2); background:transparent; color:var(--ink); width:36px; height:36px;
  border-radius:2px; cursor:pointer; font-size:13px}

.nav{max-width:1320px; margin:0 auto; padding:16px 40px 0; display:flex; gap:26px; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{background:none; border:none; padding:6px 0 12px; color:var(--muted); cursor:pointer; font:inherit;
  font-size:13.5px; white-space:nowrap; border-bottom:2px solid transparent; transition:color .18s, border-color .18s}
.nav button:hover{color:var(--ink)}
.nav button.on{color:var(--ink); border-color:var(--accent); font-weight:600}
.nav button sup{font-size:10px; color:var(--faint); font-weight:400; margin-left:3px; top:-.5em}

.intro{max-width:1320px; margin:0 auto; padding:30px 40px 10px; display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap}
.intro h1{font-size:14px; font-weight:600; letter-spacing:0.02em; color:var(--ink); margin:0}
.intro span{font-size:12.5px; color:var(--muted)}

.grid{max-width:1320px; margin:0 auto; padding:20px 40px 70px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:44px 30px}
.item{cursor:pointer; display:flex; flex-direction:column}
.item__f{position:relative; aspect-ratio:1/1; background:var(--surface); overflow:hidden; border:1px solid var(--line)}
.item__f img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1)}
.item:hover .item__f img{transform:scale(1.045)}
.item__see{position:absolute; left:0; right:0; bottom:0; padding:11px 14px; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--surface); background:color-mix(in oklab,var(--ink) 82%,transparent);
  transform:translateY(101%); transition:transform .4s cubic-bezier(.16,1,.3,1)}
.item:hover .item__see{transform:translateY(0)}
.item__b{padding:14px 2px 0}
.item__cat{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.item__t{font-size:15.5px; font-weight:550; margin:5px 0 8px; line-height:1.25}
.item__r{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.item__p{font-size:14.5px; font-weight:650}
.item__p em{font-style:normal; font-weight:450; color:var(--muted); font-size:12px}
.item__v{font-size:11.5px; color:var(--muted); margin-top:9px}

.empty{max-width:1320px; margin:0 auto; padding:80px 40px; text-align:center; color:var(--muted)}
.ft{border-top:1px solid var(--line); max-width:1320px; margin:0 auto; padding:26px 40px 60px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--faint)}

.dt{position:fixed; inset:0; z-index:60; background:var(--paper); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  opacity:0; visibility:hidden; transition:opacity .3s}
.dt.on{opacity:1; visibility:visible}
.dt__close{position:absolute; top:22px; right:26px; z-index:3; width:40px; height:40px; border-radius:2px;
  border:1px solid var(--line2); background:var(--surface); color:var(--ink); cursor:pointer; font-size:15px}
.dt__g{background:var(--surface); border-right:1px solid var(--line); padding:52px; display:flex; flex-direction:column; overflow:auto}
.dt__main{flex:1; min-height:0; display:flex; align-items:center; justify-content:center}
.dt__main img{max-width:100%; max-height:64vh; object-fit:contain}
.dt__th{display:flex; gap:9px; margin-top:20px; flex-wrap:wrap; justify-content:center}
.dt__th img{width:60px; height:60px; object-fit:cover; border:1px solid var(--line2); cursor:pointer; opacity:.5; transition:opacity .2s}
.dt__th img.on{opacity:1; outline:1.5px solid var(--accent); outline-offset:-1px}
.dt__i{padding:64px 60px; overflow:auto; max-width:560px}
.dt__cat{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); font-weight:600}
.dt__t{font-size:30px; line-height:1.1; font-weight:600; letter-spacing:-.02em; margin:14px 0 18px; text-wrap:balance}
.dt__p{font-size:22px; font-weight:650; margin-bottom:6px}
.dt__p s{color:var(--faint); font-weight:400; font-size:15px; margin-left:10px}
.dt__pn{font-size:12px; color:var(--faint); margin-bottom:28px}
.dt__lab{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.vars{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:30px}
.vars button{border:1px solid var(--line2); background:transparent; color:var(--ink); border-radius:2px;
  padding:8px 12px; font:inherit; font-size:12.5px; cursor:pointer; transition:border-color .18s, background .18s}
.vars button:hover{border-color:var(--muted)}
.vars button.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-2); font-weight:600}
.spx{width:100%; border-collapse:collapse; font-size:13px}
.spx td{padding:11px 0; border-top:1px solid var(--line); vertical-align:top}
.spx tr:last-child td{border-bottom:1px solid var(--line)}
.spx td:first-child{color:var(--muted); width:46%; padding-right:16px}
.spx td:last-child{font-weight:550; text-align:right}

@media (max-width:860px){
  .hdr__in,.nav,.intro,.grid,.ft{padding-left:22px; padding-right:22px}
  .dt{grid-template-columns:1fr; overflow:auto}
  .dt__g{border-right:none; border-bottom:1px solid var(--line); padding:40px 22px}
  .dt__i{padding:36px 22px}
  .dt__t{font-size:24px}
  .srch input{width:150px}.srch input:focus{width:170px}
}