:host {
  color-scheme: dark;
  display: block;
  width: 100%;
  contain: content;
}

* {
  box-sizing: border-box;
}

button,
input,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

.ips-app {
  --aqua: #55e7d4;
  --aqua-soft: #8ef4e7;
  --panel: #111820;
  --panel-2: #0c1218;
  --line: rgba(220, 235, 240, .11);
  --text: #edf4f5;
  --muted: #8fa1a9;
  position: relative;
  isolation: isolate;
  width: min(1180px, 100%);
  min-height: 420px;
  margin: 20px auto;
  padding: clamp(20px, 3vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(188, 218, 224, .1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% -10%, rgba(85, 231, 212, .08), transparent 34%),
    radial-gradient(circle at -5% 28%, rgba(87, 151, 255, .055), transparent 30%),
    linear-gradient(145deg, #11171e 0%, #090d12 62%, #0a1115 100%);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .025);
  color: var(--text);
  font: 400 15px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .005em;
}

.ips-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .24;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.ips-header {
  margin-bottom: 26px;
}

.ips-brandline,
.ips-eyebrow,
.ips-analyzer-topline,
.ips-region-heading p,
.ips-mastering-block p {
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ips-brandline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 21px;
  color: #d9e4e7;
  font-size: 10px;
  font-weight: 650;
}

.ips-brandline span:last-child {
  color: #73858d;
  font-weight: 500;
}

.ips-brand-mark {
  width: 16px;
  height: 5px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--aqua), #6a9eff);
  box-shadow: 0 0 12px rgba(85, 231, 212, .35);
}

.ips-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.ips-eyebrow {
  margin: 0 0 7px;
  color: var(--aqua);
  font-size: 9px;
  font-weight: 700;
}

.ips-header h1 {
  margin: 0;
  color: #f5f8f9;
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 570;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.ips-subtitle {
  margin: 12px 0 0;
  color: #91a3aa;
  font-size: clamp(13px, 1.6vw, 16px);
}

.ips-local-badge {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid rgba(85, 231, 212, .15);
  border-radius: 999px;
  background: rgba(85, 231, 212, .045);
  color: #9bb7b6;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ips-local-badge span { color: var(--aqua); }

.ips-uploader {
  display: grid;
  min-height: 310px;
  place-items: center;
  align-content: center;
  padding: 42px 24px;
  border: 1px dashed rgba(155, 193, 199, .25);
  border-radius: 18px;
  background: rgba(7, 11, 15, .48);
  text-align: center;
  transition: border-color .2s, background .2s, transform .2s;
}

.ips-uploader.is-dragging {
  border-color: rgba(85, 231, 212, .7);
  background: rgba(85, 231, 212, .06);
  transform: scale(.997);
}

.ips-file-input { display: none; }
.ips-upload-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
  place-items: center;
  border: 1px solid rgba(85, 231, 212, .24);
  border-radius: 50%;
  color: var(--aqua);
  font-size: 26px;
  box-shadow: inset 0 0 18px rgba(85, 231, 212, .045);
}

.ips-uploader h2 { margin: 0; font-size: 20px; font-weight: 560; }
.ips-uploader p { margin: 5px 0 20px; color: var(--muted); font-size: 12px; }
.ips-uploader small { margin-top: 16px; color: #65777f; font-size: 10px; }

.ips-button {
  min-height: 42px;
  padding: 0 19px;
  border: 1px solid rgba(205, 228, 232, .16);
  border-radius: 10px;
  background: rgba(245, 250, 251, .04);
  color: #dce8ea;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}

.ips-button:hover,
.ips-button:focus-visible { border-color: rgba(85, 231, 212, .5); color: #fff; outline: none; }
.ips-button:active { transform: translateY(1px); }

.ips-workspace { display: grid; gap: 15px; }

.ips-transport-card,
.ips-analyzer-card,
.ips-region-panel,
.ips-footer-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(20, 28, 35, .82), rgba(10, 15, 20, .8));
  box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}

.ips-transport-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 18px;
  min-height: 105px;
  padding: 15px 20px;
}

.ips-play {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 1px solid rgba(190, 216, 220, .19);
  border-radius: 50%;
  background: linear-gradient(145deg, #182129, #0b1015);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05);
  color: #e5eff0;
  cursor: pointer;
  font-size: 13px;
}

.ips-play:hover,
.ips-play:focus-visible { border-color: rgba(85,231,212,.5); color: var(--aqua); outline: none; }

.ips-file-summary { min-width: 0; }
.ips-file-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ips-file-heading strong { overflow: hidden; color: #e9eff1; font-size: 13px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.ips-file-summary > span { display: block; margin-top: 3px; color: #70828a; font-size: 10px; }
.ips-change-file { padding: 4px 0; border: 0; background: none; color: #84979f; cursor: pointer; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.ips-change-file:hover,.ips-change-file:focus-visible { color: var(--aqua); outline: none; }

.ips-timeline-row {
  display: grid;
  grid-template-columns: 37px minmax(80px, 1fr) 37px;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  color: #8ea0a7;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.ips-timeline {
  position: relative;
  height: 24px;
  cursor: pointer;
  touch-action: none;
}

.ips-timeline::before,
.ips-timeline-buffer,
.ips-timeline-progress {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  height: 3px;
  border-radius: 4px;
}

.ips-timeline::before { width: 100%; background: rgba(205,220,224,.12); }
.ips-timeline-buffer { width: 100%; background: rgba(255,255,255,.025); }
.ips-timeline-progress { width: 0; background: linear-gradient(90deg, #4ab8b0, var(--aqua)); box-shadow: 0 0 8px rgba(85,231,212,.2); }
.ips-timeline-thumb { position: absolute; top: 7px; left: 0; width: 9px; height: 9px; margin-left: -4.5px; border: 2px solid #10171d; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 2px rgba(85,231,212,.2); }
.ips-timeline:focus-visible { outline: 1px solid rgba(85,231,212,.5); outline-offset: 3px; border-radius: 4px; }

.ips-clean-button {
  position: relative;
  justify-self: end;
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #101820 0 52%, #080c11 54% 62%, transparent 64%);
  color: #829198;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
}

.ips-clean-button::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(210,225,230,.09); border-radius: 50%; box-shadow: inset 0 0 18px rgba(0,0,0,.7); }
.ips-clean-button.is-active { color: #e8fffc; text-shadow: 0 0 11px rgba(85,231,212,.45); }
.ips-clean-button.is-active::after { border-color: rgba(85,231,212,.2); }
.ips-clean-button:focus-visible { outline: 1px solid var(--aqua); outline-offset: 3px; }
.ips-clean-button span { z-index: 2; }
.ips-plasma { position: absolute; inset: -12px; width: 132px; height: 132px; pointer-events: none; }

.ips-analyzer-card { overflow: hidden; background: #0b1015; }
.ips-analyzer-topline { display: flex; justify-content: space-between; padding: 11px 14px 9px; border-bottom: 1px solid rgba(210,225,230,.07); color: #53656d; font-size: 8px; }
.ips-legend { display: flex; gap: 17px; }
.ips-legend span::before { content: ""; display: inline-block; width: 14px; height: 1px; margin: 0 6px 3px 0; background: currentColor; }
.ips-legend-input { color: #b6c0c4; }
.ips-legend-clean { color: var(--aqua); }
.ips-analyzer { display: block; width: 100%; height: clamp(270px, 36vw, 410px); cursor: crosshair; touch-action: none; }
.ips-analyzer:focus-visible { outline: 1px solid rgba(85,231,212,.4); outline-offset: -2px; }

.ips-region-panel { display: grid; grid-template-columns: minmax(155px, .48fr) minmax(180px, .7fr) 1.3fr; gap: 28px; padding: 21px 23px; }
.ips-preset-control { display: grid; align-content: center; gap: 7px; }
.ips-preset-control > span { color: #63757d; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.ips-preset-control select {
  width: 100%;
  min-height: 37px;
  padding: 0 34px 0 11px;
  border: 1px solid rgba(85, 231, 212, .2);
  border-radius: 9px;
  appearance: none;
  background: linear-gradient(45deg, transparent 50%, #73bdb5 50%) calc(100% - 15px) 16px / 5px 5px no-repeat, linear-gradient(135deg, #73bdb5 50%, transparent 50%) calc(100% - 10px) 16px / 5px 5px no-repeat, rgba(85, 231, 212, .045);
  color: #d9edeb;
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .04em;
}
.ips-preset-control select:hover,
.ips-preset-control select:focus-visible { border-color: rgba(85, 231, 212, .52); outline: none; }
.ips-region-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.ips-region-heading p,.ips-mastering-block p { margin: 0 0 5px; color: #63757d; font-size: 8px; font-weight: 700; }
.ips-region-heading h2 { margin: 0; font-size: 17px; font-weight: 670; letter-spacing: .05em; }
.ips-region-heading strong { color: #bcc9cd; font-size: 11px; font-weight: 500; white-space: nowrap; }
.ips-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ips-control-grid label > span { display: flex; justify-content: space-between; color: #73858c; font-size: 9px; letter-spacing: .11em; }
.ips-control-grid b { color: #aebdc2; font-size: 9px; font-weight: 650; }
.ips-control-grid output { color: var(--aqua-soft); font-variant-numeric: tabular-nums; letter-spacing: .03em; }

input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 8px 0 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(85,231,212,.46), rgba(191,207,211,.12)); }
input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; appearance: none; border: 2px solid #10171c; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 2px rgba(85,231,212,.18); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(191,207,211,.13); }
input[type="range"]::-moz-range-progress { height: 3px; background: rgba(85,231,212,.5); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #10171c; border-radius: 50%; background: var(--aqua); }
input[type="range"]:focus-visible { outline: 1px solid rgba(85,231,212,.5); outline-offset: 2px; border-radius: 4px; }

.ips-footer-card { display: grid; grid-template-columns: 1.15fr 1fr auto; align-items: center; gap: 26px; padding: 18px 22px; }
.ips-mastering-block,.ips-privacy { display: flex; align-items: center; gap: 15px; }
.ips-mastering-block { justify-content: space-between; padding-right: 24px; border-right: 1px solid rgba(210,225,230,.08); }
.ips-mastering-block small,.ips-privacy small { display: block; color: #71838a; font-size: 9px; }
.ips-segment { min-width: 54px; height: 30px; border: 1px solid rgba(85,231,212,.24); border-radius: 8px; background: rgba(85,231,212,.07); color: var(--aqua); cursor: pointer; font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.ips-segment.is-off { border-color: rgba(200,215,220,.13); background: rgba(255,255,255,.025); color: #7b8c93; }
.ips-segment:focus-visible { outline: 1px solid var(--aqua); outline-offset: 2px; }
.ips-privacy > span { color: var(--aqua); font-size: 19px; }
.ips-privacy strong { display: block; color: #b8c6ca; font-size: 10px; font-weight: 600; }
.ips-button-export { min-width: 145px; border-color: rgba(85,231,212,.3); background: linear-gradient(135deg, rgba(85,231,212,.16), rgba(85,231,212,.055)); color: #cffff8; }
.ips-button-export:hover { background: rgba(85,231,212,.18); }
.ips-mp3-note { margin: -5px 5px 0; color: #7e9097; font-size: 9px; text-align: right; }

.ips-status { min-height: 19px; padding: 9px 4px 0; color: #6f8289; font-size: 10px; text-align: center; }
.ips-error { margin-top: 11px; padding: 11px 14px; border: 1px solid rgba(246,105,105,.24); border-radius: 9px; background: rgba(246,105,105,.07); color: #f3b2b2; font-size: 11px; text-align: center; }

.ips-export-overlay { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; border-radius: inherit; background: rgba(5,8,11,.78); backdrop-filter: blur(10px); }
.ips-export-modal { display: grid; width: min(340px, calc(100% - 40px)); place-items: center; padding: 34px; border: 1px solid rgba(85,231,212,.18); border-radius: 16px; background: #10171d; box-shadow: 0 20px 70px rgba(0,0,0,.5); }
.ips-export-modal strong { margin-top: 15px; font-size: 13px; font-weight: 560; }
.ips-export-modal span { margin: 6px 0 13px; color: var(--aqua); font-size: 12px; font-variant-numeric: tabular-nums; }
.ips-export-spinner { width: 34px; height: 34px; border: 2px solid rgba(85,231,212,.12); border-top-color: var(--aqua); border-radius: 50%; animation: ips-spin .9s linear infinite; }
.ips-export-track { width: 100%; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.ips-export-track i { display: block; width: 0; height: 100%; background: var(--aqua); box-shadow: 0 0 10px rgba(85,231,212,.4); transition: width .18s; }

@keyframes ips-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .ips-app { margin: 0; padding: 21px 14px; border-radius: 16px; }
  .ips-title-row { align-items: flex-start; flex-direction: column; gap: 14px; }
  .ips-local-badge { align-self: flex-start; }
  .ips-transport-card { grid-template-columns: 45px minmax(0,1fr); gap: 13px; padding: 14px; }
  .ips-clean-button { grid-column: 1 / -1; justify-self: center; margin: 2px 0 0; }
  .ips-region-panel { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .ips-footer-card { grid-template-columns: 1fr; gap: 17px; }
  .ips-mastering-block { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid rgba(210,225,230,.08); }
  .ips-button-export { width: 100%; }
  .ips-analyzer { height: 300px; }
}

@media (max-width: 470px) {
  .ips-control-grid { grid-template-columns: 1fr; gap: 16px; }
  .ips-region-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .ips-file-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .ips-timeline-row { grid-template-columns: 32px minmax(60px,1fr) 32px; gap: 7px; }
  .ips-analyzer { height: 270px; }
}

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