/* The PHON window, recreated in HTML and CSS. Extracted from phon.html on
   2026-09-16: the same block was inline in phon.html and fr/phon.html,
   byte for byte, and was about to be copied into the two home pages as
   well. One file now, four pages. */
    .phon[data-theme="ableton"]{--bg:#343434;--meter-bg:#0f0f0f;--accent:#ffad56;--accent2:#ffad56;--off:#171717;--hover:#242424;--danger:#e76942;--txt:#d8d8d8;--txt2:#b7b7b7;--txt3:#868686;--m-low:#00f758;--m-mid:#00f758;--m-high:#ffd100;--m-clip:#ff0a0a;--track:#0f0f0f;--fill:#03c3d5;--thumb:#d8d8d8;--line:#1d1d1d;--line2:#1d1d1d;--ink-a:#000000;--ink-b:#000000;--ink-danger:#000000;--gutter:#181818;--band:#4c4c4c;--rule:#1d1d1d;--footbg:#282828;--press:.8}
.phon[data-theme="logic"]{--bg:#575757;--meter-bg:#393939;--accent:#266eb7;--accent2:#266eb7;--off:#666666;--hover:#737373;--danger:#ff3b30;--txt:#ffffff;--txt2:#bcbcbc;--txt3:#aaaaaa;--m-low:#4bd965;--m-mid:#4bd965;--m-high:#ffd204;--m-clip:#ff9500;--track:#3f3f3f;--fill:#74c1ff;--thumb:#adadad;--line:#474747;--line2:#474747;--ink-a:#ffffff;--ink-b:#ffffff;--ink-danger:#000000;--gutter:#282828;--band:#737373;--rule:#474747;--footbg:#434343;--press:.8}
.phon[data-theme="protools"]{--bg:#2f2f2f;--meter-bg:#000000;--accent:#1e6e99;--accent2:#38d177;--off:#5b5b5b;--hover:#6b6b6b;--danger:#e32115;--txt:#ebebeb;--txt2:#b3b3b3;--txt3:#9e9e9e;--m-low:#23a101;--m-mid:#61ff02;--m-high:#fbb203;--m-clip:#ff0000;--track:#000000;--fill:#6acd80;--thumb:#c3c3c3;--line:#000000;--line2:#212121;--ink-a:#ffffff;--ink-b:#000000;--ink-danger:#ffffff;--gutter:#161616;--band:#393939;--rule:#000000;--footbg:#242424;--press:.8}
.phon[data-theme="cubase"]{--bg:#252829;--meter-bg:#000000;--accent:#9c9e9e;--accent2:#ef9538;--off:#2f3233;--hover:#464849;--danger:#ff162d;--txt:#f0f0f0;--txt2:#c7c7c9;--txt3:#737475;--m-low:#21e4db;--m-mid:#2bf3b3;--m-high:#30fb9e;--m-clip:#fec419;--track:#454647;--fill:#b2b2b3;--thumb:#f2f2f4;--line:#1b1d1e;--line2:#1b1d1e;--ink-a:#000000;--ink-b:#000000;--ink-danger:#000000;--gutter:#111213;--band:#656768;--rule:#1b1d1e;--footbg:#1c1e1f;--press:.8}
.phon[data-theme="flstudio"]{--bg:#3e4e55;--meter-bg:#202f36;--accent:#c3ff5a;--accent2:#ffaa54;--off:#3c4348;--hover:#48575e;--danger:#ff6135;--txt:#e7eef2;--txt2:#98a6ab;--txt3:#8e9ca3;--m-low:#9bfc38;--m-mid:#bffd4d;--m-high:#ffdd46;--m-clip:#ff8d3e;--track:#2f363b;--fill:#87d650;--thumb:#bfc5cf;--line:#2b353b;--line2:#2b353b;--ink-a:#000000;--ink-b:#000000;--ink-danger:#000000;--gutter:#1c2427;--band:#48575e;--rule:#2b353b;--footbg:#303c41;--press:.8}
.phon[data-theme="reaper"]{--bg:#333333;--meter-bg:#262626;--accent:#1abc98;--accent2:#2d4f47;--off:#2e3131;--hover:#434343;--danger:#bf4c41;--txt:#c8c8c8;--txt2:#969696;--txt3:#7c7c7c;--m-low:#00fe95;--m-mid:#00fe95;--m-high:#00fe95;--m-clip:#fe004c;--track:#131313;--fill:#993456;--thumb:#aeacaf;--line:#232323;--line2:#232323;--ink-a:#000000;--ink-b:#ffffff;--ink-danger:#ffffff;--gutter:#181818;--band:#262626;--rule:#232323;--footbg:#272727;--press:.8}
.phon[data-theme="dark"]{--bg:#0d0d0d;--meter-bg:#000000;--accent:#ffffff;--accent2:#ffffff;--off:#333333;--hover:#444444;--danger:#ff4444;--txt:#ffffff;--txt2:#aaaaaa;--txt3:#666666;--m-low:#00ff88;--m-mid:#ffee00;--m-high:#ff8844;--m-clip:#ff0000;--track:#404040;--fill:#ffffff;--thumb:#cccccc;--line:#222222;--line2:#444444;--ink-a:#000000;--ink-b:#000000;--ink-danger:#000000;--gutter:#060606;--band:#1e1e1e;--rule:#2a2a2a;--footbg:#0a0a0a;--press:.8}
.phon[data-theme="light"]{--bg:#f0ebe6;--meter-bg:#d5d0cb;--accent:#5a5550;--accent2:#706b66;--off:#e0dbd6;--hover:#d5d0cb;--danger:#aa6666;--txt:#2a2520;--txt2:#4a4540;--txt3:#8a8580;--m-low:#b0aba6;--m-mid:#7a7570;--m-high:#5a5550;--m-clip:#3a3530;--track:#e5e0db;--fill:#6a6560;--thumb:#8a8580;--line:#c5c0bb;--line2:#dad5d0;--ink-a:#ffffff;--ink-b:#ffffff;--ink-danger:#000000;--gutter:#e6e2dd;--band:#e4dfda;--rule:#d8d4cf;--footbg:#e6e2dd;--press:.95}
.phon[data-theme="white"]{--bg:#ffffff;--meter-bg:#e4e4e9;--accent:#33333a;--accent2:#5c5c66;--off:#eaeaee;--hover:#dedee4;--danger:#b3453c;--txt:#17171a;--txt2:#474751;--txt3:#6f6f7a;--m-low:#9aa0a8;--m-mid:#6c727a;--m-high:#41464d;--m-clip:#b3453c;--track:#e2e2e8;--fill:#474751;--thumb:#2b2b31;--line:#cdcdd5;--line2:#e6e6eb;--ink-a:#ffffff;--ink-b:#ffffff;--ink-danger:#ffffff;--gutter:#f5f5f5;--band:#f2f2f2;--rule:#e6e6e6;--footbg:#f5f5f5;--press:.95}
@font-face{font-family:"PHON Roboto";src:url(/css/fonts/roboto-medium-phon.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
.phon{position:relative;width:204px;height:900px;background:var(--bg);color:var(--txt);border-radius:10px;overflow:hidden;line-height:1;
  font-family:"PHON Roboto",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:500;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.phon *{box-sizing:border-box}
.phon button{font-family:inherit;font-weight:500;margin:0}
.p-btn{position:absolute;border:0;border-radius:6px;padding:0;cursor:pointer;background:var(--off);color:var(--txt);font-size:10.2px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line2) 50%,transparent)}
.p-btn:hover{background:var(--hover)}
.p-btn:active{filter:brightness(var(--press))}
.p-btn.is-on{box-shadow:none}
.p-btn.is-on.lit-a{background:var(--accent);color:var(--ink-a)}
.p-btn.is-on.lit-b{background:var(--accent2);color:var(--ink-b)}
.p-btn.is-on.lit-danger{background:var(--danger);color:var(--ink-danger)}
.phon[data-lc] .p-btn[data-lc]:not(.is-on),.phon[data-rt] .p-btn[data-rt]:not(.is-on){background:var(--line)}
.p-btn:disabled{opacity:.35;cursor:default;filter:none}
.p-btn:focus-visible,.p-tog:focus-visible,.p-band:focus-visible,.p-knob svg:focus-visible,.p-fhit:focus-visible,.p-rhit:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.p-corr{position:absolute;left:10px;top:5px;width:184px;height:18px}
.p-corr i{position:absolute;top:4px;width:1px;height:10px;background:var(--line2)}
.p-corr i.p-half{opacity:.5}
.p-cfill{position:absolute;top:4px;height:10px;left:92px;width:92px;background:var(--m-low)}
.p-cread{position:absolute;left:72px;top:3px;width:40px;height:12px;line-height:12px;text-align:center;font-size:8.5px;border-radius:2px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--m-low)}
.p-cread.mid{color:var(--txt)}.p-cread.bad{color:var(--m-clip)}
.p-knob{position:absolute;width:34px;height:34px}
.p-kcap{position:absolute;left:-12px;top:-12px;width:58px;height:12px;line-height:12px;text-align:center;font-size:8.5px;color:var(--txt);white-space:nowrap}
.p-knob svg{position:absolute;left:0;top:0;overflow:visible;cursor:ns-resize;touch-action:none}
.p-rbg,.p-rval{fill:none;stroke-width:3.5;stroke-linecap:round}
.p-rbg{stroke:var(--track)}
.p-knob[data-knob="input"] .p-rval{stroke:var(--accent)}
.p-knob[data-knob="pan"] .p-rval{stroke:var(--fill)}
.p-rptr{fill:var(--thumb)}
.p-rnotch{stroke:var(--line);stroke-width:1.5}
.phon .p-lock,.p-panel .p-lock{position:absolute;display:none;color:var(--txt2);pointer-events:none;line-height:0}
.phon.lock-input .p-lock-input,.phon.lock-loud .p-panel .p-lock-loud{display:block}
.p-rule{position:absolute;left:8px;top:85px;width:188px;height:1px;background:var(--rule)}
.p-cap{position:absolute;top:92px;height:18px;line-height:18px;text-align:center;font-size:10.2px;color:var(--txt2)}
.p-val{position:absolute;top:111px;height:22px;line-height:22px;text-align:center;font-size:11.9px;color:var(--txt)}
.p-val-vol.is-hot{color:#ffaa00}
.p-hdr{position:absolute;top:132px;height:10px;line-height:10px;text-align:center;font-size:7.7px;color:var(--txt3)}
.p-panel{position:absolute;left:8px;top:151px;width:188px;height:455px;background:var(--gutter)}
.p-panel i,.p-panel b,.p-panel span{position:absolute;display:block}
.p-railwrap{position:absolute;left:0;top:0;width:58px;height:455px}
.phon.comp-off .p-railwrap,.phon.comp-off .p-val-loud{opacity:.3}
.phon.lock-loud .p-railwrap .p-rtrack,.phon.lock-loud .p-railwrap .p-rfill{opacity:.5}
.p-rtrack{left:26.5px;top:16px;width:4px;height:425px;border-radius:2px;background:var(--track)}
.p-rfill{left:26.5px;bottom:14px;width:4px;border-radius:2px;background:var(--fill)}
.p-tick{height:1px;background:var(--line)}
.p-tick.major{left:20.5px;width:16px;opacity:.9}.p-tick.minor{left:23.5px;width:10px;opacity:.55}
.p-rn{left:37px;width:21px;height:9px;line-height:9px;font-size:7.7px;color:var(--txt2);opacity:.6}
.p-rn.major{color:var(--txt);opacity:.8}
.p-rhit{left:6px;top:4px;width:52px;height:450px;cursor:ns-resize;touch-action:none}
.phon.comp-off .p-rhit,.phon.lock-loud .p-rhit{cursor:default}
.p-barbg{top:10px;width:31.5px;height:436.5px;background:var(--meter-bg)}
.p-gl{left:90px;width:66px;height:1px;background:color-mix(in srgb,var(--txt) 12.5%,transparent)}
.p-gl.cal{background:color-mix(in srgb,var(--txt) 30%,transparent)}
.p-sn{height:11px;line-height:11px;font-size:9.4px;color:color-mix(in srgb,var(--txt) 75%,transparent);white-space:nowrap}
.p-sn.spl{left:58px;width:28px;text-align:right}.p-sn.fs{left:159px;width:29px;text-align:left}
.p-sn.cal{color:#ffaa00}
.p-bar{top:10px;width:31.5px;height:436.5px;overflow:hidden}
.p-bar .p-z{left:0;top:0;width:100%;height:100%;
  background:linear-gradient(to top,var(--m-low) 0 235.04px,var(--m-mid) 235.04px 315.62px,var(--m-high) 315.62px)}
.p-bar .p-z.half{background:linear-gradient(to top,color-mix(in srgb,var(--m-low) 50%,var(--meter-bg)) 0 235.04px,
  color-mix(in srgb,var(--m-mid) 50%,var(--meter-bg)) 235.04px 315.62px,color-mix(in srgb,var(--m-high) 50%,var(--meter-bg)) 315.62px)}
.phon.is-muted .p-bar .p-z{background:var(--txt3)}
.phon.is-muted .p-bar .p-z.half{background:color-mix(in srgb,var(--txt3) 50%,var(--meter-bg))}
.p-bar .p-pl{left:0;width:100%;height:2px;margin-bottom:-2px;background:color-mix(in srgb,var(--txt) 90%,transparent);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.p-chl{top:447px;width:31.5px;height:8px;line-height:8px;text-align:center;font-size:7.7px;color:var(--txt2);opacity:.8}
.p-faderwrap{position:absolute;left:0;top:0;width:188px;height:455px;pointer-events:none}
.phon.is-muted .p-ftrack,.phon.is-muted .p-ffill,.phon.is-muted .p-thumb{opacity:.3}
.p-ftrack{left:120.5px;top:35px;width:4px;height:417px;border-radius:2px;background:var(--track)}
.p-ffill{left:120.5px;bottom:3px;width:4px;border-radius:2px;background:var(--fill)}
.p-thumb{left:95.5px;width:54px;height:24px;margin-top:-12px;border-radius:12px;background:color-mix(in srgb,var(--thumb) 12%,transparent);
  box-shadow:0 2px 0 rgba(0,0,0,.2),inset 0 0 0 1px color-mix(in srgb,var(--line2) 60%,transparent)}
.p-thumb::after{content:"";position:absolute;left:20%;right:20%;top:11.5px;height:1px;background:color-mix(in srgb,var(--txt3) 50%,transparent)}
.phon.is-dragging .p-thumb,.p-fhit:hover~.p-thumb{background:color-mix(in srgb,var(--thumb) 6%,transparent)}
.p-fhit{left:90px;top:0;width:66px;height:455px;cursor:ns-resize;touch-action:none;pointer-events:auto}
.phon.is-muted .p-fhit{cursor:default}
.p-tog{position:absolute;left:66.5px;top:613.5px;width:128.5px;height:20.5px;border:0;border-radius:6px;padding:0;cursor:pointer;background:var(--off)}
.p-tog.is-abs{background:var(--hover)}
.p-tthumb{position:absolute;top:2px;bottom:2px;left:2px;width:52%;border-radius:4px;background:var(--accent2)}
.p-tog.is-abs .p-tthumb{left:calc(48% - 2px)}
.p-tlab{position:absolute;top:0;width:52%;height:100%;line-height:20.5px;text-align:center;font-size:9.4px;color:var(--txt3)}
.p-tlab.rel{left:2px}.p-tlab.abs{right:2px}
.p-tog:not(.is-abs) .p-tlab.rel,.p-tog.is-abs .p-tlab.abs{color:var(--ink-b)}
.p-band{position:absolute;left:9px;top:638.5px;width:186px;height:19.5px;border-radius:5px;background:var(--band);display:flex;cursor:pointer}
.p-band span{flex:1;text-align:center;line-height:19.5px;font-size:10.2px;color:var(--txt2);white-space:nowrap}
.p-band .p-tp.hot{color:var(--danger)}
.p-foot{position:absolute;left:0;top:875px;width:204px;height:25px;background:var(--footbg)}
.p-lic{position:absolute;left:10px;top:0;line-height:25px;font-size:7.7px;color:var(--txt)}
.p-stat{position:absolute;left:50px;top:0;width:135px;line-height:25px;text-align:center;font-size:8.5px;color:var(--txt3);white-space:nowrap}
.phon-themes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px;max-width:360px}
.phon-themes button{font:500 12px -apple-system,system-ui,sans-serif;border:1px solid #3a3a3a;background:#1f1f1f;color:#bdbdbd;border-radius:14px;padding:4px 10px;cursor:pointer}
.phon-themes button[aria-pressed="true"]{border-color:#c9a86c;color:#f5f0e6;background:#2a261e}

.phon-fit{width:calc(204px*var(--k,1));height:calc(900px*var(--k,1))}
.phon-fit .phon{transform:scale(var(--k,1));transform-origin:0 0}
.phon-themes-wrap{display:flex;justify-content:center;margin:-2rem auto 0;padding:0 1rem}