:root { --ink: #292827; --ink-soft: #6f6c69; --canvas: #f7f6f3; --surface: #ffffff; --warm: #e9e5dd; --line: #dcd7d3; --line-strong: #bcb6b1; --purple: #1b1938; --purple-deep: #121126; --accent: #cbb7fb; --accent-hover: #bda5f5; --success: #267a51; --danger: #b23a3a; --shadow: 0 12px 32px rgba(41, 40, 39, 0.08); --radius-sm: 6px; --radius: 8px; --sidebar-width: 236px; --font: "Segoe UI", Inter, system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; }
html { height: 100%; }
body { min-width: 320px; min-height: 100%; margin: 0px; color: var(--ink); background: var(--canvas); font: 15px/1.5 var(--font); letter-spacing: 0px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
:where(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; box-shadow: rgba(203, 183, 251, 0.55) 0px 0px 0px 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; color: white; background: var(--purple); border-radius: var(--radius); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0px); }
.app-shell { min-height: 100vh; }
.app-shell.is-locked { filter: blur(1px); pointer-events: none; user-select: none; }
.auth-screen { position: fixed; z-index: 80; inset: 0px; display: grid; place-items: center; padding: 24px; background: rgba(247, 246, 243, 0.92); }
.auth-panel { display: grid; width: min(430px, 100%); gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.auth-panel h1 { margin: 0px; font-size: 26px; line-height: 1.15; }
.auth-panel p { margin: 0px; color: var(--ink-soft); }
.auth-panel label { display: grid; gap: 6px; }
.auth-panel label > span { color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
.auth-panel input { height: 40px; padding: 0px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.auth-tabs button { min-height: 34px; border: 0px; border-radius: 4px; color: var(--ink-soft); background: transparent; font-weight: 650; cursor: pointer; }
.auth-tabs button.is-active { color: var(--ink); background: var(--surface); box-shadow: rgba(41, 40, 39, 0.1) 0px 1px 4px; }
.auth-reset-link { justify-self: start; }
.sidebar { position: fixed; z-index: 20; inset: 0px auto 0px 0px; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.82); background: var(--purple-deep); }
.brand-row { display: flex; height: 72px; align-items: center; gap: 11px; padding: 0px 18px; }
.brand-mark, .empty-mark { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: var(--radius); color: var(--purple); background: var(--accent); font-size: 16px; font-weight: 800; }
.brand-name { color: white; font-size: 17px; font-weight: 700; }
.workspace-switcher { display: grid; grid-template-columns: 34px minmax(0px, 1fr) 16px; gap: 10px; align-items: center; margin: 4px 12px 18px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); color: inherit; background: rgba(255, 255, 255, 0.06); text-align: left; cursor: pointer; }
.workspace-switcher:hover { background: rgba(255, 255, 255, 0.1); }
.workspace-switcher strong, .workspace-switcher small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher strong { color: white; font-size: 13px; font-weight: 650; }
.workspace-switcher small { margin-top: 1px; color: rgba(255, 255, 255, 0.54); font-size: 11px; }
.workspace-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--radius-sm); background: var(--warm); color: var(--ink); font-size: 11px; font-weight: 800; }
.primary-nav { display: grid; gap: 4px; padding: 0px 10px; }
.nav-item { display: flex; min-height: 42px; align-items: center; gap: 11px; padding: 0px 12px; border: 0px; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.66); background: transparent; cursor: pointer; text-align: left; }
.nav-item:hover { color: white; background: rgba(255, 255, 255, 0.06); }
.nav-item.is-active { color: white; background: rgba(203, 183, 251, 0.15); }
.nav-item.is-active svg { color: var(--accent); }
.nav-count { min-width: 22px; margin-left: auto; padding: 1px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.09); font-size: 11px; text-align: center; }
.sidebar-footer { display: grid; gap: 10px; margin-top: auto; padding: 14px 10px 18px; }
.plan-summary { padding: 13px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); color: rgba(255, 255, 255, 0.64); font-size: 11px; }
.plan-summary > div:first-child { display: flex; justify-content: space-between; }
.plan-summary strong { color: white; font-weight: 650; }
.mini-meter, .usage-meter { overflow: hidden; height: 5px; margin: 10px 0px 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.mini-meter span, .usage-meter span { display: block; width: 0px; height: 100%; background: var(--accent); transition: width 180ms; }
.main-area { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 10; top: 0px; display: flex; height: 72px; align-items: center; gap: 14px; padding: 0px 26px; border-bottom: 1px solid var(--line); background: rgba(247, 246, 243, 0.94); backdrop-filter: blur(12px); }
.topbar h1 { margin: 1px 0px 0px; font-size: 20px; line-height: 1.15; }
.eyebrow, .pane-label, .plan-kicker { margin: 0px; color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.profile-button { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--warm); font-size: 11px; font-weight: 800; cursor: pointer; }
.profile-button:hover { border-color: var(--purple); }
.button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 650; cursor: pointer; transition: background 140ms, border-color 140ms, transform 140ms; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: 0.6; transform: none; }
.button-primary { border-color: var(--purple); color: white; background: var(--purple); }
.button-primary:hover { background: rgb(37, 34, 76); }
.button-secondary { border-color: var(--line); background: var(--surface); }
.button-secondary:hover { border-color: var(--line-strong); }
.icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.icon-button:hover { border-color: var(--line-strong); background: var(--warm); }
.icon-button:disabled { cursor: default; opacity: 0.4; }
.mobile-only { display: none; }
.view { display: none; }
.view.is-active { display: block; }
.rewrite-workspace { display: flex; min-height: calc(-72px + 100vh); flex-direction: column; }
.rewrite-toolbar { display: flex; min-height: 72px; align-items: end; gap: 18px; padding: 12px 26px; border-bottom: 1px solid var(--line); background: var(--surface); }
.select-field, .segmented-field { display: grid; gap: 5px; margin: 0px; padding: 0px; border: 0px; }
.select-field > span, .segmented-field legend, .check-field > span, .voice-form label > span, .settings-form label > span, .invite-form label > span { color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
select, input[type="text"], input:not([type]), .voice-form input, .settings-form input, .invite-form input { height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); }
select { min-width: 170px; padding: 0px 34px 0px 10px; }
.segmented-control { display: flex; height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.segmented-control label { position: relative; }
.segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-control span { display: grid; height: 30px; min-width: 92px; place-items: center; padding: 0px 10px; border-radius: 4px; color: var(--ink-soft); font-size: 12px; cursor: pointer; }
.segmented-control input:checked + span { color: var(--ink); background: var(--surface); box-shadow: rgba(41, 40, 39, 0.1) 0px 1px 4px; }
.check-field { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 9px; cursor: pointer; }
.check-field input { width: 16px; height: 16px; accent-color: var(--purple); }
.editor-grid { display: grid; min-height: 510px; flex: 1 1 0%; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); background: var(--surface); }
.editor-pane { display: flex; min-width: 0px; flex-direction: column; padding: 24px 26px; }
.source-pane { border-right: 1px solid var(--line); }
.output-pane { background: rgb(251, 250, 248); }
.pane-header { display: flex; min-height: 50px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pane-header h2 { margin: 2px 0px 0px; font-size: 16px; }
.character-count { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
#sourceText { width: 100%; min-height: 330px; flex: 1 1 0%; resize: none; border: 0px; outline: 0px; color: var(--ink); background: transparent; font: 18px / 1.7 Georgia, "Times New Roman", serif; }
#sourceText::placeholder { color: rgb(170, 165, 160); }
.field-message { min-height: 22px; margin: 10px 0px 0px; color: var(--ink-soft); font-size: 12px; }
.field-message.is-error { color: var(--danger); }
.output-empty { display: grid; flex: 1 1 0%; place-content: center; justify-items: center; padding: 30px; color: var(--ink-soft); text-align: center; }
.output-empty h3 { margin: 16px 0px 3px; color: var(--ink); font-size: 16px; }
.output-empty p { margin: 0px; font-size: 13px; }
.empty-mark { width: 40px; height: 40px; opacity: 0.72; }
.output-result { flex: 1 1 0%; }
.revision-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 4px 0px 18px; }
.refine-control { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.refine-control button { min-height: 34px; padding: 0px 10px; border-top: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-right: 1px solid var(--line); color: var(--ink-soft); background: transparent; font-size: 12px; cursor: pointer; }
.refine-control button:last-child { border-right: 0px; }
.refine-control button:hover { color: var(--ink); background: var(--warm); }
.refine-control button:disabled { cursor: wait; opacity: 0.5; }
.version-field { display: grid; gap: 4px; }
.version-field span { color: var(--ink-soft); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.version-field select { min-width: 142px; height: 34px; font-size: 12px; }
.result-copy { width: 100%; min-height: 190px; margin: 0px 0px 14px; resize: vertical; border: 1px solid transparent; border-radius: var(--radius-sm); outline: 0px; color: var(--ink); background: transparent; white-space: pre-wrap; font: 18px / 1.7 Georgia, "Times New Roman", serif; }
.result-copy:hover { border-color: var(--line); }
.result-copy:focus { border-color: var(--line-strong); background: var(--surface); }
.result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-bottom: 24px; }
.draft-state { margin-right: auto; padding: 3px 8px; border-radius: 10px; color: var(--ink-soft); background: var(--warm); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.draft-state.is-final { color: rgb(30, 103, 69); background: rgb(220, 238, 228); }
.status-pill { display: inline-flex; padding: 3px 7px; border-radius: 9px; color: var(--ink-soft); background: var(--warm); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.status-pill.is-final { color: rgb(30, 103, 69); background: rgb(220, 238, 228); }
.change-summary { padding-top: 20px; border-top: 1px solid var(--line); }
.change-heading { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.change-summary ul { display: grid; gap: 8px; margin: 14px 0px 0px; padding: 0px; list-style: none; }
.change-summary li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); font-size: 13px; }
.change-summary li::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.output-loading { display: grid; align-content: start; gap: 14px; flex: 1 1 0%; padding-top: 12px; }
.output-loading span { margin-top: 8px; color: var(--ink-soft); font-size: 12px; }
.job-progress { overflow: hidden; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--warm); }
.job-progress span { display: block; width: 0px; height: 100%; margin: 0px; background: var(--purple); transition: width 180ms; }
.loading-line { height: 20px; border-radius: 3px; background: linear-gradient(90deg, rgb(236, 233, 229), rgb(247, 245, 242), rgb(236, 233, 229)) 0% 0% / 220% 100%; animation: 1.2s linear 0s infinite normal none running shimmer; }
.loading-line.short { width: 72%; }
@keyframes shimmer { 
  100% { background-position: -220% 0px; }
}
.rewrite-footer { display: flex; min-height: 76px; align-items: center; gap: 20px; padding: 12px 26px; border-top: 1px solid var(--line); background: var(--surface); }
.intensity-control { display: grid; grid-template-columns: auto minmax(110px, 180px) 28px; gap: 12px; align-items: center; color: var(--ink-soft); font-size: 12px; }
.intensity-control input { accent-color: var(--purple); }
.intensity-control output { color: var(--ink); font-variant-numeric: tabular-nums; }
.rewrite-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.status-text { color: var(--ink-soft); font-size: 12px; }
.content-view { padding: 36px 34px 60px; }
.content-heading { display: flex; max-width: 1120px; align-items: end; justify-content: space-between; gap: 20px; margin: 0px auto 26px; }
.content-heading h2 { margin: 4px 0px 5px; font-size: 28px; }
.content-heading p:last-child { margin: 0px; color: var(--ink-soft); }
.voice-grid { display: grid; max-width: 1120px; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px; margin: 0px auto; }
.voice-card { display: flex; min-height: 214px; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.voice-card-top { display: flex; align-items: center; gap: 11px; }
.voice-initial { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--radius-sm); background: var(--warm); font-weight: 800; }
.voice-card h3 { margin: 0px; font-size: 16px; }
.voice-card .voice-type { color: var(--ink-soft); font-size: 11px; }
.voice-card > p { margin: 18px 0px; color: var(--ink-soft); font-size: 13px; }
.voice-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.voice-card footer span { color: var(--ink-soft); font-size: 11px; }
.text-button { padding: 4px 0px; border: 0px; color: var(--purple); background: transparent; font-weight: 700; cursor: pointer; }
.voice-form, .settings-form { display: grid; max-width: 1120px; gap: 16px; margin: 0px auto 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.voice-form label, .settings-form label { display: grid; gap: 6px; }
.voice-form input, .settings-form input, .settings-form select { width: 100%; padding: 0px 10px; }
.voice-form textarea { min-height: 110px; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.email-verification-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0px 2px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.split-actions { justify-content: space-between; }
.table-wrap { position: relative; overflow: auto; max-width: 1120px; min-height: 180px; margin: 0px auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { height: 58px; padding: 0px 16px; border-bottom: 1px solid var(--line); text-align: left; }
th { height: 44px; color: var(--ink-soft); background: rgb(251, 250, 248); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
td { font-size: 13px; }
td:first-child { max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0px; }
.table-empty { display: grid; min-height: 135px; place-items: center; color: var(--ink-soft); font-size: 13px; }
.usage-layout { display: grid; max-width: 1120px; grid-template-columns: minmax(0px, 1.4fr) minmax(260px, 0.6fr); gap: 16px; margin: 0px auto; }
.usage-panel, .plan-panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.usage-panel-head { display: flex; justify-content: space-between; }
.usage-panel-head span { color: var(--ink-soft); font-size: 13px; }
.usage-meter { height: 9px; margin: 28px 0px 16px; background: var(--warm); }
.usage-meter span { background: var(--purple); }
.usage-numbers { display: flex; align-items: baseline; gap: 7px; }
.usage-numbers strong { font-size: 32px; }
.usage-numbers span, .usage-panel > p { color: var(--ink-soft); font-size: 12px; }
.plan-panel h3 { margin: 6px 0px 16px; font-size: 22px; }
.plan-panel ul { display: grid; gap: 8px; margin: 0px 0px 22px; padding-left: 18px; color: var(--ink-soft); font-size: 13px; }
.billing-panel { max-width: 1120px; margin: 28px auto 0px; }
.billing-heading { margin-bottom: 16px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px; }
.pricing-card { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pricing-card.is-active { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple) inset; }
.pricing-card-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.pricing-card h3 { margin: 5px 0px 0px; font-size: 20px; }
.pricing-card strong { color: var(--purple); font-size: 28px; line-height: 1; }
.pricing-card strong span { color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.pricing-card ul { display: grid; gap: 8px; margin: 0px; padding-left: 18px; color: var(--ink-soft); font-size: 13px; }
.pricing-card dl { display: grid; gap: 8px; margin: 0px; padding-top: 14px; border-top: 1px solid var(--line); }
.pricing-card dl > div { display: flex; justify-content: space-between; gap: 10px; }
.pricing-card dt { color: var(--ink-soft); font-size: 12px; }
.pricing-card dd { margin: 0px; font-size: 12px; font-weight: 750; }
.settings-form { max-width: 720px; margin-left: calc(0.5 * (100% - min(1120px, 100%))); }
.settings-form .check-field { display: flex; padding: 0px; }
.settings-form .button { justify-self: start; }
.members-panel, .integration-panel { max-width: 720px; margin: 18px auto 0px calc((100% - min(1120px, 100%)) / 2); padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.members-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.members-panel h3 { margin: 4px 0px 0px; font-size: 18px; }
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) 132px auto; align-items: end; gap: 12px; margin: 18px 0px; }
.invite-form label { display: grid; gap: 6px; }
.invite-form input, .invite-form select { width: 100%; padding: 0px 10px; }
.member-list { display: grid; gap: 8px; }
.member-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.member-row.has-action { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.member-row strong { display: block; font-size: 13px; }
.member-row span:not(.member-avatar) { color: var(--ink-soft); font-size: 12px; }
.member-row em { color: var(--ink-soft); font-size: 11px; font-style: normal; font-weight: 750; text-transform: uppercase; }
.member-row .text-button { white-space: nowrap; }
.member-role-select { width: 92px; height: 32px; padding: 0px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-transform: capitalize; }
.member-row.is-pending { background: var(--surface); }
.member-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 800; }
.member-empty { padding: 20px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.integration-panel { display: grid; grid-template-columns: 1fr 1.5fr; gap: 28px; }
.integration-panel h3 { margin: 4px 0px 0px; font-size: 18px; }
.integration-panel dl { display: grid; gap: 10px; margin: 0px; }
.integration-panel dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.integration-panel dt { color: var(--ink-soft); font-size: 12px; }
.integration-panel dd { margin: 0px; font-size: 12px; font-weight: 650; }
.integration-status { display: inline-flex; padding: 2px 7px; border-radius: 9px; color: rgb(30, 103, 69); background: rgb(220, 238, 228); }
.integration-status.is-offline { color: var(--danger); background: rgb(245, 223, 223); }
.toast { position: fixed; z-index: 50; right: 20px; bottom: 20px; max-width: min(360px, -40px + 100vw); padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); color: white; background: var(--purple); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 150ms, transform 150ms; }
.toast.is-visible { opacity: 1; transform: translateY(0px); }
.sidebar-scrim { position: fixed; z-index: 15; inset: 0px; background: rgba(18, 17, 38, 0.46); }
@media (max-width: 960px) {
  .rewrite-toolbar { flex-wrap: wrap; align-items: center; }
  .check-field { padding-bottom: 0px; }
  .editor-grid { grid-template-columns: 1fr; }
  .source-pane { min-height: 420px; border-right: 0px; border-bottom: 1px solid var(--line); }
  .output-pane { min-height: 420px; }
  .voice-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 720px) {
  .mobile-only { display: inline-grid; }
  .sidebar { width: min(290px, -44px + 100vw); transform: translateX(-105%); transition: transform 180ms; }
  .sidebar.is-open { transform: translateX(0px); }
  .brand-row .icon-button { margin-left: auto; border-color: rgba(255, 255, 255, 0.18); color: white; background: transparent; }
  .main-area { margin-left: 0px; }
  .topbar { height: 64px; padding: 0px 14px; }
  .topbar h1 { font-size: 17px; }
  .topbar-actions .button { width: 36px; padding: 0px; font-size: 0px; }
  .rewrite-workspace { min-height: calc(-64px + 100vh); }
  .rewrite-toolbar { min-height: 0px; gap: 12px; padding: 14px; }
  .select-field { width: 100%; }
  .select-field select { width: 100%; }
  .segmented-field { width: 100%; }
  .segmented-control { width: 100%; }
  .segmented-control label { flex: 1 1 0%; }
  .segmented-control span { min-width: 0px; padding: 0px 6px; }
  .editor-pane { padding: 20px 16px; }
  .source-pane { min-height: 390px; }
  .output-pane { min-height: 390px; }
  #sourceText, .result-copy { font-size: 17px; }
  .revision-toolbar { align-items: stretch; flex-direction: column; }
  .refine-control { width: 100%; }
  .refine-control button { flex: 1 1 0%; padding: 0px 6px; }
  .version-field select { width: 100%; }
  .result-actions { flex-wrap: wrap; }
  .rewrite-footer { align-items: stretch; flex-direction: column; padding: 14px 16px; }
  .intensity-control { grid-template-columns: auto 1fr 28px; }
  .rewrite-actions { width: 100%; margin-left: 0px; }
  .rewrite-actions .button { flex: 1 1 0%; }
  .status-text { display: none; }
  .content-view { padding: 28px 14px 50px; }
  .content-heading { align-items: stretch; flex-direction: column; }
  .content-heading .button { align-self: start; }
  .voice-grid, .form-grid, .usage-layout, .plan-grid { grid-template-columns: 1fr; }
  .settings-form { margin-left: auto; }
  .members-panel, .integration-panel { margin-left: auto; }
  .invite-form { grid-template-columns: 1fr; }
  .invite-form .button { justify-self: start; }
  .integration-panel { grid-template-columns: 1fr; }
  th:nth-child(4), td:nth-child(4) { display: none; }
}
@media (max-width: 460px) {
  .voice-grid { grid-template-columns: 1fr; }
  .segmented-control span { font-size: 11px; }
  th:nth-child(2), td:nth-child(2), th:nth-child(5), td:nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}