.suites-page{--suite-slate: #1c2834;--suite-ivory: #e3e2dc;--suite-cyan: #8ebdc5;--suite-gold: #c5aa79;--suite-muted: #a9b5bd;--suite-line: #71818c;color:var(--suite-ivory);width:100%;min-width:0}.suites-page *,.suites-page *:before,.suites-page *:after{box-sizing:border-box}.suites-intro{width:min(100%,1240px);margin:0 auto clamp(20px,4vw,38px)}.suites-kicker{margin:0 0 8px;color:var(--suite-cyan);font-size:12px;letter-spacing:.16em;text-transform:uppercase}.suites-intro h1{margin:0 0 12px;color:var(--suite-ivory);font-size:clamp(30px,5vw,48px);line-height:1.05}.suites-description{max-width:850px;margin:0;color:var(--suite-muted);font-size:16px;line-height:1.65}.suite-app{position:relative;display:grid;grid-template-columns:minmax(255px,.78fr) minmax(0,1.22fr);grid-template-areas:"controls stage";gap:clamp(16px,2.5vw,30px);width:min(100%,1240px);min-width:0;margin-inline:auto;color:var(--suite-ivory)}.suite-app>.suite-side,.suite-app>.suite-stage{width:auto;max-width:none;padding:0}.suite-app .suite-side{grid-area:controls;min-width:0}.suite-app .suite-controls{min-width:0;padding:clamp(16px,2.2vw,24px);border:1px solid #8ebdc52c;border-radius:8px;background:#1c2834}.suite-app .suite-controls>label{display:block;margin:14px 0 6px;color:var(--suite-ivory);font-size:16px;font-weight:600}.suite-app .suite-controls>label:first-child{margin-top:0}.suite-app .suite-mf{display:block;width:100%;min-width:0;min-height:48px;padding:7px 10px;border:1px solid #8ebdc569;border-radius:5px;background:#121b24;color:var(--suite-ivory);font-size:18px;--caret-color: var(--suite-gold);--selection-background-color: #8ebdc54a;--contains-highlight-background-color: #c5aa7930}.suite-app .suite-mf:focus-within{border-color:var(--suite-cyan);outline:2px solid #8ebdc555;outline-offset:2px}.suite-app .suite-error{min-height:1.4em;margin-top:6px;color:#f0a59a;font-size:14px;line-height:1.4}.suite-app .suite-controls input[type=range]{display:block;width:100%;min-height:32px;margin:4px 0;accent-color:var(--suite-cyan)}.suite-app .suite-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.suite-app .suite-buttons .suite-button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;padding:8px 12px;border:1px solid #8ebdc56b;border-radius:5px;background:#263643;color:var(--suite-ivory);font:inherit;font-size:15px;line-height:1.2;cursor:pointer;transition:background-color .16s ease,border-color .16s ease}.suite-app .suite-buttons .suite-button:hover{border-color:var(--suite-cyan);background:#304450}.suite-app .suite-button:focus-visible,.suite-app .suite-controls input:focus-visible,.suite-app #suite-canvas:focus-visible{outline:2px solid var(--suite-gold);outline-offset:3px}.suite-app .suite-check{display:flex;align-items:flex-start;gap:9px;margin-top:13px;color:var(--suite-muted);font-size:15px;line-height:1.4}.suite-app .suite-check input{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;accent-color:var(--suite-cyan)}.suite-app .suite-check label{cursor:pointer}.suite-app .suite-terms{max-height:180px;overflow:auto;margin-top:15px;padding-top:12px;border-top:1px solid #8ebdc52c;color:var(--suite-ivory);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.suite-app .suite-stage{grid-area:stage;min-width:0;align-self:start}.suite-app #suite-canvas{display:block;width:min(100%,76vh);max-width:100%;aspect-ratio:1 / 1;margin-inline:auto;border:1px solid #8ebdc555;border-radius:8px;background:var(--suite-slate);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.suite-app #suite-canvas:active{cursor:grabbing}.suite-app .suite-hint{min-height:1.4em;margin:8px 0 0;color:var(--suite-muted);font-size:14px;line-height:1.45}.suite-app #suite-kbd{position:fixed;z-index:2100;right:0;bottom:0;left:0;height:0;pointer-events:none}.suite-app #suite-kbd .ML__keyboard{overflow:visible;pointer-events:auto}.suite-app #suite-kbd .ML__keyboard{--keyboard-zindex: 2100;--keyboard-accent-color: var(--suite-cyan);--keyboard-toolbar-text: var(--suite-ivory);--keyboard-toolbar-text-active: var(--suite-gold)}.suite-app.suite-full{position:fixed;z-index:2000;inset:0;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;width:100%;max-width:none;margin:0;padding:16px;overflow:auto;background:var(--suite-slate)}.suite-app.suite-full .suite-side{min-height:0;overflow:auto}.suite-app.suite-full .suite-controls{margin-bottom:0}.suite-app.suite-full .suite-stage{display:flex;min-height:0;flex-direction:column}.suite-app.suite-full #suite-canvas{width:100%;max-height:100%;flex:1 1 auto;aspect-ratio:auto}.suite-app.suite-full .suite-hint{flex:0 0 auto}.suite-app.suite-full #suite-kbd{position:absolute;inset:auto 0 0}@media(max-width:760px){.suite-app{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "controls";gap:14px}.suite-app #suite-canvas{width:min(100%,76vh)}.suite-app.suite-full{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "controls";grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:10px;overflow:hidden}.suite-app.suite-full .suite-side{max-height:42vh}.suite-app.suite-full .suite-stage{grid-row:1}.suite-app.suite-full #suite-canvas{width:auto;height:100%;max-width:100%;aspect-ratio:1 / 1;margin:0 auto}}@media(max-width:380px){.suite-app .suite-controls{padding:14px}.suite-app .suite-buttons .suite-button{padding-inline:9px;font-size:14px}}@media(prefers-reduced-motion:reduce){.suite-app .suite-buttons .suite-button{transition:none}}