:root{
  --bg:#f2f6f7; --surface:#ffffff; --fg:#0f1c20; --muted:#566a70; --line:#d1dde0;
  --accent:#037a98; --accent-fg:#ffffff; --band:#101517; --band-fg:#eef6f8; --aqua:#86d3cc;
  --r:#b3261e; --g:#1d6b45; --o:#9a5b00; --y:#8a6a00; --b:#1f5fbf; --v:#7a3fb0; --hero-a:#050607; --hero-b:#04667f; --nav:#182226; --foot:#07090a; --foot-link:#86d3cc;
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0e10; --surface:#12191c; --fg:#e8f1f3; --muted:#98adb3; --line:#25343a;
  --accent:#3fc3e3; --accent-fg:#021a21; --band:#1a2428; --band-fg:#eef6f8;
  --r:#ff8a80; --g:#58c08a; --o:#f0b45a; --y:#e6c35a; --b:#6fa8ff; --v:#c09bff; --hero-a:#030404; --hero-b:#035066; --nav:#141d21; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a0e10; --surface:#12191c; --fg:#e8f1f3; --muted:#98adb3; --line:#25343a;
  --accent:#3fc3e3; --accent-fg:#021a21; --band:#1a2428; --band-fg:#eef6f8;
  --r:#ff8a80; --g:#58c08a; --o:#f0b45a; --y:#e6c35a; --b:#6fa8ff; --v:#c09bff; --hero-a:#030404; --hero-b:#035066; --nav:#141d21; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--f-body);padding-inline:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{width:100%;max-width:1100px;margin-inline:auto;padding-inline:16px}

header.top{background:linear-gradient(180deg,var(--hero-a) 0%,var(--hero-a) 45%,var(--hero-b) 100%);color:#fff;position:relative}
.top .row{display:flex;align-items:center;gap:20px;padding-block:22px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:#fff;min-width:0}
.brand img{flex:none;width:64px;height:64px;display:block}
.brand b{display:block;font:700 clamp(30px,6vw,44px)/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.brand small{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:4px}
.tools{margin-left:auto;display:flex;gap:10px;align-items:center;position:relative}
.btn{font:600 13px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);cursor:pointer;border-radius:2px;text-decoration:none;display:inline-block;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.burger{display:none}
nav.main{background:var(--nav);border-top:1px solid rgba(255,255,255,.12)}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
nav.main li{position:relative}
nav.main a,nav.main button.nv{display:block;color:#fff;font:600 15px var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:12px 14px;text-decoration:none;background:none;border:0;cursor:pointer}
nav.main a:hover,nav.main button.nv:hover,nav.main a[aria-current="page"]{background:rgba(255,255,255,.1)}

.band{background:var(--band);color:var(--band-fg);text-align:center;font:600 12px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;position:relative}
.band::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border:7px solid transparent;border-bottom:0;border-top-color:var(--band)}
.panel{background:var(--surface);border:1px solid var(--line);margin-bottom:28px}
.panel>.body{padding:24px}
section.sec{padding-top:28px}

.notice{margin-top:28px;display:grid;grid-template-columns:6px 1fr 6px;gap:0;background:var(--surface);border:1px solid var(--line)}
.notice::before,.notice::after{content:"";background:var(--accent)}
.notice .in{padding:22px 16px;text-align:center}
.notice small{display:block;font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.notice h1{margin:4px 0 8px;font:700 clamp(48px,11vw,92px)/.95 var(--f-display);text-transform:uppercase;color:var(--accent);letter-spacing:.02em}
.notice p{margin:0 auto;max-width:56ch;font-size:15px}
.cta{display:flex;justify-content:center;gap:14px;margin-top:16px;flex-wrap:wrap}

.pre h2{font:700 30px var(--f-display);margin:0 0 10px;text-align:center}
.pre p{margin:0 0 12px;max-width:80ch;margin-inline:auto}

.tabs{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:-24px -24px 20px;padding-inline:12px}
.tabs button{font:600 14px var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:13px 16px;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.tabpanel .vis{aspect-ratio:16/10;max-width:100%;border:1px solid var(--line);background:var(--band);position:relative;overflow:hidden}
.tabpanel .vis svg{width:100%;height:100%;display:block}
.tabpanel h3{font:700 28px var(--f-display);margin:0 0 6px}
.tabpanel p{margin:0 0 12px;color:var(--muted)}
.meta{display:flex;gap:18px;flex-wrap:wrap;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.meta span b{display:block;font:700 26px var(--f-display);color:var(--accent);letter-spacing:0}

.sr{position:absolute;left:-9999px}
.muted{color:var(--muted)}
.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.tile .panel{margin-bottom:0}
.tilebody{text-align:center}
.pic{aspect-ratio:16/10;max-width:100%;width:min(100%,320px);margin:0 auto;overflow:hidden;border:1px solid var(--line)}
.pic svg,.pic img{width:100%;height:100%;display:block}
.pic img{object-fit:cover}
.tilebody hr{border:0;border-top:1px solid var(--line);margin:20px 0 14px}
.tilebody p{margin:0}
.lead{font:700 18px/1.3 var(--f-body)}
.lead.big{font-size:20px;margin-top:4px}
.small{font:600 14px var(--f-body)}
.links{margin-top:6px!important;font:600 14px var(--f-body);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
.links a{padding:0 8px;border-right:1px solid var(--fg);line-height:1.1}
.links a:last-child{border-right:0}
.pagetitle{font:700 clamp(30px,5vw,40px) var(--f-display);text-align:center;margin:0 0 12px}
.rule{border:0;border-top:1px solid var(--line);margin:0 0 20px}
.dtabs{display:flex;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-bottom:0}
.dtabs button{flex:1 1 auto;font:500 13px var(--f-mono);letter-spacing:.04em;padding:14px 16px;background:none;border:0;color:var(--fg);cursor:pointer;position:relative}
.dtabs button:hover{background:var(--surface)}
.dtabs button[aria-selected="true"]{background:var(--band);color:var(--band-fg);font-weight:600}
.dtabs button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-bottom:0;border-top-color:var(--band)}
.dpanel{padding:22px;margin-top:0;position:relative}
.dpanel h3{font:700 clamp(24px,4vw,30px) var(--f-body);margin:0 0 14px;padding-right:110px}
.dpanel h4{font:600 15px var(--f-body);margin:20px 0 10px;display:flex;gap:8px}
.dpanel h4::before{content:"•";color:var(--muted)}
.dpanel ul{list-style:none;margin:0;padding:0 0 0 14px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.dpanel li .lnk{color:var(--accent);cursor:pointer}
.dpanel li .lnk:hover{text-decoration:underline}
body.editing .dpanel li .lnk{cursor:text;text-decoration:none}
.role.r{color:var(--r)}.role.g{color:var(--g)}.role.o{color:var(--o)}
.badge{position:absolute;right:22px;top:18px;width:88px;height:88px}
dialog{border:1px solid var(--line);border-top:6px solid var(--accent);background:var(--surface);color:var(--fg);padding:24px;max-width:min(480px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(0,0,0,.65)}
dialog h3{font:700 28px var(--f-display);margin:0 0 8px}
dialog dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 14px}
dialog dt{font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
dialog dd{margin:0}
@media (max-width:820px){.home{grid-template-columns:minmax(0,1fr)}.badge{display:none}.dpanel h3{padding-right:0}}

.acct{padding:7px 9px;position:relative;display:inline-flex;align-items:center}
.acct .dot{position:absolute;right:3px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--aqua);border:2px solid var(--hero-a)}
.acctmenu{position:absolute;right:0;top:calc(100% + 12px);display:flex;background:var(--nav);border:1px solid rgba(255,255,255,.12);z-index:40;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.acctmenu[hidden]{display:none}
.acctmenu button{background:none;border:0;color:#fff;font:600 13px var(--f-body);padding:14px 20px;cursor:pointer;white-space:nowrap}
.acctmenu button+button{border-left:1px solid rgba(255,255,255,.14)}
.acctmenu button:hover{background:rgba(255,255,255,.1)}
.acctmenu .who{color:var(--aqua);font:600 12px var(--f-mono);padding:14px 16px;border-right:1px solid rgba(255,255,255,.14);align-self:center}
.fld{margin-bottom:14px}
.fld label{display:block;font:600 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.fld .f{width:100%}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn.plain{background:transparent;color:var(--fg);border-color:var(--line)}
dialog p{margin:0 0 14px}
@media (max-width:820px){.acctmenu{right:0;flex-wrap:wrap;max-width:calc(100vw - 32px)}}

.orgpanel{background:var(--band);border-color:var(--band)}
.org{display:flex;flex-direction:column;align-items:center;color:var(--band-fg);padding-block:6px 8px}
.org .root{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.org .root img{width:96px;height:96px;border-radius:50%;display:block}
.org .root b{font:700 22px var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.org .root small{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.org .tree{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;margin-top:38px;position:relative}
.org .tree::before{content:"";position:absolute;left:10%;right:10%;top:-19px;height:1px;background:rgba(255,255,255,.4)}
.org .tree::after{content:"";position:absolute;left:50%;top:-38px;height:19px;width:1px;background:rgba(255,255,255,.4)}
.org .leaf{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;color:inherit;cursor:pointer;padding:6px 4px;position:relative;font:600 14px var(--f-body);text-align:center}
.org .leaf::before{content:"";position:absolute;top:-19px;left:50%;height:19px;width:1px;background:rgba(255,255,255,.4)}
.org .leaf svg{width:min(100%,92px);height:auto;transition:transform .2s}
.org .leaf:hover svg,.org .leaf[aria-pressed="true"] svg{transform:translateY(-3px)}
.org .leaf[aria-pressed="true"] span{color:var(--aqua)}
@media (max-width:700px){.org .tree{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;row-gap:12px}.org .tree::before,.org .tree::after,.org .leaf::before{display:none}}
body.editing{padding-bottom:70px}
body.editing [data-edit]{outline:1px dashed var(--accent);outline-offset:3px;cursor:text;min-width:1ch}
body.editing [data-edit]:focus{outline:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.editbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--band);color:var(--band-fg);display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));font-size:14px;border-top:3px solid var(--accent)}
.editbar[hidden]{display:none}
.editbar{flex-wrap:wrap}
.editbar #e-export{margin-left:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:70;background:var(--band);color:var(--band-fg);padding:10px 16px;font:600 13px var(--f-mono);border-left:4px solid var(--aqua);max-width:calc(100vw - 32px)}
.toast[hidden]{display:none}
.tabpanel .vis.emb{display:grid;place-items:center;background:var(--band)}
.tabpanel .vis.emb svg{width:auto;height:74%;transition:transform .3s}
.tabpanel .vis.emb:hover svg{transform:scale(1.04)}
.role.a{color:var(--accent)}.role.m{color:var(--muted)}
input.f{padding:10px 12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:16px var(--f-body);border-radius:2px}
.err{color:var(--r);font-size:13px;min-height:1.2em;margin-top:6px}
.edlist{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.edlist li{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:8px 12px;font-size:14px;min-width:0}
.edlist li span{overflow-wrap:anywhere;min-width:0}
.edlist .tag2{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.btn.small{padding:5px 9px;font-size:11px}
.hint{font-size:13px;color:var(--muted)}
footer{background:var(--foot);color:#cfc6c8;margin-top:20px;padding-block:28px;font-size:14px}
footer .cols{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
footer b{font:700 22px var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:#fff;display:block}
footer a{color:var(--foot-link)}

.reveal{animation:rise .6s ease both}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:820px){
  .burger{display:inline-block}
  nav.main{display:none}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;gap:0}
    .tabpanel{grid-template-columns:minmax(0,1fr)}
  .panel>.body{padding:16px}
  .tabs{margin:-16px -16px 16px}
  .tools{margin-left:auto}
  }
.tile:last-child .pic img{object-position:50% 62%}
.role.y{color:var(--y)}.role.b{color:var(--b)}.role.v{color:var(--v)}
.sw{display:none;gap:6px;margin-left:12px;align-items:center;vertical-align:middle}
body.editing .sw{display:inline-flex}
.sw button{width:14px;height:14px;border-radius:50%;border:0;padding:0;cursor:pointer;background:currentColor}
.sw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--fg)}
.sw .r{color:var(--r)}.sw .o{color:var(--o)}.sw .y{color:var(--y)}.sw .g{color:var(--g)}
.sw .a{color:var(--accent)}.sw .b{color:var(--b)}.sw .v{color:var(--v)}.sw .m{color:var(--muted)}