:root{--azure:#1E86FF;--violet:#6A35E8;--magenta:#C22BD9;--ink:#17142E;--slate:#5C5870;--mist:#ECEBF2;--white:#FFFFFF;--p:1;--o:1;}*{box-sizing:border-box;margin:0;padding:0}html{height:100%;-webkit-text-size-adjust:100%}body{min-height:100dvh;font-family:"M PLUS Rounded 1c","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif;font-weight:500;color:var(--ink);background:var(--mist);overscroll-behavior:none;-webkit-font-smoothing:antialiased;}.field{min-height:100dvh;display:flex;justify-content:center;align-items:stretch;}.app{position:relative;width:100%;max-width:460px;min-height:100dvh;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));background:var(--mist);overflow:hidden;isolation:isolate;}.tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,#E4EEFF 0%,#EFE6FF 55%,#FBE6FA 100%);opacity:var(--o);pointer-events:none;}.bar{display:flex;align-items:center;gap:12px}.logo{width:clamp(52px,10vw + 16px,64px);height:auto;aspect-ratio:1;border-radius:24%;box-shadow:0 1px 2px rgba(23,20,46,.10),0 6px 14px rgba(23,20,46,.12);display:block;}.bar p{font-size:clamp(.8rem,.74rem + .3vw,.9rem);font-weight:700;color:var(--slate);line-height:1.25}h1{margin-top:clamp(12px,2.2dvh,22px);font-size:clamp(1.85rem,1.2rem + 3.2vw,2.35rem);font-weight:800;line-height:1.08;letter-spacing:-.01em;}h1 .brand{color:var(--violet)}.sub{margin-top:8px;font-size:clamp(.94rem,.88rem + .3vw,1.02rem);line-height:1.4;color:var(--slate);max-width:34ch;}.seg{position:relative;margin-top:clamp(12px,2.2dvh,20px);display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:14px;background:rgba(23,20,46,.09);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;}.seg.drag{cursor:grabbing}.thumb{position:absolute;top:3px;left:3px;bottom:3px;width:calc(50% - 3px);border-radius:11px;background:var(--white);box-shadow:0 1px 1px rgba(23,20,46,.10),0 3px 8px rgba(23,20,46,.14);transform:translateX(calc(var(--p) * 100%));will-change:transform;}.seg button{position:relative;z-index:1;min-height:44px;border:0;background:none;font:inherit;font-weight:700;font-size:clamp(.92rem,.88rem + .2vw,1rem);color:var(--ink);border-radius:11px;cursor:inherit;-webkit-tap-highlight-color:transparent;transition:transform .1s cubic-bezier(.2,.8,.2,1);}.seg button:active{transform:scale(.97)}.seg button:focus-visible{outline:3px solid var(--azure);outline-offset:2px}.stage{flex:1;display:flex;align-items:center;padding:clamp(10px,2dvh,20px) 0;min-height:0}.card{width:100%;background:var(--white);border-radius:22px;box-shadow:0 1px 1px rgba(23,20,46,.05),0 4px 10px rgba(23,20,46,.07),0 18px 36px rgba(23,20,46,.10);padding:16px 16px 4px;touch-action:pan-y;user-select:none;-webkit-user-select:none;}.file{display:flex;align-items:center;gap:14px;padding-bottom:14px}.tile{position:relative;flex:none;width:68px;height:68px}.tile span{position:absolute;inset:0;border-radius:24%;display:grid;place-items:center;}.tile .off{background:#DAD8E3;color:#5C5870;font-weight:800;font-size:.85rem;letter-spacing:.04em;opacity:calc(1 - var(--o))}.tile .on{background:linear-gradient(135deg,var(--azure),var(--violet) 55%,var(--magenta));box-shadow:0 6px 14px rgba(106,53,232,.30);opacity:var(--o);transform:scale(calc(.86 + var(--p) * .14));}.tile svg{width:34px;height:34px}.meta{min-width:0;flex:1}.name{font-weight:800;font-size:clamp(1.05rem,1rem + .3vw,1.15rem);line-height:1.2}.swap{position:relative;display:grid}.swap > span{grid-area:1/1}.swap .off{opacity:calc(1 - var(--o))}.swap .on{opacity:var(--o)}.state{margin-top:3px;font-size:clamp(.88rem,.84rem + .2vw,.95rem);line-height:1.3;color:var(--slate)}.state .on{color:var(--violet);font-weight:700}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;border-top:1px solid rgba(23,20,46,.10);font-size:clamp(.9rem,.86rem + .2vw,.98rem);}.row .k{color:var(--slate)}.row .swap{text-align:right;font-weight:700;justify-items:end}.row .on{color:var(--ink)}.row .off{color:var(--slate)}.action{padding-top:2px}.cta{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:16px;background:var(--violet);color:var(--white);font-weight:800;font-size:clamp(1.05rem,1rem + .3vw,1.15rem);text-decoration:none;box-shadow:0 1px 2px rgba(23,20,46,.14),0 8px 18px rgba(106,53,232,.28);-webkit-tap-highlight-color:transparent;transition:transform .1s cubic-bezier(.2,.8,.2,1);}.cta:active{transform:scale(.97)}.cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.after{margin-top:9px;text-align:center;font-size:clamp(.82rem,.78rem + .2vw,.9rem);line-height:1.35;color:var(--slate);}footer{margin-top:10px;text-align:center;font-size:clamp(.72rem,.7rem + .1vw,.78rem);color:var(--slate);}@media (hover: hover){.cta:hover{background:#5B2AD6}}@media (min-width: 700px){body{background:var(--violet)}.field{align-items:center;padding:24px;background:linear-gradient(135deg,var(--azure) 0%,var(--violet) 55%,var(--magenta) 100%);}.app{max-width:440px;min-height:0;height:min(740px,100dvh - 48px);border-radius:36px;padding:26px 26px 16px;box-shadow:0 2px 4px rgba(23,20,46,.16),0 30px 70px rgba(23,20,46,.34);}.logo{width:72px}}@media (max-height: 640px){.sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tile{width:56px;height:56px}.row{min-height:44px}}@media (prefers-reduced-motion: reduce){.tint,.tile span,.swap > span{transition:opacity .15s linear}.tile .on{transform:none}.seg button,.cta{transition:none}}html,body{max-width:100%;overflow-x:clip}