:root{
  --void:#030806; --moss:#0b1f15; --moss-2:#12301f; --ivy-rgb:61,255,138;--ivy:rgb(var(--ivy-rgb)); --root:#c9a86c;--leaf:color-mix(in srgb,var(--ivy) 35%,#fff); --text:#d6efe2; --muted:#7c9a8a;
  --hair:rgba(var(--ivy-rgb),.18); --cyan:#00fff2; --magenta:#ff2bd6;
  --sans:'Instrument Sans',system-ui,sans-serif; --mono:'Fira Mono',Consolas,monospace; --display:'Orbitron','Fira Mono',monospace;
  --arrow:url('https://patched.cc/assets/aero_arrow.cur'),auto; --link:url('https://patched.cc/assets/aero_link.cur'),pointer;
}
*{box-sizing:border-box}
main{flex:1 0 auto}
footer{flex-shrink:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
html,body{overflow-x:clip}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-family:var(--sans);color:var(--text);background:radial-gradient(ellipse 80% 50% at 15% 0%,rgba(var(--ivy-rgb),.1),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 70%,rgba(0,255,242,.05),transparent 60%),var(--void);cursor:var(--arrow);line-height:1.6;-webkit-font-smoothing:antialiased}
a,button,summary{cursor:var(--link)}
::selection{background:var(--ivy);color:#02150a}
:focus-visible{outline:2px solid var(--ivy);outline-offset:3px;border-radius:6px}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.14;pointer-events:none}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:30;background:linear-gradient(90deg,transparent,var(--ivy),var(--cyan),var(--ivy),transparent);opacity:.85}
.wrap{position:relative;z-index:2;width:100%;padding:0 clamp(18px,5vw,120px)}

