/* LG Polyrhythm — consumer integration / Research visual language.
   Canonical SVG artwork remains owned by LG SVG Library. */
#abc-app{
  --lg-accent:#F6A400;
  --lg-blue:#0A84FF;
  --lg-ink:#171717;
  --lg-muted:#62666d;
  --lg-line:#d8d8d8;
  --lg-line-soft:#ececec;
  --lg-paper:#ffffff;
  --lg-soft:#f7f7f7;

  /* compatibility aliases used by the functional stylesheet */
  --amber:var(--lg-accent);
  --amber-soft:rgba(246,164,0,.10);
  --teal:var(--lg-blue);
  --teal-deep:#0068c9;
  --teal-soft:rgba(10,132,255,.07);
  --ink:var(--lg-ink);
  --muted:var(--lg-muted);
  --line:var(--lg-line);
  --surface:var(--lg-paper);
  --surface-soft:var(--lg-soft);
  --score:var(--lg-paper);
  --shadow:none;

  min-width:0;
  box-sizing:border-box;
  container-type:inline-size;
  color:var(--lg-ink);
  background:transparent;
  font-family:inherit;
  font-size:16.5px;
  line-height:1.62;
}
#abc-app,#abc-app *,#abc-app *::before,#abc-app *::after{box-sizing:border-box}
#abc-app button,#abc-app input{font:inherit}
#abc-app .pr-shell,#abc-app .pr-layout,#abc-app .app-card,#abc-app .controls-card,#abc-app .control-grid,#abc-app .patterns-block,#abc-app #patterns,#abc-app .pat-row,#abc-app .visual-grid,#abc-app .visual-card,#abc-app .canvas-shell{min-width:0;max-width:100%}
#abc-app .pr-shell{width:100%;margin:0;padding:0 0 2.6rem}

/* ---------- SVG presentation contract ----------
   Library intrinsic size (viewBox × Library scale) × local module multiplier.
   No canonical path/stroke/fill/transform is rewritten here. */
#abc-app .tool-icon,
#abc-app .label-icon,
#abc-app .action-icon,
#abc-app .note-icon{
  display:inline-grid;
  place-items:center;
  overflow:visible;
  line-height:0;
  vertical-align:middle;
  flex:none;
  margin:0;
  padding:0;
}
#abc-app .tool-icon{position:absolute;inset:0;width:100%;height:100%}
#abc-app .label-icon,#abc-app .action-icon,#abc-app .note-icon{width:auto;height:auto}
#abc-app .lg-polyrhythm-icon-artwork{
  display:block;
  flex:none;
  min-width:0;
  transform-origin:center center;
  transform:scale(var(--lg-poly-local-scale,.72));
}
#abc-app .lg-polyrhythm-icon-artwork>svg{
  display:block!important;
  position:static!important;
  inset:auto!important;
  margin:0!important;
  padding:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  overflow:visible!important;
  flex:none!important;
  vertical-align:middle!important;
}
#abc-app #langToggle{--lg-poly-local-scale:.66}
#abc-app #play{--lg-poly-local-scale:.66}
#abc-app #reset{--lg-poly-local-scale:.66}
#abc-app .tempo-inline .label-icon[data-lg-svg="metronome"]{--lg-poly-local-scale:.72}
#abc-app .note-btn{--lg-poly-local-scale:.78}
#abc-app .action-btn{--lg-poly-local-scale:.62}
#abc-app .volume-block .label-icon{--lg-poly-local-scale:.66}

/* ---------- toolbar: Research chrome ---------- */
#abc-app .pr-toolbar{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 2rem;
  padding:0 0 1rem;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-line);
  border-radius:0;
  box-shadow:none;
}
#abc-app .tool-btn{
  position:relative;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-ink);
  border-radius:6px;
  box-shadow:none;
  transform:none;
  cursor:pointer;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}
#abc-app .tool-btn:hover:not(:disabled){
  color:var(--lg-blue);
  background:var(--lg-soft);
  border-color:var(--lg-blue);
  box-shadow:none;
  transform:none;
}
#abc-app .tool-btn:active:not(:disabled){transform:none}
#abc-app .tool-btn[aria-pressed="true"]{
  color:var(--lg-ink);
  background:var(--lg-soft);
  border-color:var(--lg-ink);
  box-shadow:inset 0 -3px 0 var(--lg-accent);
}
#abc-app .tool-btn:disabled{opacity:.38;box-shadow:none}
#abc-app .tool-btn:focus-visible,
#abc-app button:focus-visible,
#abc-app input:focus-visible{outline:2px solid var(--lg-blue);outline-offset:3px;box-shadow:none}

