/* Free mini-tools (src/tools): Step Sequencer look on top of /analyzer.css. */
.ft-form select, .ft-form input:not([type=hidden]):not([type=file]):not([type=checkbox]):not([type=range]), .ft-form textarea { width: 100%; min-height: 52px; border-radius: 4px; border: 1px solid #3a3c40; background: var(--machine-2); color: var(--machine-ink); padding: 12px 14px; font: 500 1rem/1.4 var(--font-body); }
.ft-form textarea { min-height: 96px; resize: vertical; }
.ft-form select:focus-visible, .ft-form input:focus-visible, .ft-form textarea:focus-visible { outline: 2px solid var(--machine-focus); outline-offset: 2px; }
.ft-form .btn { justify-self: start; }
.ft-two, .ft-three { display: grid; gap: 10px; }
.ft-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-two > div, .ft-three > div { display: grid; gap: 8px; min-width: 0; }
.ft-result { display: grid; gap: 16px; margin-top: 24px; max-width: 980px; }
.ft-chip { display: inline-block; font: 800 .72rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; background: var(--machine); color: var(--machine-ink); padding: 6px 8px; border-radius: 3px; }
.ft-chip--warn { background: var(--led); color: #fff; }
.ft-line { font: 650 1.12rem/1.45 var(--font-body); margin: 8px 0; }
.ft-show, .ft-orig { color: var(--ink-2); font-size: .95rem; margin: 4px 0; }
.ft-orig { color: var(--ink-3); }
.ft-rewrites, .ft-beats, .ft-formats { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ft-rewrites li, .ft-beats li, .ft-formats li { border: 1px solid var(--line); border-radius: 6px; padding: 14px; background: var(--surface-raised); display: grid; gap: 4px; justify-items: start; }
.ft-beat-head { display: flex; align-items: center; gap: 10px; }
.ft-beat-head .readout { font-size: 1.1rem; }
.ft-lines { padding-left: 22px; display: grid; gap: 6px; line-height: 1.5; }
.ft-related { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 18px; }
.ft-related .silk { color: var(--ink-3); }
/* score dial */
.ft-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.ft-dial { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(closest-side, var(--machine) 76%, transparent 77% 100%), conic-gradient(var(--led) calc(var(--p) * 1%), var(--led-off) 0); }
.ft-dial .readout { font-size: 2.2rem; }
.ft-dial small { color: var(--machine-ink-3); font-size: .7rem; }
.ft-score--good .ft-dial { background: radial-gradient(closest-side, var(--machine) 76%, transparent 77% 100%), conic-gradient(var(--role-cutaway) calc(var(--p) * 1%), #24342e 0); }
/* caption previews: a 9:16 phone drawn in CSS (no images) */
.ft-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ft-style { display: grid; gap: 8px; align-content: start; }
.ft-style h3 { margin: 6px 0 0; }
.ft-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #5b6c7a 0%, #2b3138 55%, #1b1c1e 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ft-face { position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 3 / 4; transform: translateX(-50%); border-radius: 46% 46% 40% 40%; background: radial-gradient(circle at 50% 40%, #c9a58a 0 55%, transparent 56%); opacity: .55; }
.ft-ui { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.ft-ui::after { content: ""; position: absolute; right: 6%; bottom: 40%; width: 9%; height: 120%; border-radius: 6px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 14%, transparent 14% 25%); }
.ft-cap { position: absolute; left: 8%; right: 17%; margin: 0; text-align: center; font: 900 clamp(.95rem, 2.4vw, 1.25rem)/1.15 var(--font-body); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.55); }
.ft-pos-lower .ft-cap { bottom: 22%; }
.ft-pos-center .ft-cap { top: 50%; transform: translateY(-50%); }
.ft-pos-upper .ft-cap { top: 12%; }
.ft-em-keyword-color .ft-cap .k { color: #ffd84d; }
.ft-em-box .ft-cap span { background: #fff; color: #141517; padding: 1px 5px; border-radius: 3px; text-shadow: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ft-em-outline .ft-cap { -webkit-text-stroke: 1.2px #141517; paint-order: stroke fill; text-shadow: none; }
.ft-em-karaoke .ft-cap span { opacity: .55; }
.ft-em-karaoke .ft-cap .k { opacity: 1; color: var(--led); }
/* hub */
.ft-hub { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ft-hub .readout { font-size: 1.1rem; }
.ft-hub-name { font: 800 1.3rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 860px) { .ft-styles { grid-template-columns: minmax(0, 1fr); } .ft-style { grid-template-columns: 140px minmax(0, 1fr); column-gap: 14px; } .ft-style .ft-phone { grid-row: span 4; } .ft-three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ft-two { grid-template-columns: minmax(0, 1fr); } .ft-score { grid-template-columns: minmax(0, 1fr); justify-items: start; } .ft-dial { width: 96px; height: 96px; } }
/* tags, tabs */
.ft-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.ft-tags span { font: 600 .98rem/1 var(--font-body); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.ft-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ft-tab { appearance: none; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); border-radius: 4px; padding: 9px 14px; font: 650 .95rem var(--font-body); cursor: pointer; }
.ft-tab[aria-pressed=true] { background: var(--machine); color: var(--machine-ink); border-color: var(--machine); }
.ft-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ft-money { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
/* cover previews (three styles, drawn in CSS; the PNG is redrawn on a canvas in the browser) */
.ft-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ft-cover-wrap { margin: 0; display: grid; gap: 8px; justify-items: start; }
.ft-cover { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; display: grid; align-content: center; padding: 10%; }
.ft-cover span { position: relative; z-index: 1; overflow-wrap: anywhere; }
.ft-covers[data-style=led] .ft-cover { background: var(--machine); color: var(--machine-ink); }
.ft-covers[data-style=led] .ft-cover span { font: 900 clamp(1.3rem, 3vw, 1.7rem)/1 var(--font-display); text-transform: uppercase; }
.ft-covers[data-style=led] .ft-cover i { position: absolute; left: 10%; top: 34%; width: 12%; height: 4px; background: var(--led); }
.ft-covers[data-style=sticker] .ft-cover { background: var(--primary); }
.ft-covers[data-style=sticker] .ft-cover span { font: 900 clamp(1.05rem, 2.6vw, 1.35rem)/1.25 var(--font-body); color: #141517; background: #fff; padding: 2px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline; }
.ft-covers[data-style=sticker] .ft-cover i { position: absolute; left: 10%; top: 34%; width: 12%; height: 4px; background: #ffd84d; }
.ft-covers[data-style=clean] .ft-cover { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ft-covers[data-style=clean] .ft-cover span { font: 800 clamp(1.05rem, 2.6vw, 1.35rem)/1.15 var(--font-body); }
.ft-covers[data-style=clean] .ft-cover i { position: absolute; left: 10%; top: 34%; width: 12%; height: 4px; background: var(--primary); }
/* safe-zone checker (everything in the browser) */
.ft-sz { margin-top: var(--space-6, 28px); max-width: 860px; }
.ft-drop { display: block; border: 2px dashed var(--line-strong); border-radius: 8px; padding: 18px; text-align: center; cursor: pointer; background: var(--surface-raised); }
.ft-drop.on { border-color: var(--primary); background: var(--surface); }
.ft-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ft-drop:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.ft-sz-stage { display: grid; place-items: center; margin-top: 16px; }
.ft-sz-frame { position: relative; width: min(100%, 320px); aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--machine); }
.ft-sz-frame img, .ft-sz-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ft-sz-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--machine-ink-3); margin: 0; }
.ft-sz-z { position: absolute; background: repeating-linear-gradient(135deg, rgba(255,90,60,.45) 0 8px, rgba(255,90,60,.22) 8px 16px); outline: 1px solid rgba(255,90,60,.9); }
.ft-sz-z.t { top: 0; left: 0; right: 0; }
.ft-sz-z.b { bottom: 0; left: 0; right: 0; }
.ft-sz-z.l { left: 0; }
.ft-sz-z.r { right: 0; }
.ft-sz-z.c { right: 0; }