
:root{
 --bg:#f4f8f8;--panel:#ffffff;--ink:#132038;--mut:#566579;--mut2:#8a97a8;
 --line:#e2ecea;--line2:#d3e3e0;
 --teal:#14b8b0;--teal-ink:#0a7d77;--teal-btn:#0c8078;--teal-tint:#e7f6f4;
 --warn:#b5451b;--ok:#16a34a;
 --shadow:0 1px 2px rgba(19,32,56,.04),0 2px 6px rgba(19,32,56,.05);
 --shadow2:0 6px 20px rgba(19,32,56,.10);
 --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
 --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:
 radial-gradient(900px 500px at 88% -12%,#d8f1ee80,transparent),var(--bg);
 color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}code{font-family:var(--mono)}
.top{position:sticky;top:0;z-index:30;background:#ffffffdd;backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.top-in{max-width:1080px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:680;letter-spacing:-.01em;color:var(--ink)}
.brand .mk{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#14b8b0,#0a7d77);color:#fff;font-size:12px;font-weight:700;box-shadow:0 2px 8px #14b8b055}
.brand small{display:block;font-weight:500;color:var(--mut);font-size:11.5px;letter-spacing:0}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:8px 13px;border-radius:9px;text-decoration:none;color:var(--mut);font-size:14px;border:1px solid transparent}
.nav a:hover{color:var(--ink);background:#eef4f3}
.nav a.on{color:var(--teal-ink);background:var(--teal-tint);border-color:#c3e8e3}
.wrap{max-width:1080px;margin:0 auto;padding:34px 22px 70px}
.foot{max-width:1080px;margin:0 auto;padding:0 22px 40px;color:var(--mut2);font-size:12px}
h1{font-size:30px;letter-spacing:-.02em;margin:0 0 10px;font-weight:720;line-height:1.12}
h2{font-size:20px;letter-spacing:-.01em;margin:36px 0 14px;font-weight:680}
.lead{color:var(--mut);max-width:66ch;margin:0 0 8px;font-size:15.5px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.mono{font-family:var(--mono);font-size:13px;word-break:break-all}
.btn-copy{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:4px;border-radius:6px;background:#fff;border:1px solid var(--line2);color:var(--mut);cursor:pointer;transition:.12s;vertical-align:middle}
.btn-copy:hover{color:var(--teal-ink);border-color:var(--teal)}.btn-copy.done{color:#fff;background:var(--ok);border-color:var(--ok)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;background:#fff;border:1px solid var(--line2);font-size:12.5px;color:var(--mut)}
.warnbar{border:1px solid #f0d3c4;background:#fdf4ee;border-radius:12px;padding:14px 16px;color:#7a4a2f;font-size:13.5px;margin:0 0 26px}
.warnbar b{color:var(--warn)}
/* hero + home */
.hero{background:linear-gradient(135deg,#0d8f88,#0a7d77 60%,#0b6f6a);color:#eafffb;border-radius:20px;padding:34px 30px;box-shadow:var(--shadow2);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:#ffffff18}
.hero h1{color:#fff}.hero .lead{color:#d4fbf5;max-width:60ch}
.stats{display:flex;gap:30px;margin-top:22px;flex-wrap:wrap}
.stat b{display:block;font-size:26px;font-family:var(--mono);letter-spacing:-.02em;color:#fff}
.stat span{font-size:12px;color:#bff1ea}
.logostrip{display:flex;align-items:center;gap:30px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 24px;margin-top:18px;box-shadow:var(--shadow)}
.logostrip img{height:30px;width:auto}
.logostrip .ls-label{font-size:12.5px;color:var(--mut2);margin-right:4px}
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media(max-width:800px){.tiles3{grid-template-columns:1fr}}
.navtile{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;transition:.14s;box-shadow:var(--shadow)}
.navtile:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow2)}
.navtile h3{margin:0 0 6px;font-size:16px}.navtile p{margin:0;color:var(--mut);font-size:13.5px}
.navtile .go{color:var(--teal-ink);font-size:13px;margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-weight:600}
/* guide */
.tool{border:1px solid var(--line);border-radius:16px;padding:22px;margin:14px 0;position:relative;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.tool::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.tool-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.tlogo{height:38px;width:auto;display:block}
.tool-h .port{font-family:var(--mono);font-size:12px;color:var(--mut2)}
.tool-h .tag{margin-left:auto;font-size:12px;color:var(--teal-ink);background:var(--teal-tint);border:1px solid #c3e8e3;padding:4px 11px;border-radius:20px}
.tool .desc{color:var(--mut);margin:8px 0 15px;max-width:70ch}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:8px 0 8px 36px;border-bottom:1px solid var(--line);font-size:14px}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:7px;width:23px;height:23px;border-radius:7px;background:var(--teal-tint);border:1px solid #c3e8e3;color:var(--teal-ink);font-family:var(--mono);font-size:12px;display:grid;place-items:center;font-weight:600}
.tips{margin:14px 0 0;padding:12px 14px;background:#f6faf9;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--mut)}
.tips b{color:var(--ink)}
/* teams */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.tcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;transition:.14s;box-shadow:var(--shadow)}
.tcard:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow2)}
.tcard .nm{font-family:var(--mono);font-size:17px;font-weight:650;display:flex;align-items:center;gap:9px;color:var(--ink)}
.tcard .live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #16a34a22}
.tcard .ip{font-family:var(--mono);font-size:12.5px;color:var(--teal-ink);margin-top:9px}
.tcard .rg{font-size:12px;color:var(--mut2);margin-top:3px}
/* team detail + unlock links */
.toollinks{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:18px}
@media(max-width:560px){.toollinks{grid-template-columns:1fr}}
.tl{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.14s;box-shadow:var(--shadow)}
.tl:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow2)}
.tl-logo{height:22px;width:auto;flex:0 0 auto}
.tl .tu{font-family:var(--mono);font-size:12px;color:var(--mut)}
.tl .arrow{margin-left:auto;color:var(--mut2)}
.roster{margin-top:24px;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.roster table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.roster th,.roster td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.roster th{background:#f6faf9;color:var(--mut);font-weight:650;font-size:12px}
.roster tr:last-child td{border-bottom:0}
.roster .num{font-family:var(--mono);color:var(--teal-ink)}
.r-admin{color:#b7791f;font-weight:600}.r-read{color:#2f6bd8}.r-member{color:var(--mut)}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--mut);text-decoration:none;font-size:13px;margin-bottom:14px}
.back:hover{color:var(--teal-ink)}
/* unlock */
.unlock-box{max-width:540px}
.field{display:flex;gap:9px;margin-top:16px}
.field input{flex:1;padding:13px 15px;border-radius:11px;background:#fff;border:1px solid var(--line2);color:var(--ink);font-family:var(--mono);font-size:15px;letter-spacing:.04em;outline:none}
.field input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #14b8b033}
.field button{padding:13px 22px;border-radius:11px;background:var(--teal-btn);border:1px solid var(--teal-btn);color:#fff;font-weight:650;font-size:14px;cursor:pointer;transition:.12s}
.field button:hover{background:#0a6f68}.field button:disabled{opacity:.55;cursor:default}
.err{color:var(--warn);font-size:13px;margin-top:10px;min-height:18px}
.result{margin-top:26px}
.who{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.who .av{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-weight:650;background:var(--teal-tint);border:1px solid #c3e8e3;color:var(--teal-ink);font-size:16px}
.who .nm2{font-size:19px;font-weight:700}.who .sub2{color:var(--mut);font-size:13px}
.credrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--line)}
.credrow .k{flex:0 0 96px;font-size:12px;color:var(--mut2)}
.credtool{border:1px solid var(--line);border-radius:12px;padding:15px;margin-top:11px;position:relative;background:#fff;box-shadow:var(--shadow)}
.credtool::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);border-radius:4px 0 0 4px}
.credtool .ch{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ct-logo{height:22px;width:auto}.credtool .ch .role{margin-left:auto;font-size:12px}
.credtool a.open{font-family:var(--mono);font-size:12px;color:var(--teal-ink);text-decoration:none}
.credtool a.open:hover{text-decoration:underline}
.secret{font-family:var(--mono);font-size:14px;color:var(--ink)}
.secret .dots{letter-spacing:2px;color:var(--mut2)}.secret .val{display:none}.secret.show .dots{display:none}.secret.show .val{display:inline}
.reveal{background:#fff;border:1px solid var(--line2);color:var(--mut);border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer}
.reveal:hover{color:var(--teal-ink);border-color:var(--teal)}
.hidden{display:none!important}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.jump a{text-decoration:none}.jump a:hover{border-color:var(--teal);color:var(--teal-ink)}
.sees{list-style:none;padding:0;margin:8px 0 0}
.sees li{position:relative;padding:7px 0 7px 24px;border-bottom:1px solid var(--line);font-size:14px}
.sees li:last-child{border-bottom:0}
.sees li::before{content:"";position:absolute;left:3px;top:14px;width:8px;height:8px;border-radius:2px;background:var(--teal);transform:rotate(45deg)}
.timeline{position:relative;margin:10px 0 0;padding-left:24px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line2)}
.ev{position:relative;padding:13px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev::before{content:"";position:absolute;left:-21px;top:17px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--teal)}
.ev.crit::before{border-color:var(--warn)}
.ev .t{font-family:var(--mono);font-size:12.5px;color:var(--teal-ink)}
.ev.crit .t{color:var(--warn)}
.ev .row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:5px 0}
.ev .host{font-family:var(--mono);font-size:11.5px;background:#eef2f7;border:1px solid #dbe3ec;color:#31405a;padding:2px 8px;border-radius:20px}
.ev .type{font-size:11.5px;background:var(--teal-tint);border:1px solid #c3e8e3;color:var(--teal-ink);padding:2px 8px;border-radius:20px}
.ev.crit .type{background:#fdf0ea;border-color:#f0d3c4;color:var(--warn)}
.ev .ind{font-family:var(--mono);font-size:12px;color:var(--ink);background:#fff;border:1px dashed var(--line2);padding:2px 8px;border-radius:6px}
.ev .d{color:var(--mut);font-size:13.5px}
.phases{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.phase{font-size:12.5px;color:var(--teal-ink);background:var(--teal-tint);border:1px solid #c3e8e3;padding:5px 12px;border-radius:20px;font-weight:600}
.blist{margin:6px 0 0;padding-left:18px;color:var(--mut);font-size:14px}.blist li{margin:5px 0}
.mono-cell{font-family:var(--mono);font-size:12.5px;color:var(--ink);word-break:break-all}
.brief-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;text-decoration:none;margin-top:20px;padding:22px 26px;border-radius:16px;background:linear-gradient(135deg,#0d8f88,#0a7d77 60%,#0b6f6a);color:#eafffb;box-shadow:var(--shadow2);position:relative;overflow:hidden;transition:.14s}
.brief-banner::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:#ffffff14}
.brief-banner:hover{transform:translateY(-2px)}
.brief-banner .bb-text{position:relative;z-index:1}
.brief-banner .bb-text h3{margin:0 0 4px;color:#fff;font-size:19px;letter-spacing:-.01em}
.brief-banner .bb-text p{margin:0;color:#d4fbf5;font-size:14px;max-width:62ch}
.brief-banner .bb-cta{position:relative;z-index:1;flex:0 0 auto;background:#ffffff24;border:1px solid #ffffff40;color:#fff;padding:11px 17px;border-radius:11px;font-weight:650;font-size:14px;white-space:nowrap}
.brief-banner:hover .bb-cta{background:#ffffff33}
@media print{.top,.nav,.field,.btn-copy,.reveal{display:none!important}
 body{background:#fff}.secret .val{display:inline}.secret .dots{display:none}
 .card,.tool,.credtool,.tl{box-shadow:none}}
