:root{color-scheme:light dark;--bg:#f2f1ee;--fg:#1c1c1c;--muted:#5a5a5a;--card:#fffefc;--line:#dad8d3;--chip:#e9e7e2;
--band:#2a2a2a;--on-band:#f0f0f0;--muted-band:#b8b8b8;--accent-band:#cfcfcf;--spec:#6b6b6b;
--accent:#1f6b45;--link:#1a5c3b;--on-accent:#fff;--beta:#7a3f00;--beta-bg:#f9e3c2;--shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06);
--mono:ui-monospace,"SF Mono",Menlo,"Courier New",monospace;
--brand:"Avenir Next","Century Gothic",Futura,"Trebuchet MS",system-ui,sans-serif;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--r:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111111;--fg:#ebebeb;--muted:#a6a6a6;--card:#191919;
--line:#2c2c2c;--chip:#252525;--band:#1e1e1e;--spec:#8c8c8c;--accent:#7fd1a0;--link:#7fd1a0;--on-accent:#0e1210;--beta:#ffcb8a;--beta-bg:#3b2a10;--shadow:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--bg:#111111;--fg:#ebebeb;--muted:#a6a6a6;--card:#191919;--line:#2c2c2c;--chip:#252525;--band:#1e1e1e;--spec:#8c8c8c;
--accent:#7fd1a0;--link:#7fd1a0;--on-accent:#0e1210;--beta:#ffcb8a;--beta-bg:#3b2a10;--shadow:0 1px 2px rgba(0,0,0,.4)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans)}
a{color:var(--link);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:18px 0;background:var(--band);color:var(--on-band);
box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.brand{display:flex;align-items:center;gap:12px;color:var(--on-band);text-decoration:none;font:600 1.75rem/1.1 var(--brand);letter-spacing:.02em}
.brand::before{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,var(--accent-band) 0 22%,transparent 24%),
conic-gradient(from 200deg,var(--accent-band),var(--band) 30%,var(--accent-band) 60%,var(--band) 85%,var(--accent-band));
box-shadow:inset 0 0 0 2px var(--accent-band)}
.brand small{display:block;font:400 .78rem/1.3 var(--mono);letter-spacing:0;margin:0;color:var(--muted-band)}
.bw{display:block}
.brand small.spread{display:flex;justify-content:space-between;white-space:nowrap;margin:-3px 3.5px 0}
.lang{font:.85rem var(--mono);color:var(--muted-band);padding:.4rem .7rem;border:1px solid var(--muted-band);border-radius:999px;text-decoration:none}
.lang:hover{color:var(--on-band);border-color:var(--on-band)}
.menu{display:flex;flex-wrap:wrap;gap:.25rem 1.4rem;margin:0 auto 0 2.2rem}
.menu a{color:var(--muted-band);text-decoration:none;font:500 .95rem var(--brand);min-height:44px;display:inline-flex;align-items:center}
.menu a:hover,.menu a[aria-current]{color:var(--on-band)}
.menu a[aria-current]{text-decoration:underline;text-underline-offset:.35em}
.portrait{width:112px;height:112px;border-radius:50%;object-fit:cover;display:block;flex:none;border:1px solid var(--line)}
.hero .lead{display:flex;gap:22px;align-items:center}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center;padding:40px 0 12px}
.hero .intro{margin:0;font-size:1rem;line-height:1.6;max-width:34rem;color:var(--muted)}
.spectrum{width:100%;height:auto;color:var(--spec)}
.spectrum rect{fill:currentColor}
.intro{max-width:46rem;color:var(--muted);margin:28px 0 8px;font-size:1rem}
nav.areas{display:flex;flex-wrap:wrap;gap:.5rem;margin:22px 0 8px}
nav.areas a{font:.85rem var(--mono);border:1px solid var(--line);background:var(--card);padding:.5rem .95rem;min-height:44px;display:inline-flex;align-items:center;
color:var(--fg);text-decoration:none;border-radius:999px}
nav.areas a:hover{border-color:var(--accent);color:var(--link)}
section.area{padding:36px 0 8px;margin-top:36px;border-top:1px dashed var(--muted)}
section.area h2{font:700 1.3rem/1.3 var(--mono);margin:0 0 6px;letter-spacing:.01em}
section.area>p{color:var(--muted);max-width:46rem;margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
display:flex;flex-direction:column;min-width:0}
.card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--chip);border-bottom:1px solid var(--line)}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{margin:0;font-size:1.12rem;line-height:1.3}
.card p{margin:0;font-size:.95rem}
.card .hint{color:var(--muted);font-size:.88rem}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:600 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;padding:5px 8px;background:var(--chip);color:var(--muted);border-radius:4px}
.chip.beta{background:var(--beta-bg);color:var(--beta)}
.actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding-top:8px}
.btn{font:600 .95rem var(--sans);background:var(--accent);color:var(--on-accent);text-decoration:none;padding:.65rem 1.2rem;
min-height:44px;display:inline-flex;align-items:center;border-radius:8px;border:0}
.btn:hover{filter:brightness(1.08)}
.actions a:not(.btn){font-size:.9rem;padding:.5rem 0}
.more{margin:18px 0 0;font:.9rem var(--mono)}
.area-link{margin:-8px 0 18px;font:.9rem var(--mono)}
footer{margin-top:56px;padding:24px 0 36px;background:var(--band);color:var(--muted-band);font:.85rem var(--mono);
box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
footer a{color:var(--muted-band)}
footer a:hover{color:var(--on-band)}
footer span{margin-right:auto}
.text{max-width:44rem;padding-bottom:20px}
.text h1{font:700 1.6rem var(--mono);margin:36px 0 12px}
.text h2{font:700 1.1rem var(--mono);margin:28px 0 8px}
.form{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:.92rem;color:var(--muted)}
.form input,.form select,.form textarea{font:1rem var(--sans);color:var(--fg);background:var(--card);
border:1px solid var(--line);padding:.65rem .75rem;border-radius:8px;width:100%;min-height:44px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.form .btn{align-self:flex-start;cursor:pointer;font-size:1rem;padding:.7rem 1.6rem}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:.8rem 1rem;border:1px solid var(--line);border-radius:8px}.notice.ok{border-color:var(--accent)}
.notice.bad{border-color:var(--beta);color:var(--beta)}
@media (max-width:760px){.menu{order:3;flex-basis:100%;margin:0}header.top{flex-wrap:wrap}.hero{grid-template-columns:1fr;gap:20px;padding-top:28px}.spectrum{max-height:90px}}
@media (max-width:520px){header.top{align-items:flex-start}.brand{font-size:1.3rem}.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.card{transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.spectrum rect{transform-box:fill-box;transform-origin:center bottom;animation:pulse 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.17s)}}
@keyframes pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}