/* Aura mint brand system inspired by the supplied A/WiFi logo board. */
:root{--b:#eef8ed;--w:#101311;--m:#536258;--l:#c9dccc;--mint:#7fc9a6;--mint2:#dff0df;--ink:#070908;--panel:#f7fff5;--glass:rgba(255,255,255,.58)}
body{background:radial-gradient(circle at 78% 8%,#f9fff6 0,#e8f5e6 34%,#dbeada 70%,#d5e5d3 100%);color:var(--ink)}
.grid{background-image:linear-gradient(rgba(78,130,96,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(78,130,96,.13) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(#000,transparent 92%);opacity:.7}
header{height:104px;border-bottom:1px solid rgba(6,9,7,.1);backdrop-filter:blur(18px);position:relative;z-index:5}
.logo{color:#0a0d0b;letter-spacing:.36em;font-size:15px;gap:16px;text-transform:uppercase}
.logo i{color:#0a0d0b;font-weight:500;letter-spacing:.42em}
.mark{width:12px;height:34px;border:0;border-left:3px solid var(--mint);transform:none;display:block}
.mark b{display:none}
nav a,footer a{color:#273229;font-weight:700}
nav a:hover,nav .selected{color:#000}
.navbtn,.button{border:1px solid rgba(7,9,8,.18);border-radius:999px;background:#0a0d0b;color:#fff;box-shadow:0 18px 35px rgba(12,18,13,.12)}
.navbtn{padding:14px 22px;background:#0a0d0b;color:#fff}
.button{padding:15px 23px}
.button.white,.white{background:#fff;color:#070908;border-color:#fff}
.pill{border:1px solid rgba(35,91,62,.22);background:rgba(255,255,255,.58);color:#263529;border-radius:999px;box-shadow:0 12px 35px rgba(70,119,84,.08)}
h1{letter-spacing:.12em;text-transform:uppercase;color:#080b09;font-weight:800}
h1 span,h2 span{color:#496354}
.lede,.hero p,.intro p,.head p,.quality p,.cards p,.hostgrid p,.paths p,.row p,.api p,.doc-grid p,.doc-grid li,.policy p,.policy li{color:#506256}
.hero{min-height:730px;padding:72px 50px 92px;grid-template-columns:1fr 1.05fr}
.hero h1{font-size:clamp(55px,5.6vw,104px);line-height:1.06}
.hero p{font-size:19px}
.orb{height:570px;overflow:visible}
.orb:before{width:70%;height:70%;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 2px,transparent 3px),radial-gradient(circle at 68% 34%,#fff 0 2px,transparent 3px),radial-gradient(circle at 76% 58%,#fff 0 2px,transparent 3px),radial-gradient(circle at 40% 67%,#fff 0 2px,transparent 3px),repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.9) 0 1px,transparent 1px 7px);background-color:rgba(185,219,187,.6);box-shadow:inset 0 0 38px rgba(255,255,255,.9),0 30px 90px rgba(83,125,87,.24);mask-image:radial-gradient(circle,#000 50%,transparent 75%)}
.orb:after{content:"";position:absolute;bottom:68px;width:58%;height:72px;border-radius:50%;background:linear-gradient(#fff,#d7ead5);box-shadow:0 22px 50px rgba(68,100,70,.2)}
.core{width:174px;height:174px;border:0;border-radius:0;background:transparent;color:#080b09;font-size:0;position:relative}
.core:before{content:"";position:absolute;inset:9px 27px 31px;background:#080b09;clip-path:polygon(50% 0,100% 100%,75% 100%,63% 73%,37% 73%,25% 100%,0 100%)}
.core:after{content:"";position:absolute;left:34px;right:34px;bottom:33px;height:74px;background:radial-gradient(ellipse at center,transparent 0 33%,#fff 34% 44%,transparent 45% 55%,#fff 56% 67%,transparent 68%),linear-gradient(45deg,transparent 44%,#080b09 45% 55%,transparent 56%);clip-path:polygon(0 0,100% 0,82% 100%,18% 100%);filter:drop-shadow(0 9px 11px rgba(0,0,0,.16))}
.ring{border-color:rgba(255,255,255,.75);box-shadow:0 0 25px rgba(255,255,255,.35)}
.tag{color:#3b4e42;background:rgba(255,255,255,.55);padding:8px 10px;border:1px solid rgba(255,255,255,.5);border-radius:999px}
.strip{background:#0b0e0c;color:#fff;border:0;border-radius:38px;width:min(1500px,calc(100% - 72px));margin:0 auto 90px;padding:25px 34px;box-shadow:0 24px 60px rgba(8,11,9,.18)}
.strip b{color:#7ee0ad}
.intro,.systems,.participate,.sub{padding-left:40px;padding-right:40px}
.number{color:#42624d}
.cards,.paths,.hostgrid,.docs,.proof-grid,.spec-table,.split,.map,.stack{border-color:rgba(7,9,8,.14)!important}
.cards article,.hostgrid article,.paths a,.proof-grid div,.panel,.login-card,.account-card,.feed article,.code,.info,.callout{background:rgba(255,255,255,.66)!important;color:#090c0a;border-color:rgba(7,9,8,.14)!important;box-shadow:0 22px 55px rgba(46,84,52,.09)}
.cards article,.hostgrid article,.paths a{backdrop-filter:blur(10px)}
.cards article:hover,.paths a:hover,.hostgrid article:hover{background:#fff!important;transform:translateY(-2px);transition:.25s ease}
.icon{color:#090c0a}
small,.toolbar,.filter,.ticker span,.panel-title span,.metric span,.stage-map span,.account-grid span{color:#536258!important}
.statement{background:#0b0e0c;color:#fff;border-radius:48px;width:min(1550px,calc(100% - 72px));margin:40px auto 120px;box-shadow:0 28px 80px rgba(7,10,8,.22)}
.statement h2,.statement p,.statement .number{color:#fff}
.statement h2 span{color:#b8d9c0}
.line{color:#fff}
.proof-band{border-color:rgba(7,9,8,.1)!important}
.final{background:radial-gradient(circle at 50% 0,#fff,rgba(255,255,255,.15) 45%,transparent 70%);border-top:1px solid rgba(7,9,8,.1)}
.final h2{color:#0b0e0c}
footer{border-top:1px solid rgba(7,9,8,.12);color:#0b0e0c}
footer p{color:#506256}
.sub h1{font-size:clamp(54px,5vw,90px)}
.row{border-color:rgba(7,9,8,.12)}
.row h3,.split h2,.api h3,.hostbox h2,.doc-grid h2,.doc-grid h3,.policy h2,.policy h3{color:#0b0e0c}
.split>div+div{border-color:rgba(7,9,8,.12)}
.split li{color:#506256;border-color:rgba(7,9,8,.1)}
.canvas{background:radial-gradient(circle at 52% 49%,#fff 0,#dceedd 36%,transparent 64%);border-radius:28px}
.canvas:before{background:repeating-linear-gradient(15deg,transparent 0 35px,rgba(42,95,58,.16) 36px),repeating-linear-gradient(90deg,transparent 0 57px,rgba(42,95,58,.1) 58px)}
.pin{background:#0b0e0c;color:#fff;border-color:#fff}
.p2{background:#fff;color:#0b0e0c}
.toolbar{background:rgba(255,255,255,.72);border-color:rgba(7,9,8,.12)}
.filter{background:#fff;border-color:rgba(7,9,8,.14);color:#0b0e0c}
.filter.active{background:#0b0e0c;color:#fff}
.hostbox{background:#0b0e0c;color:#fff;border-radius:40px}
.hostbox h2,.hostbox .number{color:#fff}
.hostbox p,.hostbox label,.hostbox small{color:#d4dfd5}
.hostbox input{color:#fff;border-color:rgba(255,255,255,.35)}
.code{box-shadow:18px 18px rgba(11,14,12,.13)}
.code pre,.code span,.code div{color:#101311}
.code em{color:#4c6a55}
.login-wrap,.arena,.console-shell{color:#0b0e0c}
.rail,.profile,.rewards{background:rgba(255,255,255,.52)!important;border-color:rgba(7,9,8,.12)!important}
.panel,.login-card{background:rgba(255,255,255,.72)!important}
.flow-form input,.flow-form select,.form-stack input,.form-stack select,.login-card input,.quest-table input{background:#fff!important;border-color:rgba(7,9,8,.16)!important;color:#0b0e0c!important}
.flow-form label,.form-stack label,.login-card label,.log,.leader-row small,.quest-table td p{color:#506256!important}
.flow-form button,.tool-button,button{border-radius:999px}
.log{background:rgba(255,255,255,.72)!important;border-color:rgba(7,9,8,.14)!important}
.quest-table th,.quest-table td,.leader-row,.panel-title,.panel-head,.metric,.stage-map div,.epoch-row{border-color:rgba(7,9,8,.12)!important}
@media(max-width:900px){.hero{padding-left:0;padding-right:0}.strip{width:calc(100% - 34px);border-radius:24px}.statement{width:calc(100% - 34px);border-radius:28px}.logo{letter-spacing:.18em}.logo i{letter-spacing:.22em}}

/* Logo-driven refinement pass: floating header, black/white dot field, supplied mark in hero. */
body{background:radial-gradient(circle at 28% 8%,#ffffff 0,#f2fbef 28%,#e2f1df 58%,#d5e5d3 100%);position:relative}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 2px,transparent 2.5px),radial-gradient(circle,rgba(0,0,0,.16) 0 1.4px,transparent 2px);background-position:0 0,22px 22px;background-size:44px 44px,44px 44px;mask-image:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.2) 48%,rgba(0,0,0,.72));opacity:.72}
.grid{background-image:linear-gradient(rgba(9,12,10,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(9,12,10,.06) 1px,transparent 1px),radial-gradient(circle,rgba(255,255,255,.9) 0 1.8px,transparent 2.3px),radial-gradient(circle,rgba(4,6,5,.18) 0 1.2px,transparent 1.8px);background-size:68px 68px,68px 68px,34px 34px,34px 34px;background-position:0 0,0 0,0 0,17px 17px;opacity:.95}
header{width:min(1510px,calc(100% - 64px));height:82px;margin-top:24px;padding:0 14px 0 26px;border:1px solid rgba(255,255,255,.56);border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(247,255,244,.5));box-shadow:0 26px 80px rgba(16,36,20,.16),inset 0 1px 0 rgba(255,255,255,.85)}
header nav{gap:8px;background:rgba(8,11,9,.88);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px;box-shadow:0 16px 42px rgba(4,7,5,.14)}
header nav a{color:rgba(255,255,255,.68);padding:11px 15px;border-radius:999px;font-size:13px}
header nav a:hover,header nav .selected{background:#fff;color:#090c0a}
.navbtn{background:#090c0a;color:#fff;border:0;box-shadow:0 16px 38px rgba(0,0,0,.18)}
.logo{letter-spacing:.42em}
.mark{width:42px;height:42px;border:1px solid rgba(9,12,10,.12);border-radius:14px;background:#090c0a;position:relative;box-shadow:0 13px 28px rgba(10,13,11,.18)}
.mark:before{content:"";position:absolute;inset:8px 10px 12px;background:linear-gradient(#e8f9e7,#fff);clip-path:polygon(50% 0,100% 100%,73% 100%,62% 70%,38% 70%,27% 100%,0 100%);opacity:.95}
.mark:after{content:"";position:absolute;left:9px;right:9px;bottom:9px;height:17px;background:radial-gradient(ellipse at center,transparent 0 35%,#fff 36% 48%,transparent 49% 59%,#fff 60% 72%,transparent 73%),linear-gradient(45deg,transparent 43%,#090c0a 44% 56%,transparent 57%);filter:drop-shadow(0 5px 8px rgba(255,255,255,.3))}
.hero{padding-top:100px}
.orb{background:#030403;border-radius:54px;box-shadow:0 38px 100px rgba(0,0,0,.23),inset 0 0 90px rgba(209,243,209,.06);isolation:isolate;overflow:hidden}
.orb:before{content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:url("assets/aura-logo-glow.png") center/cover no-repeat;mask-image:none;box-shadow:none;opacity:1}
.orb:after{content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:54px;background:radial-gradient(circle at 52% 55%,rgba(221,255,221,.14),transparent 26%),radial-gradient(circle at 50% 72%,rgba(255,255,255,.14),transparent 18%),linear-gradient(180deg,transparent,rgba(0,0,0,.24));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.orb .core{display:none}
.orb .ring{border-color:rgba(255,255,255,.18)}
.orb .tag{z-index:3;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#f1fff1;backdrop-filter:blur(12px)}
.t1{top:10%;right:8%}.t2{bottom:13%;left:8%}.t3{bottom:13%;right:8%}
.strip{margin-top:28px}
@media(max-width:900px){header{width:calc(100% - 28px);height:auto;border-radius:30px;flex-wrap:wrap;gap:12px;padding:14px}header nav{order:3;width:100%;justify-content:center;flex-wrap:wrap}.orb{border-radius:34px}.orb:after{border-radius:34px}}

/* Stronger network explorer surface. */
.network-radar{border:1px solid rgba(7,9,8,.12)!important;border-radius:38px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(247,255,244,.42));box-shadow:0 36px 120px rgba(28,69,36,.18),inset 0 1px 0 rgba(255,255,255,.9)}
.network-radar .toolbar{height:78px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px);padding:0 22px;border-color:rgba(7,9,8,.1);color:#263529!important}
.network-radar .toolbar span{letter-spacing:.08em;color:#273229;font-weight:800}
.network-radar .filter{padding:11px 18px;border-radius:999px;background:rgba(255,255,255,.74);box-shadow:inset 0 0 0 1px rgba(7,9,8,.08)}
.network-radar .filter.active{background:#050806;color:#fff;box-shadow:0 15px 34px rgba(0,0,0,.18)}
.network-radar .canvas{height:620px;border-radius:0;background:radial-gradient(circle at 56% 54%,rgba(255,255,255,.96) 0 3%,rgba(231,248,230,.68) 17%,transparent 37%),radial-gradient(circle at 70% 24%,rgba(143,204,159,.28),transparent 26%),radial-gradient(circle at 25% 65%,rgba(255,255,255,.55),transparent 25%),linear-gradient(145deg,rgba(243,255,240,.78),rgba(218,236,216,.68));overflow:hidden}
.network-radar .canvas:before{content:"";position:absolute;inset:-12%;background-image:linear-gradient(10deg,rgba(6,12,8,.1) 1px,transparent 1px),linear-gradient(82deg,rgba(6,12,8,.08) 1px,transparent 1px),radial-gradient(circle,rgba(255,255,255,.95) 0 2px,transparent 2.7px),radial-gradient(circle,rgba(0,0,0,.13) 0 1.2px,transparent 1.8px);background-size:92px 42px,122px 76px,32px 32px,32px 32px;background-position:0 0,0 0,0 0,16px 16px;transform:rotate(7deg) scale(1.1);opacity:.88}
.network-radar .canvas:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.48),transparent 22%,transparent 74%,rgba(255,255,255,.42)),linear-gradient(180deg,transparent,rgba(5,8,6,.06));pointer-events:none}
.radar-path{position:absolute;z-index:1;height:2px;background:linear-gradient(90deg,transparent,rgba(6,9,7,.24),rgba(255,255,255,.9),rgba(6,9,7,.2),transparent);transform-origin:left center;filter:drop-shadow(0 0 12px rgba(255,255,255,.8))}
.path-a{left:31%;top:63%;width:44%;transform:rotate(-20deg)}
.path-b{left:50%;top:38%;width:35%;transform:rotate(16deg)}
.path-c{left:33%;top:61%;width:26%;transform:rotate(19deg)}
.network-radar .pin{z-index:3;width:50px;height:50px;border:2px solid #fff;background:#020403;color:#fff;font:800 13px 'DM Mono';box-shadow:0 18px 34px rgba(0,0,0,.24),0 0 0 10px rgba(255,255,255,.36),0 0 0 22px rgba(255,255,255,.12);transition:.25s ease}
.network-radar .pin:hover{transform:scale(1.08);box-shadow:0 22px 42px rgba(0,0,0,.28),0 0 0 14px rgba(255,255,255,.42),0 0 0 28px rgba(126,201,166,.2)}
.network-radar .p1{left:31%;top:57%}
.network-radar .p2{left:51%;top:35%;background:#fff;color:#070908}
.network-radar .p3{right:25%;top:55%;background:rgba(6,9,7,.34);backdrop-filter:blur(8px)}
.network-radar .p4{right:17%;top:22%}
.network-radar .info{z-index:4;left:58%;top:45%;width:310px;padding:24px;background:rgba(255,255,255,.68)!important;backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.8)!important;box-shadow:0 34px 90px rgba(29,61,35,.2)}
.network-radar .info:before{content:"";position:absolute;left:-72px;top:44%;width:72px;height:1px;background:linear-gradient(90deg,transparent,rgba(5,8,6,.34))}
.network-radar .info small{font-size:11px;color:#3c5143!important}
.network-radar .info h3{font-size:26px;letter-spacing:-.04em;margin:17px 0 8px;color:#070908}
.network-radar .info p{color:#607166}
.network-radar .info div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid rgba(7,9,8,.12)}
.network-radar .info span{font-size:9px;color:#64746a!important}
.network-radar .info b{color:#071008}
.network-dock{position:absolute;z-index:4;left:28px;right:28px;bottom:24px;min-height:78px;background:#050806;color:#fff;border-radius:28px;display:flex;align-items:center;gap:24px;padding:18px 24px;box-shadow:0 28px 60px rgba(0,0,0,.24)}
.network-dock span{font:11px 'DM Mono';letter-spacing:.14em;color:#9ee1b8}
.network-dock b{font-size:18px;white-space:nowrap}
.network-dock i{font-style:normal;color:rgba(255,255,255,.62);font-size:13px;margin-left:auto}
@media(max-width:720px){.network-radar .canvas{height:560px}.network-radar .info{left:18px;right:18px;top:auto;bottom:118px;width:auto}.network-dock{display:block}.network-dock b,.network-dock i{display:block;margin-top:6px}.radar-path{display:none}}

/* Production mobile polish: every public page, console, and quest arena should feel intentional on phones. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
.panel,.code,.map,.network-radar,.hostbox,.split,.statement,.strip{max-width:100%}

@media(max-width:1180px){
  .page,header{width:calc(100% - 40px)}
  .hero{grid-template-columns:1fr;gap:34px;min-height:auto;padding:84px 28px 64px}
  .hero h1{font-size:clamp(42px,10vw,76px);letter-spacing:.08em}
  .orb{height:min(62vw,520px);min-height:360px}
  .cards,.cards.five,.hostgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-grid,.product-footer,.intro,.statement,.hostbox,.devgrid,.split{grid-template-columns:1fr}
  .docs{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:860px){
  header{position:relative;width:calc(100% - 24px);margin-top:12px;border-radius:26px;padding:14px;gap:10px}
  .logo{font-size:13px;letter-spacing:.2em;gap:10px;min-width:0}
  .logo i{letter-spacing:.2em}
  .mark{width:36px;height:36px;border-radius:12px;flex:0 0 auto}
  header nav{order:3;width:100%;overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;scrollbar-width:none}
  header nav::-webkit-scrollbar{display:none}
  header nav a{white-space:nowrap;padding:10px 13px;font-size:12px}
  .navbtn{padding:12px 14px;font-size:12px;white-space:nowrap}
  .actions{flex-wrap:wrap}
  .actions .button{width:100%;text-align:center}
  .strip{width:calc(100% - 24px);display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;border-radius:22px;white-space:normal}
  .intro,.systems,.participate,.sub{padding-left:20px;padding-right:20px}
  .head,.quality{display:block;margin-bottom:30px}
  .head p,.quality p{margin-top:18px}
  .row{grid-template-columns:54px 1fr;gap:14px}
  .row>span:last-child{display:none}
  .code{box-shadow:8px 8px rgba(11,14,12,.13);overflow:hidden}
  .code pre{overflow-x:auto;white-space:pre;max-width:100%;font-size:12px}
  .doc{padding:58px 20px 90px}
  .doc h1,.sub h1{font-size:clamp(38px,11vw,62px)}
  .doc-grid{gap:28px;margin-top:36px}
}

@media(max-width:640px){
  .page,header{width:calc(100% - 20px)}
  header nav{display:flex}
  body:before{background-size:34px 34px,34px 34px;background-position:0 0,17px 17px;opacity:.55}
  .grid{background-size:42px 42px,42px 42px,24px 24px,24px 24px}
  .hero{padding:48px 4px 46px}
  .hero h1{font-size:42px;line-height:1.08;letter-spacing:.06em;margin:24px 0 18px}
  .hero p,.lede,.intro p,.head p{font-size:15px;line-height:1.65}
  .pill{font-size:10px;max-width:100%;white-space:normal}
  .orb{height:330px;min-height:330px;border-radius:28px}
  .orb:after{border-radius:28px}
  .orb .ring,.orb .tag{display:none}
  .strip{grid-template-columns:1fr;margin-bottom:54px}
  .cards,.cards.five,.paths,.hostgrid,.docs,.proof-grid,.product-footer{grid-template-columns:1fr}
  .cards article,.hostgrid article,.paths a{min-height:auto;padding:22px}
  .icon{margin:20px 0}
  .statement{width:calc(100% - 20px);margin:22px auto 70px;padding:44px 22px;border-radius:26px}
  .statement h2,.intro h2,.head h2,.hostbox h2{font-size:36px}
  .paths h3{margin-top:34px}
  .final{padding:70px 14px}
  .final h2{font-size:42px}
  footer{width:calc(100% - 32px);gap:16px}
  footer div{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}
  .sub{padding-top:48px}
  .split,.map,.hostbox{margin:54px 0}
  .hostbox{padding:28px 18px;border-radius:24px}
  .network-radar{border-radius:24px}
  .network-radar .toolbar{height:auto;min-height:72px;flex-wrap:wrap;align-content:center;padding:14px}
  .network-radar .toolbar span{width:100%;margin:0 0 8px}
  .network-radar .canvas{height:520px}
  .network-radar .pin{width:42px;height:42px}
  .network-radar .info{bottom:110px;padding:18px}
  .network-dock{left:14px;right:14px;bottom:14px;border-radius:20px;padding:16px}
}

@media(max-width:760px){
  .console-shell,.arena{width:calc(100% - 20px)!important;border-left:0!important;border-right:0!important}
  .rail,.profile,.rewards,.quest-main,.workbench{padding:16px!important}
  .rail{position:relative!important;top:auto!important;height:auto!important;border-right:0!important;border-bottom:1px solid rgba(7,9,8,.12)!important}
  .rail nav{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .rail nav a{padding:12px!important;font-size:12px!important}
  .topline,.ticker,.stage-map,.account-grid{grid-template-columns:1fr!important}
  .metric,.ticker div,.stage-map div{border-right:0!important;border-bottom:1px solid rgba(7,9,8,.12)!important}
  .metric:last-child,.ticker div:last-child,.stage-map div:last-child{border-bottom:0!important}
  .ops-grid{grid-template-columns:1fr!important;gap:18px!important}
  .panel-head,.panel-title{height:auto!important;min-height:56px;gap:8px;align-items:flex-start!important;flex-direction:column;padding:14px 16px!important}
  .panel-body,.flow-form,.form-stack{padding:16px!important}
  .flow-form{grid-template-columns:1fr!important}
  .flow-form button,.form-stack button,.tool-button,.quest-table button{width:100%}
  .log{max-height:260px;overflow:auto;word-break:break-word}
  .epoch-row,.leader-row,.proof-row{grid-template-columns:1fr!important;gap:8px!important}
  .quest-table,.quest-table thead,.quest-table tbody,.quest-table tr,.quest-table th,.quest-table td{display:block!important;width:100%!important}
  .quest-table thead{display:none!important}
  .quest-table tr{padding:14px 0;border-bottom:1px solid rgba(7,9,8,.12)!important}
  .quest-table td{border-bottom:0!important;padding:8px 0!important}
  .quest-table input{width:100%}
}

@media(max-width:420px){
  .logo{font-size:11px;letter-spacing:.12em}
  .logo i{letter-spacing:.12em}
  .navbtn b{display:none}
  header nav a{font-size:11px;padding:9px 11px}
  .hero h1{font-size:36px}
  .orb{height:285px;min-height:285px}
  .statement h2,.intro h2,.head h2,.hostbox h2{font-size:32px}
  .rail nav{grid-template-columns:1fr!important}
}