:root{
  color-scheme: light;
  --slate-950: hsl(222 47% 11%);
  --slate-900: hsl(222 44% 14%);
  --slate-700: hsl(215 25% 27%);
  --slate-500: hsl(215 16% 47%);
  --slate-200: hsl(214 32% 91%);
  --slate-100: hsl(210 40% 96%);
  --brand: hsl(239 84% 67%);
  --brand-2: hsl(188 86% 53%);
  --emerald: hsl(160 84% 39%);
  --pink: hsl(329 86% 70%);
  --amber: hsl(38 92% 50%);
  --glass: rgba(255,255,255,.66);
  --glass-strong: rgba(255,255,255,.82);
  --line: rgba(255,255,255,.72);
  --shadow: 0 24px 80px rgba(99,102,241,.22), 0 8px 28px rgba(15,23,42,.10);
  --shadow-tight: 0 12px 32px rgba(15,23,42,.13);
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --ease: cubic-bezier(.2,.8,.2,1);
}

.dark{
  color-scheme: dark;
  --glass: rgba(15,23,42,.58);
  --glass-strong: rgba(15,23,42,.76);
  --line: rgba(255,255,255,.11);
  --shadow: 0 26px 90px rgba(0,0,0,.45), 0 0 70px rgba(99,102,241,.18);
  --shadow-tight: 0 16px 46px rgba(0,0,0,.32);
}

*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{margin:0;font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased}
p,h1,h2,h3,h4,h5,h6,span,div,a,button,input,textarea,output,li,label,strong,em{
  overflow-wrap:break-word;
  word-wrap:break-word;
  min-width:0;
}
img,video,canvas,svg{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
[hidden],.hidden{display:none!important}
::selection{background:rgba(99,102,241,.28);color:var(--slate-950)}
.dark ::selection{background:rgba(129,140,248,.36);color:white}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(148,163,184,.14)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(99,102,241,.76),rgba(34,211,238,.62));
  border:3px solid transparent;
  border-radius:999px;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background-color:rgba(79,70,229,.9)}

:focus-visible{
  outline:3px solid rgba(99,102,241,.55);
  outline-offset:3px;
}
.dark :focus-visible{outline-color:rgba(129,140,248,.72)}

#app-shell{isolation:isolate}
#app-shell::before,#app-shell::after{
  content:"";
  position:fixed;
  inset:auto;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  filter:blur(22px);
  opacity:.75;
  animation:auroraFloat 12s var(--ease) infinite alternate;
}
#app-shell::before{
  width:38rem;height:38rem;left:-14rem;top:8rem;
  background:radial-gradient(circle,rgba(99,102,241,.28),transparent 64%);
}
#app-shell::after{
  width:30rem;height:30rem;right:-12rem;bottom:5rem;
  background:radial-gradient(circle,rgba(244,114,182,.24),transparent 66%);
  animation-delay:-4s;
}
.dark #app-shell::before{background:radial-gradient(circle,rgba(99,102,241,.30),transparent 66%)}
.dark #app-shell::after{background:radial-gradient(circle,rgba(34,211,238,.16),transparent 66%)}

#site-header{animation:fadeDown .7s var(--ease) both}
#brand-link,#open-help-button,#theme-toggle-button{will-change:transform}
#brand-link:hover #brand-icon{
  transform:rotate(-7deg) scale(1.06);
  box-shadow:0 16px 44px rgba(99,102,241,.24);
}
#brand-icon{
  position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
#brand-icon::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(99,102,241,.35),rgba(34,211,238,.22));
  z-index:-1;
  opacity:0;
  transition:opacity .35s var(--ease);
}
#brand-link:hover #brand-icon::after{opacity:1}
#brand-title{letter-spacing:-.035em}
#brand-subtitle{letter-spacing:.01em}

#open-help-button,#theme-toggle-button,.btn,.calculator-button,[data-key]{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
}
#open-help-button::before,#theme-toggle-button::before,.btn::before,.calculator-button::before,[data-key]::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-130%);
  transition:transform .65s var(--ease);
  pointer-events:none;
}
#open-help-button:hover::before,#theme-toggle-button:hover::before,.btn:hover::before,.calculator-button:hover::before,[data-key]:hover::before{
  transform:translateX(130%);
}

