/* Octave Range Test */
.wport-app{box-sizing:border-box;max-width:1180px;margin:32px auto;padding:24px;color:var(--wport-text);background:linear-gradient(145deg,#fff,var(--wport-background));border:1px solid rgba(124,58,237,.12);border-radius:28px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;box-shadow:0 20px 50px rgba(15,23,42,.1)}
.wport-app *{box-sizing:border-box}.wport-app h1,.wport-app h2,.wport-app p{margin-top:0}.wport-app h1{margin-bottom:10px;color:var(--wport-primary);font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.04em}.wport-app h2{margin-bottom:4px;font-size:1.05rem}.wport-hero{display:flex;flex-direction:column;gap:18px;margin-bottom:24px;padding:8px}.wport-eyebrow{margin-bottom:8px;color:var(--wport-accent);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.wport-subtitle{max-width:760px;margin-bottom:0;color:var(--wport-muted);font-size:1.05rem}.wport-privacy,.wport-status{display:inline-flex;align-items:center;width:fit-content;gap:8px;border-radius:999px;font-size:.8rem;font-weight:750}.wport-privacy{padding:9px 13px;color:#166534;background:#dcfce7}.wport-status{padding:7px 11px;color:var(--wport-primary);background:#e0e7ff}.wport-status[data-state=active]{color:#166534;background:#dcfce7}.wport-layout,.wport-controls{display:grid;gap:20px}.wport-card{padding:20px;background:rgba(255,255,255,.96);border:1px solid var(--wport-border);border-radius:24px;box-shadow:0 8px 24px rgba(15,23,42,.08)}.wport-result-card{position:relative;overflow:hidden;border-color:rgba(124,58,237,.25)}.wport-result-card:before{position:absolute;inset:0 0 auto;height:5px;content:"";background:linear-gradient(90deg,var(--wport-accent),#a78bfa,var(--wport-success))}.wport-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.wport-heading p{margin-bottom:0;color:var(--wport-muted);font-size:.88rem}.wport-field+.wport-field{margin-top:18px}.wport-field label{display:block;margin-bottom:7px;font-size:.91rem;font-weight:750}.wport-app select,.wport-app button{min-height:48px;font:inherit;font-size:16px}.wport-app select{width:100%;padding:0 42px 0 14px;color:var(--wport-text);background:#fff;border:1px solid var(--wport-border);border-radius:10px}.wport-app select:focus-visible,.wport-app button:focus-visible{outline:3px solid rgba(124,58,237,.25);outline-offset:2px}.wport-button{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:0 18px;border:1px solid transparent;border-radius:12px;font-weight:800;cursor:pointer}.wport-primary{margin-top:18px;color:#fff;background:linear-gradient(135deg,var(--wport-primary),var(--wport-accent));box-shadow:0 10px 22px rgba(124,58,237,.25)}.wport-secondary{color:var(--wport-primary);background:#eef2ff;border-color:#c7d2fe}.wport-ghost{color:var(--wport-text);background:#fff;border-color:var(--wport-border)}.wport-app button:disabled{opacity:.5;cursor:not-allowed}.wport-button-grid,.wport-action-grid{display:grid;gap:10px;margin-top:14px}.wport-inline{display:grid;grid-template-columns:1fr 52px;gap:10px}.wport-inline button{color:var(--wport-accent);background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;font-weight:900}.wport-tuning{display:flex;justify-content:space-between;gap:12px;margin:16px 0;padding:12px 14px;background:var(--wport-surface);border:1px solid #e2e8f0;border-radius:12px;font-size:.86rem}.wport-tuning span{color:var(--wport-muted)}.wport-live{margin-top:16px;padding:16px;text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px}.wport-live p{margin-bottom:4px;color:var(--wport-muted);font-size:.8rem;font-weight:800;text-transform:uppercase}.wport-live-note{color:var(--wport-primary);font-size:3rem;font-weight:900}.wport-live-grid,.wport-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.wport-live-grid>div,.wport-stat-grid>div{padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:12px}.wport-live-grid span,.wport-stat-grid span{display:block;color:var(--wport-muted);font-size:.74rem;font-weight:750}.wport-live-grid strong,.wport-stat-grid strong{display:block;color:var(--wport-primary)}.wport-note,.wport-safety{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:.82rem}.wport-note{color:#475569;background:#f8fafc;border:1px solid #e2e8f0}.wport-safety{color:#92400e;background:#fffbeb;border:1px solid #fde68a}.wport-alert{margin-top:14px;padding:12px 14px;color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:10px}.wport-result-label{padding-top:10px;margin-bottom:4px;color:var(--wport-muted);font-size:.78rem;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.1em}.wport-range-main{text-align:center;color:var(--wport-primary);font-size:clamp(3.5rem,12vw,6.5rem);font-weight:900;line-height:1.05;letter-spacing:-.06em}.wport-range-sub{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;color:var(--wport-accent);font-size:1.1rem;font-weight:800}.wport-keyboard-wrap{margin-top:18px}.wport-keyboard-label{margin-bottom:8px;font-size:.82rem;font-weight:800}.wport-keyboard{display:grid;grid-template-columns:repeat(37,minmax(6px,1fr));height:110px;overflow:hidden;border:1px solid #cbd5e1;border-radius:12px;background:#fff}.wport-key{position:relative;border-right:1px solid #cbd5e1;background:#fff}.wport-key.black{height:62%;background:#0f172a;z-index:2}.wport-key.in-range{background:#ddd6fe}.wport-key.black.in-range{background:var(--wport-accent)}.wport-key.boundary:after{position:absolute;inset:0;content:"";box-shadow:inset 0 0 0 3px var(--wport-success)}.wport-text-button{min-height:36px!important;padding:0 4px;color:var(--wport-accent);background:transparent;border:0;font-weight:800}.wport-history-item{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:9px;padding:12px 14px;background:var(--wport-surface);border:1px solid #e2e8f0;border-radius:12px}.wport-history-item strong{display:block;color:var(--wport-primary)}.wport-history-item span,.wport-empty{color:var(--wport-muted);font-size:.8rem}.wport-empty{margin-bottom:0}
@media(min-width:640px){.wport-app{padding:32px}.wport-hero{flex-direction:row;justify-content:space-between;align-items:flex-start}.wport-button-grid,.wport-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wport-stat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:960px){.wport-layout{grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr);align-items:start}.wport-controls{position:sticky;top:24px}}
@media(prefers-reduced-motion:reduce){.wport-app *{animation-duration:.01ms!important;transition-duration:.01ms!important}}