:root{
  --navy:#0E1642; --cobalt:#2B44FF; --ice:#F3F5FF; --ink:#141A3D; --muted:#5A628F;
  --line:#D9DEF7; --amber:#FFB400; --mint:#18C48F; --red:#FF4D5E;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100vh;background:var(--navy);color:var(--ink);
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;align-items:center;justify-content:center;padding:24px}
.app{width:100%;max-width:980px;display:grid;grid-template-columns:1.15fr 1fr;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.hero{background:var(--cobalt);color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:36px}
.hero h1{font-size:2.2rem;line-height:1.1;margin:0 0 8px;font-weight:700;letter-spacing:-.02em}
.hero p{margin:0;opacity:.8;font-size:1rem;max-width:34ch}
.display{background:rgba(8,14,66,.45);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:22px;min-height:132px;
  display:flex;align-items:center}
#out{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-weight:700;font-size:1.65rem;line-height:1.35;
  word-break:break-all;width:100%;letter-spacing:.02em}
#out.empty{opacity:.55;font-size:1.1rem}
.actions{display:flex;gap:12px;flex-wrap:wrap}
button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:12px;padding:15px 22px;font-size:1rem;transition:transform .12s,background .2s}
button:active{transform:scale(.97)}
button:focus-visible,input:focus-visible+.sw{outline:3px solid var(--amber);outline-offset:3px}
.primary{background:#fff;color:var(--cobalt);flex:1 1 160px}
.primary:hover{background:var(--ice)}
.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.ghost:hover{background:rgba(255,255,255,.12)}
.ghost.done{background:var(--mint);border-color:var(--mint);color:#06281D}
.panel{background:var(--ice);padding:44px 36px;display:flex;flex-direction:column;gap:28px}
.row{display:flex;justify-content:space-between;align-items:baseline}
.row b{font-size:1rem}
#lenVal{font-size:2.4rem;font-weight:700;color:var(--cobalt);line-height:1}
input[type=range]{width:100%;margin:14px 0 0;-webkit-appearance:none;appearance:none;height:8px;border-radius:8px;
  background:linear-gradient(to right,var(--cobalt) var(--p,30%),var(--line) var(--p,30%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--cobalt);cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--cobalt);cursor:pointer}
input[type=range]:focus-visible{outline:3px solid var(--amber);outline-offset:6px}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;cursor:pointer}
.opt span small{display:block;color:var(--muted);font-weight:500;font-size:.8rem;margin-top:2px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.sw{width:46px;height:26px;border-radius:26px;background:var(--line);position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
input:checked+.sw{background:var(--cobalt)}
input:checked+.sw::after{transform:translateX(20px)}
.meter{height:10px;border-radius:10px;background:var(--line);overflow:hidden;margin:10px 0 8px}
#bar{height:100%;width:0;border-radius:10px;transition:width .3s,background .3s}
.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem}
#label{font-weight:700;color:var(--ink)}
#msg{color:var(--red);font-size:.9rem;min-height:1.2em;margin:0}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .hero,.panel{padding:30px 22px}
  .hero h1{font-size:1.8rem} #out{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}