@font-face { font-family:'JetBrains Mono'; src:url('../idealizador-assets/jetbrains-mono-latin-variable.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
.motor-route { height:100%; width:100%; overflow-y:auto; background:var(--theme-canvas,#000); }
.motor-page, .motor-page * { box-sizing:border-box; }
.motor-page.motor-page-complete { min-height:0; display:flex; flex-direction:column; padding-top:20px; box-sizing:border-box; }
.motor-page-complete .motor-stage { position:relative; inset:auto; flex:1; min-height:0; }
.motor-page { position:relative; height:100svh; min-height:620px; overflow:hidden; background:var(--theme-canvas,#000); color:var(--theme-text,#dff8ff); font-family:var(--ds-font,Inter,system-ui,sans-serif); }
.motor-page.motor-page-practice { height:100%; min-height:0; }
.motor-page-practice .motor-stage { inset:0 0 124px; }
.motor-page-practice .motor-controls nav:has(button:only-child) { grid-template-columns:minmax(0,1fr); }
.motor-heading { position:absolute; z-index:2; top:28px; left:32px; right:32px; display:flex; justify-content:space-between; gap:16px; font:600 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.15em; }
.motor-slash { color:var(--theme-green,#4dde1f); }
.motor-phase { color:var(--theme-cyan,#00d9ff); }
.motor-stage { position:absolute; inset:38px 0 142px; }
.motor-stage canvas { display:block; }
.motor-body-guide { position:absolute; z-index:3; left:50%; bottom:62px; transform:translateX(-50%); display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; gap:10px; width:min(46%,280px); height:48%; pointer-events:none; }
.motor-body-guide svg { display:block; width:100%; height:100%; }
.motor-body-guide-zone { fill:var(--guide-color); fill-opacity:calc(var(--guide-level,0) * .62); stroke:color-mix(in srgb,var(--guide-color) calc(var(--guide-level,0) * 100%),var(--ds-muted,#b3b3b3)); stroke-width:1.5px; vector-effect:non-scaling-stroke; }
.motor-body-guide-zone--chest { --guide-color:#ff168c; --guide-level:var(--guide-chest,0); }
.motor-body-guide-zone--ribs { --guide-color:#4dde1f; --guide-level:var(--guide-ribs,0); }
.motor-body-guide-zone--belly { --guide-color:#00d9ff; --guide-level:var(--guide-belly,0); }
.motor-body-guide-zone[data-active='false'] { fill:none; stroke:var(--guide-color); }
.motor-body-guide p { margin:0; color:var(--theme-text,#f5f7fa); font:600 10px/1.5 'JetBrains Mono',monospace; letter-spacing:.12em; text-align:center; text-transform:uppercase; white-space:nowrap; }
@media(max-width:767px) { .motor-body-guide { width:min(70%,220px); bottom:56px; } }
.motor-phase-ring { --ring-color:#4dde1f; position:absolute; z-index:3; top:16px; right:16px; width:clamp(130px,22vw,220px); max-width:calc(50% - 20px); aspect-ratio:1; pointer-events:none; color:var(--theme-text,#fafaf9); }
.motor-phase-ring svg { display:block; width:100%; height:100%; overflow:visible; }
.motor-phase-ring-track,.motor-phase-ring-progress { fill:none; stroke-width:7px; vector-effect:non-scaling-stroke; }
.motor-phase-ring-track { stroke:var(--ds-line,#333333); }
.motor-phase-ring-progress { stroke:var(--ring-color); stroke-linecap:round; }
.motor-phase-ring-readout { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; text-align:center; }
.motor-phase-ring-readout > span { display:flex; align-items:center; gap:4px; font:700 clamp(8px,.9vw,11px)/1.4 Consolas,"Cascadia Code",monospace; letter-spacing:.04em; }
.motor-phase-ring-readout i { width:5px; height:5px; border-radius:50%; background:#ff252f; }
.motor-phase-ring-readout strong { max-width:78%; font:700 28px/1.1 Arial,Helvetica,sans-serif; }
.motor-phase-ring-readout b { color:var(--ring-color); font:800 clamp(16px,1.8vw,24px)/1 Consolas,"Cascadia Code",monospace; }
@media(max-width:767px) { .motor-phase-ring { top:12px; right:12px; width:min(44%,170px); max-width:none; } .motor-phase-ring-readout strong { font-size:20px; } }
@media(min-width:768px) {
  .motor-phase-ring { right:auto; left:min(calc(50% + var(--motor-head-edge,100px) + 24px),calc(100% - clamp(130px,22vw,220px) - 16px)); }
}
.motor-page-particles .motor-stage canvas {
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%);
}
.motor-timer { position:absolute; z-index:1; left:var(--timer-x,72%); top:var(--timer-y,20%); width:var(--timer-size,120px); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; }
.motor-timer svg { display:block; width:100%; height:100%; overflow:visible; transform:rotate(90deg); }
.motor-timer circle { fill:none; stroke-width:2.5; }
.motor-timer-track { stroke:var(--theme-line,#193039); }
.motor-timer circle.motor-timer-arc { stroke:#4dde1f; stroke-width:7.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
.motor-timer[data-phase='hold-full'] circle.motor-timer-arc { stroke:#ffb020; }
.motor-timer[data-phase='exhale'] circle.motor-timer-arc { stroke:#00d9ff; }
.motor-timer[data-phase='hold-empty'] circle.motor-timer-arc { stroke:#ff4d5a; }
.motor-timer-label { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; color:var(--theme-text,#f5f7fa); font-size:clamp(16px,2vw,23px); line-height:1.2; }
.motor-timer-seconds { color:var(--theme-muted,#9ac8d2); font:400 clamp(12px,1.2vw,15px)/1.2 var(--ds-font,Inter,system-ui,sans-serif); font-variant-numeric:tabular-nums; }
.motor-page-particles .motor-timer { background: #121212; border-radius: 50%; }
.motor-page-particles .motor-timer-label { color: #fafaf9; }
.motor-page-particles .motor-timer-seconds { color: #b3b3b3; }
.motor-page-particles .motor-timer-track { stroke: #b3b3b3; }
.motor-controls { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:24px; right:24px; max-width:860px; margin:auto; }
.motor-detail { display:flex; justify-content:space-between; color:var(--theme-muted,#8caeb9); font:400 11px/1.5 'JetBrains Mono',monospace; margin-bottom:14px; }
.motor-detail span { color:var(--theme-muted,#58737e); }
.motor-page-practice .motor-detail span { color:var(--theme-text,#dff8ff); }
.motor-page-practice .motor-controls button[aria-pressed=false] span { color:var(--theme-muted,#8caeb9); }
.motor-controls nav { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; border-top:1px solid var(--theme-line,#15323b); }
.motor-controls button { min-height:54px; padding:12px; border:0; border-top:2px solid transparent; background:transparent; color:var(--theme-muted,#68828c); font:500 13px/1.5 Arial,sans-serif; cursor:pointer; transition:color .4s,background .4s; }
.motor-controls button span { margin-right:12px; font:11px 'JetBrains Mono',monospace; color:var(--theme-muted,#3c6571); }
.motor-controls button[aria-pressed=true] { border-color:#00d9ff; color:var(--theme-text,#e4faff); background:linear-gradient(#00d9ff12,transparent); }
.motor-controls button[aria-pressed=true] span { color:var(--theme-green,#4dde1f); }
.motor-controls button:focus-visible { outline:2px solid #4dde1f; outline-offset:3px; }
.motor-fallback { height:100%; display:grid; place-items:center; font-size:12px; }
.motor-fallback img { max-width:100%; height:90%; object-fit:contain; }
@media(max-width:600px){.motor-heading{top:18px;left:18px;right:18px;font-size:10px;letter-spacing:.06em}.motor-controls{left:16px;right:16px;bottom:18px}.motor-controls button{font-size:12px;padding:10px 5px}.motor-controls button span{display:block;margin:0 0 4px}.motor-detail{font-size:10px;gap:12px}.motor-detail span{text-align:right}.motor-stage{inset:46px 0 155px}}

@media(max-width:600px){.motor-controls nav{grid-template-columns:repeat(2,minmax(0,1fr))}.motor-stage{bottom:215px}.motor-detail{flex-wrap:wrap}}
@media(max-width:600px){.motor-page-practice .motor-stage{bottom:185px}.motor-page-practice .motor-controls{bottom:12px}.motor-page-practice .motor-controls:has(button:only-child){bottom:18px}.motor-page-practice .motor-stage:has(~ .motor-controls button:only-child){bottom:124px}.motor-page-practice .motor-detail{font-size:11px;line-height:1.5;color:var(--theme-text,#bdd3dc)}.motor-page-practice .motor-detail span{color:var(--theme-text,#dff8ff)}}

.motor-duration-controls { position:relative; flex-shrink:0; padding:8px 20px max(14px,env(safe-area-inset-bottom)); font-family:var(--ds-font,Inter,system-ui,sans-serif); }
.motor-duration-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:min(928px,100%); margin-inline:auto; }
.motor-duration-card { box-sizing:border-box; padding:4px 6px; background:var(--theme-canvas,#080d11); border:1px solid var(--theme-line,#1c2c34); border-radius:7px; }
.motor-duration-card label { display:block; margin-bottom:4px; line-height:1.2; color:var(--theme-green,#4dde1f); text-transform:uppercase; font-size:12px; font-weight:700; }
.motor-duration-card:nth-child(even) label { color:var(--theme-cyan,#00d9ff); }
.motor-duration-stepper { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.motor-duration-stepper button { flex:0 0 44px; width:44px; height:44px; border:1px solid var(--theme-line,#27363e); border-radius:5px; background:var(--theme-surface,#0b1117); color:var(--theme-text,#f5f7fa); font-size:20px; cursor:pointer; }
.motor-duration-stepper button:hover { border-color:#00d9ff; }
.motor-duration-stepper button:focus-visible { outline:2px solid #4dde1f; outline-offset:2px; }
.motor-duration-stepper button:disabled { opacity:.3; cursor:default; }
.motor-duration-stepper output { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.motor-duration-stepper small { margin-left:3px; font-size:12px; color:var(--theme-muted,#91a4bd); }
.motor-duration-controls p { margin:9px 0 0; color:var(--theme-muted,#91a4bd); font-size:12px; line-height:1.5; text-align:center; }
@media(max-width:600px){.motor-duration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.motor-duration-controls{padding-inline:12px}.motor-duration-card{padding:8px 6px}.motor-duration-stepper{gap:3px}}

.breathing-practice { display:flex; flex-direction:column; height:100%; min-height:0; color:var(--theme-text,#fafaf9); background:var(--theme-canvas,#000); font-family:"Arial Narrow","Roboto Condensed","Segoe UI",sans-serif; }
.breathing-practice-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 20px; border-bottom:1px solid var(--theme-line,#1c2c34); }
.breathing-practice-header h1 { margin:0; font-size:clamp(19px,2.5vw,26px); line-height:1.1; }
.breathing-practice button { min-height:44px; padding:10px 14px; color:var(--theme-text,#fafaf9); border:1px solid var(--theme-line,#31454f); border-radius:10px; background:var(--theme-surface,#0b1118); cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; line-height:1.2; }
.breathing-practice button:hover { border-color:#4dde1f; }
.breathing-practice button:focus-visible { outline:2px solid #4dde1f; outline-offset:3px; }
.breathing-practice-stage { flex:1; min-height:0; }
.breathing-practice-footer { display:flex; align-items:center; gap:16px; padding:12px 20px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--theme-line,#1c2c34); background:var(--ds-canvas,#000000); }
.breathing-practice-footer progress { flex:1; min-width:0; height:6px; border:0; border-radius:3px; accent-color:#4dde1f; background:var(--theme-surface,#1c2c34); }
.breathing-practice-footer progress::-webkit-progress-bar { background:var(--theme-surface,#1c2c34); border-radius:3px; }
.breathing-practice-footer progress::-webkit-progress-value { background:#4dde1f; border-radius:3px; }
.breathing-practice-footer time { color:var(--ds-text,#f5f7fa); font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:13px; font-variant-numeric:tabular-nums; }
@media(max-width:420px) { .breathing-practice-header { padding:10px 12px; gap:8px; } .breathing-practice-header h1 { max-width:12ch; } .breathing-practice-footer { padding-inline:12px; gap:10px; } .breathing-practice button { padding:10px; font-size:13px; } }

.breathing-practice--anatomical .breathing-practice-header h1 { flex:1; min-width:0; max-width:none; font-family:var(--ds-font); font-size:12px; font-weight:400; line-height:normal; letter-spacing:.96px; text-transform:uppercase; }
.breathing-practice--anatomical .breathing-practice-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.breathing-practice--anatomical .breathing-practice-actions .app-theme-toggle--inline,
.breathing-practice--anatomical .breathing-practice-actions .breathing-practice-settings,
html:root body .breathing-practice--anatomical .breathing-practice-actions .breathing-practice-close { display:grid; place-items:center; width:41.8px; height:41.8px; min-height:41.8px; padding:0; border-radius:50%; background:var(--ds-surface); }
.breathing-practice--anatomical .breathing-practice-actions .breathing-practice-settings { border-color:var(--ds-line); color:var(--ds-text); font-size:16px; }
.breathing-settings-dialog { width:min(360px,calc(100vw - 40px)); box-sizing:border-box; padding:0; border:1px solid var(--ds-line); border-radius:12px; background:var(--ds-surface); color:var(--ds-text); font-family:var(--ds-font); }
.breathing-settings-dialog::backdrop { background:rgba(0,0,0,.65); }
.breathing-settings-content { padding:20px; }
.breathing-settings-content header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.breathing-settings-content h2 { margin:0; font-size:20px; }
html:root body .breathing-settings-content header button { width:44px; height:44px; padding:0; border-radius:50%; color:var(--ds-error); }
.breathing-settings-content label { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; cursor:pointer; font-size:14px; }
.breathing-settings-content input { width:22px; height:22px; margin:0; flex-shrink:0; accent-color:var(--ds-action); cursor:pointer; }
.breathing-settings-content input:focus-visible { outline:2px solid var(--ds-action); outline-offset:4px; }
.breathing-practice--anatomical .breathing-practice-actions .app-theme-toggle--inline { border-color:var(--ds-line); color:var(--ds-text); }
.breathing-practice--anatomical .breathing-practice-actions .app-theme-toggle--inline:hover { border-color:var(--ds-action); }
.breathing-practice--anatomical .breathing-practice-actions .breathing-practice-close { border-color:color-mix(in srgb,var(--ds-error) 25%,var(--ds-line)); color:var(--ds-error); font:400 16px/18px var(--ds-font); }
.breathing-practice--anatomical .breathing-practice-actions .breathing-practice-close:hover { border-color:var(--ds-error); }

html:root body .breathing-practice--anatomical .breathing-practice-header { height:48px; flex-shrink:0; box-sizing:border-box; padding:0 16px; }
html:root body .breathing-practice--anatomical .breathing-practice-header h1 { font-family:var(--ds-font); font-size:12px; font-weight:400; line-height:normal; letter-spacing:.96px; text-transform:uppercase; }
html:root body .breathing-practice--anatomical .breathing-practice-footer { height:48px; flex-shrink:0; box-sizing:border-box; gap:12px; padding:3px 12px; border-top:0; }
html:root body .breathing-practice--anatomical .breathing-playback { display:grid; place-items:center; width:42px; height:42px; min-height:42px; flex-shrink:0; box-sizing:border-box; padding:0; border-radius:8px; background:var(--ds-surface); font:400 12px var(--ds-font); }
html:root body .breathing-practice--anatomical time { font:400 12px var(--ds-font); letter-spacing:.46px; }
.breathing-progress { flex:1; height:5px; border-radius:99px; background:color-mix(in srgb,var(--ds-text) 8%,transparent); overflow:hidden; }
.breathing-progress > div { height:100%; border-radius:99px; background:linear-gradient(90deg,#00d9ff,#4dde1f); }
.breathing-practice--anatomical .motor-page-no-controls .motor-stage { bottom:0; }

.breathing-practice--anatomical .motor-detail { display:none; }

html:root body .breathing-practice--anatomical .motor-page-phase-controls { display:flex; flex-direction:column; }
html:root body .breathing-practice--anatomical .motor-page-phase-controls .motor-stage { position:relative; inset:auto; flex:1; min-height:0; }
html:root body .breathing-practice--anatomical .motor-page-phase-controls .motor-controls { position:relative; inset:auto; flex-shrink:0; margin:12px 12px 8px; }
.motor-pattern-dropdown { position:relative; z-index:5; }
html:root body .breathing-practice--anatomical .motor-pattern-select { position:relative; box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:8px 32px; border:1px solid var(--ds-line); border-radius:4px; background:var(--ds-raised); color:var(--ds-text); font:400 14px var(--ds-font); text-align:center; }
.motor-pattern-select svg { position:absolute; right:8px; top:50%; transform:translateY(-50%); }
html:root body .breathing-practice--anatomical .motor-pattern-select:focus-visible { outline:2px solid var(--ds-focus); outline-offset:2px; }
.motor-pattern-options { position:absolute; left:0; right:0; bottom:calc(100% + 4px); padding:4px; border:1px solid var(--ds-line); border-radius:4px; background:var(--ds-raised); }
html:root body .breathing-practice--anatomical .motor-pattern-options button { display:block; width:100%; min-height:36px; padding:8px; border:0; border-radius:3px; background:var(--ds-raised); color:var(--ds-text); font:400 14px var(--ds-font); text-align:center; }
html:root body .breathing-practice--anatomical .motor-pattern-options button[aria-selected="true"] { background:var(--ds-action); color:var(--ds-on-action); }
html:root body .breathing-practice--anatomical .motor-pattern-options button:focus-visible { outline:2px solid var(--ds-focus); outline-offset:-2px; }
html:root body .breathing-practice--anatomical .motor-duration-controls { padding:6px 12px 0; }
html:root body .breathing-practice--anatomical .motor-duration-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
html:root body .breathing-practice--anatomical .motor-duration-card { padding:5px; border-radius:7px; background:var(--ds-surface); border-color:var(--ds-line); }
html:root body .breathing-practice--anatomical .motor-duration-card label { margin-bottom:2px; font:700 10.45px/12.54px Consolas,"Cascadia Code",monospace; color:#4dde1f; white-space:nowrap; }
html:root body .breathing-practice--anatomical .motor-duration-card:nth-child(2) label { color:#ffb020; }
html:root body .breathing-practice--anatomical .motor-duration-card:nth-child(3) label { color:#00d9ff; }
html:root body .breathing-practice--anatomical .motor-duration-card:nth-child(4) label { color:#ff4d5a; }
html:root body .breathing-practice--anatomical .motor-duration-stepper { gap:6px; }
html:root body .breathing-practice--anatomical .motor-duration-stepper button { flex:0 0 24px; width:24px; height:24px; min-height:24px; padding:0; border-radius:5px; border-color:var(--ds-line); background:var(--ds-raised); color:var(--ds-text); font:400 14px/14px Arial,sans-serif; }
html:root body .breathing-practice--anatomical .motor-duration-stepper output { flex:1; min-width:0; text-align:center; color:var(--ds-text); font:800 19px/19px Consolas,"Cascadia Code",monospace; }
html:root body .breathing-practice--anatomical .motor-duration-stepper small { margin-left:3px; color:inherit; font-size:8px; font-weight:800; }
html:root body .breathing-practice--anatomical .motor-duration-controls p { margin:4px 0 0; color:var(--ds-muted); font:700 8px/9.6px Consolas,"Cascadia Code",monospace; }
@media(max-width:800px) {
  html:root body .breathing-practice--anatomical .motor-duration-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  html:root body .breathing-practice--anatomical .motor-duration-card { padding:3px; }
  html:root body .breathing-practice--anatomical .motor-duration-card label { margin-bottom:1px; font-size:8px; line-height:8.8px; }
  html:root body .breathing-practice--anatomical .motor-duration-stepper { gap:2px; }
  html:root body .breathing-practice--anatomical .motor-duration-stepper button { flex-basis:17px; width:17px; min-width:17px; height:17px; min-height:17px; font-size:12px; line-height:12px; }
  html:root body .breathing-practice--anatomical .motor-duration-stepper output { font-size:12px; line-height:12px; }
  html:root body .breathing-practice--anatomical .motor-duration-stepper small { font-size:7px; }
}

html:root body .breathing-practice[data-controls-visible="false"] :is(.breathing-practice-header, .breathing-practice-footer, .motor-controls, .motor-duration-controls) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}