*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input,select,textarea{font:inherit}.app-shell{background:linear-gradient(155deg, color-mix(in srgb, var(--theme-color), transparent 92%) 0%, transparent 42%, color-mix(in srgb, var(--theme-color), transparent 94%) 100%);isolation:isolate;min-height:100vh;transition:background-color .22s;position:relative;overflow:hidden}.background-lights{pointer-events:none;z-index:-1;position:absolute;inset:0;overflow:hidden}.background-light{filter:blur(26px);border-radius:50%;position:absolute;top:0;left:0}.background-light-primary{background:radial-gradient(circle, color-mix(in srgb, var(--theme-color), transparent 66%), transparent 68%);width:min(38rem,100vw);height:min(38rem,100vw)}.background-light-secondary{background:radial-gradient(circle, color-mix(in srgb, var(--theme-color), transparent 78%), transparent 68%);width:min(30rem,90vw);height:min(30rem,90vw)}.background-spark{opacity:0;filter:blur(8px);background:radial-gradient(circle, color-mix(in srgb, var(--theme-color), white 65%) 0%, color-mix(in srgb, var(--theme-color), white 25%) 8%, color-mix(in srgb, var(--theme-color), transparent 45%) 22%, transparent 70%);border-radius:50%;width:64px;height:64px;position:absolute;top:0;left:0}.brand-mark{color:#fff;background:linear-gradient(135deg, var(--theme-color), color-mix(in srgb, var(--theme-color), white 25%));width:38px;height:38px;box-shadow:0 10px 28px color-mix(in srgb, var(--theme-color), transparent 70%);border-radius:12px;place-items:center;display:grid}.hero{grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);align-items:center;gap:2rem;min-height:390px;padding:4.5rem 0 3rem;display:grid}.hero-copy{z-index:1;position:relative}.hero-chip{margin-bottom:1.5rem}.gradient-text{color:#0000;background:linear-gradient(105deg, var(--theme-color), color-mix(in srgb, var(--theme-color), white 32%));-webkit-background-clip:text;background-clip:text}.hero-art{place-items:center;min-height:300px;display:grid;position:relative}.hero-illustration{aspect-ratio:343/361;background:linear-gradient(145deg, color-mix(in srgb, var(--theme-color), white 48%), var(--theme-color) 55%, color-mix(in srgb, var(--theme-color), black 30%));width:min(100%,320px);-webkit-mask:var(--hero-image) center / contain no-repeat;-webkit-mask:var(--hero-image) center / contain no-repeat;mask:var(--hero-image) center / contain no-repeat;filter:drop-shadow(0 25px 35px color-mix(in srgb, var(--theme-color), transparent 65%));transition:background .22s,filter .22s;animation:5s ease-in-out infinite float;position:relative}.hero-glow{background:color-mix(in srgb, var(--theme-color), transparent 58%);filter:blur(52px);border-radius:50%;width:260px;height:260px;position:absolute}.content-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr);align-items:start;gap:1.5rem;display:grid}.converter-card,.history-card{box-shadow:0 24px 70px color-mix(in srgb, var(--theme-color), transparent 84%);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.conversion-grid{grid-template-columns:minmax(170px,1.05fr) minmax(175px,1fr) 50px minmax(175px,1fr);align-items:center;gap:1rem;display:grid}.swap-wrap{justify-content:center;display:flex}.swap-button{box-shadow:0 8px 22px color-mix(in srgb, var(--theme-color), transparent 70%);color:#fff!important;background:linear-gradient(135deg, var(--theme-color), color-mix(in srgb, var(--theme-color), white 25%))!important;transition:transform .18s!important}.swap-button:hover{transform:rotate(180deg)}.swap-button.Mui-disabled{opacity:.45;color:#fff!important}.result-panel{text-align:center;border:1px solid color-mix(in srgb, var(--theme-color), transparent 68%);background:linear-gradient(135deg, color-mix(in srgb, var(--theme-color), transparent 78%), color-mix(in srgb, var(--theme-color), transparent 91%));min-height:175px;box-shadow:inset 0 1px 0 color-mix(in srgb, var(--theme-color), white 75%);border-radius:18px;margin-top:2rem;padding:1.6rem;position:relative;overflow:hidden}.result-panel:after{content:"";background:color-mix(in srgb, var(--theme-color), transparent 67%);border-radius:50%;width:180px;height:180px;position:absolute;bottom:-100px;right:-90px}.result-value{color:var(--theme-color);word-break:break-word;margin-top:.3rem!important}.result-value span{color:inherit;font-size:.55em}.formula{color:inherit;background:#7f6ab91a;border-radius:8px;margin-top:1rem;padding:.35rem .7rem;font-size:.78rem;display:inline-block}.history-heading{border-bottom:1px solid;border-color:inherit;justify-content:space-between;align-items:center;gap:1rem;min-height:88px;padding:1.25rem;display:flex}.history-list{max-height:430px;overflow-y:auto;padding:.55rem!important}.history-item{border-radius:13px;gap:.75rem;transition:background-color .16s}.history-item:hover{background:color-mix(in srgb, var(--theme-color), transparent 84%)}.history-icon{width:35px;height:35px;color:var(--theme-color);background:color-mix(in srgb, var(--theme-color), transparent 90%);border-radius:10px;flex:none;place-items:center;display:grid}.color-picker-label{border:1px solid;border-color:inherit;cursor:pointer;border-radius:12px;width:54px;height:44px;padding:3px;display:block;overflow:hidden}.color-picker-input{cursor:pointer;background:0 0;border:0;border-radius:8px;width:100%;height:100%;padding:0}.color-picker-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-input::-webkit-color-swatch{border:0;border-radius:8px}.color-picker-input::-moz-color-swatch{border:0;border-radius:8px}.color-preset{border:2px solid #ffffffb3!important;width:27px!important;height:27px!important}.empty-history{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;min-height:250px;padding:2rem;display:flex}.empty-history>svg{color:var(--theme-color);opacity:.55;margin-bottom:.4rem;font-size:2.5rem}.loading-state{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:300px;display:flex}.connection-alert{max-width:800px;margin:1rem auto 4rem}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@media (prefers-reduced-motion:reduce){.hero-illustration{animation:none}.swap-button{transition:none!important}.swap-button:hover{transform:none}}@media (width<=900px){.content-grid{grid-template-columns:1fr}.hero{grid-template-columns:1.25fr .75fr;min-height:350px;padding-top:3.5rem}}@media (width<=680px){.hero{grid-template-columns:1fr;padding:3.75rem 0 2.5rem}.hero-art{display:none}.conversion-grid{grid-template-columns:1fr 50px 1fr}.conversion-grid>:first-child{grid-column:1/-1}.history-heading{align-items:flex-start}}@media (width<=460px){.conversion-grid{grid-template-columns:1fr}.conversion-grid>:first-child{grid-column:auto}.swap-wrap{transform:rotate(90deg)}.history-heading{flex-direction:column}}