:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0c13;
  color: #f5f4fb;
  font-synthesis: none;
  --violet: #8576ff;
  --mint: #62e6c2;
  --panel: rgba(25, 26, 38, .88);
  --line: rgba(255, 255, 255, .09);
  --muted: #9294a4;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(circle at 85% 3%, rgba(106, 87, 255, .18), transparent 28rem),
    radial-gradient(circle at -10% 25%, rgba(64, 221, 183, .08), transparent 25rem),
    #0b0c13;
}
button, input { font: inherit; }
button { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-shell { width: min(100%, 1060px); margin: auto; padding: max(12px, env(safe-area-inset-top)) 18px max(45px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.compact-header { gap: 14px; padding: 11px 13px; border-radius: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 900; letter-spacing: .18em; }
.brand-mark { width: 18px; height: 18px; border: 3px solid #8d80ff; border-top-color: #61e2be; border-radius: 6px 2px 6px 2px; transform: rotate(45deg); }
.app-version { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: #a8a9b7; font-size: .62rem; font-weight: 750; letter-spacing: .04em; }
.device-badge { color: var(--muted); font-size: .68rem; line-height: 1; white-space: nowrap; }
.device-badge.connected { color: #77e8c8; border-color: rgba(98,230,194,.35); }
.storage-badge { padding: 7px 9px; border: 1px solid rgba(98,230,194,.22); border-radius: 999px; color: #9fe8d4; background: rgba(98,230,194,.055); font-size: .68rem; white-space: nowrap; }
.connection-compact { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; margin-left: auto; }
.connection-compact .muted { overflow: hidden; max-width: 290px; text-overflow: ellipsis; white-space: nowrap; }
.connection-action { display: grid; flex: 0 0 auto; justify-items: center; gap: 5px; }
.connection-action > .button { padding: 9px 13px; }
.creator-header { display: flex; align-items: center; min-height: 46px; }
.creator-header .button { padding: 9px 13px; }
.hero { padding: 60px 0 35px; }
.hero.compact { padding: 24px 0 15px; }
.hero.compact h1 { margin: 0; font-size: clamp(1.45rem, 5vw, 2rem); line-height: 1.1; letter-spacing: -.035em; }
.eyebrow, .label { color: #898c9e; font-size: .68rem; font-weight: 850; letter-spacing: .17em; }
.hero h1 { margin: 7px 0 14px; max-width: 720px; font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: .93; letter-spacing: -.065em; }
.hero h1 em { color: #9185ff; font-style: normal; }
.hero > p:last-child { max-width: 620px; margin: 0; color: #a6a8b5; line-height: 1.55; }
.panel { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 22px 70px rgba(0,0,0,.22); }
.device-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 21px 23px; }
.device-panel h2, .section-heading h2 { margin: 4px 0 5px; font-size: 1.12rem; letter-spacing: -.025em; }
.muted { margin: 0; color: var(--muted); font-size: .8rem; }
.muted.error { color: #ff8fa3; }
.muted.success { color: #65dfbd; }
.device-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.device-actions .button { min-width: 190px; }
.button { border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; font-size: .82rem; font-weight: 800; }
.button.primary { color: #0a0a12; background: #8a7eff; }
.button.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.045); }
.button:disabled { opacity: .4; cursor: default; }
.workspace, .library, .sequence { margin-top: 22px; }
.brightness-control { display: grid; grid-template-columns: auto minmax(120px,1fr) 48px minmax(0,180px); align-items: center; gap: 12px; margin-top: 22px; padding: 12px 16px; }
.brightness-copy { display: grid; gap: 2px; }
.brightness-copy .label { font-size: .58rem; }
.brightness-copy strong { font-size: .82rem; }
.brightness-control output { color: #c8c3ff; font-size: .8rem; font-weight: 850; text-align: right; }
.brightness-control .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.create-launch { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 17px 20px; }
.create-launch .label { margin: 0 0 5px; }
.create-launch strong { font-size: .88rem; }
.experimental-note { margin: 0 0 13px; padding: 9px 11px; border: 1px solid rgba(255,190,92,.24); border-radius: 11px; color: #c5ad83; background: rgba(255,174,67,.06); font-size: .72rem; line-height: 1.4; }
.experimental-note strong { color: #ffd18a; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 13px; }
.section-heading .label { margin: 0; }
.library-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.045); cursor: pointer; }
.icon-button:disabled { opacity: .35; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.preview-card { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #12131c; }
.preview-title { display: flex; justify-content: space-between; padding: 12px 15px; color: #d8d7e0; font-size: .77rem; font-weight: 700; }
.preview-title small { color: #777a89; }
.canvas-wrap { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background: #08090e; }
.canvas-wrap.checker { background-color: #101119; background-image: linear-gradient(45deg,#171823 25%,transparent 25%),linear-gradient(-45deg,#171823 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#171823 75%),linear-gradient(-45deg,transparent 75%,#171823 75%); background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0; }
canvas { display: block; width: 100%; height: 100%; }
.empty-state { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 25px; color: #626574; text-align: center; font-size: .78rem; }
.has-content .empty-state { display: none; }
.creator { margin-top: 22px; padding: 23px; }
.source-tabs, .segmented { display: flex; padding: 4px; border-radius: 12px; background: #0f1018; }
.source-tabs { width: min(100%, 610px); margin-bottom: 18px; overflow-x: auto; }
.source-tabs button, .segmented button { flex: 1; padding: 9px 12px; border: 0; border-radius: 9px; color: #858795; background: transparent; cursor: pointer; font-size: .78rem; font-weight: 750; }
.source-tabs button[aria-selected="true"], .segmented button[aria-pressed="true"] { color: white; background: #292a3b; }
.drop-zone { display: block; width: 100%; padding: 31px 18px; border: 1px dashed rgba(151,140,255,.45); border-radius: 16px; color: #d9d7e8; background: rgba(126,111,255,.055); cursor: pointer; text-align: center; }
.drop-zone strong, .drop-zone small { display: block; }
.drop-zone small { margin-top: 5px; color: #858795; }
.drop-zone[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.drop-icon { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 11px; border-radius: 50%; color: #0c0c13; background: #8d81ff; font-size: 1.3rem; }
.fit-controls { display: grid; grid-template-columns: auto minmax(230px, 1fr) 1fr 1fr; align-items: center; gap: 14px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; }
.fit-controls label, .parameter-grid label, .save-row label { display: grid; gap: 7px; color: #9698a7; font-size: .75rem; }
input[type="range"] { width: 100%; accent-color: #8c80ff; }
.algorithm-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.algorithm-list button { display: grid; gap: 4px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 15px; background: #12131c; cursor: pointer; }
.algorithm-list button.selected { border-color: #8b7fff; background: rgba(139,127,255,.1); }
.algorithm-list small { color: #808290; }
.algo-icon { height: 58px; margin-bottom: 6px; border-radius: 10px; }
.algo-icon.gradient-x { background: linear-gradient(90deg,#ff537a,#7b70ff,#50e5c0); }
.algo-icon.gradient-y { background: linear-gradient(0deg,#ffb95d,#7a67ff,#26316f); }
.algo-icon.water { background: repeating-radial-gradient(ellipse at 25% 60%,#70e4ff 0 7%,#2f57b2 12%,#131b47 18%); }
.algo-icon.radial { background: repeating-radial-gradient(circle,#ff5878 0 8%,#836cff 11% 20%,#3fdcbd 24% 31%); }
.algo-icon.diagonal { background: linear-gradient(135deg,#2cddbd 0 25%,#786cff 42% 62%,#ff5e8a 78%); }
.algo-icon.rotation { background: conic-gradient(from 35deg,#ff596f,#ffcb65,#58dfbc,#706aff,#ff596f); }
.algo-icon.plasma { background: radial-gradient(circle at 25% 30%,#ff5b93,transparent 35%),radial-gradient(circle at 75% 65%,#53e7cf,transparent 38%),#5a50bb; }
.algo-icon.fire { background: radial-gradient(ellipse at 50% 100%,#fff17c 0 12%,#ff8b32 35%,#df294f 60%,#211026 82%); }
.algo-icon.aurora { background: repeating-linear-gradient(105deg,#101a3a 0 13%,#56e1b8 19%,#796bff 26%,#101a3a 38%); }
.algo-icon.checker { background: conic-gradient(#846fff 25%,#11131d 0 50%,#58dbbb 0 75%,#11131d 0) 0 0/24px 24px; }
.algo-icon.rain { background: repeating-linear-gradient(105deg,#10152d 0 9%,#5ddcf7 10% 13%,#253577 15% 24%); }
.algo-icon.spiral { background: repeating-conic-gradient(from 20deg,#ff5a82 0 9deg,#786aff 18deg 30deg,#56dfbd 40deg 52deg); }
.parameter-grid { display: grid; grid-template-columns: 1fr 160px; gap: 18px; margin-top: 16px; }
.text-controls { display: grid; grid-template-columns: minmax(0,2fr) minmax(145px,1fr) minmax(90px,.65fr) minmax(140px,1fr); align-items: end; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #12131c; }
.text-controls label { display: grid; gap: 7px; color: #9698a7; font-size: .75rem; }
.solid-controls { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(260px,1.4fr) auto; align-items: end; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #12131c; }
.solid-picker { display: grid; gap: 7px; color: #9698a7; font-size: .75rem; }
.solid-picker input[type="color"] { min-height: 64px; cursor: pointer; }
.rgb-fields { display: grid; grid-template-columns: repeat(3,minmax(64px,1fr)); gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rgb-fields legend { grid-column: 1 / -1; margin-bottom: 7px; padding: 0; color: #9698a7; font-size: .75rem; }
.rgb-fields label { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px; color: #c9c8d3; font-size: .78rem; font-weight: 800; }
.rgb-fields input { min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.solid-presets { display: grid; grid-template-columns: 1fr; gap: 8px; }
.solid-presets button[aria-pressed="true"] { border-color: #8b7fff; color: white; background: rgba(139,127,255,.16); }
input[type="number"], input[type="text"], input[type="search"], select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; color: white; background: #0e0f16; outline: none; }
input[type="color"] { width: 100%; min-height: 42px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #0e0f16; }
input:focus, select:focus { border-color: #8a7eff; }
.online-search { display: grid; gap: 8px; }
.online-search > label { color: #c6c5d0; font-size: .78rem; font-weight: 750; }
.online-search > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.license-policy { margin-top: 13px; padding: 12px 14px; border: 1px solid rgba(98,230,194,.24); border-radius: 13px; color: #9fa1af; background: rgba(65,191,157,.055); font-size: .72rem; line-height: 1.45; }
.license-policy strong { color: #78e0c4; }
.license-policy p { margin: 4px 0 0; }
.online-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.online-item { display: grid; grid-template-columns: 125px minmax(0,1fr); min-height: 125px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #12131c; }
.online-item > img { width: 125px; height: 100%; min-height: 125px; object-fit: contain; background: #08090e; }
.online-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 7px; padding: 11px; }
.online-copy > strong { display: -webkit-box; overflow: hidden; font-size: .8rem; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.online-copy > .button { margin-top: auto; padding: 8px 10px; font-size: .7rem; }
.online-rights, .effect-rights { color: #858795; font-size: .68rem; line-height: 1.4; }
.online-rights p, .effect-rights p { margin: 0 0 4px; }
.online-rights a, .effect-rights a { margin-right: 10px; color: #aaa3ff; }
.save-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; margin-top: 18px; }
.status { min-height: 20px; margin: 12px 0 0; color: #8e90a0; font-size: .77rem; }
.status.error { color: #ff8fa3; }
.status.success { color: #65dfbd; }
.effect-library { display: grid; gap: 7px; }
.effect-group-title { margin: 14px 2px 3px; color: #b8b3d7; font-size: .7rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.effect-group-title:first-child { margin-top: 0; }
.library-empty { grid-column: 1 / -1; padding: 32px; text-align: center; border: 1px dashed var(--line); border-radius: 16px; color: #727482; font-size: .82rem; }
.effect-item { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #151620; }
.effect-summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 7px; padding: 7px; }
.effect-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 7px 8px; text-align: left; border: 0; background: transparent; cursor: pointer; }
.effect-toggle > span:first-child { display: grid; gap: 2px; min-width: 0; }
.effect-toggle strong, .effect-toggle small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.effect-toggle small { color: #7c7e8c; font-size: .7rem; }
.effect-chevron { color: #868898; transition: transform .18s ease; }
.effect-toggle[aria-expanded="true"] .effect-chevron { transform: rotate(180deg); }
.effect-add { padding: 8px 11px; border: 0; border-radius: 9px; color: #0b0c13; background: #68ddbd; cursor: pointer; font-size: .72rem; font-weight: 800; }
.effect-add:disabled { opacity: .45; cursor: default; }
.effect-delete { width: 31px; height: 31px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(5,6,10,.35); cursor: pointer; }
.effect-preview { border-top: 1px solid var(--line); background: #08090e; }
.effect-preview canvas { width: 100%; max-height: 360px; aspect-ratio: 16 / 10; object-fit: contain; }
.effect-rights { padding: 10px 13px 12px; border-top: 1px solid var(--line); background: #11121a; }
.effect-item.selected { border-color: rgba(139,127,255,.65); }
.effect-item[data-source="factory"] .effect-delete,
.effect-item[data-source="preset"] .effect-delete,
.effect-item[data-source="device-algorithm"] .effect-delete { display: none; }
.sequence { padding: 23px; border-color: rgba(133,118,255,.28); background: linear-gradient(145deg,rgba(117,101,255,.12),rgba(55,62,91,.16)),rgba(27,29,43,.94); }
.sequence-list { display: grid; gap: 9px; }
.sequence-empty { margin: 0; padding: 25px; text-align: center; border: 1px dashed var(--line); border-radius: 14px; color: #727482; font-size: .8rem; }
.sequence-item { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #12131c; }
.sequence-item.active { border-color: #68ddbd; background: rgba(80,210,178,.07); }
.sequence-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding-right: 9px; }
.sequence-summary { display: grid; width: 100%; min-width: 0; grid-template-columns: 20px 96px minmax(0,1fr); align-items: center; gap: 10px; padding: 9px; border: 0; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.sequence-summary canvas { width: 96px; height: 58px; border-radius: 9px; background: #08090e; }
.sequence-copy { display: grid; gap: 3px; min-width: 0; }
.sequence-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }
.sequence-chevron { color: #868898; transition: transform .18s ease; }
.sequence-summary[aria-expanded="true"] .sequence-chevron { transform: rotate(180deg); }
.sequence-settings { padding: 12px; border-top: 1px solid var(--line); background: rgba(5,6,10,.22); }
.sequence-parameters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; min-width: 0; }
.sequence-value { display: grid; gap: 5px; color: #8d8f9e; font-size: .7rem; }
.stepper { display: grid; grid-template-columns: 32px 58px 32px auto; align-items: center; gap: 5px; }
.stepper input { width: 58px; padding: 8px 5px; border: 1px solid var(--line); border-radius: 9px; color: white; text-align: center; background: #0d0e15; }
.stepper button { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: white; background: rgba(255,255,255,.05); cursor: pointer; }
.sequence-order { display: flex; gap: 5px; }
.sequence-order button { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: #c7c6d0; background: rgba(255,255,255,.04); cursor: pointer; }
.sequence-order button:disabled { opacity: .3; cursor: default; }
.sequence-controls { display: flex; gap: 9px; margin-top: 14px; }
.transfer-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(6,7,12,.78); backdrop-filter: blur(7px); }
.transfer-card { display: grid; width: min(100%,430px); grid-template-columns: 1fr auto; gap: 10px 14px; padding: 24px; }
.transfer-card h2, .transfer-card p { grid-column: 1 / -1; margin: 0; }
.transfer-card p { color: #a4a6b5; font-size: .82rem; }
.transfer-card progress { width: 100%; height: 14px; accent-color: #68ddbd; }
.transfer-card > strong { text-align: right; color: #7be1c5; }
.transfer-card small { grid-column: 1 / -1; color: #777a89; }
.transfer-spinner { grid-column: 1 / -1; width: 34px; height: 34px; border: 4px solid rgba(255,255,255,.12); border-top-color: #887bff; border-radius: 50%; animation: transfer-spin .8s linear infinite; }
@keyframes transfer-spin { to { transform: rotate(360deg); } }
.install-button { position: fixed; z-index: 29; top: max(72px,calc(env(safe-area-inset-top) + 60px)); right: max(14px,env(safe-area-inset-right)); padding: 8px 11px; border: 0; border-radius: 10px; color: #fff; background: #8576ff; font-size: .7rem; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.32); }
code { color: #bbb4ff; }

body.creator-mode { overflow: hidden; }
body.creator-mode .app-shell { display: grid; height: 100svh; grid-template-rows: auto auto minmax(0,1fr); overflow: hidden; padding-bottom: max(10px,env(safe-area-inset-bottom)); }
body.creator-mode #mainHeader { display: none; }
body.creator-mode .creator-header { display: flex; }
body.creator-mode .workspace { margin-top: 7px; }
body.creator-mode .workspace .section-heading,
body.creator-mode .preview-title { display: none; }
body.creator-mode .preview-card { border-radius: 14px; }
body.creator-mode .canvas-wrap { height: clamp(110px,22svh,190px); aspect-ratio: auto !important; }
body.creator-mode .creator { min-height: 0; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; padding: 16px; border-radius: 16px; box-shadow: none; }
body.creator-mode .source-tabs { margin-bottom: 13px; }
body.creator-mode .install-button { display: none; }

@media (max-width: 760px) {
  .app-shell { padding-inline: 15px; }
  .compact-header { gap: 8px; padding: 9px; }
  .brand { gap: 7px; letter-spacing: .12em; }
  .app-version { padding: 3px 5px; }
  .connection-compact { margin-left: auto; }
  .connection-compact .muted { display: none; }
  .storage-badge { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
  .connection-action > .button { padding: 8px 10px; font-size: .75rem; }
  .brightness-control { grid-template-columns: auto minmax(80px,1fr) 43px; gap: 9px; }
  .brightness-control .muted { display: none; }
  body.creator-mode .app-shell { padding-inline: 10px; }
  body.creator-mode .creator { padding: 12px; }
  body.creator-mode .drop-zone { padding: 20px 12px; }
  .device-panel { align-items: stretch; flex-direction: column; }
  .device-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
  .algorithm-list { grid-template-columns: 1fr 1fr; }
  .fit-controls { grid-template-columns: 1fr; }
  .text-controls { grid-template-columns: 1fr; }
  .solid-controls { grid-template-columns: 1fr; }
  .solid-presets { grid-template-columns: 1fr 1fr; }
  .online-results { grid-template-columns: 1fr; }
  .save-row { grid-template-columns: 1fr; }
  .sequence-summary { grid-template-columns: 18px 74px minmax(0,1fr); gap: 8px; }
  .sequence-summary canvas { width: 74px; height: 48px; }
}

@media (max-width: 420px) {
  .source-tabs button { min-width: 74px; padding-inline: 8px; }
  .rgb-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .rgb-fields label { grid-template-columns: 1fr; gap: 4px; }
  .solid-presets { grid-template-columns: 1fr; }
  .algorithm-list, .effect-library { grid-template-columns: 1fr; }
  .device-actions { grid-template-columns: 1fr; }
  .online-search > div { grid-template-columns: 1fr; }
  .create-launch { align-items: stretch; flex-direction: column; }
  .sequence { padding: 16px 12px; }
  .sequence-parameters { display: grid; grid-template-columns: 1fr; justify-items: start; }
  .sequence-row { gap: 5px; padding-right: 6px; }
  .sequence-summary { grid-template-columns: 16px 58px minmax(0,1fr); gap: 6px; padding: 6px; }
  .sequence-summary canvas { width: 58px; height: 40px; }
  .sequence-order { gap: 4px; }
  .sequence-order button { width: 29px; height: 29px; border-radius: 8px; }
}

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