@layer cs.components{.sc-hero__img{inline-size:150px}@media (width<=639px){.sc-hero{grid-template-columns:minmax(0,1fr)}.sc-hero__img{display:none}}.sc-panel{border:var(--cs-size-border) solid var(--cs-line);border-radius:var(--cs-radius-panel);background:var(--cs-bg);box-shadow:var(--cs-shadow-card);grid-template-columns:minmax(0,1fr);gap:24px;margin-block-end:40px;padding:24px;display:grid}.sc-panel__stage,.sc-panel__controls{flex-direction:column;gap:16px;min-width:0;display:flex}.sc-panel__stage .sc-preview{flex:auto;min-block-size:300px}@media (width>=960px){.sc-panel{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;padding:28px}.sc-panel__stage .sc-preview{min-block-size:380px}}@media (width<=639px){.sc-panel{padding:16px}}.sc-range{flex-direction:column;gap:6px;display:flex}.sc-range__row{color:var(--cs-text-2);justify-content:space-between;gap:12px;font-size:14px;font-weight:700;display:flex}.sc-range__row output{font-family:var(--cs-font-mono,monospace);color:var(--cs-text)}.sc-range input[type=range]{min-block-size:44px;inline-size:100%;accent-color:var(--cs-blue)}.sc-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.sc-divider{border:0;border-block-start:1px solid var(--cs-line);margin:4px 0}.sc-stage{display:contents}.sc-preview{border:var(--cs-size-border) solid var(--cs-line-2);border-radius:var(--cs-radius-card);cursor:zoom-in;min-block-size:280px;color:var(--cs-text);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.sc-preview.is-dark{color:#fff}.sc-preview:focus-visible{outline:3px solid var(--cs-blue);outline-offset:3px}.sc-preview__hint{text-align:center;background:#21252912;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700}.sc-preview.is-dark .sc-preview__hint{background:#212529db}.sc-preview__badge{color:#212529;font:700 13px/1.4 var(--cs-font-mono,monospace);background:#ffffffe6;border-radius:999px;padding:4px 10px;position:absolute;inset-block-end:12px;inset-inline-end:12px}.sc-full{z-index:2147483000;visibility:hidden;pointer-events:none;outline:none;position:fixed;inset:0}.sc-full.is-on{visibility:visible;pointer-events:auto}.sc-full.is-idle{cursor:none}.sc-full.is-locked{cursor:none;touch-action:none}:root.sc-filled,:root.sc-filled body{overflow:hidden}.sc-bar{box-sizing:border-box;color:#fff;background:#212529e6;border-radius:18px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;inline-size:fit-content;max-inline-size:calc(100% - 32px);margin-inline:auto;padding:10px;font-size:14px;display:flex;position:absolute;inset-block-end:max(16px, env(safe-area-inset-bottom));inset-inline:16px;box-shadow:0 8px 24px #00000040}.sc-full.is-night .sc-bar{color:#c44;background:#280000eb}.sc-bar__btn,.sc-bar__chip{min-block-size:44px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:12px;align-items:center;gap:6px;padding-inline:14px;font-weight:700;display:inline-flex}.sc-bar__chip{cursor:default;border-style:dashed}.sc-bar__btn:hover{background:#ffffff1f}.sc-bar__btn[aria-pressed=true]{background:#6ea8fe38;border-color:#6ea8fe}.sc-bar__btn--exit{color:#212529;background:#fff}.sc-full.is-night .sc-bar__btn--exit{color:#f88;background:#5a0000}.sc-bar kbd{font:700 13px/1 var(--cs-font-mono,monospace);opacity:.7}.sc-bar label{align-items:center;gap:8px;min-block-size:44px;padding-inline:8px;display:inline-flex}.sc-bar input[type=range]{inline-size:140px}.sc-full__note{color:#fff;text-align:center;background:#212529b3;border-radius:999px;inline-size:fit-content;max-inline-size:calc(100% - 32px);margin:0 auto;padding:8px 14px;font-size:14px;position:absolute;inset-block-start:16px;inset-inline:16px}.sc-full__note--center{font-size:18px;inset-block-start:50%;transform:translateY(-50%)}.sc-field{flex-direction:column;gap:8px;min-width:0;display:flex}.sc-field__label{color:var(--cs-text-2);font-size:14px;font-weight:700}.sc-seg{flex-wrap:wrap;gap:8px;display:flex}.sc-seg__btn{border:var(--cs-size-border) solid var(--cs-line-2);border-radius:var(--cs-radius-input);background:var(--cs-bg);min-block-size:44px;color:var(--cs-text-2);font:inherit;cursor:pointer;text-align:start;overflow-wrap:anywhere;align-items:center;gap:8px;padding:6px 14px;font-size:15px;font-weight:700;display:inline-flex}.sc-seg__btn:hover{border-color:var(--cs-blue)}.sc-seg__btn[aria-pressed=true]{border-color:var(--cs-blue);background:var(--cs-soft);color:var(--cs-link)}.sc-seg__sw{border-radius:6px;flex:none;block-size:20px;inline-size:20px;box-shadow:inset 0 0 0 1px #00000026}.sc-seg__text{flex-direction:column;line-height:1.25;display:flex}.sc-seg__text small{font:500 13px/1.3 var(--cs-font-mono,monospace);color:var(--cs-mute)}.sc-opts{flex-direction:column;gap:14px;display:flex}.sc-check{min-block-size:44px;color:var(--cs-text-2);cursor:pointer;align-items:center;gap:10px;font-weight:700;display:flex}.sc-check input{block-size:20px;inline-size:20px;accent-color:var(--cs-blue);flex:none}.sc-note{color:var(--cs-mute);margin:0;font-size:14px}.sc-png{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.sc-png .sc-note:empty{display:none}.sc-select{border:var(--cs-size-border) solid var(--cs-line-2);border-radius:var(--cs-radius-input);background:var(--cs-bg);min-block-size:44px;color:var(--cs-text);font:inherit;max-inline-size:100%;padding-inline:12px}.sc-png kbd,.sc-keys kbd,.b3d kbd{font:700 13px/1.3 var(--cs-font-mono,monospace);background:#00000014;border-radius:6px;padding:2px 6px}.b3d kbd{background:#ffffff38}.sc-keys__title{margin:0 0 8px;font-size:15px}.sc-keys dl{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:6px 16px;margin:0;display:grid}.sc-keys dl>div{align-items:center;gap:10px;min-width:0;display:flex}.sc-keys dt{flex:none;min-inline-size:44px}.sc-keys dd{color:var(--cs-text-2);overflow-wrap:anywhere;min-width:0;margin:0;font-size:14px}}