/* Pyraminx.net — shared design system: tokens, base elements, navbar, cards, common widgets. */

:root{
  --ink:#0e1420; --ink2:#141c2c; --panel:#19222f; --panel2:#1f2a3a;
  --line:rgba(174,190,214,.14); --line2:rgba(174,190,214,.26);
  --txt:#e8edf6; --mut:#9fadc4; --dim:#6c7a92;
  --green:#3fbf52; --red:#e8473d; --blue:#3a7fe8; --yellow:#f2cf3c;
  --act:#f2cf3c; --actink:#231c05;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  color-scheme:dark;
  scrollbar-color:var(--panel2) transparent;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;font-family:var(--body);color:var(--txt);background:
  radial-gradient(1200px 500px at 85% -10%, rgba(58,127,232,.08), transparent 60%),
  radial-gradient(900px 480px at -10% 8%, rgba(63,191,82,.06), transparent 55%),
  var(--ink);min-height:100vh;font-size:15.5px;line-height:1.55}
a{color:var(--txt)}
code,.mono{font-family:var(--mono)}
button{font-family:var(--body);font-size:14.5px;cursor:pointer;border:none;border-radius:9px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.primary{background:var(--act);color:var(--actink);font-weight:600;padding:.62em 1.1em}
.primary:hover{filter:brightness(1.07)}
.primary[disabled]{opacity:.4;cursor:not-allowed}
.ghost{background:transparent;color:var(--mut);border:1px solid var(--line2);padding:.55em 1em;border-radius:9px;text-decoration:none;display:inline-block}
.ghost:hover{color:var(--txt);border-color:var(--mut)}
.ghost.off{opacity:.3;pointer-events:none}
.ghost.sm{padding:.3em .7em;font-size:13px}
.ghost.big{font-size:16px;padding:.7em 1.4em}
.danger{background:transparent;color:var(--red);border:1px solid rgba(232,71,61,.5);padding:.55em 1em}
.danger:hover{background:rgba(232,71,61,.12)}
/* top bar */
.topbar{border-bottom:1px solid var(--line)}
.topbar-main{display:flex;align-items:center;gap:26px;padding:14px 26px;flex-wrap:wrap}
.subnav{display:flex;gap:2px;align-items:center;padding:0 22px 9px;flex-wrap:wrap}
.sublink{text-decoration:none;color:var(--mut);padding:.32em .85em;border-radius:7px;font-weight:500;font-size:13.5px}
.sublink:hover{color:var(--txt)}
.sublink.on{color:var(--txt);background:var(--panel2)}
.wordmark{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.06em;text-decoration:none;display:flex;align-items:center;gap:9px}
.wordmark b{color:var(--yellow);font-weight:800}
.tri{width:17px;height:15px;display:inline-block;background:
  conic-gradient(from 0deg at 50% 62%, var(--green) 0 90deg, var(--blue) 90deg 180deg, var(--red) 180deg 270deg, var(--yellow) 270deg 360deg);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.navtabs{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.navlink{text-decoration:none;color:var(--mut);padding:.45em .9em;border-radius:8px;font-weight:500}
.navlink:hover{color:var(--txt)}
.navlink.on{color:var(--txt);background:var(--panel2)}
.authbox{display:flex;align-items:center;gap:12px}
.whoami{color:var(--mut);font-size:14px}
.demobadge{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);border:1px dashed rgba(242,207,60,.5);border-radius:6px;padding:2px 8px}
.page{max-width:1060px;margin:0 auto;padding:30px 24px 80px}
/* home */
.homeintro{margin:34px 0 24px;max-width:640px}
.homeintro h1{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3.4vw,32px);line-height:1.18;margin:0 0 12px;letter-spacing:-.005em}
.lede{color:var(--mut);margin:0;max-width:58ch}
.lede.sm{font-size:14.5px}
.progressblock{margin:0 0 26px;max-width:640px}
.progressline{color:var(--mut);font-size:14px;margin:9px 0 0}
.progressline b{color:var(--txt);font-weight:600}
.progressline .pct{color:var(--yellow)}
.barwrap{height:10px;border-radius:6px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.bar{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--green),var(--yellow));min-width:2px;transition:width .8s ease}
.homelinks{display:flex;gap:10px;flex-wrap:wrap}
/* search */
.searchrow{display:flex;gap:10px;margin:0 0 18px;max-width:640px}
.searchin{flex:1;background:var(--panel);border:1px solid var(--line2);border-radius:10px;color:var(--txt);padding:.7em .95em;font-size:14.5px}
.searchin::placeholder{color:var(--dim)}
/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.card.error{border-color:rgba(232,71,61,.5);color:var(--red)}
.card h3{font-family:var(--disp);font-weight:650;margin:0 0 8px;font-size:17px}
.card p{color:var(--mut);margin:0;font-size:14.5px}
.empty{color:var(--dim);font-style:italic}
/* pair page */
.crumbs{color:var(--dim);font-size:13.5px;margin-bottom:14px}
.crumbs a{color:var(--mut)}
.pairrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.pairrow.single{grid-template-columns:minmax(0,640px);justify-content:center}
.sidepanel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.sidehead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sidelabel{font-family:var(--disp);font-weight:650;font-size:15px;letter-spacing:.02em}
.ordinal{margin-left:auto;color:var(--dim);font-size:13px}
.depthchip{font-size:12px;border-radius:6px;padding:2px 8px;background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
.donechip{font-size:12px;border-radius:6px;padding:2px 8px;color:var(--green);border:1px solid rgba(63,191,82,.5)}
.viewtoggle{display:flex;align-items:center;gap:6px;margin:6px 0 2px}
.viewbtn{background:transparent;border:1px solid var(--line2);color:var(--mut);border-radius:7px;padding:.2em .7em;font-size:12.5px}
.viewbtn.on{color:var(--actink);background:var(--act);border-color:var(--act);font-weight:600}
.viewhint{color:var(--dim);font-size:12px;margin-left:6px}
.netwrap{display:flex;justify-content:center;padding:8px 0 12px;min-height:200px;align-items:center;touch-action:none}
.netwrap.grab{cursor:grab}
.netwrap.grab:active{cursor:grabbing}
.oonet polygon{stroke:var(--ink);stroke-width:.018;stroke-linejoin:round}
.oonet .dcap{font-size:.13px;fill:var(--dim);font-family:var(--body)}
.oonet.oo3d polygon{stroke-width:.022}
.scrline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0}
.scrlabel{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.scr{font-size:15px;color:var(--txt);word-break:break-word}
.copy{background:transparent;border:1px solid var(--line2);color:var(--mut);border-radius:7px;padding:.15em .5em;font-size:14px}
.copy:hover{color:var(--txt)}
.symhead{font-size:13px;color:var(--mut);margin:10px 0 6px}
.hintt{color:var(--dim)}
.symstrip{display:flex;gap:6px;flex-wrap:wrap}
.symthumb{background:var(--ink2);border:1px solid var(--line);border-radius:9px;padding:4px;line-height:0}
.symthumb:hover{border-color:var(--mut)}
.symthumb.on{border-color:var(--yellow)}
.symdetail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:1.6em;margin-top:8px}
/* solutions */
.solcard{margin-bottom:16px}
.solrow{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.solrow:first-of-type{border-top:none}
.solrow.pending{opacity:.65}
.solcell{display:flex;flex-direction:column;gap:4px}
.soltag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.soltag.auto{color:var(--blue)}
.sol{font-size:15.5px}
.solmeta{color:var(--mut);font-size:13.5px;white-space:nowrap}
.solin{width:100%;background:var(--ink2);border:1px solid var(--line2);border-radius:10px;color:var(--txt);padding:.7em .9em;font-size:15.5px;resize:vertical;margin-bottom:8px}
.verifyline{font-size:13.5px;color:var(--dim);min-height:1.5em;margin-bottom:8px}
.verifyline.good{color:var(--green)}
.verifyline.bad{color:var(--red)}
.namerow{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:14px;margin-bottom:14px}
/* browse */
.browsehead h2{font-family:var(--disp);font-weight:700;margin:0 0 6px}
.depthchips{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 22px}
.depthsel{display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:7px 11px;min-width:62px;background:var(--panel)}
.depthsel b{font-family:var(--disp);font-size:17px}
.depthsel span{font-size:11px;color:var(--dim)}
.depthsel:hover{border-color:var(--mut)}
.depthsel.on{border-color:var(--yellow);background:var(--panel2)}
.classgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.classcell{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 8px 6px;text-decoration:none;text-align:center}
.classcell:hover{border-color:var(--mut)}
.classcell.done{border-color:rgba(63,191,82,.45)}
.cellmeta{font-size:12px;color:var(--dim);margin-top:3px}
.tick{color:var(--green)}
.pager{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pginfo{color:var(--dim);font-size:13.5px}
/* mod */
.modrow{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-bottom:12px}
.modacts{display:flex;flex-direction:column;gap:8px}
.modlist{margin:10px 0}
.modent{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);color:var(--mut);font-size:14.5px}
.modent:first-child{border-top:none}
.inviterow{display:flex;gap:10px;margin-top:10px}
/* about */
.prose h2{font-family:var(--disp);font-weight:700;margin-top:0}
.prose h3{font-family:var(--disp);font-weight:650;margin:22px 0 6px}
.prose p{color:var(--mut);font-size:15px;max-width:72ch}
.nottable{display:grid;gap:0;margin:8px 0}
.nrow{display:grid;grid-template-columns:190px 230px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--mut)}
.nrow:first-child{border-top:none}
.nrow b{color:var(--txt);font-weight:600}
.nrow code{color:var(--yellow)}
/* toast + boot */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--panel2);border:1px solid var(--line2);color:var(--txt);padding:.7em 1.2em;border-radius:11px;opacity:0;transition:all .3s ease;z-index:50;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
#boot-status{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--ink);z-index:40;transition:opacity .4s ease}
#boot-status.gone{opacity:0;pointer-events:none;visibility:hidden}
#boot-status .bigtri{width:74px;height:64px;background:conic-gradient(from 0deg at 50% 62%, var(--green) 0 90deg, var(--blue) 90deg 180deg, var(--red) 180deg 270deg, var(--yellow) 270deg 360deg);clip-path:polygon(50% 0,100% 100%,0 100%);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){#boot-status .bigtri{animation:none}.bar{transition:none}}
#boot-label{color:var(--mut);font-size:14.5px}
#boot-hint{color:var(--dim);font-size:12.5px;max-width:40ch;text-align:center}
#boot-track{width:280px;height:8px;border-radius:5px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
#boot-bar{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--yellow));transition:width .25s ease}
@media(max-width:860px){
  .pairrow{grid-template-columns:1fr}
  .solrow{grid-template-columns:1fr;gap:6px}
  .modrow{grid-template-columns:1fr}
  .nrow{grid-template-columns:1fr;gap:2px}
  .topbar{gap:12px}
}