/* Scoped desktop styles from the supplied office productivity design. */
@property --fv-office-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media screen and (min-width: 921px) {
.office-task-studio { color-scheme: light; --ink: #233c49; --muted: #607780; --teal: #16796f; --teal-dark: #166e66; --line: #dce6e7; --rail: 76px; --gutter: 36px; --cycle: 8s; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.office-task-studio * { box-sizing: border-box; }
.office-task-studio { scroll-behavior: smooth; }
.office-task-studio { margin: 0px; background: rgb(255, 255, 255); color: var(--ink); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; isolation: isolate; }
.office-task-studio a { color: inherit; text-decoration: none; }
.office-task-studio button, .office-task-studio input, .office-task-studio textarea, .office-task-studio select { font: inherit; color: inherit; }
.office-task-studio button { border: 0px; cursor: pointer; }
.office-task-studio button:disabled { opacity: 0.4; cursor: not-allowed; }
.office-task-studio button, .office-task-studio a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.office-task-studio button, .office-task-studio a, .office-task-studio input, .office-task-studio textarea, .office-task-studio select, .office-task-studio summary, .office-task-studio [tabindex] { outline-offset: 4px; }
.office-task-studio button:focus-visible, .office-task-studio a:focus-visible, .office-task-studio summary:focus-visible, .office-task-studio [tabindex]:focus-visible { outline: rgb(22, 121, 111) solid 2px; }
.office-task-studio h1, .office-task-studio h2, .office-task-studio h3, .office-task-studio h4, .office-task-studio p { margin: 0px; }
.office-task-studio svg { display: block; flex-shrink: 0; width: 20px; height: 20px; }
.office-task-studio i[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-style: normal; }
.office-task-studio button svg, .office-task-studio a svg { pointer-events: none; }
.office-task-studio img { display: block; max-width: 100%; }
.office-task-studio [hidden] { display: none !important; }
.office-task-studio ::selection { background: rgb(205, 235, 232); }
.office-task-studio .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.office-task-studio .skip-link { position: fixed; top: 8px; left: 90px; z-index: 120; padding: 10px 14px; background: rgb(255, 255, 255); border-radius: 8px; transform: translateY(-150%); }
.office-task-studio .skip-link:focus { transform: none; }
.office-task-studio .office-ambient { position: absolute; inset: 0 0 auto var(--rail); height: min(620px, 76vh); pointer-events: none; z-index: -1; overflow: hidden; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 12%, rgba(0, 0, 0, 0.867) 37%, rgba(0, 0, 0, 0.4) 66%, transparent 100%); background: radial-gradient(at 9% -12%, rgba(24, 211, 197, 0.34), transparent 54%), radial-gradient(at 51% -20%, rgba(77, 158, 255, 0.3), transparent 59%), radial-gradient(at 91% -6%, rgba(231, 126, 226, 0.27), transparent 55%); }
.office-task-studio .office-ambient::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 11% -6%, rgba(65, 142, 255, 0.31), transparent 56%), radial-gradient(at 53% -12%, rgba(255, 111, 144, 0.3), transparent 60%), radial-gradient(at 94% -12%, rgba(255, 198, 78, 0.35), transparent 56%); animation: office-ambient var(--cycle) ease-in-out infinite; opacity: 0.08; }
@keyframes office-ambient {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 1; }
}
@keyframes office-ring {
  100% { --fv-office-angle: 360deg; }
}
@keyframes office-button {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.office-task-studio .office-rail { position: fixed; inset: 0px auto 0px 0px; width: var(--rail); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 6px; background: rgb(255, 255, 255); border-right: 1px solid rgb(231, 238, 238); }
.office-task-studio .rail-brand { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 38px; margin-bottom: 24px; font-size: 12px; font-weight: 650; }
.office-task-studio .rail-brand img { width: 16px; height: 25px; object-fit: contain; }
.office-task-studio .rail-link { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; width: 62px; min-height: 66px; border-radius: 10px; background: transparent; color: rgb(97, 115, 124); font-size: 11px; font-weight: 550; }
.office-task-studio .rail-link svg { width: 22px; height: 22px; }
.office-task-studio .rail-link:hover { background: rgb(242, 248, 246); color: var(--teal); }
.office-task-studio .rail-bottom { margin-top: auto; }
.office-task-studio .rail-accent { display: block; width: 23px; height: 4px; border-radius: 4px; background: rgb(219, 232, 233); }
.office-task-studio .office-shell { margin-left: var(--rail); min-height: 100dvh; }
.office-task-studio .office-header { height: 78px; max-width: 1600px; margin: 0px auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: transparent; position: relative; }
.office-task-studio .back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: rgb(65, 95, 105); }
.office-task-studio .back-link svg { width: 17px; height: 17px; }
.office-task-studio .header-actions { display: flex; align-items: center; gap: 24px; }
.office-task-studio .safety-link { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgb(64, 92, 103); }
.office-task-studio .safety-link svg { width: 17px; height: 17px; color: rgb(22, 119, 237); }
.office-task-studio .more-menu { position: fixed; top: 226px; left: 86px; z-index: 60; display: flex; flex-direction: column; gap: 4px; width: 228px; padding: 14px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 14px; box-shadow: rgba(35, 60, 73, 0.094) 0px 16px 50px; }
.office-task-studio .more-menu strong { font-size: 12px; padding: 6px 10px; color: var(--muted); }
.office-task-studio .more-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; }
.office-task-studio .more-menu a:hover { background: rgb(245, 249, 248); }
.office-task-studio .more-menu a > span { flex: 1 1 0%; }
.office-task-studio .more-menu svg { width: 18px; height: 18px; }
.office-task-studio .current-dot { display: none; }
.office-task-studio .fv-language { position: relative; z-index: 70; flex-shrink: 0; }
.office-task-studio .fv-language-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 6px 0px 6px 5px; border: 0px; border-radius: 7px; background: transparent; color: rgb(59, 94, 107); font-size: 15px; font-weight: 500; }
.office-task-studio .fv-language-trigger > svg:first-child { width: 22px; height: 22px; }
.office-task-studio .language-chevron { width: 16px; height: 16px; transition: transform 0.18s; }
.office-task-studio .fv-language-trigger[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.office-task-studio .fv-language-menu { position: absolute; inset: calc(100% + 10px) 0px auto auto; min-width: 174px; padding: 9px; border: 1px solid var(--line); border-radius: 17px; background: rgb(255, 255, 255); box-shadow: rgba(41, 75, 91, 0.05) 0px 10px 28px; display: flex; flex-direction: column; gap: 2px; }
.office-task-studio .fv-language-menu button { min-height: 46px; width: 100%; padding: 10px 14px; text-align: left; border: 0px; border-radius: 10px; background: rgb(255, 255, 255); font-size: 16px; font-weight: 400; color: rgb(52, 85, 99); }
.office-task-studio .fv-language-menu button:hover, .office-task-studio .fv-language-menu button:focus-visible { background: rgb(244, 248, 248); outline: 0px; }
.office-task-studio .fv-language-menu button[aria-checked="true"] { font-weight: 500; }
.office-task-studio { max-width: 1600px; margin: 0px auto; padding: 25px var(--gutter) 0; min-width: 0px; }
.office-task-studio .page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.office-task-studio .eyebrow { display: block; color: rgb(56, 110, 115); font-weight: 600; font-size: 12px; letter-spacing: 1.4px; margin-bottom: 8px; }
.office-task-studio .page-heading h1 { font-size: 38px; line-height: 1.25; letter-spacing: -1.3px; font-weight: 650; color: rgb(25, 61, 71); }
.office-task-studio .page-heading p { font-size: 14px; color: rgb(73, 103, 115); margin-top: 10px; }
.office-task-studio .browse-link { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 1px solid rgb(211, 224, 229); border-radius: 10px; background: rgba(255, 255, 255, 0.7); color: rgb(59, 101, 112); font-size: 13px; }
.office-task-studio .browse-link svg { width: 16px; height: 16px; }
.office-task-studio .browse-link:hover { background: rgb(255, 255, 255); border-color: rgb(128, 173, 165); }
.office-task-studio .workflow-section { margin: 0px 0px 22px; scroll-margin-top: 24px; }
.office-task-studio .workflow-grid { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 10px; }
.office-task-studio .workflow-card { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 68px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.95); text-align: left; transition: border-color 0.2s, box-shadow 0.2s; }
.office-task-studio .workflow-icon, .office-task-studio .template-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft,#e9f5f1); color: var(--accent,#258175); }
.office-task-studio [data-accent="teal"] { --accent: #21877e; --accent-soft: #eaf6f3; }
.office-task-studio [data-accent="blue"] { --accent: #3d83b6; --accent-soft: #edf5fc; }
.office-task-studio [data-accent="violet"], .office-task-studio [data-accent="purple"] { --accent: #8c64b1; --accent-soft: #f4effa; }
.office-task-studio [data-accent="amber"] { --accent: #ac7a35; --accent-soft: #fdf4e9; }
.office-task-studio [data-accent="rose"], .office-task-studio [data-accent="pink"] { --accent: #b76087; --accent-soft: #fbedf4; }
.office-task-studio [data-accent="green"] { --accent: #44895e; --accent-soft: #eef8ef; }
.office-task-studio .workflow-icon svg { width: 20px; height: 20px; }
.office-task-studio .workflow-copy { flex: 1 1 0%; min-width: 0px; }
.office-task-studio .workflow-copy h3 { font-size: 13px; font-weight: 550; line-height: 1.5; }
.office-task-studio .workflow-arrow { display: none; }
.office-task-studio .workflow-card:hover, .office-task-studio .template-card:hover { border-color: rgb(145, 189, 181); box-shadow: rgba(40, 78, 75, 0.03) 0px 6px 20px; }
.office-task-studio .workflow-card[aria-pressed="true"] { background: rgb(255, 255, 255); color: rgb(34, 92, 90); border-color: transparent; }
.office-task-studio .office-workspace { --office-left: 40%; display: grid; grid-template-columns: minmax(0,var(--office-left)) 24px minmax(0,1fr); align-items: stretch; min-width: 0px; scroll-margin-top: 24px; }
.office-task-studio .brief-panel, .office-task-studio .result-panel { min-width: 0px; border: 1px solid rgb(224, 233, 233); border-radius: 22px; background: rgb(255, 255, 255); box-shadow: rgba(40, 76, 87, 0.02) 0px 9px 30px; }
.office-task-studio .brief-panel { padding: 24px; display: flex; flex-direction: column; }
.office-task-studio .workflow-current { display: flex; align-items: center; gap: 11px; padding-bottom: 19px; margin-bottom: 16px; border-bottom: 1px solid rgb(237, 241, 241); }
.office-task-studio .current-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft,#edf7f4); color: var(--accent,#278176); }
.office-task-studio .current-icon svg { width: 20px; height: 20px; }
.office-task-studio .current-copy { flex: 1 1 0%; min-width: 0px; }
.office-task-studio .current-copy h2 { font-size: 17px; font-weight: 600; }
.office-task-studio .field-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; margin-bottom: 8px; }
.office-task-studio .field-heading label { font-size: 13px; font-weight: 550; }
.office-task-studio .example-button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0px; background: transparent; color: rgb(82, 115, 123); font-size: 12px; }
.office-task-studio .example-button svg { width: 14px; height: 14px; }
.office-task-studio #material { display: block; width: 100%; resize: vertical; min-height: 180px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255, 255, 255); color: rgb(48, 78, 92); font-size: 14px; line-height: 1.85; scrollbar-width: thin; scrollbar-color: rgb(200, 217, 215) transparent; }
.office-task-studio textarea::placeholder, .office-task-studio input::placeholder { color: rgb(100, 127, 137); }
.office-task-studio .material-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--muted); font-size: 11px; }
.office-task-studio #materialCount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.office-task-studio .reference-upload { position: relative; display: flex; align-items: center; gap: 11px; min-height: 64px; padding: 12px 14px; margin-top: 15px; border: 1px dashed rgb(189, 207, 206); border-radius: 10px; background: rgb(255, 255, 255); cursor: pointer; }
.office-task-studio .reference-upload > svg { width: 22px; height: 22px; color: rgb(40, 118, 110); }
.office-task-studio .reference-upload-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
.office-task-studio .reference-upload-copy strong { font-size: 12px; font-weight: 550; color: rgb(49, 93, 101); }
.office-task-studio .reference-upload-copy > span { font-size: 11px; color: var(--muted); }
.office-task-studio .reference-upload input { position: absolute; inset: 0px; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.office-task-studio .file-status { font-size: 10px; line-height: 1.6; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.office-task-studio .file-status[data-error="true"] { color: rgb(164, 52, 66); }
.office-task-studio .file-list { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0px; margin: 0px; }
.office-task-studio .file-list:not(:empty) { margin-top: 10px; }
.office-task-studio .file-list li { display: flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid rgb(225, 233, 232); border-radius: 6px; padding: 4px 7px; font-size: 11px; color: rgb(77, 114, 120); background: rgb(251, 253, 252); }
.office-task-studio .file-list li > span { display: flex; align-items: center; gap: 5px; min-width: 0px; overflow: hidden; }
.office-task-studio .file-list li span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.office-task-studio .file-list small { font-size: 10px; white-space: nowrap; }
.office-task-studio .file-list svg { width: 13px; height: 13px; }
.office-task-studio .output-options { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 13px; margin-top: 18px; min-width: 0px; }
.office-task-studio .output-options label { display: flex; flex-direction: column; gap: 7px; min-width: 0px; color: rgb(75, 104, 115); font-size: 12px; }
.office-task-studio .output-options select { display: block; width: 100%; min-width: 0px; height: 43px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgb(255, 255, 255); color: rgb(48, 78, 92); font-size: 13px; }
.office-task-studio .output-settings { margin: 12px 0px 17px; border-bottom: 1px solid rgb(231, 237, 237); }
.office-task-studio .output-settings summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; list-style: none; cursor: pointer; font-size: 12px; color: rgb(78, 113, 123); }
.office-task-studio .output-settings summary::-webkit-details-marker { display: none; }
.office-task-studio .output-settings summary > span { display: flex; align-items: center; gap: 7px; }
.office-task-studio .output-settings svg { width: 16px; height: 16px; }
.office-task-studio .output-settings[open] summary > i { transform: rotate(180deg); }
.office-task-studio .advanced-options { margin-top: 0px; margin-bottom: 15px; }
.office-task-studio .brief-actions { display: flex; gap: 10px; margin-top: auto; }
.office-task-studio .primary-button, .office-task-studio .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 16px; border-radius: 10px; font-size: 13px; font-weight: 550; }
.office-task-studio .primary-button { background: linear-gradient(110deg, rgb(20, 104, 155), rgb(41, 85, 177), rgb(115, 69, 170), rgb(162, 61, 121), rgb(20, 104, 155)) 0% 0% / 300% 100%; animation: office-button var(--cycle) ease-in-out infinite; color: rgb(255, 255, 255); box-shadow: rgba(35, 91, 163, 0.063) 0px 3px 10px; }
.office-task-studio .secondary-button { background: rgb(255, 255, 255); border: 1px solid var(--line); color: rgb(69, 105, 117); }
.office-task-studio .primary-button:hover { filter: brightness(1.06); }
.office-task-studio .secondary-button:hover { border-color: rgb(162, 196, 189); }
.office-task-studio .brief-actions .primary-button { flex: 1.2 1 0%; }
.office-task-studio .brief-actions .secondary-button { flex: 1 1 0%; }
.office-task-studio .primary-button svg, .office-task-studio .secondary-button svg { width: 16px; height: 16px; }
.office-task-studio .office-splitter { display: flex; justify-content: center; align-items: center; min-width: 0px; cursor: col-resize; touch-action: none; }
.office-task-studio .office-splitter span { display: block; width: 3px; height: 38px; border-radius: 3px; background: rgb(197, 212, 213); transition: height 0.2s, background 0.2s; }
.office-task-studio .office-splitter:hover span, .office-task-studio .office-splitter:focus-visible span { height: 56px; background: rgb(55, 141, 134); }
.office-task-studio .office-splitter:focus-visible { outline: none; }
.office-task-studio .is-resizing, .office-task-studio .is-resizing * { cursor: col-resize !important; user-select: none !important; }
.office-task-studio .result-panel { display: flex; flex-direction: column; overflow: hidden; position: relative; min-height: 525px; }
.office-task-studio .result-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 21px; border-bottom: 1px solid rgb(231, 237, 237); min-height: 68px; }
.office-task-studio .result-label { display: flex; align-items: center; gap: 9px; min-width: 0px; }
.office-task-studio .result-label > i { color: rgb(79, 121, 127); }
.office-task-studio .result-label h2 { font-size: 16px; font-weight: 600; white-space: nowrap; }
.office-task-studio .result-badge { padding: 2px 7px; border-radius: 5px; background: rgb(244, 248, 247); color: rgb(88, 119, 112); font-size: 10px; white-space: nowrap; }
.office-task-studio .result-tools { display: flex; align-items: center; gap: 4px; }
.office-task-studio .icon-button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border: 1px solid transparent; border-radius: 8px; background: rgb(255, 255, 255); color: rgb(89, 119, 126); }
.office-task-studio .icon-button svg { width: 17px; height: 17px; }
.office-task-studio .icon-button:hover { background: rgb(245, 249, 248); }
.office-task-studio .result-tabs { display: flex; align-items: center; gap: 8px; padding: 11px 21px; border-bottom: 1px solid rgb(232, 238, 238); }
.office-task-studio .result-tabs button { position: relative; min-height: 34px; min-width: 67px; padding: 6px 14px; border: 1px solid transparent; border-radius: 8px; background: rgb(255, 255, 255); font-size: 12px; color: rgb(94, 118, 128); }
.office-task-studio .result-tabs button[aria-selected="true"] { color: rgb(33, 94, 89); }
.office-task-studio .result-view { position: relative; flex: 1 1 0%; padding: 26px 29px; min-height: 320px; min-width: 0px; }
.office-task-studio .result-document { font-size: 14px; line-height: 1.9; color: rgb(64, 93, 102); overflow-wrap: anywhere; }
.office-task-studio .result-document > h3 { font-size: 24px; line-height: 1.5; letter-spacing: -0.5px; color: rgb(35, 63, 73); font-weight: 600; margin-bottom: 23px; }
.office-task-studio .document-summary { font-size: 12px; color: var(--muted); padding-bottom: 14px; margin-bottom: 17px; border-bottom: 1px solid rgb(237, 241, 241); }
.office-task-studio .document-section { margin-top: 20px; }
.office-task-studio .document-section h4 { font-size: 14px; color: rgb(41, 77, 86); font-weight: 600; margin-bottom: 8px; }
.office-task-studio .document-section ul { margin: 0px; padding-left: 19px; }
.office-task-studio .document-section li { margin-bottom: 8px; }
.office-task-studio .document-section li::marker { color: rgb(76, 152, 136); }
.office-task-studio .sample-toggle { display: flex; align-items: center; gap: 7px; min-height: 40px; margin-top: 20px; padding: 7px 0px; background: transparent; color: rgb(22, 121, 111); font-size: 12px; }
.office-task-studio .sample-toggle svg { width: 15px; height: 15px; }
.office-task-studio .sample-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.office-task-studio .result-table-wrap { overflow-x: auto; max-width: 100%; margin-top: 19px; }
.office-task-studio .result-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.7; text-align: left; }
.office-task-studio .result-table th { background: rgb(244, 249, 247); color: rgb(49, 94, 86); font-weight: 550; }
.office-task-studio .result-table th, .office-task-studio .result-table td { padding: 10px; border: 1px solid rgb(220, 232, 228); overflow-wrap: anywhere; }
.office-task-studio .result-editor { display: block; width: 100%; min-height: 340px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255, 255, 255); font-size: 14px; line-height: 1.9; color: rgb(48, 78, 92); resize: vertical; }
.office-task-studio .edited-document { white-space: normal; font-size: 14px; line-height: 1.9; }
.office-task-studio .instruction-view { flex: 1 1 0%; display: flex; padding: 22px; min-height: 390px; }
.office-task-studio #instructionText { display: block; flex: 1 1 0%; width: 100%; min-height: 340px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255, 255, 255); font-size: 13px; line-height: 1.9; resize: vertical; }
.office-task-studio .result-status { padding: 10px 22px; font-size: 12px; color: rgb(70, 110, 104); border-top: 1px solid rgb(237, 242, 239); background: rgb(250, 253, 251); }
.office-task-studio .result-status:empty { display: none; }
.office-task-studio .result-footer { padding: 11px 22px; border-top: 1px solid rgb(231, 237, 237); color: var(--muted); font-size: 11px; }
.office-task-studio .status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgb(76, 154, 137); margin-right: 7px; }
.office-task-studio .workspace-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.office-task-studio .preview-note, .office-task-studio .live-workflow { display: flex; align-items: center; gap: 6px; min-height: 26px; font-size: 11px; color: rgb(96, 119, 128); }
.office-task-studio .preview-note svg, .office-task-studio .live-workflow svg { width: 13px; height: 13px; }
.office-task-studio .live-workflow:hover { color: rgb(22, 121, 111); }
.office-task-studio .template-section { padding-top: 48px; scroll-margin-top: 24px; }
.office-task-studio .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.office-task-studio .section-heading h2 { font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: -0.5px; }
.office-task-studio .template-search { position: relative; display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; padding: 0px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgb(255, 255, 255); }
.office-task-studio .template-search > i { color: var(--muted); }
.office-task-studio .template-search svg { width: 17px; height: 17px; }
.office-task-studio .template-search input { display: block; width: 100%; min-width: 0px; height: 42px; border: 0px; background: transparent; outline: 0px; font-size: 13px; }
.office-task-studio .template-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.office-task-studio .template-filters button { position: relative; min-height: 38px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255, 255, 255); color: rgb(71, 99, 109); font-size: 12px; }
.office-task-studio .template-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; }
.office-task-studio .template-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 102px; padding: 20px; border: 1px solid rgb(223, 232, 232); border-radius: 15px; background: rgb(255, 255, 255); text-align: left; transition: border-color 0.2s, box-shadow 0.2s; }
.office-task-studio .template-icon { width: 40px; height: 40px; border-radius: 12px; }
.office-task-studio .template-label { flex: 1 1 0%; min-width: 0px; }
.office-task-studio .template-card h3 { font-size: 14px; font-weight: 550; line-height: 1.6; }
.office-task-studio .template-category { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.office-task-studio .template-chevron { color: rgb(106, 138, 146); }
.office-task-studio .template-chevron svg { width: 15px; height: 15px; }
.office-task-studio .template-empty { padding: 40px; text-align: center; color: rgb(96, 119, 128); }
.office-task-studio .template-empty > i { margin-bottom: 10px; }
.office-task-studio .template-empty h3 { font-size: 16px; }
.office-task-studio .template-empty p { font-size: 13px; margin-top: 6px; }
.office-task-studio .office-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 48px; padding: 23px 0px 30px; border-top: 1px solid rgb(229, 237, 237); color: rgb(93, 121, 130); font-size: 11px; }
.office-task-studio .fv-field-frame { position: relative; isolation: isolate; min-width: 0px; width: 100%; border-radius: 10px; background: rgb(255, 255, 255); }
.office-task-studio .fv-field-frame--select { border-radius: 9px; }
.office-task-studio .fv-field-frame--instructionText { display: flex; flex: 1 1 0%; }
.office-task-studio .fv-field-frame--resultEditor:has([hidden]) { display: none; }
.office-task-studio .fv-field-frame > textarea, .office-task-studio .fv-field-frame > select { max-width: 100%; }
.office-task-studio .workflow-card[aria-pressed="true"]::before, .office-task-studio .template-card[aria-pressed="true"]::before, .office-task-studio .template-filters button[aria-pressed="true"]::before, .office-task-studio .result-tabs button[aria-selected="true"]::before, .office-task-studio .icon-button[aria-pressed="true"]::before, .office-task-studio .fv-field-frame:focus-within::before, .office-task-studio .template-search:focus-within::after, .office-task-studio .reference-upload:focus-within::after, .office-task-studio .reference-upload[data-drag-active="true"]::after { content: ""; position: absolute; inset: 0px; padding: 1.5px; border-radius: inherit; z-index: 3; pointer-events: none; background: conic-gradient(from var(--fv-office-angle),#096bfa,#059b58,#e9ad00,#f77919,#ee3159,#893bcc,#096bfa); mask: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) content-box exclude, linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); animation: office-ring var(--cycle) linear infinite; }
.office-task-studio .template-card[aria-pressed="true"], .office-task-studio .template-filters button[aria-pressed="true"], .office-task-studio .icon-button[aria-pressed="true"] { border-color: transparent; background: rgb(255, 255, 255); color: rgb(33, 94, 89); }
.office-task-studio .fv-field-frame > textarea:focus, .office-task-studio .fv-field-frame > select:focus { outline: 0px; box-shadow: none; border-color: transparent; background: rgb(255, 255, 255); }
.office-task-studio .template-search:focus-within, .office-task-studio .reference-upload:focus-within, .office-task-studio .reference-upload[data-drag-active="true"] { outline: 0px; box-shadow: none; border-color: transparent; background: rgb(255, 255, 255); }
.office-task-studio .template-search input:focus { outline: 0px; box-shadow: none; }
.office-task-studio .replace-dialog { border: 1px solid rgb(220, 230, 231); border-radius: 20px; padding: 28px; width: min(440px, -32px + 100vw); color: var(--ink); box-shadow: rgba(24, 59, 68, 0.2) 0px 24px 80px; background: rgb(255, 255, 255); }
.office-task-studio .replace-dialog::backdrop { background: rgba(22, 59, 69, 0.22); backdrop-filter: blur(3px); }
.office-task-studio .dialog-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgb(237, 247, 244); color: rgb(22, 121, 111); margin-bottom: 16px; }
.office-task-studio .replace-dialog h2 { font-size: 22px; }
.office-task-studio .replace-dialog p { margin: 12px 0px 24px; font-size: 14px; color: rgb(90, 116, 127); }
.office-task-studio .replace-dialog > div { display: flex; gap: 10px; justify-content: flex-end; }
.office-task-studio .toast { position: fixed; bottom: 26px; left: calc(50% + 38px); transform: translateX(-50%); z-index: 130; max-width: calc(-40px + 100vw); padding: 12px 18px; border: 1px solid rgb(212, 227, 223); border-radius: 10px; background: rgb(255, 255, 255); box-shadow: rgba(25, 61, 71, 0.125) 0px 8px 30px; color: rgb(49, 91, 96); font-size: 13px; }
.office-task-studio[data-page-hidden="true"] *, .office-task-studio[data-page-hidden="true"] ::before, .office-task-studio[data-page-hidden="true"] ::after { animation-play-state: paused !important; }
@media (min-width: 1700px) {
.office-task-studio { --gutter: 48px; }
}
@media (max-width: 1200px) {
.office-task-studio .workflow-card { gap: 7px; padding: 10px; }
.office-task-studio .workflow-icon { width: 29px; height: 29px; }
.office-task-studio .workflow-copy h3 { font-size: 12px; }
}
@media (max-width: 1100px) {
.office-task-studio { --gutter: 28px; }
.office-task-studio .office-workspace { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 22px; }
.office-task-studio .office-splitter { display: none; }
.office-task-studio .brief-panel { padding: 24px; }
.office-task-studio .result-panel { min-height: 460px; }
.office-task-studio .workflow-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.office-task-studio .workflow-copy h3 { font-size: 14px; }
.office-task-studio .workflow-card { padding: 12px 16px; }
.office-task-studio .workflow-icon { width: 34px; height: 34px; }
.office-task-studio .template-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.office-task-studio .workflow-section { margin-bottom: 24px; }
}
@media (max-width: 650px) {
.office-task-studio { --rail: 0px; --gutter: 20px; }
.office-task-studio .office-rail { display: none; }
.office-task-studio .office-header { height: 70px; }
.office-task-studio .header-actions { gap: 18px; }
.office-task-studio .safety-link > span { display: none; }
.office-task-studio .office-shell { margin-left: 0px; }
.office-task-studio .office-ambient { height: 480px; }
.office-task-studio .more-menu { display: none; }
.office-task-studio .page-heading { align-items: flex-start; gap: 15px; margin-bottom: 24px; }
.office-task-studio .page-heading h1 { font-size: 31px; }
.office-task-studio .page-heading p { font-size: 13px; }
.office-task-studio .eyebrow { font-size: 11px; }
.office-task-studio .browse-link { font-size: 12px; padding: 8px 10px; min-height: 38px; margin-top: 26px; white-space: nowrap; }
.office-task-studio .browse-link > i:last-child { display: none; }
.office-task-studio .workflow-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 9px; }
.office-task-studio .workflow-card { min-height: 59px; padding: 10px; }
.office-task-studio .workflow-copy h3 { font-size: 13px; }
.office-task-studio .workflow-icon { width: 30px; height: 30px; }
.office-task-studio .brief-panel { padding: 19px; border-radius: 18px; }
.office-task-studio .result-panel { border-radius: 18px; }
.office-task-studio .current-copy h2 { font-size: 16px; }
.office-task-studio .reference-upload { padding: 11px; }
.office-task-studio .reference-upload-copy > span { font-size: 10px; }
.office-task-studio .result-topbar { padding: 15px; }
.office-task-studio .result-label { gap: 6px; }
.office-task-studio .result-label h2 { font-size: 14px; }
.office-task-studio .result-tools { gap: 1px; }
.office-task-studio .icon-button { width: 30px; height: 32px; }
.office-task-studio .result-tabs { padding: 10px 15px; }
.office-task-studio .result-view { padding: 24px 20px; }
.office-task-studio .result-document > h3 { font-size: 22px; }
.office-task-studio .result-document { font-size: 13px; }
.office-task-studio .instruction-view { padding: 16px; }
.office-task-studio .workspace-caption { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.office-task-studio .preview-note, .office-task-studio .live-workflow { font-size: 10px; }
.office-task-studio .template-section { padding-top: 36px; }
.office-task-studio .section-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
.office-task-studio .section-heading h2 { font-size: 22px; }
.office-task-studio .template-search { width: 100%; }
.office-task-studio .template-grid { grid-template-columns: minmax(0px, 1fr); gap: 12px; }
.office-task-studio .template-card { min-height: 93px; padding: 17px; }
.office-task-studio .template-filters { gap: 7px; }
.office-task-studio .template-filters button { font-size: 11px; padding: 7px 10px; }
.office-task-studio .office-footer { margin-top: 35px; font-size: 10px; }
.office-task-studio .fv-language-trigger { font-size: 14px; gap: 7px; }
.office-task-studio .fv-language-menu { min-width: 164px; }
.office-task-studio .toast { left: 50%; }
.office-task-studio .primary-button, .office-task-studio .secondary-button { padding: 10px; font-size: 12px; }
.office-task-studio .output-options select { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.office-task-studio { scroll-behavior: auto; }
.office-task-studio .office-page *, .office-task-studio .office-page ::before, .office-task-studio .office-page ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
.office-task-studio .office-ambient::after { opacity: 0.55; }
}
@media (min-width: 1101px) and (max-height: 950px) {
.office-task-studio { padding-top: 18px; }
.office-task-studio .page-heading { margin-bottom: 24px; }
.office-task-studio .page-heading p { display: none; }
.office-task-studio .workflow-card { min-height: 62px; }
.office-task-studio .workflow-section { margin-bottom: 18px; }
.office-task-studio .brief-panel { padding: 22px; }
.office-task-studio .workflow-current { padding-bottom: 16px; margin-bottom: 12px; }
.office-task-studio #material { min-height: 160px; }
.office-task-studio .reference-upload { margin-top: 12px; }
.office-task-studio .output-options { margin-top: 15px; }
.office-task-studio .output-settings { margin-bottom: 14px; }
}
}