.medytacja-rezonansowa {
--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;
line-height:1.55;
text-align:left;
overflow:visible;
isolation:isolate;
overscroll-behavior:contain;
}
.medytacja-rezonansowa *,
.medytacja-rezonansowa *::before,
.medytacja-rezonansowa *::after { box-sizing:border-box; }
.medytacja-rezonansowa button,
.medytacja-rezonansowa input,
.medytacja-rezonansowa select { font:inherit; }
.medytacja-rezonansowa button { min-height:42px; }
.mr {
width:100%;
min-width:0;
max-width:100%;
color:var(--itso-text);
}
.mr-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);
}
.mr-status-cluster { display:flex;align-items:center;gap:8px;min-width:0; }
.mr-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);
}
.medytacja-rezonansowa.is-running .mr-live-dot {
background:#fff;
box-shadow:0 0 0 5px rgba(255,255,255,.06);
animation:mr-pulse 1.8s ease-in-out infinite;
}
@keyframes mr-pulse {
50% { box-shadow:0 0 0 9px rgba(255,255,255,0); }
}
.mr-live-label {
color:var(--itso-muted);
font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.mr-run-state { color:var(--itso-text);font-size:10px;white-space:nowrap; }
.mr-audio-note {
color:var(--itso-muted);
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
}
.mr-top-actions {
display:flex;
align-items:center;
justify-content:flex-end;
gap:9px;
margin-left:auto;
}
.mr-icon-button {
width:42px;
height:42px;
min-height:42px;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--itso-line);
border-radius:11px;
background:transparent;
color:var(--itso-text);
cursor:pointer;
transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.mr-icon-button:hover {
background:var(--itso-soft);
border-color:var(--itso-line-strong);
}
.mr-icon-button:active { transform:translateY(1px); }
.mr-fullscreen-button {
font-size:21px;
line-height:1;
}
.mr-fullscreen-button.is-active {
background:var(--itso-soft);
border-color:var(--itso-line-strong);
}
.medytacja-rezonansowa:fullscreen {
width:100vw;
max-width:none;
height:100vh;
height:100dvh;
max-height:none;
min-height:100vh;
margin:0;
padding:clamp(16px,2.4vw,28px);
border:0;
border-radius:0;
overflow:auto;
background:radial-gradient(circle at 86% 5%,rgba(255,255,255,.055),transparent 28%),var(--itso-bg);
}
.medytacja-rezonansowa:-webkit-full-screen {
width:100vw;
max-width:none;
height:100vh;
max-height:none;
min-height:100vh;
margin:0;
padding:clamp(16px,2.4vw,28px);
border:0;
border-radius:0;
overflow:auto;
background:radial-gradient(circle at 86% 5%,rgba(255,255,255,.055),transparent 28%),var(--itso-bg);
}
.medytacja-rezonansowa:fullscreen .mr,
.medytacja-rezonansowa:-webkit-full-screen .mr { min-height:100%; }
.mr-tabs {
display:flex;
flex-wrap:wrap;
gap:7px;
margin:0 0 14px;
}
.mr-tabs button {
flex:0 1 auto;
width:auto;
padding:8px 13px;
border:1px solid var(--itso-line);
border-radius:999px;
background:transparent;
color:var(--itso-muted);
cursor:pointer;
transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.mr-tabs button:hover {
color:var(--itso-text);
background:var(--itso-soft);
border-color:var(--itso-line-strong);
}
.mr-tabs button:active { transform:translateY(1px); }
.mr-tabs button[aria-selected="true"] {
color:#070707;
background:#f7f7f7;
border-color:#f7f7f7;
}
.mr-card,
.mr-card.mr-volume-card,
.mr-audio-card {
min-width:0;
max-width:100%;
margin-top:14px;
padding:17px;
border:1px solid var(--itso-line);
border-radius:16px;
background:rgba(255,255,255,.018);
overflow:visible;
}
.mr-card-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:7px;
}
.mr-card-kicker {
color:var(--itso-muted);
font-size:9px;
letter-spacing:.17em;
text-transform:uppercase;
}
.medytacja-rezonansowa h2 {
margin:0 0 10px;
font-size:18px;
line-height:1.25;
font-weight:600;
letter-spacing:.01em;
color:var(--itso-text);
}
.medytacja-rezonansowa h3 {
margin:16px 0 8px;
font-size:13px;
line-height:1.3;
font-weight:600;
color:var(--itso-text);
}
.mr-control-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
min-width:0;
}
.mr-field { min-width:0;display:block; }
.mr-field > span,
.mr-field > label {
display:block;
margin-bottom:7px;
color:var(--itso-muted);
font-size:9px;
letter-spacing:.12em;
text-transform:uppercase;
}
.mr-field-action { display:flex;flex-direction:column; }
.medytacja-rezonansowa select {
display:block;
width:100%;
min-width:0;
margin:0;
padding:10px 11px;
border:1px solid var(--itso-line);
border-radius:10px;
background:var(--itso-panel);
color:var(--itso-text);
outline:none;
}
.medytacja-rezonansowa input[type="range"] {
display:block;
width:100%;
margin:10px 0 2px;
accent-color:#fff;
}
.medytacja-rezonansowa input[type="checkbox"] {
accent-color:#fff;
}
.mr-check-grid {
display:flex;
flex-wrap:wrap;
gap:10px 16px;
margin-top:14px;
}
.mr-toggle {
display:flex;
align-items:flex-start;
gap:8px;
color:var(--itso-muted);
font-size:12px;
line-height:1.45;
}
.mr-toggle input { flex:0 0 auto;margin-top:3px; }
.mr-muted {
color:var(--itso-muted);
font-size:11px;
line-height:1.55;
}
.mr-help {
margin:7px 0 0;
padding-top:7px;
border-top:1px solid var(--itso-line);
}
.mr-advanced {
margin-top:10px;
padding-top:12px;
border-top:1px solid var(--itso-line);
}
.mr-adv-head {
margin-top:16px;
margin-bottom:3px;
color:var(--itso-muted);
font-size:9px;
letter-spacing:.15em;
text-transform:uppercase;
}
button.advb {
width:auto;
padding:3px 0;
border:0;
border-radius:0;
background:transparent;
color:var(--itso-text);
font-size:12px;
cursor:pointer;
text-align:left;
}
.mr-advanced.collapsed { display:none!important; }
.mr-actions {
display:grid;
grid-template-columns:1fr;
gap:9px;
}
.mr-primary,
.medytacja-rezonansowa .mr-primary {
border:1px solid #f7f7f7;
border-radius:12px;
padding:11px 13px;
background:#f7f7f7;
color:#070707;
font-weight:700;
cursor:pointer;
transition:transform .16s ease,background .16s ease;
}
.mr-primary:hover { background:#fff; }
.mr-primary:active { transform:translateY(1px); }
.mr-secondary,
.medytacja-rezonansowa .mr-secondary {
width:100%;
margin-top:10px;
padding:10px 12px;
border:1px solid var(--itso-line);
border-radius:11px;
background:transparent;
color:var(--itso-text);
cursor:pointer;
}
.mr-secondary:hover {
background:var(--itso-soft);
border-color:var(--itso-line-strong);
}
.medytacja-rezonansowa button:disabled { opacity:.42;cursor:not-allowed; }
.mr-result {
margin-top:14px;
padding-top:14px;
border-top:1px solid var(--itso-line);
}
.mr-result-note {
font-size:42px;
line-height:1.05;
font-weight:600;
}
.mr-result .mr-control-grid { margin-top:12px; }
.prompt {
margin:10px 0 13px;
padding:8px 12px;
border-left:3px solid var(--itso-line-strong);
color:var(--itso-text);
background:rgba(255,255,255,.015);
font-size:12px;
font-style:italic;
}
.bar {
width:100%;
height:5px;
margin:12px 0;
overflow:hidden;
border-radius:4px;
background:var(--itso-panel-2);
}
.bar i {
display:block;
width:0;
height:100%;
background:#fff;
}
.mr-volume-card,
.mr-audio-card { padding:13px 15px; }
.viz {
position:relative;
min-width:0;
width:100%;
min-height:540px;
margin-top:14px;
padding:24px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:20px;
overflow:hidden;
border:1px solid var(--itso-line);
border-radius:16px;
background:
radial-gradient(circle at 50% 48%,rgba(255,255,255,.045),transparent 28%),
radial-gradient(circle at 50% 50%,rgba(255,255,255,.018),transparent 52%),
#060606;
text-align:center;
}
.viz::before,
.viz::after {
content:"";
position:absolute;
inset:12%;
border:1px solid rgba(255,255,255,.025);
border-radius:50%;
pointer-events:none;
}
.viz::after { inset:24%; }
.orbst {
position:relative;
z-index:1;
width:min(70%,360px);
aspect-ratio:1;
display:flex;
align-items:center;
justify-content:center;
}
.orb {
width:100%;
height:100%;
border-radius:50%;
background:
radial-gradient(circle at 35% 32%,rgba(255,255,255,.36),rgba(255,255,255,.08) 34%,rgba(255,255,255,.025) 58%,rgba(0,0,0,.2) 72%),
#121212;
border:1px solid rgba(255,255,255,.18);
box-shadow:
0 0 45px rgba(255,255,255,.05),
inset 0 0 60px rgba(255,255,255,.03);
transform:scale(.55);
}
.orbt {
position:relative;
z-index:1;
min-height:32px;
color:var(--itso-text);
font-size:24px;
letter-spacing:.02em;
}
.sp {
position:relative;
z-index:1;
width:min(760px,100%);
}
.sp .bar { margin-bottom:7px; }
.mr-foot-note {
margin:14px 0 0;
padding:11px 13px;
border:1px solid var(--itso-line);
border-radius:12px;
background:rgba(255,255,255,.015);
}
.mr-disclaimer {
margin-top:10px;
padding:10px 13px;
color:var(--itso-muted);
font-size:10px;
line-height:1.55;
}
.mr-disclaimer strong { color:var(--itso-text); }
.mr-loading {
display:flex;
align-items:center;
gap:9px;
padding:12px 0;
color:var(--itso-muted);
font-size:10px;
letter-spacing:.12em;
text-transform:uppercase;
}
.mr-loading-dot {
width:7px;height:7px;border-radius:50%;
background:#fff;
animation:mr-pulse 1.4s ease-in-out infinite;
}
.mr-loading-overlay { display:none!important; }
.mr-init-error {
margin-top:14px;
padding:13px;
border:1px solid rgba(255,255,255,.16);
border-radius:12px;
color:#f0c6bb;
background:rgba(255,255,255,.025);
font-size:12px;
}
.mr-noscript {
margin:12px 0 0;
padding:12px;
border:1px solid var(--itso-line);
border-radius:12px;
color:var(--itso-muted);
font-size:12px;
}
.tabhide,
.hide { display:none!important; }
.medytacja-rezonansowa button:focus-visible,
.medytacja-rezonansowa select:focus-visible,
.medytacja-rezonansowa input:focus-visible {
outline:2px solid #fff;
outline-offset:2px;
}
@media (max-width:900px) {
.mr-control-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
.medytacja-rezonansowa {
margin:20px 0;
padding:14px;
border-radius:16px;
}
.medytacja-rezonansowa:fullscreen,
.medytacja-rezonansowa:-webkit-full-screen {
padding:13px;
}
.mr-topbar {
align-items:flex-start;
flex-direction:column;
}
.mr-top-actions {
width:100%;
justify-content:space-between;
}
.mr-tabs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
.mr-tabs button { width:100%; }
.viz {
min-height:440px;
padding:18px;
}
.orbst { width:min(78%,300px); }
.mr-result-note { font-size:36px; }
}
@media (max-width:420px) {
.mr-tabs { grid-template-columns:1fr 1fr; }
.mr-card { padding:14px; }
.mr-audio-note { display:none; }
}
@media (prefers-reduced-motion:reduce) {
.medytacja-rezonansowa.is-running .mr-live-dot,
.mr-loading-dot { animation:none; }
.mr-tabs button,
.mr-primary,
.mr-secondary { transition:none; }
}