/* ABT01.com v1 shared shell (header, footer, static pages). One theme system: html[data-theme] + html[data-palette] (keys abt01-theme, abt01-palette) */
:root{--acc:#f06a2a;--acc2:#ff6f7d}
html[data-palette=aurora]{--acc:#6d5dfc;--acc2:#3ba4ff}
html[data-palette=sage]{--acc:#5e8059;--acc2:#c9824a}
html[data-palette=classic]{--acc:#e56b1f;--acc2:#2b2018}
html[data-palette=chocolate]{--acc:#e75610;--acc2:#5c3318}
.hdr{position:sticky;top:0;z-index:40;background:linear-gradient(100deg,#001e4a,#08182c 46%,#12325a);border-bottom:1px solid rgba(255,255,255,.08);font-family:Inter,system-ui,sans-serif}
.hdr .container{max-width:1240px;margin:0 auto;padding:10px 20px;min-height:68px;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;box-sizing:border-box}
.hdr .logo{display:flex;align-items:center;flex:none;width:auto}.hdr .logo img{height:48px;width:auto;display:block}
.hdr .nav{display:flex;gap:2px;flex-wrap:wrap;width:auto;flex:0 1 auto;margin:0;padding:0;background:none;position:static}
.hdr .nav a{font-size:13px;font-weight:600;color:#ffffffe6;padding:8px 12px;border-radius:999px;text-decoration:none}
.hdr .nav a:hover{background:#ffffff1f;color:#fff}.hdr .nav a.on{color:#fff;background:#e756108c}
.hdr .sp{flex:1}
.hdr .pal{display:flex;gap:4px;padding:4px;border-radius:999px;background:#ffffff1f;border:1px solid #ffffff38}
.hdr .pdot{position:relative;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer}
.hdr .pdot i{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--c1) 0 50%,var(--c2) 50% 100%)}
.hdr .pdot.on{box-shadow:0 0 0 2px var(--c1)}
.hdr .icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:1px solid #ffffff38;background:#ffffff1f;color:#fff;cursor:pointer;font-size:16px}
.hdr .btn-q{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:12px;font-weight:600;font-size:14px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--acc),var(--acc2))}
@media(max-width:900px){.hdr .logo img{height:40px}.hdr .btn-q{display:none}}
/* hub */
.hub{max-width:1240px;margin:0 auto;padding:28px 20px 60px;font-family:Inter,system-ui,sans-serif}
html[data-theme=dark] .hdr{background:linear-gradient(100deg,#0b0a09,#191613 50%,#231d18)}
.hdr .btn-q{border:0}
.hdr .icon-btn .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:700px){.hdr .nav{order:9;width:100%;overflow-x:auto;flex-wrap:nowrap}.hdr .nav a{white-space:nowrap}}
/* footer: full-width navy panel, same navy as the top bar */
.sft{margin-top:48px;background:linear-gradient(100deg,#001e4a 0%,#08182c 46%,#12325a 100%);border-top:3px solid #e56b1f;padding:42px 0 18px;font-size:14px;color:#ffffffd0;position:relative;z-index:2}
.sft .container{max-width:1240px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px 32px}
.sft .fcol{display:flex;flex-direction:column;gap:8px}.sft .fcol b{color:#fff;margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sft .fcol p{margin:8px 0 0;max-width:34ch;line-height:1.45;color:#ffffffc4}
.sft a{color:#ffffffd6;text-decoration:none}.sft a:hover{color:#fff}
.sft .logo img{height:44px}.sft .fbot{grid-template-columns:1fr auto;margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;color:#ffffffb0}
@media(max-width:700px){.sft .container{grid-template-columns:1fr 1fr;gap:22px 16px}.sft .fcol:first-child{grid-column:1/-1}}
/* static pages (same tokens/components as home) */
.pg{max-width:1240px;margin:0 auto;padding:28px 20px 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl,22px);box-shadow:var(--sh-1);backdrop-filter:blur(14px)}
.static .hero-side{padding:30px}
.steps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:18px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:2px 12px}
.steps li::before{content:counter(s);grid-row:span 2;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.steps b{font-size:14.5px}.steps span{font-size:13px;color:var(--text-2)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 10px}.toolbar .chips{display:flex;gap:6px;flex-wrap:wrap}.toolbar .sp{flex:1}
.toolbar .search,.toolbar select,.cform input,.cform select,.cform textarea{height:40px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-solid,var(--bg));color:var(--text);padding:0 12px;font:inherit;font-size:14px}
.cform textarea{height:auto;padding:10px 12px;width:100%;box-sizing:border-box;resize:vertical}.cform input,.cform select{width:100%;box-sizing:border-box}
.cform{margin-top:18px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cform .cta{flex-wrap:wrap}
.inp.bad input,.inp.bad textarea{border-color:var(--danger,#d33)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.gcard{display:flex;flex-direction:column;gap:6px;padding:20px;color:var(--text);text-decoration:none;transition:transform .2s}
.gcard:hover{transform:translateY(-3px)}.gcard h3{font-size:18px;margin:2px 0 0}.gcard p{font-size:13.5px;color:var(--text-2);margin:0;flex:1}
.gcard .badge{align-self:flex-start}.gcard .go{color:var(--accent);font-weight:700;font-size:13px}.gcard.soon{opacity:.7}.gcard.soon:target{opacity:1;outline:2px solid var(--accent)}
.gcard[hidden]{display:none}
h2.sec{font-size:22px;margin:32px 0 14px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:20px}.cgrid .c{padding:24px}.cgrid h3{margin:6px 0}.cgrid p{color:var(--text-2);font-size:14px}
.cgrid a,.prose a{color:var(--accent)}
.prose{max-width:900px;margin:0 auto;padding:36px}.prose h1{font-size:40px;margin-bottom:14px}.prose p{margin:0 0 12px;color:var(--text-2)}
@media(max-width:900px){.static .hero{grid-template-columns:1fr}.static .hero-main{padding:28px}.static .hero-main h1{font-size:40px}.row2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:10px 14px;border-radius:12px;margin:12px 0 0;font-weight:600}.notice.ok{background:var(--ok-soft);color:var(--ok)}.notice.err{background:var(--danger-soft);color:var(--danger)}
/* hosted 3D tools */
.crumb{font-size:13px;color:var(--text-2);margin:0 0 8px}.crumb a{color:var(--accent);text-decoration:none}
.toolhead h1{font-size:clamp(28px,4vw,40px);margin:0}.toolhead p{margin:4px 0 16px}
.toolframe{padding:0;overflow:hidden}.toolframe iframe{display:block;width:100%;height:max(780px,calc(100vh - 150px));border:0;background:transparent}
@media(max-width:700px){.toolframe iframe{height:1500px}}

/* ===== v1 polish (2026-10-15): phones, tablets, touch ===== */
.hdr .container{height:auto}
html,body{overflow-x:clip}
img,svg,canvas,video{max-width:100%}
.hdr .nav{scrollbar-width:none}.hdr .nav::-webkit-scrollbar{display:none}
/* home app: tablets */
@media(max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-export,.gcard.feature,.gcard.wide{grid-column:1/-1}
  .gen-grid{grid-template-columns:minmax(0,1fr)}
  .controls{position:static}
  .exp-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-main{padding:30px 26px 28px}.hero-main h1{font-size:46px}
  .hero-main .deco{width:200px;opacity:.5}
  .page-head{flex-direction:column;align-items:flex-start;gap:14px}
  .page-head h1{font-size:34px}
  .stepper{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .exp-body{grid-template-columns:minmax(0,1fr)}
  .exp-left{border-right:0;border-bottom:1px solid var(--line)}
  .modal-body{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats div:nth-child(3n+1){border-left:0}.stats div:nth-child(n+4){border-top:1px solid var(--line)}
  .toolbar{flex-wrap:wrap}
}
/* home app: phones */
@media(max-width:640px){
  .view{padding:20px 0 48px}
  .container{padding-left:16px;padding-right:16px}
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:14px}
  .gcard.feature{grid-row:auto}.gcard.feature .art{min-height:200px}.gcard.feature .art svg{width:100%;height:200px}.gcard.feature h3{font-size:22px}
  .gcard.wide{flex-direction:column}.gcard.wide .art{width:auto;height:150px;border-right:0;border-bottom:1px solid var(--line)}
  .tile-export .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-main{padding:24px 20px}.hero-main h1{font-size:38px;line-height:1.02}.hero-main p{font-size:15.5px}
  .hero-main .cta{flex-wrap:wrap}.hero-main .deco{display:none}
  .how{padding:18px}
  .toolbar{margin:24px 0 14px}.search{width:100%;flex:1 1 100%}
  .page-head h1{font-size:30px}
  .stage-top{flex-wrap:wrap;gap:8px}.stage-top .seg{width:100%}
  .stage-body{min-height:340px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div{border-left:0!important;border-top:1px solid var(--line)}.stats div:nth-child(2n){border-left:1px solid var(--line)!important}
  .mtabs{grid-template-columns:repeat(2,minmax(0,1fr))}.mtabs .ind{display:none}.mtab{padding:12px 14px;border-radius:12px}.mtab.on{box-shadow:inset 0 -3px 0 var(--accent)}
  .mtab .t{font-size:14px}.mtab .fs{flex-wrap:wrap}
  .exp-left,.exp-right{padding:18px 16px}
  .fmts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kv,.checks,.warn .acts,.setgrid{grid-template-columns:minmax(0,1fr)}
  .exp-foot{flex-wrap:wrap;padding:14px 16px}.exp-foot>*{flex:1 1 100%}
  .exp-foot .btn,.ctl-foot .btn{flex:1}
  .legend{flex-wrap:wrap;gap:8px}.flat-head{flex-wrap:wrap;gap:6px}
  #view-split .pr{grid-template-columns:18px minmax(0,1fr) minmax(0,1fr) auto;font-size:12.5px}#view-split .pr>:nth-child(4){display:none}
  #view-split .keys{display:none}#view-split .pane-3d{min-height:340px}
  .crumbs{flex-wrap:wrap}
}
/* header + footer on phones */
@media(max-width:700px){
  .hdr{position:relative}
  .hdr .container{padding:8px 14px;gap:6px 8px;min-height:0}
  .hdr .logo img{height:34px}
  .sft .container{padding:0 16px}
}
/* touch: every control at least 44px */
@media(pointer:coarse){
  .btn,.btn-sm,.chip,.hdr .icon-btn,.icon-btn,.hdr .btn-q{min-height:44px;min-width:44px}
  .btn-sm{padding:0 14px}
  .hdr .nav a{min-height:44px;display:inline-flex;align-items:center}
  .hdr .logo{min-height:44px}
  .hdr .pal{gap:0;padding:0 2px}.hdr .pdot{width:44px;height:44px}
  .sft .fcol{gap:0}.sft .fcol a{min-height:44px;display:flex;align-items:center}
  .sft .fcol a.logo{min-height:44px}
  .stepper a{min-height:44px}
  .seg button{min-height:44px;min-width:44px}
  .search{height:44px}.search input,.toolbar .search,.toolbar select{height:44px;min-height:44px}
  .num{height:44px}.num input{height:100%;min-height:44px;width:68px}.kvi .num{height:44px}
  .select select,select,.inp input,.field.inp input{min-height:44px}
  input[type=range]{height:44px}
  .qty button{width:44px;height:44px}
  .dd-btn,.dd-opt,.fmtc,.mtab{min-height:44px}
  .gcard .go{width:44px;height:44px}
  #view-split .srow,#view-split .axisrow .btn,#view-split .ptnudge .btn{min-height:44px}
  #view-split .ptrow input,#view-split .ptadd input,#view-split .ptrow .pi{min-height:44px}
  #view-split .pacts button{width:44px;height:44px}
  .crumb a,.crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .cgrid a.btn,.prose a.btn{min-height:44px}
  .static .toolbar .chip{min-height:44px}
}
@media(pointer:coarse){#view-split .ptnudge .btn,#view-split .axisrow .btn{min-width:44px}#view-split .ptnudge input{min-height:44px;width:60px}}
@media(max-width:380px){.hdr .container{padding:6px 12px;gap:6px 4px}.hdr .logo img{height:30px}.hdr .pal{padding:0;border:0}}
/* contact form + software cards (v1-20261015q) */
.cform label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13.5px;margin:0 0 12px;color:var(--text)}
.cform label[hidden]{display:none}
.cform label.hp{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cform .row2{margin-bottom:12px}.cform .row2 label{margin-bottom:0}
.cform input[type=file]{height:auto;padding:8px 0;border:0;background:transparent}
.cform button.btn{align-self:flex-start;margin-top:4px}
.mould-note{font-size:13.5px;color:var(--text-2);margin:0 0 12px}
a.card.c{display:block;color:var(--text);text-decoration:none}
a.card.c h3{color:var(--text)}
a.card.c p{color:var(--text-2)}
a.card.c:hover{transform:translateY(-3px)}
.cgrid a.card .go{color:var(--accent);font-weight:700;font-size:13.5px}
.soft-head h1{font-size:clamp(32px,4vw,44px);margin:0 0 6px}
.soft-head p{margin:0 0 8px;color:var(--text-2)}
/* column sits 20% in from each screen edge and follows the window */
.hdr > .container,
.sft > .container,
main.pg,
main.container,
#app .container,
.hub{
  max-width:none;
  width:auto;
  margin-left:20%;
  margin-right:20%;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
}
.hdr .nav a.login-btn{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.hdr .nav a.login-btn.on{box-shadow:inset 0 0 0 2px #fff}
.acct-nav{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.acct-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--text);border:1px solid var(--line);background:var(--surface)}
.acct-nav a.on{background:var(--accent);color:#fff;border-color:transparent}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 18px}
.acct-grid .card{padding:18px}
.acct-grid b{display:block;font-size:28px;margin-top:4px}
.acct-list{display:grid;gap:10px}
.acct-list a.card{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;text-decoration:none;color:var(--text)}
.acct-list .tag{font-size:12px;font-weight:700;color:var(--accent)}
.acct-scroll{overflow-x:auto}
.acct-scroll table{width:100%;border-collapse:collapse;font-size:14px}
.acct-scroll th,.acct-scroll td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.acct-frame{display:block;width:100%;height:2400px;border:0;background:transparent;border-radius:22px}
.acct-note{color:var(--text-2);font-size:14px}
.acct-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.acct-form{display:grid;gap:10px}
.acct-form input,.acct-form select,.acct-form textarea{width:100%;max-width:100%;box-sizing:border-box;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 12px;font:inherit;font-size:15px}
.acct-form textarea{height:auto;min-height:88px;padding:10px 12px}
.acct-form label.hp{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.acct-msg{padding:10px 12px;border-radius:12px;margin:0 0 14px}
.acct-msg.bad{background:#fde8e6;color:#8a1c12}
.acct-msg.ok{background:#e7f6ec;color:#0d6b32}
html[data-theme=dark] .acct-msg.bad{background:#3a1816;color:#ffb4aa}
html[data-theme=dark] .acct-msg.ok{background:#143024;color:#b6ebc8}
.acct-scroll{max-width:100%}
.hdr > .container,.sft > .container,main.pg,main.container,#app .container,.hub{min-width:0}
@media(max-width:700px){.hdr .nav{flex-wrap:wrap;overflow-x:visible}}
.acct-block{padding:18px;margin:0 0 16px}
main.pg .acct-block h2,main.pg h2{font-size:22px;margin:18px 0 8px}
main.pg h1{margin-top:0}

/* phone app bar: full-width column and bottom tabs under 980px */
@media (max-width:980px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .hdr{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
  .hdr > .container,
  .hdr .container{
    margin-left:0;margin-right:0;width:100%;max-width:none;
    padding:8px 12px;min-height:52px;gap:6px 8px;flex-wrap:nowrap;box-sizing:border-box
  }
  .hdr .logo img{height:32px}
  .hdr .btn-q{display:none}
  .hdr .pal{gap:0;padding:2px;flex:none}
  .hdr .pdot{width:34px;height:34px;min-width:34px;min-height:34px}
  .hdr .pdot i{width:16px;height:16px}
  .hdr .icon-btn{width:40px;height:40px;min-width:40px;min-height:40px;flex:none}
  .sft > .container,
  .sft .container,
  main.pg,
  main.container,
  #app .container,
  .hub{
    margin-left:16px;margin-right:16px;width:auto;max-width:none;
    padding-left:0;padding-right:0;box-sizing:border-box
  }
  .hdr .nav{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    width:100%;max-width:100%;margin:0;order:0;flex:none;gap:0;
    padding:2px 2px calc(4px + env(safe-area-inset-bottom,0px));
    box-sizing:border-box;overflow:visible;flex-wrap:nowrap;
    background:rgba(255,247,241,.96);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    backdrop-filter:blur(18px) saturate(1.4);
    border-top:1px solid rgba(28,21,16,.1);
    box-shadow:0 -10px 28px rgba(28,21,16,.08)
  }
  html[data-theme=dark] .hdr .nav{
    background:rgba(19,17,15,.96);
    border-top-color:rgba(255,255,255,.12);
    box-shadow:0 -10px 28px rgba(0,0,0,.35)
  }
  .hdr .nav a,
  .hdr .nav a.login-btn,
  .hdr .nav a.login-btn.on{
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;min-width:0;min-height:52px;height:auto;
    margin:0;padding:6px 1px 5px;border-radius:12px;
    background:none;box-shadow:none;color:#8a8178;
    font-size:10px;font-weight:650;line-height:1.1;letter-spacing:-.02em;
    text-align:center;white-space:normal;text-decoration:none;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation
  }
  .hdr .nav a::before{
    content:"";width:22px;height:22px;flex:none;align-self:center;
    background:currentColor;
    -webkit-mask:var(--tab-ico) center / contain no-repeat;
    mask:var(--tab-ico) center / contain no-repeat
  }
  .hdr .nav a[href="/"]{--tab-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4%2010.2%2012%203.6l8%206.6V20a1%201%200%200%201-1%201h-5.1v-6.2h-3.8V21H5a1%201%200%200%201-1-1z%27%2F%3E%3C%2Fsvg%3E")}
  .hdr .nav a[href="/generators/"]{--tab-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4%204h6.2v6.2H4zm9.8%200H20v6.2h-6.2zM4%2013.8h6.2V20H4zm9.8%200H20V20h-6.2z%27%2F%3E%3C%2Fsvg%3E")}
  .hdr .nav a[href="/softwares/"]{--tab-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20fill-rule%3D%27evenodd%27%20d%3D%27M5%204h14a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2zm1.4%203.4h11.2V18H6.4z%27%2F%3E%3C%2Fsvg%3E")}
  .hdr .nav a[href="/how-it-works/"]{--tab-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4%205.5h2.2V7.7H4zm4%200H20V7.7H8zM4%2011h2.2v2.2H4zm4%200H20v2.2H8zM4%2016.3h2.2V18.5H4zm4%200h8.5v2.2H8z%27%2F%3E%3C%2Fsvg%3E")}
  .hdr .nav a[href="/contact.html"]{--tab-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M3%206.4%2012%2013l9-6.6V18a1.6%201.6%200%200%201-1.6%201.6H4.6A1.6%201.6%200%200%201%203%2018z%27%2F%3E%3C%2Fsvg%3E")}
  .hdr .nav a.login-btn{--tab-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%2012.2a3.7%203.7%200%201%200-3.7-3.7%203.7%203.7%200%200%200%203.7%203.7zm-6.6%207.4c.5-3.1%203.1-5%206.6-5s6.1%201.9%206.6%205z%27%2F%3E%3C%2Fsvg%3E")}
  .hdr .nav a.on,
  .hdr .nav a[aria-current="page"],
  .hdr .nav a.login-btn.on{
    color:var(--acc);background:none;box-shadow:inset 0 2px 0 var(--acc)
  }
  html[data-theme=dark] .hdr .nav a,
  html[data-theme=dark] .hdr .nav a.login-btn{color:#c4bbb4}
  html[data-theme=dark] .hdr .nav a.on,
  html[data-theme=dark] .hdr .nav a[aria-current="page"],
  html[data-theme=dark] .hdr .nav a.login-btn.on{color:var(--acc)}
  .hdr .nav a:active{background:color-mix(in srgb,var(--acc) 14%,transparent)}
}
@media (max-width:980px) and (max-width:360px){
  .hdr .logo img{height:28px}
  .hdr .pdot{width:30px;height:30px;min-width:30px;min-height:30px}
  .hdr .icon-btn{width:36px;height:36px;min-width:36px;min-height:36px}
  .hdr > .container,.hdr .container{padding:6px 10px}
}