/* ---------- no decorative outer cards ---------- */
#abc-app .pr-layout{display:grid;gap:2.5rem}
#abc-app .app-card,
#abc-app .visual-card{
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
#abc-app .controls-card{padding:0}

/* Main application heading: same section grammar as Research/Profile. */
#abc-app .card-head{
  position:relative;
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.25rem;
  margin:0 0 1.7rem;
  padding:0 0 .75rem;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-ink);
  border-radius:0;
  box-shadow:none;
}
#abc-app .card-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:34px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}
#abc-app .card-head h2{
  margin:0;
  color:var(--lg-ink);
  font-size:.80rem;
  line-height:1.22;
  font-weight:780;
  letter-spacing:.145em;
  text-transform:uppercase;
}
#abc-app .status-grid{display:flex;gap:8px}
#abc-app .status-box{
  min-width:88px;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:5px;
  box-shadow:none;
}
#abc-app .status-cycle{box-shadow:inset 0 -2px 0 var(--lg-accent)}
#abc-app .status-tempo{box-shadow:inset 0 -2px 0 var(--lg-blue)}
#abc-app .status-box span{color:var(--lg-muted);font-size:10px;font-weight:760;letter-spacing:.08em;text-transform:uppercase}
#abc-app .status-box strong{font-size:1.08rem;font-weight:760;font-variant-numeric:tabular-nums}

/* ---------- controls ---------- */
#abc-app .control-grid{
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);
  gap:1.3rem;
  margin:0 0 2rem;
}
#abc-app .control-block,
#abc-app .patterns-block,
#abc-app .volume-block{
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
#abc-app .control-block{padding:0}
#abc-app .tempo-block{display:flex;align-items:center}
#abc-app .tempo-inline{width:100%;min-height:48px;display:flex;align-items:center;gap:12px;white-space:nowrap}
#abc-app .number-field{width:min(210px,100%);display:flex;align-items:center;gap:10px}
#abc-app .tempo-inline .number-field{width:auto;min-width:0}
#abc-app input[type="number"]{
  width:108px;
  height:46px;
  padding:7px 10px;
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:5px;
  box-shadow:none;
  font-size:1.05rem;
  font-weight:730;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
#abc-app input[type="number"]:hover{border-color:#b7b7b7}
#abc-app .number-field>span{color:var(--lg-muted);font-size:11px;font-weight:750;letter-spacing:.08em}
#abc-app .control-title,
#abc-app .block-head h3,
#abc-app .volume-block .control-title{
  margin:0 0 .8rem;
  color:var(--lg-muted);
  font-size:11.5px;
  line-height:1.2;
  font-weight:760;
  letter-spacing:.07em;
  text-transform:uppercase;
}
#abc-app .control-title{display:flex;align-items:center;gap:9px}

#abc-app .note-grid{display:grid;grid-template-columns:repeat(4,minmax(58px,1fr));gap:8px}
#abc-app .note-btn{
  min-height:60px;
  display:grid;
  place-items:center;
  padding:7px;
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:6px;
  box-shadow:none;
  transform:none;
  cursor:pointer;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}
#abc-app .note-btn:hover{color:var(--lg-blue);background:var(--lg-soft);border-color:var(--lg-blue);transform:none}
#abc-app .note-btn.is-active{
  color:var(--lg-ink);
  background:var(--lg-soft);
  border-color:var(--lg-ink);
  box-shadow:inset 0 -3px 0 var(--lg-accent);
}

#abc-app .patterns-block{
  position:relative;
  margin:0 0 2rem;
  padding:1.25rem 0 0;
  border-top:1px solid var(--lg-line-soft);
}
#abc-app .block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 1rem}
#abc-app .block-head h3{margin:0}
#abc-app .block-head p{margin:.2rem 0 0;color:var(--lg-muted);font-size:12px}
#abc-app .pattern-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
#abc-app .action-btn{
  min-height:39px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 10px;
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:5px;
  box-shadow:none;
  transform:none;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
#abc-app .action-btn:hover:not(:disabled){color:var(--lg-blue);background:var(--lg-soft);border-color:var(--lg-blue);transform:none}
#abc-app .action-btn:disabled{opacity:.38;box-shadow:none}
#abc-app #addPat,#abc-app #removePat{border-left:1px solid var(--lg-line)}