/* top bar — same shell as PATCHED.cc */
.bar{position:sticky;top:0;z-index:20;height:56px;background:rgba(4,9,6,.75);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--hair)}
.bar .wrap{display:flex;align-items:center;height:100%;gap:14px}
.dots{display:flex;gap:7px}.dots i{width:12px;height:12px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#ff5f56}.dots i:nth-child(2){background:#ffbd2e}.dots i:nth-child(3){background:#27c93f}
.bar b{font-family:var(--display);font-size:.9rem;letter-spacing:2px;color:var(--ivy);text-decoration:none}
.bar nav{margin-left:auto;display:flex;gap:clamp(12px,2.4vw,26px);align-items:center;font-size:.9rem}
.bar nav a{color:var(--text);text-decoration:none;font-weight:500;opacity:.8;transition:.2s}
.bar nav a:hover{color:var(--ivy);opacity:1}
.bar nav a.home{font-family:var(--mono);color:var(--cyan);opacity:1}
.bar nav{overflow-x:auto;scrollbar-width:none}.bar nav::-webkit-scrollbar{display:none}.bar nav a{white-space:nowrap}
@media(max-width:560px){.bar .dots{display:none}.bar nav{gap:14px;font-size:.84rem}}

/* hero */
.hero{position:relative;min-height:min(86vh,760px);display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:30px;padding:clamp(40px,8vh,90px) 0 60px}
@keyframes grow{to{stroke-dashoffset:0}}
@keyframes sprout{to{transform:scale(var(--s,1))}}
.copy{position:relative;z-index:2}
.wordmark{font-family:var(--display);font-weight:900;font-size:clamp(5.5rem,17vw,12.5rem);line-height:.9;margin:0;letter-spacing:.02em;color:var(--leaf);text-shadow:0 0 40px rgba(var(--ivy-rgb),.35)}
.tag{font-size:clamp(1.25rem,2.6vw,1.8rem);font-weight:600;line-height:1.25;margin:22px 0 10px;max-width:22ch;color:#fff}
.sub{color:var(--muted);max-width:46ch;margin:0 0 28px;font-size:1.05rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:700;font-size:.98rem;text-decoration:none;border:1px solid var(--hair);color:var(--text);background:rgba(255,255,255,.03);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:rgba(var(--ivy-rgb),.08)}
.btn.primary{background:var(--ivy);color:#02150a;border-color:var(--ivy);box-shadow:0 10px 30px -10px rgba(var(--ivy-rgb),.7)}
.btn.primary:hover{background:var(--leaf)}
.chip{font-family:var(--mono);font-size:.82rem;color:var(--muted);padding:6px 12px;border:1px solid var(--hair);border-radius:999px}
.chip b{color:var(--ivy)}

/* phone */
.screen::before{content:"";position:absolute;top:9px;left:50%;width:62px;height:16px;transform:translateX(-50%);background:#000;border-radius:99px}
.date{font-size:.8rem;color:var(--leaf);opacity:.8;margin-top:6px}
.apps{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
@media(max-width:860px){.hero{grid-template-columns:1fr;text-align:left}.stage{margin-top:20px}}

/* sections */
section{position:relative;z-index:2;padding:clamp(48px,9vw,96px) 0}
h2{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.3rem);margin:0 0 12px;color:#fff;letter-spacing:.5px}
.lede{color:var(--muted);max-width:58ch;margin:0 0 36px;font-size:1.05rem}

/* bento features */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{position:relative;overflow:hidden;padding:26px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--hair);transition:border-color .25s,transform .25s}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(var(--ivy-rgb),.13),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.tile:hover::before{opacity:1}
.tile:hover{border-color:rgba(var(--ivy-rgb),.5);transform:translateY(-3px)}
.tile h3{margin:0 0 8px;font-size:1.15rem;color:#fff}
.tile p{margin:0;color:var(--muted);font-size:.97rem}
.t-a{grid-column:span 4;min-height:210px;background:linear-gradient(150deg,rgba(var(--ivy-rgb),.14),rgba(var(--ivy-rgb),.02) 60%),var(--moss);border-radius:28px 12px 28px 12px}
.t-a h3{font-size:1.6rem;max-width:18ch}
.t-b{grid-column:span 2;border-radius:12px 28px 12px 28px}
.t-c,.t-d,.t-e{grid-column:span 2}
.t-f{grid-column:span 3;display:flex;flex-direction:column;gap:18px;align-items:flex-start;justify-content:space-between}.t-g{grid-column:span 3}
.t-a .big{position:absolute;right:-20px;bottom:-60px;width:220px;height:220px;border-radius:50% 0 50% 0;border:1px solid rgba(var(--ivy-rgb),.3);transform:rotate(18deg);pointer-events:none}
.t-a .big::after{content:"";position:absolute;inset:26px;border-radius:50% 0 50% 0;border:1px solid rgba(var(--ivy-rgb),.2)}
.stat{font-family:var(--display);font-size:2rem;color:var(--ivy);margin-bottom:6px}
@media(max-width:860px){.t-a,.t-b,.t-c,.t-d,.t-e,.t-f,.t-g{grid-column:span 6}}

/* install methods */
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.m{position:relative;padding:24px;border-radius:20px;border:1px solid var(--hair);background:linear-gradient(160deg,rgba(var(--ivy-rgb),.07),rgba(255,255,255,.01));display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s}
.m::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(var(--ivy-rgb),.14),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.m:hover{border-color:rgba(var(--ivy-rgb),.5)}.m:hover::before{opacity:1}
.m h3{margin:0 0 4px;color:#fff;font-size:1.2rem}
.m p{margin:0 0 16px;color:var(--muted);font-size:.93rem;flex:1}
.m .code{margin:0;font-size:.78rem}
.leafmark{width:38px;height:38px;border-radius:50% 0 50% 0;border:1.5px solid var(--ivy);margin-bottom:16px;display:grid;place-items:center;color:var(--ivy);font-family:var(--mono);font-size:.8rem;box-shadow:0 0 18px rgba(var(--ivy-rgb),.3)}
@media(max-width:860px){.methods{grid-template-columns:1fr}}

/* builds / coming soon */
.soon{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);padding:clamp(22px,3.4vw,40px);border-radius:26px;border:1px solid rgba(var(--ivy-rgb),.3);background:linear-gradient(150deg,rgba(var(--ivy-rgb),.1),rgba(3,8,6,.8) 55%);position:relative;overflow:hidden}
.soon h3{margin:0 0 8px;font-size:1.7rem;color:#fff;max-width:16ch;line-height:1.2}
.soon p{color:var(--muted);margin:0 0 22px;max-width:44ch}
.road{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.road li{display:flex;align-items:center;gap:12px;font-weight:500}
.road i{width:14px;height:14px;border-radius:50% 0 50% 0;border:2px solid var(--muted);flex:none}
.road .done i{background:var(--ivy);border-color:var(--ivy)}
.road .active i{border-color:var(--ivy);animation:pulse 1.8s ease-in-out infinite}
.road .todo{color:var(--muted)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--ivy-rgb),.6)}50%{box-shadow:0 0 0 7px rgba(var(--ivy-rgb),0)}}
.boot{background:#010503;border:1px solid var(--hair);border-radius:16px;font-family:var(--mono);font-size:.8rem;line-height:1.8;color:var(--leaf);padding:16px 18px;min-height:260px;overflow:hidden}
.boot div{opacity:0;animation:line .01s forwards;animation-delay:calc(var(--i)*.55s + .3s)}
.boot .ok{color:var(--ivy)}.boot .dim{color:var(--muted)}
.boot .cur{display:inline-block;width:8px;height:1em;background:var(--ivy);vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes line{to{opacity:1}}@keyframes blink{50%{opacity:0}}
@media(max-width:780px){.soon{grid-template-columns:1fr}}
.rel{border:1px solid var(--hair);border-radius:22px;background:rgba(5,14,9,.7);padding:clamp(20px,3vw,30px);margin-bottom:14px}
.rel header{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:14px}
.rel h3{margin:0;font-size:1.45rem;color:#fff}
.rel .meta{font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.rel .notes{color:var(--muted);margin:0 0 16px;white-space:pre-line;max-width:70ch;font-size:.95rem}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:8px}
.asset{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--hair);text-decoration:none;color:var(--text);transition:.2s}
.asset:hover{border-color:var(--ivy);background:rgba(var(--ivy-rgb),.07)}
.asset em{font-style:normal;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(var(--ivy-rgb),.14);color:var(--ivy);flex:none}
.asset span{flex:1;font-family:var(--mono);font-size:.84rem;overflow-wrap:anywhere}
.asset small{color:var(--muted);flex:none}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pills .chip{background:rgba(var(--ivy-rgb),.05)}

/* install timeline */
.steps{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.steps::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--ivy),transparent);border-radius:2px}
.steps li{position:relative;padding:0 0 28px 22px}
.steps li::before{content:"";position:absolute;left:-30px;top:6px;width:20px;height:20px;border-radius:50% 0 50% 0;background:var(--void);border:2px solid var(--ivy);box-shadow:0 0 12px rgba(var(--ivy-rgb),.5)}
.steps h3{margin:0 0 4px;color:#fff;font-size:1.1rem}
.steps p{margin:0;color:var(--muted)}
.steps code,.notice code,.kinds-list code{font-family:var(--mono);font-size:.88em;color:var(--leaf);background:rgba(var(--ivy-rgb),.08);padding:2px 6px;border-radius:5px}

/* faq */

footer{position:relative;z-index:2;border-top:1px solid var(--hair);padding:34px 0 46px;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer a{color:var(--cyan);text-decoration:none}footer a:hover{text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  
  html{scroll-behavior:auto}.btn,.tile{transition:none}.boot div{animation:none;opacity:1}.apps span,.sw button{transition:none}.road .active i,.boot .cur{animation:none}
}

/* nav state */
.bar nav a[aria-current=page]{color:var(--ivy);opacity:1}
/* status band (index) */
.band{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;padding:clamp(20px,3vw,30px);border-radius:22px;border:1px solid rgba(var(--ivy-rgb),.3);background:linear-gradient(150deg,rgba(var(--ivy-rgb),.1),rgba(3,8,6,.8) 60%)}
.band .txt{flex:1 1 280px}
.band h3{margin:0 0 4px;color:#fff;font-size:1.3rem}
.band p{margin:0;color:var(--muted)}
.band .ctas{flex:none}
.live{display:inline-block;width:10px;height:10px;border-radius:50% 0 50% 0;background:var(--ivy);margin-right:10px;animation:pulse 1.8s ease-in-out infinite}
.band .kinds{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.band .kinds em{font-style:normal;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(var(--ivy-rgb),.14);color:var(--ivy)}
/* inner pages */
.page{position:relative;z-index:2;padding:clamp(40px,7vw,80px) 0 clamp(40px,7vw,80px)}
.page-head{margin-bottom:clamp(28px,5vw,48px);max-width:72ch}
.page-head h1{font-family:var(--display);font-size:clamp(2rem,5vw,3.4rem);margin:0 0 12px;color:var(--leaf);text-shadow:0 0 30px rgba(var(--ivy-rgb),.3);line-height:1.1}
.page-head p{margin:0;color:var(--muted);font-size:1.1rem}
.note{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:16px;border:1px solid rgba(255,206,61,.35);background:rgba(255,206,61,.06);margin:0 0 28px;width:fit-content;max-width:100%;color:#f3e3b0}
.note::before{content:"!";flex:none;width:22px;height:22px;border-radius:50%;background:#ffce3d;color:#1a1400;font-weight:800;display:grid;place-items:center;font-size:.85rem;margin-top:2px}
.sub-h{font-size:1.4rem;color:#fff;margin:44px 0 16px}
.kinds-list{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.kinds-list li{padding:14px 18px;border-radius:14px;border:1px solid var(--hair);background:rgba(255,255,255,.02);color:var(--muted)}
.kinds-list b{color:#fff}
.m{scroll-margin-top:80px}

/* code blocks: wrap, never scroll */
.code{background:#020a06;border:1px solid var(--hair);border-radius:14px;padding:14px 16px;font-family:var(--mono);font-size:.84rem;color:var(--leaf);white-space:pre-wrap;overflow-wrap:anywhere}
a.chip{text-decoration:none;transition:.2s}a.chip:hover{color:var(--ivy);border-color:var(--ivy)}
/* hero stage: phone + live customizer */
.stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}
.phone{position:relative;width:min(244px,66vw);aspect-ratio:9/19;border-radius:36px;padding:9px;background:linear-gradient(160deg,#1c2b23,#07100b);border:1px solid rgba(var(--ivy-rgb),.35);box-shadow:0 40px 80px -30px rgba(var(--ivy-rgb),.4),0 0 0 1px #000;transform:rotate(3deg);--r:50% 50% 50% 8px}
.phone[data-shape=round]{--r:50%}.phone[data-shape=squircle]{--r:30%}
.screen{height:100%;border-radius:28px;overflow:hidden;position:relative;padding:22px 16px;display:flex;flex-direction:column;background:radial-gradient(circle at 30% 18%,color-mix(in srgb,var(--ivy) 38%,#000) 0,color-mix(in srgb,var(--ivy) 14%,#000) 45%,#04100a 100%)}
.clock{margin-top:34px;font-family:var(--display);font-size:2.7rem;font-weight:700;color:#fff;line-height:1}
.clock span+span::before{content:":"}
.phone[data-clock=light] .clock{font-family:var(--sans);font-weight:300;font-size:3.3rem;letter-spacing:-2px}
.phone[data-clock=stack] .clock{font-size:3.4rem;line-height:.95}
.phone[data-clock=stack] .clock span{display:block}
.phone[data-clock=stack] .clock span+span{color:var(--ivy)}
.phone[data-clock=stack] .clock span+span::before{content:none}
.apps{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
.apps span{aspect-ratio:1;border-radius:var(--r);background:rgba(var(--ivy-rgb),.16);border:1px solid rgba(var(--ivy-rgb),.4);transition:border-radius .35s cubic-bezier(.3,1.4,.5,1),background .3s}
.apps span:nth-child(3n){background:rgba(var(--ivy-rgb),.3)}
.apps span:nth-child(5){background:var(--ivy);border-color:var(--ivy)}
.dock{margin-top:16px;height:40px;border-radius:20px;background:rgba(0,0,0,.35);border:1px solid rgba(var(--ivy-rgb),.2)}
.studio{width:min(320px,100%);padding:16px 18px;border-radius:18px;border:1px solid var(--hair);background:rgba(5,14,9,.75);backdrop-filter:blur(10px);display:grid;gap:12px}
.studio h2{font:600 .95rem var(--sans);margin:0;color:#fff;letter-spacing:0}
.studio .row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.88rem;color:var(--muted)}
.sw{display:flex;gap:8px}
.sw button{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0;outline-offset:3px;transition:transform .2s}
.sw button:hover{transform:scale(1.15)}
.sw button[aria-pressed=true]{border-color:#fff}
.seg{display:flex;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
.seg button{font:600 .78rem var(--sans);color:var(--muted);background:none;border:0;padding:6px 10px;transition:.2s}
.seg button[aria-pressed=true]{background:var(--ivy);color:#02150a}
/* quick answers */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.qa{padding:22px 24px;border-radius:18px;border:1px solid var(--hair);background:rgba(255,255,255,.02)}
.qa h3{margin:0 0 6px;font-size:1.08rem;color:#fff}.qa p{margin:0;color:var(--muted)}
.more{display:inline-block;margin-top:22px;color:var(--ivy);font-weight:600;text-decoration:none}.more:hover{text-decoration:underline}
@media(max-width:700px){.qa-grid{grid-template-columns:1fr}}
.asset em.av{background:none;border:1px solid var(--hair);color:var(--leaf)}
/* notices */
.notice{break-inside:avoid;padding:0 0 34px;margin:0 0 34px;border-bottom:1px solid var(--hair);scroll-margin-top:80px}
.notices{column-width:440px;column-gap:clamp(32px,5vw,90px)}
.notices .notice:last-child{border:0;margin-bottom:0}
.notice h2{font-size:1.5rem;margin:0 0 14px}
.notice p{margin:0 0 14px;color:#b9d1c3;font-size:1.04rem}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px}

.dev{margin-top:20px}
.dev h4{display:inline;margin:0 12px 0 0;font:700 1.05rem var(--mono);color:var(--leaf)}
.dev .assets{margin-top:10px}
.notice code{white-space:nowrap}

/* background ivy */
#ivybg{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#ivybg .stem{fill:none;stroke:var(--ivy);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:grow var(--dur) var(--ease,linear) var(--del) forwards}
#ivybg .leaf{fill:color-mix(in srgb,var(--ivy) 10%,#030806);stroke:var(--ivy);stroke-width:1;transform-box:fill-box;transform-origin:0% 50%;transform:scale(0);animation:sprout .8s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:var(--d)}
#ivybg.still .stem{animation:none;stroke-dashoffset:0}
#ivybg.still .leaf{animation:none;transform:scale(var(--s,1))}
@media(min-width:900px){#ivybg{filter:drop-shadow(0 0 5px rgba(var(--ivy-rgb),.45))}}
@media(prefers-reduced-motion:reduce){#ivybg .stem{animation:none;stroke-dashoffset:0}#ivybg .leaf{animation:none;transform:scale(var(--s,1))}}
.sub,.lede,.tag,.page-head p{text-shadow:0 0 14px #030806,0 0 5px #030806}
.chip,.btn:not(.primary){background-color:rgba(3,8,6,.72)}

/* wide layouts */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,4vw,72px);margin-top:44px}
.cols .sub-h{margin-top:0}
.cols .col>.lede{margin-bottom:16px}
@media(min-width:1700px){.cols{grid-template-columns:repeat(4,1fr)}.hero{gap:60px}}
@media(min-width:1100px){.hero{grid-template-columns:1.4fr .6fr}}
.rel,.dl,.band,.soon{width:100%}

#ivybg .dleaf{fill:rgba(var(--ivy-rgb),.5);stroke-width:1.4}
/* download page: manufacturers as branches of one vine */
.jump{margin:0 0 34px}
.mfr{--rail:clamp(22px,3vw,40px);position:relative;padding-left:var(--rail);margin-bottom:clamp(36px,5vw,64px);scroll-margin-top:80px}
.mfr::before{content:"";position:absolute;left:calc(var(--rail)/2 - 1px);top:16px;bottom:0;width:2px;border-radius:2px;background:linear-gradient(var(--ivy),transparent);opacity:.55}
.mfr>h2{position:relative;margin-bottom:18px}
.mfr>h2::before{content:"";position:absolute;left:calc(var(--rail)/-2 - 8px);top:.3em;width:16px;height:16px;border-radius:50% 0 50% 0;background:var(--void);border:2px solid var(--ivy);box-shadow:0 0 14px rgba(var(--ivy-rgb),.6)}
.mfr>h2 small{font:500 .9rem var(--sans);color:var(--muted);margin-left:10px;letter-spacing:0}
.devs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:14px;align-items:start}
.devc{padding:22px 24px;border-radius:20px;border:1px solid var(--hair);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(3,8,6,.75));scroll-margin-top:80px;transition:border-color .25s}
.devc:hover,.devc:target{border-color:rgba(var(--ivy-rgb),.5)}
.devc header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.devc h3{margin:0;color:#fff;font-size:1.25rem}
.devc .cn{font:400 .85rem var(--mono);color:var(--leaf)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.tags em{font-style:normal;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;border:1px solid var(--hair);color:var(--muted)}
.tags em.ok{color:var(--ivy);border-color:rgba(var(--ivy-rgb),.4)}
.bld{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(var(--ivy-rgb),.2)}
.bld h4{margin:0 0 6px;font:700 1.02rem var(--sans);color:#fff}
.bld .meta{font:400 .82rem var(--mono);color:var(--muted);margin-left:6px}
.bld .notes{margin:0 0 10px;color:var(--muted);white-space:pre-line;font-size:.93rem}
.devc .assets{grid-template-columns:1fr}
.gh{margin:26px 0 12px;font-size:1.15rem;color:#fff}
.gsi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.g{display:block;padding:0;border-radius:16px;border:1px solid var(--hair);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(3,8,6,.75));text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s}
.g:hover{border-color:var(--ivy);transform:translateY(-2px)}
.gtop{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.gtop b{font:700 1.3rem var(--display);color:var(--ivy)}.gtop span{color:var(--muted);font-size:.9rem}
.gname{font:400 .8rem var(--mono);color:var(--leaf);overflow-wrap:anywhere;margin-bottom:12px}
.gmeta{display:flex;align-items:center;gap:10px}
.gmeta em{font-style:normal;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(var(--ivy-rgb),.14);color:var(--ivy)}
.gmeta small{color:var(--muted)}
.gmeta .go{margin-left:auto;font-weight:700;color:var(--ivy)}
@media(max-width:560px){.asset{flex-wrap:wrap}.asset span{order:3;flex-basis:100%}.asset small{margin-left:auto}.devc{padding:18px}}

/* ===== explore: free-roam ivy tree ===== */
body[data-page=explore] footer{display:none}
.xstage{position:relative;height:calc(100vh - 56px);height:calc(100dvh - 56px);overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;
  background:linear-gradient(to top,#06150d,#030a06 40%,#010302)}
.xstage.drag{cursor:grabbing}
#xsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.xsvg .xstem{fill:none;stroke:var(--ivy);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:grow var(--dur) var(--ease,linear) var(--del) forwards}
.xsvg .xleaf{fill:rgba(var(--ivy-rgb),var(--fa,.2));stroke:var(--ivy);stroke-width:1.3;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:0% 50%;transform:scale(0);animation:sprout .9s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:var(--d)}
.xsvg .xleaf.dec{opacity:.6}
.xsvg.still .xstem{animation:none;stroke-dashoffset:0}
.xsvg.still .xleaf{animation:none;transform:scale(var(--s,1))}
.xsvg.still .xdev text{animation:none}
.xroot{opacity:.35}
.xdev{cursor:pointer;outline:none}
.xdev text{fill:#eafff2;font:600 13px var(--sans);paint-order:stroke;stroke:#020806;stroke-width:3.5px;stroke-linejoin:round;animation:fadein .6s var(--d,0s) both}
.xdev .cnt{fill:var(--muted);font:400 11px var(--mono)}
.xdev:hover .xleaf,.xdev:focus-visible .xleaf{fill:rgba(var(--ivy-rgb),.9)}
.xdev:hover text:not(.cnt){fill:var(--ivy)}
.xl-m{cursor:pointer}
.xl-m text{fill:var(--leaf);font:700 22px var(--display);paint-order:stroke;stroke:#020806;stroke-width:4px;stroke-linejoin:round}
.xl-m .sub{font:400 12px var(--mono);fill:var(--muted);stroke-width:3px}
.xl-m:hover text:not(.sub){fill:var(--ivy)}
.xl-s text{fill:var(--leaf);opacity:.85;font:italic 500 14px var(--sans);paint-order:stroke;stroke:#020806;stroke-width:3px}
.xempty{fill:var(--muted);font:500 16px var(--sans)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.xstage[data-z=far] .xdev text,.xstage[data-z=far] .xl-s{visibility:hidden}
.xstage[data-z=mid] .xdev .cnt{visibility:hidden}
.xbar{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;z-index:3;padding-bottom:4px}
.xbar::-webkit-scrollbar{display:none}
.xbar button{flex:none;font:inherit;cursor:var(--link);background:rgba(3,8,6,.85);backdrop-filter:blur(8px)}
.xbar button:hover{color:var(--ivy);border-color:var(--ivy)}
.xctl{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:3}
.xctl button{width:44px;height:44px;border-radius:12px;border:1px solid var(--hair);background:rgba(3,8,6,.88);color:var(--ivy);font:700 1.2rem var(--mono);cursor:var(--link);transition:.2s}
.xctl button:hover{border-color:var(--ivy);background:rgba(var(--ivy-rgb),.12)}
.xlegend{position:absolute;right:14px;bottom:14px;z-index:3;padding:12px 16px;border-radius:14px;border:1px solid var(--hair);background:rgba(3,8,6,.85);backdrop-filter:blur(8px);font-size:.82rem;color:var(--muted);display:grid;gap:3px;pointer-events:none}
.xlegend b{color:var(--leaf);font-weight:600}
.xhint{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:3;margin:0;padding:8px 16px;border-radius:99px;border:1px solid var(--hair);background:rgba(3,8,6,.85);color:var(--muted);font-size:.88rem;white-space:nowrap;pointer-events:none;animation:fadein .6s 1s both,hintout .8s 9s forwards}
@keyframes hintout{to{opacity:0}}
.sheet{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);z-index:4;overflow:auto;padding:56px 22px 26px;background:rgba(3,8,6,.94);backdrop-filter:blur(14px);border-left:1px solid var(--hair);cursor:auto;user-select:text;-webkit-user-select:text}
.sheet[hidden]{display:none}
.sheet .devc{border:0;background:none;padding:0}
.sheet .gsi-grid{grid-template-columns:1fr}
.sheet h3.st{margin:0 0 14px;color:#fff;font-size:1.3rem}
.crumb{margin:0 0 8px;color:var(--muted);font:400 .85rem var(--mono)}
.sx{position:absolute;top:12px;right:14px;width:38px;height:38px;border-radius:10px;border:1px solid var(--hair);background:none;color:var(--text);font-size:1.4rem;line-height:1;cursor:var(--link)}
.sx:hover{border-color:var(--ivy);color:var(--ivy)}
@media(max-width:700px){.sheet{top:auto;width:100%;max-height:64%;border-left:0;border-top:1px solid var(--hair)}.xlegend{display:none}.xhint{white-space:normal;width:max-content;max-width:86%;text-align:center}}

/* soft dark halo so text stays readable over dense ivy */
.copy::before,.page-head::before{content:"";position:absolute;inset:-34px -48px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 40% 50%,rgba(3,8,6,.8),rgba(3,8,6,.5) 55%,transparent 78%)}
.page-head{position:relative}

/* ===== explore v2 ===== */
.xstars{position:absolute;inset:-8%;pointer-events:none;will-change:transform}
.xstars i{position:absolute;left:0;top:0;width:1px;height:1px;display:block}
#xsvg{z-index:1}
.xsvg .xleaf.eol{fill:rgba(214,162,74,.17);stroke:#d6a24a;animation:none;transform:none;opacity:1}
.xsvg .fall{transform-box:fill-box;transform-origin:50% 100%;animation:fallin 1.5s var(--d,1s) cubic-bezier(.3,.7,.4,1) both}
@keyframes fallin{0%{opacity:0;transform:translate(14px,-340px) rotate(-70deg)}60%{opacity:1}100%{opacity:1;transform:none}}
.xsvg.still .fall{animation:none}
.xdev.eol text:not(.cnt){fill:#f3dca8}
.xdev.eol .cnt{fill:#b99a5a}
.xdev.eol:hover .xleaf,.xdev.eol:focus-visible .xleaf{fill:rgba(214,162,74,.5)}
.xbar .eolchip{border-color:rgba(214,162,74,.4);color:#e6c487}
.xbar .eolchip b{color:#e6c487}
.tags em.eol{color:#d6a24a;border-color:rgba(214,162,74,.5)}
.devc.is-eol{border-color:rgba(214,162,74,.25)}
.devc .tl{margin-left:auto;font:600 .8rem var(--sans);color:var(--ivy);text-decoration:none}
.devc .tl:hover{text-decoration:underline}
/* explore promotion */
.xcta{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin:clamp(26px,4vw,46px) 0;padding:22px 26px;border-radius:20px;border:1px solid rgba(var(--ivy-rgb),.38);background:linear-gradient(120deg,rgba(var(--ivy-rgb),.14),rgba(3,8,6,.82) 62%);text-decoration:none;color:var(--text);transition:border-color .25s,transform .25s}
.xcta:hover{border-color:var(--ivy);transform:translateY(-2px)}
.xcta-t{flex:1 1 320px}
.xcta b{display:block;color:#fff;font-size:1.25rem;margin-bottom:4px}
.xcta small{color:var(--muted);font-size:.97rem}
.chip.hot{border-color:rgba(var(--ivy-rgb),.6);color:var(--ivy)}
.bar nav a[href="explore.html"],.bar nav a[href="/explore.html"]{color:var(--ivy);opacity:1;font-weight:600}
.tprev{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:0;align-items:stretch;padding:0;border-radius:28px;border:1px solid rgba(var(--ivy-rgb),.32);background:linear-gradient(to top,#07180f,#030a06 45%,#010302);text-decoration:none;color:var(--text);overflow:hidden;transition:border-color .25s}
.tprev:hover{border-color:var(--ivy)}
.tprev h2{margin:0 0 12px}
.tprev .lede{margin-bottom:22px}
.tcopy{padding:clamp(24px,3.4vw,48px);align-self:center;position:relative;z-index:1}
.tsvg{height:clamp(340px,42vw,540px);min-width:0;position:relative}
.tsvg .xsvg{width:100%;height:100%;display:block;overflow:hidden}
@media(max-width:860px){.tprev{grid-template-columns:1fr}.tsvg{height:380px}}

@media(min-width:861px){
  .tprev{display:block;position:relative;min-height:clamp(360px,42vw,560px)}
  .tsvg{position:absolute;inset:0;height:auto}
  .tcopy{position:relative;z-index:2;max-width:min(46%,540px);padding-top:clamp(40px,8vw,120px);padding-bottom:clamp(40px,8vw,120px)}
}

/* ===== roots: contributors, the ivy in reverse ===== */
.xsvg .xstem.xr{stroke:var(--root);opacity:.92}
.xsvg .xtip{fill:var(--root);stroke:#fff0cf;stroke-width:1.2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:sprout .8s cubic-bezier(.2,1.4,.4,1) var(--d,0s) forwards;--s:1}
.xsvg.still .xtip{animation:none;transform:none}
.xcon text{fill:#efe2c6;font:600 12px var(--sans)}
.xcon:hover .xtip,.xcon:focus-visible .xtip{fill:#fff0cf}
.xcon:hover text{fill:#fff}
.xl-r text:not(.sub){fill:#e6c98e}
.xbar .rootchip{border-color:rgba(201,168,108,.45);color:#dcc08a}
.xbar .rootchip b{color:#dcc08a}

/* ===== contributor links, series groups, gsi card ===== */
.gmain{display:block;padding:18px 20px 10px;text-decoration:none;color:inherit}
.gby{margin:0;padding:0 20px 14px;color:var(--muted);font-size:.85rem}
.by{color:var(--root);font-weight:600;text-decoration:none}
.by:hover{text-decoration:underline}
.byline{margin:0 0 10px;color:var(--muted);font-size:.9rem}
.sgroup{margin-bottom:26px}
.sh{margin:0 0 12px;font:italic 600 1.1rem var(--sans);color:var(--leaf)}
.sh small{font:400 .8rem var(--mono);color:var(--muted);margin-left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== explore: stage + right-hand list ===== */
.xlayout{display:flex;height:calc(100vh - 56px);height:calc(100dvh - 56px)}
.xlayout .xstage{flex:1;min-width:0;height:100%}
.xhint{top:16px}
.xside{flex:0 0 clamp(310px,25vw,400px);display:flex;flex-direction:column;min-height:0;background:rgba(3,8,6,.97);border-left:1px solid var(--hair);position:relative;z-index:5}
.xs-head{display:flex;gap:8px;align-items:center;padding:14px;border-bottom:1px solid var(--hair)}
.xs-search{position:relative;flex:1;display:block}
.xs-search input{width:100%;padding:12px 14px 12px 40px;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.045);color:var(--text);font:inherit;font-size:.95rem;outline:none;transition:border-color .2s}
.xs-search input:focus{border-color:var(--ivy)}
.xs-search input::placeholder{color:var(--muted)}
.xs-search::before{content:"";position:absolute;left:15px;top:50%;width:10px;height:10px;border:2px solid var(--muted);border-radius:50%;transform:translateY(-64%);pointer-events:none}
.xs-search::after{content:"";position:absolute;left:26px;top:calc(50% + 4px);width:6px;height:2px;background:var(--muted);transform:rotate(45deg);pointer-events:none}
.xs-tog{display:none;padding:11px 16px;border-radius:12px;border:1px solid var(--hair);background:rgba(var(--ivy-rgb),.12);color:var(--ivy);font:700 .9rem var(--sans);cursor:var(--link)}
.xs-body{flex:1;min-height:0;overflow-y:auto;padding:2px 14px 30px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(var(--ivy-rgb),.4) transparent}
.xs-body[hidden]{display:none}
.xs-top{position:sticky;top:0;z-index:2;background:rgba(3,8,6,.97);padding:12px 0 10px}
.xs-back{background:none;border:1px solid var(--hair);border-radius:10px;padding:8px 14px;color:var(--text);font:600 .85rem var(--sans);cursor:var(--link)}
.xs-back:hover{border-color:var(--ivy);color:var(--ivy)}
.xs-h{margin:22px 0 6px;font:700 1rem var(--sans);color:#fff}
.xs-detail .devc{border:0;background:none;padding:0}
.xs-detail .gsi-grid{grid-template-columns:1fr}
.xs-detail h3.st{margin:0 0 14px;color:#fff;font-size:1.3rem}
.xl-g{margin:0 0 8px}
.xl-man{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--hair);padding:18px 2px 9px;color:#fff;font:700 1.02rem var(--display);cursor:var(--link)}
.xl-man small{font:400 .8rem var(--mono);color:var(--muted)}
.xl-man:hover span{color:var(--ivy)}
.xl-ser{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;border:0;padding:12px 2px 4px 10px;color:var(--leaf);font:italic 600 .95rem var(--sans);cursor:var(--link)}
.xl-ser small{font:400 .76rem var(--mono);color:var(--muted)}
.xl-ser:hover span{color:var(--ivy)}
.xl-dev{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:8px 10px 8px 20px;color:var(--text);cursor:var(--link);font:inherit}
.xl-dev:hover{background:rgba(var(--ivy-rgb),.11)}
.xl-dev span{min-width:0;display:flex;flex-direction:column}
.xl-dev b{font-weight:600;font-size:.94rem;overflow-wrap:anywhere}
.xl-dev small{color:var(--muted);font:400 .76rem var(--mono)}
.xl-dev em{flex:none;font-style:normal;font-size:.74rem;color:var(--muted)}
.xl-dev.eol b{color:#f3dca8}
.xl-dev.con b{color:#efe2c6}
.xl-note{margin:8px 0 10px;padding:10px 12px;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.03);color:var(--muted);font-size:.86rem;line-height:1.5}
.xl-note b{color:#fff}
.eolg .xl-note{border-color:rgba(214,162,74,.35)}
.eolg .xl-man{color:#e6c487}
.rootg .xl-man,.rootg .xl-ser{color:#dcc08a}
@media(max-width:860px){
  .xlayout{display:block;position:relative}
  .xlayout .xstage{height:100%}
  .xside{position:absolute;left:0;right:0;bottom:0;height:min(66%,580px);flex:none;border-left:0;border-top:1px solid var(--hair);border-radius:18px 18px 0 0;transform:translateY(calc(100% - 71px));transition:transform .3s}
  .xside.open{transform:none}
  .xs-tog{display:block}
  .xctl{bottom:86px}
}
@media(prefers-reduced-motion:reduce){.xside{transition:none}}

.xl-g{padding:0;position:static;z-index:auto}

/* planned / draft labels */
.plan{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:99px;border:1px solid rgba(255,206,61,.5);background:rgba(255,206,61,.08);color:#ffce3d;font:700 .66rem var(--sans);letter-spacing:.2px;vertical-align:middle;white-space:nowrap}
.page-head h1 .plan{font-size:.78rem;margin-left:12px;vertical-align:middle}