html.js #root > main:first-child{opacity:0;visibility:hidden}
html,body{width:100%;min-height:100%;margin:0!important;background:#f3eadf!important}
html.js{--app-bg:#f3eadf;--app-glow:radial-gradient(900px 460px at 82% -10%,rgba(232,133,59,.24),transparent 62%),radial-gradient(700px 380px at 12% 10%,rgba(119,142,96,.16),transparent 62%),linear-gradient(180deg,#f8f2e9,#eee3d5)}
html.js[data-theme="dark"]{--app-bg:#111216;--app-glow:radial-gradient(900px 520px at 85% -8%,rgba(232,133,59,.16),transparent 60%),radial-gradient(760px 420px at 8% 10%,rgba(242,192,99,.08),transparent 62%),#111216}
html.js body{height:100dvh!important;overflow:hidden!important;background-color:var(--app-bg)!important;background-image:var(--app-glow)!important}
html.js #root{width:100%;height:100%}
html.js #root>div{
  --solar-width:clamp(168px,18vw,286px);
  --control-rail-width:clamp(78px,7vw,94px);
  --control-height:clamp(36px,4vw,46px);
  --ink:#241f19;--ink-soft:rgba(36,31,25,.7);--line:rgba(78,58,32,.16);
  --panel-bg:linear-gradient(180deg,rgba(255,253,248,.94),rgba(241,230,215,.92));
  --device-shell:linear-gradient(180deg,#f7f1e7,#ded3c2);
  --device-line:rgba(93,72,44,.2);
  --device-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -18px 34px rgba(97,73,42,.12),0 32px 74px -48px rgba(91,66,35,.52);
  --bezel-bg:#2a2c31;--button-ink:#f7f3ea;--button-edge:#111318;--button-line:rgba(255,255,255,.12);
  --button-bg:radial-gradient(120px 80px at 28% 12%,rgba(255,255,255,.16),transparent 62%),linear-gradient(180deg,#3b3e45 0%,#282b30 50%,#1d1f23 100%);
  --control-rail-bg:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.1)),linear-gradient(180deg,#3b3e45,#22252a);
  --control-key-bg:linear-gradient(180deg,#4a4e57,#2d3036);--control-key-ink:#fff6e8;--control-line:rgba(255,255,255,.18);
  --solar-shell:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.18)),linear-gradient(180deg,#3b2c12,#1d2111);
  --solar-cell:linear-gradient(180deg,rgba(246,201,107,.2),rgba(255,255,255,.02)),linear-gradient(135deg,#213418,#42551e);
  --solar-line:rgba(255,236,176,.18);
  position:relative!important;width:100%!important;max-width:100vw!important;height:100dvh!important;min-height:0!important;margin:0 auto!important;overflow-y:auto!important;overflow-x:hidden!important;border:0!important;border-radius:0!important;background:#f6efe5!important;background-image:radial-gradient(1000px 500px at 74% 0%,rgba(232,133,59,.18),transparent 62%),radial-gradient(820px 460px at 5% 24%,rgba(126,150,102,.14),transparent 66%)!important;color:var(--ink)!important;isolation:isolate;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(78,58,32,.28) transparent
}
html.js[data-theme="dark"] #root>div{
  --ink:#f7f3ea;--ink-soft:rgba(247,243,234,.72);--line:rgba(255,255,255,.13);
  --panel-bg:linear-gradient(180deg,rgba(10,11,13,.36),rgba(255,255,255,.035));
  --device-shell:linear-gradient(180deg,#30333a,#1f2228);--device-line:#101115;
  --device-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -18px 32px rgba(0,0,0,.24),0 42px 90px -48px rgba(0,0,0,.95);
  --control-rail-bg:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12)),linear-gradient(180deg,#252830,#15171c);
  --control-key-bg:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));--control-key-ink:#f7f3ea;
  --solar-shell:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.24)),linear-gradient(180deg,#2a2010,#463316);
  --solar-cell:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0)),linear-gradient(135deg,#1e2e16,#3b4a20);
  background:#15171b!important;background-image:radial-gradient(1000px 500px at 75% 0%,rgba(232,133,59,.16),transparent 62%),radial-gradient(780px 430px at 4% 22%,rgba(242,192,99,.07),transparent 64%)!important
}
html.js #root>div::after{content:"7ASIBA.COM";position:sticky;display:block;bottom:7px;width:max-content;margin:20px auto -12px;color:var(--ink-soft);font-family:var(--mono);font-size:clamp(9px,1vw,12px);letter-spacing:.18em;direction:ltr;pointer-events:none}
html.js #root>div>header{position:absolute!important;top:clamp(50px,5.8vw,84px)!important;inset-inline:0!important;z-index:90!important;height:0!important;overflow:visible!important;pointer-events:none!important;background:transparent!important;border:0!important;box-shadow:none!important}
html.js #root>div>header nav{position:relative!important;display:block!important;width:100%!important;max-width:min(1360px,calc(100% - clamp(18px,4vw,56px)))!important;height:0!important;margin:0 auto!important;padding:0 clamp(22px,4vw,48px)!important;pointer-events:none!important}
html.js #root>div>header nav>:first-child,html.js #root>div>header nav>div[aria-label]{display:none!important}
html.js #root>div>header nav>div:last-child{position:absolute!important;top:0!important;left:calc(var(--solar-width) + clamp(34px,3vw,46px))!important;right:auto!important;display:flex!important;align-items:center!important;gap:6px!important;min-width:var(--control-rail-width)!important;height:var(--control-height)!important;padding:5px!important;border:1px solid var(--control-line)!important;border-radius:14px!important;background:var(--control-rail-bg)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.48),0 2px 0 rgba(0,0,0,.34),0 12px 24px -20px rgba(0,0,0,.85)!important;pointer-events:auto!important}
html.js #root>div>header nav>div:last-child>button{display:grid!important;place-items:center!important;width:clamp(32px,3.2vw,38px)!important;min-width:clamp(32px,3.2vw,38px)!important;height:calc(var(--control-height) - 10px)!important;padding:0!important;border-radius:10px!important;border:1px solid var(--control-line)!important;background:var(--control-key-bg)!important;color:var(--control-key-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 0 rgba(0,0,0,.38),0 8px 16px -14px rgba(0,0,0,.75)!important;transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease!important}
html.js #root>div>header nav>div:last-child>button:hover{transform:translateY(1px)!important;border-color:rgba(244,190,95,.38)!important}
html.js #root>div>header nav>div:last-child>button:active{transform:translateY(3px)!important}
html.js #root>div>header nav>div:last-child>button.hidden,html.js #root>div>header nav>div:last-child>button.sm\:inline-flex{display:none!important}
html.js #root>div>header nav>div:last-child>button.lg\:hidden{display:grid!important}
html.js #root>div>header nav>div:last-child>button:first-child{font-size:0!important}
html.js #root>div>header nav>div:last-child>button:first-child::before{content:"☾";font-size:16px;line-height:1}
html.js[data-theme="dark"] #root>div>header nav>div:last-child>button:first-child::before{content:"☀"}
html.js #root>div>header>.lg\:hidden{position:absolute!important;top:calc(var(--control-height) + 10px)!important;left:clamp(18px,4vw,54px)!important;right:auto!important;width:min(320px,calc(100vw - 22px))!important;max-width:min(320px,calc(100vw - 22px))!important;margin:0!important;padding:0!important;pointer-events:auto!important}
html.js #root>div>header .lg\:hidden>div{background:var(--panel-bg)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:0 18px 40px -24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25)!important}
html.js #root>div>header .lg\:hidden a,html.js #root>div>header .lg\:hidden button{color:var(--ink)!important;background:rgba(255,255,255,.42)!important;border:1px solid var(--line)!important}
html.js[data-theme="dark"] #root>div>header .lg\:hidden a,html.js[data-theme="dark"] #root>div>header .lg\:hidden button{background:rgba(255,255,255,.07)!important}
html.js #device{min-height:auto!important;background:radial-gradient(900px 420px at 50% -10%,rgba(255,255,255,.35),transparent 62%),radial-gradient(520px 240px at 16% 18%,rgba(232,133,59,.1),transparent 70%)!important}
html.js[data-theme="dark"] #device{background:radial-gradient(900px 420px at 50% -10%,rgba(255,255,255,.055),transparent 65%)!important}
html.js #device>.relative.mx-auto>.text-center{display:none!important}
html.js #device>.relative.mx-auto{width:100%!important;max-width:min(1360px,calc(100% - clamp(18px,4vw,56px)))!important;margin:clamp(14px,2vw,28px) auto clamp(24px,3vw,42px)!important;padding:clamp(16px,2.6vw,34px)!important;border:1px solid var(--device-line)!important;border-radius:clamp(24px,3.2vw,44px)!important;background:var(--device-shell)!important;box-shadow:var(--device-shadow)!important}
html.js .sevena-stage{width:100%!important;max-width:100%!important}
html.js .sevena-stage>div{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
html.js .sevena-stage>div>div:first-child{position:relative!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:clamp(10px,1.5vw,18px)!important;padding:clamp(4px,.8vw,8px) clamp(4px,.8vw,8px) clamp(12px,1.6vw,18px)!important}
html.js .sevena-stage>div>div:first-child>div:first-child{position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:9px!important;direction:rtl!important;min-width:0!important;max-width:calc(100% - var(--solar-width) - var(--control-rail-width) - clamp(28px,4vw,54px))!important;padding:clamp(8px,1.2vw,12px) clamp(12px,1.7vw,18px)!important;border:1px solid rgba(89,69,40,.14)!important;border-radius:14px!important;background:rgba(255,255,255,.38)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32)!important;line-height:1.35!important}
html.js[data-theme="dark"] .sevena-stage>div>div:first-child>div:first-child{border-color:rgba(255,255,255,.08)!important;background:rgba(18,20,23,.08)!important}
html.js .sevena-stage>div>div:first-child>div:first-child::before{content:"7";display:grid;place-items:center;flex:0 0 clamp(34px,4vw,44px);width:clamp(34px,4vw,44px);height:clamp(34px,4vw,44px);border-radius:12px;background:linear-gradient(180deg,#f2c063,#e8853b);color:#2b1605;font-family:var(--font);font-size:clamp(20px,2.4vw,27px);font-weight:900;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 12px -8px rgba(0,0,0,.8)}
html.js .sevena-stage>div>div:first-child>div:first-child span{color:var(--ink)!important;text-shadow:none!important}
html.js .sevena-stage>div>div:first-child>div:first-child span:first-child{font-family:var(--mono)!important;font-size:clamp(13px,1.7vw,18px)!important;font-weight:900!important;letter-spacing:.1em!important;direction:ltr!important}
html.js .sevena-stage>div>div:first-child>div:first-child span:last-child{font-family:var(--font)!important;font-size:clamp(13px,1.55vw,18px)!important;font-weight:900!important;letter-spacing:0!important;direction:rtl!important;white-space:normal!important}
html.js .sevena-stage>div>div:first-child>div:last-child{position:relative!important;isolation:isolate!important;flex:0 0 var(--solar-width)!important;width:var(--solar-width)!important;min-width:var(--solar-width)!important;height:var(--control-height)!important;display:flex!important;align-items:stretch!important;justify-content:space-between!important;gap:5px!important;padding:6px!important;border:1px solid var(--solar-line)!important;border-radius:14px!important;background:var(--solar-shell)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.58),inset 0 -1px 0 rgba(0,0,0,.38),0 2px 0 rgba(0,0,0,.18)!important}
html.js .sevena-stage>div>div:first-child>div:last-child::before{content:"";position:absolute;inset:5px;border-radius:10px;background:repeating-linear-gradient(90deg,transparent 0 18%,rgba(255,255,255,.12) 18% 19%,transparent 19% 20%),linear-gradient(90deg,rgba(255,255,255,.08),transparent 30%,rgba(0,0,0,.16));pointer-events:none;z-index:2}
html.js .sevena-stage>div>div:first-child>div:last-child::after{content:"";position:absolute;inset:1px;border-radius:13px;background:linear-gradient(110deg,rgba(255,255,255,.24),transparent 32%,transparent 68%,rgba(255,255,255,.08));pointer-events:none;z-index:3}
html.js .sevena-stage>div>div:first-child>div:last-child span{flex:1 1 0!important;width:auto!important;height:100%!important;border:1px solid var(--solar-line)!important;border-radius:5px!important;background:var(--solar-cell)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.22)!important}
html.js .sevena-stage>div>div:nth-child(2){border-radius:clamp(20px,2.8vw,34px)!important;padding:clamp(16px,2.6vw,30px)!important;background:var(--bezel-bg)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 2px 14px rgba(0,0,0,.32)!important}
html.js .sevena-key,html.js .sevena-cat-card,html.js .sevena-pop-chip,html.js .sevena-cat-link,html.js #static-calculator-hub article,html.js #static-calculator-hub a[href^="/calculators/"]{position:relative!important;overflow:hidden!important;background:var(--button-bg)!important;color:var(--button-ink)!important;border:1px solid var(--button-line)!important;border-radius:16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5),0 4px 0 var(--button-edge),0 14px 24px -18px rgba(0,0,0,.62)!important;filter:none!important;transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease!important}
html.js .sevena-key{min-height:clamp(92px,10vw,128px)!important}
html.js .sevena-key:hover,html.js .sevena-cat-card:hover,html.js .sevena-pop-chip:hover,html.js .sevena-cat-link:hover{transform:translateY(1px)!important;border-color:rgba(244,190,95,.34)!important;filter:none!important}
html.js .sevena-key:active{transform:translateY(3px)!important}
html.js .sevena-cat-card *,html.js .sevena-pop-chip *,html.js .sevena-cat-link *,html.js #static-calculator-hub article *,html.js #static-calculator-hub a[href^="/calculators/"] *{color:inherit!important}
html.js #root>div>.mx-auto:not(nav){display:grid!important;justify-items:center!important;align-items:start!important;width:100%!important;max-width:min(1220px,calc(100% - clamp(18px,5vw,72px)))!important;margin-inline:auto!important;padding-inline:0!important;gap:clamp(22px,3vw,42px)!important}
html.js #root>div>.mx-auto:not(nav)>section,html.js #root>div>section:not(#device){width:100%!important;max-width:min(1180px,100%)!important;margin-inline:auto!important;padding:clamp(20px,2.8vw,34px)!important;text-align:center!important;border:1px solid var(--line)!important;border-radius:clamp(18px,2.4vw,30px)!important;background:var(--panel-bg)!important;color:var(--ink)!important;box-shadow:0 18px 40px -30px rgba(86,64,36,.45)!important}
html.js[data-theme="dark"] #root>div>.mx-auto:not(nav)>section,html.js[data-theme="dark"] #root>div>section:not(#device){box-shadow:none!important}
html.js #root>div>.mx-auto:not(nav)>section h2,html.js #root>div>section:not(#device) h2{color:var(--ink)!important;letter-spacing:0!important}
html.js #root>div>.mx-auto:not(nav)>section p,html.js #root>div>section:not(#device) p{color:var(--ink-soft)!important}
html.js #popular>.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))!important;margin-inline:auto!important}
html.js #categories>.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))!important;margin-inline:auto!important}
html.js #root>div>section:not(#device) input{background:rgba(255,255,255,.72)!important;color:var(--ink)!important;border-color:var(--line)!important}
html.js[data-theme="dark"] #root>div>section:not(#device) input{background:#14161a!important;color:#f7f3ea!important}
html.js #root>div>footer{max-width:min(1180px,calc(100% - clamp(18px,4vw,56px)))!important;margin:clamp(16px,2vw,24px) auto 0!important;border:1px solid var(--line)!important;border-bottom:0!important;border-radius:clamp(20px,2.8vw,32px) clamp(20px,2.8vw,32px) 0 0!important;background:rgba(255,255,255,.3)!important;color:var(--ink-soft)!important}
html.js[data-theme="dark"] #root>div>footer{background:rgba(255,255,255,.045)!important}
@media (max-width:720px){
  html.js #root>div{--solar-width:94px;--control-rail-width:70px;--control-height:32px}
  html.js #device>.relative.mx-auto{max-width:calc(100% - 14px)!important;margin-top:8px!important;padding:12px!important;border-radius:22px!important}
  html.js .sevena-stage>div>div:first-child{gap:8px!important;padding-bottom:10px!important}
  html.js .sevena-stage>div>div:first-child>div:first-child{max-width:calc(100% - var(--solar-width) - var(--control-rail-width) - 20px)!important;padding:7px 9px!important;gap:5px!important}
  html.js .sevena-stage>div>div:first-child>div:first-child::before{flex-basis:28px!important;width:28px!important;height:28px!important;border-radius:9px!important;font-size:18px!important}
  html.js .sevena-stage>div>div:first-child>div:first-child span:first-child,html.js .sevena-stage>div>div:first-child>div:first-child span:last-child{font-size:11px!important;line-height:1.25!important}
  html.js .sevena-stage>div>div:first-child>div:last-child{height:var(--control-height)!important;padding:4px!important;gap:3px!important}
  html.js #root>div>header{top:47px!important}
  html.js #root>div>header nav{max-width:calc(100% - 14px)!important;padding-inline:12px!important}
  html.js #root>div>header nav>div:last-child{left:calc(var(--solar-width) + 22px)!important;right:auto!important;gap:4px!important;padding:3px!important;border-radius:10px!important}
  html.js #root>div>header nav>div:last-child>button{width:30px!important;min-width:30px!important;height:26px!important;border-radius:8px!important}
  html.js #root>div>header>.lg\:hidden{left:7px!important;right:auto!important;top:40px!important;width:min(300px,calc(100vw - 14px))!important;max-width:min(300px,calc(100vw - 14px))!important}
  html.js #root>div>.mx-auto:not(nav){max-width:calc(100% - 14px)!important;gap:18px!important}
  html.js #root>div>.mx-auto:not(nav)>section,html.js #root>div>section:not(#device){padding:16px!important;border-radius:18px!important}
}