#hero-panel{
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
  animation:fadeUp .8s var(--ease) both .08s;
}
#hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.58),transparent 26%),
    radial-gradient(circle at 82% 10%,rgba(34,211,238,.15),transparent 28%),
    linear-gradient(135deg,rgba(255,255,255,.36),transparent 48%);
  pointer-events:none;
}
.dark #hero-panel::before{
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.08),transparent 26%),
    radial-gradient(circle at 82% 10%,rgba(34,211,238,.12),transparent 30%);
}
#hero-copy{position:relative;z-index:1}
#hero-kicker{box-shadow:0 8px 28px rgba(99,102,241,.13)}
#hero-title{
  max-width:100%;
  text-wrap:balance;
  background:linear-gradient(135deg,hsl(222 47% 11%),hsl(239 84% 58%) 52%,hsl(188 86% 42%));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.dark #hero-title{
  background:linear-gradient(135deg,#fff,hsl(226 100% 88%) 48%,hsl(188 86% 72%));
  -webkit-background-clip:text;
  background-clip:text;
}
#hero-description{text-wrap:pretty}

#main-content>*{min-width:0}
#main-content{align-items:stretch}

#calculator-panel,#calculator-card,.calculator,.calc-shell,[data-calculator]{
  position:relative;
  min-width:0;
  width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-2xl);
  background:linear-gradient(145deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow);
  backdrop-filter:blur(26px) saturate(145%);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  animation:fadeUp .8s var(--ease) both .16s;
}
#calculator-panel::before,#calculator-card::before,.calculator::before,.calc-shell::before,[data-calculator]::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left,rgba(99,102,241,.18),transparent 34%),
    radial-gradient(circle at bottom right,rgba(52,211,153,.13),transparent 36%);
  pointer-events:none;
}
#calculator-panel>*,#calculator-card>*,.calculator>*,.calc-shell>*,[data-calculator]>*{position:relative;z-index:1}

#display,.display,.calculator-display,[data-display],output{
  display:block;
  width:100%;
  min-height:5.5rem;
  max-width:100%;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.20);
  border-radius:1.5rem;
  background:rgba(15,23,42,.92);
  color:white;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 38px rgba(15,23,42,.18);
  padding:1rem 1.15rem;
  text-align:right;
}
.dark #display,.dark .display,.dark .calculator-display,.dark [data-display],.dark output{
  background:rgba(2,6,23,.82);
  border-color:rgba(255,255,255,.10);
}
#expression,.expression,.display-expression,[data-expression]{
  display:block;
  min-height:1.35rem;
  overflow:hidden;
  color:rgba(226,232,240,.68);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  text-overflow:ellipsis;
}
#result,.result,.display-result,[data-result]{
  display:block;
  margin-top:.35rem;
  overflow:hidden;
  color:white;
  font-size:clamp(2rem,8vw,3.75rem);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.055em;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#keypad,.keypad,.calculator-grid,[data-keypad]{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
  width:100%;
  min-width:0;
}
#scientific-keypad,.scientific-keypad{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.6rem;
  width:100%;
  min-width:0;
}
.calculator-button,[data-key],.key,.operator,.function,.number,.equals,.memory-btn{
  min-width:0;
  min-height:3.35rem;
  border:1px solid rgba(255,255,255,.62);
  border-radius:1.15rem;
  background:rgba(255,255,255,.72);
  color:var(--slate-900);
  box-shadow:0 10px 24px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.8);
  cursor:pointer;
  font-weight:800;
  letter-spacing:-.015em;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
  user-select:none;
}
.dark .calculator-button,.dark [data-key],.dark .key,.dark .operator,.dark .function,.dark .number,.dark .equals,.dark .memory-btn{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.94);
  box-shadow:0 12px 26px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08);
}
.calculator-button:hover,[data-key]:hover,.key:hover,.operator:hover,.function:hover,.number:hover,.equals:hover,.memory-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(15,23,42,.15),inset 0 1px 0 rgba(255,255,255,.88);
}
.calculator-button:active,[data-key]:active,.key:active,.operator:active,.function:active,.number:active,.equals:active,.memory-btn:active{
  transform:translateY(1px) scale(.985);
  box-shadow:0 7px 18px rgba(15,23,42,.12);
}
.#divide-button,#multiply-button,#subtract-button,#add-button,#equals-button{
  background:#4f46e5 !important;
  color:white !important;
}
.dark #divide-button,.dark #multiply-button,.dark #subtract-button,.dark #add-button,.dark #equals-button{
  background:#6366f1 !important;
  color:white !important;
}
#clear-button,#backspace-button,#percent-button{
  background:#f8fafc !important;
  color:#1e293b !important;
}
.dark #clear-button,.dark #backspace-button,.dark #percent-button{
  background:#1e293b !important;
  color:white !important;
}
[id^="digit-"],#decimal-button,#sign-toggle-button{
  background:white !important;
  color:#0f172a !important;
}
.dark [id^="digit-"],.dark #decimal-button,.dark #sign-toggle-button{
  background:rgba(255,255,255,0.1) !important;
  color:white !important;}