#abc-app #patterns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#abc-app .pat-row{
  min-width:0;
  display:grid;
  grid-template-columns:auto 3px 78px minmax(90px,1fr);
  align-items:center;
  gap:10px;
  padding:11px;
  background:var(--lg-soft);
  border:1px solid var(--lg-line);
  border-radius:6px;
  box-shadow:none;
}
#abc-app .sep{align-self:stretch;background:var(--lg-line);border-radius:99px}
#abc-app .pat-row input[type="number"]{width:100%;height:40px;padding:6px 8px;font-size:14px;border-radius:5px}
#abc-app .tag{width:30px;height:30px;display:inline-grid;place-items:center;padding:0;border-radius:5px;border:0;font-size:12px;font-weight:780;box-shadow:none}

#abc-app input[type="range"]{
  width:100%;height:5px;margin:0;appearance:none;background:#dedede;border-radius:99px;cursor:pointer;accent-color:var(--lg-blue)
}
#abc-app input[type="range"]::-webkit-slider-thumb{width:17px;height:17px;appearance:none;background:#fff;border:1px solid var(--lg-blue);border-radius:50%;box-shadow:none}
#abc-app input[type="range"]::-moz-range-thumb{width:16px;height:16px;background:#fff;border:1px solid var(--lg-blue);border-radius:50%;box-shadow:none}
#abc-app .volume-block{padding:1.25rem 0 0;border-top:1px solid var(--lg-line-soft)}
#abc-app .volume-block .control-title{margin-bottom:.8rem}
#abc-app .volume-block>input{max-width:540px}

/* ---------- visual sections ---------- */
#abc-app .visual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
#abc-app .visual-card{min-width:0;padding:0;overflow:visible}
#abc-app .visual-head{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 1.2rem;
  padding:0 0 .7rem;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-ink);
  border-radius:0;
  box-shadow:none;
}
#abc-app .visual-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:34px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}
#abc-app .stage-squares .visual-head{background:transparent;border-left:0}
#abc-app .visual-head h3{margin:0;color:var(--lg-ink);font-size:.80rem;line-height:1.22;font-weight:780;letter-spacing:.145em;text-transform:uppercase}
#abc-app .visual-kicker{color:var(--lg-muted);font-size:10.5px;font-weight:720;letter-spacing:.06em;text-transform:uppercase}
#abc-app .canvas-shell{position:relative;height:320px;background:var(--lg-paper);border:1px solid var(--lg-line);border-radius:5px;box-shadow:none;overflow:hidden}
#abc-app canvas{width:100%;height:100%;display:block}
#abc-app .overlay{color:var(--lg-muted);font-size:12px;font-weight:650}
#abc-app .tags-circles{display:flex;align-items:center;justify-content:space-around;gap:8px;margin-top:10px;padding:8px;background:transparent;border:0;border-top:1px solid var(--lg-line-soft);border-radius:0}

/* ---------- container-responsive version ---------- */
@container (max-width:820px){
  #abc-app .pr-shell{padding:0 0 2rem}
  #abc-app .pr-toolbar{margin-bottom:1.6rem;padding-bottom:.9rem;gap:8px}
  #abc-app .tool-btn{width:46px;height:46px}
  #abc-app .card-head{align-items:flex-start;flex-direction:column;gap:.9rem}
  #abc-app .status-grid{width:100%}
  #abc-app .status-box{flex:1;min-width:0}
  #abc-app .control-grid,#abc-app .visual-grid{grid-template-columns:1fr}
  #abc-app #patterns{grid-template-columns:1fr}
}
@container (max-width:560px){
  #abc-app .tool-btn{width:44px;height:44px}
  #abc-app #langToggle,#abc-app #play,#abc-app #reset{--lg-poly-local-scale:.62}
  #abc-app .card-head{margin-bottom:1.45rem}
  #abc-app .status-grid{gap:6px}
  #abc-app .status-box{min-height:43px;padding:6px 8px}
  #abc-app .note-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  #abc-app .note-btn{min-height:55px;padding:6px;--lg-poly-local-scale:.72}
  #abc-app .block-head{align-items:stretch;flex-direction:column}
  #abc-app .pattern-actions{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}
  #abc-app .action-btn{min-width:0;padding-inline:7px;font-size:11px}
  #abc-app .pat-row{grid-template-columns:auto 3px 68px minmax(70px,1fr);gap:7px;padding:9px}
  #abc-app .visual-head{align-items:flex-start;flex-direction:column;gap:2px}
  #abc-app .canvas-shell{height:290px}
}
@container (max-width:380px){
  #abc-app .pattern-actions{grid-template-columns:1fr}
  #abc-app .pat-row{grid-template-columns:auto 2px 62px minmax(62px,1fr);gap:6px;padding:8px}
}

@media (prefers-reduced-motion:reduce){
  #abc-app *,#abc-app *::before,#abc-app *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}