/* The studio shares the hero's native vector drawing. */
.form-stage{mask-image:none}
.form-stage #haven-form{width:min(740px,58vw);left:76%;top:44%}
.drawing-line{opacity:.65;stroke-linecap:round;stroke-linejoin:round}
.drawing-tip{opacity:.9;stroke-linecap:round;stroke-linejoin:round}
.drawing-head{opacity:.85}
.drawing-line,.drawing-tip,.drawing-head{pointer-events:none}
.form-stage .signal-scene,.drawing-preview .signal-scene{pointer-events:auto;touch-action:none;cursor:grab!important;user-select:none}
.form-stage .signal-scene:active,.drawing-preview .signal-scene:active,.signal-scene[data-dragging=true]{cursor:grabbing!important}
.form-caption{display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:auto}
.drawing-auto,.drawing-dialog .drawing-auto{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:4px 8px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--quiet);font:400 11px/1.6 var(--font-sans);white-space:nowrap;cursor:pointer}
.drawing-auto:hover,.drawing-dialog .drawing-auto:hover{background:rgba(185,220,210,.04);border-color:var(--line);color:var(--secondary)}
.drawing-auto:focus-visible{outline:2px solid #b4d8d0;outline-offset:3px}
.drawing-auto-off,[data-drawing-auto][aria-pressed=false] .drawing-auto-on{display:none}
[data-drawing-auto][aria-pressed=false] .drawing-auto-off{display:inline}
.drawing-auto-resume{display:block;margin-top:1px;color:var(--secondary);font-size:10px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(185,220,210,.35)}
.drawing-auto-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.drawing-discovery .drawing-auto{margin-top:4px;margin-left:-8px}
.drawing-launch{display:flex;gap:10px;align-items:center}
.drawing-open{display:none;align-items:center;gap:28px;background:rgba(224,240,239,.06);border:1px solid rgba(201,223,222,.22);border-radius:7px;padding:11px 16px;font:400 12px var(--font-sans);color:var(--ink)}
.signal-ready .drawing-open{display:inline-flex}
.drawing-open:hover{background:rgba(224,240,239,.1)}
.drawing-open:focus-visible,.drawing-dialog button:focus-visible,.drawing-dialog input:focus-visible{outline:2px solid #b4d8d0;outline-offset:4px}
.drawing-open:disabled{opacity:.4}
.drawing-open,.drawing-dialog button,.drawing-dialog input{cursor:pointer}
body.drawing-studio-open{overflow:hidden}
.drawing-dialog{width:min(1080px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:28px;border:1px solid rgba(215,233,233,.16);border-radius:16px;background:#0d1318;color:var(--ink);box-shadow:0 24px 100px rgba(0,0,0,.3);overflow:auto}
.drawing-dialog::backdrop{background:rgba(4,8,10,.82)}
.drawing-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.drawing-dialog .drawing-kicker{font:400 11px/1.6 var(--font-sans);color:#95a9b2;margin:0 0 9px;letter-spacing:.025em}
.drawing-dialog h2{font:500 32px/1.15 var(--font-sans);letter-spacing:-.045em;margin:0;color:var(--ink)}
.drawing-dialog #drawing-description{font:400 13px/1.7 var(--font-sans);color:var(--secondary);margin:12px 0 0}
.drawing-dialog button{font:400 12px/1.5 var(--font-sans);background:transparent;color:var(--secondary);border:1px solid var(--line);border-radius:7px;padding:10px 13px;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap}
.drawing-dialog button:hover{color:var(--ink);border-color:rgba(215,233,233,.3);background:rgba(215,233,233,.025)}
.drawing-dialog .drawing-close{border:0;padding:6px 0;gap:16px}
.drawing-close>span:last-child{font:300 24px/1 var(--font-sans)}
.drawing-workspace{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:32px;padding-top:24px}
.drawing-canvas-column{min-width:0;display:flex;flex-direction:column;align-items:stretch;position:sticky;top:18px;align-self:start}
.drawing-preview{display:grid;place-items:center;min-width:0;background:radial-gradient(ellipse,rgba(124,170,166,.025),transparent 70%);touch-action:none;user-select:none;cursor:grab!important}
.drawing-preview:active{cursor:grabbing!important}
.drawing-preview .signal-scene{display:block;position:static!important;inset:auto!important;width:100%!important;height:auto!important;max-width:520px;aspect-ratio:8/7;transform:none!important;opacity:1!important;overflow:visible;pointer-events:auto}
.drawing-actions{display:flex;justify-content:center;gap:10px;margin-top:15px}
.drawing-settings{display:grid;align-content:start;gap:15px;min-width:0}
.drawing-presets{display:flex;gap:7px;padding-bottom:6px}
.drawing-presets button{flex:1;padding:8px 10px}
.drawing-presets button[aria-pressed=true]{background:rgba(185,220,210,.075);border-color:rgba(185,220,210,.3);color:#d9ebe5}
.drawing-discovery,.drawing-forms{grid-column:1/-1}
.drawing-dialog .drawing-random{width:100%;justify-content:space-between;color:#d9ebe5;border-color:rgba(185,220,210,.3);background:rgba(185,220,210,.055)}
.drawing-dialog .drawing-discovery .drawing-help{margin-top:9px}
.drawing-forms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.drawing-forms button{padding:8px 5px;font-size:11px;min-width:0}
.drawing-forms button[aria-pressed=true]{color:#d9ebe5;border-color:rgba(185,220,210,.4);background:rgba(185,220,210,.08)}
.drawing-slider{display:block;min-width:0}
.drawing-label{display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 12px/1.6 var(--font-sans);color:#bbc8ce;margin-bottom:8px}
.drawing-label output{color:#91a9b0;font:400 11px/1.6 var(--font-mono);white-space:nowrap}
.drawing-dialog input[type=range]{display:block;width:100%;height:16px;padding:0;margin:0;accent-color:#b6d4ca;background:transparent}
.drawing-audio{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;gap:14px;margin-top:3px}
.drawing-audio label{min-width:0;flex:1;font:400 11px var(--font-sans);color:var(--quiet)}
.drawing-audio input{margin-top:9px!important}
.sound-on{display:none}
[data-drawing-sound][aria-pressed=true] .sound-on{display:inline}
[data-drawing-sound][aria-pressed=true] .sound-off{display:none}
[data-drawing-sound][aria-pressed=true]{color:#d9ebe5;background:rgba(185,220,210,.075)}
[data-drawing-sound]:disabled{opacity:.35;cursor:default}
.drawing-dialog .drawing-audio-error{font:400 12px/1.6 var(--font-sans);color:#cdb9a6;margin:0}
.drawing-dialog .drawing-reset{justify-content:space-between;border:0;padding:6px 0;color:var(--quiet)}
.drawing-guides{opacity:.55;pointer-events:none}
.drawing-dialog button:disabled,.drawing-dialog input:disabled{opacity:.35;cursor:default}
.drawing-timeline{display:block;width:min(100%,460px);margin:22px auto 0;padding-top:18px;border-top:1px solid var(--line)}
.drawing-help{display:block;font:400 11px/1.7 var(--font-sans);color:var(--quiet);margin:8px 0 0;white-space:normal}
.drawing-dialog p.drawing-help{margin:0}
.drawing-section{border-top:1px solid var(--line);padding-top:13px;min-width:0;grid-column:1/-1}
.drawing-section summary{font:400 12px/1.6 var(--font-sans);color:#bbc8ce;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawing-section summary::-webkit-details-marker{display:none}
.drawing-section summary::after{content:'+';font:400 17px/1 var(--font-sans);color:var(--quiet)}
.drawing-section[open] summary::after{content:'−'}
.drawing-section summary:focus-visible{outline:2px solid #b4d8d0;outline-offset:5px;border-radius:2px}
.drawing-section-content{display:grid;gap:17px;padding:16px 0 2px}
[data-coupled-controls]:not([hidden]){display:grid;gap:17px}
.drawing-dialog .drawing-switch{width:100%;justify-content:space-between;text-align:left;white-space:normal}
.drawing-switch-light{display:block;flex:none;width:7px;height:7px;border:1px solid #7b9398;border-radius:50%}
.drawing-switch[aria-pressed=true] .drawing-switch-light{background:#b6d4ca;border-color:#b6d4ca}
.drawing-ratios{display:flex;gap:7px}
.drawing-ratios button{flex:1;padding:7px 8px;font:400 11px/1.6 var(--font-mono)}
.drawing-ratios button[aria-pressed=true]{background:rgba(185,220,210,.075);border-color:rgba(185,220,210,.3);color:#d9ebe5}
@media(max-width:1000px){.form-stage #haven-form{width:min(700px,68vw);left:78%}.drawing-workspace{gap:22px;grid-template-columns:minmax(0,1fr) 260px}.drawing-dialog{padding:23px}}
@media(max-width:720px){
  .form-stage #haven-form{width:min(580px,125vw);left:50%;top:67%}
  .form-caption{display:flex;right:5vw;bottom:132px;gap:2px;font-size:11px}
  .hero-bottom{flex-direction:column;align-items:stretch;gap:8px;min-height:112px;padding-block:14px}
  .hero-bottom-note{max-width:none;font-size:10px}
  .drawing-launch{justify-content:flex-end;gap:8px}
  .drawing-launch .drawing-open{gap:8px}
  .drawing-open{padding:10px 12px;gap:18px;font-size:11px}
  .drawing-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:20px;border-radius:12px}
  .drawing-header{gap:12px;padding-bottom:16px}
  .drawing-dialog h2{font-size:27px}
  .drawing-dialog #drawing-description{font-size:12px;margin-top:10px}
  .drawing-dialog .drawing-close{font-size:11px;gap:8px}
  .drawing-workspace{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:10px}
  .drawing-canvas-column{position:static}
  .drawing-timeline{margin-top:18px;padding-top:14px}
  .drawing-timeline .drawing-label{flex-direction:row;align-items:center}
  .drawing-preview{height:250px;aspect-ratio:auto}
  .drawing-preview .signal-scene{width:min(100%,285.714px)!important;max-height:none}
  .drawing-actions{margin-top:8px}
  .drawing-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 18px}
  .drawing-presets,.drawing-audio,.drawing-audio-error,.drawing-reset{grid-column:1/-1}
  .drawing-slider:last-of-type{grid-column:1/-1}
  .drawing-label{font-size:11px;gap:5px;align-items:flex-start;flex-direction:column;margin-bottom:6px}
  .drawing-label output{font-size:10px}
  .drawing-audio{margin-top:0}
}
@media(max-width:380px){.drawing-dialog{padding:16px}.drawing-dialog h2{font-size:25px}.drawing-preview{height:215px}.drawing-preview .signal-scene{width:min(100%,245.714px)!important}.drawing-settings{column-gap:14px}.drawing-dialog .drawing-close>span[data-tr],.drawing-dialog .drawing-close>span[data-en]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:380px){.drawing-launch{gap:5px}.drawing-launch .drawing-open,.drawing-launch .signal-pause{font-size:10px;padding:9px 8px;gap:5px}}
@media(prefers-reduced-motion:reduce){.drawing-open{display:inline-flex}}