:root{--void:#060608;--matte:#0c0c0f;--ash:#55525a;--bone:#d8d0c4;--ember:#ffb979;--line:rgba(255,236,214,.08);--glass:rgba(255,246,232,.035);
--f-display:"Jost","Futura","Avenir Next","Segoe UI",sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;--f-read:"Newsreader",Georgia,"Times New Roman",serif;color-scheme:dark}
html,body{height:100%;margin:0}
body{background:var(--void);color:var(--bone);font-family:var(--f-display);font-size:14px;overflow:hidden;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
canvas#sky{position:fixed;inset:0;width:100%;height:100%;display:block}
#stage{position:fixed;inset:0;--hr:120px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--ember);outline-offset:4px}
#ygg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:22px 46px;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:#bdb5a9;letter-spacing:.42em;text-indent:.42em;font-weight:300;font-size:clamp(15px,2.4vw,20px);transition:color .6s,border-color .6s,box-shadow .6s,background .6s,opacity .5s,transform .9s cubic-bezier(.7,0,.3,1),letter-spacing .9s,filter .9s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#ygg:hover,#ygg:focus-visible{color:#fff4e6;border-color:rgba(255,185,121,.5);background:rgba(255,236,214,.06);box-shadow:0 0 0 1px rgba(255,185,121,.08) inset,0 0 60px rgba(255,170,90,.14)}
#ygg small{display:block;margin-top:10px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.3em;text-indent:.3em;color:var(--ash);transition:color .6s}
#ygg:hover small{color:#9a8d7c}
body.vortex #ygg,body.warp #ygg{opacity:0;pointer-events:none;letter-spacing:0;transform:translate(-50%,-50%) scale(.18);filter:blur(6px) brightness(.2)}
#vortex{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s}
body.vortex #vortex{opacity:1;pointer-events:auto}
.horizon{position:absolute;left:50%;top:50%;width:calc(var(--hr)*2);height:calc(var(--hr)*2);margin:calc(var(--hr)*-1) 0 0 calc(var(--hr)*-1);border-radius:50%;background:radial-gradient(circle at 50% 45%,#101014 0%,var(--matte) 55%,#08080a 100%);box-shadow:0 0 0 1px rgba(255,236,214,.05),inset 0 0 50px rgba(0,0,0,.9),0 0 90px rgba(0,0,0,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:width .7s cubic-bezier(.6,0,.2,1),height .7s cubic-bezier(.6,0,.2,1),margin .7s cubic-bezier(.6,0,.2,1),transform .9s cubic-bezier(.6,0,.2,1);transform:scale(.15)}
body.vortex .horizon{transform:scale(1)}
.disk{position:absolute;left:50%;top:50%;width:calc(var(--hr)*3.3);height:calc(var(--hr)*3.3);margin:calc(var(--hr)*-1.65) 0 0 calc(var(--hr)*-1.65);border-radius:50%;pointer-events:none;opacity:0;transform:rotate(-14deg) scaleY(.3);background:radial-gradient(closest-side,transparent 60%,rgba(255,170,95,.13) 64%,rgba(255,215,170,.07) 70%,rgba(255,150,80,.03) 80%,transparent 92%);transition:opacity .8s,width .7s,height .7s,margin .7s}
.disk::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(255,200,150,.10),transparent 30%,transparent 50%,rgba(255,180,120,.07),transparent 80%);-webkit-mask:radial-gradient(closest-side,transparent 60%,#000 66%,#000 78%,transparent 90%);mask:radial-gradient(closest-side,transparent 60%,#000 66%,#000 78%,transparent 90%);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body.deep .disk{opacity:1}
.minus{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;z-index:3;display:grid;place-items:center;transition:top .7s cubic-bezier(.6,0,.2,1),background .5s}
.minus i{display:block;width:30px;height:3px;border-radius:2px;background:#3d3b42;transition:background .5s,box-shadow .5s,width .5s}
.minus:hover i,.minus:focus-visible i{background:#141317;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.minus:hover{background:radial-gradient(circle,rgba(0,0,0,.5),transparent 70%)}
#stage.open .minus{top:calc(100% - 34px)}
#stage.open .minus i{width:22px}
.orb{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;z-index:4;display:grid;place-items:center;background:var(--glass);border:1px solid var(--line);color:var(--ash);transition:color .4s,border-color .4s,box-shadow .4s,background .4s,width .6s,height .6s,margin .6s,opacity .5s;will-change:transform}
.orb svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.orb:hover,.orb:focus-visible,.orb.on{color:#fff1df;border-color:rgba(255,185,121,.45);background:rgba(255,236,214,.05);box-shadow:0 0 28px rgba(255,170,90,.16)}
.orb .lbl{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#4a474f;transition:color .4s,opacity .4s;pointer-events:none}
.orb:hover .lbl,.orb.on .lbl{color:#b7a48c}
@media (hover:hover){.orb .lbl{opacity:0}.orb:hover .lbl,.orb:focus-visible .lbl,.orb.on .lbl{opacity:1}}
#stage.open .orb{width:34px;height:34px;margin:-17px 0 0 -17px}
#stage.open .orb svg{width:15px;height:15px}
#stage.open .orb .lbl{opacity:0}
.orb.prime::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(255,236,214,.06)}
.site{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;z-index:4;text-decoration:none;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;color:#5d5962;background:rgba(255,255,255,.02);border:1px solid rgba(255,236,214,.05);transition:color .4s,border-color .4s,box-shadow .4s,opacity .5s}
.site:hover,.site:focus-visible{color:#fff1df;border-color:rgba(255,185,121,.4);box-shadow:0 0 22px rgba(255,170,90,.14)}
.site span{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8.5px;letter-spacing:.08em;color:#45424a;transition:color .4s}
.site:hover span{color:#a8977f}
#stage.open .site{opacity:0;pointer-events:none}
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);width:calc(var(--hr)*1.42);max-height:calc(var(--hr)*1.36);display:flex;flex-direction:column;gap:12px;opacity:0;pointer-events:none;transition:opacity .45s .2s;z-index:2;min-width:0}
#stage.open .panel{opacity:1;pointer-events:auto}
.ph{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#7c7366;text-align:center}
.pb{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:#2a282d transparent;padding-right:2px}
.field{width:100%;box-sizing:border-box;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:999px;color:var(--bone);font:400 15px var(--f-display);padding:12px 18px;outline:none;transition:border-color .4s,box-shadow .4s}
.field:focus{border-color:rgba(255,185,121,.4);box-shadow:0 0 24px rgba(255,170,90,.08)}
textarea.field{border-radius:14px;min-height:120px;resize:vertical;font-size:14px;line-height:1.5}
select.field{appearance:none;-webkit-appearance:none}
.row{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid transparent;transition:border-color .3s,background .3s}
.row:hover{border-color:var(--line);background:rgba(255,255,255,.015)}
.row a{flex:1;min-width:0;color:#b3aa9d;text-decoration:none;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s}
.row a:hover{color:#fff1df}
.row time,.meta{font-family:var(--f-mono);font-size:9.5px;color:#4f4b54;letter-spacing:.06em;white-space:nowrap}
.mini{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6a6570;padding:6px 10px;border-radius:999px;border:1px solid var(--line);transition:color .3s,border-color .3s}
.mini:hover,.mini:focus-visible{color:#ffdcb8;border-color:rgba(255,185,121,.35)}
.x{color:#3f3c44;font-size:15px;line-height:1;padding:2px 6px;transition:color .3s}
.x:hover{color:#ffb979}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.empty{color:#57535c;font-size:13px;text-align:center;line-height:1.5;padding:10px 6px}
.go{display:block;text-align:center;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:#c9a37c;text-decoration:none;padding:6px}
.go:hover{color:#ffdcb8}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.5px;color:#9a9288}
.kv b{font-family:var(--f-mono);font-weight:400;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#5a5660;padding-top:2px}
.rank{display:flex;flex-direction:column;gap:5px}
.rank div{display:grid;grid-template-columns:1fr 70px;gap:8px;align-items:center;font-size:12px;color:#8d867c}
.rank s{display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,185,121,.55),rgba(255,185,121,.08));text-decoration:none}
.reading{font-family:var(--f-read);font-size:16px;line-height:1.65;color:#cfc6b8;white-space:pre-wrap;max-width:62ch}
.hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#3a383e;white-space:nowrap;transition:opacity .6s;pointer-events:none}
body.vortex .hint.y,body:not(.vortex) .hint.v{opacity:0}
#constel{position:absolute;inset:0;pointer-events:none;transition:opacity .6s,filter .6s,visibility .6s}
body.vortex #constel,body.warp #constel{opacity:0;filter:blur(4px);visibility:hidden}
.fam{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;flex-direction:column;gap:6px;min-width:0;max-width:240px}
.fam h3{margin:0;font:500 9px var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:#4d4952;transition:color .4s}
.fl{display:flex;flex-direction:column;gap:5px;min-width:0}
.fam.cols .fl{display:grid;grid-template-columns:auto auto;gap:5px 18px}
.fl a,.fl span{font:300 13px var(--f-display);color:#5f5b64;text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;transition:color .4s}
.fl a{color:#8a8279}
.fl .slug{font:400 11px var(--f-mono);letter-spacing:.02em}
.fl i{width:5px;height:5px;border-radius:50%;flex:none;border:1px solid currentColor;opacity:.7;transition:box-shadow .4s,color .4s}
.fl a i{background:currentColor;opacity:1}
.fam:hover h3{color:#9a8d7c}
.fam:hover span{color:#827c86}
.fl a:hover,.fl a:focus-visible{color:#fff1df}
.fl a:hover i{color:var(--ember);box-shadow:0 0 10px rgba(255,185,121,.7)}
#constel.narrow{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 18px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 50px) max(16px,env(safe-area-inset-left,0px))}
.cregion{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;align-items:start;min-width:0}
#constel.narrow .fam{position:static;transform:none;max-width:none}
#constel.narrow .fam.cols{grid-column:1/-1}
.fam.cols{max-width:400px}
#ygg small{white-space:nowrap}
#constel.narrow .fl a,#constel.narrow .fl span{font-size:12px}
#constel.narrow .fl .slug{font-size:10.5px}
.horizon::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:var(--grain);opacity:.35;mix-blend-mode:overlay}
.horizon::after{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;padding:1.2px;background:conic-gradient(from 210deg,rgba(255,170,100,.42),rgba(255,170,100,.06) 22%,transparent 45%,rgba(255,200,150,.1) 70%,rgba(255,170,100,.42));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.5;transition:opacity .6s}
body.deep .horizon::after,body.closing .horizon::after{opacity:1}
.minus i{width:34px;height:7px;border-radius:4px;background:#08080a;box-shadow:inset 0 2px 3px rgba(0,0,0,.95),0 1px 0 rgba(255,236,214,.07)}
.minus:hover i,.minus:focus-visible i{background:#000;box-shadow:inset 0 3px 5px #000,0 1px 0 rgba(255,236,214,.03),0 0 22px 6px rgba(0,0,0,.85)}
#stage.open .minus i{width:24px;height:6px}
body.vortex.closing .horizon{transform:scale(.04);transition:transform .7s cubic-bezier(.7,0,.95,.3)}
body.closing .minus i{background:#000;width:10px}
body.closing .orb,body.closing .site{opacity:0;transition:opacity .35s}
body.closing .disk{opacity:1}
.orb b,.orb small{display:none}
.orb.card{width:auto;height:auto;margin:0;border-radius:14px;padding:12px 18px 12px 14px;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;justify-items:start;text-align:left;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:linear-gradient(160deg,rgba(255,246,232,.055),rgba(255,246,232,.015));border-color:rgba(255,236,214,.09);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.orb.card svg{grid-row:1/3;width:22px;height:22px}
.orb.card b{display:block;font:400 14px var(--f-display);color:#a39c94;letter-spacing:.02em;transition:color .4s}
.orb.card small{display:block;font:300 11.5px var(--f-display);color:#57535c;white-space:nowrap;transition:color .4s}
.orb.card .lbl{display:none}
.orb.card.prime::before{inset:-6px;border-radius:18px}
.orb.card:hover b,.orb.card:focus-visible b{color:#fff1df}
.orb.card:hover small,.orb.card:focus-visible small{color:#a8977f}
.orb.card:hover,.orb.card:focus-visible{box-shadow:0 0 0 1px rgba(255,185,121,.18),0 0 34px rgba(255,170,90,.14),0 10px 30px rgba(0,0,0,.45)}
.eco{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(env(safe-area-inset-top,0px) + 20px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));pointer-events:none;opacity:0;transition:opacity .8s .3s;z-index:5}
body.vortex .eco{opacity:1}
body.closing .eco{opacity:0;transition-delay:0s}
.eco div{display:flex;flex-direction:column;gap:5px}
.eco div:last-child{align-items:flex-end;text-align:right}
.eco b{font:500 10px var(--f-mono);letter-spacing:.32em;color:#6d6870}
.eco span{font:400 9px var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:#45424a}
.absorb{position:fixed;left:0;top:0;z-index:9;pointer-events:none;font:400 11px var(--f-mono);letter-spacing:.06em;color:#d8d0c4;padding:8px 12px;border-radius:10px;background:rgba(255,246,232,.05);border:1px solid rgba(255,236,214,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01s!important;animation:none!important}}