.itsound-oscillator {
--itso-bg: #060606;
--itso-panel: #0e0e0e;
--itso-panel-2: #141414;
--itso-text: #f7f7f7;
--itso-muted: #9d9d9d;
--itso-line: rgba(255,255,255,.11);
--itso-line-strong: rgba(255,255,255,.19);
--itso-soft: rgba(255,255,255,.06);
--itso-glow: rgba(255,255,255,.18);
box-sizing: border-box;
display: block;
width: 100%;
max-width: 1320px;
min-width: 0;
margin: 32px auto;
padding: clamp(16px, 2.4vw, 28px);
color: var(--itso-text);
background: radial-gradient(circle at 86% 5%, rgba(255,255,255,.055), transparent 28%), var(--itso-bg);
border: 1px solid var(--itso-line);
border-radius: 20px;
font-family: inherit;
overflow: clip;
overscroll-behavior: contain;
}
.itsound-oscillator *, .itsound-oscillator *::before, .itsound-oscillator *::after { box-sizing: border-box; }
.itsound-oscillator button, .itsound-oscillator input, .itsound-oscillator select { font: inherit; }
.itsound-oscillator input[type="range"] { accent-color: #fff; }
.itsound-oscillator input[type="number"], .itsound-oscillator select {
color: var(--itso-text);
background: var(--itso-panel);
border: 1px solid var(--itso-line);
}
.itsound-oscillator input[type="number"]:focus-visible, .itsound-oscillator select:focus-visible, .itsound-oscillator button:focus-visible, .itsound-oscillator summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.itso-layout { min-width:0; max-width:100%; display:grid; grid-template-columns:minmax(300px,.82fr) minmax(500px,1.6fr); gap:18px; align-items:stretch; }
.itso-controls, .itso-visual-card, .itso-info-grid, .itso-note, .itso-experiment-bar { min-width:0; max-width:100%; border:1px solid var(--itso-line); background:rgba(255,255,255,.018); border-radius:16px; }
.itso-controls { padding:18px; display:flex; flex-direction:column; gap:16px; }
.itso-control-block { padding-bottom:16px; border-bottom:1px solid var(--itso-line); }
.itso-control-block:last-of-type { border-bottom:0; padding-bottom:0; }
.itso-section-title { font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--itso-muted); margin-bottom:9px; }
.itso-frequency-input { display:flex; align-items:baseline; gap:8px; width:100%; }
.itso-frequency-input input, .itso-frequency-b-row input { width:100%; min-width:0; border-radius:12px; padding:10px 13px; font-size:27px; outline:none; }
.itso-frequency-input span, .itso-frequency-b-row span { color:var(--itso-muted); font-size:14px; }
.itso-frequency-slider, .itso-volume-slider, .itso-frequency-b-slider, .itso-volume-b-slider, .itso-pan-b-slider { width:100%; margin:14px 0 3px; }
.itso-presets { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 15px; }
.itso-presets button, .itso-share, .itso-copy-state { border:1px solid var(--itso-line); color:var(--itso-text); background:transparent; border-radius:999px; padding:7px 10px; cursor:pointer; font-size:12px; transition:background .16s ease, border-color .16s ease, transform .16s ease; }
.itso-presets button:hover, .itso-share:hover, .itso-copy-state:hover { background:var(--itso-soft); border-color:var(--itso-line-strong); }
.itso-presets button:active, .itso-share:active, .itso-copy-state:active { transform:translateY(1px); }
.itso-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.itso-control-grid label > span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--itso-muted); margin-bottom:7px; }
.itso-waveform-select, .itso-waveform-b-select { width:100%; border-radius:10px; padding:10px 11px; }
.itso-inline-control { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.itso-volume-value, .itso-volume-b-value, .itso-pan-b-value, .itso-harmonic-value { font-size:12px; color:var(--itso-muted); min-width:42px; text-align:right; }
.itso-frequency-b-row { display:flex; align-items:center; gap:8px; }
.itso-frequency-b-row input { font-size:18px; padding:10px 12px; }
.itso-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:9px; }
.itso-actions button { border-radius:12px; padding:11px 13px; border:1px solid var(--itso-line); cursor:pointer; color:var(--itso-text); font-weight:600; }
.itso-start { background:#f7f7f7; color:#070707 !important; }
.itso-stop { background:transparent; }
.itso-share { min-width:110px; border-radius:12px !important; }
.itso-actions button:disabled { opacity:.42; cursor:not-allowed; }
.itso-share-status { min-height:18px; color:var(--itso-muted); font-size:11px; }
.itso-toggle-row { display:flex; flex-wrap:wrap; gap:16px; }
.itso-checkbox { display:flex; align-items:center; gap:8px; color:var(--itso-muted); font-size:12px; }
.itso-checkbox input { accent-color:#fff; }
.itso-b-controls { opacity:.96; }
.itso-expert { border-top:1px solid var(--itso-line); padding-top:15px; }
.itso-expert summary { cursor:pointer; color:var(--itso-text); font-size:12px; }
.itso-expert-body { margin-top:14px; }
.itso-harmonics-intro { color:var(--itso-muted); font-size:11px; line-height:1.5; margin-bottom:10px; }
.itso-harmonic-presets { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 11px; }
.itso-harmonic-presets button { border:1px solid var(--itso-line); background:transparent; color:var(--itso-text); border-radius:999px; padding:6px 9px; cursor:pointer; font-size:10px; }
.itso-harmonic-presets button:hover { background:var(--itso-soft); border-color:var(--itso-line-strong); }
.itso-harmonic-rows { display:flex; flex-direction:column; gap:2px; }
.itso-harmonic-summary { display:grid; grid-template-columns:1fr auto; gap:6px 10px; margin-top:12px; padding-top:10px; border-top:1px solid var(--itso-line); font-size:10px; color:var(--itso-muted); }
.itso-harmonic-summary strong { color:var(--itso-text); text-align:right; }
.itso-harmonic-row { display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:center; margin:8px 0; }
.itso-harmonic-row > span { color:var(--itso-text); font-size:11px; }
.itso-harmonic-row input { width:100%; }
.itso-visuals { min-width:0; max-width:100%; display:grid; grid-template-columns:1fr 1fr; gap:14px; min-height:620px; }
.itso-visual-card { min-width:0; min-height:290px; padding:12px; display:flex; flex-direction:column; overflow:hidden; }
.itso-card-head { display:flex; justify-content:space-between; align-items:center; color:var(--itso-muted); font-size:9px; letter-spacing:.16em; margin-bottom:7px; }
.itso-readout { letter-spacing:.06em; }
.itso-visual-card canvas { display:block; width:100%; max-width:100%; height:100%; min-height:220px; background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.005)); border-radius:10px; }
.itso-info-grid { min-width:0; max-width:100%; display:grid; grid-template-columns:repeat(10,1fr); margin-top:16px; overflow:hidden; }
.itso-info-grid > div { padding:12px; border-right:1px solid var(--itso-line); min-width:0; }
.itso-info-grid > div:last-child { border-right:0; }
.itso-relation-meta { display:grid; grid-template-columns:auto 1fr; gap:7px 10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--itso-line); color:var(--itso-muted); font-size:11px; }
.itso-relation-meta strong { color:var(--itso-text); text-align:right; font-size:11px; }
.itso-note-map { min-width:0; max-width:100%; display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; border:1px solid var(--itso-line); background:rgba(255,255,255,.018); border-radius:16px; overflow:hidden; }
.itso-note-map > div { padding:12px 13px; border-right:1px solid var(--itso-line); }
.itso-note-map > div:last-child { border-right:0; }
.itso-note-map span { display:block; color:var(--itso-muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
.itso-note-map strong { display:block; font-size:13px; }
.itso-harmonic-row { grid-template-columns:26px minmax(90px,1fr) auto auto; }
.itso-harmonic-frequency { color:var(--itso-muted); font-size:10px; white-space:nowrap; }
.itso-lock-ratio { align-self:end; margin-bottom:9px; }
.itso-info-grid span { display:block; color:var(--itso-muted); font-size:9px; text-transform:uppercase; letter-spacing:.10em; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itso-info-grid strong { display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itso-experiment-bar { margin-top:16px; padding:11px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.itso-experiment-label { display:block; color:var(--itso-muted); font-size:8px; letter-spacing:.16em; margin-bottom:4px; }
.itso-experiment-summary { font-size:12px; font-weight:600; }
.itso-copy-state { border-radius:10px; padding:8px 11px; }
.itso-note { margin-top:16px; padding:11px 13px; color:var(--itso-muted); font-size:11px; line-height:1.55; }
.itso-note strong { color:var(--itso-text); }
.itso-relation-map-intro { color:var(--itso-muted); font-size:10px; line-height:1.5; margin:0 0 10px; }
.itso-relation-matrix { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.itso-ratio-card { min-width:0; border:1px solid var(--itso-line); border-radius:10px; background:rgba(255,255,255,.01); color:var(--itso-text); padding:9px 8px; text-align:left; cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.itso-ratio-card:hover { background:var(--itso-soft); border-color:var(--itso-line-strong); transform:translateY(-1px); }
.itso-ratio-card.is-current { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.055); }
.itso-ratio-card > span { display:block; font-size:12px; font-weight:700; margin-bottom:5px; }
.itso-ratio-card > small,.itso-ratio-card > em { display:block; color:var(--itso-muted); font-size:9px; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itso-ratio-card > em { color:var(--itso-text); margin-top:3px; }
@media (max-width: 1080px) {
.itso-layout { grid-template-columns:1fr; }
.itso-info-grid { grid-template-columns:repeat(5,1fr); }
.itso-info-grid > div:nth-child(5n) { border-right:0; }
.itso-info-grid > div { border-bottom:1px solid var(--itso-line); }
.itso-info-grid > div:nth-last-child(-n+5) { border-bottom:0; }
}
@media (max-width: 720px) {
.itsound-oscillator { width:100%; max-width:100%; margin:16px 0; border-radius:14px; padding:13px; }
.itso-visuals { grid-template-columns:1fr; min-height:0; }
.itso-visual-card { min-height:240px; }
.itso-control-grid { grid-template-columns:1fr; }
.itso-actions { grid-template-columns:1fr 1fr; }
.itso-share { grid-column:1 / -1; }
.itso-info-grid { grid-template-columns:repeat(2,1fr); }
.itso-note-map { grid-template-columns:1fr; }
.itso-note-map > div { border-right:0; border-bottom:1px solid var(--itso-line); }
.itso-note-map > div:last-child { border-bottom:0; }
.itso-info-grid > div { border-right:1px solid var(--itso-line) !important; border-bottom:1px solid var(--itso-line); }
.itso-info-grid > div:nth-child(even) { border-right:0 !important; }
.itso-info-grid > div:nth-last-child(-n+2) { border-bottom:0; }
.itso-harmonic-row { grid-template-columns:24px minmax(60px,1fr) auto; }
.itso-relation-matrix { grid-template-columns:repeat(2,minmax(0,1fr)); }
.itso-harmonic-frequency { grid-column:2 / -1; }
.itso-relation-meta { grid-template-columns:auto 1fr; }
.itso-experiment-bar { align-items:flex-start; flex-direction:column; }
.itso-copy-state { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
.itso-visual-card canvas { opacity:.96; }
} .itso-scroll-normalized {
overflow-y: visible !important;
overflow-x: visible !important;
max-height: none !important;
height: auto !important;
min-height: 0 !important;
}
.itso-shortcode-host {
min-width: 0 !important;
max-width: 100% !important;
} .itso-studio {
margin-top:16px;
border:1px solid var(--itso-line);
border-radius:16px;
background:rgba(255,255,255,.018);
overflow:hidden;
}
.itso-studio > summary {
cursor:pointer;
list-style:none;
padding:13px 14px;
color:var(--itso-muted);
font-size:9px;
letter-spacing:.18em;
text-transform:uppercase;
border-bottom:1px solid transparent;
}
.itso-studio > summary::-webkit-details-marker { display:none; }
.itso-studio[open] > summary { border-bottom-color:var(--itso-line); color:var(--itso-text); }
.itso-studio-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
padding:12px;
}
.itso-studio-panel {
min-width:0;
border:1px solid var(--itso-line);
border-radius:13px;
background:rgba(255,255,255,.012);
padding:13px;
}
.itso-studio-title {
margin-bottom:10px;
color:var(--itso-text);
font-size:10px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
}
.itso-studio-row {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
min-width:0;
}
.itso-studio-row + .itso-studio-row { margin-top:8px; }
.itso-studio-row input[type="text"],
.itso-studio-row select,
.itso-studio-fields input[type="number"] {
min-width:0;
width:100%;
border-radius:9px;
padding:9px 10px;
border:1px solid var(--itso-line);
color:var(--itso-text);
background:var(--itso-panel);
}
.itso-studio-row input[type="text"] { flex:1 1 180px; }
.itso-saved-experiments { flex:1 1 220px; }
.itso-studio-btn {
border:1px solid var(--itso-line);
color:var(--itso-text);
background:transparent;
border-radius:9px;
padding:9px 10px;
font-size:11px;
cursor:pointer;
white-space:nowrap;
}
.itso-studio-btn:hover { background:var(--itso-soft); border-color:var(--itso-line-strong); }
.itso-studio-btn:disabled { opacity:.4; cursor:not-allowed; }
.itso-studio-status,
.itso-storage-status,
.itso-sweep-readout,
.itso-compare-result {
color:var(--itso-muted);
font-size:10px;
line-height:1.5;
}
.itso-storage-status { min-height:15px; margin-top:7px; }
.itso-compare-buttons { align-items:stretch; }
.itso-compare-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:10px;
}
.itso-compare-grid > div {
border:1px solid var(--itso-line);
border-radius:9px;
padding:9px 10px;
min-width:0;
}
.itso-compare-grid span {
display:block;
color:var(--itso-muted);
font-size:8px;
letter-spacing:.10em;
text-transform:uppercase;
margin-bottom:5px;
}
.itso-compare-grid strong {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:11px;
}
.itso-compare-result { margin-top:9px; padding-top:9px; border-top:1px solid var(--itso-line); }
.itso-studio-fields {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.itso-studio-fields label { min-width:0; }
.itso-studio-fields label > span {
display:block;
margin-bottom:6px;
color:var(--itso-muted);
font-size:8px;
letter-spacing:.10em;
text-transform:uppercase;
}
.itso-sweep-readout { margin-left:auto; }
.itso-sequence-list {
display:flex;
flex-direction:column;
gap:6px;
max-height:180px;
overflow:auto;
margin-top:10px;
padding-right:3px;
color:var(--itso-muted);
font-size:10px;
}
.itso-sequence-item {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
align-items:center;
border:1px solid var(--itso-line);
border-radius:8px;
padding:7px 8px;
background:rgba(255,255,255,.01);
}
.itso-sequence-item span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.itso-sequence-remove {
width:24px;
height:24px;
border-radius:7px;
border:1px solid var(--itso-line);
background:transparent;
color:var(--itso-muted);
cursor:pointer;
}
.itso-sequence-remove:hover { color:var(--itso-text); background:var(--itso-soft); }
@media (max-width: 860px) {
.itso-studio-grid { grid-template-columns:1fr; }
.itso-studio-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
.itso-studio-fields { grid-template-columns:1fr 1fr; }
.itso-compare-grid { grid-template-columns:1fr; }
.itso-sweep-readout { margin-left:0; width:100%; }
} .itso-observatory-card { min-height:310px; }
.itso-observatory-span { grid-column:1 / -1; }
.itso-observatory-card canvas { min-height:250px; }
.itso-observatory {
margin-top:16px;
border:1px solid var(--itso-line);
border-radius:16px;
background:rgba(255,255,255,.018);
overflow:hidden;
}
.itso-observatory > summary {
cursor:pointer;
list-style:none;
padding:13px 14px;
color:var(--itso-muted);
font-size:9px;
letter-spacing:.18em;
text-transform:uppercase;
}
.itso-observatory > summary::-webkit-details-marker { display:none; }
.itso-observatory[open] > summary { border-bottom:1px solid var(--itso-line); color:var(--itso-text); }
.itso-observatory-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
padding:12px;
}
.itso-observatory-panel {
min-width:0;
border:1px solid var(--itso-line);
border-radius:13px;
background:rgba(255,255,255,.012);
padding:13px;
}
.itso-map-panel { grid-column:1 / -1; }
.itso-observatory-stats {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin-bottom:10px;
}
.itso-observatory-stats > div {
padding:9px 10px;
border:1px solid var(--itso-line);
border-radius:10px;
background:rgba(255,255,255,.01);
min-width:0;
}
.itso-observatory-stats span,
.itso-compare-grid span { display:block; color:var(--itso-muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.itso-observatory-stats strong { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itso-observatory-status { color:var(--itso-muted); font-size:10px; line-height:1.45; }
.itso-observation-list,
.itso-frequency-map-list {
display:flex;
flex-direction:column;
gap:6px;
margin-top:10px;
max-height:270px;
overflow:auto;
}
.itso-observation-item,
.itso-map-item {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:9px 10px;
border:1px solid var(--itso-line);
border-radius:10px;
background:rgba(255,255,255,.01);
min-width:0;
}
.itso-observation-main,
.itso-map-item > div:first-child { min-width:0; flex:1 1 auto; }
.itso-observation-main strong,
.itso-map-item strong { display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itso-observation-main small,
.itso-map-item small { display:block; color:var(--itso-muted); font-size:9px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itso-observation-actions,
.itso-map-actions { display:flex; gap:6px; flex:0 0 auto; }
.itso-observation-actions .itso-studio-btn,
.itso-map-actions .itso-studio-btn { padding:7px 9px; font-size:10px; }
.itso-observatory .itso-studio-row input[type="number"] { flex:0 1 150px; min-width:90px; width:auto; }
.itso-observatory .itso-map-label { flex:1 1 180px; }
.itso-observatory .itso-map-frequency { flex:0 1 130px; }
@media (max-width: 1080px) {
.itso-observatory-span { grid-column:auto; }
}
@media (max-width: 720px) {
.itso-observatory-grid { grid-template-columns:1fr; }
.itso-map-panel { grid-column:auto; }
.itso-observatory-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.itso-observation-item,
.itso-map-item { align-items:flex-start; }
.itso-observation-actions,
.itso-map-actions { flex-wrap:wrap; justify-content:flex-end; }
.itso-observatory .itso-studio-row input[type="number"],
.itso-observatory .itso-map-frequency,
.itso-observatory .itso-map-label { width:100%; flex:1 1 100%; }
.itso-observatory-card canvas { min-height:220px; }
} .itsound-oscillator { position:relative; isolation:isolate; }
.itsound-oscillator::before {
content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
background:radial-gradient(circle at 10% 90%, rgba(255,255,255,.025), transparent 26%);
}
.itso-topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; padding:10px 12px; border:1px solid var(--itso-line); border-radius:14px; background:rgba(255,255,255,.018); }
.itso-status-cluster { display:flex; align-items:center; gap:8px; min-width:0; }
.itso-live-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:rgba(255,255,255,.34); box-shadow:0 0 0 0 rgba(255,255,255,0); }
.itsound-oscillator.is-running .itso-live-dot { background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.06); animation:itso-pulse 1.8s ease-in-out infinite; }
@keyframes itso-pulse { 50% { box-shadow:0 0 0 9px rgba(255,255,255,0); } }
.itso-live-label { color:var(--itso-muted); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.itso-run-state { color:var(--itso-text); font-size:10px; white-space:nowrap; }
.itso-top-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.itso-tool-btn { border:1px solid var(--itso-line); color:var(--itso-text); background:transparent; border-radius:9px; padding:7px 10px; font-size:10px; cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.itso-tool-btn:hover { background:var(--itso-soft); border-color:var(--itso-line-strong); }
.itso-tool-btn:active { transform:translateY(1px); }
.itso-tool-btn[aria-pressed="true"] { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.44); }
.itso-fullscreen { width:42px; height:42px; min-width:42px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; font-size:21px; line-height:1; }
.itso-fullscreen.is-active { background:var(--itso-soft); border-color:var(--itso-line-strong); }
.itso-master-control { margin-top:2px; padding:12px 13px; border:1px solid var(--itso-line); border-radius:12px; background:rgba(255,255,255,.018); }
.itso-control-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--itso-muted); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.itso-control-heading output { color:var(--itso-text); letter-spacing:.04em; }
.itso-master-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.itso-master-slider { width:100%; margin:10px 0 0; }
.itso-master-safe { color:var(--itso-muted); font-size:9px; white-space:nowrap; }
.itso-visual-mode { padding-top:2px; }
.itso-visual-mode-label { display:block; margin-bottom:7px; color:var(--itso-muted); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.itso-view-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.itso-view-btn { border:1px solid var(--itso-line); color:var(--itso-muted); background:transparent; border-radius:999px; padding:6px 9px; font-size:9px; cursor:pointer; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.itso-view-btn:hover { color:var(--itso-text); background:var(--itso-soft); border-color:var(--itso-line-strong); }
.itso-view-btn.is-active { color:var(--itso-text); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.42); }
.itso-visual-card.is-view-hidden { display:none; }
.itso-visual-card:fullscreen { background:#060606; border-radius:0; padding:24px; }
.itsound-oscillator:fullscreen { width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; min-height:100vh; margin:0; border:0; border-radius:0; overflow:auto; padding:clamp(16px,2.4vw,28px); background:radial-gradient(circle at 86% 5%,rgba(255,255,255,.055),transparent 28%),#060606; }
.itsound-oscillator:-webkit-full-screen { width:100vw; max-width:none; height:100vh; max-height:none; min-height:100vh; margin:0; border:0; border-radius:0; overflow:auto; padding:clamp(16px,2.4vw,28px); background:radial-gradient(circle at 86% 5%,rgba(255,255,255,.055),transparent 28%),#060606; }
.itsound-oscillator:fullscreen .itso-layout,
.itsound-oscillator:-webkit-full-screen .itso-layout { min-height:calc(100vh - 180px); }
.itsound-oscillator:fullscreen .itso-visual-card canvas,
.itsound-oscillator:-webkit-full-screen .itso-visual-card canvas { min-height:280px; }
.itso-file-actions { margin-top:8px; padding-top:8px; border-top:1px solid var(--itso-line); }
.itso-import-label { display:inline-flex; align-items:center; justify-content:center; }
.itso-import-label input { display:none; }
.itso-help { margin-top:16px; border:1px solid var(--itso-line); border-radius:16px; background:rgba(255,255,255,.018); overflow:hidden; }
.itso-help > summary { cursor:pointer; list-style:none; padding:12px 14px; color:var(--itso-muted); font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.itso-help > summary::-webkit-details-marker { display:none; }
.itso-help[open] > summary { color:var(--itso-text); border-bottom:1px solid var(--itso-line); }
.itso-help-body { padding:12px 14px 14px; color:var(--itso-muted); font-size:11px; line-height:1.55; }
.itso-help-body p { margin:0 0 8px; }
.itso-help-body p:last-child { margin-bottom:0; }
.itso-help-body strong { color:var(--itso-text); }
.itso-shortcuts { margin-top:12px !important; padding-top:10px; border-top:1px solid var(--itso-line); }
.itso-controls .itso-experimental-block .itso-b-controls { transition:opacity .18s ease; }
.itso-controls .itso-experimental-block.is-disabled .itso-b-controls { opacity:.35; }
@media (max-width: 720px) {
.itso-topbar { align-items:flex-start; flex-direction:column; }
.itso-top-actions { width:100%; justify-content:flex-start; }
.itso-tool-btn { flex:1 1 auto; }
.itso-master-row { grid-template-columns:1fr; }
.itso-master-safe { display:none; }
.itso-view-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.itso-view-btn { width:100%; }
}
@media (max-width: 420px) {
.itso-actions { grid-template-columns:1fr; }
.itso-share { grid-column:auto; }
.itso-view-buttons { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.itsound-oscillator.is-running .itso-live-dot { animation:none; }
.itso-view-btn, .itso-tool-btn { transition:none; }
}