#history-panel,#history,.history,.side-panel,#settings-panel,#help-panel{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:linear-gradient(145deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-tight);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}
.history-list,#history-list,.history-items{
  display:grid;
  gap:.65rem;
  max-height:22rem;
  overflow:auto;
  padding-right:.2rem;
}
.history-item{
  min-width:0;
  border:1px solid rgba(148,163,184,.18);
  border-radius:1rem;
  background:rgba(255,255,255,.52);
  padding:.75rem .9rem;
}
.dark .history-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.history-item *{white-space:normal}
.history-expression{color:var(--slate-500);font-size:.82rem}
.dark .history-expression{color:rgba(203,213,225,.66)}
.history-result{font-weight:800;font-size:1.05rem;color:var(--slate-950)}
.dark .history-result{color:white}

input,select,textarea{
  max-width:100%;
  border:1px solid rgba(148,163,184,.28);
  border-radius:1rem;
  background:rgba(255,255,255,.68);
  color:var(--slate-900);
  padding:.75rem .9rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.dark input,.dark select,.dark textarea{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  color:white;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(99,102,241,.72);
  box-shadow:0 0 0 4px rgba(99,102,241,.16);
}

.modal,.dialog,#help-modal,#settings-modal,[role="dialog"]{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(15,23,42,.54);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:fadeIn .24s var(--ease) both;
}
.modal-content,.dialog-content,[role="dialog"]>div{
  width:min(42rem,100%);
  max-height:min(82vh,48rem);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:1.75rem;
  background:linear-gradient(145deg,var(--glass-strong),var(--glass));
  box-shadow:0 30px 90px rgba(0,0,0,.28);
  padding:clamp(1rem,3vw,1.75rem);
  animation:popIn .28s var(--ease) both;
}
.dark .modal-content,.dark .dialog-content,.dark [role="dialog"]>div{box-shadow:0 34px 100px rgba(0,0,0,.55)}

.loading,.is-loading{position:relative;pointer-events:none;color:transparent!important}
.loading::after,.is-loading::after{
  content:"";
  position:absolute;
  width:1.25rem;height:1.25rem;
  left:calc(50% - .625rem);top:calc(50% - .625rem);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.42);
  border-top-color:currentColor;
  animation:spin .75s linear infinite;
}
.skeleton{
  position:relative;
  overflow:hidden;
  background:rgba(148,163,184,.20);
  border-radius:.75rem;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  animation:shimmer 1.35s infinite;
}

.badge,.chip{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  gap:.4rem;
  border:1px solid rgba(99,102,241,.18);
  border-radius:999px;
  background:rgba(238,242,255,.72);
  color:hsl(239 62% 43%);
  padding:.35rem .65rem;
  font-size:.78rem;
  font-weight:800;
}
.dark .badge,.dark .chip{background:rgba(99,102,241,.14);color:hsl(226 100% 88%);border-color:rgba(129,140,248,.22)}

@media (max-width:640px){
  #site-header{align-items:flex-start}
  #top-actions{gap:.45rem}
  #open-help-button,#theme-toggle-button{padding:.6rem .8rem}
  #hero-panel{border-radius:1.5rem;padding:1.25rem}
  #hero-title{font-size:clamp(2.35rem,12vw,3.5rem)}
  #keypad,.keypad,.calculator-grid,[data-keypad]{gap:.55rem}
  #scientific-keypad,.scientific-keypad{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
  .calculator-button,[data-key],.key,.operator,.function,.number,.equals,.memory-btn{min-height:3rem;border-radius:.95rem;font-size:.95rem}
  #display,.display,.calculator-display,[data-display],output{min-height:5rem;border-radius:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}

@keyframes auroraFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(2rem,-1.25rem,0) scale(1.08)}
}
@keyframes fadeDown{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes popIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.35)}
  50%{box-shadow:0 0 0 10px rgba(99,102,241,0)}
}
  #divide-button,#multiply-button,#subtract-button,#add-button,#equals-button{background:#4f46e5 !important;color:white !important;}
  .dark #divide-button,.dark #multiply-button,.dark #subtract-button,.dark #add-button,.dark #equals-button{background:#6366f1 !important;color:white !important;}
  #clear-button,#backspace-button,#percent-button{background:#f8fafc !important;color:#1e293b !important;}
  .dark #clear-button,.dark #backspace-button,.dark #percent-button{background:#1e293b !important;color:white !important;}
  [id^="digit-"],#decimal-button,#sign-toggle-button{background:white !important;color:#0f172a !important;}
  .dark [id^="digit-"],.dark #decimal-button,.dark #sign-toggle-button{background:rgba(255,255,255,0.1) !important;color:white !important;}