/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Composer "+" menu (add file / skills) and attached-skill chips. Chrome tokens
* only; each app imports this next to its other @lycero/ui sheets. */
.ai-plus {
display: inline-flex;
flex-shrink: 0;
}
.ai-plus-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-30);
background: none;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.ai-plus-btn:hover,
.ai-plus-btn.open {
background: var(--hover);
color: var(--text);
}
.ai-plus-btn.has-skills {
color: var(--accent);
}
.ai-plus-btn:focus-visible {
outline: none;
border-color: var(--accent);
}
.ai-plus-pop {
position: fixed;
z-index: 80;
display: flex;
flex-direction: column;
width: 280px;
max-height: min(420px, 70vh);
padding: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-8);
box-shadow: var(--shadow-menu);
font-size: 12px;
}
.ai-plus-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 7px 8px;
border: none;
border-radius: var(--radius-6);
background: none;
color: var(--text);
font-family: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.ai-plus-item:hover {
background: var(--hover);
}
.ai-plus-item-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-plus-chevron {
color: var(--text-secondary);
}
.ai-plus-sep {
height: 1px;
margin: 4px 6px;
background: var(--border-subtle);
}
.ai-plus-search-row {
display: flex;
align-items: center;
gap: 4px;
padding: 2px;
}
.ai-plus-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 28px;
flex-shrink: 0;
border: none;
border-radius: var(--radius-6);
background: none;
color: var(--text-secondary);
cursor: pointer;
}
.ai-plus-back:hover {
background: var(--hover);
color: var(--text);
}
.ai-plus-search {
flex: 1;
min-width: 0;
height: 28px;
padding: 0 8px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-6);
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 12px;
}
.ai-plus-search:focus {
outline: none;
border-color: var(--accent);
}
.ai-plus-list {
flex: 1;
min-height: 0;
margin-top: 4px;
overflow-y: auto;
}
.ai-plus-empty {
padding: 12px 8px;
color: var(--text-secondary);
text-align: center;
}
.ai-plus-skill {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 6px 8px;
border: none;
border-radius: var(--radius-6);
background: none;
color: var(--text);
font-family: inherit;
text-align: left;
cursor: pointer;
}
.ai-plus-skill:hover {
background: var(--hover);
}
.ai-plus-skill.on {
background: var(--accent-soft);
}
.ai-plus-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: var(--hover);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
}
.ai-plus-skill-text {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
gap: 1px;
}
.ai-plus-skill-name-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.ai-plus-skill-name {
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-plus-cloud-badge {
flex-shrink: 0;
padding: 1px 5px;
border-radius: 4px;
background: var(--accent-soft);
color: var(--accent);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.3;
}
.ai-plus-skill.disabled {
opacity: 0.55;
cursor: not-allowed;
}
.ai-plus-skill-desc {
color: var(--text-secondary);
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-plus-check {
flex-shrink: 0;
color: var(--accent);
}
.ai-plus-manage {
flex-shrink: 0;
margin-top: 4px;
border-top: 1px solid var(--border-subtle);
border-radius: 0 0 var(--radius-6) var(--radius-6);
color: var(--text-secondary);
}
.ai-skill-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 8px 0;
}
.ai-skill-chips-sent {
padding: 0 0 6px;
}
.ai-skill-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
max-width: 220px;
padding: 0 6px 0 8px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-30);
background: var(--accent-soft);
color: var(--text);
font-size: 12px;
}
.ai-skill-chip-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-skill-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: var(--text-secondary);
cursor: pointer;
}
.ai-skill-chip-remove:hover {
background: var(--hover);
color: var(--text);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* 5-Hour Quota circular ring button & popover in the chat composer footer (Astryx Craft) */
.ai-quota-widget {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.ai-quota-ring-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 7px 0 5px;
border-radius: 999px;
border: 1px solid var(--border, rgba(28, 27, 24, 0.14));
background: var(--bg-subtle, rgba(28, 27, 24, 0.04));
color: var(--text-secondary, #5c5952);
font-family: inherit;
font-size: 11px;
font-weight: 500;
line-height: 1;
font-variant-numeric: tabular-nums;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition:
background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-quota-ring-btn:hover,
.ai-quota-ring-btn.open {
background: var(--accent-soft, rgba(139, 58, 26, 0.08));
border-color: var(--accent-border, rgba(139, 58, 26, 0.28));
color: var(--text-primary, #1c1b18);
}
.ai-quota-ring-svg {
flex-shrink: 0;
display: block;
}
.ai-quota-ring-track {
stroke: var(--border, rgba(139, 58, 26, 0.2));
}
[data-theme='dark'] .ai-quota-ring-track {
stroke: rgba(245, 244, 239, 0.18);
}
.ai-quota-ring-fill {
transition: stroke-dashoffset 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-quota-ring-fill.tone-ok {
stroke: var(--accent, #8b3a1a);
}
[data-theme='dark'] .ai-quota-ring-fill.tone-ok {
stroke: #d97757;
}
.ai-quota-ring-fill.tone-warn {
stroke: var(--warning, #b45309);
}
[data-theme='dark'] .ai-quota-ring-fill.tone-warn {
stroke: #f59e0b;
}
.ai-quota-ring-fill.tone-danger {
stroke: var(--danger, #b91c1c);
}
[data-theme='dark'] .ai-quota-ring-fill.tone-danger {
stroke: #ef4444;
}
.ai-quota-ring-text {
letter-spacing: -0.01em;
}
/* Popover displaying 5-Hour, Weekly & Monthly quota metrics */
.ai-quota-popover {
position: fixed;
z-index: 9999;
width: 284px;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border, #ddd9ce);
background: var(--surface, #f9f8f3);
color: var(--text-primary, #1c1b18);
box-shadow: var(--shadow-md, 0 8px 24px rgba(28, 27, 24, 0.14));
display: flex;
flex-direction: column;
gap: 10px;
animation: ai-quota-pop-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme='dark'] .ai-quota-popover {
background: #262624;
border-color: #3d3c38;
color: #f5f4ef;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
@keyframes ai-quota-pop-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ai-quota-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border, rgba(28, 27, 24, 0.1));
}
[data-theme='dark'] .ai-quota-pop-head {
border-bottom-color: rgba(245, 244, 239, 0.1);
}
.ai-quota-pop-title-group {
display: flex;
align-items: center;
gap: 6px;
}
.ai-quota-pop-title {
font-size: 12px;
font-weight: 600;
color: var(--text-primary, #1c1b18);
}
[data-theme='dark'] .ai-quota-pop-title {
color: #f5f4ef;
}
.ai-quota-tier-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 5px;
border-radius: 4px;
background: var(--accent-soft, rgba(139, 58, 26, 0.1));
color: var(--accent, #8b3a1a);
}
[data-theme='dark'] .ai-quota-tier-badge {
background: rgba(217, 119, 87, 0.16);
color: #d97757;
}
.ai-quota-sync-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 7px;
border-radius: 5px;
border: 1px solid var(--border, rgba(28, 27, 24, 0.14));
background: transparent;
color: var(--text-secondary, #5c5952);
font-family: inherit;
font-size: 11px;
cursor: pointer;
transition: background-color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-quota-sync-btn:hover:not(:disabled) {
background: var(--accent-soft, rgba(139, 58, 26, 0.08));
color: var(--text-primary, #1c1b18);
}
[data-theme='dark'] .ai-quota-sync-btn {
border-color: rgba(245, 244, 239, 0.16);
color: #b8b5ad;
}
[data-theme='dark'] .ai-quota-sync-btn:hover:not(:disabled) {
background: rgba(217, 119, 87, 0.14);
color: #f5f4ef;
}
.ai-quota-spin {
animation: ai-quota-rotate 0.8s linear infinite;
}
@keyframes ai-quota-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.ai-quota-pop-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ai-quota-pop-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.ai-quota-pop-item.featured {
padding: 7px 8px;
border-radius: 7px;
background: var(--accent-soft, rgba(139, 58, 26, 0.06));
border: 1px solid var(--accent-border, rgba(139, 58, 26, 0.16));
}
[data-theme='dark'] .ai-quota-pop-item.featured {
background: rgba(217, 119, 87, 0.1);
border-color: rgba(217, 119, 87, 0.24);
}
.ai-quota-pop-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11.5px;
}
.ai-quota-pop-label {
font-weight: 600;
color: var(--text-primary, #1c1b18);
}
[data-theme='dark'] .ai-quota-pop-label {
color: #f5f4ef;
}
.ai-quota-pop-pct {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.ai-quota-pop-pct.tone-ok {
color: var(--accent, #8b3a1a);
}
[data-theme='dark'] .ai-quota-pop-pct.tone-ok {
color: #d97757;
}
.ai-quota-pop-pct.tone-warn {
color: var(--warning, #b45309);
}
[data-theme='dark'] .ai-quota-pop-pct.tone-warn {
color: #f59e0b;
}
.ai-quota-pop-pct.tone-danger {
color: var(--danger, #b91c1c);
}
[data-theme='dark'] .ai-quota-pop-pct.tone-danger {
color: #ef4444;
}
.ai-quota-bar-track {
width: 100%;
height: 5px;
border-radius: 999px;
background: var(--border, rgba(28, 27, 24, 0.12));
overflow: hidden;
}
[data-theme='dark'] .ai-quota-bar-track {
background: rgba(245, 244, 239, 0.14);
}
.ai-quota-bar-fill {
height: 100%;
border-radius: 999px;
transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-quota-bar-fill.tone-ok {
background: var(--accent, #8b3a1a);
}
[data-theme='dark'] .ai-quota-bar-fill.tone-ok {
background: #d97757;
}
.ai-quota-bar-fill.tone-warn {
background: var(--warning, #b45309);
}
[data-theme='dark'] .ai-quota-bar-fill.tone-warn {
background: #f59e0b;
}
.ai-quota-bar-fill.tone-danger {
background: var(--danger, #b91c1c);
}
[data-theme='dark'] .ai-quota-bar-fill.tone-danger {
background: #ef4444;
}
.ai-quota-pop-sub {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 10.5px;
color: var(--text-secondary, #5c5952);
font-variant-numeric: tabular-nums;
}
[data-theme='dark'] .ai-quota-pop-sub {
color: #b8b5ad;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-track {
stroke: rgba(245, 244, 239, 0.18);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-ok {
stroke: #d97757;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-warn {
stroke: #f59e0b;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-danger {
stroke: #ef4444;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-popover {
background: #262624;
border-color: #3d3c38;
color: #f5f4ef;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-head {
border-bottom-color: rgba(245, 244, 239, 0.1);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-title,
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-label {
color: #f5f4ef;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-tier-badge {
background: rgba(217, 119, 87, 0.16);
color: #d97757;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-sync-btn {
border-color: rgba(245, 244, 239, 0.16);
color: #b8b5ad;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-sync-btn:hover:not(:disabled) {
background: rgba(217, 119, 87, 0.14);
color: #f5f4ef;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-item.featured {
background: rgba(217, 119, 87, 0.1);
border-color: rgba(217, 119, 87, 0.24);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-ok {
color: #d97757;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-warn {
color: #f59e0b;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-danger {
color: #ef4444;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-track {
background: rgba(245, 244, 239, 0.14);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-ok {
background: #d97757;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-warn {
background: #f59e0b;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-danger {
background: #ef4444;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-sub {
color: #b8b5ad;
}
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Lycero Mate — ThinkingBlock (reasoning accordion).
* Auto-expands while reasoning streams, collapses when finished.
* Uses design tokens from packages/ui/src/tokens.css.
* Animations 200ms ease-out (anti-slop: no bounce, no elastic). */
.lycero-thinking-block {
margin: 8px 0 10px 0;
border-radius: var(--radius-8, 8px);
border: 1px solid var(--color-border-subtle, #DDD9CE);
background-color: var(--color-bg-secondary, #F9F8F3);
overflow: hidden;
font-size: 12px;
transition:
border-color var(--transition-medium),
background-color var(--transition-medium);
}
.lycero-thinking-block.expanded {
border-color: var(--accent, #8B3A1A);
}
.lycero-thinking-block.collapsed {
/* gentle hover hint */
}
.lycero-thinking-block.collapsed:hover {
border-color: var(--border-hover, #BDB7A7);
}
.lycero-thinking-block.lycero-thinking-active {
/* animated gradient stripe when reasoning */
background-image: linear-gradient(
90deg,
var(--color-bg-secondary, #F9F8F3) 0%,
var(--bg-hover-accent, #F5EBE7) 50%,
var(--color-bg-secondary, #F9F8F3) 100%
);
background-size: 200% 100%;
animation: lycero-thinking-shimmer 2s linear infinite;
}
@keyframes lycero-thinking-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Dark mode: subtle terracotta-tinted shimmer */
@media (prefers-color-scheme: dark) {
.lycero-thinking-block.lycero-thinking-active {
background-image: linear-gradient(
90deg,
var(--surface, #2E2D2A) 0%,
var(--bg-hover-accent, #3D2A24) 50%,
var(--surface, #2E2D2A) 100%
);
}
}
.lycero-thinking-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary, #56544D);
user-select: none;
text-align: left;
font-family: inherit;
/* gentle hover */
}
.lycero-thinking-header:hover {
background-color: var(--bg-hover-subtle, #F1EEE5);
}
.lycero-thinking-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.lycero-thinking-pulse {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--accent, #8B3A1A);
display: inline-block;
position: relative;
opacity: 0.9;
}
.lycero-thinking-pulse::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid var(--accent, #8B3A1A);
opacity: 0.5;
animation: lycero-thinking-pulse 1.2s ease-out infinite;
}
@keyframes lycero-thinking-pulse {
0% { transform: scale(0.85); opacity: 0.7; }
100% { transform: scale(1.6); opacity: 0; }
}
.lycero-thinking-title {
font-weight: 600;
color: var(--text-primary, #1C1B18);
font-size: 12.5px;
letter-spacing: 0;
}
.lycero-thinking-meta {
font-size: 11px;
color: var(--text-muted, #6B6860);
}
.lycero-thinking-header-right {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--text-muted, #6B6860);
}
.lycero-thinking-caret {
transition: transform var(--transition-medium);
}
.lycero-thinking-caret.open {
transform: rotate(180deg);
}
.lycero-thinking-content {
padding: 8px 12px 10px 12px;
border-top: 1px solid var(--color-border-subtle, #DDD9CE);
max-height: 260px;
overflow-y: auto;
color: var(--text-secondary, #56544D);
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
font-size: 11.5px;
background-color: var(--color-bg-subtle, #F4F2EB);
}
.lycero-thinking-cursor {
display: inline-block;
width: 6px;
height: 13px;
margin-left: 3px;
background-color: var(--accent, #8B3A1A);
vertical-align: middle;
animation: lycero-thinking-blink 1s steps(2) infinite;
}
@keyframes lycero-thinking-blink {
50% { opacity: 0; }
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Lycero Mate — Floating Bubble Toolbar.
* Positioned absolutely inside the host's overlay portal. Sits above the
* user's text selection; flips below the selection when the top edge is
* clipped by the viewport. Animations 200ms ease-out (anti-slop). */
.lycero-mate-bubble {
position: fixed;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
background-color: var(--bg-elevated, #FFFFFF);
border: 1px solid var(--border, #DDD9CE);
border-radius: 10px;
box-shadow: 0 6px 20px -4px rgba(28, 27, 24, 0.12),
0 2px 6px -2px rgba(28, 27, 24, 0.08);
font-size: 12px;
font-weight: 500;
color: var(--text-primary, #1C1B18);
transform: translateY(-100%);
/* Native-render right-to-left scripts (Arabic / Hebrew) inside the bubble */
direction: inherit;
user-select: none;
/* Prevent selection clearing when clicking buttons */
-webkit-user-select: none;
pointer-events: auto;
animation: lycero-mate-bubble-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lycero-mate-bubble.lycero-mate-bubble-below {
transform: translateY(0);
}
.lycero-mate-bubble-btn {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
padding: 5px 10px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
color: var(--text-primary, #1C1B18);
cursor: pointer;
transition:
background-color var(--transition-fast, 150ms ease-out),
border-color var(--transition-fast, 150ms ease-out),
color var(--transition-fast, 150ms ease-out);
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.lycero-mate-bubble-btn:hover {
background-color: var(--bg-hover-subtle, #F1EEE5);
border-color: var(--border-hover, #BDB7A7);
}
.lycero-mate-bubble-btn:active {
background-color: var(--bg-hover-strong, #E8E3D6);
}
.lycero-mate-bubble-btn:focus-visible {
outline: 2px solid var(--accent, #8B3A1A);
outline-offset: 1px;
}
.lycero-mate-bubble-btn-cta {
color: var(--accent, #8B3A1A);
font-weight: 600;
}
.lycero-mate-bubble-btn-cta:hover {
background-color: var(--bg-hover-accent, #F5EBE7);
color: var(--accent-dark, #5F2812);
}
.lycero-mate-bubble-divider {
width: 1px;
height: 18px;
background-color: var(--border, #DDD9CE);
margin: 0 2px;
}
@keyframes lycero-mate-bubble-in {
0% {
opacity: 0;
transform: translateY(-100%) translateY(4px);
}
100% {
opacity: 1;
transform: translateY(-100%) translateY(0);
}
}
.lycero-mate-bubble.lycero-mate-bubble-below {
animation-name: lycero-mate-bubble-in-below;
}
@keyframes lycero-mate-bubble-in-below {
0% {
opacity: 0;
transform: translateY(-4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.lycero-mate-bubble {
background-color: var(--bg-elevated, #2E2D2A);
border-color: var(--border, #3D3B36);
box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.4),
0 2px 6px -2px rgba(0, 0, 0, 0.25);
}
.lycero-mate-bubble-btn:hover {
background-color: var(--bg-hover-subtle, #353431);
border-color: var(--border-hover, #4D4A42);
}
.lycero-mate-bubble-btn:active {
background-color: var(--bg-hover-strong, #3F3D38);
}
.lycero-mate-bubble-divider {
background-color: var(--border, #3D3B36);
}
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries. All rights reserved.
*
* Astryx Dynamic Capabilities Panel Styles
*/
.lycero-cap-panel {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
background-color: var(--surface);
color: var(--text-primary);
font-family: var(--gs-font-sans);
border-radius: var(--radius-8);
border: 1px solid var(--border);
box-sizing: border-box;
}
.lycero-cap-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.lycero-cap-title-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.lycero-cap-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lycero-cap-active-badge {
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-30);
background-color: var(--bg-hover-accent, #F5EBE7);
color: var(--color-ai-action, #8B3A1A);
border: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.lycero-cap-refresh-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background-color: var(--surface-subtle);
border: 1px solid var(--border);
border-radius: var(--radius-6);
padding: 4px 10px;
font-size: 11.5px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
flex-shrink: 0;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.lycero-cap-refresh-btn:hover:not(:disabled) {
background-color: var(--hover);
color: var(--text-primary);
border-color: var(--border-strong);
}
.lycero-cap-refresh-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.lycero-cap-spin {
animation: lycero-spin 1s linear infinite;
}
@keyframes lycero-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.lycero-cap-offline-banner {
display: flex;
align-items: flex-start;
gap: 10px;
background-color: var(--danger-bg, #FAEEE8);
border: 1px solid var(--danger-border, #E8C7BD);
border-radius: var(--radius-6);
padding: 10px 14px;
font-size: 13px;
color: var(--danger, #B43A28);
line-height: 1.45;
}
.lycero-cap-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.lycero-cap-card {
background-color: var(--surface-subtle);
border: 1px solid var(--border);
border-radius: var(--radius-8);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color var(--transition-fast);
}
.lycero-cap-card.active {
border-color: var(--color-border-brand, #8B3A1A);
background-color: var(--surface);
}
.lycero-cap-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.lycero-cap-card-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.lycero-cap-card-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.lycero-cap-card-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.lycero-cap-category-tag {
font-size: 10px;
padding: 1px 6px;
border-radius: var(--radius-4, 4px);
background-color: var(--hover);
color: var(--text-muted);
}
.lycero-cap-card-desc {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
margin: 0;
}
/* Astryx Toggle Switch */
.lycero-cap-toggle-label {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.lycero-cap-toggle-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.lycero-cap-toggle-track {
width: 38px;
height: 22px;
background-color: var(--border-strong);
border-radius: var(--radius-30);
transition: background-color var(--transition-fast);
position: relative;
}
.lycero-cap-toggle-input:checked + .lycero-cap-toggle-track {
background-color: var(--color-ai-action, #8B3A1A);
}
.lycero-cap-toggle-thumb {
width: 18px;
height: 18px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform var(--transition-fast);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.lycero-cap-toggle-input:checked + .lycero-cap-toggle-track .lycero-cap-toggle-thumb {
transform: translateX(16px);
}
/* Dynamic Configuration Form */
.lycero-cap-config-form {
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed var(--border);
display: flex;
flex-direction: column;
gap: 12px;
}
.lycero-cap-config-title {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.lycero-cap-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.lycero-cap-field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--text-primary);
}
.lycero-cap-field-desc {
font-size: 11px;
color: var(--text-muted);
}
.lycero-cap-select {
padding: 6px 10px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: var(--radius-6);
background-color: var(--surface);
color: var(--text-primary);
outline: none;
font-family: inherit;
transition: border-color var(--transition-fast);
}
.lycero-cap-select:focus {
border-color: var(--color-border-brand, #8B3A1A);
}
.lycero-cap-slider-wrap {
display: flex;
align-items: center;
gap: 12px;
}
.lycero-cap-slider {
flex: 1;
accent-color: var(--color-ai-action, #8B3A1A);
cursor: pointer;
}
.lycero-cap-slider-val {
font-size: 12px;
font-weight: 600;
color: var(--color-ai-action, #8B3A1A);
min-width: 24px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.lycero-cap-checkbox-row {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text-primary);
}
.lycero-cap-checkbox {
accent-color: var(--color-ai-action, #8B3A1A);
width: 16px;
height: 16px;
cursor: pointer;
}
.lycero-cap-empty {
text-align: center;
padding: 24px 16px;
color: var(--text-muted);
font-size: 13px;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Lycero Office design tokens — single source of truth for UI chrome colors.
* Theme switching: light defaults in :root, [data-theme='dark'] overrides,
* prefers-color-scheme fallback for system mode (no data-theme attribute).
* Per-app accents (--accent / --accent-dark / --accent-soft) live in each
* app's styles.css. Document content colors (paper, cells, exports, chart
* palettes) never live here and never reference these tokens.
*
* Astryx palette (DESIGN.md §2):
* Day — Matte Warm Ivory & Terracotta: #F4F2EB bg, #F9F8F3 paper,
* #1C1B18 ink, #DDD9CE border,
* #8B3A1A terracotta accent.
* Night — Claude-Warm Charcoal & Radiant Terracotta:
* #262624 bg (not #000), #2E2D2A paper,
* #F5F4EF ink, #403E3A border,
* #D97757 terracotta accent.
* Anti-slop: tints are warm (no cold blue/gray), and the brand terracotta is
* the only saturated hue in the chrome. */
:root {
--ui-scale: 1;
--docs-revision-bar: #c00000;
/* ── Day chrome (Warm Ivory) ─────────────────────────────────────────── */
--surface: #F9F8F3; /* paper — soft, gentle, anti-glare */
--surface-subtle: #F4F2EB; /* canvas background, behind paper */
--chrome-bg: #F4F2EB;
--canvas: #E8E4DA;
--border: #DDD9CE; /* hairline — thin, warm */
--border-subtle: #E5E1D6;
--border-strong: #C9C4B6;
--border-hover: #BDB7A7;
/* Warm-ink text scale. Each step is a tint darker / lighter than the
* previous, never pure black or pure white. */
--text: #1C1B18;
--text-primary: #1C1B18;
--text-secondary: #56544D;
--text-tertiary: #7A776C;
--text-muted: #6B6860;
--text-dim: #8E8B7E;
/* Hover/pressed/active — warm gray tints, never cool blue */
--hover: #EFECE3;
--pressed: #E8E4D9;
--active-bg: #E0DBCD;
--bg-hover: #EFECE3;
--bg-hover-subtle: #F1EEE5;
--bg-hover-strong: #E8E4D9;
--bg-hover-accent: #F5EBE7;
--bg-content: #FBFAF6;
--icon-muted: #A39E92;
/* Semantic states — terracotta-tinted, not blue/red */
--danger: #B43A28;
--danger-bg: #FAEEE8;
--danger-border: #E8C7BD;
--success: #4D6B3D;
--success-bg: #EEF3E4;
--success-border: #C9D7B7;
--search-hit-bg: #F5E6C8;
--search-hit-active-bg: #D97757;
--search-hit-active-ink: #FBFAF6;
/* Shadows — soft, warm, never harsh black */
--color-bg-overlay: rgb(28 27 24 / 45%);
--shadow-modal-strong: 0 20px 25px rgb(60 50 35 / 12%);
--shadow-btn-hover: 0 2px 8px rgb(60 50 35 / 12%);
--shadow-menu: 0 8px 24px rgb(60 50 35 / 14%);
/* ── AI panel & shared chrome aliases ────────────────────────────────── */
/* Typography: Be Vietnam Pro is the system font (DESIGN.md §3). Falls back
* to native UI sans (system fonts guarantee zero CLS). */
--gs-font-sans:
'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
--gs-font-mono:
'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', 'JetBrains Mono', Consolas,
sans-serif;
--color-btn-primary: #1C1B18;
--color-btn-primary-hover: #38362F;
--color-btn-primary-text: #FBFAF6;
--color-ai-action: #8B3A1A; /* terracotta brand */
--color-ai-action-hover: #6D2D14;
--color-ai-action-text: #FBFAF6;
--color-brand-secondary: #6B5A3E; /* warm olive — used rarely */
--color-text-primary: #1C1B18;
--color-text-secondary: #56544D;
--color-text-tertiary: #7A776C;
--color-bg-page: #F9F8F3;
--color-bg-subtle: #F4F2EB;
--color-border-default: #DDD9CE;
--color-border-strong: #C9C4B6;
--color-border-brand: #8B3A1A;
--color-error: #B43A28;
--color-error-hover: #8E2D1E;
/* ── Geometry ─────────────────────────────────────────────────────────── */
--radius-6: 6px;
--radius-8: 8px;
--radius-12: 12px;
--radius-16: 16px;
--radius-30: 30px;
/* ── Motion (Astryx easing per DESIGN.md §6) ──────────────────────────── */
/* cubic-bezier(0.16, 1, 0.3, 1) — gentle out-ease, never rubber-band */
--transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
--transition-medium: 200ms cubic-bezier(0.16, 1, 0.3, 1);
/* ── Type scale ───────────────────────────────────────────────────────── */
--text-body-lg: 18px;
--text-small: 14px;
--text-caption: 12px;
color-scheme: light;
}
/* ── Night chrome (Claude-Warm Charcoal) ────────────────────────────────── */
[data-theme='dark'] {
--surface: #2E2D2A; /* paper (elevated surface) */
--surface-subtle: #262624; /* canvas background */
--chrome-bg: #262624;
--canvas: #1F1E1C;
--border: #403E3A; /* warm charcoal, never cool */
--border-subtle: #35332F;
--border-strong: #4F4C46;
--border-hover: #5B574F;
--text: #F5F4EF; /* warm off-white, never pure white */
--text-primary: #F5F4EF;
--text-secondary: #C8C5BB;
--text-tertiary: #9A968A;
--text-muted: #8A8780;
--text-dim: #74716B;
--hover: #34322E;
--pressed: #3A3833;
--active-bg: #42403B;
--bg-hover: #34322E;
--bg-hover-subtle: #2F2D29;
--bg-hover-strong: #3A3833;
--bg-hover-accent: #3D2A24;
--bg-content: #1F1E1C;
--icon-muted: #6E6B65;
--danger: #D97757; /* terracotta-tinted danger in dark */
--danger-bg: #3D2A24;
--danger-border: #5B3D34;
--success: #88B074;
--success-bg: #2A3324;
--success-border: #43533A;
--search-hit-bg: #5C4A1F;
--search-hit-active-bg: #D97757;
--search-hit-active-ink: #1F1E1C;
--color-bg-overlay: rgb(0 0 0 / 65%);
--shadow-modal-strong: 0 20px 25px rgb(0 0 0 / 50%);
--shadow-btn-hover: 0 2px 8px rgb(0 0 0 / 40%);
--shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);
--color-btn-primary: #F5F4EF;
--color-btn-primary-hover: #D9D6CB;
--color-btn-primary-text: #1F1E1C;
--color-ai-action: #D97757; /* radiant terracotta in dark */
--color-ai-action-hover: #C46647;
--color-ai-action-text: #1F1E1C;
--color-brand-secondary: #B8A47E;
--color-text-primary: #F5F4EF;
--color-text-secondary: #C8C5BB;
--color-text-tertiary: #9A968A;
--color-bg-page: #2E2D2A;
--color-bg-subtle: #262624;
--color-border-default: #403E3A;
--color-border-strong: #4F4C46;
--color-border-brand: #D97757;
color-scheme: dark;
}
/* ── System dark fallback ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) {
--surface: #2E2D2A;
--surface-subtle: #262624;
--chrome-bg: #262624;
--canvas: #1F1E1C;
--border: #403E3A;
--border-subtle: #35332F;
--border-strong: #4F4C46;
--border-hover: #5B574F;
--text: #F5F4EF;
--text-primary: #F5F4EF;
--text-secondary: #C8C5BB;
--text-tertiary: #9A968A;
--text-muted: #8A8780;
--text-dim: #74716B;
--hover: #34322E;
--pressed: #3A3833;
--active-bg: #42403B;
--bg-hover: #34322E;
--bg-hover-subtle: #2F2D29;
--bg-hover-strong: #3A3833;
--bg-hover-accent: #3D2A24;
--bg-content: #1F1E1C;
--icon-muted: #6E6B65;
--danger: #D97757;
--danger-bg: #3D2A24;
--danger-border: #5B3D34;
--success: #88B074;
--success-bg: #2A3324;
--success-border: #43533A;
--search-hit-bg: #5C4A1F;
--search-hit-active-bg: #D97757;
--search-hit-active-ink: #1F1E1C;
--color-bg-overlay: rgb(0 0 0 / 65%);
--shadow-modal-strong: 0 20px 25px rgb(0 0 0 / 50%);
--shadow-btn-hover: 0 2px 8px rgb(0 0 0 / 40%);
--shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);
--color-btn-primary: #F5F4EF;
--color-btn-primary-hover: #D9D6CB;
--color-btn-primary-text: #1F1E1C;
--color-ai-action: #D97757;
--color-ai-action-hover: #C46647;
--color-ai-action-text: #1F1E1C;
--color-brand-secondary: #B8A47E;
--color-text-primary: #F5F4EF;
--color-text-secondary: #C8C5BB;
--color-text-tertiary: #9A968A;
--color-bg-page: #2E2D2A;
--color-bg-subtle: #262624;
--color-border-default: #403E3A;
--color-border-strong: #4F4C46;
--color-border-brand: #D97757;
color-scheme: dark;
}
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Office-style ScreenTip — themed via the shared tokens (light/dark automatic).
* The element is a singleton created by installScreenTips(); visibility is
* driven inline by the script, everything visual lives here. */
.ui-screentip {
position: fixed;
z-index: 100000;
max-width: 280px;
padding: 5px 10px;
border-radius: var(--radius-6);
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-primary);
font: 12px/1.45 var(--gs-font-sans);
box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
pointer-events: none;
visibility: hidden;
/* some tips carry embedded newlines (e.g. pdf note pins: contents + hint) */
white-space: pre-line;
}
.ui-screentip-kbd {
margin-left: 6px;
color: var(--text-tertiary);
}
.ui-screentip-detail {
margin-top: 2px;
color: var(--text-secondary);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Composer model chip + its upward popover (AiModelPicker). Chrome tokens only;
* each app imports this next to its other @lycero/ui sheets. */
.ai-model-picker {
display: inline-flex;
min-width: 72px;
flex: 0 1 auto;
}
.ai-model-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
max-width: 200px;
min-width: 0;
padding: 0 7px 0 6px;
flex: 0 1 auto;
border: 1px solid transparent;
border-radius: var(--radius-30);
background: none;
color: var(--text-secondary);
font-family: inherit;
font-size: var(--text-caption);
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.ai-model-chip:hover,
.ai-model-chip.open {
background: var(--hover);
color: var(--text);
}
.ai-model-chip:focus-visible {
outline: none;
border-color: var(--accent);
}
.ai-model-chip-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-model-chip-caret {
flex-shrink: 0;
color: var(--text-dim);
}
.gs-provider-logo {
flex-shrink: 0;
display: inline-flex;
width: 14px;
height: 14px;
color: var(--text);
}
.gs-provider-logo svg {
width: 100%;
height: 100%;
}
.ai-model-pop {
position: fixed;
z-index: 80;
display: flex;
flex-direction: column;
width: 260px;
max-height: min(420px, 70vh);
padding: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-8);
box-shadow: var(--shadow-menu);
font-size: 12px;
}
.ai-model-pop-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.ai-model-group + .ai-model-group {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--border-subtle);
}
.ai-model-group-head {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px 3px;
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
}
.ai-model-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 5px 8px 5px 28px;
border: none;
border-radius: var(--radius-6);
background: none;
color: var(--text);
font-family: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.ai-model-item:hover,
.ai-model-item:focus-visible {
background: var(--hover);
outline: none;
}
.ai-model-item.selected {
background: var(--accent-soft);
}
.ai-model-item-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-model-manage {
flex-shrink: 0;
margin-top: 4px;
padding-left: 8px;
border-top: 1px solid var(--border-subtle);
border-radius: 0 0 var(--radius-6) var(--radius-6);
color: var(--text-secondary);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Queued-messages strip above the AI composer (see AiQueueStrip.tsx) */
/*
* Every rule is anchored on .ai-queue-strip. Written unqualified, these names
* also matched the queued-edits panel that the Docs, HTML, Markdown and Slides
* stylesheets style under the same `.ai-queue-*` names — and their sheet loads
* after this one in every renderer entry, so the strip rendered one way in
* Sheets and PDF and another way in the other four apps, while our own rules
* reached into a component this sheet has nothing to do with. Scoping closes
* both directions; keep new rules under the root, because a bare
* `.ai-queue-head` here is a cross-component edit, not a local one.
*/
.ai-queue-strip {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 8px;
border-bottom: 1px solid var(--border-subtle);
background: var(--color-bg-subtle);
}
.ai-queue-strip .ai-queue-head {
display: flex;
align-items: center;
justify-content: space-between;
/* declared rather than absent: the apps style a `.ai-queue-head` too, and a
padding they set would otherwise reach this element by name alone */
padding: 0;
gap: 6px;
}
.ai-queue-strip .ai-queue-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 4px;
border: none;
border-radius: 5px;
background: none;
font-size: var(--text-caption);
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
}
.ai-queue-strip .ai-queue-toggle:hover {
background: var(--hover);
color: var(--color-text-primary);
}
.ai-queue-strip .ai-queue-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
border-radius: 5px;
background: none;
color: var(--icon-muted);
cursor: pointer;
}
.ai-queue-strip .ai-queue-clear:hover {
background: var(--hover);
color: var(--color-text-primary);
} /* holds the queue where it is; pressed = held */
.ai-queue-strip .ai-queue-pause {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
border-radius: 5px;
background: none;
color: var(--icon-muted);
cursor: pointer;
}
.ai-queue-strip .ai-queue-pause:hover {
background: var(--hover);
color: var(--color-text-primary);
}
.ai-queue-strip .ai-queue-pause[aria-pressed='true'] {
background: var(--hover);
color: var(--color-text-primary);
}
.ai-queue-strip .ai-queue-hint {
margin-right: auto;
font-size: var(--text-caption);
color: var(--color-text-secondary);
/* as above: the apps' `.ai-queue-hint` carries a padding of its own */
padding: 0;
}
.ai-queue-strip .ai-queue-items {
display: flex;
flex-direction: column;
gap: 3px;
margin: 0;
padding: 0;
list-style: none;
max-height: 120px;
overflow-y: auto;
}
.ai-queue-strip .ai-queue-item {
display: flex;
align-items: center;
gap: 4px;
}
.ai-queue-strip .ai-queue-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--text-caption);
color: var(--color-text-secondary);
}
.ai-queue-strip .ai-queue-edit {
flex: 1;
min-width: 0;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--canvas);
color: var(--color-text-primary);
font-size: var(--text-caption);
}
.ai-queue-strip .ai-queue-edit:focus {
outline: none;
border-color: var(--border-strong);
}
.ai-queue-strip .ai-queue-action {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px;
height: 20px;
border: none;
border-radius: 4px;
background: none;
color: var(--icon-muted);
cursor: pointer;
}
.ai-queue-strip .ai-queue-action:hover {
background: var(--hover);
color: var(--color-text-primary);
} /* reordering: hold a row to pick it up, Alt+arrows for keyboards */
.ai-queue-strip .ai-queue-item {
cursor: grab;
}
.ai-queue-strip .ai-queue-item:focus-visible {
outline: 1px solid var(--accent);
}
.ai-queue-strip .ai-queue-items.ai-queue-dragging,
.ai-queue-strip .ai-queue-items.ai-queue-dragging .ai-queue-item {
cursor: grabbing;
user-select: none;
}
.ai-queue-strip .ai-queue-item[data-dragging='true'] {
opacity: 0.55;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Shared Word-style color picker panel (packages/ui color-picker.tsx).
* Appearance only — anchor/fixed positioning comes from the per-app class
* passed through the className prop. Selection outlines use the app accent.
*
* Interactive elements use a doubled .gcp-palette prefix: the panel is
* anchored inside app ribbon rows whose generic resets (e.g. sheets'
* `.inline-tools button { border: none; height: 30px; }` and its :hover
* rules) would otherwise outrank single-class rules here. */
.gcp-palette {
display: block;
box-sizing: border-box;
width: 260px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: var(--shadow-modal-strong);
color: var(--text);
text-align: left;
cursor: default;
}
.gcp-palette.gcp-palette .gcp-auto {
display: block;
min-width: 0;
width: 100%;
height: 28px;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 0;
background: var(--surface);
color: var(--text);
font-size: 12.5px;
font-family: inherit;
cursor: pointer;
}
.gcp-palette.gcp-palette .gcp-auto:hover {
background: var(--hover);
}
/* Selected (color unset / no fill applied): the per-app accent tint, matching
the shared dropdown's selected option (each app's --accent-soft) */
.gcp-palette.gcp-palette .gcp-auto.selected {
background: var(--accent-soft);
}
.gcp-section-title {
margin: 12px 0 6px;
color: var(--text);
font-size: 12.5px;
font-weight: 500;
}
.gcp-section-title:first-child {
margin-top: 2px;
}
.gcp-theme-base,
.gcp-theme-shades,
.gcp-standard-row {
display: grid;
grid-template-columns: repeat(10, 20px);
column-gap: 4px;
row-gap: 0;
}
.gcp-theme-base {
margin-bottom: 8px;
}
.gcp-row {
display: contents;
}
.gcp-palette.gcp-palette .gcp-swatch {
display: block;
box-sizing: border-box;
min-width: 0;
width: 20px;
height: 20px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
border-radius: 0;
cursor: pointer;
}
.gcp-palette.gcp-palette .gcp-swatch:hover,
.gcp-palette.gcp-palette .gcp-swatch:focus-visible,
.gcp-palette.gcp-palette .gcp-swatch.selected {
position: relative;
z-index: 1;
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.gcp-palette.gcp-palette .gcp-more {
position: relative;
display: flex;
align-items: center;
gap: 8px;
margin: 12px -12px -10px;
padding: 9px 14px;
border: none;
border-top: 1px solid var(--border);
border-radius: 0 0 8px 8px;
background: none;
color: var(--text);
font-size: 12.5px;
font-weight: 400;
cursor: pointer;
}
.gcp-palette.gcp-palette .gcp-more:hover {
background: var(--hover);
}
.gcp-palette.gcp-palette .gcp-more-icon,
.gcp-palette.gcp-palette .gcp-more-icon:hover {
display: inline-flex;
min-width: 0;
width: auto;
height: auto;
padding: 0;
background: none;
line-height: 1;
}
/* Invisible but covering the whole row (not pointer-events: none): pointer
events must land on the input itself so callers' moreInputProps hooks
(onPointerDown arming / selection save) fire before the OS dialog opens. */
.gcp-more input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Shared select-replacement dropdown (Dropdown in dropdown.tsx): themed
* trigger + anchored popover. Colors are chrome tokens only; apps size the
* control via a class on the .gs-dd wrapper. */
.gs-dd {
position: relative;
display: inline-flex;
anchor-name: --gs-dd;
anchor-scope: --gs-dd;
}
.gs-dd-btn {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 6px;
width: 100%;
min-width: 0;
height: 26px;
/* right 5px: caret glyph right edge lands 6px from the outer edge, matching
* the format-pane caret alignment line */
padding: 0 5px 0 6px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.gs-dd-btn:focus-visible {
border-color: var(--accent);
outline: none;
}
.gs-dd-btn:disabled {
color: var(--text-dim);
cursor: default;
}
.gs-dd-value {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
}
.gs-dd-caret {
flex-shrink: 0;
display: flex;
color: var(--text-dim);
}
/* fixed + anchored so scroll-container overflow never clips the popover or
* its shadow; flips above the trigger near the viewport bottom */
.gs-dd-pop {
position: fixed;
position-anchor: --gs-dd;
top: calc(anchor(bottom) + 2px);
left: anchor(left);
min-width: anchor-size(width);
/* flip-inline: a popover wider than its trigger near the window's right edge would
* otherwise run offscreen and clip (fixed positioning clips at the viewport) —
* flipping right-aligns it to the trigger so it grows leftwards instead */
position-try-fallbacks:
flip-block,
flip-inline,
flip-block flip-inline;
position-visibility: anchors-visible;
z-index: 80;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 2px;
max-height: 320px;
overflow-y: auto;
padding: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-shadow: var(--shadow-menu);
}
/* with a filter box the popover stops scrolling itself: the box stays put
* above an inner scroller, so it never rides out of view with the list */
.gs-dd-pop.has-search {
overflow: hidden;
}
.gs-dd-list {
display: contents;
}
.gs-dd-pop.has-search .gs-dd-list {
display: flex;
flex-direction: column;
gap: 2px;
min-height: 0;
overflow-y: auto;
}
.gs-dd-search {
box-sizing: border-box;
flex-shrink: 0;
margin: 0 0 2px;
padding: 4px 6px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 12px;
outline: none;
}
.gs-dd-search:focus {
border-color: var(--accent);
}
.gs-dd-item {
display: flex;
align-items: center;
flex-shrink: 0;
border: none;
background: none;
color: var(--text);
border-radius: 3px;
padding: 5px 6px;
font-family: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.gs-dd-item.active {
background: var(--hover);
}
.gs-dd-item:disabled {
color: var(--text-dim);
cursor: default;
}
.gs-dd-item.selected {
background: var(--accent-soft);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Word for Mac "Collapse ribbon" (see ribbon-collapse.tsx for the markup contract) */
.ribbon-collapsible {
position: relative;
}
.ribbon-collapsible [data-ribbon-body] {
anchor-name: --ribbon-body;
}
.ribbon-collapsible.ribbon-collapsed [data-ribbon-body] {
display: none;
}
.ribbon-collapse-btn {
position: absolute;
position-anchor: --ribbon-body;
bottom: calc(anchor(bottom) + 3px);
right: calc(anchor(right) + 4px);
z-index: 61;
}
.ribbon-collapse-btn,
.ribbon-expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 18px;
padding: 0;
border: 0;
border-radius: 3px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
-webkit-app-region: no-drag;
}
.ribbon-collapse-btn:hover,
.ribbon-expand-btn:hover {
background: var(--hover);
color: var(--text);
}
.ribbon-expand-btn {
margin-left: 4px;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Block-level markdown in AI chat bubbles (tables, fenced code); inline chips stay per-app */
.ai-md-table-wrap {
overflow-x: auto;
margin: 0 0 16px;
}
.ai-md-table {
border-collapse: collapse;
font-size: 0.95em;
line-height: 1.45;
}
.ai-md-table th,
.ai-md-table td {
border: 1px solid var(--border);
padding: 4px 10px;
text-align: left;
vertical-align: top;
}
.ai-md-table th {
background: var(--surface-subtle);
font-weight: 600;
}
.ai-md-pre {
margin: 0 0 16px;
padding: 10px 12px;
border-radius: 6px;
background: var(--color-bg-subtle);
overflow-x: auto;
line-height: 1.5;
font-size: 13px;
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
}
.ai-md .ai-md-pre code {
padding: 0;
border-radius: 0;
background: none;
color: inherit;
font-size: inherit;
white-space: pre;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* AI panel text size (Settings → General). The chat log and composer are
scaled as a block so the per-app px type scale keeps its proportions;
the factor comes from applyAiPanelPrefs() via --ai-font-zoom. */
html[data-ai-font-size] .ai-chat,
html[data-ai-font-size] .ai-composer {
zoom: var(--ai-font-zoom, 1);
}
/* Move only the assistant; document navigation retains its existing ordering. */
html[data-ai-panel-side='right'] {
--ai-panel-border-left: 1px;
--ai-panel-border-right: 0px;
}
html[data-ai-panel-side='right'] .ai-dock {
order: 1;
}
html[data-ai-panel-side='right'] .ai-panel-resizer {
left: 0;
right: auto;
}
/* Sheets has a two-column grid instead of the other apps' flex docks. */
html[data-ai-panel-side='right'] .sheet-body {
grid-template-columns: minmax(0, 1fr) var(--copilot-width, 360px);
}
html[data-ai-panel-side='right'] .sheet-body > .copilot {
order: 1;
}
html[data-ai-panel-side='right'] .app-shell.copilot-collapsed .sheet-body {
grid-template-columns: minmax(0, 1fr) 34px;
}
html[data-ai-panel-side='right'] .ai-panel-collapse svg {
transform: scaleX(-1);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Quote block on a user bubble: the document selection the message targeted */
.ai-msg-scope {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 6px;
padding-left: 9px;
border-left: 2px solid var(--color-brand-secondary);
white-space: normal;
}
.ai-msg-scope-label {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--text-caption);
font-weight: 500;
color: var(--color-brand-secondary);
}
.ai-msg-scope-label::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.ai-msg-scope-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--text-caption);
line-height: 1.45;
color: var(--color-text-secondary);
word-break: break-word;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
.gs-imgview-mask {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--color-bg-overlay);
-webkit-app-region: no-drag;
}
.gs-imgview-img {
flex: none;
max-width: none;
transform-origin: center center;
cursor: grab;
user-select: none;
box-shadow: var(--shadow-menu);
}
.gs-imgview-img.dragging {
cursor: grabbing;
}
.gs-imgview-bar {
position: absolute;
top: 12px;
right: 16px;
z-index: 1;
display: flex;
align-items: center;
gap: 2px;
padding: 4px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-menu);
}
.gs-imgview-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 4px;
border: none;
border-radius: 6px;
background: none;
color: var(--text);
cursor: pointer;
}
.gs-imgview-btn:hover {
background: var(--hover);
}
.gs-imgview-btn.active {
color: var(--accent);
}
.gs-imgview-11 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.gs-imgview-zoom {
min-width: 44px;
text-align: center;
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--text-dim);
}
.gs-imgview-sep {
width: 1px;
height: 18px;
margin: 0 4px;
background: var(--border);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Per-app accent (word-blue family) + docs-only tokens.
* Chrome tokens (surface/text/border/…, AI panel --color-*) come from
* @lycero/ui/tokens.css; nothing here may shadow those names. */
:root {
--word-blue: #185abd;
--word-blue-dark: #124a9e;
--word-heading: #2f5496;
--accent: var(--word-blue);
--accent-dark: var(--word-blue-dark);
--accent-soft: #e8f1fb;
--docs-heading-3: #1f3864;
--docs-accent-ghost: rgb(24 90 189 / 10%);
--docs-copilot-bg-a: #f5f0ff;
--docs-copilot-bg-b: #eef6ff;
--docs-swatch-outline: rgb(0 0 0 / 15%);
--docs-swatch-outline-strong: rgb(0 0 0 / 25%);
--docs-swatch-border: #a6a6a6;
--docs-ins-ink: #166534;
--docs-ins-bg: rgb(22 101 52 / 6%);
--docs-del-ink: #b91c1c;
--docs-del-bg: rgb(185 28 28 / 6%);
--docs-ai-error: #c62828;
--docs-ai-error-border: rgb(198 40 40 / 45%);
--docs-ai-error-bg: rgb(198 40 40 / 8%);
--docs-ok-ink: #2e7d32;
--docs-ok-bg: #e6f2e6;
--docs-ok-border: #a5d6a7;
--docs-ok-dot: #2e9e44;
--docs-chip-bg: #f6f8fc;
--docs-brand-ghost: rgb(15 127 255 / 8%);
--docs-brand-ghost-weak: rgb(15 127 255 / 6%);
--docs-brand-ring: rgb(15 127 255 / 40%);
--docs-focus-ring: rgb(35 36 37 / 20%);
--docs-focus-ring-blue: rgb(74 141 246 / 30%);
--docs-input-focus: #0f7fff;
--docs-input-ring: rgb(15 127 255 / 10%);
--docs-error-ring: rgb(239 68 68 / 10%);
--docs-scroll-thumb: rgb(0 0 0 / 25%);
--docs-tooltip-bg: #232425;
--docs-tooltip-ink: #ffffff;
--docs-shimmer-base: #666666;
--docs-shimmer-hi: #d9d9d9;
--docs-statusbar-bg: #f3f4f6;
--docs-statusbar-border: #e1e4e8;
--docs-statusbar-hover: rgb(0 0 0 / 8%);
--docs-zoom-slider: #8a8886;
--docs-ruler-bg: #f3f2f1;
--docs-ruler-tick: #b9b9b9;
--docs-ruler-border: #d6d6d6;
--docs-ruler-ink: #666;
--docs-ruler-btn-bg: #e0e0e0;
--docs-ruler-btn-hover: #d0d0d0;
--docs-ruler-btn-border: #ccc;
--docs-ruler-btn-ink: #333;
--docs-ruler-tab-guide: #aaa;
--docs-ruler-zone: rgb(0 0 0 / 8%);
--docs-tstyle-border: #b8bcc4;
--docs-tstyle-header: #7f8b9d;
--docs-tstyle-row: #eef1f5;
--docs-gap-cut: #b6c2d2;
--docs-pv-canvas: #525659;
--docs-overlay: rgb(0 0 0 / 50%);
--docs-page-shadow: 0 1px 3px rgb(0 0 0 / 28%), 0 4px 16px rgb(0 0 0 / 10%);
--docs-gap-inset: inset 0 8px 8px -8px rgb(0 0 0 / 35%), inset 0 -3px 3px -3px rgb(0 0 0 / 18%);
--docs-shadow-menu: 0 8px 24px rgb(0 0 0 / 18%);
--docs-shadow-ctx: 0 8px 28px rgb(0 0 0 / 22%);
--docs-shadow-modal: 0 3px 30px rgb(0 0 0 / 8%);
--docs-shadow-modal-gs: 0 12px 40px rgb(0 0 0 / 16%);
--docs-shadow-chip: 0 2px 8px rgb(0 0 0 / 12%);
--docs-shadow-tooltip: 0 4px 6px rgb(0 0 0 / 10%);
--docs-shadow-composer: 0 6px 30px rgb(0 0 0 / 8%);
--docs-shadow-toast: 0 4px 16px rgb(0 0 0 / 18%);
/* brand-fixed chrome: identical in both themes */
--docs-on-accent: #fff;
--docs-on-accent-dim: rgb(255 255 255 / 75%);
--docs-comment-accent: #e8a33d;
--docs-badge-gradient: linear-gradient(135deg, #6a5cff 0%, #2b88f8 55%, #29c3a6 120%);
--docs-shadow-badge: 0 2px 6px rgb(74 92 255 / 25%);
--docs-shadow-badge-strong: 0 2px 6px rgb(74 92 255 / 35%);
--docs-chip-remove-bg: #000;
--docs-chip-remove-hover: #4b4e51;
--docs-chip-remove-ink: #fff;
/* table move handle floats over the always-white page: fixed colors */
--docs-table-handle-bg: #ffffff;
--docs-table-handle-hover: #f0f0f0;
--docs-table-handle-border: #b8bcc4;
--docs-table-handle-ink: #444444;
--docs-knob-dot: #fff;
--docs-toast-bg: rgb(35 35 37 / 92%);
--docs-toast-error-bg: rgb(196 49 75 / 95%);
--docs-toast-ink: #fff;
--docs-toast-ok: #34c759;
}
/* content-side constants: everything painted on the paper (including the AI
* change highlight). Light values here regardless of the UI theme; the dark
* page (.page-dark, further down) swaps in their darkPageColor() twins. A
* filled text box on the dark page re-enters this rule: its text contrasts
* with the box fill, not the paper, so everything inside it keeps the light
* values (the box is a light island; see the .page-dark block). */
:root,
.page-dark .doc-textbox-filled {
--ai-highlight: rgba(139, 58, 26, 0.08);
--ai-highlight-border: #8B3A1A;
--docs-paper: #ffffff;
--docs-paper-ink: #000;
--docs-paper-ink-dim: #333;
--docs-paper-ink-mid: #555;
--docs-paper-ink-soft: #777;
--docs-paper-ink-faint: #888;
--docs-paper-heading: #2f5496;
--docs-paper-h3: #1f3864;
--docs-paper-link: #0563c1;
--docs-paper-accent: #185abd;
--docs-paper-mark: #2b7cd3;
--docs-paper-grid: rgb(43 124 211 / 13%);
--docs-paper-hf-line: #d0d0d0;
--docs-paper-crop-mark: #b4b4b4;
--docs-paper-chip-bg: #fafafa;
--docs-paper-select-bg: #e8f1fb;
--docs-paper-stripe: #f0f0f0;
--docs-paper-chart-grid: #e0e0e0;
--docs-paper-chart-border: #d9d9d9;
--docs-paper-field-bg: rgb(0 0 0 / 7%);
--docs-paper-watermark: rgb(128 128 128 / 18%);
--docs-paper-rev-ink: #b91c1c;
--docs-paper-rev-ink-1: #1d4ed8;
--docs-paper-rev-ink-2: #15803d;
--docs-paper-rev-ink-3: #7e22ce;
--docs-paper-rev-ink-4: #0e7490;
--docs-paper-rev-ink-5: #c2410c;
--docs-paper-rev-ink-6: #be185d;
--docs-paper-rev-ink-7: #4d7c0f;
--docs-paper-rev-move: #15803d;
--docs-paper-rev-color-black: #000000;
--docs-paper-rev-color-blue: #0000ff;
--docs-paper-rev-color-turquoise: #00ffff;
--docs-paper-rev-color-brightGreen: #00ff00;
--docs-paper-rev-color-pink: #ff00ff;
--docs-paper-rev-color-red: #ff0000;
--docs-paper-rev-color-yellow: #ffff00;
--docs-paper-rev-color-white: #ffffff;
--docs-paper-rev-color-darkBlue: #000080;
--docs-paper-rev-color-teal: #008080;
--docs-paper-rev-color-green: #008000;
--docs-paper-rev-color-violet: #800080;
--docs-paper-rev-color-darkRed: #800000;
--docs-paper-rev-color-darkYellow: #808000;
--docs-paper-rev-color-gray50: #808080;
--docs-paper-rev-color-gray25: #c0c0c0;
--docs-paper-rev-color-classicRed: #c00000;
--docs-paper-rev-color-classicBlue: #0070c0;
--docs-paper-rev-color-lightBlue: #bdd6ee;
--docs-paper-rev-color-palePink: #f7c8d8;
--docs-paper-rev-color-lightYellow: #ffffcc;
--docs-paper-rev-color-lightOrange: #fbd5b5;
--docs-paper-cell-ins-bg: var(--docs-paper-rev-color-lightBlue);
--docs-paper-cell-del-bg: var(--docs-paper-rev-color-palePink);
--docs-paper-cell-merge-bg: var(--docs-paper-rev-color-lightYellow);
--docs-paper-ins-bg: rgb(22 163 74 / 8%);
--docs-paper-del-bg: rgb(220 38 38 / 8%);
--docs-paper-del-line: #dc2626;
--docs-paper-ppr: #f59e0b;
--docs-paper-ppr-ink: #b45309;
--docs-paper-ppr-bg: #fef3c7;
--docs-paper-ppr-border: #fcd34d;
--docs-paper-rpr: #c98a00;
--docs-paper-sdt-border: #a0c0e8;
--docs-paper-sdt-ink: #5080b0;
--docs-paper-sdt-bg: #eef4fb;
/* Word-style comment anchor tint (Word paints #ECFDD7 over white paper) */
--docs-paper-comment-bg: rgb(179 247 95 / 25%);
--docs-paper-comment-flash: rgb(130 171 81 / 45%);
--docs-paper-comment-line: #82ab51;
/* printed markup is document output, not chrome: fixed values, identical in both themes;
the balloon fill is the anchor tint composited over white (balloons sit on the gray strip) */
--docs-print-markup-band: #f2f2f2;
--docs-print-comment-fill: #ecfdd7;
--docs-print-comment-ink: #262626;
--docs-print-rev-line: #b91c1c;
--docs-print-rev-fill: #ffffff;
--docs-paper-ai-anchor-bg: rgb(80 128 220 / 14%);
--docs-paper-ai-anchor-line: #5080dc;
--docs-paper-xe-ink: #8a6d3b;
--docs-paper-xe-bg: #fdf6e3;
--docs-paper-xe-border: #d5c48a;
--docs-paper-hit-bg: #ffe28a;
--docs-paper-hit-active-bg: #ff9632;
--docs-paper-hit-active-ink: #fff;
}
/* Word flips automatic-colour text to white on dark shading (cell / paragraph /
run fill, table-style fill); document data, identical in both UI themes.
Explicit colours are inline declarations and win over this inherited ink. */
[data-ink='light'] {
--docs-paper-ink: #fff;
color: var(--docs-paper-ink);
}
/* the nearest fill wins: a light fill inside dark shading takes the paper ink
back; a light fill on its own touches nothing, so inherited explicit colours stay */
[data-ink='light'] [data-ink='dark'] {
--docs-paper-ink: #000;
color: var(--docs-paper-ink);
}
[data-theme='dark'] {
--word-blue: #4a9eff;
--word-blue-dark: #3a8eef;
--word-heading: #6cabf0;
--accent-soft: #1e3a5f;
--docs-heading-3: #7fa8e0;
--docs-accent-ghost: rgb(74 158 255 / 18%);
--docs-copilot-bg-a: #322c46;
--docs-copilot-bg-b: #253546;
--docs-swatch-outline: rgb(255 255 255 / 25%);
--docs-swatch-outline-strong: rgb(255 255 255 / 30%);
--docs-swatch-border: #666;
--docs-ins-ink: #6fcf8f;
--docs-ins-bg: rgb(111 207 143 / 10%);
--docs-del-ink: #f28b82;
--docs-del-bg: rgb(242 139 130 / 10%);
--docs-ai-error: #f28b82;
--docs-ai-error-border: rgb(242 139 130 / 45%);
--docs-ai-error-bg: rgb(242 139 130 / 12%);
--docs-ok-ink: #7bd88a;
--docs-ok-bg: #16351c;
--docs-ok-border: #2e5c36;
--docs-ok-dot: #34c759;
--docs-chip-bg: #2a2f36;
--docs-brand-ghost: rgb(74 158 255 / 14%);
--docs-brand-ghost-weak: rgb(74 158 255 / 10%);
--docs-brand-ring: rgb(74 158 255 / 45%);
--docs-focus-ring: rgb(228 228 228 / 25%);
--docs-focus-ring-blue: rgb(74 158 255 / 40%);
--docs-input-focus: #4a9eff;
--docs-input-ring: rgb(74 158 255 / 20%);
--docs-error-ring: rgb(242 139 130 / 20%);
--docs-scroll-thumb: rgb(255 255 255 / 28%);
--docs-tooltip-bg: #e4e4e4;
--docs-tooltip-ink: #1e1e1e;
--docs-shimmer-base: #8a8a8a;
--docs-shimmer-hi: #d0d0d0;
--docs-statusbar-bg: #252525;
--docs-statusbar-border: #3a3a3a;
--docs-statusbar-hover: rgb(255 255 255 / 10%);
--docs-zoom-slider: #8a8a8a;
--docs-ruler-bg: #2d2d2d;
--docs-ruler-tick: #6a6a6a;
--docs-ruler-border: #444;
--docs-ruler-ink: #a0a0a0;
--docs-ruler-btn-bg: #3a3a3a;
--docs-ruler-btn-hover: #4a4a4a;
--docs-ruler-btn-border: #555;
--docs-ruler-btn-ink: #d0d0d0;
--docs-ruler-tab-guide: #777;
--docs-ruler-zone: rgb(255 255 255 / 10%);
--docs-tstyle-border: #5a5f66;
--docs-tstyle-header: #8a93a3;
--docs-tstyle-row: #333;
--docs-gap-cut: #56606c;
--docs-pv-canvas: #1f1f1f;
--docs-overlay: rgb(0 0 0 / 55%);
--docs-page-shadow: 0 1px 3px rgb(0 0 0 / 60%), 0 4px 16px rgb(0 0 0 / 40%);
--docs-gap-inset: inset 0 8px 8px -8px rgb(0 0 0 / 65%), inset 0 -3px 3px -3px rgb(0 0 0 / 40%);
--docs-shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);
--docs-shadow-ctx: 0 8px 28px rgb(0 0 0 / 60%);
--docs-shadow-modal: 0 20px 50px rgb(0 0 0 / 65%);
--docs-shadow-modal-gs: 0 20px 50px rgb(0 0 0 / 65%);
--docs-shadow-chip: 0 2px 8px rgb(0 0 0 / 40%);
--docs-shadow-tooltip: 0 4px 6px rgb(0 0 0 / 30%);
--docs-shadow-composer: 0 6px 30px rgb(0 0 0 / 30%);
--docs-shadow-toast: 0 4px 16px rgb(0 0 0 / 45%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) {
--word-blue: #4a9eff;
--word-blue-dark: #3a8eef;
--word-heading: #6cabf0;
--accent-soft: #1e3a5f;
--docs-heading-3: #7fa8e0;
--docs-accent-ghost: rgb(74 158 255 / 18%);
--docs-copilot-bg-a: #322c46;
--docs-copilot-bg-b: #253546;
--docs-swatch-outline: rgb(255 255 255 / 25%);
--docs-swatch-outline-strong: rgb(255 255 255 / 30%);
--docs-swatch-border: #666;
--docs-ins-ink: #6fcf8f;
--docs-ins-bg: rgb(111 207 143 / 10%);
--docs-del-ink: #f28b82;
--docs-del-bg: rgb(242 139 130 / 10%);
--docs-ai-error: #f28b82;
--docs-ai-error-border: rgb(242 139 130 / 45%);
--docs-ai-error-bg: rgb(242 139 130 / 12%);
--docs-ok-ink: #7bd88a;
--docs-ok-bg: #16351c;
--docs-ok-border: #2e5c36;
--docs-ok-dot: #34c759;
--docs-chip-bg: #2a2f36;
--docs-brand-ghost: rgb(74 158 255 / 14%);
--docs-brand-ghost-weak: rgb(74 158 255 / 10%);
--docs-brand-ring: rgb(74 158 255 / 45%);
--docs-focus-ring: rgb(228 228 228 / 25%);
--docs-focus-ring-blue: rgb(74 158 255 / 40%);
--docs-input-focus: #4a9eff;
--docs-input-ring: rgb(74 158 255 / 20%);
--docs-error-ring: rgb(242 139 130 / 20%);
--docs-scroll-thumb: rgb(255 255 255 / 28%);
--docs-tooltip-bg: #e4e4e4;
--docs-tooltip-ink: #1e1e1e;
--docs-shimmer-base: #8a8a8a;
--docs-shimmer-hi: #d0d0d0;
--docs-statusbar-bg: #252525;
--docs-statusbar-border: #3a3a3a;
--docs-statusbar-hover: rgb(255 255 255 / 10%);
--docs-zoom-slider: #8a8a8a;
--docs-ruler-bg: #2d2d2d;
--docs-ruler-tick: #6a6a6a;
--docs-ruler-border: #444;
--docs-ruler-ink: #a0a0a0;
--docs-ruler-btn-bg: #3a3a3a;
--docs-ruler-btn-hover: #4a4a4a;
--docs-ruler-btn-border: #555;
--docs-ruler-btn-ink: #d0d0d0;
--docs-ruler-tab-guide: #777;
--docs-ruler-zone: rgb(255 255 255 / 10%);
--docs-tstyle-border: #5a5f66;
--docs-tstyle-header: #8a93a3;
--docs-tstyle-row: #333;
--docs-gap-cut: #56606c;
--docs-pv-canvas: #1f1f1f;
--docs-overlay: rgb(0 0 0 / 55%);
--docs-page-shadow: 0 1px 3px rgb(0 0 0 / 60%), 0 4px 16px rgb(0 0 0 / 40%);
--docs-gap-inset: inset 0 8px 8px -8px rgb(0 0 0 / 65%), inset 0 -3px 3px -3px rgb(0 0 0 / 40%);
--docs-shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);
--docs-shadow-ctx: 0 8px 28px rgb(0 0 0 / 60%);
--docs-shadow-modal: 0 20px 50px rgb(0 0 0 / 65%);
--docs-shadow-modal-gs: 0 20px 50px rgb(0 0 0 / 65%);
--docs-shadow-chip: 0 2px 8px rgb(0 0 0 / 40%);
--docs-shadow-tooltip: 0 4px 6px rgb(0 0 0 / 30%);
--docs-shadow-composer: 0 6px 30px rgb(0 0 0 / 30%);
--docs-shadow-toast: 0 4px 16px rgb(0 0 0 / 45%);
}
}
* {
box-sizing: border-box;
}
/* UI CJK fonts per language (documentElement.lang is set at bootstrap and on switch);
* the zh expansion must keep the historical stack byte-identical */
:root {
--ui-cjk: 'PingFang SC', 'Microsoft YaHei';
}
:root:lang(ja) {
--ui-cjk: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo';
}
:root:lang(ko) {
--ui-cjk: 'Apple SD Gothic Neo', 'Malgun Gothic';
}
:root:lang(zh-TW) {
--ui-cjk: 'PingFang TC', 'Microsoft JhengHei';
}
html,
body,
#root {
height: 100%;
margin: 0;
}
body {
font-family:
'Segoe UI',
-apple-system,
BlinkMacSystemFont,
var(--ui-cjk),
sans-serif;
color: var(--text);
background: var(--chrome-bg);
font-size: 13px;
-webkit-font-smoothing: antialiased;
/* The document itself never scrolls: a too-wide ribbon (or any other
overflowing chrome) must scroll inside its own container, not drag the
whole page sideways. */
overflow: hidden;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
}
button {
font-family: inherit;
}
/* ================= title bar (doc name centered) ================= */
.qa-btn {
width: 30px;
height: 28px;
border: none;
background: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
color: var(--text-primary);
}
.qa-btn svg {
display: block;
margin: 0 auto;
}
.qa-btn:hover:not(:disabled) {
background: var(--hover);
}
.qa-btn:disabled {
color: var(--text-tertiary);
cursor: default;
}
/* ================= ribbon ================= */
.ribbon {
flex-shrink: 0;
background: var(--chrome-bg);
border-bottom: 1px solid var(--border-strong);
user-select: none;
/* shared toolbar ink (glyphs, letterforms, labels) — same as sheets/slides */
color: var(--text-primary);
}
.ribbon-tabs {
display: flex;
align-items: center;
/* same tab-row metrics as PowerPoint's ribbon (slides app): 5px top inset,
no bottom padding — the active tab's underline sits on the row's edge */
padding: 5px 10px 0;
gap: 2px;
/* the title-bar row was removed; the tab row doubles as the frameless-window drag area */
-webkit-app-region: drag;
user-select: none;
}
.ribbon-tabs button,
.ribbon-tabs .file-tab-wrap,
.ribbon-tabs .autosave-toggle,
.ribbon-tabs .qa-btn {
-webkit-app-region: no-drag;
}
/* While a popover is open the row must deliver presses (drag regions swallow
them), so outside-press dismissal can see presses on the blank band */
html.lycero-popover-open .ribbon-tabs {
-webkit-app-region: no-drag;
}
.ribbon-tabs-mac {
padding-left: 84px; /* room for traffic lights */
}
.ribbon-tabs-win {
padding-right: 150px; /* room for windows caption buttons overlay */
}
.ribbon-file {
max-width: 30%;
font-size: 12px;
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 6px;
}
.ribbon-tab {
position: relative;
border: none;
background: none;
padding: 7px 9px 6px;
font-size: 13px;
/* every tab label is semibold, not just the active one */
font-weight: 600;
color: inherit;
cursor: pointer;
/* transparent border keeps the row height; the visible underline is the
* ::after, sized to the label text rather than the padded button */
border-bottom: 2.5px solid transparent;
border-radius: 4px 4px 0 0;
}
/* hovering a tab tints the label, it doesn't paint a box */
.ribbon-tab:hover {
color: var(--word-blue);
}
.ribbon-tab.active {
color: var(--word-blue);
font-weight: 600;
}
/* active underline: exactly the text width (insets = horizontal padding),
* ends slightly rounded — not a full capsule */
.ribbon-tab.active::after {
content: '';
position: absolute;
left: 13px;
right: 13px;
bottom: -2.5px;
height: 2.5px;
border-radius: 1px;
background: var(--word-blue);
}
.ribbon-tab-file {
color: var(--docs-on-accent);
background: var(--word-blue);
border-radius: 4px;
padding: 6px 16px;
margin-right: 6px;
}
.ribbon-tab-file:hover,
.ribbon-tab-file.open {
background: var(--word-blue-dark);
}
.file-tab-wrap {
position: relative;
}
.file-menu {
position: absolute;
top: calc(100% + 2px);
left: 0;
z-index: 60;
min-width: 210px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 5px;
}
.file-menu button {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border: none;
background: none;
padding: 8px 12px;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
color: var(--text);
}
.file-menu button:hover:not(:disabled) {
background: var(--hover);
}
.file-menu button:disabled {
opacity: 0.4;
cursor: default;
}
.file-menu-sep {
height: 1px;
margin: 4px 6px;
background: var(--border);
}
.file-menu-key {
color: var(--text-dim);
font-size: 12px;
}
.ribbon-tabs-spacer {
flex: 1;
}
/* Word-style top-right cluster: Comments toggle + Editing/Reviewing/Viewing mode */
.ribbon-mode-cluster {
display: flex;
align-items: center;
gap: 4px;
margin-right: 6px;
}
.ribbon-mode-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 12px;
line-height: 18px;
white-space: nowrap;
cursor: pointer;
}
.ribbon-mode-btn:hover:not(:disabled) {
background: var(--hover);
}
.ribbon-mode-btn.on,
.ribbon-mode-btn.open {
background: var(--active-bg);
border-color: var(--border-strong);
}
.ribbon-mode-btn:disabled {
opacity: 0.45;
cursor: default;
}
.ribbon-mode-caret {
font-size: 9px;
color: var(--text-dim);
}
.mode-menu-wrap {
position: relative;
}
/* Show Comments: the label toggles, the caret picks Contextual / List */
.ribbon-mode-split {
display: flex;
}
.ribbon-mode-split > .ribbon-mode-btn:first-child {
border-radius: 6px 0 0 6px;
}
.ribbon-mode-split > .mode-menu-wrap > .ribbon-mode-btn {
border-radius: 0 6px 6px 0;
border-left: 0;
padding: 2px 5px;
}
.mode-menu {
left: auto;
right: 0;
}
.mode-menu button {
justify-content: flex-start;
}
.mode-menu .mode-menu-check {
display: inline-block;
width: 16px;
color: var(--accent);
}
/* the cluster labels give way before the tabs start overflowing */
@media (max-width: 1280px) {
.ribbon-mode-text {
display: none;
}
.ribbon-mode-cluster .mode-menu-wrap .ribbon-mode-text {
display: inline;
}
}
.qa-sep {
width: 1px;
height: 16px;
margin: 0 6px;
background: var(--border-strong);
flex-shrink: 0;
}
.copilot-btn {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--border);
background: linear-gradient(135deg, var(--docs-copilot-bg-a), var(--docs-copilot-bg-b));
border-radius: 14px;
padding: 4px 14px;
font-size: 12.5px;
cursor: pointer;
color: var(--text);
}
.copilot-btn:hover,
.copilot-btn.active {
border-color: var(--word-blue);
color: var(--word-blue);
}
/* AI entry points share the app icon (used by the Ribbon AI button and the AI panel title) */
.app-badge {
display: block;
width: 22px;
height: 22px;
border-radius: 7px;
box-shadow: var(--docs-shadow-badge);
}
/* Lycero brand logo (Ribbon AI button and AI panel title) */
.lycero-badge {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
}
.ai-panel-title .lycero-badge {
width: 18px;
height: 18px;
}
/* ---- ribbon body ---- */
.ribbon-body {
display: flex;
align-items: stretch;
/* band metrics shared with the slides ribbon; the 5px scrollbar lane below
is carved out of the bottom padding so the 80px band stays unchanged */
padding: 6px 12px 1px;
/* HARD-fixed height, not min-height: the ribbon height stays constant across
tabs, so switching tabs or auto-jumping to Table Layout when the cursor
enters a table never pushes the editing area below. A tab that outgrows this must
compact its own content instead. */
height: 80px;
/* Groups never shrink below content, so a narrow window overflows the row:
scroll it inside the ribbon instead of stretching the document (matching
the sheets/slides ribbons). Dropdown panels are NOT clipped by this —
they escape the scroll container via anchor positioning (see
.rb-split-wrap). */
/* `scroll`, not `auto`: styled scrollbars are classic (non-overlay), so
`scroll` keeps the 5px lane reserved even without overflow and crossing
the overflow threshold cannot cause a vertical layout jump (same
reasoning as the sheets ribbon). */
overflow-x: scroll;
overflow-y: hidden;
}
/* Slim visible scrollbar so mouse users can reach overflowed groups
(#55 precedent from the sheets ribbon). */
.ribbon-body::-webkit-scrollbar {
height: 5px;
}
.ribbon-body::-webkit-scrollbar-track {
background: transparent;
}
.ribbon-body::-webkit-scrollbar-thumb {
border-radius: 2.5px;
background: var(--docs-scroll-thumb);
}
.ribbon-group {
display: flex;
flex-direction: column;
justify-content: center;
/* never shrink below content — squeezed groups paint over each other */
flex-shrink: 0;
padding: 2px 4px;
}
.ribbon-group-items {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
}
/* Word for Mac shows no group captions under the ribbon */
.ribbon-group-label {
display: none;
}
.ribbon-sep {
width: 1px;
/* the overflowing ribbon row squeezes shrinkable items first — without
this the 1px separators collapse to 0 and vanish (slides ribbon parity) */
flex-shrink: 0;
background: var(--border);
/* 2px matches the groups' vertical padding, so the line spans exactly the
tallest group content (the clipboard stack / two-row font block) instead
of stopping short of it — same inset across all three apps */
margin: 2px 6px;
}
.ribbon-placeholder {
align-self: center;
color: var(--text-dim);
font-size: 12.5px;
padding: 0 14px;
}
/* big paste button */
.rb-big {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
border: none;
background: none;
border-radius: 4px;
/* PowerPoint-density: minimal side padding (slides ribbon parity) */
padding: 4px 7px 6px;
font-size: 12px;
/* no tab wrapping: wrapping in narrow windows makes the ribbon taller, causing height jumps when switching tabs */
white-space: nowrap;
cursor: pointer;
color: var(--text);
}
.rb-big-icon {
min-height: 28px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
}
/* hover/open paint only the icon row — the label below
* stays outside the gray. The box spans the whole button width (align-self
* stretch + horizontal bleed), not just the icon content. Negative margins
* cancel the bleed so button layout/alignment is unchanged. */
.rb-big .rb-big-icon {
align-self: stretch;
border-radius: 4px;
padding: 3px 4px;
margin: 0 -4px;
}
/* ---- Compact ribbon (⌥⌘K / Ctrl+Alt+K), see #362 ----
* The middle density: the band stays and every command stays reachable, it
* just drops to icon-only on a shorter band. The three defences above
* (nowrap on .rb-big, flex-shrink: 0 on .ribbon-group, overflow-x: scroll on
* .ribbon-body) all still apply — icon-only narrows the buttons, so a narrow
* window packs more of them in before the row overflows.
*/
.ribbon-compact .ribbon-body {
/* Same fixed-height contract as the full band, only shorter: switching tabs
(including the auto-jump to Table Layout) must still never resize the row.
38px was measured holding 51px of content — the font and size pickers
stacked, style cards at 62px, split carets under their buttons — and
`overflow-y: hidden` sliced the difference off instead of scrolling it,
which is how the font picker ended up cut through the middle. Every tab
has been measured since; 45px is the smallest that holds all eight with
nothing clipped. */
height: 45px;
padding-top: 5px;
padding-bottom: 1px;
}
.ribbon-compact .rb-big {
/* The label is taken out of flow entirely (below), so the only things still
adding height are the icon, the column gap and the vertical padding. The
gap was never dropped here even though the comment claimed it was: the
button came out 40px tall inside a 38px band, and `overflow-y: hidden` on
`.ribbon-body` sliced the bottom off it — the font and size pickers were
cut in half and every icon row lost its lower edge. */
gap: 0;
padding: 2px 5px;
}
.ribbon-compact .rb-big-icon {
/* 28px of icon, plus this block's own 3px top and bottom padding, was 34px
before the group's borders were counted. */
min-height: 22px;
flex: none;
}
/* Keep the label in the accessibility tree and in the DOM (Playwright's
* hasText and getByRole(name) both read it) but take it out of the visual
* flow. display: none here would strip the accessible name and break the
* getByRole('button', { name }) selectors across the e2e suite. */
.ribbon-compact .rb-big > span:not(.rb-big-icon) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* the icon row is the whole button now, so let the hover/open paint cover it */
.ribbon-compact .rb-big .rb-big-icon {
align-self: stretch;
/* This padding, not the icon, is what put every button at 38px inside a
33px band: the glyph is ~26px and 3px of padding on each side took it to
32, which plus the button's own padding is a slice off every icon row. */
padding: 1px 3px;
margin: 0 -2px;
}
/* Groups and separators centre on the shorter band. */
.ribbon-compact .ribbon-group {
padding: 0 3px;
}
/* The table ribbon groups its tools in .table-tool-group (min-width 66px), not
* .ribbon-group — without this they keep the full-band inset and the band ends
* up wider than the content it holds. */
/* These three were never compact-styled, and they are what overflowed: the
* style gallery's cards are a fixed 62px tall with a 62px box to match, and the
* font group is a column that grows to whatever its two pickers need. Measured
* in the compact band they came out at 62-64px starting at top:-13 — taller
* than the 38px band, so `overflow-y: hidden` sliced the font and size pickers
* in half and cut the top off every style card. The band was never too short;
* these were never made shorter.
*
* Scoped to `.style-gallery .style-card` (the inline row): the overflow menu
* reuses the same card, and the unscoped rule crushed its 74×62 cards to
* 46×30 there too — the one place the full preview was still meant to show. */
.ribbon-compact .style-gallery .style-card {
/* Label-only at 30px: the card is a column of the style's own preview (up
* to 20px type) over the 10.5px name, which is ~34px into a 28px box — both
* halves clipped, neither readable. The name is what identifies the command
* on a band of textless icons, so it stays and the preview goes (the full
* preview lives on in the overflow menu and the styles pane). Width follows
* the name instead of a fixed 46px, which ellipsized "No Spacing" even
* though showing the name is now the card's whole job. */
width: auto;
min-width: 46px;
height: 30px;
padding: 0 7px;
}
/* The preview leaves the flow entirely. The rb-big label treatment (absolute
* + clip-path) also works visually, but an absolutely-positioned box's
* containing block is the wrap (the nearest positioned ancestor), and on CI
* Linux the wrap's scrollable overflow then grew by the stacked rows' worth
* of previews, inflating ribbon-body's scrollHeight past the band. display:
* none has no containing block at all; the button's accessible name comes
* from the label either way. */
.ribbon-compact .style-gallery .style-card-preview {
display: none;
}
/* Every control the compact band has to hold was measured, not guessed: with
* 38px of button and a 33px content box, *every* tab clipped by at least 5px.
* These are the ones that needed more than the icon padding above. */
.ribbon-compact .style-gallery-more {
/* 62px, matching the full-height cards it sits beside — but the cards are
30px in compact mode now, and this one was left behind. */
height: 30px;
}
/* Split buttons (Paste Special, font colour, ...) stack a caret under the
* button: `.rb-big-split` is a column, so 32 + 17 = 49px and the caret alone
* accounts for 17px of the 51px group that was overflowing Home. Compact puts
* the caret beside the button, where it was always meant to be. */
.ribbon-compact .rb-big-split {
flex-direction: row;
align-items: stretch;
}
.ribbon-compact .rb-big-split-caret {
margin: 0 0 0 2px;
padding: 1px 2px;
}
/* `.rb-col` is the same shape as `.rb-font-group`: a column of controls that
* fits a 38px band only by going side by side. Home and Insert both carry one. */
.ribbon-compact .rb-col {
flex-direction: row;
align-items: center;
gap: 4px;
}
/* Ink: swatches (16px) stacked over widths (22px) with a 4px gap is 42px. */
.ribbon-compact .ink-settings {
flex-direction: row;
gap: 8px;
}
/* Pen slots stack a 28px glyph over the stroke bar: 58px in a 40px band. */
.ribbon-compact .ink-pen-slot {
flex-direction: row;
width: auto;
height: 32px;
padding: 1px 4px;
gap: 4px;
}
.ribbon-compact .ink-pen-bar {
width: 14px;
}
.ribbon-compact .ink-pen-slot > .rb-caret-svg {
position: static;
}
/* Page Layout: two columns each stacking two controls, 28 + 5 + 28 = 61px. */
.ribbon-compact .layout-para {
gap: 6px;
}
.ribbon-compact .layout-col {
flex-direction: row;
gap: 4px;
}
/* The font and size pickers are two 28px controls stacked in a column, so the
* group is 28 + 4 + 28 = 60px before padding — taller than the 38px band on
* its own, and the reason the font picker was cut through the middle. Side by
* side they are 28px, which is what every compact ribbon does anyway. */
.ribbon-compact .rb-font-group {
flex-direction: row;
align-items: center;
gap: 3px;
}
.ribbon-compact .style-gallery {
height: 30px;
}
.ribbon-compact .table-tool-group {
min-width: 0;
padding: 2px 4px;
}
/* Split buttons stack a caret beside the icon; without the label row the pair
* needs to sit on one line. */
.ribbon-compact .rb-caret-svg {
margin-left: 2px;
}
/* The table tabs stack two rows of controls (font block, cell size grid), which
* cannot compress to 38px. Let that content scroll inside the band instead of
* overflowing it and pushing the document down — the band itself keeps its
* fixed height, so switching to a table tab still never resizes the row. */
.ribbon-compact .table-ribbon-body {
overflow-y: auto;
}
/* the dropdown chevron sits beside the icon (top row), not the label */
.rb-caret-svg {
flex-shrink: 0;
}
.rb-big-icon .rb-caret-svg {
display: block;
margin-left: 3px;
color: var(--text-dim);
}
.rb-big-icon-colored {
position: relative;
}
.rb-big-icon-colored .rb-color-bar {
position: absolute;
left: 1px;
right: 1px;
bottom: -3px;
width: auto;
border: 1px solid var(--docs-swatch-outline);
}
/* AI badge marking AI-backed entry points (ribbon buttons and context-menu items), same look as slides */
.copilot-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 7px;
color: var(--docs-on-accent);
background: var(--docs-badge-gradient);
box-shadow: var(--docs-shadow-badge-strong);
}
.copilot-badge-menu {
width: 16px;
height: 16px;
border-radius: 5px;
margin-right: 6px;
flex-shrink: 0;
}
.rb-big:hover:not(:disabled) .rb-big-icon {
background: var(--hover);
}
.rb-big:disabled {
opacity: 0.4;
cursor: default;
}
/* Big split button (Home ▸ Paste): the icon half runs the default action,
the label half opens the menu, like Word's Paste. */
.rb-big-split {
flex-direction: column;
align-items: stretch;
}
.rb-big-split > .rb-big {
padding-bottom: 0;
}
.rb-big-split-caret {
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
border: none;
background: none;
border-radius: 4px;
margin: 2px 3px 0;
padding: 1px 4px 2px;
font-size: 12px;
white-space: nowrap;
color: var(--text);
cursor: pointer;
}
.rb-big-split-caret:hover:not(:disabled),
.rb-big-split-caret.active {
background: var(--hover);
}
.rb-big-split-caret:disabled {
opacity: 0.4;
cursor: default;
}
.paste-menu {
min-width: 200px;
}
.spacing-menu.paste-menu button {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.spacing-menu.paste-menu button > svg {
flex-shrink: 0;
}
/* Active state paints only the gray icon plate — ink stays the standard #232425 */
.rb-big.active .rb-big-icon {
background: var(--active-bg);
}
/* The Lycero AI entry keeps a black label even while the panel is open. */
.rb-big.ai-entry.active {
color: var(--text);
}
/* The AI entry buttons read as one piece: hover/press tint the whole button
(icon + label together), unlike the other tall buttons where only the icon
row is painted. */
.rb-big.ai-entry {
border-radius: 4px;
}
.rb-big.ai-entry:hover:not(:disabled) {
background: var(--hover);
}
.rb-big.ai-entry.active {
background: var(--active-bg);
}
.rb-big.ai-entry:hover:not(:disabled) .rb-big-icon,
.rb-big.ai-entry.active .rb-big-icon {
background: transparent;
}
.rb-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.rb-small {
display: flex;
align-items: center;
gap: 5px;
border: none;
background: none;
border-radius: 3px;
padding: 3px 8px;
font-size: 12px;
text-align: left;
white-space: nowrap;
cursor: pointer;
color: var(--text);
}
.rb-small svg {
flex-shrink: 0;
/* 14px glyphs, matching the slides/sheets clipboard stacks */
width: 14px;
height: 14px;
color: var(--text-primary);
/* CSS resizes these below their attr size — re-pin the painted stroke
(1.43 units × 14/16 ≈ 1.25px) */
stroke-width: 1.43;
}
.rb-small:hover:not(:disabled) {
background: var(--hover);
}
.rb-small.active {
background: var(--active-bg);
}
.rb-small:disabled {
opacity: 0.4;
cursor: default;
}
.rb-font-group {
flex-direction: column;
align-items: stretch;
gap: 4px;
justify-content: center;
}
.rb-row {
display: flex;
align-items: center;
gap: 3px;
}
.rb-select {
height: 28px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
font-size: 12px;
padding: 0 4px;
color: var(--text);
}
.rb-select:disabled {
opacity: 0.55;
}
.rb-font-family {
width: 128px;
}
.rb-font-size {
width: 44px;
}
/* hide the native number spinner: the grow/shrink font buttons next to the
input already cover stepping */
.rb-font-size::-webkit-outer-spin-button,
.rb-font-size::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* the combobox inputs and their carets render as one bordered control, Word-style */
.rb-font-size,
.rb-font-family {
border-right: none;
border-radius: 3px 0 0 3px;
}
/* double class beats the base .rb-caret rules defined further down */
.rb-caret.rb-combo-caret {
width: 18px;
height: 28px;
border: 1px solid var(--border-strong);
border-left: none;
border-radius: 0 3px 3px 0;
background: var(--surface);
}
.rb-caret.rb-combo-caret:hover:not(:disabled) {
background: var(--hover);
}
.rb-icon {
min-width: 28px;
height: 30px;
border: none;
background: none;
border-radius: 3px;
/* letter glyphs (I/U/ab/Aa/A) share 15px/500: matched to the svg icons'
1.5px stroke by INTEGRATED ink mass, not run-length — with mac's
antialiased font smoothing a text stem's peak alpha sits below a
geometric stroke's, so 450 (same nominal width) still reads thinner while
500 lands on the svg legs' 1.29–1.38 effective width. B keeps its
semantic 700 (pinned below — an inherited weight makes "bolder" overshoot) */
font-size: 15px;
font-weight: 500;
cursor: pointer;
color: var(--text);
padding: 0 4px;
/* flex-center the content: buttons whose svg is followed by an inline caret
(line spacing / shading / borders) otherwise sit on baseline math and land
a couple px off the plain icon buttons (align left/center/right/justify) */
display: inline-flex;
align-items: center;
justify-content: center;
}
.rb-icon b {
font-weight: 700;
}
.rb-icon:hover:not(:disabled) {
background: var(--hover);
}
.rb-icon.active {
background: var(--active-bg);
}
.rb-icon:disabled {
opacity: 0.35;
cursor: default;
}
.rb-mini-sep {
width: 1px;
height: 20px;
background: var(--border);
margin: 0 5px;
}
.rb-icon svg {
display: block;
margin: 0 auto;
}
/* split button: main action + caret dropdown */
.rb-split-wrap {
position: relative;
display: flex;
align-items: center;
}
/* Anchor for the dropdown panels (color-palette / layout-menu / …), which are
position: fixed so they escape the ribbon-body scroll clip while tracking
their trigger through ribbon scrolling. Every wrap shares the name, so the
scope is essential: without it a fixed-position panel (laid out after all
in-flow content) would resolve to the LAST wrap in the document instead of
its own parent. */
.rb-split-wrap,
.rb-color-wrap {
anchor-name: --rb-drop-wrap;
anchor-scope: --rb-drop-wrap;
}
.rb-caret {
width: 13px;
height: 26px;
border: none;
background: none;
border-radius: 0 3px 3px 0;
font-size: 8px;
color: var(--text-dim);
cursor: pointer;
padding: 0;
}
.rb-caret:hover:not(:disabled) {
background: var(--hover);
}
.rb-caret:disabled {
opacity: 0.35;
cursor: default;
}
/* True split buttons (icon action + caret dropdown) read as one pill, matching
the slides rb-split model: hovering either zone washes both edge to edge,
and the zone under the pointer (or whose dropdown is open) darkens a step.
:has(> .rb-icon + .rb-caret) keeps the font-family/size comboboxes (input +
caret) and lone-button wraps out. */
.rb-split-wrap:has(> .rb-icon + .rb-caret) > .rb-icon {
border-radius: 3px 0 0 3px;
}
.rb-split-wrap:has(> .rb-icon + .rb-caret) > .rb-caret {
height: 30px;
}
.rb-split-wrap:has(> .rb-icon + .rb-caret):hover > .rb-icon:not(:disabled),
.rb-split-wrap:has(> .rb-icon + .rb-caret):hover > .rb-caret:not(:disabled) {
background: var(--hover);
}
.rb-split-wrap:has(> .rb-icon + .rb-caret) > .rb-icon:hover:not(:disabled),
.rb-split-wrap:has(> .rb-icon + .rb-caret) > .rb-caret:hover:not(:disabled),
.rb-split-wrap:has(> .rb-icon + .rb-caret) > .rb-caret.active {
background: var(--active-bg);
}
/* same footprint as the plain .rb-caret — a wider zone reads as a gap
between the icon and the chevron */
.rb-color-caret {
width: 14px;
height: 30px;
}
.rb-caret-inline {
font-size: 8px;
color: var(--text-dim);
margin-left: 2px;
}
/* font color button with color bar */
.rb-color-wrap {
position: relative;
}
.rb-color-btn {
/* just the glyph + a whisker: a wider box pushes the caret visually away */
min-width: 26px;
height: 30px;
line-height: 1;
}
/* Color swatches (sheets' pattern): the glyph is the SAME size as its row
siblings (15px/600 letter / 20px svg) so the cap line stays level, and the
16×4 bar hangs below it out of flow instead of pushing the stack taller. */
.rb-color-glyph {
position: relative;
display: grid;
place-items: center;
line-height: 1;
font-size: 15px;
font-weight: 500;
}
.rb-color-bar {
width: 16px;
height: 4px;
margin-top: 1px;
border-radius: 1px;
}
.rb-color-glyph .rb-color-bar {
position: absolute;
top: calc(100% + 1px);
left: 50%;
transform: translateX(-50%);
margin: 0;
}
/* the svg box carries ~4px of padding below its ink — tuck the bar into it so
both buttons' bars sit on the same line (20px svg bottom is 1.5px below the
15px letter's em box + 1px gap) */
.rb-color-glyph-svg .rb-color-bar {
top: calc(100% - 1.5px);
}
.color-palette {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
display: grid;
grid-template-columns: repeat(6, 20px);
gap: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
padding: 8px;
box-shadow: var(--docs-shadow-menu);
}
/* Sharp 20px squares with a faint contour, matching the shared gcp picker */
.color-swatch {
width: 20px;
height: 20px;
border: 1px solid var(--docs-swatch-outline);
border-radius: 0;
cursor: pointer;
}
.color-swatch:hover {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.color-palette-highlight {
grid-template-columns: none;
}
.color-palette-highlight-word {
display: block;
width: auto;
padding: 10px 12px;
border-radius: 8px;
}
.color-highlight-title {
margin: 0 0 8px;
}
.color-highlight-grid {
display: grid;
grid-template-columns: repeat(5, 20px);
gap: 4px;
}
.color-highlight-swatch {
box-sizing: border-box;
width: 20px;
height: 20px;
border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
border-radius: 0;
}
.color-highlight-swatch:hover,
.color-highlight-swatch.selected {
position: relative;
z-index: 1;
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.color-highlight-none {
width: 100%;
margin-top: 10px;
padding: 5px 0;
font-size: 12.5px;
}
/* Selected (no highlight applied) is a quiet filled state, matching the
shared picker's auto row — an accent ring reads as a stray focus outline. */
.color-highlight-none.selected {
background: var(--hover);
}
/* Anchor positioning for the shared Word-style color panel (@lycero/ui
.gcp-palette draws the chrome; this only places it under its trigger). */
.docs-color-pop {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
}
.color-section-title {
margin: 12px 0 6px;
color: var(--text);
font-size: 12.5px;
font-weight: 500;
}
.color-none {
grid-column: 1 / -1;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--surface);
font-size: 12px;
padding: 4px 0;
cursor: pointer;
color: var(--text);
}
.color-none:hover {
background: var(--hover);
}
/* line spacing dropdown */
/* Home-tab Lycero AI entry: black circular "+" badge with a dropdown caret,
brand label below (mirrors the sheets Home ribbon). */
/* AI feature buttons next to the entry: purple glyphs, label below */
.ai-feature-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
color: var(--color-brand-secondary);
}
.ai-feature-icon svg {
/* 24px renders the 24-unit viewBox 1:1, so the 1.5 stroke paints 1.5px,
keeping the 1:16 stroke standard */
width: 24px;
height: 24px;
}
.spacing-menu {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
min-width: 92px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 4px;
}
.spacing-menu button {
display: block;
width: 100%;
border: none;
background: none;
text-align: left;
padding: 6px 12px;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
color: var(--text);
}
.spacing-menu button:hover {
background: var(--hover);
}
.spacing-menu button.active {
background: var(--active-bg);
}
/* Font size preset list: compact Word-style rows so the whole list fits
without scrolling (the viewport cap only kicks in on tiny windows), and the
current size gets a leading check instead of a highlight. Placed after the
.spacing-menu rules so these overrides win at equal specificity. */
.rb-font-size-menu {
min-width: 76px;
max-height: calc(100vh - 130px);
overflow-y: auto;
}
.rb-font-size-menu button {
position: relative;
padding: 3px 16px 3px 28px;
font-size: 12.5px;
}
.rb-font-size-menu button.active {
background: none;
color: var(--text);
}
.rb-font-size-menu button.active:hover {
background: var(--hover);
}
.rb-font-size-menu button.active::before {
content: '✓';
position: absolute;
left: 10px;
}
/* Font family list: each entry renders in its own typeface (inline style);
long list scrolls like Word's */
.rb-font-family-menu {
min-width: 200px;
max-height: calc(100vh - 130px);
overflow-y: auto;
}
.rb-font-family-menu button {
padding: 5px 16px 5px 28px;
font-size: 14px;
position: relative;
white-space: nowrap;
}
.rb-font-family-menu button.active {
background: none;
color: var(--text);
}
.rb-font-family-menu button.active:hover {
background: var(--hover);
}
.rb-font-family-menu button.active::before {
content: '✓';
position: absolute;
left: 10px;
font-family: system-ui;
}
/* type-ahead / arrow-key highlight, kept distinct from the check on the current font */
.rb-font-family-menu button.kbd-focus {
background: var(--hover);
}
.rb-menu-group-label {
padding: 8px 16px 3px;
font-size: 11px;
color: var(--text-secondary);
border-top: 1px solid var(--border);
margin-top: 4px;
cursor: default;
}
.rb-font-family-menu > div:first-child > .rb-menu-group-label {
border-top: none;
margin-top: 0;
padding-top: 4px;
}
/* ---- Insert: table size picker ---- */
/* Insert → Cover Page gallery */
.cover-gallery {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
display: grid;
grid-template-columns: repeat(4, 104px);
gap: 8px;
padding: 10px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
max-height: 420px;
overflow-y: auto;
}
.cover-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px 6px 5px;
border: 1px solid transparent;
border-radius: 6px;
background: none;
cursor: pointer;
}
.cover-card:hover {
border-color: var(--word-blue);
background: var(--hover);
}
.cover-thumb-page {
width: 88px;
height: 116px;
overflow: hidden;
background: var(--docs-paper);
border: 1px solid var(--border-strong);
border-radius: 2px;
padding: 4px 5px;
font-size: 4px;
line-height: 1.3;
color: var(--docs-paper-ink-dim);
text-align: left;
pointer-events: none;
}
.cover-thumb-para {
white-space: nowrap;
overflow: hidden;
}
.cover-card-name {
font-size: 11px;
color: var(--text);
}
.cover-gallery-remove {
grid-column: 1 / -1;
margin-top: 4px;
padding: 7px 12px;
border: none;
border-top: 1px solid var(--border);
border-radius: 0 0 4px 4px;
background: none;
color: var(--text);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.cover-gallery-remove:not(:disabled):hover {
background: var(--hover);
}
.cover-gallery-remove:disabled {
opacity: 0.4;
cursor: default;
}
.table-picker {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 8px;
}
.table-picker-title {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 6px;
text-align: center;
white-space: nowrap;
}
.table-picker-grid {
display: grid;
grid-template-columns: repeat(10, 18px);
gap: 3px;
}
/* "Insert Table…" entry under the hover grid (opens the rows/cols dialog) */
.table-picker-custom {
display: block;
width: 100%;
margin-top: 8px;
padding: 5px 6px;
border: none;
border-top: 1px solid var(--border);
border-radius: 0 0 4px 4px;
background: none;
color: var(--text);
font-size: 12px;
text-align: left;
cursor: pointer;
}
.table-picker-custom:hover {
background: var(--hover);
}
/* Word-style table move handle at the hovered table's top-left corner */
.doc-table-handle {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: 1px solid var(--docs-table-handle-border);
border-radius: 3px;
background: var(--docs-table-handle-bg);
color: var(--docs-table-handle-ink);
cursor: move;
box-shadow: var(--docs-shadow-chip);
}
.doc-table-handle:hover {
background: var(--docs-table-handle-hover);
}
.doc-table-resize {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
padding: 0;
border: 1px solid var(--docs-table-handle-border);
border-radius: 3px;
background: var(--docs-table-handle-bg);
color: var(--docs-table-handle-ink);
cursor: nwse-resize;
box-shadow: var(--docs-shadow-chip);
}
.doc-table-resize:hover {
background: var(--docs-table-handle-hover);
}
.table-cell {
width: 18px;
height: 16px;
border: 1px solid var(--border-strong);
border-radius: 2px;
background: var(--surface);
cursor: pointer;
padding: 0;
}
.table-cell.hot {
/* blue-tinted like an in-document selection, not the gray toolbar plate */
background: var(--accent-soft);
border-color: var(--word-blue);
}
/* ---- Insert: symbol palette ---- */
.symbol-palette {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
display: grid;
grid-template-columns: repeat(10, 28px);
gap: 2px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 8px;
}
.symbol-cell {
width: 28px;
height: 28px;
border: none;
background: none;
border-radius: 3px;
font-size: 15px;
cursor: pointer;
color: var(--text);
}
.symbol-cell:hover {
background: var(--active-bg);
}
/* ---- Shape picker dropdown ---- */
.shape-palette {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
width: 312px;
max-height: 420px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 6px;
}
.shape-group-title {
padding: 6px 4px 2px;
font-size: 11px;
color: var(--text-dim);
}
.shape-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
}
.shape-cell {
display: flex;
align-items: center;
justify-content: center;
padding: 5px 0;
border: none;
background: none;
border-radius: 4px;
cursor: pointer;
color: var(--text);
}
.shape-cell:hover {
background: var(--active-bg);
}
/* ---- WordArt picker panel ---- */
/* Unlabeled letter grid matching the slides WordArt gallery (style name = tooltip) */
.wordart-palette {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
display: grid;
grid-template-columns: repeat(4, 44px);
gap: 5px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 8px;
}
.wordart-cell {
width: 44px;
height: 44px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
font-size: 26px;
font-family: Georgia, serif;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.wordart-cell:hover {
border-color: var(--accent);
}
/* ---- Drop cap dropdown menu ---- */
.dropcap-menu {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
display: flex;
flex-direction: row;
gap: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 8px;
min-width: 200px;
}
.dropcap-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 4px;
background: none;
cursor: pointer;
font-size: 11px;
color: var(--text);
min-width: 56px;
}
.dropcap-option:hover {
background: var(--active-bg);
border-color: var(--border);
}
.dropcap-preview {
font-size: 28px;
font-weight: bold;
line-height: 1;
color: var(--text);
min-height: 32px;
display: flex;
align-items: center;
}
/* ---- Equations: built-in equation library dropdown + LaTeX insert dialog ---- */
.equation-gallery {
/* right-aligned to its trigger (the Equation button sits at the ribbon's
far right) — fixed + anchored like the other panels */
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
right: anchor(right);
position-visibility: anchors-visible;
z-index: 60;
width: 300px;
max-height: 420px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 6px;
}
.equation-gallery-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
border: none;
background: none;
border-radius: 4px;
padding: 8px 6px;
cursor: pointer;
color: var(--text);
}
.equation-gallery-item:hover {
background: var(--active-bg);
}
.equation-gallery-name {
font-size: 11px;
color: var(--text-dim);
align-self: flex-start;
}
.equation-gallery-preview {
font-family: 'Cambria Math', 'STIX Two Math', serif;
font-size: 15px;
max-width: 100%;
overflow-x: hidden;
}
.equation-gallery-custom {
width: 100%;
border: none;
border-top: 1px solid var(--border-strong);
background: none;
padding: 8px 6px;
text-align: left;
font-size: 12px;
cursor: pointer;
color: var(--text);
}
.equation-gallery-custom:hover {
background: var(--active-bg);
}
.equation-modal {
min-width: 460px;
}
.equation-preview {
min-height: 64px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-strong);
border-radius: 6px;
margin: 10px 0 2px;
padding: 10px;
font-family: 'Cambria Math', 'STIX Two Math', serif;
font-size: 18px;
overflow-x: auto;
}
.equation-preview-hint {
font-size: 12px;
color: var(--text-dim);
font-family: system-ui, sans-serif;
}
.equation-preview-error {
font-size: 12px;
color: var(--danger);
font-family: system-ui, sans-serif;
}
.equation-inline-toggle {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 12px;
color: var(--text-dim);
user-select: none;
}
/* ---- Layout: preset menus + paragraph spinners ---- */
.layout-menu {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 5px;
}
.layout-menu button {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
width: 100%;
border: none;
background: none;
padding: 7px 12px;
border-radius: 4px;
cursor: pointer;
color: var(--text);
font-size: 13px;
}
.layout-menu button span {
font-size: 11px;
color: var(--text-dim);
}
.layout-menu button:not(:disabled):hover {
background: var(--hover);
}
.layout-menu button:disabled {
opacity: 0.4;
cursor: default;
}
.layout-menu button.active {
background: var(--active-bg);
}
.layout-menu-head {
padding: 6px 12px 3px;
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
}
.layout-menu-head + button {
margin-top: 0;
}
.layout-menu.layout-menu-scroll {
max-height: min(70vh, 560px);
overflow-y: auto;
}
/* w:trHeight hRule="exact": Word clips overflow instead of growing the row. td height is
min-height in CSS table layout, so cells wrap content in this fixed-height box instead;
clip (not hidden) so contenteditable's programmatic scrolls can't shift the content */
.cell-clip {
/* flow-root: overflow:clip alone is no BFC, so a first paragraph's
margin-top would collapse out and grow the exact row past its height */
display: flow-root;
overflow: clip;
}
/* w:textDirection cells: Word sizes the row from the horizontal cells / trHeight and
wraps the rotated text into the resulting cell height. Out of flow, the vertical
line no longer stretches the row group; padding:inherit keeps the cell insets. */
.cell-vert {
position: absolute;
inset: 0;
padding: inherit;
overflow: clip;
}
/* a row with no other height source (no declared trHeight, every in-flow cell
rotated) sizes from the rotated text like Word: the wrapper drops back into
flow. Structural :has() rather than a rendered tr attribute: ProseMirror
reuses the tr DOM when only its children change, so a baked attribute goes
stale after column inserts/deletes. gridGap spacers are not in-flow evidence. */
tr:not([style*='height']):not(
:has(
> td:not(.cell-vert-host):not([data-grid-gap]),
> th:not(.cell-vert-host):not([data-grid-gap])
)
)
> :is(td, th)
> .cell-vert {
position: static;
inset: auto;
padding: 0;
}
/* table row/cell revisions: Word's cell highlighting (inserted light blue, deleted pink,
merged light yellow; Track Changes Options can repaint them) */
tr.row-rev-ins > td,
tr.row-rev-ins > th,
td.cell-rev-ins,
th.cell-rev-ins {
background: var(--rev-ins-bg, var(--docs-paper-cell-ins-bg));
}
tr.row-rev-del > td,
tr.row-rev-del > th,
td.cell-rev-del,
th.cell-rev-del {
background: var(--rev-del-bg, var(--docs-paper-cell-del-bg));
}
td[data-rev-merge],
th[data-rev-merge] {
background: var(--rev-merge-bg, var(--docs-paper-cell-merge-bg));
}
.rev-display-none td[data-rev-merge],
.rev-display-none th[data-rev-merge],
.rev-display-simple td[data-rev-merge],
.rev-display-simple th[data-rev-merge],
.rev-display-original td[data-rev-merge],
.rev-display-original th[data-rev-merge],
.rev-hide-format td[data-rev-merge],
.rev-hide-format th[data-rev-merge] {
background: none;
}
/* pending table / row / cell property revisions (tblPrChange &c.): a change bar on the left edge */
table.doc-table[data-rev-fmt],
tr[data-rev-fmt] > td:first-child,
tr[data-rev-fmt] > th:first-child,
td[data-rev-fmt],
th[data-rev-fmt] {
box-shadow: inset 3px 0 0 var(--docs-paper-ppr);
}
.rev-display-none table.doc-table[data-rev-fmt],
.rev-display-none tr[data-rev-fmt] > td:first-child,
.rev-display-none tr[data-rev-fmt] > th:first-child,
.rev-display-none td[data-rev-fmt],
.rev-display-none th[data-rev-fmt],
.rev-display-simple table.doc-table[data-rev-fmt],
.rev-display-simple tr[data-rev-fmt] > td:first-child,
.rev-display-simple tr[data-rev-fmt] > th:first-child,
.rev-display-simple td[data-rev-fmt],
.rev-display-simple th[data-rev-fmt],
.rev-display-original table.doc-table[data-rev-fmt],
.rev-display-original tr[data-rev-fmt] > td:first-child,
.rev-display-original tr[data-rev-fmt] > th:first-child,
.rev-display-original td[data-rev-fmt],
.rev-display-original th[data-rev-fmt] {
box-shadow: none;
}
/* no-markup / simple-markup mode = as if all accepted: deleted rows hidden, insert background removed */
.rev-display-none tr.row-rev-del,
.rev-display-none td.cell-rev-del,
.rev-display-none th.cell-rev-del,
.rev-display-simple tr.row-rev-del,
.rev-display-simple td.cell-rev-del,
.rev-display-simple th.cell-rev-del {
display: none;
}
.rev-display-none tr.row-rev-ins > td,
.rev-display-none tr.row-rev-ins > th,
.rev-display-none td.cell-rev-ins,
.rev-display-none th.cell-rev-ins,
.rev-display-simple tr.row-rev-ins > td,
.rev-display-simple tr.row-rev-ins > th,
.rev-display-simple td.cell-rev-ins,
.rev-display-simple th.cell-rev-ins {
background: none;
}
/* original mode = as if all rejected: inserted rows hidden, delete background removed */
.rev-display-original tr.row-rev-ins,
.rev-display-original td.cell-rev-ins,
.rev-display-original th.cell-rev-ins {
display: none;
}
.rev-display-original tr.row-rev-del > td,
.rev-display-original tr.row-rev-del > th,
.rev-display-original td.cell-rev-del,
.rev-display-original th.cell-rev-del {
background: none;
}
/* Arrange group position gallery: 3x3 page thumbnail grid, dots indicate image placement */
.pos-grid {
display: grid;
grid-template-columns: repeat(3, 36px);
gap: 4px;
padding: 6px 8px 4px;
}
.layout-menu button.pos-cell {
display: flex;
width: 36px;
height: 36px;
padding: 4px;
border: 1px solid var(--border-strong);
border-radius: 4px;
}
.layout-menu button.pos-cell.active {
border-color: var(--border-strong);
background: var(--active-bg);
}
.pos-cell .pos-dot {
width: 10px;
height: 10px;
border-radius: 2px;
background: var(--text-dim);
}
.pos-cell.ph-left {
justify-content: flex-start;
}
.pos-cell.ph-center {
justify-content: center;
}
.pos-cell.ph-right {
justify-content: flex-end;
}
.pos-cell.pv-top {
align-items: flex-start;
}
.pos-cell.pv-center {
align-items: center;
}
.pos-cell.pv-bottom {
align-items: flex-end;
}
/* Switch Windows sits at the ribbon's right edge — anchor right so it isn't clipped */
.layout-menu.align-right {
left: auto;
right: anchor(right);
}
.layout-para {
gap: 14px;
}
.layout-col {
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
}
.layout-num {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text);
}
.layout-num > span:first-child {
width: 44px;
text-align: right;
color: var(--text-dim);
}
.layout-num input {
width: 56px;
height: 24px;
border: 1px solid var(--border-strong);
border-radius: 3px;
padding: 0 4px;
font-size: 12px;
}
.layout-num input:disabled {
opacity: 0.5;
}
.layout-unit {
color: var(--text-dim);
font-size: 11px;
}
/* ---- Review: word count ---- */
.stats-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.stats-table td {
padding: 7px 4px;
border-bottom: 1px solid var(--border);
}
.stats-table td:last-child {
text-align: right;
font-weight: 600;
}
.color-swatch.selected {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* style gallery */
/* The Styles group absorbs the row's free width and shrinks with the window
(min-width keeps three cards + the expander visible); extra cards wrap onto
a clipped second row inside .style-gallery — whole cards only, never a
half-cut one — instead of widening the scrolling ribbon row, and the
expander below makes the hidden ones reachable. */
.ribbon-group-styles {
flex: 1;
min-width: 259px;
}
.style-gallery-wrap {
gap: 4px;
min-width: 0;
}
.style-gallery {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
align-items: center;
gap: 4px;
flex: 1 1 0;
min-width: 0;
/* one card row tall: wrapped cards land on the hidden second row */
height: 62px;
overflow: hidden;
}
.style-gallery-more {
flex: 0 0 auto;
width: 17px;
height: 62px;
padding: 0;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
color: var(--text-dim);
cursor: pointer;
}
.style-gallery-more:hover {
border-color: var(--border-strong);
background: var(--hover);
}
.style-gallery-menu {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
width: min(478px, calc(100vw - 16px));
max-height: 60vh;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
gap: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 8px;
}
.style-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
flex: 0 0 auto;
width: 74px;
height: 62px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
}
.style-gallery-menu .style-card {
width: auto;
}
.style-card:hover:not(:disabled) {
border-color: var(--border-strong);
background: var(--hover);
}
.style-card.active {
border-color: var(--border-strong);
background: var(--active-bg);
}
.style-card:disabled {
opacity: 0.45;
cursor: default;
}
.style-card-label {
max-width: 100%;
padding: 0 3px;
font-size: 10.5px;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* the preview carries the style's own face/weight/color; the card only sizes it */
.style-card-preview {
max-width: 100%;
font-size: 15px;
line-height: 1.15;
color: var(--text);
white-space: nowrap;
overflow: hidden;
}
/* Styles pane (Word for Mac): docked on the right like the comments pane */
.styles-pane {
width: 264px;
flex: none;
border-left: 1px solid var(--border);
background: var(--surface);
display: flex;
flex-direction: column;
overflow: hidden;
}
.styles-pane-search {
margin: 8px 10px 4px;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 12.5px;
}
.styles-pane-search:focus {
outline: none;
border-color: var(--accent);
}
.styles-pane-list {
flex: 1;
overflow-y: auto;
padding: 4px 10px 8px;
display: flex;
flex-direction: column;
gap: 3px;
}
.style-pane-card {
flex-direction: row;
justify-content: space-between;
width: 100%;
height: auto;
min-height: 34px;
padding: 5px 8px;
gap: 8px;
text-align: left;
}
.style-pane-card .style-card-preview {
flex: 1;
min-width: 0;
text-overflow: ellipsis;
}
.style-pane-kind {
flex: none;
font-size: 11px;
color: var(--text-dim);
}
.styles-pane-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px 8px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-dim);
}
.styles-pane-foot label {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.styles-pane-foot select {
flex: 1;
min-width: 0;
font-size: 12px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 4px;
}
.styles-pane-new {
flex: none;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
color: var(--text);
font-size: 12px;
padding: 3px 8px;
cursor: pointer;
white-space: nowrap;
}
.styles-pane-new:hover:not(:disabled) {
background: var(--hover);
}
.styles-pane-new:disabled {
opacity: 0.45;
cursor: default;
}
.styles-pane-menu-backdrop {
position: fixed;
inset: 0;
z-index: 199;
}
.modal.style-dialog {
width: 560px;
}
.style-dialog .font-dialog-row + .font-dialog-row {
margin-top: 10px;
}
.style-dialog-num {
flex: 0 0 84px !important;
}
.style-dialog-color {
flex: 0 0 72px !important;
}
.style-dialog-error {
margin-top: 4px;
font-size: 12px;
color: var(--danger);
}
.style-dialog-preview {
margin-top: 14px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--color-bg-page);
color: var(--text);
overflow: hidden;
white-space: nowrap;
}
/* ================= workspace / document canvas ================= */
.workspace {
display: flex;
flex: 1;
min-height: 0;
background: var(--canvas);
}
/* the document stays ltr under an RTL UI — the chrome mirrors, the content does not */
.editor-scroll {
direction: ltr;
flex: 1;
overflow-y: auto;
/* classic (non-overlay) scrollbars change clientWidth as they come and go,
which would make the zoom auto-refit oscillate — reserve the gutter */
scrollbar-gutter: stable;
padding: 26px 24px 140px;
}
.editor-scroll.image-drop-target .doc-page {
outline: 2px dashed var(--accent);
outline-offset: -2px;
}
.doc-zoom {
width: fit-content;
margin: 0 auto;
}
/* Multiple Pages: the canvas stays one flow; the grid shows every page in a
slot of its own. Non-active slots are painted from canvas clones, the live
editor sits in the active slot behind a clip window (overflow: clip, so no
scrollIntoView can shift it) offset to that page's band of the flow. */
.doc-zoom.multipage {
position: relative;
}
.doc-zoom.multipage .doc-live {
position: absolute;
overflow: clip;
background: var(--page-bg, var(--docs-paper));
box-shadow: var(--docs-page-shadow);
}
.doc-zoom.multipage .doc-live .doc-page {
box-shadow: none;
}
.mp-slot {
position: absolute;
overflow: clip;
user-select: none;
cursor: text;
background: var(--page-bg, var(--docs-paper));
box-shadow: var(--docs-page-shadow);
}
.mp-slot .mp-wrap {
position: relative;
height: 100%;
min-height: 0;
}
.mp-slot .mp-page {
position: absolute;
inset: 0;
width: auto !important;
padding: 0 !important;
min-height: 0 !important;
box-shadow: none !important;
column-count: auto !important;
pointer-events: none;
}
.mp-block {
position: absolute;
}
/* Format painter armed: Word-style I-beam + brush cursor, but only while
hovering the text flow (block children) — page margins and the blank area
below the content keep their normal cursor. Fixed black/white affordance,
identical in both themes (the page surface never follows the chrome theme). */
.ProseMirror.doc-painter-cursor > * {
cursor:
url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2728%27%20height=%2728%27%20viewBox=%270%200%2028%2028%27%3E%3Cg%20stroke=%27white%27%20stroke-width=%273.4%27%20paint-order=%27stroke%27%20stroke-linecap=%27round%27%20fill=%27none%27%3E%3Cpath%20d=%27M2%205h5M2%2023h5M4.5%205v18%27/%3E%3C/g%3E%3Cg%20stroke=%27black%27%20stroke-width=%271.5%27%20fill=%27none%27%20stroke-linecap=%27round%27%3E%3Cpath%20d=%27M2%205h5M2%2023h5M4.5%205v18%27/%3E%3C/g%3E%3Crect%20x=%2716.6%27%20y=%273.5%27%20width=%273%27%20height=%275.2%27%20rx=%271.4%27%20fill=%27black%27%20stroke=%27white%27%20stroke-width=%271.2%27%20paint-order=%27stroke%27/%3E%3Crect%20x=%2710.5%27%20y=%278.2%27%20width=%2715%27%20height=%2710.3%27%20rx=%271.6%27%20fill=%27black%27%20stroke=%27white%27%20stroke-width=%271.2%27%20paint-order=%27stroke%27/%3E%3Cpath%20d=%27M10.5%2012.4%20H25.5%27%20stroke=%27white%27%20stroke-width=%271.3%27/%3E%3Cpath%20d=%27M15%2014.9%20V16.9%20M21%2014.9%20V16.9%27%20stroke=%27white%27%20stroke-width=%271.3%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E')
4 14,
text;
}
/* selection bar (left page margin): Word's up-right arrow. Fixed black/white
affordance like the paintbrush above. */
.ProseMirror.doc-selbar-hover {
cursor:
url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%3E%3Cpath%20d=%27M17.5%202.5v14.2l-3.8-3.7-3%206.3-2.9-1.4%203-6.3H5.2z%27%20fill=%27white%27%20stroke=%27black%27%20stroke-width=%271.2%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E')
17 3,
default;
}
/* gap cursor between isolating blocks, such as a final table */
.ProseMirror-gapcursor {
display: none;
pointer-events: none;
position: absolute;
}
.ProseMirror-gapcursor::after {
content: '';
display: block;
position: absolute;
top: -2px;
width: 20px;
border-top: 1px solid var(--docs-paper-ink, currentColor);
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink {
to {
visibility: hidden;
}
}
.ProseMirror-focused .ProseMirror-gapcursor {
display: block;
}
/* ---- Word basics: marks / columns / page border / header-footer / nav / ruler ---- */
/* ¶ editing marks (front-end only) */
.show-marks .doc-page p::after,
.show-marks .doc-page h1::after,
.show-marks .doc-page h2::after,
.show-marks .doc-page h3::after,
.show-marks .doc-page h4::after {
content: '¶';
color: var(--docs-paper-mark);
opacity: 0.55;
font-size: 0.85em;
margin-left: 2px;
user-select: none;
}
/* multi-column layout (w:cols) */
.doc-page {
column-count: var(--page-cols, auto);
column-gap: 28px;
column-fill: auto;
}
/* mixed-column canvas layout (sections with differing column specs): blocks keep the
engine's stacked flow and are painted into their column slot by a per-block width +
constant translate; the width also applies in preview clones (line breaks must match) */
.doc-page .doc-col-block {
width: var(--col-w, auto);
}
/* a page-opening section never sits beside the previous section's floats; its
page gap clears them too, so the opener measures at the boundary whether or
not the gap is in the DOM (a gap beside the float band made the opener's
flow top flip between passes) */
.doc-page .doc-sect-page-start,
.doc-page .page-gap:has(+ .doc-sect-page-start) {
clear: both;
}
/* floating-anchor wrappers and side-wrap carriers force width:100%, which
beats the section-width decoration above: their stray in-flow lines then
wrap at the full canvas width on the canvas but at the section width in
preview clones, drifting every boundary below (one corpus file split a line
across two pages, another sliced a heading) */
.doc-page .doc-col-block.doc-protected-floating,
.doc-page .doc-col-block.doc-img-float,
.doc-page .doc-col-block.doc-protected-wrapside {
width: var(--col-w, 100%);
max-width: var(--col-w, 100%);
}
/* a paragraph cut between two columns of different widths keeps one element at
the wider width; this leading float (columnLayoutSpecs split shape) shortens
the head lines or, via shape-outside, only the tail lines to the narrower
column. Structural like the width: kept while measuring and in clones. */
.doc-page .doc-col-split-float {
display: block;
pointer-events: none;
user-select: none;
}
/* --page-cx: the block's page centered on a wider shared paper (differing-width
documents); page-relative anchors below undo the column shift only */
.editor-scroll .doc-page:not(.measuring-columns) .doc-col-block {
transform: translate(calc(var(--col-dx, 0px) + var(--page-cx, 0px)), var(--col-dy, 0px));
}
/* w:docGrid charSpace character grid (Word probes 2026-09-02, 2026-10-22):
every character in a typed linesAndChars section advances by natural width
+ charSpace/4096pt — plain letter-spacing, inherited into tables and
textboxes but not into the header/footer strips (they live outside
.doc-page). Under balanceSingleByteDoubleByteWidth single-byte characters
get half (--doc-char-space-sb) and the .doc-east-asian-font spans restore
the full value. Uniform docs get the variables from App.tsx's .doc-page
injection; mixed docs set them per block via the layout decoration channel
(doc-charspace-block). Both selectors also reach preview/export clones
(.pv-content carries the doc-page class). */
.doc-page {
letter-spacing: var(--doc-char-space-sb, var(--doc-char-space, normal));
}
.doc-page .doc-charspace-block {
letter-spacing: var(--doc-char-space-sb, var(--doc-char-space, normal));
}
/* the full-width restore rule is injected by App.tsx with the variables; a
run-level w:spacing (inline letter-spacing) keeps winning over the grid */
/* per-page header/footer strips are page-gap widgets inside the editor root,
but Word does not grid header/footer text (scope probe) */
.doc-page .page-gap-hf {
letter-spacing: normal;
}
/* page/margin-relative X anchors are absolute on the page in Word: undo the
column shift for boxes riding a column-translated block (Y keeps following
the anchor paragraph). Boxes with their own inline transform (rotation)
keep it — inline wins — a rare combination accepted as-is. */
.editor-scroll .doc-page:not(.measuring-columns) .doc-col-block [data-page-rel-x='1'] {
transform: translateX(calc(-1 * var(--col-dx, 0px)));
}
/* run-anchored pictures carry their offset in an inline transform: the undo
rides a variable that transform reads instead — the measured correction
(pinPageRelXPictures: column shift + anchor indent) or the bare column shift */
.editor-scroll .doc-page:not(.measuring-columns) img[data-page-rel-x='1'] {
--page-rel-x-undo: var(--page-rel-x-pin, var(--col-dx, 0px));
}
/* sectPr w:textDirection sections (verticalTextSpecs): blocks are measured as
horizontal paragraphs wrapping at the line length (--col-w) and shown as
writing-mode boxes of that height, translated to their sideways slot. The
negative --vert-mb trims each box's flow footprint back to the measured one
so gaps and paper heights stay those of a horizontal page; only the
page-leading block keeps its space-before (it defines the flow start).
Not gated on .editor-scroll: preview clones position the same way, with
--pv-vdx/--pv-vdy overriding per page (verticalPageCss). */
.doc-page:not(.measuring-columns) .doc-vert-block {
writing-mode: vertical-rl;
height: var(--col-w);
width: fit-content;
margin-bottom: var(--vert-mb, 0px) !important;
transform: translate(
var(--pv-vdx, calc(var(--col-dx, 0px) + var(--page-cx, 0px))),
var(--pv-vdy, var(--col-dy, 0px))
);
}
.doc-page:not(.measuring-columns) .doc-vert-block:not(.doc-vert-first) {
margin-top: 0 !important;
}
.doc-page:not(.measuring-columns) .doc-vert-tbRlV {
text-orientation: sideways;
}
.doc-page:not(.measuring-columns) .doc-vert-btLr {
writing-mode: sideways-lr;
}
/* w:framePr paragraph frame: fixed box beside which body text wraps (see para-frame.ts) */
.doc-page .doc-para-frame {
position: relative;
}
/* single-flow measuring state: transforms and the column-space pull-up must not
distort the 1-D virtual coordinates */
.editor-scroll .doc-page.measuring-columns .page-gap {
margin-top: 0 !important;
}
/* natural-flow measuring state: in-paragraph gap widgets force a line break at
the PREVIOUS pass's cut position, so measuring with them in layout can only
re-confirm that cut even after decoration-only reflows (justify space-shrink)
moved the natural wrap points — a justified page-last line then stays
stretched sparse until an at-boundary edit (r177). Hidden, the
paragraph re-wraps naturally and every gapAbove/gapAccum read consistently
sees zero-height gaps, so the virtual coordinates stay gapless by layout
instead of by arithmetic. */
.editor-scroll .doc-page.measuring-natural .page-gap-inline {
display: none !important;
}
/* block-level gaps leave the measuring flow too: an in-flow box between two
paragraphs stops their margins collapsing, so the measured distance across a
page turn was space-after + space-before instead of the larger of the two,
and every block below shifted by the difference — a different amount
wherever the previous pass had cut, so passes disagreed and page counts
oscillated. Hidden, the flow measures exactly as it would without pages. */
.editor-scroll .doc-page.measuring-natural .page-gap:not(.page-gap-inline) {
display: none !important;
}
/* phantom table rows (gap rows, repeated header clones) must keep their grid
slot while hidden: syncPhantomRowspans grew the vMerge rowspans crossing
them, so a display:none row makes those spans overrun by one row and shifts
every later row a column right (cells collapse to 0 width, text wraps per
character, the ballooned heights get stamped as split-row fills). Collapse
removes the height but keeps the row in the grid. */
.editor-scroll .doc-page.measuring-natural tr.page-gap-inline {
display: table-row !important;
visibility: collapse;
}
/* page border (w:pgBorders): per-page overlay boxes (see syncPageBorders);
border color/width are document data and come inline from the sectPr */
.page-border-overlays {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
.page-border-overlay {
position: absolute;
}
/* w:zOrder=back: the layer cannot live under the text (the paper is the editor
root), so it multiplies into it: dark text stays readable over the pattern */
.page-border-overlays-back {
mix-blend-mode: multiply;
}
.page-dark .page-border-overlays-back {
mix-blend-mode: screen;
}
/* art border approximation: tiled pattern strip along one side of the box */
.page-border-art {
position: absolute;
}
/* preview/print copy: same document-data border, one box per .pv-page sheet */
.pv-page-border {
position: absolute;
pointer-events: none;
z-index: 3;
}
.pv-page-border-back {
z-index: -1;
}
/* line numbers (w:lnNumType): one label per counted line, right-aligned before the
text column (see syncLineNumbers / syncPreviewLineNumbers); font and color are
document data copied from the document root */
.page-line-numbers,
.pv-line-numbers {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
.page-line-number,
.pv-line-number {
position: absolute;
text-align: right;
white-space: nowrap;
}
/* ---- tab stops (w:tabs) ---- */
/* Paragraphs whose tabs were measured (TabStopExtension): tab chars get zero
intrinsic width; the jump to the stop is a letter-spacing decoration on the
tab char itself, so an ancestor still underlines the gap. */
.has-tab-stops {
tab-size: 0;
}
/* TabStopExtension measures tab paragraphs with justification suspended: tab
advances are laid out in left-aligned space (Chromium and Word alike), so
the stretched spaces of a justified line must not enter the measurements */
.ProseMirror.doc-tabs-measuring .has-tab-stops {
text-align: left !important;
}
/* Word never stretches a tab on a justified line (the segment after it stays at
its stop); Chromium counts the tab as a justification opportunity unless told
otherwise */
.doc-tab {
text-justify: none;
}
/* symbols Chromium counts as ideographs for justification (U+2116 and friends,
see justifySymbolRanges) in non-CJK justified paragraphs: Word stretches only
the spaces around them */
.doc-justify-symbol {
text-justify: none;
}
/* tab with no room left on its line (TabStopExtension collapses it to half a
space): a zero font keeps the character itself from adding to the line box */
.doc-tab-collapse {
font-size: 0;
}
/* underlined tab run: browsers skip text-decoration over a tab advance, so
the blank (e.g. signature "By: ____") gets an explicit line */
.doc-tab-underline {
border-bottom: 1px solid currentColor;
}
/* first-line tab inside a hanging indent (TabStopExtension): a box of the
exact advance; the inner tab is zero-width and must not inherit the
paragraph's negative text-indent or alignment */
.doc-tab-fixed {
display: inline-block;
tab-size: 0;
text-indent: 0;
text-align: left;
}
/* tab whose stop lies past the right edge with only whitespace behind it:
Word wraps it on to a new line (a blank line) instead of hanging it; the
forced break puts the tab at the start of that line */
.doc-tab-wrap::before {
content: '\A';
white-space: pre;
}
/* right/center/decimal tab glued to the word after it (TabStopExtension):
Chromium treats the boundary from a white-space:pre tab to the following
text as unbreakable, so a TOC entry that outgrows its line wraps before
the tab instead of stranding the page number on the next line */
.doc-tab-glue {
white-space: pre;
}
/* tab leader (w:leader): Word fills the gap with the run font's glyphs on
the baseline (TOC dots are periods at their natural advance), anchored at
the stop so the rows line up; a border would sit at the descender like an
underline. underscore/heavy stay borders: underscores abut into a line. */
.doc-tab-leader-dot,
.doc-tab-leader-middleDot,
.doc-tab-leader-hyphen {
position: relative;
}
.doc-tab-leader-dot::before,
.doc-tab-leader-middleDot::before,
.doc-tab-leader-hyphen::before {
position: absolute;
inset: 0;
overflow: hidden;
white-space: nowrap;
direction: rtl;
line-height: normal;
pointer-events: none;
user-select: none;
}
.doc-tab-leader-dot::before {
content: '................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................';
}
.doc-tab-leader-middleDot::before {
content: '\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7';
}
.doc-tab-leader-hyphen::before {
content: '------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------';
}
.doc-tab-leader-underscore {
border-bottom: 1px solid currentColor;
}
.doc-tab-leader-heavy {
border-bottom: 2px solid currentColor;
}
/* Drop cap: first-letter floats to 3 lines height */
.has-drop-cap::first-letter {
float: left;
line-height: 0.85;
margin-right: 0.05em;
margin-top: 0.1em;
font-weight: normal;
}
/* editor-created caps keep the body size on the run: scale the letter here;
Word-imported caps (drop-cap-own-size) already carry the enlarged run size */
.has-drop-cap:not(.drop-cap-own-size)::first-letter {
font-size: 3em;
}
/* Margin drop cap (in-margin): negative left margin to push it outside text area */
[data-drop-cap*='"type":"margin"']::first-letter {
margin-left: -0.6em;
}
/* Move-from revision: strikethrough + light red background (content moved away) */
.has-move-from {
background: var(--docs-paper-del-bg);
text-decoration: line-through;
text-decoration-color: var(--docs-paper-del-line);
}
/* Move-to revision: light green background (content moved in) */
.has-move-to {
background: var(--docs-paper-ins-bg);
}
/* pPrChange (tracked paragraph format change): light amber left border + badge */
.has-ppr-change {
border-left: 3px solid var(--docs-paper-ppr);
padding-left: 4px;
position: relative;
}
/* pPrChange badge: "format revision" label at paragraph end via ::after */
.has-ppr-change::after {
content: attr(data-ppr-change-label);
margin-left: 6px;
font-size: 8px;
color: var(--docs-paper-ppr-ink);
background: var(--docs-paper-ppr-bg);
border: 1px solid var(--docs-paper-ppr-border);
border-radius: 2px;
padding: 0 3px;
vertical-align: middle;
pointer-events: none;
}
.has-sdt {
position: relative;
/* outline, not border/padding: chrome only appears while the selection is
inside the control, and must not reflow text or shift pagination */
outline: 1px solid var(--docs-paper-sdt-border);
outline-offset: 1px;
border-radius: 2px;
}
/* SDT alias label: tiny floating tag in the top-left corner via ::before.
Only the first block of a multi-block control carries the attribute */
.has-sdt[data-sdt-alias]::before {
content: attr(data-sdt-alias);
position: absolute;
top: -10px;
left: 0;
font-size: 8px;
line-height: 1;
color: var(--docs-paper-sdt-ink);
background: var(--docs-paper-sdt-bg);
border: 1px solid var(--docs-paper-sdt-border);
border-radius: 2px 2px 0 0;
padding: 0 3px;
pointer-events: none;
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.page-wrap {
position: relative;
min-height: var(--page-h, 1056px);
}
.page-hf {
position: absolute;
transform: translateX(-50%);
/* Word: header/footer strip spans the text column; paragraphs default to
left-aligned black text at the body size (alignment comes from w:jc).
Word's Header/Footer styles are based on Normal, so runs without their own
w:sz take the document default size when it is smaller than the 10.5pt
static guess (docStyleCss emits the var shrink-only) */
width: var(--section-content-w, calc(var(--page-w, 816px) - 120px));
font-size: var(--hf-default-fs, 10.5pt);
color: var(--docs-paper-ink);
/* clip, not hidden: a line multiple below 1 shrinks the line box under the
glyphs (Word paints them whole over the strip edge), so the clip edge moves
out by the glyph overhang (--hf-ink-over, hf-dom) without touching layout */
overflow: clip;
overflow-clip-margin: var(--hf-ink-over, 0px);
/* tab stops past the right margin: the clip box widens into the margin by
--hf-tab-over (content box unchanged, so 100% still means the column) */
box-sizing: content-box;
padding-right: var(--hf-tab-over, 0px);
/* a layout table with a negative tblInd hangs into the start margin: the
clip box widens by --hf-ind-over on that side; the negative margin keeps
the content box where every left: override (preview, mixed widths) puts it */
padding-left: var(--hf-ind-over, 0px);
margin-left: calc(-1 * var(--hf-ind-over, 0px));
left: calc(50% + (var(--hf-tab-over, 0px) + var(--hf-ind-over, 0px)) / 2);
z-index: 1;
cursor: default;
}
.page-hf-para {
white-space: pre-wrap;
min-height: 1.3em;
}
/* side-wrapped floating drawing of the part: an invisible float at the
drawing's box so the strip's lines flow around it as in Word; the drawing
itself is painted by the page's float layer */
.page-hf-obstacle {
pointer-events: none;
}
/* w:framePr floated frame (page number at a margin edge): the frame shares
the next paragraph's flow line instead of stacking above it. Only when a
following line exists — a frame that is the last/only paragraph keeps its
line, or the strip's used height collapses and overflow:hidden clips it */
.page-hf-frame:not(:last-child) {
height: 0;
min-height: 0;
overflow: visible;
}
/* tabbed header/footer paragraph (left\tcenter\tright): segments after each
tab are pinned at their stop offsets from the text-column left edge */
.page-hf-tabbed {
position: relative;
white-space: nowrap;
}
.page-hf-tabseg {
position: absolute;
white-space: nowrap;
}
/* text after the last tab that overflows the column wraps like body text */
.page-hf-tabbed-flow {
white-space: pre-wrap;
}
.page-hf-tab-gap {
display: inline-block;
}
.page-hf-tabseg-center {
transform: translateX(-50%);
}
.page-hf-tabseg-right {
transform: translateX(-100%);
}
/* header/footer layout-table row: cells as columns (display-only). Default
align-items (stretch) on purpose: a shaded cell's background must fill the
row height even when its own content is a single empty paragraph (Word cells
top-align; w:vAlign moves the paragraph stack inside the stretched cell) */
.page-hf-row {
display: flex;
text-align: left;
}
/* declared widths include the cell margins and borders (border-box); a tab laid
out past the cell edge stays hidden like Word's legacy layout */
.page-hf-cell {
display: flex;
flex-direction: column;
min-width: 0;
flex-shrink: 1;
box-sizing: border-box;
overflow: hidden;
}
/* one block line per cell paragraph */
.page-hf-cell-para {
white-space: pre-wrap;
min-height: 1.3em;
}
.page-hf-cell-para.page-hf-tabbed {
position: relative;
white-space: nowrap;
}
.page-hf-cell-para .page-hf-tabseg {
overflow: hidden;
}
/* inline picture on a layout-table cell run (logo); sits in the cell's text line */
.page-hf-cell-img {
vertical-align: middle;
object-fit: contain;
user-select: none;
pointer-events: none;
}
/* inline picture on a text-paragraph run (logo after a tab): sits on the line's
baseline like Word; a positioned tab segment holding one is out of flow, so
the strut reserves its height and the segment starts at the line top */
.page-hf-run-img {
object-fit: contain;
user-select: none;
pointer-events: none;
}
.page-hf-tab-strut {
display: inline-block;
width: 0;
}
.page-hf-tabseg-img {
top: 0;
}
/* logo and other images in the part (display-only, excluded from text editing) */
.page-hf-images {
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-start;
user-select: none;
pointer-events: none;
}
.page-hf-images img {
max-width: 100%;
object-fit: contain;
}
.page-hf-editing {
outline: 2px solid var(--word-blue);
outline-offset: 2px;
border-radius: 2px;
background: var(--docs-paper);
color: var(--docs-paper-ink);
overflow: visible;
cursor: text;
}
/* editor host: the nested rich-text editor owns its children and unmounts with the strip */
.page-hf-edit-surface {
outline: none;
min-height: 1.3em;
}
.page-hf-editor {
outline: none;
}
.page-hf-editor .doc-textbox-para {
min-height: 1.3em;
}
/* PAGE / NUMPAGES atoms show the live number (decoration attribute); a selected field takes the selection tint */
.hf-field {
border-radius: 2px;
}
.hf-field::after {
content: attr(data-hf-num);
}
.hf-field.ProseMirror-selectednode {
background: var(--selection-soft, var(--hover));
}
/* Word's "Header -Section 2-" / "Same as Previous" tags hang off the strip edge while editing */
.page-hf-tags {
position: absolute;
left: 0;
display: flex;
gap: 6px;
font-size: 9px;
line-height: 1;
pointer-events: none;
user-select: none;
}
.page-hf-header .page-hf-tags {
top: 100%;
margin-top: 3px;
}
.page-hf-footer .page-hf-tags {
bottom: 100%;
margin-bottom: 3px;
}
.page-hf-tag {
padding: 2px 6px;
border-radius: 2px 2px 0 0;
background: var(--word-blue);
color: var(--docs-on-accent);
white-space: nowrap;
}
/* Word dims the body while a header/footer is being edited; the gap widgets (which host
the strip editors on inner pages) keep full contrast */
.page-wrap.hf-editing .ProseMirror > :not(.page-gap) {
opacity: 0.55;
}
.page-hf-header {
top: var(--header-dist, 48px);
border-bottom: 1px dashed transparent;
padding-bottom: 2px;
}
.page-hf-footer {
bottom: var(--footer-dist, 48px);
border-top: 1px dashed transparent;
padding-top: 2px;
}
/* Word's print layout: the header/footer boundary shows only while editing it,
and strips at rest are drawn washed out (per child: an opacity on the strip
itself would trap behindDoc boxes in its stacking context) */
.page-hf-header.page-hf-editing,
.page-hf-footer.page-hf-editing {
border-color: var(--docs-paper-hf-line);
}
.page-hf:not(.page-hf-editing) > :not(.page-hf-tags) {
opacity: 0.5;
}
/* Word/WPS crop marks: an L at each text-boundary corner, arms running out into
the margins. Inner boundaries sit in the page gaps (--gap-* are the adjacent
pages' margins), the first page's top and the last page's bottom on the wrap */
.page-gap:not(.page-gap-inline)::after,
.page-wrap:not(.paper-mixed)::before,
.page-wrap:not(.paper-mixed)::after {
content: '';
position: absolute;
pointer-events: none;
--cm: var(--docs-paper-crop-mark);
--cm-len: 16px;
background-repeat: no-repeat;
}
.page-gap:not(.page-gap-inline)::after {
inset: 0;
background-image:
linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm));
/* arms never cross the paper edge into the gray band */
--cm-down: min(var(--cm-len), var(--gap-mb, 96px));
--cm-up: min(var(--cm-len), var(--gap-mt, 96px));
background-size:
var(--cm-len) 1px,
1px var(--cm-down),
var(--cm-len) 1px,
1px var(--cm-down),
var(--cm-len) 1px,
1px var(--cm-up),
var(--cm-len) 1px,
1px var(--cm-up);
background-position:
/* previous page bottom corners: arms down and outward from the boundary */
calc(var(--gap-ml, 96px) - var(--cm-len)) 0,
var(--gap-ml, 96px) 0,
calc(100% - var(--gap-mr, 96px) + var(--cm-len)) 0,
calc(100% - var(--gap-mr, 96px)) 0,
/* next page top corners (the gap ends at its text boundary): arms up and outward */
calc(var(--gap-ml, 96px) - var(--cm-len)) 100%,
var(--gap-ml, 96px) 100%,
calc(100% - var(--gap-mr, 96px) + var(--cm-len)) 100%,
calc(100% - var(--gap-mr, 96px)) 100%;
}
.page-wrap:not(.paper-mixed)::before,
.page-wrap:not(.paper-mixed)::after {
left: calc((100% - var(--markup-w, 0px) - var(--page-w, 816px)) / 2);
width: var(--page-w, 816px);
/* above the paper's background (::before would otherwise paint under it) */
z-index: 1;
background-image:
linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm));
background-size:
var(--cm-len) 1px,
1px var(--cm-len),
var(--cm-len) 1px,
1px var(--cm-len);
}
/* first page top corners: the box ends at the top text boundary (clipped to the margin) */
.page-wrap:not(.paper-mixed)::before {
--cm-h: min(var(--cm-len), var(--page-mt, 96px));
top: calc(var(--page-mt, 96px) - var(--cm-h));
height: var(--cm-h);
background-position:
calc(var(--page-ml, 96px) - var(--cm-len)) 100%,
var(--page-ml, 96px) 0,
calc(100% - var(--page-mr, 96px) + var(--cm-len)) 100%,
calc(100% - var(--page-mr, 96px)) 0;
}
/* last page bottom corners: the box starts at the bottom text boundary */
.page-wrap:not(.paper-mixed)::after {
--cm-h: min(var(--cm-len), var(--page-mb, 96px));
bottom: calc(var(--page-mb, 96px) - var(--cm-h));
height: var(--cm-h);
background-position:
calc(var(--page-ml, 96px) - var(--cm-len)) 0,
var(--page-ml, 96px) 0,
calc(100% - var(--page-mr, 96px) + var(--cm-len)) 0,
calc(100% - var(--page-mr, 96px)) 0;
}
/* preview/export clones carry full ink (selector outranks the washout above) */
.pv-page .page-hf:not(.page-hf-editing) > :not(.page-hf-tags) {
opacity: 1;
}
.pv-clip .page-gap::after {
display: none;
}
/* navigation pane */
.nav-pane {
position: relative;
flex: none;
border-right: 1px solid var(--border);
background: var(--surface);
display: flex;
flex-direction: column;
overflow: hidden;
}
.nav-pane-resizer {
position: absolute;
top: 0;
right: -3px;
bottom: 0;
width: 7px;
cursor: col-resize;
z-index: 2;
}
.nav-search {
display: flex;
align-items: center;
gap: 6px;
margin: 8px 10px 0;
padding: 0 8px;
height: 26px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--surface);
color: var(--text-dim);
}
.nav-search:focus-within {
border-color: var(--accent);
}
.nav-search-input {
flex: 1;
min-width: 0;
border: none;
background: none;
outline: none;
font-size: 12px;
color: var(--text);
}
.nav-search-input::-webkit-search-cancel-button {
cursor: pointer;
}
.nav-search-count {
font-size: 11px;
color: var(--text-dim);
white-space: nowrap;
}
.nav-tabs {
display: flex;
margin: 6px 10px 0;
border-bottom: 1px solid var(--border);
}
.nav-tab {
flex: 1;
border: none;
background: none;
padding: 5px 0 6px;
font-size: 12px;
color: var(--text-dim);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.nav-tab:hover {
color: var(--text);
}
.nav-tab.on {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.nav-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 6px 0;
}
.nav-tree {
min-height: 100%;
}
.nav-row {
position: relative;
display: flex;
align-items: center;
gap: 2px;
padding: 4px 10px 4px 6px;
font-size: 12.5px;
color: var(--text);
cursor: pointer;
user-select: none;
}
.nav-row:hover {
background: var(--hover);
}
.nav-row.on {
background: var(--accent-soft);
color: var(--accent);
box-shadow: inset 3px 0 0 var(--accent);
}
.nav-row.dim {
opacity: 0.45;
}
.nav-row:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.nav-row.drop-before::before,
.nav-row.drop-after::after {
content: '';
position: absolute;
left: 6px;
right: 6px;
height: 2px;
background: var(--accent);
pointer-events: none;
}
.nav-row.drop-before::before {
top: -1px;
}
.nav-row.drop-after::after {
bottom: -1px;
}
.nav-twisty {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: none;
background: none;
padding: 0;
color: var(--text-dim);
cursor: pointer;
}
.nav-twisty svg {
transform: rotate(90deg);
transition: transform 0.12s;
}
.nav-twisty.closed svg {
transform: rotate(0deg);
}
.nav-twisty.leaf {
cursor: default;
}
.nav-row-text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-badge {
flex: none;
min-width: 18px;
padding: 0 5px;
border-radius: 9px;
font-size: 10.5px;
line-height: 16px;
text-align: center;
background: var(--search-hit-bg);
color: var(--text);
}
.nav-results {
display: flex;
flex-direction: column;
padding: 0 6px;
}
.nav-result {
border: none;
background: none;
text-align: left;
padding: 5px 8px;
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
cursor: pointer;
color: var(--text);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow-wrap: anywhere;
}
.nav-result:hover,
.nav-result.on {
background: var(--hover);
}
.nav-result mark {
background: var(--search-hit-bg);
color: inherit;
border-radius: 2px;
}
.nav-result.on mark {
background: var(--search-hit-active-bg);
color: var(--search-hit-active-ink);
}
.nav-result-ctx {
color: var(--text-dim);
}
.nav-results-note {
font-size: 11px;
color: var(--text-dim);
padding: 4px 8px;
}
.nav-pages {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 6px 12px 12px;
}
.nav-thumb {
position: relative;
flex: none;
padding: 0;
border: 1px solid var(--border);
background: var(--page-bg, var(--docs-paper));
box-shadow: var(--docs-page-shadow);
cursor: pointer;
overflow: hidden;
}
.nav-thumb:hover {
border-color: var(--accent);
}
.nav-thumb.on {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.nav-thumb-page {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
overflow: hidden;
pointer-events: none;
padding: 0 !important;
min-height: 0 !important;
box-shadow: none !important;
column-count: auto !important;
isolation: isolate;
}
.nav-thumb-slot {
position: absolute;
}
.nav-thumb-num {
position: absolute;
right: 4px;
bottom: 4px;
min-width: 18px;
padding: 0 5px;
border-radius: 9px;
font-size: 10.5px;
line-height: 16px;
text-align: center;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.nav-menu {
min-width: 220px;
}
.nav-pane-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 8px 6px 14px;
border-bottom: 1px solid var(--border);
}
.nav-pane-title {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.nav-pane-close {
display: flex;
border: none;
background: none;
padding: 3px;
border-radius: 4px;
color: var(--text-dim);
cursor: pointer;
}
.nav-pane-close:hover {
background: var(--hover);
color: var(--text);
}
.nav-empty {
padding: 12px 14px;
font-size: 12px;
color: var(--text-dim);
}
/* tracked changes: insertions underlined in calm green, deletions struck through in muted crimson */
.doc-ins {
color: var(--rev-ins-ink, var(--docs-paper-rev-ink));
text-decoration: underline;
text-decoration-color: var(--rev-ins-ink, var(--docs-paper-rev-ink));
}
.doc-del {
color: var(--rev-del-ink, var(--docs-paper-rev-ink));
text-decoration: line-through;
text-decoration-color: var(--rev-del-ink, var(--docs-paper-rev-ink));
opacity: 0.72;
}
/* deleted text inside an insertion (insert-then-delete) keeps both cues */
.doc-ins .doc-del,
.doc-del .doc-ins {
text-decoration: underline line-through;
}
/* moved text (Word): double underline at the destination, double strikethrough at the source, move green */
.doc-move-to,
.doc-move-from {
--docs-paper-rev-ink: var(--docs-paper-rev-move);
color: var(--docs-paper-rev-ink);
text-decoration-color: var(--docs-paper-rev-ink);
text-decoration-style: double;
}
/* All Markup: a tracked-deleted paragraph mark shows as a struck pilcrow (Word); the
paragraphs stay apart on screen in every view (the join happens on accept) */
.doc-para-mark-del::after {
content: '\00B6';
color: var(--rev-del-ink, var(--docs-paper-rev-ink));
text-decoration: line-through;
opacity: 0.72;
}
.rev-display-none .doc-para-mark-del::after,
.rev-display-simple .doc-para-mark-del::after,
.rev-display-original .doc-para-mark-del::after,
.rev-balloon .doc-para-mark-del::after {
content: none;
}
/* a pending paragraph-mark deletion joins the paragraph into the next one in the
final-text views (Word): pagination-measure lifts the tail onto the head's last
line and indents its first line to where that line ends; both blocks keep
their own paragraph properties (display-time approximation). */
.rev-display-none .doc-para-join-head,
.rev-display-simple .doc-para-join-head {
margin-bottom: 0 !important;
}
.rev-display-none .doc-para-join-tail[data-join-on],
.rev-display-simple .doc-para-join-tail[data-join-on] {
margin-top: calc(-1 * var(--join-lift, 0px)) !important;
padding-top: 0 !important;
text-indent: var(--join-indent, 0px) !important;
}
.rev-display-none .doc-para-join-head > br.ProseMirror-trailingBreak,
.rev-display-simple .doc-para-join-head > br.ProseMirror-trailingBreak {
display: none;
}
/* revision display mode: No Markup = as if all accepted (insertions shown normally, deletions hidden);
Simple Markup renders the same text and only adds the changed-line bars */
.rev-display-none .doc-ins,
.rev-display-simple .doc-ins {
color: inherit;
background: none;
text-decoration: none;
font-weight: inherit;
font-style: inherit;
}
.rev-display-none .doc-del,
.rev-display-none .has-move-from,
.rev-display-none .doc-para-del-collapse,
.rev-display-simple .doc-del,
.rev-display-simple .has-move-from,
.rev-display-simple .doc-para-del-collapse {
display: none;
}
.rev-display-none .has-move-to,
.rev-display-simple .has-move-to {
background: none;
}
.rev-display-none .has-rpr-change,
.rev-display-simple .has-rpr-change {
color: inherit;
text-decoration: none;
font-weight: inherit;
font-style: inherit;
}
.rev-display-none .has-ppr-change,
.rev-display-simple .has-ppr-change {
border-left: none;
padding-left: 0;
}
.rev-display-none .has-ppr-change::after,
.rev-display-simple .has-ppr-change::after {
content: none;
}
/* revision display mode: Original = as if all rejected (deletions shown normally, insertions hidden).
known approximation: old formats of rPrChange/pPrChange can't be restored in CSS; markers are merely hidden */
.rev-display-original .doc-del {
color: inherit;
text-decoration: none;
font-weight: inherit;
font-style: inherit;
opacity: 1;
}
.rev-display-original .doc-ins,
.rev-display-original .has-move-to {
display: none;
}
.rev-display-original .has-move-from {
background: none;
text-decoration: none;
}
.rev-display-original .has-rpr-change {
color: inherit;
text-decoration: none;
font-weight: inherit;
font-style: inherit;
}
.rev-display-original .has-ppr-change {
border-left: none;
padding-left: 0;
}
.rev-display-original .has-ppr-change::after {
content: none;
}
/* Show Markup filters: an unticked kind renders as accepted (Word) */
.rev-hide-insdel .doc-ins {
color: inherit;
text-decoration: none;
font-weight: inherit;
font-style: inherit;
}
.rev-hide-insdel .doc-del,
.rev-hide-insdel .doc-del-marker,
.rev-hide-insdel .has-move-from,
.rev-hide-insdel .doc-para-del-collapse {
display: none;
}
.rev-hide-insdel .has-move-to {
background: none;
}
.rev-hide-format .has-rpr-change {
color: inherit;
text-decoration: none;
font-weight: inherit;
font-style: inherit;
}
.rev-hide-format .has-ppr-change {
border-left: none;
padding-left: 0;
}
.rev-hide-format .has-ppr-change::after {
content: none;
}
/* inserted then deleted: they cancel out in No Markup view → hidden; also nonexistent in Original view */
.rev-display-none .doc-ins .doc-del,
.rev-display-simple .doc-ins .doc-del,
.rev-display-original .doc-del .doc-ins {
display: none;
}
/* balloon mode (print view, All Markup): deletions and format-change chrome move
to margin balloons and leave the text flow (Word's balloon view); insertions
stay inline. Collapsed paragraphs are fully deleted ones whose mark is also
deleted — Word shows no trace of them in the body. */
.rev-balloon .doc-del,
.rev-balloon .doc-para-del-collapse {
display: none;
}
/* deleted table rows/cells leave the flow with their fills (Word shows them balloon-side only) */
.rev-balloon tr.row-rev-del,
.rev-balloon td.cell-rev-del,
.rev-balloon th.cell-rev-del {
display: none;
}
/* paragraph format changes live in their Formatted: balloon in both balloon modes (Word shows no inline chip) */
.rev-balloon .has-ppr-change,
[data-balloons='comments'] .has-ppr-change {
border-left: none;
padding-left: 0;
}
.rev-balloon .has-ppr-change::after,
[data-balloons='comments'] .has-ppr-change::after {
content: none;
}
/* every inline child deleted, mark live: Word keeps the paragraph as one empty
line — the strut is that line, so the trailing break after a deleted hard
break must not add a second one. Placed after the has-ppr-change::after
overrides: same specificity, later wins */
.rev-display-none .doc-para-content-del::after,
.rev-display-simple .doc-para-content-del::after,
.rev-balloon .doc-para-content-del::after {
content: '\200b';
/* the pPrChange badge shares ::after; its chip must not paint on the strut */
margin-left: 0;
font-size: inherit;
background: none;
border: none;
padding: 0;
}
.rev-display-none .doc-para-content-del > br.ProseMirror-trailingBreak,
.rev-display-simple .doc-para-content-del > br.ProseMirror-trailingBreak,
.rev-balloon .doc-para-content-del > br.ProseMirror-trailingBreak {
display: none;
}
/* Compare result pane */
.compare-meta {
padding: 8px 12px;
font-size: 12px;
color: var(--text-dim);
border-bottom: 1px solid var(--border);
}
.compare-same {
text-align: center;
font-size: 11px;
color: var(--text-dim);
padding: 4px 0;
}
.compare-card {
border: 1px solid var(--border);
border-radius: 6px;
padding: 7px 9px;
margin: 4px 8px;
font-size: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.compare-left {
color: var(--docs-del-ink);
text-decoration: line-through;
opacity: 0.8;
}
.compare-right {
color: var(--docs-ins-ink);
}
.compare-added {
background: var(--docs-ins-bg);
}
.compare-removed {
background: var(--docs-del-bg);
}
/* Reviewing Pane (Review → Reviewing Pane): one card per tracked change */
.review-pane-meta {
padding: 8px 14px;
font-size: 12px;
color: var(--text-dim);
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
}
.review-pane-legend {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
}
.review-pane-author {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--text);
}
.review-swatch {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--docs-paper-rev-ink);
flex: none;
}
.layout-menu .rb-menu-sep {
height: 1px;
margin: 4px 0;
background: var(--border);
}
/* comment composer (new comment) */
.comment-compose {
border-bottom: 1px solid var(--border);
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.comment-compose textarea {
width: 100%;
min-height: 56px;
resize: vertical;
border: 1px solid var(--border-strong);
border-radius: 6px;
padding: 6px 8px;
font-size: 13px;
font-family: inherit;
background: var(--surface);
color: var(--text);
}
.comment-compose-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
.comment-compose-actions button {
border: 1px solid var(--border-strong);
background: var(--surface);
border-radius: 5px;
padding: 4px 12px;
font-size: 12px;
cursor: pointer;
color: var(--text);
}
.comment-compose-actions button.primary {
background: var(--accent);
border-color: var(--accent);
color: var(--docs-on-accent);
}
/* Reviewing Pane (left column, Word's vertical pane) */
.review-pane-title {
display: flex;
align-items: center;
gap: 6px;
}
.review-pane-count {
padding: 0 7px;
border-radius: 9px;
background: var(--hover);
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
}
.review-pane-summary {
margin: 0;
display: grid;
grid-template-columns: auto max-content;
gap: 2px 12px;
justify-content: start;
}
.review-pane-sum-line {
display: contents;
}
.review-pane-summary dd {
margin: 0;
color: var(--text);
font-weight: 600;
text-align: right;
}
.review-pane-list {
flex: 1;
overflow-y: auto;
}
.review-row {
position: relative;
padding: 6px 10px 6px 14px;
border-bottom: 1px solid var(--border);
font-size: 12px;
color: var(--text);
cursor: pointer;
}
.review-row:hover,
.review-row:focus-within {
background: var(--hover);
}
.review-row.active {
background: var(--accent-soft);
box-shadow: inset 3px 0 0 var(--accent);
}
.review-row:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.review-row-head {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 11px;
}
.review-row-kind {
font-weight: 600;
color: var(--docs-paper-rev-ink);
}
.review-row-author {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.review-row-when {
margin-left: auto;
flex: none;
color: var(--text-dim);
}
.review-row-text {
margin-top: 2px;
white-space: pre-wrap;
word-break: break-word;
}
.review-del .review-row-text {
text-decoration: line-through;
color: var(--text-dim);
}
.review-ins .review-row-text {
text-decoration: underline;
}
/* Accept / Reject overlay the date on hover, focus and the active row */
.review-row-actions {
position: absolute;
top: 3px;
right: 6px;
display: flex;
gap: 4px;
padding-left: 8px;
/* covers the date underneath, in the row's own hover / active colour */
background: inherit;
opacity: 0;
pointer-events: none;
}
.review-row:hover .review-row-actions,
.review-row:focus-within .review-row-actions,
.review-row.active .review-row-actions {
opacity: 1;
pointer-events: auto;
}
.review-row-act {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 4px;
font-size: 11px;
line-height: 16px;
padding: 0 6px;
cursor: pointer;
}
.review-row-act:hover:not(:disabled) {
background: var(--hover);
}
.review-row-act:disabled {
opacity: 0.5;
cursor: default;
}
/* comments: in-text highlight + right-side pane */
.doc-comment {
background: var(--rev-comment-bg, var(--docs-paper-comment-bg));
border-bottom: 2px solid var(--rev-comment-ink, var(--docs-paper-comment-line));
cursor: pointer;
}
/* range picked for a comment that is still being composed */
.comment-pending {
background: var(--rev-comment-bg, var(--docs-paper-comment-bg));
border-bottom: 2px dashed var(--rev-comment-ink, var(--docs-paper-comment-line));
}
/* Word: body shading of resolved threads is hidden (the jump flash animation can still briefly reveal the position) */
.doc-comment:has(.doc-comment-resolved),
.doc-comment-resolved,
.doc-comment-resolved .doc-comment {
background: none;
border-bottom: none;
cursor: text;
}
.doc-comment-flash {
animation: comment-flash 350ms cubic-bezier(0, 0, 0.2, 1);
}
@keyframes comment-flash {
0%,
40% {
background: var(--docs-paper-comment-flash);
}
100% {
background: var(--docs-paper-comment-bg);
}
}
.comments-pane {
width: 264px;
flex: none;
border-left: 1px solid var(--border);
background: var(--surface);
display: flex;
flex-direction: column;
overflow: hidden;
}
.comments-pane-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px 8px;
border-bottom: 1px solid var(--border);
}
.comments-pane-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.comments-pane-close {
border: none;
background: none;
cursor: pointer;
font-size: 12px;
color: var(--text-dim);
border-radius: 3px;
padding: 2px 6px;
}
.comments-pane-close:hover {
background: var(--hover);
}
.comments-pane-list {
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.comment-card {
display: block;
text-align: left;
cursor: pointer;
font-size: 12.5px;
color: var(--text);
}
.comment-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Word's modern comment header, shared by the pane and the margin bubbles */
.comment-card-head {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 6px;
}
.comment-avatar {
flex: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--docs-comment-accent);
color: var(--docs-on-accent);
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.comment-meta {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
line-height: 1.25;
}
.comment-author {
font-weight: 600;
font-size: 12px;
overflow-wrap: anywhere;
}
.comment-when {
font-size: 10.5px;
color: var(--text-dim);
}
.comment-card-actions {
position: relative;
margin-left: auto;
flex: none;
display: flex;
gap: 2px;
}
.comment-resolve,
.comment-more {
width: 22px;
height: 22px;
border: none;
background: none;
border-radius: 4px;
color: var(--text-dim);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
}
.comment-resolve:hover,
.comment-more:hover {
background: var(--hover);
color: var(--text);
}
.comment-resolve.on {
color: var(--docs-ok-ink);
}
.comment-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 5;
min-width: 170px;
padding: 4px;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--shadow-menu);
}
.comment-menu[hidden] {
display: none;
}
.comment-menu button {
white-space: nowrap;
text-align: left;
border: none;
background: none;
padding: 5px 8px;
border-radius: 4px;
font-size: 12px;
color: var(--text);
cursor: pointer;
}
.comment-menu button:hover {
background: var(--hover);
}
.comment-menu .comment-card-del:hover {
color: var(--danger);
}
.comment-reply-input {
display: block;
width: 100%;
box-sizing: border-box;
margin-top: 8px;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: 12px;
}
.comment-reply-input:focus {
outline: none;
border-color: var(--accent);
}
.comment-anchor {
font-size: 11px;
color: var(--text-dim);
border-left: 2px solid var(--docs-comment-accent);
padding-left: 6px;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.comment-text {
white-space: pre-wrap;
word-break: break-word;
}
.comment-image {
display: block;
max-width: 100%;
border: 1px solid var(--border);
border-radius: 4px;
margin-top: 6px;
}
.comment-image-preview {
display: flex;
align-items: flex-start;
gap: 6px;
}
.comment-image-preview img {
max-width: 120px;
max-height: 90px;
border: 1px solid var(--border);
border-radius: 4px;
}
.comment-image-preview button {
padding: 2px 6px;
font-size: 11px;
}
.comments-empty {
padding: 12px 14px;
font-size: 12px;
color: var(--text-dim);
}
/* horizontal ruler */
.ruler {
position: relative;
height: 20px;
margin: 0 auto 6px;
background: var(--docs-ruler-bg);
border: 1px solid var(--docs-ruler-border);
border-radius: 2px;
font-size: 9px;
color: var(--docs-ruler-ink);
user-select: none;
overflow: hidden;
cursor: pointer;
}
.ruler-tab-type {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 100%;
background: var(--docs-ruler-btn-bg);
border: none;
border-right: 1px solid var(--docs-ruler-btn-border);
font-size: 9px;
font-weight: bold;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
color: var(--docs-ruler-btn-ink);
}
.ruler-tab-type:hover {
background: var(--docs-ruler-btn-hover);
}
/* tab stop markers on ruler */
.ruler-tab {
position: absolute;
bottom: 2px;
width: 10px;
height: 10px;
font-size: 8px;
font-weight: bold;
color: var(--accent);
cursor: move;
transform: translateX(-50%);
text-align: center;
line-height: 10px;
z-index: 3;
user-select: none;
}
.ruler-tab:hover {
color: var(--accent-dark);
background: var(--docs-accent-ghost);
}
.ruler-tab:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* default tab stop guide (no interaction) */
.ruler-tab-default {
position: absolute;
bottom: 0;
width: 1px;
height: 4px;
background: var(--docs-ruler-tab-guide);
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
}
.ruler-zone {
position: absolute;
top: 0;
bottom: 0;
background: var(--docs-ruler-zone);
}
.ruler-num {
position: absolute;
top: 3px;
transform: translateX(-50%);
line-height: 1;
pointer-events: none;
}
.ruler-tick {
position: absolute;
bottom: 0;
width: 1px;
height: 3px;
background: var(--docs-ruler-tick);
pointer-events: none;
}
.ruler-tick-mid {
height: 6px;
}
/* indent markers (Word): first-line triangle on top, hanging triangle over the
left-indent box below, right-indent triangle at the right edge */
.ruler-ind {
position: absolute;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
transform: translateX(-50%);
cursor: default;
z-index: 4;
}
.ruler-ind-firstLine {
top: 1px;
border-top: 6px solid var(--docs-ruler-btn-ink);
}
.ruler-ind-hanging,
.ruler-ind-right {
top: 8px;
border-bottom: 6px solid var(--docs-ruler-btn-ink);
}
.ruler-ind-left {
top: 14px;
width: 10px;
height: 4px;
border: none;
background: var(--docs-ruler-btn-ink);
}
.ruler-ind:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.ruler-margin-handle {
position: absolute;
top: 0;
bottom: 0;
width: 7px;
transform: translateX(-50%);
cursor: col-resize;
z-index: 2;
}
.ruler-margin-handle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.ruler-drag-guide {
position: fixed;
width: 0;
border-left: 1px dotted var(--docs-ruler-ink);
pointer-events: none;
z-index: 1000;
}
/* contextual Header & Footer tab */
.hf-ribbon-body {
display: flex;
align-items: stretch;
}
.hf-distances {
gap: 4px;
justify-content: center;
}
.hf-distance > span:first-child {
width: auto;
}
/* header/footer dropdown editor */
.hf-menu {
/* fixed + anchored like the other ribbon panels, so the ribbon-body
scroll clip can't cut it off */
position: fixed;
position-anchor: --rb-drop-wrap;
top: anchor(bottom);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 30;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 10px;
width: 260px;
}
.hf-menu-title {
font-size: 11px;
color: var(--text-dim);
margin-bottom: 6px;
}
.hf-menu input {
width: 100%;
box-sizing: border-box;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 12.5px;
background: var(--surface);
color: var(--text);
}
.hf-menu-actions {
display: flex;
gap: 6px;
margin-top: 8px;
justify-content: flex-end;
}
.hf-menu-actions button {
padding: 4px 12px;
font-size: 12px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.hf-menu-actions .btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--docs-on-accent);
}
/* the page: size/margins/background follow the docx sectPr via CSS vars */
.doc-page {
width: var(--page-w, 816px);
margin: 0 auto;
/* own stacking context: floating pictures rank via z-index (front band is
unbounded upward), so trap those ranks here — editor chrome mounted
outside the page (table handles, menus) always paints above them */
isolation: isolate;
background: var(--page-bg, var(--docs-paper));
box-shadow: var(--docs-page-shadow);
padding: var(--page-pad, 96px 96px 120px);
min-height: var(--page-h, 1056px);
outline: none;
font-family: Calibri, 'DengXian', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 11pt;
line-height: 1.35;
color: var(--docs-paper-ink);
/* Word's autoSpaceDE/DN (on by default): 1/8em gap between CJK and Latin/digits */
text-autospace: normal;
/* the other half of Word's ~1/4em gap, delivered by .doc-autospace-pad spans */
--doc-autospace-pad: 0.125em;
}
/* CJK/Latin autospace pad: the character after the boundary carries the extra
1/8em as a start margin. Plain inline (not inline-block): an atomic inline
would suppress Chromium's own text-autospace gap. Not an empty span: when an
empty inline's margin is what no longer fits at the line end, Chromium rewinds
to the previous recorded break opportunity (the preceding pad) instead of
breaking inside the CJK run, dropping a third of the line (prod 003). */
.doc-autospace-pad {
margin-inline-start: var(--doc-autospace-pad, 0.125em);
}
/* only one of autoSpaceDE/DN is off: the native gap is disabled, the pad carries all of it */
.doc-autospace-pad-full {
margin-inline-start: calc(var(--doc-autospace-pad, 0.125em) * 2);
}
/* Latin -> CJK seam: Word's gap is half the Latin face's average char width
(line-metrics latinAutospaceGapEm); the span scales its share of the base */
.doc-autospace-pad-le {
margin-inline-start: calc(var(--doc-autospace-pad, 0.125em) * var(--doc-autospace-pad-le, 1));
}
/* static-DOM word-joiner (protected-render padSegments): generated content keeps
the U+2060 out of innerText, so cell / textbox edits never commit it */
.doc-kr-wj:empty::before {
content: '\2060';
}
/* a space with a hangul neighbour advances 0.5em in Word whatever the run font
(line-metrics hangulSpaceOffsets); the half-width space face supplies that
advance. Keep it a plain baseline inline: line-height:0 or vertical-align:top
on this span made the table-row cut measuring split a two-line row across
pages. */
.doc-hangul-space {
font-family: 'Lycero Office Hangul Space';
}
/* dark page in the light theme: Word's gray band around the dark paper — one
variable override, every canvas-band rule below reads var(--canvas) */
.workspace-dark {
--canvas: #3d3d3d;
}
/* ---- Dark page (View ▸ Dark Mode; the dark theme's default) ----
Word-style: the paper renders dark and authored document colors are remapped
for contrast, on screen only. Emission sites append `--dk-*` twins next to the
authored inline declarations (editor/dark-page.ts); the rules below switch the
painted property to the twin. Screen media only, so printToPDF of the live
canvas keeps the authored colors (the pagination preview sits outside
.page-dark and stays paper-white like Word's print preview). The paper
constants are darkPageColor() of their light values — keep the two in step. */
@media screen {
.page-dark {
--ai-highlight: #483d1e;
--ai-highlight-border: #d9a71e;
--docs-paper: #1e1e1e;
--docs-paper-ink: #ffffff;
--docs-paper-ink-dim: #d2d2d2;
--docs-paper-ink-mid: #b4b4b4;
--docs-paper-ink-soft: #969696;
--docs-paper-ink-faint: #878787;
--docs-paper-heading: #83a4de;
--docs-paper-link: #55a8fb;
--docs-paper-accent: #629cf3;
--docs-paper-mark: #468edb;
--docs-paper-grid: rgb(70 142 219 / 13%);
--docs-paper-hf-line: #474747;
--docs-paper-crop-mark: #606060;
--docs-paper-chip-bg: #222222;
--docs-paper-select-bg: #222a32;
--docs-paper-stripe: #2b2b2b;
--docs-paper-chart-grid: #393939;
--docs-paper-chart-border: #3f3f3f;
--docs-paper-field-bg: rgb(255 255 255 / 7%);
--docs-paper-watermark: rgb(142 142 142 / 18%);
--docs-paper-rev-ink: #ff8a8a;
--docs-paper-rev-ink-1: #5a86ff;
--docs-paper-rev-ink-2: #96f4b9;
--docs-paper-rev-ink-3: #9746dd;
--docs-paper-rev-ink-4: #6ac4dd;
--docs-paper-rev-ink-5: #ff996a;
--docs-paper-rev-ink-6: #f25f9c;
--docs-paper-rev-ink-7: #c4ed8d;
--docs-paper-rev-color-black: #ffffff;
--docs-paper-rev-color-blue: #6969ff;
--docs-paper-rev-color-turquoise: #1eb4b4;
--docs-paper-rev-color-brightGreen: #69ff69;
--docs-paper-rev-color-pink: #b41eb4;
--docs-paper-rev-color-red: #ff6969;
--docs-paper-rev-color-yellow: #b4b41e;
--docs-paper-rev-color-white: #1e1e1e;
--docs-paper-rev-color-darkBlue: #b4b4ff;
--docs-paper-rev-color-teal: #68d9d9;
--docs-paper-rev-color-green: #b4ffb4;
--docs-paper-rev-color-violet: #d968d9;
--docs-paper-rev-color-darkRed: #ffb4b4;
--docs-paper-rev-color-darkYellow: #d9d968;
--docs-paper-rev-color-gray50: #8e8e8e;
--docs-paper-rev-color-gray25: #555555;
--docs-paper-rev-color-classicRed: #ff8e8e;
--docs-paper-rev-color-classicBlue: #4caff5;
--docs-paper-rev-color-lightBlue: #2d4358;
--docs-paper-rev-color-palePink: #532937;
--docs-paper-rev-color-lightYellow: #3c3c1e;
--docs-paper-rev-color-lightOrange: #613f23;
--docs-paper-cell-ins-bg: var(--docs-paper-rev-color-lightBlue);
--docs-paper-cell-del-bg: var(--docs-paper-rev-color-palePink);
--docs-paper-cell-merge-bg: var(--docs-paper-rev-color-lightYellow);
--docs-paper-ins-bg: rgb(122 246 168 / 8%);
--docs-paper-del-bg: rgb(255 114 114 / 8%);
--docs-paper-del-line: #ff7272;
--docs-paper-ppr: #e4971e;
--docs-paper-ppr-ink: #fea867;
--docs-paper-ppr-bg: #463c1e;
--docs-paper-ppr-border: #a07b1e;
--docs-paper-rpr: #e9b137;
--docs-paper-sdt-border: #345174;
--docs-paper-sdt-ink: #648eb8;
--docs-paper-sdt-bg: #22272d;
--docs-paper-comment-bg: rgb(106 166 32 / 25%);
--docs-paper-comment-flash: rgb(145 181 102 / 45%);
--docs-paper-comment-line: #91b566;
--docs-paper-ai-anchor-bg: rgb(74 116 197 / 14%);
--docs-paper-ai-anchor-line: #4a74c5;
--docs-paper-xe-ink: #c5ab7f;
--docs-paper-xe-bg: #332d1e;
--docs-paper-xe-border: #796a37;
--docs-paper-hit-bg: #745a1e;
--docs-paper-hit-active-bg: #d4781f;
--docs-paper-hit-active-ink: #1e1e1e;
}
/* Filled text boxes are a light island: their text contrasts with the box
fill, not with the paper, so nothing inside them is remapped. The shared
constants rule near the top of the file gives them the light paper values
back; this re-sets the page ink they would otherwise inherit from
.doc-page (docStyleCss re-sets a document default color the same way),
and every twin rule below skips them. */
.page-dark .doc-textbox-filled {
color: var(--docs-paper-ink);
}
/* dark shading is remapped light on the dark page, so its auto ink goes paper-dark */
.page-dark [data-ink='light']:where(:not(.doc-textbox-filled *)) {
--docs-paper-ink: var(--docs-paper);
}
.page-dark [data-ink='light'] [data-ink='dark']:where(:not(.doc-textbox-filled *)) {
--docs-paper-ink: #ffffff;
}
/* Inline twins. !important is what beats the authored inline declaration;
:where() keeps the specificity at the bare attribute selector so any later
paper rule still wins over these. */
:where(.page-dark) [style*='--dk-c:']:where(:not(.doc-textbox-filled, .doc-textbox-filled *)) {
color: var(--dk-c) !important;
}
:where(.page-dark) [style*='--dk-bg:']:where(:not(.doc-textbox-filled, .doc-textbox-filled *)) {
background-color: var(--dk-bg) !important;
}
/* the widened shading box (--pbdr-fill shadow) follows the remapped fill */
:where(.page-dark) [style*='--dk-bg:']:where(:not(.doc-textbox-filled, .doc-textbox-filled *)) {
--pbdr-fill: var(--dk-bg) !important;
}
:where(.page-dark) [style*='--dk-bgi:']:where(:not(.doc-textbox-filled, .doc-textbox-filled *)) {
background-image: var(--dk-bgi) !important;
}
:where(.page-dark) [style*='--dk-b-t:']:where(:not(.doc-textbox-filled, .doc-textbox-filled *)) {
border-top: var(--dk-b-t) !important;
}
:where(.page-dark) [style*='--dk-b-r:']:where(:not(.doc-textbox-filled, .doc-textbox-filled *)) {
border-right: var(--dk-b-r) !important;
}
:where(.page-dark) [style*='--dk-b-b:']:where(:not(.doc-textbox-filled, .doc-textbox-filled *)) {
border-bottom: var(--dk-b-b) !important;
}
:where(.page-dark) [style*='--dk-b-l:']:where(:not(.doc-textbox-filled, .doc-textbox-filled *)) {
border-left: var(--dk-b-l) !important;
}
/* table-level w:tblBorders: twins of the --doc-b-* cell rules further down
(same selectors, the table's --dk-tb-* variables instead; :where() keeps
the specificity equal to the authored rules) */
.page-dark .doc-table td:where(:not(.doc-textbox-filled *)),
.page-dark .doc-table th:where(:not(.doc-textbox-filled *)) {
border-top: var(--dk-tb-h, none);
border-bottom: var(--dk-tb-h, none);
border-left: var(--dk-tb-v, none);
border-right: var(--dk-tb-v, none);
}
.page-dark .doc-table tr:first-child > td:where(:not(.doc-textbox-filled *)),
.page-dark .doc-table tr:first-child > th:where(:not(.doc-textbox-filled *)) {
border-top: var(--dk-tb-t, var(--dk-tb-h, none));
}
.page-dark .doc-table tr:last-child > td:where(:not(.doc-textbox-filled *)),
.page-dark .doc-table tr:last-child > th:where(:not(.doc-textbox-filled *)) {
border-bottom: var(--dk-tb-b, var(--dk-tb-h, none));
}
.page-dark .doc-table td:first-child:where(:not(.doc-textbox-filled *)),
.page-dark .doc-table th:first-child:where(:not(.doc-textbox-filled *)) {
border-left: var(--dk-tb-l, var(--dk-tb-v, none));
}
.page-dark .doc-table td:last-child:where(:not(.doc-textbox-filled *)),
.page-dark .doc-table th:last-child:where(:not(.doc-textbox-filled *)) {
border-right: var(--dk-tb-r, var(--dk-tb-v, none));
}
}
/* visual page-break indicator (w:pageBreakBefore): one out-of-flow pseudo-element
in the margin above the paragraph — as a border + 14px padding it pushed the
page's content down 15px, where Word reserves nothing. A list item's ::before
is its numbering marker, so list items carry the band on ::after */
.doc-page .page-break-before {
position: relative;
margin-top: 14pt;
}
.doc-page .page-break-before:where(:not(.doc-li))::before,
.doc-page .doc-li.page-break-before::after {
content: attr(data-page-break-label);
position: absolute;
top: -19px;
left: 0;
right: 0;
height: 13px;
border-bottom: 1px dashed var(--border-strong);
font-size: 10px;
line-height: 13px;
text-align: center;
text-indent: 0;
color: var(--text-dim);
}
.doc-page p {
margin: 0 0 8pt;
}
.doc-page p[style*='text-align:justify'],
.doc-page p[style*='text-align: justify'] {
text-justify: inter-word;
overflow-wrap: break-word;
}
/* M4 always-on pagination in the canvas: page gap = previous page's bottom margin (white) + inter-page band (gray) + next page's top margin (white) */
.page-gap {
position: relative;
cursor: default;
user-select: none;
}
.page-gap::before {
content: '';
position: absolute;
top: var(--gap-mb, 96px);
bottom: var(--gap-mt, 96px);
left: 0;
right: 0;
background: var(--canvas);
box-shadow: var(--docs-gap-inset);
}
/* inline gap for mid-paragraph page breaks: inserted at the broken line inside the paragraph, takes its own line, excluded from text selection/cursor.
Opaque paper background so the paragraph's own shading can't cross the band (the ::before canvas band paints on top of it). */
.page-gap-inline {
display: inline-block;
vertical-align: top;
pointer-events: none;
text-indent: 0;
background: var(--page-bg, var(--docs-paper));
}
/* in-cell gap (single-column in-row table cut): opaque paper background so the cell's
shading/borders don't cross the band; z-index lifts it above collapsed-border painting */
.page-gap-cell {
background: var(--page-bg, var(--docs-paper));
z-index: 1;
}
/* In-table gap at a row boundary. A real spanning cell isolates collapsed
borders/backgrounds from the page gutter; the inner fill paints paper /
canvas / paper bands without inheriting table-cell decoration. */
.page-gap-table {
display: table-row;
}
.doc-table .page-gap-table > td {
position: relative;
height: auto;
padding: 0;
/* !important: the td edge-border rules (--doc-b-l/r on first/last-child) come
later in the sheet and would otherwise frame the page gutter */
border: 0 !important;
background: var(--page-bg, var(--docs-paper));
}
.page-gap-table::before {
display: none;
}
/* absolute: height 100% of an auto-height td resolves to 0, hiding the bands.
left/width are re-anchored to the paper box by alignTableGapFills (inline
styles): the cell's own box follows the table, not the paper */
.page-gap-table-fill {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
var(--page-bg, var(--docs-paper)) 0 var(--gap-mb, 96px),
var(--canvas) var(--gap-mb, 96px) calc(var(--gap-mb, 96px) + 28px),
var(--page-bg, var(--docs-paper)) calc(var(--gap-mb, 96px) + 28px) 100%
);
}
/* differing-width documents (syncPageSheets): the shared paper goes transparent and
every page paints its own centered sheet; the gap band's inset shadow would run
past a narrower page's edges */
.page-wrap.paper-mixed {
isolation: isolate;
}
.page-wrap.paper-mixed .doc-page {
background: transparent;
box-shadow: none;
}
.page-wrap.paper-mixed .page-gap::before {
box-shadow: none;
}
.page-sheets {
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
}
.page-sheet {
position: absolute;
background: var(--page-bg, var(--docs-paper));
box-shadow: var(--docs-page-shadow);
}
/* footnote area at the top of a page gap (previous page's bottom, Word behavior): the gap was already enlarged by the reserved height;
the estimated height differs from actual rendering by pixels, so overflow into the bottom-margin area is allowed (no clipping) */
.page-gap-notes {
position: absolute;
/* small offset keeps the separator off the last line's descenders when the break lands mid-paragraph */
top: 5px;
overflow: visible;
box-sizing: border-box;
pointer-events: auto;
font-size: 10pt;
/* font + line-height mirror the estimateFootnoteHeight model (line-height set
inline in px, docGrid-snapped) so reserved and rendered heights agree */
font-family: Calibri, Carlito, 'Carlito GO', sans-serif;
line-height: 1.3;
color: var(--docs-paper-ink-dim);
text-indent: 0;
text-align: left;
}
/* Word's built-in separator: a 2in rule (clamped to the column) on its own line;
the border sits at the bottom of the reserved row (11 + 1 + 4 = FOOTNOTE_SEPARATOR_H)
so it clears the last body line's descenders instead of underlining them */
.page-gap-notes::before {
content: '';
display: block;
width: min(2in, 100%);
height: 11px;
border-bottom: 1px solid var(--docs-paper-ink-faint);
margin-bottom: 4px;
}
/* rows are min-height (App.tsx): a long entry grows past its reserved height
and spills into the bottom margin instead of being clipped mid-line */
.page-gap-note {
cursor: default;
}
.page-gap-note.rev-target {
outline: 2px solid var(--docs-paper-rev-ink);
outline-offset: 1px;
}
.pv-footnote {
overflow: hidden;
}
.page-gap-note sup {
margin-right: 4px;
font-size: 0.65em;
}
/* pagination preview: page-bottom footnote area (the referencing page; separator + small text); tiny overflow spills into the bottom margin */
.pv-footnotes {
position: absolute;
overflow: visible;
box-sizing: border-box;
font-size: 10pt;
line-height: 1.3;
color: var(--docs-paper-ink-dim);
}
/* same 2in bottom-anchored rule as .page-gap-notes::before; consuming the full
reserved row keeps the entries aligned with the engine's height reservation */
.pv-footnotes::before {
content: '';
display: block;
width: min(2in, 100%);
height: 11px;
border-bottom: 1px solid var(--docs-paper-ink-faint);
margin-bottom: 4px;
}
/* Word renders note markers with the reference character style: superscript at
~65% of the entry size (the UA's font-size:smaller left them oversized) */
.pv-footnote sup {
margin-right: 4px;
font-size: 0.65em;
}
/* endnote area: right after the body's end, separator above the first entry, continuation pages have no separator */
.pv-endnotes {
position: absolute;
overflow: visible;
box-sizing: border-box;
font-size: 10pt;
line-height: 1.3;
color: var(--docs-paper-ink-dim);
}
.pv-endnote-separator {
/* matches FOOTNOTE_SEPARATOR_H (16px): 11 box + 1 bottom border + 4 spacing —
the rule sits at the row's bottom, clear of the last body line above it */
width: min(2in, 100%);
border-bottom: 1px solid var(--docs-paper-ink-faint);
margin-bottom: 4px;
height: 11px;
}
/* header/footer strips inside canvas page gaps: double-click opens that page's
strip editor in place (App.startGapHfEdit); hover hints at it like Word */
.page-gap-hf {
cursor: default;
}
.page-gap-hf:hover:not(.page-hf-editing) {
outline: 1px dashed var(--docs-paper-hf-line);
outline-offset: 2px;
}
.page-gap-hf .page-hf-tags {
display: none;
}
/* floating textbox in a header/footer part: drawn at its anchor's page position
(strip-relative offsets from hfTextBoxStyle) like Word's anchored shapes, so
its lines never stack into the strip flow. The box can sit outside the strip's
own line box, so a strip hosting boxes opens its overflow and gives up its
stacking context (no z-index, and centering by offset instead of the
translate, which would keep one): behindDoc boxes (z-index -1) then paint
under the body like floating header images, in-front boxes stay above it.
Inline left/transform from sizeGapHf / the edge pins and the .pv-page rule
below still take precedence. */
.page-hf.page-hf-has-boxes {
overflow: visible;
z-index: auto;
left: calc(50% - var(--section-content-w, calc(var(--page-w, 816px) - 120px)) / 2);
transform: none;
}
.page-hf-textbox {
position: absolute;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.page-hf-textbox .page-hf-para {
min-height: 0;
}
/* a strip paragraph hosting the boxes anchored to it (paragraph-relative offsets) */
.page-hf-anchor {
position: relative;
}
/* words break only at spaces like Word; wrap="none" keeps a label on one line */
.page-hf-textbox .page-hf-para {
word-break: normal;
overflow-wrap: normal;
}
.page-hf-textbox.page-hf-nowrap .page-hf-para {
white-space: pre;
}
/* floating header image (picture watermark) on canvas pages, mirroring
.pv-watermark-img: behind the body text via negative z-index, which needs
.doc-page as the stacking context (isolation below) so the image still paints
above the paper background. Document content: identical in both themes. */
.page-hf-float-img {
position: absolute;
z-index: -1;
pointer-events: none;
user-select: none;
}
.view-print .doc-page {
isolation: isolate;
}
/* first page's floating-image host: zero-height page-float-host so measurement
and preview clones ignore it without page-boundary consumers counting it as a page */
.page-first-floats {
position: relative;
height: 0;
cursor: default;
user-select: none;
}
/* when a page gap is right next to a page-break indicator, hide the duplicate dashed marker */
.page-gap + .page-break-before:where(:not(.doc-li))::before,
.page-gap + .doc-li.page-break-before::after {
display: none;
}
/* Word drops space-before on a page's lead block but still charges it for the fit on
the previous page: display-only, the measuring pass keeps the declared margin (else a
natural lead fits back, loses the gap, overflows again). !important beats the inline
spacing style; otherwise unscoped so pv clones and direct print match */
.page-break-lead:not(.measuring-natural *) {
margin-top: 0 !important;
}
/* the lead's own break keeps the part of its space before that exceeds the
previous paragraph's space after (the rest fell at the page bottom) */
.page-break-lead-trim:not(.measuring-natural *) {
margin-top: var(--lead-mt) !important;
}
/* Sole line taller than its column (oversized inline picture): Word overflow-clips
it at the page bottom. The max-height rides the setOversizeClips inline style;
unscoped so pv clones and direct print match */
.doc-oversize-clip {
overflow: hidden;
}
/* Word border groups: adjacent paragraphs with identical w:pBdr + shading draw
top/bottom lines only at the group edges (ParaBorderMergeExtension classes).
!important beats the inline border style; unscoped so pv clones and print match */
.pbdr-suppress-top {
border-top: none !important;
padding-top: 0 !important;
}
.pbdr-suppress-bottom {
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* pagination preview: read-only overlay, one fixed-size box per page, content clone clipped via negative margin */
.pagination-preview {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
flex-direction: column;
background: var(--docs-pv-canvas);
}
/* chunked PDF export: each printToPDF flips print<->screen media over the whole
document; parking the subtree layout of everything outside the printed group
(the editor is covered by the opaque preview overlay; skipped pages keep
their inline-sized box) keeps those flips from stalling Chromium for minutes
on hundreds of table-heavy pages */
.app.pv-exporting > *:not(.pagination-preview) {
content-visibility: hidden;
}
.pv-page.pv-print-skip {
content-visibility: hidden;
}
.pv-toolbar {
position: relative;
z-index: 1;
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
-webkit-app-region: no-drag;
}
.pv-title {
font-weight: 600;
}
.pv-count {
color: var(--text-dim);
}
.pv-hint {
margin-left: auto;
font-size: 12px;
color: var(--text-dim);
}
.pv-close {
border: 1px solid var(--border);
background: var(--surface);
border-radius: 4px;
padding: 4px 14px;
cursor: pointer;
-webkit-app-region: no-drag;
}
.pv-close:hover {
background: var(--word-blue);
border-color: var(--word-blue);
color: var(--docs-on-accent);
}
.pv-scroll {
flex: 1;
overflow: auto;
padding: 24px 0 48px;
}
.pv-page {
position: relative;
/* own stacking context: behind-text layers (picture watermarks, z-index -1)
must stay above this page's background, not sink under it */
isolation: isolate;
margin: 0 auto 24px;
background: var(--docs-paper);
box-shadow: var(--docs-page-shadow);
box-sizing: border-box;
overflow: hidden;
font-family: Calibri, 'DengXian', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 11pt;
line-height: 1.35;
color: var(--docs-paper-ink);
}
.pv-clip {
overflow: hidden;
}
/* own formatting context: the clone's first block may carry a negative top
margin (lifted table); collapsing it with the window offset would swallow it */
.pv-offset {
display: flow-root;
}
/* header picture watermark (absolute VML shape): drawn once per preview page,
behind the body text. Document content: renders identically in both themes. */
.pv-watermark-img {
position: absolute;
z-index: -1;
pointer-events: none;
}
/* clip at the paper edge, not the content box: over-wide tables bleed into the right
margin like Word (keep overflow hidden — print pagination needs the box monolithic).
Left side symmetrically: negative w:tblInd tables start inside the left margin, and
clipping at the content box culled their leading characters from the exported text.
The padding compensates the negative margin so the content position is unchanged —
only the clip edge moves out to the paper edge. */
.pv-sheet > .pv-clip {
margin-right: calc(-1 * var(--pv-mr, 0px));
margin-left: calc(-1 * var(--pv-ml, 0px));
padding-left: var(--pv-ml, 0px);
}
/* the page's layout lives on this wrapper so the whole sheet can scale as one
when the markup strip is on (Word's print-markup geometry) */
.pv-sheet {
position: absolute;
inset: 0;
box-sizing: border-box;
transform-origin: 0 0;
}
.pv-markup {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
pointer-events: none;
font-family: 'Segoe UI', 'PingFang SC', sans-serif;
}
.pv-markup-band {
position: absolute;
top: 0;
bottom: 0;
background: var(--docs-print-markup-band);
}
.pv-comment-leaders {
position: absolute;
left: 0;
top: 0;
}
.pv-comment-leaders path {
fill: none;
stroke: var(--rev-comment-ink, var(--docs-paper-comment-line));
stroke-width: 1;
stroke-dasharray: 3 2;
}
.pv-comment-bubble {
position: absolute;
box-sizing: border-box;
padding: 5px 8px;
border: 1px solid var(--rev-comment-ink, var(--docs-paper-comment-line));
border-radius: 4px;
background: var(--docs-print-comment-fill);
color: var(--docs-print-comment-ink);
font-size: 12px;
line-height: 16px;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.pv-comment-label {
font-weight: 700;
}
.pv-comment-leaders path.pv-leader-rev {
stroke: var(--docs-print-rev-line);
}
/* Word's revision balloons: white, author-line border, tighter than comments */
.pv-rev-bubble {
padding: 2px 6px;
border-color: var(--docs-print-rev-line);
background: var(--docs-print-rev-fill);
font-size: 11px;
line-height: 14px;
}
.pv-rev-head {
display: flex;
justify-content: space-between;
gap: 6px;
}
.pv-rev-when {
flex: none;
opacity: 0.7;
}
/* crowded page: author line + one text line per balloon, like Word before it spills to the overflow pane */
.pv-rev-bubble-compact .pv-rev-body {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* column flow: regions stack vertically; narrow clipped columns sit side by side within a region */
.pv-region {
display: flex;
align-items: flex-start;
overflow: hidden;
}
.pv-col {
flex: none;
}
/* the clone is a gapless continuous flow (slices use virtual coordinates); canvas page gaps don't enter the clone */
.pv-clip .page-gap,
.pv-clip .page-gap-cut,
.pv-clip .page-float-host {
display: none;
}
/* the clone keeps only content layout, stripping the page box's chrome (width = content area, matching the canvas) */
.pv-clip .doc-page {
width: auto;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
min-height: 0;
pointer-events: none;
}
/* the clone never paints the indicator (out of flow: line heights are unaffected) */
.pv-clip .doc-page .page-break-before:where(:not(.doc-li))::before,
.pv-clip .doc-page .doc-li.page-break-before::after {
visibility: hidden;
}
.pv-page .page-hf {
cursor: default;
/* anchor at the left margin, not left:50% + translateX(-50%): Chromium's
print fit-to-paper shrink measures the centered strip's untransformed box
(reaching 50% + content width past the paper edge) and uniformly scaled
down whole multi-page exports */
left: var(--pv-ml);
transform: none;
}
/* the 1.3em floor is editor chrome (clickable empty strips): exported strip
lines take their natural height, where Word draws them and what the
push-down probe measures */
.pv-page .page-hf-para {
min-height: 0;
}
.pv-pageno {
position: absolute;
right: 8px;
bottom: 8px;
font-size: 10px;
color: var(--docs-paper-ink-faint);
user-select: none;
}
.doc-page h1,
.doc-page h2,
.doc-page h3,
.doc-page h4,
.doc-page h5,
.doc-page h6 {
font-weight: 400;
line-height: 1.2;
margin: 14pt 0 4pt;
}
/* built-in heading look; :where keeps specificity below [data-style] rules,
and .doc-outline-only (heading by w:outlineLvl alone) keeps body formatting */
.doc-page h1:where(:not(.doc-outline-only)) {
font-size: 16pt;
color: inherit;
}
.doc-page h2:where(:not(.doc-outline-only)) {
font-size: 13pt;
color: inherit;
}
.doc-page h3:where(:not(.doc-outline-only)) {
font-size: 12pt;
color: inherit;
}
.doc-page h4:where(:not(.doc-outline-only)),
.doc-page h5:where(:not(.doc-outline-only)),
.doc-page h6:where(:not(.doc-outline-only)) {
font-size: 11pt;
color: inherit;
font-style: italic;
}
/* body size instead of the UA heading size; stays below [data-style] rules */
.doc-page :where(h1, h2, h3, h4, h5, h6).doc-outline-only {
font-size: inherit;
}
/* text of a w:bidi paragraph whose runs carry no w:rtl: one LTR item on an RTL line (Word) */
.doc-ltr-runs {
direction: ltr;
unicode-bidi: isolate;
}
.doc-link {
color: var(--docs-paper-link);
text-decoration: underline;
cursor: pointer;
}
/* unstyled bookmark-link runs (TOC entries) keep the paragraph's ink, as in Word */
.doc-link.doc-link-plain {
color: inherit;
text-decoration: none;
}
/* flat list items (1:1 with w:p anchors)
geometry comes from w:ind (--li-left text indent / --li-hang hanging marker-area width,
emitted by extensions.ts; --style-li-left is the style-level w:ind fallback from
doc-style-css.ts); defaults replicate the old fixed per-level indents. The marker
is an inline hanging box: it fills the hanging area, and when too wide it pushes the body
text aside instead of overlapping it (Word behavior).
Logical (inline-start) geometry so RTL list items (direction:rtl via w:bidi)
mirror automatically: indent and marker land on the right side. */
.doc-li {
position: relative;
padding-inline-start: var(--li-left, var(--style-li-left, 0.55in));
margin: 0 0 4pt;
}
.doc-li.ilvl-1 {
padding-inline-start: var(--li-left, var(--style-li-left, 0.85in));
}
.doc-li.ilvl-2 {
padding-inline-start: var(--li-left, var(--style-li-left, 1.15in));
}
.doc-li.ilvl-3 {
padding-inline-start: var(--li-left, var(--style-li-left, 1.45in));
}
.doc-li.ilvl-4 {
padding-inline-start: var(--li-left, var(--style-li-left, 1.75in));
}
/* Word HTML auto spacing (sp-auto-*, 14pt inline margins) collapses to 0 between
two items of the same list: doc-style-css.ts emits those rules per list.
auto space-before is also suppressed on the document's first paragraph (Word);
the page-1 float host is a zero-height widget that may precede the block */
.doc-page > .sp-auto-b:nth-child(1 of :not(.page-float-host)),
.doc-page
> .doc-protected:nth-child(1 of :not(.page-float-host))
> :is(.doc-anchor-line, .doc-textbox-stray).sp-auto-b {
margin-top: 0 !important;
}
/* Word zeroes auto spacing at a cell's first/last paragraph (probe 2026-09-03) */
.doc-table :is(td, th, .cell-clip, .cell-vert) > .sp-auto-b:nth-child(1 of :not(.doc-cell-boxes)) {
margin-top: 0 !important;
}
.doc-table
:is(td, th, .cell-clip, .cell-vert)
> .sp-auto-a:nth-last-child(1 of :not(.doc-cell-boxes)) {
margin-bottom: 0 !important;
}
/* direct w:contextualSpacing between unstyled (Normal) paragraphs, list items
(.doc-li) and outline-only headings (Normal with w:outlineLvl, Word compares
styles: word-truths 2026-10-30) included: same-style suppression (styled
pairs are handled per style in doc-style-css.ts) */
.doc-page
:is(p, .doc-li, .doc-outline-only).ctx-sp:not([data-style]):has(
+ :is(p, .doc-li, .doc-outline-only):not([data-style])
) {
margin-bottom: 0 !important;
}
.doc-page
:is(p, .doc-li, .doc-outline-only):not([data-style])
+ :is(p, .doc-li, .doc-outline-only).ctx-sp:not([data-style]) {
margin-top: 0 !important;
}
/* twins of the two rules above across a pagination widget the canvas keeps
between blocks (doc-style-css.ts PAGE_WIDGET): a page gap must not break
the spacing the gapless print clones show */
.doc-page
:is(p, .doc-li, .doc-outline-only).ctx-sp:not([data-style]):has(
+ :is(.page-gap, .page-gap-cut, .page-float-host, .page-float-carry)
+ :is(p, .doc-li, .doc-outline-only):not([data-style])
) {
margin-bottom: 0 !important;
}
.doc-page
:is(p, .doc-li, .doc-outline-only):not([data-style])
+ :is(.page-gap, .page-gap-cut, .page-float-host, .page-float-carry)
+ :is(p, .doc-li, .doc-outline-only).ctx-sp:not([data-style]) {
margin-top: 0 !important;
}
/* ...and across table boundaries: Word compares with the next paragraph in
cell-flow order (probe 2026-10-20) - the first cell's first paragraph after a
paragraph before the table, the next cell's first paragraph after a cell's
last one, and the end-of-row mark (default style) after the row's last cell */
.doc-page
:is(p, .doc-li, .doc-outline-only).ctx-sp:not([data-style]):has(
+ table.doc-table
> tbody
> tr:first-child
> :is(td, th):first-child
> :is(p, .doc-li):not([data-style]):nth-child(1 of :not(.doc-cell-boxes)),
+ table.doc-table
> tbody
> tr:first-child
> :is(td, th):first-child
> :is(.cell-clip, .cell-vert)
> :is(p, .doc-li):not([data-style]):nth-child(1 of :not(.doc-cell-boxes))
),
.doc-table
:is(
:is(td, th):is(
:last-child,
:has(
+ :is(td, th) > :is(p, .doc-li):not([data-style]):nth-child(1 of :not(.doc-cell-boxes)),
+ :is(td, th)
> :is(.cell-clip, .cell-vert)
> :is(p, .doc-li):not([data-style]):nth-child(1 of :not(.doc-cell-boxes))
)
)
> :is(p, .doc-li).ctx-sp:not([data-style]):nth-last-child(1 of :not(.doc-cell-boxes)),
:is(td, th):is(
:last-child,
:has(
+ :is(td, th) > :is(p, .doc-li):not([data-style]):nth-child(1 of :not(.doc-cell-boxes)),
+ :is(td, th)
> :is(.cell-clip, .cell-vert)
> :is(p, .doc-li):not([data-style]):nth-child(1 of :not(.doc-cell-boxes))
)
)
> :is(.cell-clip, .cell-vert)
> :is(p, .doc-li).ctx-sp:not([data-style]):nth-last-child(1 of :not(.doc-cell-boxes))
) {
margin-bottom: 0 !important;
}
.doc-li::before {
display: inline-block;
/* --li-tab: measured marker escaped the hanging area; box widens to the next default tab stop.
--style-li-hang: style-level w:hanging fallback (doc-style-css.ts) */
min-width: var(--li-tab, var(--li-hang, var(--style-li-hang, 0.25in)));
margin-inline-start: calc(-1 * var(--li-hang, var(--style-li-hang, 0.25in)));
/* the marker box is a block container: an inherited first-line indent would
drag the glyphs out of the hanging area */
text-indent: 0;
/* glyphs lead the box whatever the paragraph alignment: Word's tab follows the marker */
text-align: start;
font-family: var(--li-marker-font, inherit);
font-size: var(--li-marker-size, 1em);
/* an oversized level w:sz sets the marker's natural height (Word does not
grid-snap the number like a run) */
line-height: var(--li-marker-lh, inherit);
vertical-align: var(--li-marker-va, baseline);
/* w:lvl rPr color; the --dk-li-mc twin recolors it on the dark page */
color: var(--li-marker-color, inherit);
}
.page-dark .doc-li[style*='--dk-li-mc:']::before,
.page-dark [data-stray-marker][style*='--dk-li-mc:'] .doc-li-stray::before {
color: var(--dk-li-mc);
}
.doc-li-bullet::before {
content: '•';
}
.doc-li.ilvl-1.doc-li-bullet::before {
content: '◦';
}
.doc-li.ilvl-2.doc-li-bullet::before {
content: '▪';
}
.doc-page {
counter-reset: doc-ol;
}
.doc-li-ordered {
counter-increment: doc-ol;
}
.doc-li-ordered::before {
content: counter(doc-ol) '.';
}
/* restart numbering after any non-ordered block; counter-set (applied after
increment) mutates the page-scoped counter, while a sibling counter-reset
would nest a new instance and desync the numbers from the 2nd item on */
.doc-page > :not(.doc-li-ordered) + .doc-li-ordered {
counter-set: doc-ol 1;
}
/* real multilevel numbering: items defined in numbering.xml get data-marker computed by ListNumberingExtension,
overriding the bullet/CSS-counter fallbacks above (selector includes .doc-page for higher specificity and comes later) */
.doc-page .doc-li[data-marker] {
counter-increment: none;
}
.doc-page .doc-li[data-marker]::before {
content: attr(data-marker);
}
/* Word clips cell content at the cell's text area: a marker hanging left of it never shows
(ListNumberingExtension flags the item); the box still holds the text position */
.doc-page .doc-li[data-marker-clip]::before {
visibility: hidden;
}
/* w:suff space/nothing: the marker no longer fills the hanging area (no tab);
first-line text starts right after the marker (+ one space), wrapped lines keep the indent */
.doc-page .doc-li[data-suff]::before {
min-width: 0;
margin-inline-start: calc(-1 * var(--li-hang, var(--style-li-hang, 0)));
}
.doc-page .doc-li[data-suff='space'][data-marker]:not([data-marker-pic])::before {
content: attr(data-marker) '\00a0';
}
/* picture bullet (w:lvlPicBulletId): a 1em image box on the baseline like Word; the rest
of the hanging area becomes inline-end margin so the box stays logical (RTL mirrors) */
.doc-page .doc-li[data-marker-pic]::before,
.doc-page [data-stray-marker][data-marker-pic] .doc-li-stray::before {
content: '';
width: 1em;
min-width: 0;
height: 1em;
vertical-align: -0.1em;
background: var(--li-marker-pic) center / contain no-repeat;
}
.doc-page .doc-li[data-marker-pic]::before {
margin-inline-end: max(
0px,
calc(var(--li-tab, var(--li-hang, var(--style-li-hang, 0.25in))) - 1em)
);
}
.doc-page [data-stray-marker][data-marker-pic] .doc-li-stray::before {
margin-inline-end: max(0px, calc(var(--li-tab, var(--li-hang, var(--style-li-hang, 0))) - 1em));
}
/* w:suff space/nothing on a picture level: one space after the image, or none */
.doc-page .doc-li[data-suff][data-marker-pic]::before,
.doc-page [data-stray-marker][data-suff][data-marker-pic] .doc-li-stray::before {
margin-inline-end: 0;
}
.doc-page .doc-li[data-suff='space'][data-marker-pic]::before,
.doc-page [data-stray-marker][data-suff='space'][data-marker-pic] .doc-li-stray::before {
margin-inline-end: 0.25em;
}
/* protected blocks (table / image / chart / math ...) */
.doc-protected {
position: relative;
border: 1px dashed var(--border-strong);
border-radius: 3px;
padding: 10px 14px;
margin: 0 0 8pt;
background: var(--docs-paper-chip-bg);
cursor: grab;
user-select: none;
}
.doc-move-handle {
position: absolute;
z-index: 4;
top: -14px;
left: -14px;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid var(--word-blue);
border-radius: 3px;
background: var(--docs-paper);
color: var(--word-blue);
font: 13px/1 sans-serif;
cursor: move;
user-select: none;
-webkit-user-select: none;
opacity: 0;
pointer-events: none;
}
.doc-protected:hover > .doc-move-handle,
.ProseMirror-focused .doc-protected.ProseMirror-selectednode > .doc-move-handle {
opacity: 1;
pointer-events: auto;
}
/* Pictures drag directly from their body. Their left-side chrome is the
paragraph anchor marker below, not the generic protected-block move button. */
.doc-protected[data-doc-protected='image'] > .doc-move-handle {
display: none;
}
/* pictures drag-move from anywhere on their body (Word parity) */
.doc-protected[data-doc-protected='image'] .doc-img-wrap {
cursor: grab;
}
body.docs-crop-active .doc-protected[data-doc-protected='image'] .doc-img-wrap {
cursor: default;
}
/* Word-style inactive selection: while a ribbon combobox (font family/size)
holds keyboard focus the DOM selection lives in that input, so the editor's
native highlight vanishes — this decoration keeps the target text visibly
selected (gray, like Word's unfocused selection) until focus returns.
Translucent on purpose: it overlays run highlights/shading without hiding
them, which no opaque token can do (document canvas, not themed chrome). */
.doc-inactive-selection {
--doc-inactive-selection-bg: rgb(0 0 0 / 18%);
background-color: var(--doc-inactive-selection-bg);
}
/* corner resize handle of floating shape/textbox/WordArt/line boxes */
.box-resize-handle {
position: absolute;
z-index: 4;
right: -6px;
bottom: -6px;
width: 11px;
height: 11px;
border: 1px solid var(--word-blue);
border-radius: 2px;
background: var(--docs-paper);
cursor: nwse-resize;
opacity: 0;
pointer-events: none;
}
/* chrome layer of a single shape: mirrors the box rect and carries the
rotation transform, so the frame and handles turn with the shape (Word);
the rotation lives here in the editor — the box renders unturned under it.
Shrink-wrap the layer to the box: a plain block would stretch to the
wrapper (an anchor line sharing the paragraph widens it), and the turn
would pivot around the wrapper instead of the shape's centre. Floating
boxes override both: their slot is inline and keeps the declared extent. */
.box-rotator {
position: relative;
width: fit-content;
max-width: 100%;
}
.doc-protected-textboxes:hover > .box-rotator > .box-resize-handle,
.ProseMirror-focused
.doc-protected-textboxes.ProseMirror-selectednode
> .box-rotator
> .box-resize-handle {
opacity: 1;
pointer-events: auto;
}
/* charts have no rotator layer: their handle is still a direct wrapper child */
.doc-protected-chart:hover > .box-resize-handle,
.ProseMirror-focused .doc-protected-chart.ProseMirror-selectednode > .box-resize-handle {
opacity: 1;
pointer-events: auto;
}
.doc-content-editing > .box-rotator > .box-resize-handle,
.doc-content-editing > .box-resize-handle {
opacity: 0;
pointer-events: none;
}
/* round rotation handle of a selected shape (PowerPoint's turn grip above the
box): dragging it turns the shape about its centre; Shift snaps to 15° */
.box-rotate-handle {
position: absolute;
z-index: 4;
top: -22px;
left: 50%;
transform: translateX(-50%);
width: 11px;
height: 11px;
border: 1px solid var(--word-blue);
border-radius: 50%;
background: var(--docs-paper);
cursor: grab;
opacity: 0;
pointer-events: none;
}
.doc-protected-textboxes:hover > .box-rotator > .box-rotate-handle,
.ProseMirror-focused
.doc-protected-textboxes.ProseMirror-selectednode
> .box-rotator
> .box-rotate-handle {
opacity: 1;
pointer-events: auto;
}
.doc-content-editing > .box-rotator > .box-rotate-handle {
opacity: 0;
pointer-events: none;
}
/* a turned box draws its own selection frame: the wrapper's border stays
axis-aligned around the rotator's turned contents, so it hides and the box
outlines itself (the outline turns with the transform, like Word) */
.doc-protected-textboxes.has-turned-box,
.doc-protected-textboxes.has-turned-box:hover,
.ProseMirror-focused
.doc-protected.doc-protected-textboxes.has-turned-box.ProseMirror-selectednode {
border-color: transparent;
}
.doc-protected-textboxes.has-turned-box:hover > .box-rotator > .doc-textbox {
outline: 1px dashed var(--border);
}
.ProseMirror-focused
.doc-protected.doc-protected-textboxes.has-turned-box.ProseMirror-selectednode
> .box-rotator
> .doc-textbox {
outline: 1px dashed var(--word-blue);
}
/* Native ProseMirror tables: no vertical gap of their own (Word) */
.doc-page > .doc-table {
margin: 0;
}
.doc-protected[data-doc-protected='table'] {
border-color: transparent;
background: transparent;
padding: 2px;
}
.doc-protected[data-doc-protected='table']:hover {
border-color: var(--border-strong);
}
.doc-table {
/* fallback when there are no absolute grid widths; tables with w:tblGrid are overridden by inline width.
font size/line spacing inherit the document defaults (.doc-page, i.e. the Normal style) */
width: 100%;
/* paper-width cap: over-wide tables may spill into the page margins like Word
(inline widths in extensions.ts/protected-render.ts grant up to this much);
--doc-content-w = per-block section content width (differing-width sections) */
max-width: calc(
var(--doc-content-w, 100%) + var(--doc-margin-left, var(--doc-margin-right, 0px)) +
var(--doc-margin-right, 0px)
);
border-collapse: collapse;
table-layout: fixed;
/* share of a vertical border the cell margin absorbs; spaced tables set 0 inline
(declared per table so nested tables do not inherit the parent's value) */
--doc-bw-share: 0.5;
/* share of a horizontal border's snap delta each adjacent row carries; spaced tables set 1 */
--doc-bd-share: 0.5;
/* row gridline advance: the table sets --doc-row-eat from insideH and spaced tables
set --doc-row-grid 0 inline; reset here so nested tables do not inherit them */
--doc-row-eat: 0px;
--doc-row-grid: 1;
/* fixed-layout tables set normal inline (w:noWrap ignored); a nested table decides for itself */
--doc-cell-nowrap: nowrap;
/* row-wide cell padding is set per tr; a nested table must fall back to its
own --doc-cell-pad-* instead of inheriting the host row's */
--doc-row-pad-t: initial;
--doc-row-pad-b: initial;
}
.doc-table.doc-table-autofit-contents,
.doc-table.doc-table-autofit-window {
table-layout: auto;
}
.doc-table.doc-table-autofit-contents {
max-width: 100%;
}
.doc-table td,
.doc-table th {
/* not positioned: a positioned cell's fill paints over the inner half of the collapsed borders */
box-sizing: border-box;
/* the w:docGrid line grid applies to the body flow only, UNLESS settings.xml
w:compat carries w:adjustLineHeightInTable — then docStyleCss restores the
pitch in cells and they snap like body lines (Word probe 2026-09-02) */
--doc-grid-pitch: 0.0001px;
}
/* empty paragraph in a cell: LO sizes it near the Latin single line, so it must
not out-grow the row's content cells via the inherited CJK factor */
.doc-table td .doc-p-empty,
.doc-table th .doc-p-empty {
--doc-line-factor: var(--doc-line-factor-latin, 1.2);
}
/* Word lays out the mandatory end-of-cell paragraph at zero height when it is
empty and directly follows a nested table (any other empty cell paragraph
keeps its line); margins are inline, hence the override */
.doc-table td > .doc-nested-table + .doc-p-empty:last-child,
.doc-table th > .doc-nested-table + .doc-p-empty:last-child,
.doc-table td > table.doc-table + .doc-p-empty:last-child,
.doc-table th > table.doc-table + .doc-p-empty:last-child {
height: 0;
min-height: 0;
line-height: 0;
padding: 0;
margin: 0 !important;
}
/* w:hideMark: Word leaves the end-of-cell mark out of the row height, so a cell
holding nothing but one empty paragraph collapses to its margins (or trHeight);
a picture-only paragraph is textless too but keeps its picture extent */
.doc-table td[data-hide-mark] > .doc-p-empty:not(.doc-p-pic):only-child,
.doc-table th[data-hide-mark] > .doc-p-empty:not(.doc-p-pic):only-child {
height: 0;
min-height: 0;
line-height: 0;
padding: 0;
margin: 0 !important;
}
/* Word ignores page-type w:br inside table cells; a visible line break here
inflates every cell that carries one (HWP-exported TOC/decor tables) */
.doc-table td .doc-page-br,
.doc-table th .doc-page-br {
display: none;
}
.doc-table td,
.doc-table th {
/* undeclared borders render as none (Word's on-screen gridlines are non-printing
view furniture, not part of the document); w:tblBorders drives --doc-b-* */
border-top: var(--doc-b-h, none);
border-bottom: var(--doc-b-h, none);
border-left: var(--doc-b-v, none);
border-right: var(--doc-b-v, none);
/* Word default cell margins: 108 twips sides / 0 top-bottom (--doc-cell-pad-* overrides);
text inset = max(margin, border/2), so the margin absorbs the half border (probe 2026-09-03) */
--cell-bw-l: var(--doc-bw-v, 0px);
--cell-bw-r: var(--doc-bw-v, 0px);
--cell-bd-t: var(--doc-bd-h, 0px);
--cell-bd-b: var(--doc-bd-h, 0px);
/* top/bottom are row-wide: Word pads every cell with the row's largest tcMar
(tr --doc-row-pad-*, extensions rowPadVarsCss; probe 2026-10-13) */
padding: var(--doc-row-pad-t, var(--doc-cell-pad-t, 0px))
max(0px, calc(var(--doc-cell-pad-r, 7.2px) - var(--cell-bw-r) * var(--doc-bw-share, 0.5)))
var(--doc-row-pad-b, var(--doc-cell-pad-b, 0px))
max(0px, calc(var(--doc-cell-pad-l, 7.2px) - var(--cell-bw-l) * var(--doc-bw-share, 0.5)));
vertical-align: top;
/* Word breaks a token wider than the cell character-by-character rather
than letting it overflow (unless w:noWrap, which we don't model yet) */
overflow-wrap: break-word;
}
/* Word sizes rows with the true border width (0.5pt = 0.667px) while we draw whole
px (Chromium snaps sub-px borders anyway); this spacer hands the difference back
so a 40-row table ends where Word's does (--cell-bd-* = true - drawn). A positive
delta must be height, not margin: a margin would collapse into the first
paragraph's space-before and vanish */
.doc-table td::before,
.doc-table th::before {
content: '';
display: block;
--cell-bd-sum: calc((var(--cell-bd-t) + var(--cell-bd-b)) * var(--doc-bd-share, 0.5));
height: max(0px, var(--cell-bd-sum));
margin-bottom: min(0px, var(--cell-bd-sum));
}
.doc-table .page-gap-table > td::before {
content: none;
}
/* repeated header rows after a table page break (w:tblHeader): pure decoration —
not selectable, not editable, invisible to hit-testing. display beats the
.page-gap-inline inline-block (that class only marks them as measurement gaps). */
.doc-table tr.page-repeat-header {
display: table-row;
user-select: none;
pointer-events: none;
}
/* outer edges: table-level outer borders beat the inside-line variables even when the
frame is explicitly none (border-collapse would otherwise let inside lines win) */
.doc-table tr:first-child > td,
.doc-table tr:first-child > th {
border-top: var(--doc-b-t, var(--doc-b-h, none));
--cell-bd-t: var(--doc-bd-t, var(--doc-bd-h, 0px));
}
.doc-table tr:last-child > td,
.doc-table tr:last-child > th {
border-bottom: var(--doc-b-b, var(--doc-b-h, none));
--cell-bd-b: var(--doc-bd-b, var(--doc-bd-h, 0px));
}
.doc-table td:first-child,
.doc-table th:first-child {
border-left: var(--doc-b-l, var(--doc-b-v, none));
--cell-bw-l: var(--doc-bw-l, var(--doc-bw-v, 0px));
}
.doc-table td:last-child,
.doc-table th:last-child {
border-right: var(--doc-b-r, var(--doc-b-v, none));
--cell-bw-r: var(--doc-bw-r, var(--doc-bw-v, 0px));
}
/* header cells follow the document model (cell bold/align attrs), not the UA defaults */
.doc-table th {
font-weight: inherit;
text-align: inherit;
}
/* the move handle / Select Table pick the table as a node: Word tints every cell, same as a cell selection */
.doc-table .selectedCell,
.doc-table.ProseMirror-selectednode > tbody > tr:not(.page-gap-table) > td,
.doc-table.ProseMirror-selectednode > tbody > tr:not(.page-gap-table) > th {
position: relative;
}
.doc-table .selectedCell::after,
.doc-table.ProseMirror-selectednode > tbody > tr:not(.page-gap-table) > td::after,
.doc-table.ProseMirror-selectednode > tbody > tr:not(.page-gap-table) > th::after {
position: absolute;
inset: 0;
content: '';
pointer-events: none;
background: color-mix(in srgb, var(--word-blue) 18%, transparent);
}
.doc-page.resize-cursor {
cursor: col-resize;
}
.doc-page.row-resize-cursor,
.row-resize-cursor .doc-table td,
.row-resize-cursor .doc-table th {
cursor: row-resize;
}
/* the handle is an absolute child of its cell; cells are positioned only while a
handle is live (prosemirror-tables sets resize-cursor), never in the export clone */
.resize-cursor .doc-table td,
.resize-cursor .doc-table th {
position: relative;
}
.column-resize-handle {
position: absolute;
top: 0;
right: -2px;
bottom: -2px;
width: 4px;
pointer-events: none;
background: var(--word-blue);
}
.table-ribbon-body {
display: flex;
align-items: stretch;
/* keep the row at content width: shrinking it (the old min-width: 0) let
the groups squeeze and paint over each other instead of overflowing
.ribbon-body into its horizontal scroll */
flex-shrink: 0;
}
.table-tool-group {
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
min-width: 66px;
padding: 2px 6px;
}
.table-tool-row,
.table-tool-grid {
display: flex;
align-items: center;
gap: 3px;
flex: 1;
}
.table-tool-grid {
display: grid;
}
.table-tool-grid-four {
grid-template-columns: repeat(2, minmax(66px, auto));
}
.table-tool-group button {
min-height: 26px;
padding: 3px 8px;
border: 1px solid transparent;
border-radius: 3px;
background: transparent;
color: var(--text);
font-size: 11px;
white-space: nowrap;
cursor: pointer;
}
/* icon + label buttons (insert/merge/align/borders) */
.table-tool-row > button,
.table-tool-grid > button {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
}
.table-tool-row > button svg,
.table-tool-grid > button svg {
flex: none;
opacity: 0.9;
}
.table-tool-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.table-tool-group button:hover:not(:disabled) {
border-color: var(--border);
background: var(--hover);
}
.table-tool-group button:disabled {
opacity: 0.35;
cursor: default;
}
.table-tool-group button.danger {
color: var(--danger);
}
.table-style-options {
display: grid;
grid-template-columns: repeat(3, minmax(82px, auto));
gap: 2px;
align-content: center;
flex: 1;
}
.table-style-options button {
min-height: 22px;
padding: 1px 5px;
text-align: left;
}
.table-option-toggle {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
}
.table-option-toggle > span:last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.table-option-check {
position: relative;
box-sizing: border-box;
flex: 0 0 13px;
width: 13px;
height: 13px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
}
.table-option-toggle.active .table-option-check {
border-color: var(--accent);
background: var(--accent);
}
.table-option-toggle.active .table-option-check::after {
position: absolute;
left: 3px;
top: 0;
width: 3px;
height: 7px;
border: solid var(--docs-on-accent);
border-width: 0 1.5px 1.5px 0;
content: '';
transform: rotate(45deg);
}
.table-tool-group .table-autofit-button {
width: 150px;
}
.table-tool-group .table-command-button {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 12px;
align-items: center;
width: 100%;
min-height: 52px;
padding: 5px 7px;
gap: 6px;
border-color: var(--border);
background: var(--surface);
}
.table-command-button:hover:not(:disabled),
.table-command-button.active {
border-color: var(--border-strong);
background: var(--hover);
}
.table-command-copy {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 1px;
text-align: left;
}
.table-command-copy > span,
.table-command-copy > small {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-command-copy > small {
color: var(--text-dim);
font-size: 10px;
}
.table-autofit-menu {
width: 238px;
padding: 6px;
}
.layout-menu.table-autofit-menu button {
display: grid;
grid-template-columns: 22px minmax(0, 1fr) 12px;
min-height: 36px;
padding: 6px 8px;
align-items: center;
gap: 7px;
border-radius: 6px;
text-align: left;
}
.layout-menu.table-autofit-menu button > span {
color: var(--text);
font-size: 12px;
}
.table-menu-state {
width: 7px;
height: 7px;
justify-self: center;
border-radius: 50%;
background: transparent;
}
.table-autofit-menu button.active .table-menu-state {
background: var(--accent);
}
.table-tool-advanced {
min-width: 146px;
}
.table-tool-stack {
display: grid;
grid-template-rows: repeat(3, minmax(24px, 1fr));
gap: 2px;
flex: 1;
}
/* Three stacked rows have to fit the 64px the fixed 80px band leaves after its
padding and the scrollbar lane: 3 × 20px + 2 × 2px. At the default 25-26px
the bottom row (Table Properties, Insert Cells…) was clipped. */
.table-tool-stack-three {
grid-template-rows: repeat(3, 20px);
align-content: center;
}
.table-tool-col-three > .table-tool-grid {
flex: none;
gap: 2px 3px;
}
.table-tool-group .table-tool-stack-three .table-command-row,
.table-tool-group .table-tool-col-three button {
min-height: 20px;
padding-top: 0;
padding-bottom: 0;
}
/* Word's split button: the left half repeats the last gallery pick, the caret opens it */
.table-split {
display: flex;
align-items: stretch;
align-self: center;
}
.table-tool-group .table-split-main {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 52px;
padding: 5px 9px;
border-color: var(--border);
border-radius: 3px 0 0 3px;
background: var(--surface);
}
.table-tool-group .table-split-caret {
min-width: 18px;
min-height: 52px;
padding: 0 2px;
border-color: var(--border);
border-left-color: transparent;
border-radius: 0 3px 3px 0;
background: var(--surface);
}
.table-tool-group .table-split-main:hover:not(:disabled),
.table-tool-group .table-split-caret:hover:not(:disabled),
.table-tool-group .table-split-caret.active {
border-color: var(--border-strong);
background: var(--hover);
}
.table-tool-group .table-command-row {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
min-height: 25px;
padding: 2px 7px;
align-items: center;
gap: 6px;
text-align: left;
}
.table-tool-group .table-command-row-caret {
grid-template-columns: 18px minmax(0, 1fr) 12px;
}
.table-tool-group .table-command-row.active {
border-color: var(--border-strong);
background: var(--hover);
}
.table-command-row > span {
overflow: hidden;
text-overflow: ellipsis;
}
/* anchored textboxes (code boxes, callout cards): render the box itself,
text edits happen in place */
.doc-protected-textboxes {
border-color: transparent;
background: transparent;
/* Word gives inline drawings no intrinsic spacing: chip chrome (8pt margin +
vertical padding) inflated flow height and pushed following blocks to the
next page (floating boxes already zero it out) */
padding: 0;
margin: 0;
cursor: default;
width: fit-content;
max-width: 100%;
}
.doc-protected-textboxes:hover {
border-color: var(--border);
}
/* side-wrapped box: the wrapper spans the column so the float's edge margin
lands on the column edge; the float is not contained, so following
paragraphs wrap beside the box too (Word) */
.doc-protected-textboxes.doc-protected-wrapside {
width: 100%;
}
/* inline shapes (WordArt) follow their paragraph's justification like Word */
.doc-protected-textboxes.doc-protected-boxes-center {
margin-left: auto;
margin-right: auto;
}
.doc-protected-textboxes.doc-protected-boxes-right {
margin-left: auto;
}
/* floating drawings (wrapNone/front/behind anchors, or several drawings
anchored in one paragraph): the wrapper marks the anchor paragraph's flow
position but takes no flow height — each box positions absolutely at its
own offset, overlapping body text exactly like Word */
/* canvas-only page-gap compensation for floating boxes (syncFloatShifts);
the pagination preview clones per-page flow with no gaps, so it neutralizes it */
.doc-protected-floating > .doc-textbox,
.doc-protected-floating > .box-rotator {
translate: 0 var(--page-float-dy, 0px);
/* anchored shapes keep their declared extent past the column (Word) */
max-width: none;
}
.doc-protected-floating > .box-rotator > .doc-textbox {
/* the rotator already mirrors the float slot and carries the shift; the box
stays unturned and in place inside it */
max-width: none;
}
.pv-clip .doc-protected-floating > .doc-textbox,
.pv-clip .doc-protected-floating > .box-rotator {
translate: none;
}
.doc-protected.doc-protected-floating {
position: relative;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
border: none;
width: 100%;
max-width: 100%;
}
/* behindDoc anchors: under the body text like Word (positioned boxes would
otherwise paint above every later in-flow paragraph); on the boxes too so
it also holds when the pagepinned wrapper is un-positioned */
.doc-protected.doc-protected-floating.doc-protected-behind {
z-index: -1;
overflow: visible;
}
.doc-protected.doc-protected-behind .doc-textbox {
z-index: -1;
}
/* page-pinned cover art: the un-positioned wrapper lets the boxes' absolute
page coordinates resolve against the page box itself */
.doc-protected.doc-protected-floating.doc-protected-pagepinned {
position: static;
}
.doc-protected-pagepinned > .doc-move-handle {
display: none;
}
/* wrapNone / behind-text anchored images: same zero-flow-height semantics */
.doc-protected.doc-img-float {
position: relative;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
border: none;
width: 100%;
max-width: 100%;
overflow: visible;
}
/* banded side wrap: the wrapper keeps the picture's band as flow height (inline
min-height) while the picture itself positions at its anchor offset */
.doc-protected.doc-img-float.img-wrap-band {
height: auto;
}
.doc-img-float > .doc-img-wrap {
translate: 0 var(--page-float-dy, 0px);
}
/* overlay picture whose paragraph holds nothing else: the anchor line is the
paragraph's own empty line (Word keeps it in the flow). flow-root keeps its
space-before inside, where paragraph-relative picture offsets count from */
.doc-protected.doc-img-float.doc-img-float-line {
height: auto;
display: flow-root;
}
/* a banded picture may overhang the column (cover art at the paper edge): it
keeps its wp:extent instead of the wrapper-width cap */
.doc-img-float.img-wrap-band > .doc-img-wrap,
.doc-img-float.img-wrap-band > .doc-img-wrap > .doc-protected-img {
max-width: none;
}
/* cell-anchored boxes share the float display-shift channel (paper-top clamp);
layoutInCell="0" page-positioned boxes add their cell-to-page correction */
.doc-cell-boxes > .doc-textbox,
.doc-cell-boxes > div {
translate: var(--cell-page-dx, 0px) calc(var(--page-float-dy, 0px) + var(--cell-page-dy, 0px));
}
.pv-clip .doc-cell-boxes > .doc-textbox,
.pv-clip .doc-cell-boxes > div {
translate: none;
}
/* preview: page-positioned cell boxes draw once per owning page at page
coordinates (.pv-cell-page-box, PaginationPreview); the in-flow clones stay
for layout but never paint */
.pv-clip .doc-cell-boxes-page > .doc-textbox[data-cell-page] {
visibility: hidden;
}
.pv-cell-page-box {
position: absolute;
width: 0;
height: 0;
overflow: visible;
}
.pv-cell-page-box > .doc-textbox {
left: 0 !important;
top: 0 !important;
translate: none;
max-width: none;
}
/* run pictures with a page-relative X draw as page overlays (PageRelXPicture);
the clone copies stay for layout but never paint */
.pv-clip img[data-pv-overlaid='1'] {
visibility: hidden;
}
.pv-clip .doc-img-float > .doc-img-wrap {
translate: none;
}
/* anchor-paragraph text next to all-floating boxes keeps its flow line:
the wrapper takes the stray line's height instead of collapsing. flow-root
keeps the line's space-before inside, where Word's paragraph-relative box
offsets count from */
.doc-protected.doc-protected-floating.doc-protected-floating-stray {
height: auto;
display: flow-root;
}
/* preview: an anchor-shifted box reaching above its page top rides --pv-anchor-lift
(stamped before cloning) back onto the anchor's page. A single shape's float
slot is carried by its chrome rotator, so the lift goes there. */
.pv-clip [data-anchor-dy] > .doc-textbox,
.pv-clip [data-anchor-dy] > .box-rotator {
translate: 0 var(--pv-anchor-lift, 0px);
}
/* preview: wrappers whose boxes are all page-relative V (data-pv-pagerel,
stamped before cloning) un-position like pinned covers so the boxes escape
the pv-clip (sized to the page's flow content) and resolve against the page
box. Their inline offsets are content-area coordinates: the page margins
(--pv-ml/--pv-mt, set per pv-page) shift them back onto the page. */
.pv-page [data-pv-pagerel='1'],
.pv-page .doc-anchor-origin[data-pv-pagerel='1'] {
position: static;
}
.pv-page [data-pv-pagerel='1'] > .doc-textbox[data-page-rel-v='1'],
.pv-page [data-pv-pagerel='1'] > .box-rotator:has(> .doc-textbox[data-page-rel-v='1']),
.pv-page [data-pv-pagerel='1'] > .doc-img-wrap[data-page-rel-v='1'],
.pv-page [data-pv-pagerel='1'] .doc-inline-img-anchor > img[data-page-rel-v='1'] {
translate: var(--pv-ml, 0px) var(--pv-mt, 0px);
}
/* page-edge V anchors keep their page Y under a header push; margin ones ride the body top (Word) */
.pv-page [data-pv-pagerel='1'] > .doc-textbox[data-page-rel-from='page'],
.pv-page [data-pv-pagerel='1'] > .box-rotator:has(> .doc-textbox[data-page-rel-from='page']),
.pv-page [data-pv-pagerel='1'] > .doc-img-wrap[data-page-rel-from='page'],
.pv-page [data-pv-pagerel='1'] .doc-inline-img-anchor > img[data-page-rel-from='page'] {
translate: var(--pv-ml, 0px) var(--pv-mt-page, var(--pv-mt, 0px));
}
/* preview: wrappers whose boxes spill past the page's flow window (data-pv-hoist,
stamped before cloning — cover flows ending in an early page break, page-bottom
overhang) un-position the same way so the boxes escape the pv-clip (which cut
them at the flow end while the next page's window repainted the spilled part),
and re-pin to the page box: --pv-hoist-dy is the anchor's content-area Y. */
.pv-page [data-pv-hoist='1'] {
position: static;
}
.pv-page [data-pv-hoist='1'] > .doc-textbox,
.pv-page [data-pv-hoist='1'] > .box-rotator,
.pv-page [data-pv-hoist='1'] > .doc-img-wrap {
translate: var(--pv-ml, 0px) calc(var(--pv-mt, 0px) + var(--pv-hoist-dy, 0px));
}
/* centred / right-slot boxes (left:50% / right:0) now resolve against the page
box instead of the column: shift by the column's own offset within it */
.pv-page [data-pv-hoist-slot='center'] > .doc-textbox,
.pv-page [data-pv-hoist-slot='center'] > .box-rotator,
.pv-page [data-pv-hoist-slot='center'] > .doc-img-wrap {
translate: calc((var(--pv-ml, 0px) - var(--pv-mr, 0px)) / 2)
calc(var(--pv-mt, 0px) + var(--pv-hoist-dy, 0px));
}
.pv-page [data-pv-hoist-slot='right'] > .doc-textbox,
.pv-page [data-pv-hoist-slot='right'] > .box-rotator,
.pv-page [data-pv-hoist-slot='right'] > .doc-img-wrap {
translate: calc(-1 * var(--pv-mr, 0px)) calc(var(--pv-mt, 0px) + var(--pv-hoist-dy, 0px));
}
.ProseMirror-focused .doc-protected.doc-protected-textboxes.ProseMirror-selectednode {
border-color: var(--word-blue);
outline: none;
background: transparent;
}
.doc-textbox {
/* no reserved edge: Word's text rectangle is the shape rect minus insets */
border: 0 solid transparent;
border-radius: 3px;
padding: 5px 10px;
margin: 2px 0;
max-width: 100%;
cursor: text;
user-select: text;
-webkit-user-select: text;
/* fixed-height boxes (noAutofit) clip overflow instead of growing */
overflow: hidden;
}
.doc-protected-textboxes:not(.doc-content-editing) .doc-textbox,
.doc-protected[data-doc-protected='table']:not(.doc-content-editing) td {
cursor: move;
user-select: none;
-webkit-user-select: none;
}
.doc-content-editing > .doc-move-handle {
opacity: 0;
pointer-events: none;
}
/* the nested tiptap editor inside each box */
.doc-textbox .doc-textbox-editor {
outline: none;
white-space: pre-wrap;
}
.doc-textbox-editor p {
margin: 0;
}
.doc-textbox:focus-within {
outline: 2px solid var(--word-blue);
outline-offset: 1px;
}
.doc-textbox-para {
white-space: pre-wrap;
word-break: break-word;
}
/* numbering inside a textbox: marker resolved at parse time (data-marker), same hanging
box geometry as .doc-li (margin-inline-start carries the text indent; --li-tab widens
the box to the default tab stop when the level declares no hanging area) */
.doc-textbox-para[data-marker]::before {
content: attr(data-marker);
display: inline-block;
min-width: var(--li-tab, var(--li-hang, 0));
margin-inline-start: calc(-1 * var(--li-hang, 0));
text-indent: 0;
font-family: var(--li-marker-font, inherit);
font-size: var(--li-marker-size, 1em);
line-height: var(--li-marker-lh, inherit);
vertical-align: var(--li-marker-va, baseline);
color: var(--li-marker-color, inherit);
}
/* same picture bullet as .doc-li[data-marker-pic]; listed after the text rule so it wins */
.doc-textbox-para[data-marker-pic]::before {
content: '';
width: 1em;
min-width: 0;
height: 1em;
vertical-align: -0.1em;
margin-inline-end: max(0px, calc(var(--li-tab, var(--li-hang, 0)) - 1em));
background: var(--li-marker-pic) center / contain no-repeat;
}
/* numbered anchor paragraph (Word keeps it in the list): its stray line runs on the
.doc-li geometry; ListNumberingExtension decorates the protected wrapper with
--li-marker since attr() cannot read an ancestor */
.doc-page .doc-li-stray {
padding-inline-start: var(--li-left, var(--style-li-left, 0));
}
.doc-page [data-stray-marker] .doc-li-stray::before {
content: var(--li-marker);
display: inline-block;
min-width: var(--li-tab, var(--li-hang, var(--style-li-hang, 0)));
margin-inline-start: calc(-1 * var(--li-hang, var(--style-li-hang, 0)));
text-indent: 0;
font-family: var(--li-marker-font, inherit);
font-size: var(--li-marker-size, 1em);
line-height: var(--li-marker-lh, inherit);
vertical-align: var(--li-marker-va, baseline);
color: var(--li-marker-color, inherit);
}
/* the wrapper carries the same flags as a .doc-li: clipped-in-cell, w:suff space/nothing */
.doc-page [data-stray-marker][data-marker-clip] .doc-li-stray::before {
visibility: hidden;
}
.doc-page [data-stray-marker][data-suff] .doc-li-stray::before {
min-width: 0;
margin-inline-start: calc(-1 * var(--li-hang, var(--style-li-hang, 0)));
}
.doc-page [data-stray-marker][data-suff='space']:not([data-marker-pic]) .doc-li-stray::before {
content: var(--li-marker) '\00a0';
}
/* inline pictures in table cells (document content, theme-independent) */
.doc-inline-img {
max-width: 100%;
}
/* picture-only paragraph (extensions isPictureOnlyContent): the line is the
picture extent, no strut or descent below it; an auto multiple adds its
(m - 1) x single line under the picture like Word (cf. .doc-img-para) */
.doc-page .doc-p-pic:not(.doc-lh-fixed) {
line-height: 0;
padding-bottom: calc((var(--doc-line-mult, 1) - 1) * var(--doc-line-factor, 1.2) * 1em);
}
.doc-page .doc-p-pic .doc-inline-img {
vertical-align: bottom;
}
/* the editable picture wrapper's baseline is its bottom edge, so the trailing
break's descent hung 3.5px under a row of two or more pictures (Word probe
2026-10-29: one, two or three inline pictures are the picture extent alike) */
.doc-page .doc-p-pic .doc-inline-pic {
vertical-align: bottom;
}
/* floating (wp:anchor) run pictures: zero-size marker at the run, the picture
overlays without consuming flow space. The hosting paragraph is the
positioning origin — wp:posOffset measures from the column / paragraph top
(Word anchors the drawing run at the paragraph end, so a run-based origin
would push the picture off the page) */
.doc-inline-img-anchor {
display: inline;
}
/* set by the lineFactorLive decoration pass; a stylesheet :has() here OOMed
Blink's invalidation on long picture-heavy documents */
.doc-page .doc-anchor-origin {
position: relative;
}
/* a leading sized w:br (lineFactorLive): its own block, so the line is as tall
as the break run and not the paragraph strut */
.doc-page .doc-br-line {
display: block;
}
/* CJK stretch of a mixed-script paragraph (lineFactorLive): the strut sits at
the Latin base and the stretch re-resolves the auto line rule with its own
factor, so only the lines it lands on lift (Word sizes each line by the faces
on it). Typed-grid, fixed-line and per-style rules from docStyleCss override. */
.doc-page .doc-run-lf {
line-height: var(
--doc-line-max,
calc(var(--doc-line-factor, 1.2) * 1em * var(--doc-line-mult, 1))
);
}
/* Cell paragraph mixing declared faces (extensions paraMixedFaceClass): a run whose
face box is shorter than the strut's, centred in the inherited line-height, would
lift the line by (asc - box/2) of the two faces (Times in Sakkal Majalla: 0.15em);
its own line box makes the union max ascent + max descent like Word. Never grid-
snapped: cells are off the typed grid, and in adjustLineHeightInTable cells the
strut's snapped line still exceeds this shorter box and carries the snap. */
.doc-table
:is(td, th)
.doc-mixed-face:not(.doc-lh-fixed)
span[style*='--doc-run-lh']:not([style*='vertical-align']) {
line-height: calc(var(--doc-run-lh) * 1em * var(--doc-line-mult, 1));
}
/* Paragraph mixing declared and inherited run sizes (extensions strutHalfPoints):
the strut carries the smallest declared size and the inheriting runs take the
base size back, so each line is as tall as the runs on it (Word). :where keeps
it at zero specificity: any stylesheet size (.doc-note-ref, .doc-cs) still wins */
:where(:is(.doc-page, .page-hf) .doc-strut-mixed > :not([style*='font-size'])) {
font-size: var(--doc-base-fs, 11pt);
}
/* rtl run (marks.ts doc-cs): weight / style resolved by the engine through the whole
chain (table style, paragraph style, Cs twins, XOR). A user strong/em wrapper
still paints: the regular rules step aside inside it. */
.doc-page span.doc-cs.doc-cs-b {
font-weight: 600;
}
.doc-page span.doc-cs.doc-cs-nb:not(strong *) {
font-weight: normal;
}
.doc-page span.doc-cs.doc-cs-i {
font-style: italic;
}
.doc-page span.doc-cs.doc-cs-ni:not(em *) {
font-style: normal;
}
/* Mixed Latin + complex-script paragraph (extensions paraCsMixedClass): Word sizes
the line by the tallest face (Calibri 1.22 over Arial Arabic 1.15); Chromium
centres the Arial span's box in the inherited line-height and the union runs
1.31em. The strut already carries the tallest factor, so cs spans give up their
own box; a superscript/subscript span keeps its box (own size and offset). */
.doc-page .doc-cs-mixed span[data-cs]:not([style*='vertical-align']),
.doc-table
:is(td, th)
.doc-cs-mixed:not(.doc-lh-fixed)
span[data-cs][style*='--doc-run-lh']:not([style*='vertical-align']) {
line-height: 0;
}
/* One-size paragraph with a bold/italic run of a per-cut size-adjusted alias
(extensions paraCutAdjustedClass): the span's box is another size than the
regular-cut strut and the union inflates the line; the strut paces it. The
strong/em wrapper lays its own box in the same cut, so it collapses too. */
.doc-page .doc-cut-adjusted span[data-cut-adj]:not([style*='vertical-align']),
.doc-page .doc-cut-adjusted :is(strong, em),
.doc-table
:is(td, th)
.doc-cut-adjusted:not(.doc-lh-fixed)
span[data-cut-adj][style*='--doc-run-lh']:not([style*='vertical-align']) {
line-height: 0;
}
/* behind text at full opacity (Word); the page's stacking context keeps it above the paper */
.doc-inline-img--behind {
z-index: -1;
}
/* Word puts the whole (m-1) x single extra of an auto multiple below the glyphs,
rests the descent on the single line's bottom (--doc-lead-gap: the face's
leading sits above, Chromium centres it), bottom-aligns atLeast lines
(--doc-lead-top) and puts an exact baseline at 0.8 h (--doc-lead-exact); a
typed grid centres like CSS; display-only, the line box keeps its height
(pagination-measure subtracts top) */
.doc-page :is(p, h1, h2, h3, h4, h5, h6, .doc-li, .doc-textbox-para, .doc-protected-field) {
--doc-lead-gap: calc(
(1 - var(--doc-lead-grid, 0)) *
(var(--doc-line-factor, 1.2) - var(--doc-font-box, var(--doc-line-factor, 1.2))) * 1em / 2
);
--doc-lead-exact: calc(0.3 * var(--doc-lh-cap) - var(--doc-font-skew) * 1em / 2);
--doc-lead-shift: var(
--doc-lead-top,
calc(
(1 - var(--doc-lead-grid, 0)) * (1 - var(--doc-line-mult, 1)) * var(--doc-line-factor, 1.2) *
1em / 2 + var(--doc-lead-gap)
)
);
position: relative;
top: var(--doc-lead-shift);
}
/* anchored pictures measure from the paragraph box, not from its glyphs */
.doc-page .doc-anchor-origin .doc-inline-img-anchor > img {
translate: 0 calc(-1 * var(--doc-lead-shift, 0px));
}
/* page-relative run pictures also ride the floating-box shift channel (same
specificity as the rule above, so source order keeps both terms) */
.doc-anchor-origin .doc-inline-img-anchor > img[data-page-rel-v='1'] {
translate: 0 calc(var(--page-float-dy, 0px) - var(--doc-lead-shift, 0px));
}
.pv-clip .doc-inline-img-anchor > img[data-page-rel-v='1'] {
translate: 0 calc(-1 * var(--doc-lead-shift, 0px));
}
/* square/tight/through wrap: real CSS float so same-paragraph text wraps */
.doc-inline-img--wrap-square-left,
.doc-inline-img--wrap-tight-left,
.doc-inline-img--wrap-through-left {
float: left;
margin: 0 12px 0 0;
}
.doc-inline-img--wrap-square-right,
.doc-inline-img--wrap-tight-right,
.doc-inline-img--wrap-through-right {
float: right;
margin: 0 0 0 12px;
}
.doc-inline-img--wrap-topBottom {
display: block;
margin: 2px auto;
}
/* wrapTopAndBottom placed below its anchor paragraph's top (paragraph-relative
posOffset): a column-wide float the paragraph contains, so its height is the
band bottom and the next paragraph follows the box like Word */
.doc-inline-img--wrap-topBottom.doc-inline-img--band-offset {
float: left;
clear: both;
}
.doc-page .doc-band-host {
display: flow-root;
}
/* Floating run pictures reach into the paragraphs after their anchor, which
are positioned (lead shift) and paint over them: lift the picture so clicks
select, move and resize it instead of landing in the text, and an
in-front-of-text picture covers that text like Word. :where() keeps the
wrap-obstacle overlay rule below in charge of the position */
.doc-page
:where(
img.doc-inline-img--wrap-square-left,
img.doc-inline-img--wrap-square-right,
img.doc-inline-img--wrap-tight-left,
img.doc-inline-img--wrap-tight-right,
img.doc-inline-img--wrap-through-left,
img.doc-inline-img--wrap-through-right,
img.doc-inline-img--wrap-topBottom
) {
position: relative;
z-index: 1;
}
.doc-page :where(.doc-inline-img-anchor > img:not(.doc-inline-img--behind)) {
z-index: 1;
}
/* the selected floating run picture: its frame and handles are an overlay
(floatingRunPicturePlugin); the picture keeps its own box */
.ProseMirror-focused img.doc-inline-img.ProseMirror-selectednode,
.ProseMirror-focused .doc-inline-img-anchor.ProseMirror-selectednode > img {
outline: 2px solid var(--word-blue);
}
.doc-run-pic-frame {
position: fixed;
z-index: 20;
pointer-events: none;
}
.doc-run-pic-frame > .img-resize-handle {
display: block;
pointer-events: auto;
}
body.docs-run-pic-dragging .doc-run-pic-frame {
display: none;
}
/* a floating header picture selected in header editing (hf-float-edit): the
picture layer is not focusable, so the frame draws the selection outline */
.hf-float-frame {
outline: 2px solid var(--word-blue);
}
/* header editing: the picture layer under the pointer can be dragged */
.hf-float-hover,
.hf-float-hover * {
cursor: move !important;
}
/* wrap-obstacle mode (syncWrapObstacles): the paragraph's lines take the
measured gap through its padding, while its own side-wrapped run pictures
stay at their anchor offsets as overlays (Word allowOverlap) instead of
floating down the padding; the inline float margins must not add */
[data-obs-mode='1'] {
position: relative;
}
[data-obs-mode='1'] img.doc-inline-img--wrap-square-left,
[data-obs-mode='1'] img.doc-inline-img--wrap-tight-left,
[data-obs-mode='1'] img.doc-inline-img--wrap-through-left,
[data-obs-mode='1'] img.doc-inline-img--wrap-square-right,
[data-obs-mode='1'] img.doc-inline-img--wrap-tight-right,
[data-obs-mode='1'] img.doc-inline-img--wrap-through-right {
position: absolute;
float: none;
margin: 0 !important;
left: var(--obs-left, auto);
right: var(--obs-right, auto);
top: var(--obs-top, 0px);
}
/* invisible drawing paragraph: Word still lays out its (empty) line */
.doc-protected.doc-protected-anchor-line {
border: none;
border-radius: 0;
padding: 0;
margin: 0;
background: none;
pointer-events: none;
user-select: none;
}
/* body-level invisible markers (stray bookmarkEnd…): occupy no space at all, and
no BFC (overflow) so the neighbouring paragraphs' margins still collapse */
.doc-protected-invisible {
height: 0;
border: none;
padding: 0;
margin: 0;
pointer-events: none;
user-select: none;
}
/* empty section-break paragraphs: zero flow height like Word's absorbed section
mark (a 26px strip shifted every page below it); the label is an absolute
overlay (transparent until the node is selected), so it never takes flow space */
.doc-protected-sectbreak {
border-color: transparent;
background: transparent;
padding: 0;
border-width: 0;
margin: 0;
height: 0;
min-height: 0;
position: relative;
overflow: visible;
}
.doc-protected-sectbreak .doc-sectbreak-label {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
}
.doc-protected-sectbreak:hover {
border-color: var(--border-strong);
}
.doc-sectbreak-label {
display: block;
font-size: 10px;
color: transparent;
line-height: 1.2;
user-select: none;
}
.doc-protected-sectbreak:hover .doc-sectbreak-label,
.ProseMirror-focused .doc-protected-sectbreak.ProseMirror-selectednode .doc-sectbreak-label {
color: var(--text-dim);
}
/* decorative rule drawings (heading underlines, dividers): a plain line */
.doc-protected-rule {
border-color: transparent;
background: transparent;
padding: 4px 0;
line-height: 0;
}
.doc-protected-rule:hover {
border-color: var(--border-strong);
}
/* floating rule (connector line) anchored to an empty paragraph: Word keeps the
paragraph's full line in the flow and draws the line over it at its offset */
.doc-protected-rule.doc-protected-rule-anchored {
position: relative;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
line-height: normal;
}
.doc-protected-rule-anchored > .doc-rule-line {
position: absolute;
left: 0;
top: 0;
}
/* inline-level at full width: a line shortened by a float cannot hold it, so
the rule drops below the float like Word's full-width rule picture */
.doc-rule-line {
display: inline-block;
vertical-align: top;
width: 100%;
height: 1px;
background: var(--docs-paper-ink-dim);
}
/* VML horizontal rule, alone in its paragraph or sharing it with text: Word puts
the shape on a line of its own and sits it on that line's baseline; that line is
one single line of the rule run's own font (the document base size unless the
run declares w:sz inline), not the paragraph's tallest-run strut. The text-less
rule run measures with the ascii face, so the Latin factor applies even in a
CJK document (KR sample: 11pt Google Sans body -> 1.17 line, not Malgun's 1.74).
A block box (not an inline-block) so a floating picture beside the paragraph
cannot push the rule below itself */
.doc-inline-rule {
display: block;
font-size: var(--doc-base-fs, 11pt);
line-height: calc(
var(--doc-line-factor-latin, var(--doc-line-factor, 1.2)) * var(--doc-line-mult, 1) * 1em
);
box-sizing: content-box;
height: var(--doc-rule-h, 1px);
/* padding, not margins: a leading/trailing rule's margin would collapse into
the paragraph's own and lose part of the line */
padding-top: calc(1lh - 0.22em - var(--doc-rule-h, 1px));
padding-bottom: 0.22em;
background: var(--doc-rule-color, var(--docs-paper-ink-dim));
background-clip: content-box;
}
/* a rule opening a paragraph that goes on with text gets no text line of its own:
Word sets the rule ~5.5pt below the paragraph top and starts the first text line
right under it (probe 2026-09-05: 9.4px for a 1.5pt rule, 11.4px for 3pt, at any
rule-run or text size and any auto line spacing; a rule alone or after text keeps
the full line) */
.doc-inline-rule[data-lead-rule] {
padding-top: 5.5pt;
padding-bottom: 0;
}
/* a lead rule whose text is no larger than the rule run keeps a full line of the
paragraph's own font, stroke on the baseline (18pt heading: band 21.3pt measured,
rule bottom 3.8pt = the descent above the line bottom) */
.doc-inline-rule[data-lead-rule-full] {
font-size: inherit;
}
/* exact / atLeast runs keep their own natural box: an inherited absolute
line-height centred on a smaller glyph would hang below the strut and grow
the line (Word: atLeast is max(rule value, tallest run)); an exact rule caps
the box at the rule (--doc-lh-cap) so a taller run never grows the line */
.doc-lh-fixed span {
line-height: min(calc(var(--doc-line-factor, 1.2) * 1em), var(--doc-lh-cap, 9999px));
}
/* exact / atLeast paragraphs fix every line, the rule line included; typed-grid
documents already snap the rule through the generic span rule (doc-style-css) */
.doc-lh-fixed > .doc-inline-rule {
line-height: inherit;
}
.doc-lh-fixed > .doc-inline-rule[data-lead-rule] {
padding-top: calc(1lh - 0.22em - var(--doc-rule-h, 1px));
padding-bottom: 0.22em;
}
/* ProseMirror's trailing separator/break after a final leaf node would open an
extra empty line under the block rule (prosemirror.css forces the separator
inline with !important) */
.doc-inline-rule + .ProseMirror-separator,
.doc-inline-rule + .ProseMirror-separator + .ProseMirror-trailingBreak {
display: none !important;
}
/* the same trailing break when the rule run is wrapped in mark elements (size
span, strong, em, ...; the break sits outside the outermost wrapper, so the
sibling rule above misses it and the paragraph measured a second line) */
.doc-page
:is(span, strong, em, u, s):has(.doc-inline-rule:last-of-type)
+ .ProseMirror-trailingBreak,
.doc-page
:is(span, strong, em, u, s):has(.doc-inline-rule:last-of-type)
+ .ProseMirror-separator
+ .ProseMirror-trailingBreak {
display: none !important;
}
/* ProseMirror 1.42 puts a separator image in front of an atom that opens a
textblock; inline before the block-level rule it would open a text line of
its own above the rule (one extra line per rule, cumulative page drift) */
.ProseMirror-separator:has(+ .doc-inline-rule) {
display: none !important;
}
.doc-page br.doc-wrap-br {
clear: both;
}
/* a column break ending a paragraph is one line in Word (the mark opens the
next column); the trailing-break phantom after it would add a second */
.doc-page br.doc-col-br + br.ProseMirror-trailingBreak {
display: none;
}
/* a column break leading a paragraph with text (.doc-lead-col-br) has no
line of its own: Word opens the next column with the first text line
(CNKI/PDF-converter output breaks every second column this way); a
break-only paragraph keeps its line */
.doc-page .doc-lead-col-br > br.doc-col-br:first-child,
.doc-page .doc-lead-col-br > :first-child br.doc-col-br:first-of-type {
display: none;
}
/* a page break ending a paragraph has no line of its own either: the paragraph
mark sits on the last text line, and the next page starts with the next
paragraph. The phantom line after it (directly, or after the run-mark span
holding the break) would charge one more line to the page-bottom fit */
.doc-page br.doc-page-br + br.ProseMirror-trailingBreak,
.doc-page *:has(br.doc-page-br:last-child) + br.ProseMirror-trailingBreak {
display: none;
}
/* the same break inside a run-mark span (a w:br run carrying rPr): the sibling
combinator cannot reach the phantom, so the break's own line goes instead
and the phantom supplies the single line */
.doc-page span:last-of-type > br.doc-col-br:last-child {
display: none;
}
/* broken pictures: empty frame placeholder (frame/text colors are inline —
they substitute document content and must not follow the theme) */
.doc-protected-broken-img {
border-color: transparent;
background: transparent;
padding: 0;
}
.doc-protected-broken-img:hover {
border-color: var(--border-strong);
}
.doc-broken-img-frame {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
max-width: 100%;
min-height: 24px;
padding: 2px 8px;
overflow: hidden;
font-size: 12px;
line-height: 1.3;
text-align: center;
user-select: none;
}
/* field paragraphs whose visible result is rendered directly (TOC lines, page
fields...): no chip frame, dashed outline only on hover */
.doc-protected-field {
/* outline, not border: the chip border's 1px top/bottom would add 2px to
every field row (a 40-line TOC gains ~4 lines and drifts a page) */
border: none;
outline: 1px dashed transparent;
outline-offset: -1px;
background: transparent;
/* no vertical padding/margin: field paragraphs (TOC entries, filled text
fields) must occupy paragraph-height boxes or pagination drifts; document
CSS (docStyleCss blockSel + [data-style]) supplies the real spacing */
padding: 0 4px;
margin: 0;
cursor: default;
user-select: none;
-webkit-user-select: none;
}
.doc-protected-field:hover {
outline-color: var(--border-strong);
}
/* text-field paragraphs are body text in Word: no chip inset (the 4px shifted
citation paragraphs off the column edge and shortened every line); TOC
entries likewise start at the column edge and end at the right tab stop */
.doc-protected-field.doc-protected-field-text,
.doc-protected-field.doc-protected-field-toc {
padding: 0;
}
.doc-toc-line {
/* inherit the document's paragraph metrics: a hardcoded 11pt/1.7 line made
every TOC entry ~50% taller than Word/LO and drifted long TOCs a page+ */
font-size: inherit;
line-height: inherit;
/* the wrapper's inherited indent is re-applied on the body from the field */
text-indent: 0;
cursor: pointer;
}
/* one inline flow: number cell, title, then leader + page closing the title's
LAST line or dropping to a line of their own (Word's right tab). The first
line carries the entry's own first-line / hanging indent */
.doc-toc-body {
display: block;
padding-left: var(--doc-toc-indent, 0px);
text-indent: var(--doc-toc-hang, 0px);
}
/* Word keeps a TOC entry's spaces (a double space widens the title and can
drop the leader to the next line); the preview clone inherits .pv-content's
pre-wrap, so the canvas must match or the clone wraps where it was not measured */
.ProseMirror [contenteditable='false'].doc-toc-title,
.ProseMirror [contenteditable='false'] .doc-toc-title {
white-space: pre-wrap;
}
.doc-toc-line:hover .doc-toc-title {
color: var(--accent);
text-decoration: underline;
}
/* level indent ladder: stands in for a TOC style without its own w:ind */
.doc-toc-l2 > .doc-toc-body {
--doc-toc-indent: 1.5em;
}
.doc-toc-l3 > .doc-toc-body {
--doc-toc-indent: 3em;
}
.doc-toc-l4 > .doc-toc-body {
--doc-toc-indent: 4.5em;
}
/* the number cell is as wide as its tab stop; without a stop a fixed gap */
.doc-toc-num {
display: inline-block;
white-space: pre;
text-indent: 0;
box-sizing: border-box;
padding-right: 8px;
vertical-align: baseline;
}
.doc-toc-num[style*='width'] {
padding-right: 0;
}
/* leader + page travel as one unbreakable unit: TabLayoutView sets --doc-toc-gap
to the free width of the title's last line (0 when the unit has to drop to
the next line); the default keeps unmeasured lines (preview clones, print)
from overflowing */
.doc-toc-tail {
display: inline-block;
white-space: nowrap;
text-indent: 0;
vertical-align: baseline;
}
/* leader glyphs at the entry font's own advance (Word: a period every 0.25em
in Times, no extra tracking), starting right after the title */
.doc-toc-dots {
display: inline-block;
width: var(--doc-toc-gap, 24px);
overflow: clip;
white-space: nowrap;
vertical-align: baseline;
user-select: none;
}
.doc-toc-leader-heavy {
font-weight: bold;
}
/* tiptap injects `.ProseMirror [contenteditable="false"] { white-space: normal }`
* (0-2-0), beating the single-class rules above; mirror it to keep TOC lines
* from wrapping their leader dots into extra lines. */
.ProseMirror [contenteditable='false'] .doc-toc-dots,
.ProseMirror [contenteditable='false'].doc-toc-dots,
.ProseMirror [contenteditable='false'] .doc-toc-tail,
.ProseMirror [contenteditable='false'].doc-toc-tail {
white-space: nowrap;
}
.ProseMirror [contenteditable='false'] .doc-toc-num,
.ProseMirror [contenteditable='false'].doc-toc-num {
white-space: pre;
}
/* the stray anchor-paragraph line keeps its w:br newlines like the .pv-content
clone it is paginated against (the injected `normal` collapsed them to one line) */
.ProseMirror [contenteditable='false'] .doc-textbox-stray {
white-space: pre-wrap;
}
.doc-field-pagebreak {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-tertiary);
font-size: 10px;
user-select: none;
}
.doc-field-pagebreak::before,
.doc-field-pagebreak::after {
content: '';
flex: 1;
border-top: 1px dashed var(--border-strong);
}
.doc-field-text {
font-size: inherit;
line-height: inherit;
}
/* field results keep their spaces (Word preserves them; collapsing reflows the
wrap column around anchored pictures) — must outrank prosemirror-view's
injected `.ProseMirror [contenteditable=false] { white-space: normal }` */
.ProseMirror [contenteditable='false'].doc-field-text,
.ProseMirror [contenteditable='false'] .doc-field-text {
white-space: pre-wrap;
}
.doc-content-editing .doc-toc-title,
.doc-content-editing .doc-toc-page,
.doc-content-editing .doc-field-text,
.doc-content-editing .doc-formula-token {
cursor: text;
user-select: text;
-webkit-user-select: text;
outline: 1px solid color-mix(in srgb, var(--word-blue) 45%, transparent);
border-radius: 2px;
}
.doc-protected-formula {
padding: 5px 8px;
background: transparent;
}
.doc-formula {
display: inline-flex;
align-items: baseline;
min-height: 24px;
font-family: 'Cambria Math', 'STIX Two Math', serif;
font-size: 16px;
cursor: move;
user-select: none;
-webkit-user-select: none;
}
.doc-content-editing .doc-formula {
cursor: text;
user-select: text;
-webkit-user-select: text;
}
.doc-formula-token:empty::before {
content: '\00a0';
}
/* 2D MathML rendering: shown by default, swapped for the editable token
strip while the block is in content-editing mode */
.doc-formula-wrap {
display: inline-flex;
align-items: center;
}
.doc-formula-math {
display: inline-block;
font-family: 'Cambria Math', 'STIX Two Math', 'Latin Modern Math', serif;
font-size: 16px;
/* maths runs carry their own formatting: the paragraph style's bold/italic must not leak in */
font-weight: normal;
font-style: normal;
cursor: move;
user-select: none;
-webkit-user-select: none;
}
.doc-formula-math math {
font-family: inherit;
}
.doc-formula.doc-formula-has-math {
display: none;
}
.doc-content-editing .doc-formula.doc-formula-has-math {
display: inline-flex;
}
.doc-content-editing .doc-formula-math {
display: none;
}
/* display equations (oMathPara-style) are centered; inline fallbacks keep flow.
Paragraph-height box like .doc-protected-field: the chip border/padding/margin
added ~15pt per equation over Word; document CSS supplies the real spacing */
.doc-protected-formula-display {
text-align: center;
border: none;
outline: 1px dashed transparent;
outline-offset: -1px;
background: transparent;
padding: 0;
margin: 0;
}
.doc-protected-formula-display:hover {
outline-color: var(--border-strong);
}
.ProseMirror-focused .doc-protected-formula-display.ProseMirror-selectednode {
border: none;
}
/* embedded charts: SVG preview + editable data sheet.
No chip padding: the drawing must occupy exactly its wp:extent box or
pagination gains ~20px per chart over Word and drifts across pages */
.doc-protected-chart {
background: var(--docs-paper);
padding: 0;
}
/* no flex gap: title + plot must fill exactly the wp:extent box (the plot
height already budgets a 22px title row); the editing-only data grid
carries its own top margin instead */
.doc-chart {
display: flex;
flex-direction: column;
}
.doc-chart-title {
font-size: 13pt;
font-weight: 600;
text-align: center;
color: var(--docs-paper-ink-dim);
/* pinned to CHART_TITLE_ROW_PX: the plot SVG budgets exactly this row so
title + plot fill the wp:extent box; inherited (CJK) line-height must not
re-inflate it */
height: 22px;
line-height: 22px;
overflow: hidden;
}
.doc-chart-svg {
display: block;
max-width: 100%;
margin: 0 auto;
}
.doc-chart-grid {
stroke: var(--docs-paper-chart-grid);
stroke-width: 1;
}
.doc-chart-axis-label {
font:
10px 'Segoe UI',
var(--ui-cjk),
sans-serif;
fill: var(--docs-paper-ink-faint);
}
.doc-chart-axis-title {
font:
600 10px 'Segoe UI',
var(--ui-cjk),
sans-serif;
fill: var(--docs-paper-ink-dim);
}
.doc-chart-label-in {
fill: var(--docs-paper-ink-dim);
}
.doc-chart-frame {
max-width: 100%;
margin: 0 auto;
}
/* data grid is an editing affordance: visible while the chart block is
selected or in text-edit mode; the printed/preview chart shows only the plot
(Word/LO behavior) */
.doc-protected .doc-chart-data {
display: none;
margin-top: 8px;
}
.ProseMirror-focused .doc-protected.ProseMirror-selectednode .doc-chart-data,
.doc-protected.doc-content-editing .doc-chart-data {
display: table;
}
.doc-chart-data {
border-collapse: collapse;
align-self: center;
font-size: 10pt;
line-height: 1.4;
}
.doc-chart-data th,
.doc-chart-data td {
border: 1px solid var(--docs-paper-chart-border);
padding: 2px 10px;
min-width: 52px;
text-align: right;
font-weight: 400;
}
.doc-chart-data th.doc-chart-corner {
border: none;
}
.doc-chart-data th.doc-chart-cat {
font-weight: 600;
text-align: center;
background: color-mix(in srgb, var(--docs-paper-accent) 6%, transparent);
}
.doc-chart-data th.doc-chart-name {
font-weight: 600;
text-align: left;
border-left-width: 4px;
border-left-style: solid;
}
.doc-chart-data td.doc-chart-gap {
background: repeating-linear-gradient(
45deg,
transparent,
transparent 4px,
var(--docs-paper-stripe) 4px,
var(--docs-paper-stripe) 8px
);
}
.doc-content-editing .doc-chart-title,
.doc-content-editing .doc-chart-cell {
cursor: text;
user-select: text;
-webkit-user-select: text;
outline: 1px solid color-mix(in srgb, var(--word-blue) 45%, transparent);
border-radius: 2px;
}
.ProseMirror-focused .doc-protected.ProseMirror-selectednode {
border: 1px solid var(--word-blue);
outline: 1px solid var(--word-blue);
/* blue-tinted like an in-document selection, not the gray toolbar plate */
background: var(--docs-paper-select-bg);
}
/* field rows stay borderless when selected too — the border's 2px would
reflow the page under the caret */
.ProseMirror-focused .doc-protected-field.ProseMirror-selectednode {
border: none;
}
/* a floating anchor wrapper's selected border would push every block below
it by 2px and turn a knife-edge page bottom (the outline stays) */
.ProseMirror-focused .doc-protected.doc-protected-floating.ProseMirror-selectednode {
border: none;
}
.doc-protected-label {
display: inline-block;
font-size: 11px;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: 3px;
padding: 1px 8px;
margin-right: 10px;
background: var(--surface);
font-family: 'Segoe UI', var(--ui-cjk), sans-serif;
}
.doc-protected-preview {
font-size: 12px;
color: var(--text-dim);
cursor: text;
user-select: text;
-webkit-user-select: text;
/* SmartArt degrade lists one node label per line */
white-space: pre-line;
}
/* SmartArt degrade: precomputed diagram shapes at absolute positions.
Shape/text colors are document data — inline per shape, never themed. */
.doc-diagram {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
vertical-align: top;
}
.doc-diagram-shape {
position: absolute;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: pre-line;
line-height: 1.15;
}
.doc-diagram-text {
position: relative;
z-index: 1;
padding: 0 4px;
}
/* drawing canvas (lockedCanvas): text keeps its raw font size and overflows
the scaled child geometry downward instead of clipping (LO behavior) */
.doc-diagram-canvas,
.doc-diagram-canvas .doc-diagram-shape {
overflow: visible;
}
.doc-diagram-canvas .doc-diagram-shape {
align-items: flex-start;
}
.doc-diagram-canvas .doc-diagram-text {
word-break: break-all;
line-height: 1.2;
}
/* OLE embed degrade: the packaged preview picture at its declared size —
Word draws no box or caption (the type name lives in the hover tooltip).
The block stays display:block so consecutive objects stack like w:p and
the paragraph's w:jc (text-align) can place the inline preview. */
.doc-protected-ole {
border-color: transparent;
background: none;
padding: 0;
margin: 0;
}
.doc-protected-ole:hover {
border-color: var(--border-strong);
}
/* wrap inline-block + img block (like image blocks): the paragraph's
text-align places the shrink-wrapped preview without a baseline gap */
.doc-protected-ole .doc-ole-wrap {
display: inline-block;
max-width: 100%;
}
.doc-protected-ole .doc-ole-img {
display: block;
max-width: 100%;
}
.doc-protected-img {
max-width: 100%;
display: block;
}
/* SmartArt / drawing-canvas blocks: the shapes are the content — no chip box.
Zero padding: the block footprint must equal the declared wp:extent so
pagination matches Word (the dashed 1px border stays as hover chrome). */
.doc-protected-diagram {
border-color: transparent;
background: none;
padding: 0;
margin: 0;
}
.doc-protected-diagram:hover {
border-color: var(--border);
}
/* srcRect crop windows carry the declared extent inline; the float wrap's
60% clamp must not squeeze them (Word keeps the placed size and lets the
picture reach into the margin instead) */
.doc-protected .doc-img-crop {
max-width: none;
}
/* image blocks: no chip chrome; zero border/padding/margin/strut because Word
sizes a picture-only paragraph to the picture extent (hover frame = outline);
the paragraph's own spacing arrives as .doc-img-para margins */
.doc-protected[data-doc-protected='image'] {
border: 0;
background: none;
padding: 0;
margin: 0;
line-height: 0;
}
/* the document CSS gives .doc-img-para its paragraph margins and line-height;
the line itself is the picture extent plus, under an auto multiple, the
(m - 1) x single-line extra Word adds below the picture (typed-grid docs
pad to whole cells instead, doc-style-css); a style-level exact/atLeast
rule (--doc-line-fixed) pins the multiple to 1 like a direct one */
.doc-protected[data-doc-protected='image'].doc-img-para {
line-height: 0;
--doc-pic-mult: calc(1 + (var(--doc-line-mult, 1) - 1) * (1 - var(--doc-line-fixed, 0)));
--doc-pic-extra: calc((var(--doc-pic-mult) - 1) * var(--doc-line-factor, 1.2) * 1em);
padding-top: var(--doc-pic-effect-t, 0px);
padding-bottom: calc(var(--doc-pic-effect-b, 0px) + var(--doc-pic-extra));
}
.doc-protected[data-doc-protected='image'] .doc-img-wrap > img,
.doc-protected[data-doc-protected='image'] .doc-img-crop-viewport > img {
vertical-align: bottom;
}
/* caption text sharing the picture's paragraph: a text line under the zero-line-height picture */
.doc-protected[data-doc-protected='image'] .doc-img-caption {
line-height: var(--doc-line-max, calc(var(--doc-line-factor, 1.2) * var(--doc-line-mult, 1)));
}
/* Word never shrinks an in-line picture to the column: a wp:extent wider than
the text width runs into the right margin at full size */
.doc-page .doc-img-para > .doc-img-wrap,
.doc-page .doc-img-para > .doc-img-wrap > .doc-protected-img {
max-width: none;
}
/* leading spaces/tabs share the picture line when they fit (bottom-aligned so
they add nothing below it); an overwide picture wraps under them (pre-wrap:
pre would forbid the break) and the text keeps a full line of its own (Word) */
.doc-image-leading-space {
white-space: pre-wrap;
vertical-align: bottom;
line-height: calc(
var(--doc-line-factor, 1.2) * 1em * var(--doc-pic-mult, var(--doc-line-mult, 1))
);
}
/* float anchors are zero-height wrappers: an outline there would paint a
full-width bar at the anchor, so only in-flow pictures get the hover frame */
.doc-protected[data-doc-protected='image']:not(.doc-img-float):hover {
outline: 1px solid var(--border);
outline-offset: 2px;
}
.ProseMirror-focused .doc-protected[data-doc-protected='image'].ProseMirror-selectednode {
border-color: transparent;
outline: none;
background: none;
}
.doc-img-wrap {
position: relative;
display: inline-block;
max-width: 100%;
}
.doc-img-crop-viewport {
display: block;
width: 100%;
height: 100%;
}
/* find option toggles (match case / whole word) */
.find-opt {
border: 1px solid var(--border);
background: var(--surface);
border-radius: 3px;
font-size: 11px;
padding: 2px 6px;
cursor: pointer;
color: var(--text-dim);
}
.find-opt.on {
background: var(--word-blue);
border-color: var(--word-blue);
color: var(--docs-on-accent);
}
/* data grid of the Insert Chart dialog */
.modal-chart {
min-width: 460px;
}
.chart-data-grid {
border-collapse: collapse;
margin-bottom: 8px;
width: 100%;
}
.chart-data-grid th,
.chart-data-grid td {
border: 1px solid var(--border);
padding: 0;
}
.chart-data-grid input {
border: none;
background: transparent;
width: 90px;
padding: 4px 6px;
font-size: 12px;
}
.chart-data-grid thead input {
font-weight: 600;
}
/* cross-reference (REF field): gray field shading */
/* Word's default field shading is "when selected": a static view shows the
field result as plain text, shading appears on hover/interaction only */
.doc-ref-field {
border-radius: 2px;
}
.zotero-ref-field {
white-space: pre-wrap;
}
.doc-ref-field:hover {
background: var(--docs-paper-field-bg);
}
/* Toggle Field Codes: the cached result collapses, the widget shows { INSTR } */
.doc-field-result-hidden {
font-size: 0;
}
.doc-field-code {
background: var(--docs-paper-field-bg);
border-radius: 2px;
white-space: pre-wrap;
}
.doc-ref-field[data-instr-field='FORMCHECKBOX'],
.doc-checkbox-control {
cursor: pointer;
}
/* Bookmark / Cross-reference dialogs */
.modal-row {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.modal-row input {
flex: 1;
}
.modal-error {
color: var(--danger);
font-size: 12px;
margin-bottom: 6px;
}
/* Custom page margins dialog: two labeled inputs per row */
.margin-row label {
flex: 1;
margin-bottom: 4px;
}
.bookmark-list {
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: 4px;
}
.bookmark-empty {
padding: 14px;
color: var(--text-dim);
font-size: 13px;
}
.bookmark-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border-bottom: 1px solid var(--border);
}
.bookmark-row:last-child {
border-bottom: none;
}
.bookmark-name {
background: none;
border: none;
color: var(--word-blue);
cursor: pointer;
font-weight: 600;
padding: 0;
}
.bookmark-preview {
flex: 1;
color: var(--text-dim);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bookmark-del {
background: none;
border: none;
cursor: pointer;
color: var(--text-dim);
font-size: 15px;
}
/* text wrap: square uses a real CSS float so following paragraphs wrap automatically; tight/through display approximately as square */
.doc-protected.img-wrap-square-left,
.doc-protected.img-wrap-tight-left,
.doc-protected.img-wrap-through-left {
float: left;
width: fit-content;
max-width: 60%;
margin: 0 12px 0 0;
}
.doc-protected.img-wrap-square-right,
.doc-protected.img-wrap-tight-right,
.doc-protected.img-wrap-through-right {
float: right;
width: fit-content;
max-width: 60%;
margin: 0 0 0 12px;
}
.doc-protected.img-wrap-topBottom {
text-align: center;
}
/* Paragraphs are positioned (lead shift) and so paint over floats: lift a
side-wrapped picture above the full-width boxes of the paragraphs wrapping
around it, or clicks on the picture land in the text and it can no longer
be selected, moved or resized (same fix as floating tables below). Above
the page-gap header/footer strips (z-index 1, later in the flow) too: a
picture hanging into the bottom margin stays clickable there, as in Word */
.doc-page
.doc-protected[data-doc-protected='image']:is(
.img-wrap-square-left,
.img-wrap-square-right,
.img-wrap-tight-left,
.img-wrap-tight-right,
.img-wrap-through-left,
.img-wrap-through-right
) {
z-index: 2;
}
/* floating tables (w:tblpPr): text flows around the free side. Paragraphs are
positioned (lead shift) and so paint over floats; lift the table above the
following paragraph's full-width box or clicks on its cells land there */
.doc-table.doc-table-float-left {
float: left;
margin: 2px 12px 6px 0;
}
.doc-page :is(.doc-table-float-left, .doc-table-float-right):not(.doc-table-float-flow) {
position: relative;
z-index: 1;
}
.doc-table.doc-table-float-right {
float: right;
margin: 2px 0 6px 12px;
}
/* floating table with an over-page row: the engine flows it so the row page-breaks */
.doc-table.doc-table-float-flow {
float: none;
}
/* Word keeps the space-after above and the space-before below a floating table
(no collapse across the float); float-table-spacing.ts carries the sum */
.doc-page
:is(.doc-table-float-left, .doc-table-float-right):not(.doc-table-float-flow)
+ .doc-after-tblp {
margin-top: var(--tblp-sp-before) !important;
}
/* split floating table: the anchor paragraph starts beside the last portion.
page-float-carry is flow space (kept in the gapless preview snapshot);
page-gap-carry skips the table's in-table gaps and paints no band */
.page-float-carry,
.page-gap-carry {
pointer-events: none;
user-select: none;
}
.page-gap-carry::before {
display: none;
}
/* behind text: the absolutely positioned wrap drops under the flow's inline
content (negative z-index stays above the paper: no intermediate background) */
.img-wrap-behind > .doc-img-wrap {
z-index: -1;
}
.ProseMirror-focused
.doc-protected[data-doc-protected='image'].ProseMirror-selectednode
.doc-img-wrap {
outline: 2px solid var(--word-blue);
}
.img-resize-handle {
display: none;
position: absolute;
box-sizing: border-box;
width: 9px;
height: 9px;
background: var(--docs-paper);
border: 1px solid var(--word-blue);
border-radius: 1px;
z-index: 6;
}
.img-resize-handle-nw {
top: -5px;
left: -5px;
cursor: nwse-resize;
}
.img-resize-handle-n {
top: -5px;
left: 50%;
transform: translateX(-50%);
cursor: ns-resize;
}
.img-resize-handle-ne {
top: -5px;
right: -5px;
cursor: nesw-resize;
}
.img-resize-handle-e {
top: 50%;
right: -5px;
transform: translateY(-50%);
cursor: ew-resize;
}
.img-resize-handle-se {
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}
.img-resize-handle-s {
bottom: -5px;
left: 50%;
transform: translateX(-50%);
cursor: ns-resize;
}
.img-resize-handle-sw {
bottom: -5px;
left: -5px;
cursor: nesw-resize;
}
.img-resize-handle-w {
top: 50%;
left: -5px;
transform: translateY(-50%);
cursor: ew-resize;
}
.ProseMirror-focused
.doc-protected[data-doc-protected='image'].ProseMirror-selectednode
.img-resize-handle {
display: block;
}
/* inline run pictures (table / header cells): the editor wraps the img so
the selection frame and handles can hang off it. An inline-block with no
strut is exactly the picture's box and sits on the baseline like the bare
img did; max-width carries the cell clamp through to the picture */
.doc-inline-pic {
display: inline-block;
position: relative;
line-height: 0;
max-width: 100%;
}
.ProseMirror-focused .doc-inline-pic.ProseMirror-selectednode > img {
outline: 1px solid var(--word-blue);
outline-offset: -1px;
}
.ProseMirror-focused .doc-inline-pic.ProseMirror-selectednode > .img-resize-handle {
display: block;
}
/* the cell clip would cut the handles hanging 5px outside the picture */
.page-hf-cell:has(> * > .doc-inline-pic.ProseMirror-selectednode) {
overflow: visible;
}
.doc-image-anchor-marker {
display: none;
position: absolute;
z-index: 6;
top: -11px;
left: -32px;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
color: var(--text);
font: 16px/1 sans-serif;
pointer-events: none;
user-select: none;
}
.ProseMirror-focused
.doc-protected[data-doc-protected='image'].ProseMirror-selectednode
> .doc-image-anchor-marker {
display: flex;
}
/* Crop owns the active image controls while its modal is open. */
body.docs-crop-active
.doc-protected[data-doc-protected='image'].ProseMirror-selectednode
.doc-img-wrap {
outline: none;
}
body.docs-crop-active
.doc-protected[data-doc-protected='image'].ProseMirror-selectednode
.img-resize-handle,
body.docs-crop-active
.doc-protected[data-doc-protected='image'].ProseMirror-selectednode
> .doc-image-anchor-marker,
body.docs-crop-active
.doc-protected[data-doc-protected='image'].ProseMirror-selectednode
> .doc-move-handle {
display: none !important;
pointer-events: none !important;
}
/* AI diff highlight: kept clean on completed blocks unless Track Changes is active */
.doc-page .ai-changed:not(.has-ppr-change):not(:has(.doc-ins, .doc-del)) {
background: transparent;
box-shadow: none;
}
/* ================= start screen ================= */
.start-screen {
width: 100%;
min-height: 100%;
padding: 9vh 24px 40px;
text-align: center;
background: var(--surface);
font-family: 'Segoe UI', var(--ui-cjk), sans-serif;
}
.editor-scroll.start-screen-host {
padding: 0;
background: var(--surface);
}
/* Starting up (while the pending-open check runs): lightweight placeholder, don't flash the start screen */
.start-booting {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 13px;
}
.btn-primary {
height: 34px;
padding: 0 16px;
border: none;
border-radius: 12px;
background: var(--word-blue);
color: var(--docs-on-accent);
font-size: 13px;
cursor: pointer;
}
.btn-primary:hover:not(:disabled) {
background: var(--word-blue-dark);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: default;
}
.btn-ghost {
border: none;
background: none;
color: var(--word-blue);
font-size: 13px;
cursor: pointer;
padding: 4px 8px;
border-radius: 12px;
}
.btn-ghost:hover {
background: var(--hover);
}
.btn-sm {
font-size: 12px;
padding: 2px 10px;
height: 26px;
}
.recent {
margin-top: 44px;
text-align: left;
}
.recent-title {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 8px;
font-weight: 600;
}
.recent-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
padding: 9px 12px;
margin-bottom: 3px;
border: none;
border-radius: 4px;
background: var(--surface);
font-size: 13px;
color: var(--text);
cursor: pointer;
}
.recent-item:hover {
background: var(--active-bg);
}
.recent-path {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================= AI panel (Copilot-style pane) ================= */
.ai-panel {
position: relative;
width: 360px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--color-bg-page);
/* Same visible divider as the Lycero Office Sheets panel: the editor canvas is gray, so the default border would drown */
border-left: var(--ai-panel-border-left, 0px) solid var(--color-border-strong);
border-right: var(--ai-panel-border-right, 1px) solid var(--color-border-strong);
font-family: var(--gs-font-sans);
color: var(--color-text-primary);
}
/* drag handle on the panel's right edge — resize the panel horizontally */
.ai-panel-resizer {
position: absolute;
right: -3px;
top: 0;
bottom: 0;
width: 7px;
cursor: col-resize;
z-index: 20;
background: transparent;
}
/* while dragging: keep the col-resize cursor everywhere, no text selection */
.ai-panel-resizing {
cursor: col-resize;
user-select: none;
}
.ai-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 10px 12px 10px 14px;
border-bottom: 1px solid var(--color-border-default);
font-weight: 600;
font-size: 14px;
color: var(--color-text-primary);
}
.ai-panel-title {
display: flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.ai-panel-header-actions {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
.ai-header-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border: none;
background: none;
border-radius: var(--radius-8);
color: var(--color-text-secondary);
cursor: pointer;
padding: 0;
transition: all var(--transition-fast);
}
.ai-header-btn:hover {
background: var(--color-bg-subtle);
color: var(--color-text-primary);
}
/* collapsed AI sidebar: thin rail on the left edge */
.ai-rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 34px;
padding: 12px 2px;
border: none;
border-left: var(--ai-panel-border-left, 0px) solid var(--border);
border-right: var(--ai-panel-border-right, 1px) solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
flex-shrink: 0;
}
.ai-rail:hover {
background: var(--hover);
}
.ai-rail-text {
writing-mode: vertical-rl;
font-size: 12px;
letter-spacing: 2px;
color: var(--text-dim);
}
.ai-chat {
flex: 1;
overflow-y: auto;
padding: 32px 16px;
display: flex;
flex-direction: column;
/* uniform 16px flex gap between blocks, messages carry no margin */
gap: 16px;
font-family: var(--gs-font-sans);
}
/* Boundary between the restored transcript and the live turn */
.ai-history-sep {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
font-size: 14px;
color: var(--color-text-tertiary);
}
.ai-chat-empty {
margin-top: 36px;
padding: 0 10px;
text-align: center;
}
.ai-chat-empty-title {
font-size: var(--text-body-lg);
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 8px;
}
.ai-chat-empty-body {
color: var(--color-text-secondary);
font-size: var(--text-small);
line-height: 1.5;
}
/* clickable starter prompts in the empty state — suggestion chips:
* 30px-radius outline pills, 13px/400 */
.ai-starter-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 16px;
}
.ai-starter {
padding: 8px 16px;
border-radius: var(--radius-30);
border: 1px solid var(--color-border-default);
background: var(--color-bg-page);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--color-text-primary);
cursor: pointer;
transition: all var(--transition-fast);
}
.ai-starter:hover {
border-color: var(--color-border-strong);
background: var(--color-bg-subtle);
}
.ai-starter:active {
filter: brightness(0.88);
transform: scale(0.98);
}
/* Chat messages (scaled to the 14px panel): user = gray pill, AI = plain text without a bubble, no accent colors */
.ai-msg {
position: relative;
margin: 0;
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
/* markdown body inside assistant bubbles */
.ai-md {
white-space: normal;
}
.ai-md p,
.ai-md ul,
.ai-md ol {
margin: 0 0 16px;
}
.ai-md :last-child {
margin-bottom: 0;
}
/* blank markdown paragraphs would each eat a 16px margin — the stream never renders them */
.ai-md p:empty {
display: none;
}
.ai-md ul,
.ai-md ol {
margin-bottom: 20px;
padding-left: 20px;
}
.ai-md li {
margin-left: 20px;
line-height: 28px;
}
.ai-md .ai-md-h {
font-weight: 700;
line-height: 1.3;
margin: 20px 0 8px;
}
.ai-md .ai-md-h:first-child {
margin-top: 0;
}
/* inline code: neutral gray chip (deliberately not red), 2px below body size */
.ai-md code {
padding: 1px 6px;
border-radius: 4px;
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
font-size: 14px;
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
}
/* User pill: gray, fully rounded (no tail) */
.ai-msg-user {
align-self: flex-end;
background: var(--color-bg-subtle);
color: var(--color-text-primary);
padding: 8px 16px;
border-radius: 14px;
max-width: 80%;
line-height: 1.5;
}
.ai-msg-assistant {
align-self: stretch;
background: none;
border: none;
padding: 0;
max-width: 100%;
color: var(--color-text-primary);
}
/* tool activity chips inside assistant bubbles */
/* Collapsible tool-activity group */
.ai-work-group {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 12px;
}
.ai-msg-assistant .ai-work-group:first-child,
.ai-work-group:only-child {
margin-top: 0;
}
.ai-work-group-summary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 0;
margin: 0;
background: none;
border: none;
cursor: pointer;
user-select: none;
font-family: inherit;
font-size: 14px;
line-height: 1.5;
color: var(--color-text-tertiary);
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-work-group-summary:hover {
color: var(--color-text-secondary);
}
.ai-work-group-summary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--docs-focus-ring);
border-radius: 4px;
}
.ai-work-group-summary.running {
color: var(--color-text-secondary);
}
.ai-work-group-summary.running .ai-work-group-label {
animation: ai-summary-pulse 1500ms linear infinite;
}
@keyframes ai-summary-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
.ai-work-group-body {
align-self: stretch;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-work-group-body.open {
grid-template-rows: 1fr;
}
.ai-work-group-body-inner {
overflow: hidden;
min-height: 0;
padding: 0 0 0 8px;
transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-work-group-body.open .ai-work-group-body-inner {
padding: 4px 0 8px 8px;
}
/* Step rows inside the group: 20px icon slot + 1px connector */
.ai-step-row {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
color: var(--color-text-tertiary);
animation: ai-row-ease-in 320ms ease-out;
}
.ai-step-row:not(:last-child) {
padding-bottom: 16px;
}
.ai-step-row:not(:last-child)::after {
content: '';
position: absolute;
left: 9.5px;
top: 32px;
bottom: -4px;
width: 1px;
background: var(--color-border-default);
}
.ai-step-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-tertiary);
}
.ai-step-icon.done {
color: var(--color-text-secondary);
}
.ai-step-icon.error {
color: var(--color-error);
}
.ai-step-icon.running svg {
animation: ai-hourglass-flip 1.8s ease-in-out infinite;
}
@keyframes ai-hourglass-flip {
0%,
12% {
transform: rotate(0);
}
44%,
56% {
transform: rotate(180deg);
}
88%,
100% {
transform: rotate(360deg);
}
}
.ai-step-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 1px;
}
.ai-step-title {
font-size: 14px;
line-height: 1.3;
color: var(--color-text-secondary);
text-align: left;
background: none;
border: none;
padding: 0;
margin: 0;
font-family: inherit;
}
.ai-step-title.clickable {
cursor: pointer;
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-step-title.clickable:hover {
color: var(--text-primary);
}
.ai-step-title.clickable:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--docs-focus-ring);
border-radius: 4px;
}
/* Step detail opens instantly, no animation */
.ai-step-detail {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
/* ---- interactive mind map card (generate_mindmap) ---- */
.ai-mindmap {
margin-top: 12px;
border: 1px solid var(--color-border-default);
border-radius: 12px;
overflow: hidden;
background: var(--color-bg-subtle);
}
.ai-msg-assistant .ai-mindmap:first-child,
.ai-mindmap:only-child {
margin-top: 0;
}
.ai-mindmap-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border-default);
background: var(--surface);
}
.ai-mindmap-title {
font-size: 13px;
font-weight: 500;
color: var(--color-text-primary);
}
.ai-mindmap-count {
font-size: 12px;
color: var(--color-text-tertiary);
}
.ai-mindmap-actions {
margin-left: auto;
display: flex;
gap: 4px;
}
.ai-mindmap-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: 6px;
background: none;
color: var(--color-text-tertiary);
cursor: pointer;
transition:
color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-mindmap-btn:hover {
color: var(--color-text-primary);
background: var(--hover);
}
.ai-mindmap-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--docs-focus-ring);
}
.ai-mindmap-viewport {
position: relative;
height: 300px;
overflow: hidden;
cursor: grab;
touch-action: none;
}
.ai-mindmap-viewport:active {
cursor: grabbing;
}
.ai-mindmap-canvas {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
user-select: none;
}
.ai-mindmap-edges path {
fill: none;
stroke: var(--color-border-strong);
stroke-width: 1.5;
}
.ai-mindmap-node {
cursor: pointer;
}
.ai-mindmap-node rect {
fill: var(--surface);
stroke: var(--color-border-strong);
stroke-width: 1;
}
.ai-mindmap-node.root rect {
fill: var(--color-ai-action);
stroke: var(--color-ai-action);
}
.ai-mindmap-node .ai-mindmap-label {
fill: var(--color-text-primary);
font-size: 12.5px;
}
.ai-mindmap-node.root .ai-mindmap-label {
fill: var(--color-ai-action-text);
}
.ai-mindmap-node:hover rect {
stroke: var(--color-ai-action);
}
.ai-mindmap-node:focus-visible {
outline: none;
}
.ai-mindmap-node:focus-visible rect {
stroke: var(--color-ai-action);
stroke-width: 2;
}
.ai-mindmap-badge {
cursor: pointer;
}
.ai-mindmap-badge rect {
fill: var(--color-brand-secondary);
stroke: none;
}
.ai-mindmap-badge text {
fill: var(--color-ai-action-text);
font-size: 10px;
}
.ai-mindmap-toggle {
cursor: pointer;
}
.ai-mindmap-toggle rect,
.ai-mindmap-toggle circle {
fill: var(--hover);
stroke: var(--color-border-strong);
stroke-width: 1;
}
.ai-mindmap-toggle text {
fill: var(--color-text-secondary);
font-size: 10px;
}
.ai-mindmap-toggle:hover rect,
.ai-mindmap-toggle:hover circle {
stroke: var(--color-ai-action);
}
@media (prefers-reduced-motion: reduce) {
.ai-step-row,
.ai-step-icon.running svg,
.ai-work-group-summary.running .ai-work-group-label {
animation: none;
}
}
/* Running tool row: two grow/shrink brand dots */
.ai-tool-chip-spinner {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 2px;
height: 12px;
}
.ai-tool-chip-spinner::before,
.ai-tool-chip-spinner::after {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-brand-secondary);
}
.ai-tool-chip-spinner::before {
animation: ai-tool-dot-grow 2s infinite;
}
.ai-tool-chip-spinner::after {
animation: ai-tool-dot-shrink 2s infinite;
}
@keyframes ai-tool-dot-grow {
0%,
100% {
transform: scale(0.333);
opacity: 0.45;
}
50% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ai-tool-dot-shrink {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.333);
opacity: 0.45;
}
}
@media (prefers-reduced-motion: reduce) {
.ai-tool-chip-spinner::before,
.ai-tool-chip-spinner::after {
animation: none;
opacity: 0.65;
}
}
/* Elapsed run time next to the typing indicator */
.ai-typing-row {
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.ai-elapsed {
font-size: 14px;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
/* caret: text glyph right after the label, always visible, rotates open */
.ai-tool-chip-caret {
margin-left: 4px;
opacity: 0.7;
display: inline-block;
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-tool-chip-caret.open {
transform: rotate(90deg);
}
/* stream rows ease in */
@keyframes ai-row-ease-in {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* expanded step detail: subtle gray card, no border */
.ai-tool-output {
background: var(--color-bg-subtle);
border: none;
border-radius: 12px;
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
font-size: 14px;
color: var(--text-primary);
max-height: 300px;
overflow-y: auto;
width: 100%;
box-sizing: border-box;
}
.ai-tool-output-pre {
padding: 12px 16px;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.5;
}
/* streaming typing indicator */
/* Thinking indicator (white background, no container):
* phase one = two bouncing blue dots (alternating small/large); phase two = shimmering "Thinking…" text + streaming caret block */
.ai-typing {
display: inline-flex;
align-items: center;
padding: 4px 0;
font-size: 15px;
} /* Thinking indicator: shimmer label above two grow/shrink dots */
.ai-typing {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 4px 0;
}
.ai-typing-label {
display: inline-block;
position: relative;
font-size: 14px;
line-height: 1;
letter-spacing: 0.01em;
color: var(--docs-shimmer-base);
-webkit-text-fill-color: transparent;
background: var(--docs-shimmer-base)
linear-gradient(
to left,
var(--docs-shimmer-base),
var(--docs-shimmer-hi) 50%,
var(--docs-shimmer-base)
);
background-clip: text;
-webkit-background-clip: text;
background-repeat: no-repeat;
background-size: 70% 100%;
animation: ai-thinking-shimmer 1.2s infinite alternate linear;
}
.ai-typing-elapsed {
font-variant-numeric: tabular-nums;
}
@keyframes ai-thinking-shimmer {
0% {
background-position: -100% top;
}
100% {
background-position: 250% top;
}
}
.ai-typing-dots {
height: 12px;
display: flex;
gap: 2px;
}
.ai-typing-dot-slot {
display: flex;
justify-content: center;
align-items: center;
width: 12px;
}
.ai-typing-dot-grow,
.ai-typing-dot-shrink {
background: var(--color-brand-secondary);
border-radius: 50%;
}
.ai-typing-dot-grow {
animation: ai-dot-grow 2s infinite;
}
.ai-typing-dot-shrink {
animation: ai-dot-shrink 2s infinite;
}
@keyframes ai-dot-grow {
0%,
100% {
width: 4px;
height: 4px;
opacity: 0.45;
}
50% {
width: 12px;
height: 12px;
opacity: 1;
}
}
@keyframes ai-dot-shrink {
0%,
100% {
width: 12px;
height: 12px;
opacity: 1;
}
50% {
width: 4px;
height: 4px;
opacity: 0.45;
}
}
/* streaming caret at the tail of streaming assistant text */
.ai-msg-streaming .ai-md > :last-child::after {
content: '';
display: inline-block;
width: 6px;
height: 1em;
margin-left: 2px;
border-radius: 1px;
background: var(--color-text-secondary);
vertical-align: text-bottom;
animation: ai-caret-blink 900ms steps(1, end) infinite;
}
@keyframes ai-caret-blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ai-typing-label,
.ai-msg-streaming .ai-md > :last-child::after {
animation: none;
}
}
/* hover actions under assistant messages (copy / regenerate):
* borderless 30px icon buttons, radius 8, hover = subtle gray fill */
.ai-msg-toolbar {
display: flex;
gap: 4px;
margin-top: 8px;
}
.ai-msg-tool-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
height: 30px;
min-width: 30px;
padding: 5px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--color-text-secondary);
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-msg-tool-btn svg {
width: 20px;
height: 20px;
}
.ai-msg-tool-btn:hover:not(:disabled) {
background: var(--color-bg-subtle);
}
.ai-msg-tool-btn:disabled {
opacity: 0.45;
cursor: default;
}
/* Hairline before the roll-back action; hidden unless an icon action precedes it */
.ai-rollback-sep {
display: none;
width: 1px;
height: 14px;
align-self: center;
background: var(--border);
}
.ai-msg-tool-btn ~ .ai-rollback-sep {
display: block;
}
/* Quiet roll-back in the message toolbar (after copy/regenerate): dim at rest, solid on hover */
.ai-rollback-btn {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
height: 30px;
border: none;
background: none;
color: var(--text-dim);
font-size: 12px;
font-family: inherit;
padding: 0 8px;
border-radius: 6px;
cursor: pointer;
}
.ai-rollback-btn:hover:not(:disabled) {
color: var(--text);
background: var(--hover);
}
.ai-rollback-btn:disabled {
opacity: 0.5;
cursor: default;
}
.ai-msg-tool-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--docs-focus-ring-blue);
}
/* Tooltip: dark pill under the button, 0.3s hover delay */
.ai-msg-tool-btn {
position: relative;
}
/* Global press feedback */
.ai-msg-tool-btn:active {
filter: brightness(0.88);
transform: scale(0.98);
}
.ai-continue-btn {
margin-top: 8px;
padding: 5px 12px;
border: 1px solid var(--word-blue);
border-radius: 6px;
background: var(--word-blue);
color: var(--docs-on-accent);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.ai-continue-btn:hover {
filter: brightness(0.94);
}
.ai-msg-error {
margin-top: 6px;
color: var(--docs-ai-error);
font-size: 13px;
}
.ai-msg-actions {
margin-top: 8px;
display: flex;
gap: 6px;
}
.ai-msg-raw {
margin-top: 6px;
font-size: 11px;
}
.ai-msg-raw summary {
cursor: pointer;
color: var(--text-dim);
border-radius: 4px;
padding: 1px 4px;
margin: 0 -4px;
user-select: none;
}
.ai-msg-raw summary:hover {
background: var(--hover);
color: var(--text);
}
.ai-msg-raw pre {
margin: 4px 0 0;
padding: 6px 8px;
border-radius: 6px;
background: var(--color-bg-subtle);
border: 1px solid var(--border);
max-height: 200px;
overflow: auto;
white-space: pre-wrap;
word-break: break-all;
font-size: 10.5px;
color: var(--text-dim);
}
.ai-applied-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--docs-ok-ink);
background: var(--docs-ok-bg);
border-radius: 999px;
padding: 2px 9px;
}
.ai-applied-tag::before {
content: '✓';
font-size: 10px;
}
/* Composer floats over the chat scroll area — no top border (agent-shell §4.6) */
.ai-composer {
border-top: none;
padding: 8px 12px 12px;
background: var(--color-bg-page);
}
.ai-composer-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 7px;
}
/* scope chip — guidance accent (blue is reserved for guidance/onboarding) */
.ai-scope-hint {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--radius-30);
background: var(--docs-brand-ghost);
font-size: var(--text-caption);
color: var(--color-brand-secondary);
font-weight: 500;
}
.ai-scope-hint::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.ai-scope-row {
margin-bottom: 7px;
}
.ai-scope-hint .ai-scope-label,
.ai-scope-hint .ai-scope-clear {
display: inline-flex;
align-items: center;
border: none;
background: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
.ai-scope-hint .ai-scope-clear {
opacity: 0.65;
}
.ai-scope-hint .ai-scope-clear:hover {
opacity: 1;
}
.ai-scope-preview {
margin-top: 6px;
padding: 7px 10px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-8);
background: var(--color-bg-page);
font-size: var(--text-caption);
line-height: 1.5;
color: var(--color-text-secondary);
max-height: 96px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* in-answer citation links: click selects and scrolls to the cited block */
.ai-md .ai-md-nav {
color: var(--accent);
text-decoration: underline dotted;
text-underline-offset: 2px;
cursor: pointer;
}
.ai-md .ai-md-nav:hover {
text-decoration-style: solid;
}
/* queued-edit anchor highlight inside the document (decoration, never document data) */
.ai-queue-anchor {
background: var(--docs-paper-ai-anchor-bg);
border-bottom: 2px dashed var(--docs-paper-ai-anchor-line);
cursor: pointer;
}
/* a non-contiguous range added with ctrl/cmd+click (#2013): painted
as a decoration, never as document data. The live selection is the
browser's native highlight, so the system Highlight color makes the added
ranges read as the same selection in both themes. */
.doc-multi-range {
background: Highlight;
color: HighlightText;
}
/* floating Ask-AI entry that follows the text selection */
.ai-ask-trigger {
position: fixed;
z-index: 59;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--color-ai-action);
font-size: 14px;
font-weight: 500;
box-shadow: var(--docs-shadow-menu);
cursor: pointer;
}
.ai-ask-trigger:hover {
background: var(--hover);
}
/* anchored ask popover (shared look with the slides one, docs tokens) */
.ai-ask-pop {
position: fixed;
z-index: 60;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-12);
background: var(--surface);
box-shadow: var(--docs-shadow-menu);
}
.ai-ask-pop-close {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text-dim);
cursor: pointer;
}
.ai-ask-pop-close:hover {
background: var(--hover);
color: var(--text);
}
.ai-ask-pop-close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.ai-ask-pop-title {
padding-right: 24px;
font-size: 12.5px;
font-weight: 600;
color: var(--text);
}
.ai-ask-pop-sub {
margin-top: -4px;
font-size: 11.5px;
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-ask-pop-input {
width: 100%;
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-8);
background: var(--color-bg-page);
color: var(--text);
font-family: inherit;
font-size: 13px;
outline: none;
}
.ai-ask-pop-input:focus {
border-color: var(--accent);
}
.ai-ask-pop-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ai-ask-chip {
padding: 3px 9px;
border: 1px solid var(--border);
border-radius: 999px;
background: transparent;
color: var(--color-text-secondary);
font-size: 11.5px;
cursor: pointer;
}
.ai-ask-chip:hover {
background: var(--hover);
color: var(--text);
}
.ai-ask-pop-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.ai-ask-cancel,
.ai-ask-confirm {
padding: 5px 12px;
border-radius: var(--radius-6);
font-size: 12px;
cursor: pointer;
}
.ai-ask-cancel {
border: 1px solid var(--border);
background: transparent;
color: var(--color-text-secondary);
}
.ai-ask-cancel:hover {
background: var(--hover);
}
.ai-ask-cancel:disabled {
opacity: 0.45;
cursor: default;
}
.ai-ask-confirm {
border: 1px solid transparent;
background: var(--color-ai-action);
color: var(--color-ai-action-text);
}
.ai-ask-confirm:hover:not(:disabled) {
background: var(--color-ai-action-hover);
}
.ai-ask-confirm:disabled {
opacity: 0.45;
cursor: default;
}
/* queue card above the composer */
.ai-queue {
margin-bottom: 8px;
border: 1px solid var(--border);
border-radius: var(--radius-12);
background: var(--color-bg-subtle);
overflow: hidden;
}
.ai-queue-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
}
.ai-queue-title {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.ai-queue-count {
font-size: 11px;
color: var(--text-dim);
}
.ai-queue-fold {
margin-left: auto;
display: inline-flex;
padding: 2px;
border: none;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: transform var(--transition-fast);
}
.ai-queue-fold.folded {
transform: rotate(-90deg);
}
.ai-queue-hint {
padding: 0 10px 6px;
font-size: 11px;
color: var(--text-dim);
}
.ai-queue-list {
margin: 0;
padding: 0 6px 4px;
list-style: none;
max-height: 168px;
overflow-y: auto;
}
.ai-queue-row {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 4px 4px 6px;
border-radius: var(--radius-6);
font-size: 12px;
color: var(--text);
cursor: default;
}
.ai-queue-row:hover {
background: var(--hover);
}
.ai-queue-row.stale {
opacity: 0.5;
text-decoration: line-through;
}
.ai-queue-ord {
flex-shrink: 0;
width: 14px;
text-align: center;
font-size: 11px;
color: var(--color-text-tertiary);
}
.ai-queue-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-queue-target {
margin-right: 5px;
color: var(--text-dim);
}
.ai-queue-target::after {
content: ' ·';
}
.ai-queue-edit-input {
flex: 1;
min-width: 0;
padding: 2px 6px;
border: 1px solid var(--accent);
border-radius: var(--radius-6);
background: var(--color-bg-page);
color: var(--text);
font-family: inherit;
font-size: 12px;
outline: none;
}
.ai-queue-row-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
opacity: 0;
}
.ai-queue-row:hover .ai-queue-row-actions {
opacity: 1;
}
.ai-queue-row-btn {
display: inline-flex;
padding: 2px;
border: none;
border-radius: var(--radius-6);
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
}
.ai-queue-row-btn:hover {
background: var(--active-bg);
color: var(--text);
}
.ai-queue-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 8px;
}
.ai-queue-confirm {
flex: 1;
min-width: 0;
font-size: 11.5px;
color: var(--text-dim);
}
.ai-queue-discard {
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-6);
background: transparent;
color: var(--color-text-secondary);
font-size: 11.5px;
cursor: pointer;
}
.ai-queue-discard:hover {
background: var(--hover);
}
.ai-queue-send {
margin-left: auto;
padding: 4px 12px;
border: 1px solid transparent;
border-radius: var(--radius-6);
background: var(--accent);
color: var(--docs-on-accent);
font-size: 11.5px;
cursor: pointer;
}
.ai-queue-send:disabled,
.ai-queue-discard:disabled {
opacity: 0.45;
cursor: default;
}
/* composer card — 16px radius, default border, production float shadow */
.ai-input-box {
border: 1px solid var(--color-border-default);
border-radius: var(--radius-16);
background: var(--color-bg-page);
box-shadow: var(--docs-shadow-composer);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
/* textarea: 16px / 24px fixed line-height (chat body size), auto-grow band
* (resting height matches the sheets panel, 25% taller than default) */
.ai-input-box textarea {
display: block;
width: 100%;
resize: none;
border: none;
background: none;
border-radius: var(--radius-16) var(--radius-16) 0 0;
/* vertical gaps live on margin, not padding: textarea padding scrolls away
* with the content, so clipped lines would sit flush against chips/footer */
padding: 0 14px;
margin: 12px 0 4px;
font-size: 14px;
font-family: inherit;
line-height: 24px;
outline: none;
color: var(--color-text-primary);
min-height: 48px;
max-height: 168px;
overflow-y: auto;
}
.ai-input-box textarea::placeholder {
color: var(--color-text-tertiary);
}
.ai-input-footer {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 4px 8px 8px 10px;
}
.ai-input-footer .ai-send-btn {
margin-left: auto;
}
/* attach — brand-supplied paperclip art, 20×20 (5/9 of the 36px enter button), same as the sheets panel */
.ai-attach-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
transition: all var(--transition-fast);
}
.ai-attach-btn img {
display: block;
width: 100%;
height: 100%;
}
.ai-attach-btn:hover {
filter: brightness(0.7);
}
/* track-changes pill: quiet gray when off, guide-blue tinted when on */
.ai-track-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 10px;
flex: 0 1 auto;
min-width: 0;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-30);
background: none;
color: var(--color-text-secondary);
font-size: var(--text-caption);
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.ai-track-btn .ai-track-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-track-btn:hover {
background: var(--color-bg-subtle);
color: var(--color-text-primary);
}
.ai-track-btn .ai-track-dot {
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: 50%;
background: var(--color-border-strong);
}
.ai-track-btn.on {
border-color: var(--docs-brand-ring);
background: var(--docs-brand-ghost-weak);
color: var(--color-brand-secondary);
}
.ai-track-btn.on .ai-track-dot {
background: var(--color-brand-secondary);
}
/* pending-revision summary above the composer: count + reject all / accept all */
.ai-revision-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 8px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-12);
background: var(--color-bg-subtle);
}
.ai-revision-bar .ai-revision-count {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
border: 0;
background: none;
text-align: start;
font: inherit;
font-size: var(--text-caption);
color: var(--color-text-secondary);
cursor: pointer;
}
.ai-revision-bar .ai-revision-count:disabled {
cursor: default;
}
.ai-revision-chevron {
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
}
.ai-revision-count.open .ai-revision-chevron {
transform: translateY(1px) rotate(-135deg);
}
.ai-revision-list {
flex-basis: 100%;
margin: 0 -10px -8px;
border-top: 1px solid var(--border);
max-height: 40vh;
overflow-y: auto;
}
.ai-revision-row {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
font-size: var(--text-caption);
cursor: pointer;
}
.ai-revision-row:last-child {
border-bottom: 0;
}
.ai-revision-row:hover,
.ai-revision-row.active {
background: var(--hover);
}
.ai-revision-row-head {
display: flex;
align-items: center;
gap: 4px;
color: var(--color-text-secondary);
}
.ai-revision-row-head b {
color: var(--text);
font-weight: 600;
}
.ai-revision-dot {
width: 6px;
height: 6px;
margin-inline-end: 2px;
border-radius: 50%;
background: var(--color-border-strong);
}
.ai-revision-dot.ins {
background: var(--success);
}
.ai-revision-dot.del {
background: var(--danger);
}
.ai-revision-row-text {
margin-top: 3px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-revision-row-text.del {
text-decoration: line-through;
color: var(--color-text-secondary);
}
.ai-revision-row-actions {
display: flex;
justify-content: flex-end;
gap: 4px;
margin-top: 6px;
}
.ai-revision-reject,
.ai-revision-accept {
padding: 3px 10px;
border: 1px solid transparent;
border-radius: var(--radius-6);
background: transparent;
color: var(--color-text-secondary);
font-size: 11.5px;
cursor: pointer;
}
.ai-revision-accept {
border-color: var(--border);
color: var(--text);
}
.ai-revision-reject:hover:not(:disabled),
.ai-revision-accept:hover:not(:disabled) {
background: var(--surface);
border-color: var(--color-border-strong);
}
.ai-revision-reject:disabled,
.ai-revision-accept:disabled {
opacity: 0.45;
cursor: default;
}
.ai-revision-bar button:disabled {
opacity: 0.5;
cursor: default;
}
/* attachment chips above the composer */
.ai-attachments {
display: flex;
gap: 8px;
/* single row inside the prompt box, above the textarea (Lycero composer style):
extra images run past the box edge and scroll horizontally.
scroll (not auto) + zero bottom padding: the always-present 4px scrollbar lane
doubles as the bottom padding, so overflowing never grows the strip and
shifts its content up */
overflow-x: scroll;
/* side insets are transparent borders, not padding: overflow clips at the
padding edge, so side padding would let scrolled items slide flush against
the box edges — borders keep the 14px gaps while scrolling */
padding: 13px 0 0;
border-inline: 14px solid transparent;
margin-bottom: -6px;
}
.ai-attachments > * {
flex-shrink: 0;
}
/* The 4px scrollbar lane is always reserved (no layout jump when it appears);
the thumb is painted only while scrolling (.is-scrolling from the strip's onScroll) */
.ai-attachments::-webkit-scrollbar {
height: 4px;
}
.ai-attachments::-webkit-scrollbar-thumb {
border-radius: 2px;
background: transparent;
}
.ai-attachments.is-scrolling::-webkit-scrollbar-thumb {
background: var(--docs-scroll-thumb);
}
/* Image attachments: square thumbnail with a round dark remove button on its corner */
.ai-attachment-thumb {
position: relative;
}
.ai-attachment-thumb img {
display: block;
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 12px;
}
.ai-attachment-thumb-remove {
position: absolute;
top: -10px;
right: -2px;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--docs-chip-remove-bg);
color: var(--docs-chip-remove-ink);
font-size: 15px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.ai-attachment-thumb-remove:hover {
background: var(--docs-chip-remove-hover);
}
/* The card's 1px border shifts its absolutely-positioned button inward by 1px
on both axes; land the borderless thumbs' button on the exact same spot */
.ai-attachment-thumb .ai-attachment-thumb-remove {
top: -9px;
right: -1px;
}
/* image thumb before its preview arrives (or when reading fails): neutral tile + type icon */
.ai-attachment-thumb-pending {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--bg-content);
}
.ai-attachment-thumb .ai-attachment-thumb-pending img {
width: 26px;
height: 26px;
}
/* Non-image attachments (pdf, xlsx, …): fixed-width bordered card — brand type
icon + truncated name and size, same height and remove button as the thumbs */
.ai-attachment-card {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 190px;
height: 56px;
padding: 0 14px 0 8px;
border: 1px solid var(--color-border-default);
border-radius: 12px;
background: var(--bg-content);
}
/* the type icon sits in its own bordered white tile, like the Lycero card */
.ai-attachment-card-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--surface);
}
.ai-attachment-card-icon img {
display: block;
width: 26px;
height: 26px;
}
.ai-attachment-card-meta {
display: flex;
flex: 1;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.ai-attachment-card-name {
overflow: hidden;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-attachment-card-size {
margin-top: 4px;
font-size: 11px;
color: var(--text-muted);
}
/* attachments echoed on a sent user message (read-only: no remove button, smaller thumbs) */
.ai-msg-attachments {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.ai-msg-attachments .ai-attachment-thumb img {
width: 44px;
height: 44px;
border-radius: 8px;
}
.ai-msg-attachments .ai-attachment-card {
width: auto;
max-width: 190px;
height: 44px;
background: var(--surface);
}
.ai-msg-attachments .ai-attachment-card-icon {
width: 32px;
height: 32px;
background: var(--surface-subtle);
}
.ai-msg-attachments .ai-attachment-card-icon img {
width: 22px;
height: 22px;
}
.ai-attachment-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 4px 2px 9px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--docs-chip-bg);
font-size: 11.5px;
color: var(--text);
max-width: 100%;
}
.ai-attachment-chip svg {
flex-shrink: 0;
color: var(--word-blue);
}
.ai-attachment-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: none;
border-radius: 50%;
background: none;
color: var(--text-dim);
font-size: 13px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.ai-attachment-remove:hover {
background: var(--hover);
color: var(--text);
}
.ai-attach-notice {
margin-bottom: 7px;
font-size: 11.5px;
color: var(--docs-ai-error);
}
/* whole-panel drop target highlight */
.ai-panel-dragover {
outline: 2px dashed var(--word-blue);
outline-offset: -4px;
}
.ai-input-hint {
font-size: var(--text-caption);
color: var(--color-text-tertiary);
user-select: none;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* icon-only enter key: transparent button chrome, visuals come from brand-supplied PNGs
* (gray arrow = disabled, black arrow = enabled), 36×36, same as the sheets panel */
.ai-send-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
flex-shrink: 0;
border: none;
border-radius: 35%;
background: transparent;
cursor: pointer;
transition: all var(--transition-fast);
}
.ai-send-btn img {
display: block;
width: 100%;
height: 100%;
}
.ai-send-btn:hover:not(:disabled) {
filter: brightness(0.92);
}
.ai-send-btn:active:not(:disabled) {
filter: brightness(0.88);
transform: scale(0.98);
}
.ai-send-btn:disabled {
cursor: default;
}
/* Stop button while generating: brand-supplied art (white square on black), transparent button chrome */
.ai-send-btn.ai-stop-btn {
background: transparent;
}
.ai-send-btn.ai-stop-btn:hover {
filter: brightness(0.92);
}
/* ================= status bar ================= */
.status-bar {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
height: 24px;
font-size: 11.5px;
/* neutral chrome, unified with slides/sheets — no app-brand tint */
color: var(--text-dim);
background: var(--docs-statusbar-bg);
border-top: 1px solid var(--docs-statusbar-border);
}
.status-left {
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status-item {
margin-right: 14px;
flex-shrink: 0;
}
/* Word: the page counter, word count and Track Changes readout are buttons
(Go To / Word Count / toggle tracking) */
.status-btn {
border: none;
background: none;
color: inherit;
font: inherit;
padding: 0;
cursor: pointer;
}
.status-btn:hover:not(:disabled) {
text-decoration: underline;
}
.status-btn:disabled {
cursor: default;
color: var(--text-dim);
}
.status-track.on {
color: var(--accent);
}
.status-msg {
opacity: 0.85;
overflow: hidden;
text-overflow: ellipsis;
}
.status-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.zoom-btn {
border: none;
background: none;
color: inherit;
font-size: 14px;
cursor: pointer;
width: 20px;
height: 20px;
border-radius: 3px;
line-height: 1;
}
.zoom-btn:hover {
background: var(--docs-statusbar-hover);
}
.zoom-slider {
width: 110px;
accent-color: var(--docs-zoom-slider);
height: 3px;
}
.zoom-value {
min-width: 38px;
text-align: right;
border: none;
background: none;
color: inherit;
font: inherit;
padding: 0 2px;
border-radius: 3px;
cursor: pointer;
}
.zoom-value:hover:not(:disabled) {
background: var(--docs-statusbar-hover);
}
.zoom-value:disabled {
cursor: default;
}
/* Word's status bar view switcher, left of the zoom slider */
.status-views {
display: flex;
align-items: center;
gap: 2px;
margin-right: 6px;
}
.status-view-btn {
border: none;
background: none;
color: inherit;
width: 20px;
height: 20px;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.status-view-btn:hover {
background: var(--docs-statusbar-hover);
}
.status-view-btn.on {
background: var(--active-bg);
color: var(--accent);
}
/* ================= modal ================= */
.modal-backdrop {
position: fixed;
inset: 0;
background: var(--docs-overlay);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.modal {
width: 440px;
background: var(--surface);
border-radius: 16px;
padding: 22px 24px;
box-shadow: var(--docs-shadow-modal);
}
.modal h2 {
margin: 0 0 16px;
font-size: 17px;
}
.modal label {
display: block;
font-size: 12px;
color: var(--text-dim);
margin-bottom: 12px;
}
.modal input {
display: block;
width: 100%;
margin-top: 4px;
height: 34px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 10px;
font-size: 13px;
outline: none;
}
.modal input:focus {
border-color: var(--word-blue);
}
.modal select {
display: block;
width: 100%;
margin-top: 4px;
height: 34px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 6px;
font-size: 13px;
outline: none;
background: var(--surface);
}
/* Lycero DS modal footer buttons: secondary = bg-subtle, primary = black (#232425) */
.modal-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 14px;
border: 1px solid var(--color-border-default);
border-radius: 12px;
background: var(--color-bg-page);
color: var(--color-text-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.modal-actions button:hover:not(:disabled) {
background: var(--color-bg-subtle);
color: var(--color-text-primary);
}
.modal-actions button:active:not(:disabled) {
filter: brightness(0.88);
transform: scale(0.98);
}
.modal-actions button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--docs-focus-ring);
}
.modal-actions button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.modal-actions button.primary,
.modal-actions .btn-primary {
border-color: var(--color-btn-primary);
background: var(--color-btn-primary);
color: var(--color-btn-primary-text);
}
.modal-actions button.primary:hover:not(:disabled),
.modal-actions .btn-primary:hover:not(:disabled) {
border-color: var(--color-btn-primary-hover);
background: var(--color-btn-primary-hover);
color: var(--color-btn-primary-text);
}
/* ---- keyboard shortcuts sheet ---- */
.modal-shortcuts {
width: 620px;
max-height: min(78vh, 720px);
display: flex;
flex-direction: column;
}
.modal-shortcuts .sc-filter {
display: block;
width: 100%;
height: 34px;
border: 1px solid var(--border-strong);
border-radius: 8px;
padding: 0 10px;
font-size: 13px;
outline: none;
}
.modal-shortcuts .sc-filter:focus {
border-color: var(--word-blue);
}
.modal-shortcuts .sc-list {
flex: 1;
overflow-y: auto;
margin-top: 14px;
padding-right: 4px;
}
.modal-shortcuts .sc-group + .sc-group {
margin-top: 18px;
}
.modal-shortcuts .sc-group h3 {
margin: 0 0 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-dim);
}
.modal-shortcuts .sc-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 5px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.modal-shortcuts .sc-row:last-child {
border-bottom: none;
}
.modal-shortcuts .sc-keys {
flex: none;
font-family: inherit;
font-size: 12px;
color: var(--text-dim);
background: var(--hover);
border-radius: 6px;
padding: 2px 8px;
white-space: nowrap;
}
.modal-shortcuts .sc-empty {
margin: 24px 0;
text-align: center;
font-size: 13px;
color: var(--text-dim);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 18px;
}
/* ---- Lycero DS form dialogs (password prompts + Protect Document) ---- */
.modal.gs-form {
padding: 24px;
box-shadow: var(--docs-shadow-modal-gs);
}
.modal.gs-form h2 {
margin: 0 0 8px;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
.gs-form .modal-desc {
font-size: 13px;
line-height: 1.6;
color: var(--color-text-secondary);
margin: 0 0 20px;
}
.gs-form label.fld {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 16px;
}
/* the "(optional)" suffix stays lighter than the label itself */
.gs-form .fld-opt {
font-weight: 400;
color: var(--color-text-tertiary);
}
.gs-form .fld input {
display: block;
width: 100%;
margin-top: 0;
height: 38px;
border: 1px solid var(--color-border-default);
border-radius: 12px;
padding: 0 12px;
font-size: 13px;
background: var(--surface);
color: var(--color-text-primary);
outline: none;
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.gs-form .fld input:hover:not(:focus):not(.invalid) {
border-color: var(--border-strong);
}
.gs-form .fld input:focus {
border-color: var(--docs-input-focus);
box-shadow: 0 0 0 3px var(--docs-input-ring);
}
.gs-form .fld input.invalid {
border-color: var(--color-error);
}
.gs-form .fld input.invalid:focus {
box-shadow: 0 0 0 3px var(--docs-error-ring);
}
/* side-by-side password + confirm pair */
.gs-form .fld-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* wrapper positioning the shared .pwd-eye toggle (defined below) inside a
gs-form field */
.pwd-wrap {
position: relative;
display: block;
margin-top: 6px;
}
.gs-form .pwd-wrap input {
padding-right: 40px;
}
.fld-error {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--color-error);
margin: 6px 0 0;
}
.fld-error svg {
flex-shrink: 0;
}
.gs-form .fld-hint {
font-size: 12px;
line-height: 1.6;
color: var(--color-text-tertiary);
margin: -8px 0 16px;
}
/* mockup g-actions spec: 36px buttons, 12px gap, 24px above the footer */
.gs-form .modal-actions {
gap: 12px;
margin-top: 24px;
}
.gs-form .modal-actions button {
height: 36px;
padding: 0 18px;
}
.modal select {
display: block;
width: 100%;
margin-top: 4px;
height: 34px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 6px;
font-size: 13px;
outline: none;
background: var(--surface);
}
.modal select:focus {
border-color: var(--word-blue);
}
/* Shared dropdown (@lycero/ui gs-dd) app sizing: modal dialogs keep the old
`.modal select` footprint; ribbon/table/page-number rows scope their own
width/height below */
.modal .gs-dd {
display: flex;
width: 100%;
margin-top: 4px;
}
.modal .gs-dd-btn {
height: 34px;
border-radius: 4px;
padding: 0 6px 0 8px;
font-size: 13px;
}
.pgnum-row .gs-dd {
width: 180px;
flex-shrink: 0;
}
/* wrap-text picker on the Picture Format tab (was select.rb-select) */
.rb-wrap-dd {
width: 128px;
}
.rb-wrap-dd .gs-dd-btn {
height: 28px;
}
.rb-wrap-dd .gs-dd-btn:disabled {
opacity: 0.55;
}
.table-border-opts .gs-dd {
width: 72px;
}
.table-border-opts .gs-dd-btn {
box-sizing: border-box;
height: 20px;
min-height: 20px;
padding-top: 0;
padding-bottom: 0;
}
/* ---- Protect Document dialog (Review > Protect, Word's Password Protect layout) ---- */
.modal.protect-dialog {
width: 520px;
max-height: calc(100vh - 80px);
overflow-y: auto;
}
.modal.paste-special-dialog {
width: 380px;
}
.protect-dialog .protect-section-title {
margin: 24px 0 14px;
padding-top: 16px;
border-top: 1px solid var(--color-border-default);
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
}
.protect-dialog .modal-desc + .protect-section-title {
margin-top: 0;
padding-top: 0;
border-top: none;
}
/* checkbox / radio rows: the native input is visually replaced by the .ctl
box (18px, black checked state per the Lycero DS palette) */
.protect-dialog label.protect-check {
position: relative;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 13px;
color: var(--color-text-primary);
cursor: pointer;
}
.protect-dialog label.protect-check input {
position: absolute;
opacity: 0;
width: 18px;
height: 18px;
margin: 0;
cursor: pointer;
}
.protect-dialog .protect-check .ctl {
flex: 0 0 18px;
width: 18px;
height: 18px;
border: 1.5px solid var(--border-strong);
background: var(--surface);
position: relative;
transition:
border-color var(--transition-fast),
background var(--transition-fast),
box-shadow var(--transition-fast);
}
.protect-dialog .protect-check input[type='checkbox'] + .ctl {
border-radius: 5px;
}
.protect-dialog .protect-check input[type='checkbox']:checked + .ctl {
border-color: var(--color-btn-primary);
background: var(--color-btn-primary);
}
.protect-dialog .protect-check input[type='checkbox']:checked + .ctl::after {
content: '';
position: absolute;
left: 5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid var(--color-btn-primary-text);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.protect-dialog .protect-check input[type='radio'] + .ctl {
border-radius: 50%;
}
.protect-dialog .protect-check input[type='radio']:checked + .ctl {
border-color: var(--color-btn-primary);
box-shadow: inset 0 0 0 4.5px var(--color-btn-primary);
}
.protect-dialog .protect-check input:focus-visible + .ctl {
box-shadow: 0 0 0 3px var(--docs-focus-ring);
}
.protect-dialog .protect-check input[type='radio']:checked:focus-visible + .ctl {
/* the checked dot and the focus ring are both box-shadows: they must be combined */
box-shadow:
inset 0 0 0 4.5px var(--color-btn-primary),
0 0 0 3px var(--docs-focus-ring);
}
.protect-dialog .protect-check input:disabled + .ctl {
opacity: 0.4;
}
.protect-dialog label.protect-check:has(> input:disabled) {
color: var(--color-text-tertiary);
cursor: default;
}
/* the four Word protection modes, indented under the enable checkbox */
.protect-dialog .protect-modes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 16px;
margin: 0 0 14px 26px;
}
.protect-dialog .protect-modes .protect-check {
margin-bottom: 8px;
}
/* ---- password prompt dialog (open password / password to modify) ---- */
/* the quoted file name in the description can be arbitrarily long */
.pwd-dialog .modal-desc {
overflow-wrap: anywhere;
}
/* wrong password: shake the field; the red border / ring / error line come
from the shared gs-form invalid + fld-error rules */
.pwd-dialog .fld.has-error .pwd-wrap {
animation: pwd-shake 0.4s ease;
}
@keyframes pwd-shake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-6px);
}
40% {
transform: translateX(6px);
}
60% {
transform: translateX(-4px);
}
80% {
transform: translateX(4px);
}
}
/* show/hide toggle inside the field */
.pwd-eye {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 8px;
background: none;
color: var(--color-text-tertiary);
cursor: pointer;
transition:
color var(--transition-fast),
background var(--transition-fast);
}
.pwd-eye:hover:not(:disabled) {
background: var(--color-bg-subtle);
color: var(--color-text-primary);
}
.pwd-eye:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--docs-focus-ring);
}
.pwd-eye:disabled {
opacity: 0.4;
cursor: default;
}
/* ---- print dialog (Word-style: page preview + range options) ---- */
.modal.print-dialog {
width: min(880px, calc(100vw - 64px));
}
.print-dialog-body {
display: flex;
gap: 18px;
height: min(600px, calc(100vh - 220px));
}
/* while the dialog is open the pagination preview is only its (hidden) print source */
@media screen {
.app:has(.modal.print-dialog) .pagination-preview {
visibility: hidden;
}
}
.print-preview-pane {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--hover);
overflow: hidden;
}
.print-preview-page {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* the cloned .pv-page keeps its own paper background/shadow; only the flow margin goes */
.print-preview-page .pv-page {
margin: 0;
}
.print-preview-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 7px 10px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-dim);
}
.print-preview-nav button {
width: 26px;
height: 24px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.print-preview-nav button:hover:not(:disabled) {
background: var(--hover);
}
.print-preview-nav button:disabled {
opacity: 0.4;
cursor: default;
}
.print-preview-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 13px;
}
.print-options {
width: 240px;
flex-shrink: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.print-options fieldset {
margin: 0;
padding: 8px 10px 6px;
border: 1px solid var(--border);
border-radius: 8px;
}
.print-options legend {
padding: 0 4px;
font-size: 12px;
color: var(--text-dim);
}
.print-options .print-radio {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 7px;
font-size: 13px;
color: var(--text);
cursor: pointer;
}
.print-options .print-radio input {
display: inline-block;
width: auto;
height: auto;
margin: 0;
accent-color: var(--accent);
}
.print-options .print-range-input {
display: block;
width: 100%;
box-sizing: border-box;
height: 28px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 6px;
font-size: 12px;
outline: none;
background: var(--surface);
}
.print-options .print-range-input:focus {
border-color: var(--accent);
}
.print-options .print-range-input:disabled {
opacity: 0.55;
}
.print-options .print-range-input.invalid {
border-color: var(--danger);
}
.print-options .print-select {
display: block;
width: 100%;
box-sizing: border-box;
height: 28px;
margin: 0 0 8px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 4px;
font-size: 12px;
background: var(--surface);
color: var(--text);
}
.print-options .print-field {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 13px;
color: var(--text);
}
.print-options .print-field span {
flex: 1;
}
.print-options .print-field .print-select {
flex: 1.6;
width: auto;
margin: 0;
}
.print-options .print-copies {
width: 64px;
height: 28px;
box-sizing: border-box;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 6px;
font-size: 12px;
background: var(--surface);
color: var(--text);
}
.print-options .print-select:disabled,
.print-options .print-copies:disabled,
.print-options .print-radio input:disabled {
opacity: 0.55;
}
.print-page-count {
margin-top: auto;
padding: 2px 2px 0;
font-size: 12px;
color: var(--text-dim);
}
/* provider tabs in AI settings */
.provider-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.provider-tab {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--border-strong);
background: var(--surface);
border-radius: 999px;
padding: 5px 13px;
font-size: 12.5px;
cursor: pointer;
color: inherit;
}
.provider-tab:hover {
border-color: var(--word-blue);
}
.provider-tab-active {
border-color: var(--word-blue);
background: color-mix(in srgb, var(--word-blue) 10%, var(--surface));
color: var(--word-blue);
font-weight: 600;
}
.provider-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--docs-ok-dot);
}
/* ProseMirror basics */
/* pre-wrap, NOT prosemirror-view's break-spaces (its runtime-injected sheet
loads after this one, so the selector is doubled to win): Word hangs the
space at a line break into the margin, while break-spaces reserves width
for it — every line wraps a word early and a space that fits nowhere takes
a whole blank line (narrow table cells), inflating layout vs Word. */
.ProseMirror.ProseMirror {
white-space: pre-wrap;
}
/* The pagination-preview clone must lay out exactly like the editor canvas it
was measured on. ProseMirror's whitespace/ligature rules are part of that
layout: without them whitespace-only lines collapse in the clone, every
following page window drifts upward, and page-boundary content prints twice
(once clipped at a page bottom, once at the next page top). */
.pv-content {
word-wrap: break-word;
white-space: pre-wrap;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
font-feature-settings: 'liga' 0;
}
/* Word pair-kerns only under w:kern; doc-style-css turns kerning back on where
the document asks (Chromium would otherwise kern every Latin run). */
.page-wrap,
.doc-page,
.pv-page {
font-kerning: none;
}
.ProseMirror:focus {
outline: none;
}
/* ---- find & replace ---- */
.find-panel {
position: absolute;
top: 8px;
right: 20px;
z-index: 60;
/* the panel overlaps the ribbon-tabs row, which is a window drag region;
* drag regions hit-test by rectangle regardless of z-order and would
* swallow every click (notably the × close button) */
-webkit-app-region: no-drag;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--docs-shadow-menu);
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.workspace {
position: relative;
}
.find-row {
display: flex;
align-items: center;
gap: 6px;
}
.find-input {
width: 200px;
height: 28px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 8px;
font-size: 13px;
outline: none;
}
.find-input:focus {
border-color: var(--word-blue);
}
.find-count {
min-width: 44px;
font-size: 11px;
color: var(--text-dim);
text-align: center;
}
.find-btn {
width: 24px;
height: 24px;
border: none;
background: none;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
line-height: 1;
color: var(--text);
}
.find-btn:hover:not(:disabled) {
background: var(--hover);
}
.find-btn:disabled {
color: var(--border-strong);
cursor: default;
}
.find-close {
font-size: 12px;
}
.find-action {
height: 26px;
padding: 0 10px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
font-size: 12px;
white-space: nowrap;
}
.find-action:hover:not(:disabled) {
background: var(--hover);
}
.find-tabs {
display: flex;
align-items: center;
gap: 2px;
}
.find-tab {
border: none;
background: none;
border-bottom: 2px solid transparent;
padding: 2px 8px 4px;
font-size: 12px;
cursor: pointer;
color: var(--text-dim);
}
.find-tab.on {
color: var(--text);
border-bottom-color: var(--word-blue);
}
.find-spacer {
flex: 1;
}
.find-options {
gap: 4px;
}
.find-results-toggle {
font-variant-numeric: tabular-nums;
}
.find-error,
.find-hint-miss {
font-size: 11px;
color: var(--danger);
}
.find-hint {
font-size: 11px;
color: var(--text-dim);
max-width: 220px;
}
.find-select {
height: 28px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 6px;
font-size: 12px;
background: var(--surface);
color: var(--text);
}
.find-goto-input {
width: 160px;
}
.find-results {
display: flex;
flex-direction: column;
max-height: 240px;
overflow-y: auto;
border-top: 1px solid var(--border);
padding-top: 4px;
width: 360px;
}
.find-result {
border: none;
background: none;
text-align: left;
padding: 3px 6px;
border-radius: 3px;
font-size: 12px;
line-height: 1.4;
cursor: pointer;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.find-result:hover,
.find-result.on {
background: var(--hover);
}
.find-result mark {
background: var(--search-hit-bg);
color: inherit;
border-radius: 2px;
}
.find-result.on mark {
background: var(--search-hit-active-bg);
color: var(--search-hit-active-ink);
}
.find-result-ctx {
color: var(--text-dim);
}
.find-results-note {
font-size: 11px;
color: var(--text-dim);
padding: 4px 6px;
}
.find-action-primary {
background: var(--word-blue);
border-color: var(--word-blue);
color: var(--docs-on-accent);
}
.find-action-primary:hover:not(:disabled) {
background: var(--word-blue-dark, var(--word-blue));
}
.rb-editing {
justify-content: center;
}
.find-action:disabled {
color: var(--border-strong);
cursor: default;
}
.search-hit {
background: var(--docs-paper-hit-bg);
border-radius: 2px;
}
.search-hit-active {
background: var(--docs-paper-hit-active-bg);
color: var(--docs-paper-hit-active-ink);
}
/* ---- autosave toggle (pill in the title bar) ---- */
.autosave-toggle {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
margin-left: 4px;
margin-right: 4px;
-webkit-app-region: no-drag;
user-select: none;
}
.autosave-toggle input {
display: none;
}
.autosave-knob {
width: 26px;
height: 14px;
border-radius: 7px;
background: var(--border-strong);
position: relative;
transition: background 0.15s;
}
.autosave-knob::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--docs-knob-dot);
transition: left 0.15s;
}
.autosave-toggle.on .autosave-knob {
background: var(--word-blue);
}
.autosave-toggle.on .autosave-knob::after {
left: 14px;
}
.autosave-text {
font-size: 11px;
color: var(--text-dim);
white-space: nowrap;
}
/* ---- editable table cells ---- */
.doc-table td[contenteditable='true'] {
cursor: text;
user-select: text;
-webkit-user-select: text;
}
.doc-table td[contenteditable='true']:focus {
outline: 2px solid var(--word-blue);
outline-offset: -2px;
}
/* ---- print / export PDF: only the document itself ---- */
@media print {
html,
body,
#root {
height: auto !important;
overflow: visible !important;
background: none !important;
}
.ribbon,
.status-bar,
.ai-dock,
.nav-pane,
.paste-chip,
.ai-ask-pop,
.ruler,
.find-panel {
display: none !important;
}
/* editor-only affordance chips: Word/LibreOffice print the object (or nothing),
never a type label — the label text must not leak into exported PDFs */
.doc-protected-label {
display: none !important;
}
/* header/footer measuring probe (hf-dom.ts): a body-level .doc-page box.
Chromium print fragmentation counts it as content after the last visible
sheet, materializing that sheet's forced break-after into a trailing blank
page in every grouped mixed-paper export. */
#hf-strip-probe {
display: none !important;
}
/* more editor-only markers whose text leaks into the exported text layer:
transparent ink still emits glyphs into the PDF, so they must not paint at
all. visibility (not display) keeps their layout box — pagination sliced
the canvas with these boxes in the flow. */
.doc-sectbreak-label {
visibility: hidden !important;
}
/* content-control chrome: Word prints the content only, no box or alias tag */
.has-sdt {
outline: none !important;
background: none !important;
}
.has-sdt::before {
display: none !important;
}
/* degraded blocks (passthrough chips): no dashed box or chip fill in print.
Geometry (padding/margin) must stay — pagination sliced the canvas with
these boxes in the flow. */
.doc-protected {
border-color: transparent !important;
background: none !important;
}
.app,
.workspace,
.editor-scroll {
display: block !important;
overflow: visible !important;
height: auto !important;
padding: 0 !important;
background: none !important;
}
.doc-zoom {
zoom: 1 !important;
width: auto !important;
}
.page-wrap {
margin: 0 !important;
}
.doc-page {
width: auto !important;
min-height: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
/* Direct PDF uses the same section page box as the editor. Preview export
already supplies one fixed-size .pv-page per sheet and keeps its clone fluid. */
.app:not(:has(.pagination-preview)) .doc-page {
min-height: var(--page-h, 1056px) !important;
}
.page-break-before {
break-before: page;
}
/* editor-only band: its glyphs must not reach the PDF text layer */
.page-break-before:where(:not(.doc-li))::before,
.doc-li.page-break-before::after {
display: none !important;
}
.doc-field-pagebreak {
break-after: page;
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}
.img-resize-handle,
.doc-image-anchor-marker {
display: none !important;
}
/* opacity:0 chrome still emits glyphs into the PDF text layer */
.doc-move-handle {
display: none !important;
}
/* selection highlight is UI state: the auto-selected first node must not
print a blue plate/border */
.ProseMirror-focused .doc-protected.ProseMirror-selectednode {
border-color: transparent !important;
outline: none !important;
background: none !important;
}
/* continuous-flow printing still delegates to Chromium auto-pagination; canvas page gaps don't take part */
.page-gap,
.page-float-host {
display: none !important;
}
/* margin annotations are canvas-only chrome */
.page-margin-annotations {
display: none !important;
}
/* header/footer guide line is editor chrome: Word never prints it.
Keep the 2px padding so pagination geometry doesn't shift. */
.page-hf-header,
.page-hf-footer {
border-color: transparent !important;
}
.page-hf > * {
opacity: 1 !important;
}
.page-gap::after,
.page-wrap::before,
.page-wrap::after {
display: none !important;
}
.page-wrap.has-markup-area {
padding-right: 0 !important;
padding-left: 0 !important;
}
/* mixed-paper grouped export: pages outside the current group don't print */
.pv-page.pv-print-skip {
display: none !important;
}
/* with the pagination preview open, print its output: each .pv-page is exactly one sheet */
.app:has(.pagination-preview) > *:not(.pagination-preview) {
display: none !important;
}
/* print fragmentation supports flex containers poorly; preview shells all degrade to plain blocks.
The zoom mirrors the screen's device scale (print-zoom.ts): the job prints at
the inverse scale, so font metrics round like the measured canvas did */
.pagination-preview {
position: static;
background: none;
display: block;
zoom: var(--pv-print-zoom, 1);
}
.pv-scroll {
display: block;
}
.pv-toolbar {
display: none !important;
}
.pv-scroll {
overflow: visible;
padding: 0;
}
.pv-page {
margin: 0;
box-shadow: none;
break-after: page;
/* 2px shorter than the paper, so print rounding overflow doesn't produce blank pages */
height: calc(var(--pv-page-h, 1056px) - 2px) !important;
/* monolithic sheet: an anchored box positioned past the paper edge (Word clips it)
otherwise reaches the page fragmentainer and shrinks the whole print job to fit */
contain: size;
}
.pv-page:last-child {
break-after: auto;
}
/* grouped export: the job's last page is rarely :last-child; its forced
break emitted one trailing blank sheet per merged chunk */
.pv-page.pv-print-tail {
break-after: auto;
}
.pv-pageno {
display: none;
}
/* forced breaks are disabled inside the clone, and page-break fields keep placeholders matching canvas measurement */
.pv-clip .page-break-before {
break-before: auto;
}
.pv-clip .doc-field-pagebreak {
break-after: auto;
height: auto;
}
.editor-area {
display: block !important;
overflow: visible !important;
height: auto !important;
}
.split-pane,
.read-exit {
display: none !important;
}
}
/* ================= View tab: view modes / gridlines / split / windows ================= */
/* editor column: document scroller on top, optional split pane below */
.editor-area {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
/* ---- Read mode: chrome hidden, document only, Esc to exit ---- */
.read-mode .ribbon,
.read-mode .ai-dock,
.read-mode .nav-pane,
.read-mode .find-panel,
.read-mode .comments-pane,
.read-mode .split-pane {
display: none !important;
}
.read-mode .editor-scroll {
background: var(--docs-pv-canvas);
padding-top: 44px;
}
.read-exit {
position: fixed;
top: 52px;
right: 24px;
z-index: 60;
height: 30px;
padding: 0 14px;
border: 1px solid var(--border-strong);
border-radius: 15px;
background: var(--surface);
box-shadow: var(--docs-shadow-chip);
font-size: 12px;
color: var(--text);
cursor: pointer;
}
.read-exit:hover {
background: var(--hover);
}
/* ---- Web Layout: document fills the window width, no page chrome ---- */
.view-web {
width: 100%;
}
.view-web .doc-page {
width: auto;
min-height: 0;
box-shadow: none;
padding: 24px 40px 80px;
}
.view-web .page-hf {
display: none;
}
/* ---- Outline view: headings only, still editable ---- */
.view-outline .doc-page > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
display: none;
}
.view-outline .doc-page {
min-height: 400px;
column-count: auto;
}
.view-outline .doc-page h1,
.view-outline .doc-page h2,
.view-outline .doc-page h3,
.view-outline .doc-page h4,
.view-outline .doc-page h5,
.view-outline .doc-page h6 {
position: relative;
padding-left: 22px;
}
.view-outline .doc-page h1 {
margin-left: 0;
}
.view-outline .doc-page h2 {
margin-left: 26px;
}
.view-outline .doc-page h3 {
margin-left: 52px;
}
.view-outline .doc-page h4 {
margin-left: 78px;
}
.view-outline .doc-page h5 {
margin-left: 104px;
}
.view-outline .doc-page h6 {
margin-left: 130px;
}
/* Word outline view marks each heading with a collapse handle. The glyph is a
real DOM widget (editor/outline-view.ts) — the old ::before had no click
target — positioned into the indent gutter the heading padding reserves. */
.view-outline .doc-page .outline-handle {
position: absolute;
left: 0;
top: 0.25em;
color: var(--docs-paper-ink-faint);
font-size: 0.8em;
cursor: pointer;
user-select: none;
}
/* a heading with nothing under it cannot fold: keep the mark, drop the affordance */
.view-outline .doc-page .outline-handle.is-leaf {
cursor: default;
opacity: 0.55;
}
/* folding hides the deeper heading rows of the folded heading; body blocks are
already hidden by the :not(h1…) rule above */
.view-outline .doc-page .outline-collapsed {
display: none;
}
/* ---- Gridlines: alignment grid inside the text area (content-box = inside margins) ---- */
.show-grid .doc-page {
background-image:
linear-gradient(to right, var(--docs-paper-grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--docs-paper-grid) 1px, transparent 1px);
background-size: 24px 24px;
background-origin: content-box;
background-clip: content-box;
}
/* ---- Split: read-only second pane with independent scrolling ---- */
.split-pane {
height: 42%;
min-height: 160px;
flex: none;
display: flex;
flex-direction: column;
border-top: 3px solid var(--border-strong);
background: var(--canvas);
}
.split-pane-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 12px;
font-size: 11.5px;
color: var(--text-dim);
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.split-pane-close {
border: none;
background: none;
cursor: pointer;
font-size: 15px;
line-height: 1;
color: var(--text);
padding: 0 4px;
}
.split-pane-close:hover {
color: var(--word-blue);
}
.split-pane-scroll {
flex: 1;
overflow-y: auto;
padding: 18px 24px 60px;
}
/* preview copy: not interactive (clicks/links disabled) */
.split-doc {
pointer-events: none;
}
/* ---- Design → Watermark: diagonal ghost text across the page ---- */
.page-watermark {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-35deg);
font-size: 84px;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--docs-paper-watermark);
white-space: nowrap;
overflow: hidden;
pointer-events: none;
user-select: none;
}
/* ---- Design → Themes/Colors: accent color preview dots in dropdowns ---- */
.theme-accent-row {
display: inline-flex;
gap: 2px;
margin-right: 8px;
vertical-align: middle;
}
.theme-accent-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
border: 1px solid var(--docs-swatch-outline);
}
/* ---- References → Footnotes/Endnotes: reference marker + page-bottom notes area ---- */
/* bare superscript number inheriting body ink (Word parity: brackets/color would leak into
exports and change line widths); accent is a hover/selection-only affordance */
.doc-note-ref {
cursor: default;
/* Word's reference-mark superscript is ~65% of the run size; the UA default
(font-size:smaller) rendered it visibly larger and taller than Word */
font-size: 0.65em;
}
.doc-note-ref:hover {
color: var(--docs-paper-accent);
}
.ProseMirror-focused .doc-note-ref.ProseMirror-selectednode {
color: var(--docs-paper-accent);
outline: 2px solid var(--word-blue);
border-radius: 2px;
}
/* ---- Phonetic guide (w:ruby): native ruby, kept from stretching the line ---- */
ruby.doc-ruby {
ruby-position: over;
}
ruby.doc-ruby rt {
font-size: 0.5em;
line-height: 1;
}
.ProseMirror-focused ruby.doc-ruby.ProseMirror-selectednode {
outline: 2px solid var(--word-blue);
border-radius: 2px;
}
/* ---- Inline equations: atomic MathML node flowing with the text ---- */
.doc-inline-math {
display: inline-block;
/* The atom must not restart its paragraph's first-line indent or alignment. */
text-indent: 0;
text-align: left;
vertical-align: baseline;
padding: 0 1px;
border-radius: 2px;
cursor: default;
}
.doc-inline-math:hover {
background: color-mix(in srgb, var(--word-blue) 10%, transparent);
}
.ProseMirror-focused .doc-inline-math.ProseMirror-selectednode {
outline: 2px solid var(--word-blue);
background: color-mix(in srgb, var(--word-blue) 14%, transparent);
}
.doc-inline-math math {
font-size: 1em;
/* a real OpenType MATH face: the run's Cambria Math alias (Caladea) has no
MATH table, so large operators, stacked limits and radicals collapse */
font-family: 'Cambria Math', 'STIX Two Math', 'Latin Modern Math', serif;
}
/* Word sizes a math line by Cambria Math's font box (ascent 0.95em, descent
0.222em) around every element; Chromium's MathML layout works from glyph
ink, so lines and stacked constructs come out shorter. The strut and the
script/limit/numerator paddings restore the measured Word extents
(sub bottom +0.1em, limits +0.38/+0.29em gap and +0.25/+0.22em box,
display numerator +0.117em = Cambria vs STIX FractionNumeratorDisplayStyleShiftUp) */
.doc-inline-math::before {
content: '';
display: inline-block;
width: 0;
height: 1.172em;
vertical-align: -0.222em;
}
:is(.doc-inline-math, .doc-formula-math) :is(msub, msubsup) > :nth-child(2) {
padding-bottom: 0.1em;
}
:is(.doc-inline-math, .doc-formula-math) :is(mover:not([accent]), munderover) > :last-child {
padding-top: 0.25em;
padding-bottom: 0.38em;
}
:is(.doc-inline-math, .doc-formula-math) :is(munder, munderover) > :nth-child(2) {
padding-top: 0.29em;
padding-bottom: 0.22em;
}
:is(.doc-inline-math, .doc-formula-math) math[displaystyle='true'] mfrac > :first-child,
.doc-formula-math mfrac > :first-child {
padding-bottom: 0.117em;
}
/* an oMathPara line under an auto multiple adds the (m - 1) x single-line
extra below the equation like a picture-only paragraph (cf. .doc-p-pic) */
.doc-inline-math-display {
padding-bottom: calc((var(--doc-line-mult, 1) - 1) * var(--doc-line-factor, 1.2) * 1em);
}
/* EQ field layouts draw in the paragraph face like Word, not the UA math font */
.doc-field-math math {
font-family: inherit;
}
.doc-formula-edit {
position: absolute;
top: 2px;
right: 2px;
padding: 1px 6px;
font-size: 11px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
color: var(--text-dim);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s;
}
.doc-protected-formula {
position: relative;
}
.doc-protected-formula:hover .doc-formula-edit {
opacity: 1;
}
.doc-formula-edit:hover {
background: var(--active-bg);
color: var(--text);
}
.page-notes {
position: relative;
box-sizing: border-box;
width: var(--last-page-w, var(--page-w, 816px));
margin: -100px auto 0;
margin-left: var(--last-page-x, auto);
padding: 8px 96px 28px;
background: var(--page-bg, var(--docs-paper));
font-size: 9pt;
line-height: 1.5;
color: var(--docs-paper-ink-dim);
}
/* canvas twin of the pv separators: Word's 2in rule, drawn at the row's bottom */
.page-notes::before {
content: '';
display: block;
width: min(2in, 100%);
height: 11px;
border-bottom: 1px solid var(--docs-paper-ink-faint);
margin-bottom: 6px;
}
/* endnotes follow the footnote block as their own area: cancel the pull-up overlap and stack below */
.page-notes + .page-endnotes {
margin-top: 0;
padding-top: 0;
}
/* Word: endnotes sit right after the last body line, not at the page bottom —
anchored at the measured flow end (inline top), over the paper's padded tail */
.page-endnotes-anchored {
position: absolute;
left: var(--last-page-x, 0px);
width: var(--last-page-w, 100%);
margin: 0;
padding-top: 8px;
background: none;
}
.page-note {
display: flex;
align-items: baseline;
gap: 6px;
padding: 1px 0;
}
/* Word parity: area markers are superscript body-ink; the flex row ignores
vertical-align, so raise off the shared baseline instead */
.page-note sup {
flex: none;
position: relative;
top: -0.33em;
font-size: 0.65em;
}
.page-note-text {
flex: 1;
white-space: pre-wrap;
word-break: break-word;
}
.page-note-btn {
flex: none;
border: none;
background: none;
padding: 0 3px;
font-size: 11px;
color: var(--docs-paper-ink-faint);
cursor: pointer;
visibility: hidden;
}
.page-note:hover .page-note-btn {
visibility: visible;
}
.page-note-btn:hover {
color: var(--word-blue);
}
/* ---- References → Index: XE marks (hidden field codes: Word shows nothing
unless formatting marks are on, so the chip only appears with .show-marks) ---- */
.doc-xe-mark {
display: inline-block;
font-size: 0;
line-height: 0;
vertical-align: baseline;
cursor: default;
}
.show-marks .doc-xe-mark {
font-size: 9px;
line-height: 1.3;
color: var(--docs-paper-xe-ink);
background: var(--docs-paper-xe-bg);
border: 1px dashed var(--docs-paper-xe-border);
border-radius: 2px;
padding: 0 3px;
margin: 0 1px;
}
.show-marks .doc-xe-mark::before {
content: 'XE:' attr(data-xe-term);
}
.ProseMirror-focused .doc-xe-mark.ProseMirror-selectednode {
outline: 2px solid var(--word-blue);
}
/* ---- Context menu: editor right-click menu ---- */
.ctx-menu {
position: fixed;
z-index: 200;
padding: 5px 0;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: var(--docs-shadow-ctx);
font-size: 13px;
}
.ctx-item {
display: flex;
align-items: center;
width: 100%;
border: none;
background: none;
padding: 6px 14px;
font-size: 13px;
color: var(--text);
cursor: pointer;
text-align: left;
white-space: nowrap;
}
.ctx-item:hover:not(:disabled) {
background: var(--word-blue);
color: var(--docs-on-accent);
}
.ctx-item:hover:not(:disabled) .ctx-key {
color: var(--docs-on-accent-dim);
}
.ctx-item:disabled {
color: var(--text-dim);
opacity: 0.55;
cursor: default;
}
.ctx-label {
flex: 1;
margin-right: 28px;
}
.ctx-ico {
display: inline-flex;
width: 18px;
margin-right: 6px;
color: var(--text-dim);
}
.ctx-key {
color: var(--text-dim);
font-size: 12px;
}
.ctx-arrow {
margin-left: 6px;
color: var(--text-dim);
}
.ctx-sep {
height: 1px;
margin: 4px 10px;
background: var(--border);
}
.ctx-item-wrap {
position: relative;
}
.ctx-submenu {
position: absolute;
top: -5px;
left: calc(100% - 4px);
min-width: 150px;
padding: 5px 0;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: var(--docs-shadow-ctx);
}
.ctx-item-strong .ctx-label {
font-weight: 600;
}
.ctx-submenu-scroll {
max-height: 320px;
overflow-y: auto;
}
/* ---- Font / Paragraph dialogs ---- */
.font-dialog-row {
display: flex;
gap: 12px;
align-items: flex-end;
}
.font-dialog-row > label {
flex: 1;
min-width: 0;
}
.font-check {
display: flex !important;
align-items: center;
gap: 5px;
white-space: nowrap;
flex: none !important;
padding-bottom: 8px;
}
.font-check input[type='checkbox'] {
display: inline-block;
width: auto;
height: auto;
margin: 0;
}
.font-color-input {
padding: 2px !important;
cursor: pointer;
}
.modal.font-dialog {
width: 520px;
}
.dlg-tabs {
display: flex;
gap: 2px;
margin: -4px 0 14px;
border-bottom: 1px solid var(--border);
}
.dlg-tabs button {
border: 0;
background: none;
padding: 6px 12px;
font-size: 13px;
color: var(--text-dim);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
}
.dlg-tabs button:hover {
color: var(--text);
}
.dlg-tabs button.active {
color: var(--text);
border-bottom-color: var(--accent);
}
.font-effects {
flex-wrap: wrap;
row-gap: 0;
}
.font-by {
flex: 0 0 110px !important;
}
.font-kern {
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
color: var(--text-dim);
}
.font-kern .font-check {
padding-bottom: 0;
}
.font-kern input[type='number'] {
width: 72px;
margin-top: 0;
}
.font-preview {
margin: 4px 0 14px;
padding: 14px 10px;
border: 1px solid var(--border);
border-radius: 4px;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.dlg-tabs {
display: flex;
gap: 4px;
margin: -6px 0 12px;
border-bottom: 1px solid var(--border);
}
.dlg-tabs button {
padding: 6px 12px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: var(--text-dim);
font-size: 13px;
cursor: pointer;
}
.dlg-tabs button:hover {
color: var(--text);
}
.dlg-tabs button.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.para-checks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 16px;
margin: 4px 0 8px;
}
.para-checks .font-check {
padding-bottom: 4px;
}
.para-num {
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
}
.para-num input {
margin-top: 0 !important;
}
.para-unit {
color: var(--text-dim);
font-size: 12px;
}
.len-input {
width: 72px;
}
.prefs-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 12px 0 4px;
}
.prefs-field select {
align-self: flex-start;
min-width: 180px;
}
.prompt-textarea {
display: block;
width: 100%;
margin-top: 4px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 8px 10px;
font-size: 13px;
font-family: inherit;
outline: none;
resize: vertical;
}
.prompt-textarea:focus {
border-color: var(--word-blue);
}
/* ---- Draw (ink annotations) ---- */
.ink-overlay {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.ink-overlay.ink-active {
pointer-events: auto;
touch-action: none;
}
.ink-tool-pen,
.ink-tool-highlighter,
.ink-tool-pencil {
cursor: crosshair;
}
.ink-tool-eraser {
cursor: cell;
}
.ink-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.ink-settings {
flex-direction: column;
gap: 4px;
justify-content: center;
}
/* 6px so the active swatch's outline (2px + 1px offset) keeps clear air */
.ink-swatches {
display: flex;
gap: 6px;
}
.ink-swatch {
width: 16px;
height: 16px;
border: 1px solid var(--docs-swatch-outline-strong);
border-radius: 3px;
cursor: pointer;
padding: 0;
}
.ink-swatch.active {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.ink-more-wrap {
margin-left: 4px;
}
.ink-more-swatch {
display: inline-flex;
align-items: center;
gap: 2px;
height: 20px;
padding: 0 2px;
border: 1px solid transparent;
border-radius: 3px;
background: none;
cursor: pointer;
color: var(--text-dim);
}
.ink-more-swatch:hover,
.ink-more-swatch.active {
background: var(--hover);
border-color: var(--accent);
}
.ink-widths {
display: flex;
gap: 3px;
}
.ink-width {
width: 24px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 3px;
background: none;
cursor: pointer;
padding: 0;
}
.ink-width:hover {
background: var(--hover);
}
.ink-width.active {
border-color: var(--accent);
background: var(--hover);
}
.ink-width-dot {
border-radius: 50%;
display: inline-block;
}
/* Draw ▸ Pens gallery: one slot per remembered pen, Word style */
.ink-pens {
gap: 2px;
}
.ink-pen-slot {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 3px;
width: 44px;
height: 58px;
padding: 4px 4px 6px;
border: 1px solid transparent;
border-radius: 4px;
background: none;
cursor: pointer;
color: var(--text-dim);
}
.ink-pen-slot:not(:disabled):hover {
background: var(--hover);
}
.ink-pen-slot.active {
background: var(--hover);
border-color: var(--accent);
}
.ink-pen-slot:disabled {
opacity: 0.45;
cursor: default;
}
.ink-pen-glyph {
display: inline-flex;
}
.ink-pen-bar {
width: 28px;
border-radius: 2px;
}
.ink-pen-slot > .rb-caret-svg {
position: absolute;
right: 2px;
bottom: 2px;
}
.ink-pen-pop {
min-width: 190px;
padding: 8px;
}
.ink-pen-preview {
display: flex;
align-items: center;
height: 36px;
padding: 0 6px;
border-bottom: 1px solid var(--border);
margin-bottom: 6px;
}
.ink-pen-preview > span {
display: block;
width: 100%;
border-radius: 2px;
}
.ink-pen-section {
font-size: 12px;
color: var(--text-dim);
margin: 6px 0 4px;
}
.ink-pen-grid {
display: grid;
grid-template-columns: repeat(4, 20px);
gap: 6px;
padding: 2px;
}
.ink-pen-grid .ink-swatch {
width: 20px;
height: 20px;
}
.layout-menu .ink-pen-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
width: 100%;
border: none;
background: none;
padding: 7px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
color: var(--text);
text-align: left;
position: relative;
}
.layout-menu .ink-pen-item:not(:disabled):hover {
background: var(--hover);
}
.layout-menu .ink-pen-item:disabled {
opacity: 0.45;
cursor: default;
}
.ink-pen-more {
margin-top: 8px;
border-top: 1px solid var(--border);
border-radius: 0 0 4px 4px;
}
.ink-pen-more input[type='color'] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
/* Page Number Format dialog */
.pgnum-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 10px 0;
font-size: 13px;
}
.pgnum-row select,
.pgnum-row input {
width: 180px;
padding: 4px 6px;
}
.pgnum-hint {
font-size: 12px;
color: var(--text-dim);
margin: 6px 0 0;
}
/* table border / size tools */
/* side by side: stacked, the three rows outgrow the fixed 80px band */
.table-tool-borders {
flex-direction: row;
align-items: center;
gap: 8px;
}
/* Border Styles / Line Weight / Pen Color stacked beside Borders ▾ (Word) */
.table-border-opts {
display: flex;
flex-direction: column;
gap: 2px;
align-self: center;
}
.table-tool-group .table-pen-color {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 4px;
box-sizing: border-box;
width: 72px;
height: 20px;
min-height: 20px;
padding: 0 6px;
border-color: var(--border);
background: var(--surface);
}
.table-tool-group .table-pen-color.active {
border-color: var(--border-strong);
background: var(--hover);
}
.table-pen-swatch {
flex: 1;
height: 10px;
border: 1px solid var(--docs-swatch-outline);
}
.table-size-inputs {
display: flex;
flex-direction: column;
/* height/width rows + the reset button must fit in the 84px ribbon-body; too much line spacing stretches it and causes jumps */
gap: 2px;
}
.table-size-inputs label {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-dim);
}
.table-size-inputs input {
width: 72px;
padding: 2px 4px;
font-size: 12px;
}
.table-tool-check {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-dim);
white-space: nowrap;
}
.table-tool-button.active {
background: var(--accent-soft);
}
/* run-level format revision (w:rPrChange): amber underline hint */
.has-rpr-change {
text-decoration: underline wavy var(--docs-paper-rpr);
text-decoration-skip-ink: none;
text-underline-offset: 3px;
}
/* inline table-break cut point: zero-height dashed page-break marker (spans the page, takes no layout height) */
.page-gap-cut {
display: inline-block;
width: 0;
height: 0;
position: relative;
pointer-events: none;
}
/* safety net: a cut marker misplaced as a direct table/row child would otherwise be
wrapped in an anonymous table row, adding one line-height of phantom table height
that skews pagination measurement (#86 line shear / #93 page-count inflation) */
table > .page-gap-cut,
tbody > .page-gap-cut,
tr > .page-gap-cut {
display: none;
}
.page-gap-cut::before {
content: '';
position: absolute;
top: 0;
left: -100vw;
width: 200vw;
border-top: 2px dashed var(--docs-gap-cut);
}
/* cut markers for anchors inside read-only nested-table DOM (no PM position):
absolute overlays on the page wrap instead of inline widgets */
.page-cut-overlays {
position: absolute;
inset: 0;
pointer-events: none;
}
.page-cut-overlay {
position: absolute;
left: 0;
width: 100%;
}
.page-cut-overlay::before {
left: 0;
width: 100%;
}
/* Word-style margin annotations: comment bubbles right of the paper + revision
change bars in the left page margin (absolute overlay, no layout height) */
.page-margin-annotations {
position: absolute;
inset: 0;
pointer-events: none;
}
/* the markup column takes real wrap width so captures include it; the paper
(in-flow, content box) keeps its position */
.page-wrap.has-markup-area {
padding-right: var(--markup-w, 0px);
}
/* Only wrap-level strips need markup padding compensation. Gap strips are
positioned inside the paper and must keep their own centering. */
.page-wrap.has-markup-area > .page-hf {
left: calc((100% - var(--markup-w, 0px)) / 2);
}
/* box-hosting edge strips center by offset (no translate, see .page-hf-has-boxes) on the padded wrap */
.page-wrap.has-markup-area > .page-hf.page-hf-has-boxes {
left: calc(
(100% - var(--markup-w, 0px) - var(--section-content-w, calc(var(--page-w, 816px) - 120px))) / 2
);
}
.page-wrap.has-markup-area .page-watermark {
right: var(--markup-w, 0px);
}
.page-wrap.has-markup-area.markup-left {
padding-right: 0;
padding-left: var(--markup-w, 0px);
}
.page-wrap.has-markup-area.markup-left:not(.paper-mixed)::before,
.page-wrap.has-markup-area.markup-left:not(.paper-mixed)::after {
left: calc((100% + var(--markup-w, 0px) - var(--page-w, 816px)) / 2);
}
.page-wrap.has-markup-area.markup-left > .page-hf {
left: calc((100% + var(--markup-w, 0px)) / 2);
}
.page-wrap.has-markup-area.markup-left > .page-hf.page-hf-has-boxes {
left: calc(
(100% + var(--markup-w, 0px) - var(--section-content-w, calc(var(--page-w, 816px) - 120px))) / 2
);
}
.page-wrap.has-markup-area.markup-left .page-watermark {
right: 0;
left: var(--markup-w, 0px);
}
.change-bar {
position: absolute;
width: 2px;
background: var(--rev-bar-ink, var(--docs-paper-rev-ink));
}
/* Simple Markup: Word's fixed-red changed-line bar, clickable (switches to All Markup) */
.rev-display-simple .change-bar {
background: var(--rev-bar-ink, var(--docs-revision-bar));
pointer-events: auto;
cursor: pointer;
}
.rev-display-simple .change-bar::before {
content: '';
position: absolute;
inset: -2px -6px;
}
.comment-balloon {
position: absolute;
width: 18px;
height: 18px;
padding: 1px;
border: 0;
border-radius: 3px;
background: transparent;
color: var(--rev-comment-ink, var(--docs-paper-comment-line));
pointer-events: auto;
cursor: pointer;
}
.comment-balloon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.3;
stroke-linejoin: round;
}
.comment-balloon:hover {
background: var(--docs-paper-comment-bg);
}
/* selected thread: Word fills the anchor glyph */
.comment-balloon.on svg path:first-child {
fill: currentColor;
}
.comment-balloon.on svg path:last-child {
stroke: var(--surface);
}
.comment-leaders {
position: absolute;
inset: 0;
overflow: visible;
}
.markup-no-lines .comment-leaders,
.markup-no-lines .pv-comment-leaders {
display: none;
}
.comment-leaders path {
fill: none;
stroke: var(--rev-comment-ink, var(--docs-paper-comment-line));
stroke-dasharray: 3 2;
}
/* Word's markup area: a paper-coloured strip glued to the page, divided by a hairline */
.markup-strip {
position: absolute;
box-sizing: border-box;
background: var(--docs-paper);
border-left: 1px solid var(--border);
}
.page-wrap.markup-left .markup-strip {
border-left: 0;
border-right: 1px solid var(--border);
}
.comment-bubble {
position: absolute;
box-sizing: border-box;
pointer-events: auto;
cursor: pointer;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
box-shadow: var(--docs-shadow-chip);
font-size: 11px;
line-height: 1.4;
color: var(--text);
}
.comment-bubble .comment-card-head {
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
.comment-bubble .comment-avatar {
width: 22px;
height: 22px;
font-size: 9px;
}
.comment-bubble .comment-author {
font-size: 11px;
}
.comment-bubble .comment-when {
font-size: 9.5px;
}
.comment-bubble .comment-text {
margin-left: 28px;
}
.comment-bubble .comment-reply {
margin: 6px 0 0 0;
padding: 6px 0 0 0;
border-top: 1px solid var(--border);
font-size: 11px;
}
.comment-bubble .comment-reply-input {
display: none;
margin-top: 8px;
padding: 5px 10px;
border-radius: 4px;
font-size: 11px;
}
.comment-bubble.active .comment-reply-input,
.comment-bubble.comment-popup .comment-reply-input {
display: block;
}
.comment-bubble .comment-card-actions {
visibility: hidden;
}
.comment-bubble:hover .comment-card-actions,
.comment-bubble.active .comment-card-actions,
.comment-bubble.comment-popup .comment-card-actions,
.comment-bubble .comment-card-actions:has([aria-expanded='true']) {
visibility: visible;
}
.comment-bubble .comment-resolve,
.comment-bubble .comment-more,
.comment-bubble .comment-like {
width: 18px;
height: 18px;
font-size: 12px;
}
.comment-like {
width: 22px;
height: 22px;
border: none;
background: none;
border-radius: 4px;
color: var(--text-dim);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.comment-like:hover {
background: var(--hover);
color: var(--text);
}
.comment-like.on {
color: var(--accent);
}
.comment-like.on svg {
fill: currentColor;
}
.comment-bubble .comment-edit-input {
width: 100%;
box-sizing: border-box;
min-height: 44px;
margin-top: 2px;
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: 10px;
resize: vertical;
}
.comment-bubble .comment-compose-actions button {
font-size: 10px;
padding: 2px 8px;
}
.comment-bubble.active {
border-color: var(--accent);
box-shadow: var(--docs-shadow-menu);
}
/* thread popped up from its anchor glyph while Show Comments is off: floats over the margin */
.comment-bubble.comment-popup {
z-index: 4;
box-shadow: var(--docs-shadow-menu);
}
/* revision balloons (Deleted:/Formatted:) sit in the markup strip as Word draws them:
a revision-ink bar and bare text, no card frame */
.rev-bubble {
cursor: default;
background: none;
border: 0;
border-left: 3px solid var(--docs-paper-rev-ink);
border-radius: 0;
box-shadow: none;
padding: 2px 6px 2px 8px;
font-size: 10px;
line-height: 1.35;
}
.rev-bubble-del {
border-left-color: var(--rev-del-ink, var(--docs-paper-rev-ink));
}
.rev-bubble-fmt {
border-left-color: var(--rev-fmt-ink, var(--docs-paper-rev-ink));
}
.rev-bubble .rev-bubble-head {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 1px;
}
.rev-bubble .rev-bubble-author {
font-weight: 700;
}
.rev-bubble .rev-bubble-when {
flex: none;
opacity: 0.7;
font-size: 0.9em;
}
.rev-bubble .rev-bubble-label {
font-weight: 700;
}
.rev-bubble .rev-bubble-text {
white-space: pre-wrap;
word-break: break-word;
}
.rev-bubble-del .rev-bubble-text {
text-decoration: line-through;
}
/* nested table inside a cell (read-only child table) */
/* anchored shapes/textboxes inside a cell: in-flow spacer sized to the boxes'
extent (Word grows the row), boxes positioned absolutely within it */
.doc-cell-boxes {
position: relative;
float: left;
width: 0;
overflow: visible;
}
/* the zero-width host must not collapse an absolutely-positioned box:
its own width (from the anchor extent) wins over the 100% cap */
.doc-cell-boxes > .doc-textbox {
max-width: none;
}
.doc-nested-table .doc-table {
max-width: 100%;
}
/* picture-only cell paragraph (line-height 0 inline): the image sits on the line bottom */
.doc-table .doc-p-picture > .doc-inline-img {
vertical-align: bottom;
}
/* list library galleries (bullets/numbering/multilevel) */
.list-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 6px;
min-width: 180px;
}
/* doubled class strength: .layout-menu button (0,1,1) sets border: none and
would erase the card frame (bit the old gallery too) */
.list-gallery .list-gallery-card {
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
padding: 6px 8px;
font-size: 13px;
cursor: pointer;
text-align: left;
white-space: nowrap;
}
.list-gallery .list-gallery-card:hover {
border-color: var(--accent);
}
/* Word-style bullet/numbering library: header row, a "None" card, bordered
preview cards and a define-new footer (matches the multilevel gallery) */
.list-gallery-word {
grid-template-columns: repeat(3, 1fr);
min-width: 232px;
}
.list-gallery-title {
grid-column: 1 / -1;
padding: 2px 2px 0;
font-size: 11px;
color: var(--text-dim);
}
.list-gallery-word .list-gallery-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 56px;
}
.list-gallery-word .list-gallery-card.selected {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
background: var(--hover);
}
.list-gallery-none {
font-size: 13px;
}
.list-gallery-glyph {
font-size: 17px;
}
.list-gallery-word .list-gallery-preview {
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 5px;
padding: 8px 9px;
}
.list-gallery-preview-row {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
line-height: 1;
color: var(--text);
}
.list-gallery-preview-prefix {
min-width: 16px;
text-align: left;
white-space: nowrap;
}
.list-gallery-preview-line {
flex: 1;
height: 2px;
border-radius: 1px;
background: var(--border);
}
.list-gallery-multi {
grid-template-columns: repeat(3, 1fr);
min-width: 320px;
}
.list-gallery-card-multi {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 10px;
color: var(--text-dim);
}
.list-gallery .list-gallery-define {
grid-column: 1 / -1;
border: none;
border-top: 1px solid var(--border);
background: none;
padding: 6px 8px;
font-size: 12px;
cursor: pointer;
text-align: left;
}
.list-gallery .list-gallery-define:hover {
color: var(--accent);
}
/* Change List Level row inside the bullet / numbering / multilevel galleries */
.list-gallery-levels {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 3px;
flex-wrap: wrap;
padding: 2px 2px 4px;
border-top: 1px solid var(--border);
}
.list-gallery-levels .list-gallery-title {
flex: 1 0 100%;
padding-top: 4px;
}
.list-gallery .list-gallery-level {
width: 22px;
height: 22px;
padding: 0;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
font-size: 11px;
color: var(--text);
cursor: pointer;
}
.list-gallery .list-gallery-level:hover:not(:disabled) {
border-color: var(--accent);
}
.list-gallery .list-gallery-level.selected {
border-color: var(--accent);
background: var(--hover);
}
.list-gallery .list-gallery-level:disabled {
opacity: 0.45;
cursor: default;
}
.spacing-menu .spacing-menu-sep {
height: 1px;
margin: 4px 0;
background: var(--border);
}
/* List dialogs: numbering value, indents, define bullet / number / multilevel */
.modal.list-dialog {
width: 460px;
}
.list-dialog .fld {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
margin-bottom: 10px;
}
.list-dialog .fld > span:first-child {
flex: 0 0 150px;
color: var(--text-dim);
}
.list-dialog .fld input:not([type='checkbox']):not([type='radio']):not([type='color']) {
flex: 1;
min-width: 0;
padding: 4px 6px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
}
.list-dialog .list-dialog-num input {
flex: 0 0 96px;
}
.list-dialog .font-check {
padding-bottom: 6px;
}
.list-dialog .font-check input[type='radio'],
.list-dialog .font-check input[type='checkbox'] {
display: inline-block;
width: 16px;
height: 16px;
margin: 0;
flex: none;
accent-color: var(--accent);
}
.list-dialog .list-dialog-indent {
padding-left: 22px;
}
.list-dialog-color {
display: inline-flex;
align-items: center;
gap: 8px;
}
.list-dialog-color input[type='color'] {
width: 32px;
height: 24px;
padding: 0;
border: 1px solid var(--border);
border-radius: 4px;
background: none;
}
.list-dialog-link {
border: none;
background: none;
color: var(--accent);
font-size: 12px;
cursor: pointer;
}
.list-dialog-link:disabled {
color: var(--text-dim);
cursor: default;
}
.list-dialog-font {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 12px;
padding-top: 4px;
}
.list-dialog-font .fld:first-child {
grid-column: 1 / -1;
}
.list-dialog-font .fld > span:first-child {
flex-basis: 70px;
}
.list-dialog-preview {
margin: 8px 0 4px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--doc-bg, var(--surface));
display: flex;
flex-direction: column;
gap: 8px;
}
.list-dialog-preview-row {
display: flex;
align-items: center;
gap: 8px;
}
.list-dialog-preview-marker {
min-width: 28px;
font-size: 13px;
white-space: nowrap;
}
.list-dialog-preview-pic {
width: 12px;
height: 12px;
object-fit: contain;
}
.list-dialog-preview-line {
display: flex;
gap: 8px;
font-size: 13px;
margin: 6px 0 2px;
}
.list-dialog-symbols {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3px;
margin-bottom: 10px;
max-height: 150px;
overflow-y: auto;
}
.list-dialog-symbols button {
height: 28px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
color: var(--text);
font-size: 15px;
cursor: pointer;
}
.list-dialog-symbols button:hover {
border-color: var(--accent);
}
.list-dialog-symbols button.selected {
border-color: var(--accent);
background: var(--hover);
}
.list-dialog-picture {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.list-dialog-file input[type='file'] {
display: none;
}
.list-dialog-file-button {
display: inline-block;
padding: 5px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
font-size: 13px;
cursor: pointer;
}
.list-dialog-file-button:hover {
border-color: var(--accent);
}
.list-dialog-hint {
font-size: 12px;
color: var(--text-dim);
}
.modal.list-define-modal {
width: 720px;
max-width: 92vw;
}
.list-define-layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
}
.list-define-levels {
display: flex;
flex-direction: column;
gap: 2px;
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px;
max-height: 360px;
overflow-y: auto;
}
.list-define-levels button {
display: flex;
align-items: center;
gap: 6px;
border: none;
border-radius: 4px;
background: none;
color: var(--text);
font-size: 12px;
text-align: left;
padding: 4px 6px;
cursor: pointer;
}
.list-define-levels button:hover {
background: var(--hover);
}
.list-define-levels button.selected {
background: var(--active-bg);
}
.list-define-level-no {
flex: 0 0 14px;
color: var(--text-dim);
}
.list-define-level-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-define-fields .fld > span:first-child {
flex-basis: 130px;
}
.list-define-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 12px;
}
.list-define-grid .fld > span:first-child {
flex-basis: 110px;
}
/* table style gallery cards */
.table-style-gallery {
display: flex;
align-items: center;
gap: 3px;
flex-wrap: nowrap;
max-width: 500px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.table-style-gallery::-webkit-scrollbar {
display: none;
}
.table-style-card {
display: flex;
box-sizing: border-box;
flex: 0 0 76px;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 4px 5px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
cursor: pointer;
font-size: 10px;
color: var(--text-dim);
}
.table-style-card span:last-child {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 68px;
}
.table-style-card:hover {
border-color: var(--border);
background: var(--hover);
}
.table-style-card.active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--text);
}
.table-style-card-grid {
box-sizing: border-box;
width: 44px;
height: 24px;
border: 1px solid var(--docs-tstyle-border);
border-top: 5px solid var(--docs-tstyle-header);
background: repeating-linear-gradient(var(--surface) 0 4px, var(--docs-tstyle-row) 4px 8px);
border-radius: 3px;
box-shadow: var(--docs-shadow-chip);
}
.table-style-card-grid.plain {
border-top: 1px solid var(--docs-tstyle-border);
background: var(--surface);
}
.table-properties-dialog {
width: min(620px, calc(100vw - 48px));
max-height: calc(100vh - 64px);
overflow-y: auto;
}
.table-properties-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.table-properties-header-icon {
display: inline-flex;
flex: 0 0 40px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 11px;
background: var(--accent-soft);
color: var(--accent);
}
.table-properties-header .modal-desc {
margin: 2px 0 0;
}
.table-properties-card {
margin-top: 10px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
}
.table-properties-dialog h3 {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.table-properties-segments {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3px;
padding: 3px;
border-radius: 9px;
background: var(--hover);
}
.table-properties-segment {
position: relative;
min-width: 0;
cursor: pointer;
}
.table-properties-segment input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.table-properties-segment span {
display: flex;
min-height: 32px;
padding: 0 8px;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 7px;
color: var(--text-dim);
font-size: 12px;
text-align: center;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
}
.table-properties-segment input:checked + span {
border-color: var(--border);
background: var(--surface);
box-shadow: var(--docs-shadow-chip);
color: var(--text);
}
.table-properties-segment input:focus-visible + span {
box-shadow: 0 0 0 3px var(--docs-focus-ring);
}
.table-properties-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 16px;
margin-top: 12px;
}
.table-properties-grid > label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--text-dim);
font-size: 12px;
}
.table-properties-grid label > span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.table-properties-grid input {
box-sizing: border-box;
width: 70px;
height: 30px;
padding: 0 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
outline: none;
}
.table-properties-grid input:hover {
border-color: var(--border-strong);
}
.table-properties-grid input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--docs-focus-ring);
}
.table-properties-margin-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 148px;
align-items: center;
gap: 20px;
}
.table-properties-margin-layout .table-properties-grid {
margin-top: 0;
}
.table-margin-preview {
position: relative;
box-sizing: border-box;
width: 132px;
height: 96px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--hover);
}
.table-margin-preview-cell {
position: absolute;
inset: 24px 30px;
border: 1px solid var(--accent);
border-radius: 4px;
background: var(--accent-soft);
}
.table-margin-value {
position: absolute;
color: var(--text-dim);
font-size: 10px;
line-height: 1;
}
.table-margin-value.top,
.table-margin-value.bottom {
left: 50%;
transform: translateX(-50%);
}
.table-margin-value.top {
top: 8px;
}
.table-margin-value.bottom {
bottom: 8px;
}
.table-margin-value.left,
.table-margin-value.right {
top: 50%;
transform: translateY(-50%);
}
.table-margin-value.left {
left: 8px;
}
.table-margin-value.right {
right: 8px;
}
@media (max-width: 620px) {
.table-properties-segments {
grid-template-columns: 1fr;
}
.table-properties-margin-layout {
grid-template-columns: 1fr;
}
.table-margin-preview {
display: none;
}
}
/* comment threads: replies and resolution */
.comment-thread {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
padding: 10px;
}
.comment-thread:hover {
border-color: var(--docs-comment-accent);
}
.comment-thread.active {
border-color: var(--docs-comment-accent);
box-shadow: 0 0 0 1px var(--docs-comment-accent);
}
.comment-thread.resolved {
opacity: 0.55;
}
.comments-resolved-group {
margin-top: 4px;
}
.comments-resolved-toggle {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
padding: 6px 8px;
border: none;
background: none;
font-size: 12px;
color: var(--text-dim);
cursor: pointer;
text-align: left;
}
.comments-resolved-toggle:hover {
background: var(--hover);
}
.comments-resolved-caret {
display: inline-block;
transition: transform 0.15s;
}
.comments-resolved-caret.open {
transform: rotate(90deg);
}
.comment-reply {
margin: 8px 0 0 18px;
padding: 6px 0 0 8px;
border-left: 2px solid var(--border);
font-size: 12px;
}
.comment-reply-compose {
flex: 1;
}
.comment-reply-compose textarea {
width: 100%;
min-height: 48px;
font-size: 12px;
padding: 6px;
box-sizing: border-box;
}
/* Sliding AI dock: one persistent wrapper animates between the panel width and
* the 34px collapsed rail (Excel-parity 180ms ease); --ai-panel-width tracks
* the panel's drag-resizer */
.ai-dock {
display: flex;
flex-shrink: 0;
min-height: 0;
width: var(--ai-panel-width, 360px);
overflow: hidden;
transition: width 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-dock.collapsed {
width: 34px;
}
/* "show the AI sidebar" off and panel closed: no rail, no sliver */
.ai-dock.collapsed.ai-dock-off {
width: 0;
}
/* while dragging the resizer, follow the pointer without easing */
.ai-dock:has(.ai-panel-resizing) {
transition: none;
}
/* the rail stretches to fill the dock while the width animates */
.ai-dock .ai-rail {
flex: 1;
width: auto;
}
@media (prefers-reduced-motion: reduce) {
.ai-dock {
transition: none;
}
}
.ai-login-btn {
margin-top: 8px;
border: 1px solid var(--accent);
border-radius: 6px;
background: var(--accent);
padding: 4px 14px;
font-size: 13px;
color: var(--docs-on-accent);
cursor: pointer;
}
.ai-login-btn:hover {
opacity: 0.88;
}
/* ================= transient toast (save feedback) ================= */
.app-toast {
position: fixed;
top: 64px;
left: 50%;
transform: translate(-50%, -8px);
z-index: 2000;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 8px;
background: var(--docs-toast-bg);
color: var(--docs-toast-ink);
font-size: 13px;
box-shadow: var(--docs-shadow-toast);
opacity: 0;
pointer-events: none;
transition:
opacity 0.18s ease,
transform 0.18s ease;
max-width: 60vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.app-toast.error {
background: var(--docs-toast-error-bg);
}
.app-toast-icon {
width: 16px;
height: 16px;
flex: none;
}
.app-toast.success .app-toast-icon {
color: var(--docs-toast-ok);
}
/* body row (AI dock + content column) — the status bar spans only the content
column so the dock runs the full height of the window */
.app-main {
display: flex;
flex: 1;
min-height: 0;
}
.app-content {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
/* Shape draw mode (Word parity): crosshair over the whole document while armed */
.ProseMirror.doc-shape-drawing,
.ProseMirror.doc-shape-drawing * {
cursor: crosshair !important;
}
/* Shape gallery dropdown (slides parity: grouped, outline-icon grid) */
.rb-drop-title {
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
padding: 4px 2px 3px;
}
.rb-shape-gallery {
width: 264px;
max-height: 320px;
overflow-y: auto;
}
.rb-shape-grid {
display: grid;
grid-template-columns: repeat(8, 28px);
gap: 3px;
margin-bottom: 4px;
}
.rb-shape-cell {
width: 28px;
height: 28px;
border: 1px solid transparent;
border-radius: 4px;
background: none;
font-size: 15px;
line-height: 1;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.rb-shape-cell:hover {
border-color: var(--accent);
background: var(--hover);
}
/* Gallery variant keeps .shape-palette's anchored-card chrome but stacks grouped grids */
.shape-palette.rb-shape-gallery {
display: block;
}
/* Whitespace-only runs: Word ignores their font size for line height (tdf#137335).
Only the run's own [data-doc-style] span carries the oversized font-size — outer
comment/ins/del spans inherit the paragraph size and contribute nothing — so zero
that span and everything nested inside it (intermediate marks, the decoration),
without touching ancestor spans that may also wrap real text. */
.doc-page .doc-ws-run,
.doc-page span[data-doc-style]:has(.doc-ws-run),
.doc-page span[data-doc-style]:has(.doc-ws-run) span {
line-height: 0;
}
/* Curly quotes in w:hint="eastAsia" runs: Word draws them with the East Asian
font at a fullwidth advance, while every macOS Chinese system face keeps them
proportional — only the bundled Noto subset matches Word's 1em cell. */
.doc-ea-quotes {
font-family: 'Noto Serif CJK SC';
}
.ai-partial-card .ai-queue-hint {
padding: 0 10px 4px;
font-size: 12px;
color: var(--color-text-secondary);
}
/* ---- post-paste "Paste options" chip (Word parity) ---- */
.paste-chip {
position: fixed;
z-index: 59;
}
.paste-chip-btn {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: var(--radius-6, 6px);
background: var(--surface);
color: var(--text);
box-shadow: var(--docs-shadow-menu);
cursor: pointer;
}
.paste-chip-btn:hover {
background: var(--hover);
}
.paste-chip-caret {
font-size: 9px;
color: var(--text-secondary);
}
.paste-chip-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
display: flex;
flex-direction: column;
min-width: 220px;
padding: 4px;
border: 1px solid var(--border);
border-radius: var(--radius-8, 8px);
background: var(--surface);
box-shadow: var(--docs-shadow-menu);
}
.paste-chip-item {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border: none;
border-radius: var(--radius-6, 6px);
background: none;
color: var(--text);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.paste-chip-item:hover {
background: var(--hover);
}
.paste-chip-item.active {
font-weight: 600;
}
.paste-chip-check {
width: 14px;
flex: none;
text-align: center;
}
.paste-chip-sep {
height: 1px;
margin: 4px 6px;
background: var(--border);
}
.paste-chip-remember {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
color: var(--text-secondary);
font-size: 12px;
cursor: pointer;
}
/* ---- table operations wave: 9-way cell alignment, small dialogs, screen gridlines ---- */
.cell-align-grid {
display: grid;
grid-template-columns: repeat(3, 22px);
gap: 1px;
}
.table-tool-group .cell-align-grid > button {
min-height: 20px;
height: 20px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.table-tool-group .cell-align-grid > button.active,
.table-tool-group .table-tool-button.active {
border-color: var(--border);
background: var(--active-bg);
}
.table-border-style {
font-family: ui-monospace, Menlo, monospace;
letter-spacing: -0.5px;
}
.table-small-dialog {
width: min(360px, calc(100vw - 48px));
}
.zoom-dialog {
width: min(380px, calc(100vw - 48px));
}
/* Review → Track Changes Options (Word's Advanced Track Changes Options layout) */
.tco-dialog {
width: min(560px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
overflow: auto;
}
.tco-dialog fieldset {
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 12px 10px;
margin: 0 0 10px;
}
.tco-dialog legend {
padding: 0 4px;
font-size: 12px;
font-weight: 600;
color: var(--text-dim);
}
.tco-grid {
display: grid;
grid-template-columns: minmax(96px, auto) 1fr auto 1fr;
gap: 6px 10px;
align-items: center;
}
.tco-grid > span {
font-size: 13px;
color: var(--text);
}
/* scoped above the generic .modal label rule */
.tco-dialog .tco-check {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 6px;
font-size: 13px;
color: var(--text);
}
.tco-dialog .tco-check input {
width: auto;
height: auto;
margin: 0;
}
.tco-dialog .tco-grid select,
.tco-dialog .tco-grid input {
margin-top: 0;
height: 28px;
min-width: 0;
}
.tco-color-cell {
font-size: 12px;
color: var(--text-dim);
text-align: right;
}
.tco-dialog .modal-actions {
justify-content: space-between;
}
.tco-dialog .modal-actions .tco-actions-right {
display: flex;
gap: 8px;
}
.zoom-dialog-group {
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 14px 12px;
margin: 0 0 14px;
}
.zoom-dialog-group legend {
padding: 0 4px;
font-size: 12px;
color: var(--text-dim);
}
.zoom-dialog-radios {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
}
/* scoped above the generic .modal label rule */
.zoom-dialog .zoom-dialog-radio,
.zoom-dialog .zoom-dialog-percent {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text);
margin: 0;
}
.zoom-dialog-radio input,
.zoom-dialog-percent input {
display: inline-block;
margin: 0;
width: auto;
height: auto;
}
.zoom-dialog-percent input {
width: 84px;
height: 30px;
}
.table-dialog-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
}
.table-dialog-radios {
display: grid;
gap: 6px;
margin: 4px 0 12px;
}
.table-dialog-radios label,
.table-dialog-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text);
}
.table-dialog-radios label.disabled,
.table-dialog-check.disabled {
color: var(--text-dim);
}
.table-dialog-radios input,
.table-dialog-check input {
margin: 0;
width: auto;
}
.table-properties-inline {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 10px 16px;
margin-bottom: 10px;
}
.table-properties-inline > label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: var(--text-dim);
}
.table-properties-inline > label > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.table-properties-inline input[type='number'] {
width: 76px;
}
.table-properties-card .table-dialog-check {
margin: 6px 0;
}
.table-properties-nav {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 10px;
}
.table-properties-nav button {
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 12px;
cursor: pointer;
}
.table-properties-nav button:hover:not(:disabled) {
background: var(--hover);
}
.table-properties-nav button:disabled {
opacity: 0.4;
cursor: default;
}
.table-alt-text label {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
font-size: 12px;
color: var(--text-dim);
}
.table-alt-text textarea {
resize: vertical;
font: inherit;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
}
/* Word's View Gridlines: a faint dashed grid on screen only, never printed or exported */
@media screen {
.show-table-gridlines .doc-table td,
.show-table-gridlines .doc-table th {
outline: 1px dashed var(--border-strong);
outline-offset: -1px;
}
}
/* ---- withheld spans: text kept in the document, hidden from the model ----
An underline rather than a fill, because every other decoration here is
either a fill (search hits) or a style (bold, highlight), and the reader has
to be able to tell at a glance that this one means "the model cannot see
this". The ink is the app accent, so the mark follows the theme instead of
carrying a colour of its own. */
.redact-span {
border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
background: color-mix(in srgb, var(--accent) 9%, transparent);
color: var(--accent);
border-radius: 2px;
padding: 0 1px;
cursor: pointer;
}
/* the marker is a screen affordance; the printed page shows the plain run */
@media print {
.redact-span {
border: none;
background: none;
color: inherit;
padding: 0;
}
}
.redact-span.ProseMirror-selectednode {
outline: 2px solid var(--accent);
}
.redact-desc {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-dim);
}
/* the marker the model will see, shown before anything is committed */
.redact-preview {
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
font-size: 12px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, transparent);
border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
border-radius: 2px;
padding: 4px 6px;
margin-bottom: 14px;
word-break: break-all;
}
/* ---- Mailings: the mail merge panel and the field list ---- */
.modal-mailmerge {
width: 560px;
max-height: 84vh;
overflow-y: auto;
}
.mailmerge-section {
margin-bottom: 14px;
}
.mailmerge-label {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 6px;
}
.mailmerge-source-name {
flex: 1;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mailmerge-fields {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-height: 140px;
overflow-y: auto;
}
.mailmerge-field {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--color-bg-page);
color: var(--color-text-primary);
font-size: 12px;
padding: 3px 10px;
cursor: pointer;
}
.mailmerge-field:hover {
background: var(--color-bg-subtle);
}
.mailmerge-empty {
font-size: 13px;
color: var(--text-dim);
}
.mailmerge-counter {
font-size: 12px;
color: var(--text-dim);
align-self: center;
}
.mailmerge-preview {
margin: 0;
padding: 10px 12px;
max-height: 180px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--color-bg-page);
font-family: inherit;
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
}
.mailmerge-radio {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.mailmerge-pattern {
font-size: 12px;
color: var(--text-dim);
}
.mailmerge-pattern input {
display: block;
width: 100%;
margin-top: 4px;
}
.mailmerge-done {
font-size: 13px;
color: var(--color-text-primary);
}
.mailmerge-note {
margin-top: 6px;
font-size: 12px;
line-height: 1.45;
color: var(--text-dim);
}
.rb-field-list {
width: 220px;
max-height: 320px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.rb-field-item {
border: none;
background: none;
text-align: left;
padding: 5px 8px;
font-size: 13px;
color: var(--color-text-primary);
cursor: pointer;
border-radius: 4px;
}
.rb-field-item:hover {
background: var(--color-bg-subtle);
}
/* Show Revisions in Balloons: the deleted run leaves the flow; a thin marker
stands at its spot as the balloon leader's foot (Word's connector mark) */
.rev-balloon .doc-del-marker {
display: inline-block;
width: 0;
height: 1em;
vertical-align: text-bottom;
border-left: 2px solid var(--rev-del-ink, var(--docs-paper-rev-ink));
margin: 0 1px;
cursor: context-menu;
}
.doc-del-marker.doc-move-from {
border-left-style: double;
border-left-width: 3px;
}
/* Show All Revisions Inline: Word's [initials N] tag after a commented range */
.doc-comment-marker {
font-size: 0.75em;
font-weight: 600;
vertical-align: super;
color: var(--rev-comment-ink, var(--docs-paper-comment-line));
background: var(--rev-comment-bg, var(--docs-paper-comment-bg));
padding: 0 2px;
border-radius: 2px;
cursor: pointer;
user-select: none;
}
/* Page Border dialog (Design > Page Borders > Page Border…): Word's Borders
and Shading > Page Border tab. The preview paints the document's border
through the same pageBorderStyleOf as the canvas, so color/width come inline. */
.pb-dialog {
width: min(760px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
overflow: auto;
}
.pb-columns {
display: grid;
grid-template-columns: 140px 200px 1fr;
gap: 12px;
}
.pb-dialog fieldset {
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 12px 10px;
margin: 0;
min-width: 0;
}
.pb-dialog legend {
padding: 0 4px;
font-size: 12px;
font-weight: 600;
color: var(--text-dim);
}
.pb-dialog .fld {
margin-bottom: 10px;
}
.pb-dialog .fld input,
.pb-dialog .fld select {
height: 28px;
}
.pb-dialog .modal-desc {
margin: 0 0 8px;
font-size: 12px;
}
.pb-setting {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 4px 6px;
margin: 2px 0;
border: 1px solid transparent;
border-radius: 6px;
background: none;
color: var(--text);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.pb-setting:hover {
background: var(--hover);
}
.pb-setting.active {
border-color: var(--word-blue);
background: var(--accent-soft);
}
.pb-setting-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 40px;
flex: none;
background: var(--surface);
border: 1px solid var(--border);
}
.pb-setting-icon i {
display: block;
width: 22px;
height: 26px;
background: repeating-linear-gradient(to bottom, var(--text-dim) 0 1px, transparent 1px 4px);
background-size: 14px 100%;
background-repeat: no-repeat;
background-position: center;
}
.pb-setting-box i,
.pb-setting-shadow i,
.pb-setting-3d i {
border: 1px solid var(--text);
}
.pb-setting-shadow i {
box-shadow: 2px 2px 0 var(--text);
}
.pb-setting-3d i {
border-width: 3px;
border-style: ridge;
}
.pb-setting-custom i {
border-top: 1px dashed var(--text);
border-bottom: 3px solid var(--text);
}
.pb-style-list {
display: flex;
flex-direction: column;
gap: 1px;
height: 180px;
overflow-y: auto;
margin-bottom: 10px;
padding: 4px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
color: var(--text);
}
.pb-style {
display: flex;
align-items: center;
flex: none;
height: 22px;
padding: 0 6px;
border: 0;
border-radius: 3px;
background: none;
color: inherit;
cursor: pointer;
}
.pb-style:hover {
background: var(--hover);
}
.pb-style.active {
background: var(--accent-soft);
}
.pb-style > span {
display: block;
width: 100%;
height: 0;
}
.pb-color-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.pb-dialog .pb-color-row input[type='color'] {
width: 44px;
height: 28px;
margin: 0;
padding: 2px;
}
.pb-auto {
height: 28px;
padding: 0 10px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
color: var(--text);
font-size: 12px;
cursor: pointer;
}
.pb-auto.active {
border-color: var(--word-blue);
background: var(--accent-soft);
}
.pb-auto:disabled {
opacity: 0.5;
cursor: default;
}
.pb-preview {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.pb-preview-side-col {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px 0 44px;
}
.pb-preview-page-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.pb-preview-side-row {
display: flex;
justify-content: space-between;
padding: 0 14px;
}
.pb-side-btn {
width: 28px;
height: 28px;
padding: 3px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
}
.pb-side-btn:hover {
background: var(--hover);
}
.pb-side-btn.active {
border-color: var(--word-blue);
background: var(--accent-soft);
}
.pb-side-btn > span {
display: block;
width: 100%;
height: 100%;
border: 1px dotted var(--text-dim);
}
.pb-side-top > span {
border-top: 2px solid var(--text);
}
.pb-side-bottom > span {
border-bottom: 2px solid var(--text);
}
.pb-side-left > span {
border-left: 2px solid var(--text);
}
.pb-side-right > span {
border-right: 2px solid var(--text);
}
/* the sheet is document data (white paper, black lines), same as the canvas */
.pb-preview-page {
position: relative;
--pb-paper: #fff;
width: 150px;
height: 190px;
background: var(--pb-paper);
border: 1px solid var(--border);
overflow: hidden;
}
.pb-preview-border {
position: absolute;
}
.pb-preview-text {
position: absolute;
inset: 44px 36px;
background: repeating-linear-gradient(to bottom, var(--text-dim) 0 2px, transparent 2px 8px);
opacity: 0.6;
}
.pb-options-toggle {
height: 28px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
color: var(--text);
font-size: 12px;
cursor: pointer;
}
.pb-options-toggle:hover {
background: var(--hover);
}
.pb-options {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.pb-margin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 10px;
}
.pb-dialog .pb-check {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 13px;
color: var(--text);
}
.pb-dialog .pb-check input {
width: auto;
height: auto;
margin: 0;
}
/* ---- Design → Watermark dialog (Word's Insert Watermark) ---- */
.modal.watermark-dialog {
width: 820px;
max-width: calc(100vw - 48px);
}
.watermark-dialog .wm-body {
display: flex;
gap: 24px;
align-items: flex-start;
}
.watermark-dialog .wm-form {
flex: 1;
min-width: 0;
}
.watermark-dialog label.wm-mode {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.watermark-dialog .wm-mode input {
width: auto;
height: auto;
margin: 0;
}
.watermark-dialog .wm-fields {
padding: 0 0 12px 24px;
}
.watermark-dialog .wm-fields[aria-disabled='true'] {
opacity: 0.55;
}
.watermark-dialog .wm-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 13px;
color: var(--text);
}
.watermark-dialog .wm-row input,
.watermark-dialog .wm-row select {
margin-top: 0;
}
.watermark-dialog .wm-row select {
width: auto;
min-width: 160px;
height: 30px;
}
.watermark-dialog .wm-row select.wm-size {
min-width: 90px;
}
.watermark-dialog .wm-row input[type='text'] {
height: 30px;
}
.watermark-dialog .wm-label {
width: 100px;
flex: none;
text-align: right;
color: var(--text-dim);
}
.watermark-dialog label.wm-check {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 13px;
color: var(--text);
}
.watermark-dialog .wm-check input {
width: auto;
height: auto;
margin: 0;
}
.watermark-dialog input[type='range'] {
flex: 1;
height: auto;
border: none;
padding: 0;
}
.watermark-dialog input.wm-pct {
width: 64px;
height: 30px;
}
.watermark-dialog input.wm-color {
width: 120px;
height: 30px;
}
.watermark-dialog .wm-pick {
height: 30px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.watermark-dialog .wm-pick:disabled {
cursor: default;
}
.watermark-dialog .wm-pick-name {
color: var(--text-dim);
}
/* document preview: the paper stays white in both themes */
.watermark-dialog .wm-preview {
--wm-paper: #fff;
--wm-ink: #444;
--wm-shadow: rgb(0 0 0 / 15%);
position: relative;
flex: none;
background: var(--wm-paper);
box-shadow:
0 0 0 1px var(--border),
0 2px 8px var(--wm-shadow);
overflow: hidden;
}
.watermark-dialog .wm-preview-margin {
position: absolute;
isolation: isolate;
}
.watermark-dialog .wm-preview-mark {
position: absolute;
z-index: 0;
display: block;
pointer-events: none;
}
.watermark-dialog .wm-preview-mark svg {
display: block;
width: 100%;
height: 100%;
}
.watermark-dialog .wm-preview-lines {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 2px;
}
.watermark-dialog .wm-preview-lines span {
display: block;
height: 3px;
width: 100%;
background: var(--wm-ink);
border-radius: 1px;
}
.watermark-dialog .wm-preview-lines span:nth-child(4n) {
margin-bottom: 5px;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/*
* Metric-compatible fallback fonts (bundled from LibreOffice, SIL OFL 1.1):
* Carlito ↔ Calibri, Caladea ↔ Cambria, Liberation Serif/Sans/Mono ↔
* Times New Roman/Arial/Courier New.
* When a Word font the document declares is missing locally, the browser's
* silent fallback (Helvetica etc.) changes character widths → line breaks and
* pagination all shift. With metric-compatible fallbacks, canvas line breaking
* reproduces the original document's layout and shares its font source with
* the offline pagination model (lo-fonts measures the same set of files).
*/
/* Metric aliases ('X GO' size-adjusted faces) are generated from
packages/font-metrics/measurements by tools/build-font-aliases.mjs. */
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Generated by tools/build-font-aliases.mjs from packages/font-metrics/measurements;
* do not hand-edit. Every size-adjust and metric override here is a manifest entry
* with a measurement source; fonts.css imports this file and keeps the hand-authored
* faces (bundled subsets, PUA blank, box drawing). */
/* Aptos Display: the heading cut, Word cloud-font cache (letters ~Carlito, space -15%).
*
* Aptos Display GO: hmtx 2026-10-20
* Aptos Display hmtx over Carlito hmtx per 1.5% bucket times the corpus kerning factor (0.9952-0.9962)
* fonts: Aptos Display Regular/Bold/Italic/Bold Italic (Word cloud-font cache); Carlito-Regular/Bold/Italic/BoldItalic.ttf */
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 98.7%;
ascent-override: 75.89%;
descent-override: 25.3%;
line-gap-override: 22.33%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 47.4%;
unicode-range: U+007C;
ascent-override: 158.07%;
descent-override: 52.69%;
line-gap-override: 46.52%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 75.2%;
unicode-range: U+0021;
ascent-override: 99.61%;
descent-override: 33.2%;
line-gap-override: 29.31%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 84.9%;
unicode-range: U+0020, U+00A0;
ascent-override: 88.22%;
descent-override: 29.41%;
line-gap-override: 25.96%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 87.8%;
unicode-range: U+002F, U+005C, U+006A, U+0072;
ascent-override: 85.38%;
descent-override: 28.46%;
line-gap-override: 25.12%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 89.4%;
unicode-range: U+004D, U+0074;
ascent-override: 83.79%;
descent-override: 27.93%;
line-gap-override: 24.66%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 91.3%;
unicode-range: U+0022, U+0026, U+003A-003B, U+0069;
ascent-override: 82.03%;
descent-override: 27.34%;
line-gap-override: 24.14%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 92.3%;
unicode-range: U+0049, U+005F, U+0066-0067, U+2013;
ascent-override: 81.14%;
descent-override: 27.05%;
line-gap-override: 23.88%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 94.1%;
unicode-range: U+2018-2019;
ascent-override: 79.63%;
descent-override: 26.54%;
line-gap-override: 23.43%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 95.6%;
unicode-range: U+0027, U+005B, U+005D, U+0068, U+006E, U+0075-0076, U+0079;
ascent-override: 78.39%;
descent-override: 26.13%;
line-gap-override: 23.07%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 97%;
unicode-range: U+0028-0029, U+002E, U+0054, U+006F;
ascent-override: 77.28%;
descent-override: 25.76%;
line-gap-override: 22.74%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 97.9%;
unicode-range: U+006B;
ascent-override: 76.5%;
descent-override: 25.5%;
line-gap-override: 22.51%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 99.8%;
unicode-range: U+0041, U+0056, U+006D, U+0077, U+201C-201D;
ascent-override: 75.04%;
descent-override: 25.01%;
line-gap-override: 22.08%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 101.3%;
unicode-range: U+0055, U+0061, U+0078;
ascent-override: 73.99%;
descent-override: 24.66%;
line-gap-override: 21.77%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 102.7%;
unicode-range: U+0030-0039, U+0051;
ascent-override: 72.93%;
descent-override: 24.31%;
line-gap-override: 21.46%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 104.6%;
unicode-range: U+002B, U+003D, U+003F, U+004E-004F;
ascent-override: 71.61%;
descent-override: 23.87%;
line-gap-override: 21.07%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 106%;
unicode-range: U+0042, U+0044, U+0047-0048, U+004B, U+0058, U+006C;
ascent-override: 70.71%;
descent-override: 23.57%;
line-gap-override: 20.81%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 107.6%;
unicode-range: U+0050, U+0052, U+007A;
ascent-override: 69.65%;
descent-override: 23.22%;
line-gap-override: 20.5%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 109.4%;
unicode-range: U+0059-005A;
ascent-override: 68.48%;
descent-override: 22.83%;
line-gap-override: 20.15%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 110.3%;
unicode-range: U+0045-0046;
ascent-override: 67.95%;
descent-override: 22.65%;
line-gap-override: 19.99%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 113.4%;
unicode-range: U+002D;
ascent-override: 66.09%;
descent-override: 22.03%;
line-gap-override: 19.45%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 114.8%;
unicode-range: U+0025, U+004C;
ascent-override: 65.25%;
descent-override: 21.75%;
line-gap-override: 19.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 116%;
unicode-range: U+0063;
ascent-override: 64.6%;
descent-override: 21.53%;
line-gap-override: 19.01%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 118.1%;
unicode-range: U+0053, U+0073;
ascent-override: 63.46%;
descent-override: 21.15%;
line-gap-override: 18.67%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 122.4%;
unicode-range: U+0043;
ascent-override: 61.2%;
descent-override: 20.4%;
line-gap-override: 18.01%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 102.2%;
ascent-override: 73.33%;
descent-override: 24.44%;
line-gap-override: 21.58%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 52.7%;
unicode-range: U+007C;
ascent-override: 142.11%;
descent-override: 47.37%;
line-gap-override: 41.82%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 79.9%;
unicode-range: U+0021;
ascent-override: 93.78%;
descent-override: 31.26%;
line-gap-override: 27.6%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 85%;
unicode-range: U+0020, U+00A0;
ascent-override: 88.17%;
descent-override: 29.39%;
line-gap-override: 25.94%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 89.6%;
unicode-range: U+002F, U+005C;
ascent-override: 83.58%;
descent-override: 27.86%;
line-gap-override: 24.59%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 90.5%;
unicode-range: U+004D;
ascent-override: 82.8%;
descent-override: 27.6%;
line-gap-override: 24.37%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 92.3%;
unicode-range: U+0026, U+005F, U+2013;
ascent-override: 81.21%;
descent-override: 27.07%;
line-gap-override: 23.9%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 94.1%;
unicode-range: U+003A-003B, U+006A;
ascent-override: 79.6%;
descent-override: 26.53%;
line-gap-override: 23.42%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 95.7%;
unicode-range: U+0022, U+0072, U+0074;
ascent-override: 78.27%;
descent-override: 26.09%;
line-gap-override: 23.03%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 97.4%;
unicode-range: U+002E, U+0069;
ascent-override: 76.9%;
descent-override: 25.63%;
line-gap-override: 22.63%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 98.9%;
unicode-range: U+0027, U+0067-0068, U+006E-006F, U+0075;
ascent-override: 75.78%;
descent-override: 25.26%;
line-gap-override: 22.3%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 100.3%;
unicode-range: U+0041, U+0049, U+0054, U+0062, U+0064, U+0066, U+0070-0071, U+0076-0077, U+0079;
ascent-override: 74.72%;
descent-override: 24.91%;
line-gap-override: 21.99%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 101.2%;
unicode-range: U+002C, U+0056-0057;
ascent-override: 74.06%;
descent-override: 24.69%;
line-gap-override: 21.79%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 103.6%;
unicode-range: U+004F, U+005B, U+005D, U+006B;
ascent-override: 72.32%;
descent-override: 24.11%;
line-gap-override: 21.28%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 105.2%;
unicode-range: U+004A, U+004E, U+2018-2019;
ascent-override: 71.22%;
descent-override: 23.74%;
line-gap-override: 20.96%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 106.2%;
unicode-range: U+0030-0039, U+0042, U+0078;
ascent-override: 70.58%;
descent-override: 23.53%;
line-gap-override: 20.77%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 107.6%;
unicode-range: U+0028-0029, U+002B, U+003D, U+003F, U+0044, U+0047-0048, U+0052, U+0058;
ascent-override: 69.62%;
descent-override: 23.21%;
line-gap-override: 20.49%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 109.6%;
unicode-range: U+0050, U+0059;
ascent-override: 68.33%;
descent-override: 22.78%;
line-gap-override: 20.11%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 109.8%;
unicode-range: U+004B;
ascent-override: 68.21%;
descent-override: 22.74%;
line-gap-override: 20.07%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 112.3%;
unicode-range: U+0045-0046, U+007A;
ascent-override: 66.71%;
descent-override: 22.24%;
line-gap-override: 19.63%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 113.5%;
unicode-range: U+005A, U+006C, U+201C-201D;
ascent-override: 66.03%;
descent-override: 22.01%;
line-gap-override: 19.43%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 114.7%;
unicode-range: U+0025;
ascent-override: 65.33%;
descent-override: 21.78%;
line-gap-override: 19.22%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 115.8%;
unicode-range: U+004C;
ascent-override: 64.69%;
descent-override: 21.56%;
line-gap-override: 19.04%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 118.7%;
unicode-range: U+002D;
ascent-override: 63.13%;
descent-override: 21.04%;
line-gap-override: 18.58%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 120.9%;
unicode-range: U+0053, U+0063, U+0073;
ascent-override: 61.99%;
descent-override: 20.66%;
line-gap-override: 18.24%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 127%;
unicode-range: U+0043;
ascent-override: 59%;
descent-override: 19.67%;
line-gap-override: 17.36%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 99.2%;
ascent-override: 75.54%;
descent-override: 25.18%;
line-gap-override: 22.23%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 48.4%;
unicode-range: U+007C;
ascent-override: 154.66%;
descent-override: 51.55%;
line-gap-override: 45.51%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 75.2%;
unicode-range: U+0021;
ascent-override: 99.63%;
descent-override: 33.21%;
line-gap-override: 29.32%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 85%;
unicode-range: U+0020, U+0067, U+00A0;
ascent-override: 88.13%;
descent-override: 29.38%;
line-gap-override: 25.93%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 87.1%;
unicode-range: U+002F, U+005C;
ascent-override: 86.06%;
descent-override: 28.69%;
line-gap-override: 25.32%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 87.5%;
unicode-range: U+006A;
ascent-override: 85.59%;
descent-override: 28.53%;
line-gap-override: 25.19%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 89.4%;
unicode-range: U+0022, U+004D, U+0072, U+0074;
ascent-override: 83.76%;
descent-override: 27.92%;
line-gap-override: 24.65%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 91.3%;
unicode-range: U+0026, U+0069;
ascent-override: 82.1%;
descent-override: 27.37%;
line-gap-override: 24.16%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 92.2%;
unicode-range: U+003A-003B, U+0049, U+005F, U+0066, U+2013;
ascent-override: 81.29%;
descent-override: 27.1%;
line-gap-override: 23.92%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 94.6%;
unicode-range: U+0061;
ascent-override: 79.19%;
descent-override: 26.4%;
line-gap-override: 23.3%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 95.7%;
unicode-range: U+0027, U+005B, U+005D, U+0079;
ascent-override: 78.26%;
descent-override: 26.09%;
line-gap-override: 23.03%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 96.9%;
unicode-range: U+0028-0029, U+002E, U+0054, U+0076;
ascent-override: 77.33%;
descent-override: 25.78%;
line-gap-override: 22.75%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 97.9%;
unicode-range: U+0068, U+006B, U+006E, U+0075;
ascent-override: 76.52%;
descent-override: 25.51%;
line-gap-override: 22.52%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 100.3%;
unicode-range: U+0056, U+0062, U+0064, U+006D, U+0070-0071;
ascent-override: 74.68%;
descent-override: 24.89%;
line-gap-override: 21.98%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 101.1%;
unicode-range: U+0055, U+0078;
ascent-override: 74.14%;
descent-override: 24.71%;
line-gap-override: 21.82%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 102.7%;
unicode-range: U+0030-0039, U+0065, U+201C-201D;
ascent-override: 72.95%;
descent-override: 24.32%;
line-gap-override: 21.47%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 104.5%;
unicode-range: U+002B, U+003D, U+003F, U+004E, U+0051;
ascent-override: 71.67%;
descent-override: 23.89%;
line-gap-override: 21.09%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 105.9%;
unicode-range: U+0042, U+0047-0048, U+004B, U+004F, U+0052, U+0058, U+006C;
ascent-override: 70.76%;
descent-override: 23.59%;
line-gap-override: 20.82%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 107.3%;
unicode-range: U+0044, U+0050, U+007A;
ascent-override: 69.85%;
descent-override: 23.28%;
line-gap-override: 20.56%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 109.3%;
unicode-range: U+0059-005A;
ascent-override: 68.56%;
descent-override: 22.85%;
line-gap-override: 20.17%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 110.2%;
unicode-range: U+0045-0046;
ascent-override: 67.96%;
descent-override: 22.65%;
line-gap-override: 20%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 113.2%;
unicode-range: U+002D;
ascent-override: 66.2%;
descent-override: 22.07%;
line-gap-override: 19.48%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 114.7%;
unicode-range: U+004C;
ascent-override: 65.34%;
descent-override: 21.78%;
line-gap-override: 19.23%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 117.9%;
unicode-range: U+0063, U+0073;
ascent-override: 63.53%;
descent-override: 21.18%;
line-gap-override: 18.7%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 120.2%;
unicode-range: U+0053;
ascent-override: 62.35%;
descent-override: 20.78%;
line-gap-override: 18.35%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 122.2%;
unicode-range: U+0025;
ascent-override: 61.3%;
descent-override: 20.43%;
line-gap-override: 18.04%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 125.8%;
unicode-range: U+0043;
ascent-override: 59.54%;
descent-override: 19.85%;
line-gap-override: 17.52%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 102.6%;
ascent-override: 73.03%;
descent-override: 24.34%;
line-gap-override: 21.49%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 56.2%;
unicode-range: U+007C;
ascent-override: 133.31%;
descent-override: 44.44%;
line-gap-override: 39.23%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 79.9%;
unicode-range: U+0021;
ascent-override: 93.78%;
descent-override: 31.26%;
line-gap-override: 27.6%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 85%;
unicode-range: U+0020, U+00A0;
ascent-override: 88.17%;
descent-override: 29.39%;
line-gap-override: 25.95%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 88.6%;
unicode-range: U+002F, U+005C;
ascent-override: 84.54%;
descent-override: 28.18%;
line-gap-override: 24.88%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 89.1%;
unicode-range: U+0067;
ascent-override: 84.09%;
descent-override: 28.03%;
line-gap-override: 24.74%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 90.9%;
unicode-range: U+0022, U+004D;
ascent-override: 82.39%;
descent-override: 27.46%;
line-gap-override: 24.25%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 92%;
unicode-range: U+005F, U+2013;
ascent-override: 81.45%;
descent-override: 27.15%;
line-gap-override: 23.97%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 94%;
unicode-range: U+0026, U+003A, U+006A;
ascent-override: 79.72%;
descent-override: 26.57%;
line-gap-override: 23.46%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 95.7%;
unicode-range: U+003B, U+0074;
ascent-override: 78.29%;
descent-override: 26.1%;
line-gap-override: 23.04%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 97%;
unicode-range: U+002E, U+0061, U+0069, U+0072;
ascent-override: 77.25%;
descent-override: 25.75%;
line-gap-override: 22.73%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 99%;
unicode-range: U+0027;
ascent-override: 75.7%;
descent-override: 25.23%;
line-gap-override: 22.27%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 100.4%;
unicode-range: U+0041, U+0049, U+0054, U+0066, U+0068, U+006E-006F, U+0075-0077, U+0079;
ascent-override: 74.63%;
descent-override: 24.88%;
line-gap-override: 21.96%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 101.1%;
unicode-range: U+002C, U+0056-0057;
ascent-override: 74.09%;
descent-override: 24.7%;
line-gap-override: 21.8%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 103.6%;
unicode-range: U+0051, U+006B;
ascent-override: 72.29%;
descent-override: 24.1%;
line-gap-override: 21.27%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 104.5%;
unicode-range: U+004A, U+004F, U+0065, U+006D;
ascent-override: 71.67%;
descent-override: 23.89%;
line-gap-override: 21.09%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 106%;
unicode-range: U+0030-0039, U+0042, U+004E, U+0078;
ascent-override: 70.68%;
descent-override: 23.56%;
line-gap-override: 20.8%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 107.5%;
unicode-range: U+0028-0029, U+002B, U+003D, U+003F, U+0044, U+0047-0048, U+0052, U+0058, U+2018-2019;
ascent-override: 69.67%;
descent-override: 23.22%;
line-gap-override: 20.5%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 109.6%;
unicode-range: U+0050, U+0059;
ascent-override: 68.36%;
descent-override: 22.79%;
line-gap-override: 20.12%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 109.8%;
unicode-range: U+004B;
ascent-override: 68.22%;
descent-override: 22.74%;
line-gap-override: 20.07%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 112.3%;
unicode-range: U+0045-0046, U+007A;
ascent-override: 66.71%;
descent-override: 22.24%;
line-gap-override: 19.63%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 113.3%;
unicode-range: U+005A, U+006C;
ascent-override: 66.12%;
descent-override: 22.04%;
line-gap-override: 19.46%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 114.4%;
unicode-range: U+201C-201D;
ascent-override: 65.48%;
descent-override: 21.83%;
line-gap-override: 19.27%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 115.8%;
unicode-range: U+004C;
ascent-override: 64.69%;
descent-override: 21.56%;
line-gap-override: 19.04%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 118.5%;
unicode-range: U+002D;
ascent-override: 63.22%;
descent-override: 21.07%;
line-gap-override: 18.6%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 122.6%;
unicode-range: U+0053, U+0073;
ascent-override: 61.12%;
descent-override: 20.37%;
line-gap-override: 17.99%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 123.8%;
unicode-range: U+0063;
ascent-override: 60.51%;
descent-override: 20.17%;
line-gap-override: 17.81%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 126%;
unicode-range: U+0025;
ascent-override: 59.45%;
descent-override: 19.82%;
line-gap-override: 17.49%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Display GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 130.5%;
unicode-range: U+0043;
ascent-override: 57.43%;
descent-override: 19.14%;
line-gap-override: 16.9%;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Aptos (M365 default body face since 2023): Word renders the real font, but
* it ships only inside Office, so Chromium never resolves it and the chain
* fell to Carlito, 5% narrower per line, one line short per paragraph (SAS
* probe 2026-09-03: seven samples, pitch stays Calibri's 1.22). Aptos is not
* a scale of Carlito: per glyph the ratio spans 0.87 (M, t, r) to 1.22 (C, s,
* c), so one factor fitted over whole lines left capitals 2.7% and bold 1.3%
* short and moved a wrap every two pages (prod corpus 2026-10-20). Each face
* therefore declares the corpus-weighted letter scale as its general rule and
* one range-limited face per 1.5% advance bucket of the ASCII letters, digits,
* space and common punctuation; later faces win inside their unicode-range.
* Ratios = Aptos hmtx (Word DFonts / cloud-font cache) over Carlito hmtx,
* times the face's mean pair-kerning factor (0.9957-0.9963 over the corpus):
* Word kerns every run under the 2024 Normal template (docDefaults kern 2)
* and HarfBuzz kern+liga reproduces its PDF line widths exactly, while
* Chromium cannot kern across the bucket faces. The metric overrides undo
* each face's size-adjust on the vertical axis (overrides scale with
* size-adjust) so every bucket carries the line box of the 106.5% Carlito
* face the pagination model (line-metrics.ts) assumes: a 1.22x capital
* bucket otherwise grew a 12pt body line 0.4pt. Generated: do not hand-edit
* the numbers, refit them against the font files.
*
* 2026-10-31: the bucket faces made letters of one word differ in height (size-adjust
* scales both axes; 'aCronymS' in sample 019). The ranged faces are replaced by one
* advance-matched derivative per cut (AptosGO-*.ttf): Carlito outlines scaled
* horizontally to each Word advance x the kerning factor, one vertical factor (H/x ink
* ratio), hmtx = Word advances, GPOS/kern dropped, U+00A0 mapped to the space glyph.
* hhea/OS2 carry the general face's line box so the pagination model is unchanged.
*
* Aptos GO: hmtx 2026-10-31
* Aptos hmtx x the corpus pair-kerning factor baked into an advance-matched Carlito derivative (tools/build-metric-fonts.py); general face corpus-weighted, box = Carlito hhea x the general size-adjust undone
* fonts: Aptos.ttf, Aptos-Bold.ttf, Aptos-Italic.ttf, Aptos-Bold-Italic.ttf (Word DFonts); Carlito-Regular/Bold/Italic/BoldItalic.ttf */
@font-face {
font-family: 'Aptos GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 106.3%;
ascent-override: 75.15%;
descent-override: 25.05%;
line-gap-override: 22.11%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 110.1%;
ascent-override: 72.52%;
descent-override: 24.17%;
line-gap-override: 21.34%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 106.7%;
ascent-override: 74.88%;
descent-override: 24.96%;
line-gap-override: 22.04%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 110.4%;
ascent-override: 72.37%;
descent-override: 24.12%;
line-gap-override: 21.3%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos GO';
src: url('./AptosGO-Regular-TCWFdmuV.ttf');
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-017F, U+0181, U+0186, U+0189-018A, U+018E-0192, U+0194, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01DD, U+01E6-01E7, U+01EA-01EB, U+01F8-01FF, U+0218-021B, U+0232-0233, U+0237, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos GO';
src: url('./AptosGO-Bold-5d2fkukq.ttf');
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-017F, U+0181, U+0186, U+0189-018A, U+018E-0192, U+0194, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01DD, U+01E6-01E7, U+01EA-01EB, U+01F8-01FF, U+0218-021B, U+0232-0233, U+0237, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos GO';
src: url('./AptosGO-Italic-C2h1gUgz.ttf');
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-017F, U+0181, U+0186, U+0189-018A, U+018E-0192, U+0194, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01DD, U+01E6-01E7, U+01EA-01EB, U+01F8-01FF, U+0218-021B, U+0232-0233, U+0237, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos GO';
src: url('./AptosGO-BoldItalic-BpfZ6-9j.ttf');
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-017F, U+0181, U+0186, U+0189-018A, U+018E-0192, U+0194, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01DD, U+01E6-01E7, U+01EA-01EB, U+01F8-01FF, U+0218-021B, U+0232-0233, U+0237, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Aptos Narrow: Word DFonts (letters -2% of Carlito, space -17%).
*
* 2026-10-31: the bucket faces made letters of one word differ in height (size-adjust
* scales both axes; 'aCronymS' in sample 019). The ranged faces are replaced by one
* advance-matched derivative per cut (AptosNarrowGO-*.ttf): Carlito outlines scaled
* horizontally to each Word advance x the kerning factor, one vertical factor (H/x ink
* ratio), hmtx = Word advances, GPOS/kern dropped, U+00A0 mapped to the space glyph.
* hhea/OS2 carry the general face's line box so the pagination model is unchanged.
*
* Aptos Narrow GO: hmtx 2026-10-31
* Aptos Narrow hmtx x the corpus pair-kerning factor baked into an advance-matched Carlito derivative (tools/build-metric-fonts.py); general face corpus-weighted, box = Carlito hhea x the general size-adjust undone
* fonts: Aptos-Narrow.ttf, Aptos-Narrow-Bold.ttf, Aptos-Narrow-Italic.ttf, Aptos-Narrow-Bold-Italic.ttf (Word DFonts); Carlito-Regular/Bold/Italic/BoldItalic.ttf */
@font-face {
font-family: 'Aptos Narrow GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 97.7%;
ascent-override: 76.76%;
descent-override: 25.59%;
line-gap-override: 22.59%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Narrow GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
size-adjust: 99.8%;
ascent-override: 75.15%;
descent-override: 25.05%;
line-gap-override: 22.11%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Narrow GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 97.7%;
ascent-override: 76.77%;
descent-override: 25.59%;
line-gap-override: 22.59%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Narrow GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
size-adjust: 98.8%;
ascent-override: 75.87%;
descent-override: 25.29%;
line-gap-override: 22.33%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Narrow GO';
src: url('./AptosNarrowGO-Regular-DFxrH8xY.ttf');
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-017F, U+0181, U+0186, U+0189-018A, U+018E-0192, U+0194, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01DD, U+01E6-01E7, U+01EA-01EB, U+01F8-01FF, U+0218-021B, U+0232-0233, U+0237, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Narrow GO';
src: url('./AptosNarrowGO-Bold-B_iZzeGk.ttf');
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-017F, U+0181, U+0186, U+0189-018A, U+018E-0192, U+0194, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01DD, U+01E6-01E7, U+01EA-01EB, U+01F8-01FF, U+0218-021B, U+0232-0233, U+0237, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Aptos Narrow GO';
src: url('./AptosNarrowGO-Italic-D-F6fdtD.ttf');
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-017F, U+0181, U+0186, U+0189-018A, U+018E-0192, U+0194, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01DD, U+01E6-01E7, U+01EA-01EB, U+01F8-01FF, U+0218-021B, U+0232-0233, U+0237, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Aptos Narrow GO';
src: url('./AptosNarrowGO-BoldItalic-cm-M69it.ttf');
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-017F, U+0181, U+0186, U+0189-018A, U+018E-0192, U+0194, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01DD, U+01E6-01E7, U+01EA-01EB, U+01F8-01FF, U+0218-021B, U+0232-0233, U+0237, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Arial's own Arabic where the local Arial lacks it (Liberation Sans): Word
* Arial shapes a 57-char pangram 269.2 vs the Noto Sans subset 325 (probe
* 2026-10-13, 2026-10-14), box pinned to Arial hhea 1854/434 over 2048.
*
* Arial Arabic GO: probe 2026-10-14
* Word Arial shapes a 57-letter pangram 269.2 vs the Noto Sans subset 325 (2026-10-13, 2026-10-14); box = Arial hhea 1854/434 over 2048 */
@font-face {
font-family: 'Arial Arabic GO';
src: url('./NotoSansArabic-Regular-subset-D207GVuU.woff2') format('woff2');
size-adjust: 82.8%;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
ascent-override: 90.5%;
descent-override: 21.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Barlow Condensed is an M365 cloud font Word downloads and lays out with its real
* advances (unlike the Bahnschrift variable instances, which Word paces at Calibri-class
* widths). Without the face Chromium drew Helvetica, 1.35x wider, wrapping every table
* cell (corpus 2026-10-29). Faces are advance-ratio buckets over Liberation Sans (Word
* advance / base advance per Latin-1 glyph, greedy buckets no wider than 3 %, one
* size-adjusted face per bucket, the rangeless face at the lowercase ratio); within
* 0.5 % on 57 Word lines where per-class faces missed by up to 2.8 %. The cloud cache
* has no italic cut; Word obliques the upright, so the italic faces reuse the upright
* ratios. Glyph height shrinks with the width (a known compromise of size-adjust);
* line pitch stays the hhea 1.2 from word-faces.json.
*
* Barlow Condensed GO: hmtx 2026-10-29
* hmtx advance-ratio buckets (<= 3 % span); Word paces the cloud face at its own advances (production PDF spans / hmtx = 0.994 over 112 lines)
* fonts: Barlow Condensed Regular / Bold (Office CloudFonts cache, static TTFs); LiberationSans */
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 77.9%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 36.3%;
unicode-range: U+00B8;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 43.5%;
unicode-range: U+00B9;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 46%;
unicode-range: U+0031;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 54.9%;
unicode-range: U+0060, U+007C, U+00A6, U+00B4, U+2018-2019;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 58.3%;
unicode-range: U+0047, U+004F, U+0051, U+00D2-00D6;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 59.8%;
unicode-range: U+00AE, U+00B7, U+00BF, U+2014, U+2020-2021;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 61.7%;
unicode-range: U+0027, U+0041, U+0043, U+004D, U+0052-0053, U+00C0-00C5, U+00C7, U+00EC-00EF, U+2026;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 64.2%;
unicode-range: U+002C, U+0044-0045, U+0058-005A, U+00C8-00CB, U+00D7, U+00DD;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 66.1%;
unicode-range: U+0022, U+0028-0029, U+0037, U+003F, U+0042, U+0046, U+0048, U+0050, U+0055-0057, U+00D9-00DC, U+00DE, U+2013;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 68.1%;
unicode-range: U+002E, U+004B, U+004E, U+0054, U+005F, U+00D1, U+00D8;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 70.3%;
unicode-range: U+003B, U+004C, U+00A7, U+00C6, U+00D0, U+00DF, U+00F8, U+201E;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 73.3%;
unicode-range: U+0020, U+0032-0033, U+0035-0036, U+0039, U+0065, U+0079-007A, U+00A0, U+00A2, U+00B2, U+00E0-00E6, U+00E8-00EB, U+00FD, U+00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 75.3%;
unicode-range: U+0024, U+002B, U+0034, U+0038, U+003A, U+003C-003E, U+0040, U+0061-0062, U+0064, U+0067-0068, U+006E-006F, U+0073, U+0075-0076, U+0078, U+00A1, U+00AA, U+00AC, U+00B5, U+00F1-00F6, U+00F9-00FC, U+00FE, U+201C-201D;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 77.4%;
unicode-range: U+0049, U+006D, U+0070-0071, U+0077, U+007E, U+00BA, U+00CC-00CF, U+00F0;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 80.2%;
unicode-range: U+0026, U+0030, U+0063, U+006B, U+00B1, U+00B3, U+00BC-00BD, U+00E7, U+00F7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 81.7%;
unicode-range: U+006C, U+007B, U+007D;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 84.8%;
unicode-range: U+004A, U+005E, U+00AB, U+00BB, U+2022;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 88%;
unicode-range: U+0025, U+0072, U+00AF-00B0, U+00B6, U+00BE, U+20AC;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 91%;
unicode-range: U+0021, U+006A, U+00A3-00A4, U+00A8;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 93.7%;
unicode-range: U+002A, U+002D, U+0069, U+00A5, U+00AD, U+2010;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 96.1%;
unicode-range: U+0074;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 99.7%;
unicode-range: U+0066;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 107.5%;
unicode-range: U+0023, U+005B, U+005D;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 113.3%;
unicode-range: U+00A9;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 120.2%;
unicode-range: U+002F, U+005C;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 270.1%;
unicode-range: U+201A;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 76.4%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 45.3%;
unicode-range: U+00B8;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 47.1%;
unicode-range: U+00B9;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 51.1%;
unicode-range: U+0031;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 59.6%;
unicode-range: U+0047, U+0051, U+00AE-00AF, U+2014;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 60.8%;
unicode-range: U+004F, U+00D2-00D6;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 65.4%;
unicode-range: U+0042-0045, U+004D, U+0052, U+0060, U+00B4, U+00C7-00CB, U+2020-2021;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 66.8%;
unicode-range: U+0041, U+0048, U+004B, U+0053, U+0055, U+005A, U+007C, U+00A6, U+00B7, U+00C0-00C5, U+00D9-00DC, U+2018-2019;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 69.2%;
unicode-range: U+003B, U+0046, U+004C, U+0050, U+00D0, U+00D7, U+00DE, U+00EC-00EF, U+2013, U+201E;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 71.6%;
unicode-range: U+0020, U+0027, U+003F, U+004E, U+0058-0059, U+005E, U+0067, U+006F, U+00A0, U+00BF, U+00D1, U+00D8, U+00DD, U+00F2-00F6, U+00FE, U+201C-201D, U+2026;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 73.7%;
unicode-range: U+0022, U+002B, U+0037, U+003C-003E, U+0056-0057, U+0062, U+0064, U+0068, U+006E, U+0070-0071, U+0073, U+0075, U+007A, U+00AC, U+00F0-00F1, U+00F8-00FC;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 76%;
unicode-range: U+002C, U+0054, U+005F, U+006C-006D, U+0079, U+00C6, U+00DF, U+00E6, U+00FD, U+00FF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 78.9%;
unicode-range: U+0024, U+0032-0033, U+0035-0036, U+0038-0039, U+0040, U+0063, U+0065, U+0069-006A, U+0076-0078, U+00A2, U+00A7, U+00AA, U+00B1-00B2, U+00B5, U+00E0-00E5, U+00E7-00EB, U+00F7;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 81.4%;
unicode-range: U+002E, U+0030, U+003A, U+004A, U+0061, U+006B, U+00AB, U+00BA-00BB;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 83.3%;
unicode-range: U+0021, U+0026, U+0049, U+0072, U+007E, U+00A1, U+00B3, U+00BD, U+00CC-00CF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 86.9%;
unicode-range: U+0025, U+0034, U+0074, U+007B, U+007D, U+00BC, U+2022;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 89.8%;
unicode-range: U+0066, U+00B0, U+20AC;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 93.5%;
unicode-range: U+0028-002A, U+00A3, U+00B6, U+00BE;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 95.5%;
unicode-range: U+00A5;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 100.3%;
unicode-range: U+002D, U+00A4, U+00AD, U+2010;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 103.6%;
unicode-range: U+005B, U+005D;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 107.4%;
unicode-range: U+00A9;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 110.8%;
unicode-range: U+0023, U+00A8;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 149.4%;
unicode-range: U+002F, U+005C;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 216%;
unicode-range: U+201A;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 77.9%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 36.3%;
unicode-range: U+00B8;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 43.5%;
unicode-range: U+00B9;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 46%;
unicode-range: U+0031;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 54.9%;
unicode-range: U+0060, U+007C, U+00A6, U+00B4, U+2018-2019;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 58.3%;
unicode-range: U+0047, U+004F, U+0051, U+00D2-00D6;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 59.8%;
unicode-range: U+00AE, U+00B7, U+00BF, U+2014, U+2020-2021;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 61.7%;
unicode-range: U+0027, U+0041, U+0043, U+004D, U+0052-0053, U+00C0-00C5, U+00C7, U+00EC-00EF, U+2026;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 64.2%;
unicode-range: U+002C, U+0044-0045, U+0058-005A, U+00C8-00CB, U+00D7, U+00DD;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 66.1%;
unicode-range: U+0022, U+0028-0029, U+0037, U+003F, U+0042, U+0046, U+0048, U+0050, U+0055-0057, U+00D9-00DC, U+00DE, U+2013;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 68.1%;
unicode-range: U+002E, U+004B, U+004E, U+0054, U+005F, U+00D1, U+00D8;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 70.3%;
unicode-range: U+003B, U+004C, U+00A7, U+00C6, U+00D0, U+00DF, U+00F8, U+201E;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 73.3%;
unicode-range: U+0020, U+0032-0033, U+0035-0036, U+0039, U+0065, U+0079-007A, U+00A0, U+00A2, U+00B2, U+00E0-00E6, U+00E8-00EB, U+00FD, U+00FF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 75.3%;
unicode-range: U+0024, U+002B, U+0034, U+0038, U+003A, U+003C-003E, U+0040, U+0061-0062, U+0064, U+0067-0068, U+006E-006F, U+0073, U+0075-0076, U+0078, U+00A1, U+00AA, U+00AC, U+00B5, U+00F1-00F6, U+00F9-00FC, U+00FE, U+201C-201D;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 77.4%;
unicode-range: U+0049, U+006D, U+0070-0071, U+0077, U+007E, U+00BA, U+00CC-00CF, U+00F0;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 80.2%;
unicode-range: U+0026, U+0030, U+0063, U+006B, U+00B1, U+00B3, U+00BC-00BD, U+00E7, U+00F7;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 81.7%;
unicode-range: U+006C, U+007B, U+007D;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 84.8%;
unicode-range: U+004A, U+005E, U+00AB, U+00BB, U+2022;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 88%;
unicode-range: U+0025, U+0072, U+00AF-00B0, U+00B6, U+00BE, U+20AC;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 91%;
unicode-range: U+0021, U+006A, U+00A3-00A4, U+00A8;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 93.7%;
unicode-range: U+002A, U+002D, U+0069, U+00A5, U+00AD, U+2010;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 96.1%;
unicode-range: U+0074;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 99.7%;
unicode-range: U+0066;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 107.5%;
unicode-range: U+0023, U+005B, U+005D;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 113.3%;
unicode-range: U+00A9;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 120.2%;
unicode-range: U+002F, U+005C;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 270.1%;
unicode-range: U+201A;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 76.4%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 45.3%;
unicode-range: U+00B8;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 47.1%;
unicode-range: U+00B9;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 51.1%;
unicode-range: U+0031;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 59.6%;
unicode-range: U+0047, U+0051, U+00AE-00AF, U+2014;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 60.8%;
unicode-range: U+004F, U+00D2-00D6;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 65.4%;
unicode-range: U+0042-0045, U+004D, U+0052, U+0060, U+00B4, U+00C7-00CB, U+2020-2021;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 66.8%;
unicode-range: U+0041, U+0048, U+004B, U+0053, U+0055, U+005A, U+007C, U+00A6, U+00B7, U+00C0-00C5, U+00D9-00DC, U+2018-2019;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 69.2%;
unicode-range: U+003B, U+0046, U+004C, U+0050, U+00D0, U+00D7, U+00DE, U+00EC-00EF, U+2013, U+201E;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 71.6%;
unicode-range: U+0020, U+0027, U+003F, U+004E, U+0058-0059, U+005E, U+0067, U+006F, U+00A0, U+00BF, U+00D1, U+00D8, U+00DD, U+00F2-00F6, U+00FE, U+201C-201D, U+2026;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 73.7%;
unicode-range: U+0022, U+002B, U+0037, U+003C-003E, U+0056-0057, U+0062, U+0064, U+0068, U+006E, U+0070-0071, U+0073, U+0075, U+007A, U+00AC, U+00F0-00F1, U+00F8-00FC;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 76%;
unicode-range: U+002C, U+0054, U+005F, U+006C-006D, U+0079, U+00C6, U+00DF, U+00E6, U+00FD, U+00FF;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 78.9%;
unicode-range: U+0024, U+0032-0033, U+0035-0036, U+0038-0039, U+0040, U+0063, U+0065, U+0069-006A, U+0076-0078, U+00A2, U+00A7, U+00AA, U+00B1-00B2, U+00B5, U+00E0-00E5, U+00E7-00EB, U+00F7;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 81.4%;
unicode-range: U+002E, U+0030, U+003A, U+004A, U+0061, U+006B, U+00AB, U+00BA-00BB;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 83.3%;
unicode-range: U+0021, U+0026, U+0049, U+0072, U+007E, U+00A1, U+00B3, U+00BD, U+00CC-00CF;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 86.9%;
unicode-range: U+0025, U+0034, U+0074, U+007B, U+007D, U+00BC, U+2022;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 89.8%;
unicode-range: U+0066, U+00B0, U+20AC;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 93.5%;
unicode-range: U+0028-002A, U+00A3, U+00B6, U+00BE;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 95.5%;
unicode-range: U+00A5;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 100.3%;
unicode-range: U+002D, U+00A4, U+00AD, U+2010;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 103.6%;
unicode-range: U+005B, U+005D;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 107.4%;
unicode-range: U+00A9;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 110.8%;
unicode-range: U+0023, U+00A8;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 149.4%;
unicode-range: U+002F, U+005C;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Barlow Condensed GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 216%;
unicode-range: U+201A;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Berlin Sans FB Demi (Office display face): Word renders the real bold cut;
* Arial Bold rescaled to its advances (probe 2026-09-17: 0.953x at 15pt), and the
* demi weight is bold at every requested weight
*
* Berlin Sans FB GO: probe 2026-09-17
* Berlin Sans FB Demi over Arial Bold 0.953x at 15pt */
@font-face {
font-family: 'Berlin Sans FB GO';
src: local('Arial-BoldMT'), local('Arial Bold'), url('./LiberationSans-Bold-CAnzDFU4.ttf') format('truetype');
size-adjust: 95.3%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Berlin Sans FB GO';
src: local('Arial-BoldMT'), local('Arial Bold'), url('./LiberationSans-Bold-CAnzDFU4.ttf') format('truetype');
size-adjust: 95.3%;
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Bookman Old Style ships only inside Office (Word's DFonts), so Chromium fell to the
* name-guess sans chain (Helvetica), 0.80x the Word line width (corpus 2026-10-29: 201
* matched lines, median 0.796). 2026-10-29 fitted one size-adjusted Caladea face per
* 1.5 % advance-ratio bucket; the widths matched but size-adjust scales the glyph height
* with the width, so one word mixed letter heights (S 1.33x beside U 1.04x, 'SUSUNAN
* ORGANISASI' in sample 028). The ranged faces are now one advance-matched derivative
* per cut (BookmanOldStyleGO-*.ttf, tools/build-metric-fonts.py): Caladea outlines
* scaled horizontally to each Word advance, one vertical factor, Word advances in hmtx.
* The rangeless Caladea face keeps the lowercase ratio for anything outside the Latin
* repertoire. Pitch stays the hhea 1.1738 the resolver reads from word-faces.json.
*
* Bookman Old Style GO: hmtx 2026-10-31
* advance-matched Caladea derivative (tools/build-metric-fonts.py): hmtx = Bookman Old Style DFonts advances exactly, outlines scaled horizontally per glyph, one vertical factor (H/x ink ratio 1.015-1.031); Word paces Bookman at its own advances (production PDF spans / hmtx = 1.000 over 96 lines)
* fonts: Bookman Old Style (Word DFonts: Bookman Old Style.ttf, Bold, Italic, Bold Italic); Caladea */
@font-face {
font-family: 'Bookman Old Style GO';
src: url('./Caladea-Regular-BTbwo_Qo.ttf');
size-adjust: 111.7%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Bookman Old Style GO';
src: url('./Caladea-Bold-D8qQyaGr.ttf');
size-adjust: 112.4%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Bookman Old Style GO';
src: url('./Caladea-Italic-B_Jy4Zu6.ttf');
size-adjust: 115.9%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Bookman Old Style GO';
src: url('./Caladea-BoldItalic-wZEKqfeH.ttf');
size-adjust: 118.7%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Bookman Old Style GO';
src: url('./BookmanOldStyleGO-Regular-CEwq2QFh.ttf');
unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+01FA-01FF, U+1E80-1E85, U+1EF2-1EF3, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Bookman Old Style GO';
src: url('./BookmanOldStyleGO-Bold-d9GalGN5.ttf');
unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+01FA-01FF, U+1E80-1E85, U+1EF2-1EF3, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Bookman Old Style GO';
src: url('./BookmanOldStyleGO-Italic-CSiN_J3E.ttf');
unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+01FA-01FF, U+1E80-1E85, U+1EF2-1EF3, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Bookman Old Style GO';
src: url('./BookmanOldStyleGO-BoldItalic-D8qZk1oq.ttf');
unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+01FA-01FF, U+1E80-1E85, U+1EF2-1EF3, U+2013-2015, U+2017-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Calibri ships its own compact Arabic; Carlito has none, so Arabic in a
* cs="Calibri" run would fall through to Geeza Pro (8.6% wider, taller box).
* Scale = shaped width of a 57-letter Arabic pangram in Calibri vs the bundled
* Noto Sans Arabic subset (harfbuzz over the real files, 2026-10-14: 278 vs
* 325 at 12 pt; bold cut 0.902, synthesized from the regular group). Box
* pinned to Calibri's hhea 1536/512 over 2048 so the fallback face never
* lifts a Calibri line.
*
* Calibri Arabic GO: hmtx 2026-10-14
* hb-shape of a 57-letter Arabic pangram, 278 vs 325 at 12pt; box = Calibri hhea 1536/512 over 2048
* fonts: Calibri; NotoSansArabic-Regular-subset.woff2 */
@font-face {
font-family: 'Calibri Arabic GO';
src: url('./NotoSansArabic-Regular-subset-D207GVuU.woff2') format('woff2');
size-adjust: 85.5%;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
ascent-override: 75%;
descent-override: 25%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Calibri Light (Office heading face) ships only inside Office; the chain drew it
* with Carlito, whose advances follow Calibri regular and run about 3 % wide on
* headings (validation corpus 2026-10-29). Faces are advance-ratio buckets over
* Carlito; Word has no bold cut and emboldens the light face, so bold runs keep
* the regular/italic buckets with Chromium's synthetic bold. Pitch stays Calibri's
* 1.22 (line-factors calibri rule).
*
* Calibri Light GO: hmtx 2026-10-29
* hmtx advance-ratio buckets (<= 1.5 % span, build-font-aliases.mjs --refit-buckets); Word lays Calibri Light out at its own advances
* fonts: Calibri Light (Word DFonts: calibril.ttf, calibrili.ttf); Carlito */
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 98.9%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 94.5%;
unicode-range: U+0022, U+002F, U+005C, U+007B, U+007D;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 96.9%;
unicode-range: U+0027, U+002E, U+0041, U+0049, U+004B, U+0058-0059, U+005B, U+005D, U+0069-006C, U+0076, U+0078-0079, U+00A8, U+00AB, U+00B7, U+00BB, U+00C0-00C5, U+00CC-00CF, U+00DD, U+00DF, U+00EC-00EF, U+00FD, U+00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 98.6%;
unicode-range: U+0025-0026, U+0028-0029, U+002C, U+003A-003B, U+0042, U+0044, U+004A, U+004D-0053, U+0055-0057, U+005A, U+0060-0062, U+0064, U+0066, U+0068, U+006D-0075, U+0077, U+007C, U+00AA, U+00B4-00B6, U+00B9-00BA, U+00BC-00BE, U+00D0-00D6, U+00D8-00DC, U+00DE, U+00E0-00E5, U+00F0-00F6, U+00F8-00FC, U+00FE, U+2018-201E, U+2026;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 99.9%;
unicode-range: U+0020-0021, U+0023-0024, U+002A-002B, U+002D, U+0030-0039, U+003C-0040, U+0043, U+0045-0048, U+004C, U+0054, U+005E-005F, U+0063, U+0065, U+0067, U+007A, U+007E, U+00A1-00A7, U+00A9, U+00AC, U+00AE-00B3, U+00BF, U+00C6-00CB, U+00D7, U+00E6-00EB, U+00F7, U+2013-2015, U+2017, U+2020-2022, U+20AC;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
size-adjust: 100.8%;
unicode-range: U+00B8;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 98.6%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 93.9%;
unicode-range: U+002F, U+005C;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 95.9%;
unicode-range: U+0022, U+0059, U+0069-006A, U+006C, U+007B, U+007D, U+00DD, U+00EC-00EF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 97.3%;
unicode-range: U+0027, U+002C, U+002E, U+0041, U+0049-004B, U+0052, U+0056, U+0058, U+005B, U+005D, U+0066, U+006B, U+0076-0079, U+00A8, U+00AB, U+00B7, U+00BB, U+00BE, U+00C0-00C5, U+00CC-00CF, U+00DF, U+00FD, U+00FF, U+2018-201E;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 98.7%;
unicode-range: U+0025-0026, U+0028-0029, U+003A-003B, U+0042, U+0044, U+0047-0048, U+004D-0051, U+0053-0055, U+0057, U+005A, U+0060-0062, U+0064-0065, U+0067-0068, U+006D-0075, U+007C, U+00AA, U+00B0, U+00B4-00B6, U+00B9-00BA, U+00BC-00BD, U+00C6, U+00D0-00D6, U+00D8-00DC, U+00DE, U+00E0-00E6, U+00E8-00EB, U+00F0-00F6, U+00F8-00FC, U+00FE, U+2026;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Calibri Light GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
size-adjust: 100%;
unicode-range: U+0020-0021, U+0023-0024, U+002A-002B, U+002D, U+0030-0039, U+003C-0040, U+0043, U+0045-0046, U+004C, U+005E-005F, U+0063, U+007A, U+007E, U+00A1-00A7, U+00A9, U+00AC, U+00AE-00AF, U+00B1-00B3, U+00B8, U+00BF, U+00C7-00CB, U+00D7, U+00E7, U+00F7, U+2013-2015, U+2017, U+2020-2022, U+20AC;
font-weight: normal;
font-style: italic;
font-display: block;
}
/* Century Gothic ships only inside Office (Word's DFonts), so Chromium fell to
* the Helvetica-class sans: ~9% narrower per body line (hmtx of both fonts,
* 2026-09-12). Its geometry is not a uniform scale of Liberation Sans: the
* lowercase runs +10.6% (+1.7% bold), capitals -5% (-7.3% bold), digits, space
* and punctuation within 1%, so per-case faces carry the adjustment (later
* faces win inside their unicode-range). Latin-1 accented letters measure
* the same per-case ratios and share the faces; Latin Extended-A does not. Pitch stays the probed 1.226
* (`lineHeightFactor`).
*
* Century Gothic GO: hmtx 2026-09-12
* hmtx per case class
* fonts: Century Gothic (Word DFonts); LiberationSans */
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 110.6%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 95%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 101.7%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 92.7%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 110.6%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 95%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 101.7%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Century Gothic GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 92.7%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Consolas ships only inside Office (Word's DFonts), so Chromium never resolves
* it and the mono chain fell to Menlo, whose 0.602em advance runs 9.5% wider
* than Consolas' 0.550em (hmtx, both fonts): indented code drifted right and
* long lines wrapped. The size-adjusted alias keeps advances at Consolas' pitch;
* a locally installed Consolas still precedes it in the chain.
*
* Consolas GO: hmtx 2026-09-11
* hmtx 0.550em vs 0.602em
* fonts: Consolas (Word DFonts); Menlo */
@font-face {
font-family: 'Consolas GO';
src: local('Menlo-Regular'), local('CourierNewPSMT'), url('./LiberationMono-Regular-CscJ8ftk.ttf');
size-adjust: 91.3%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Consolas GO';
src: local('Menlo-Bold'), local('CourierNewPS-BoldMT'), url('./LiberationMono-Bold-JpIqZVyK.ttf');
size-adjust: 91.3%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Consolas GO';
src: local('Menlo-Italic'), local('CourierNewPS-ItalicMT'), url('./LiberationMono-Italic-BaW6sbi8.ttf');
size-adjust: 91.3%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Consolas GO';
src: local('Menlo-BoldItalic'), local('CourierNewPS-BoldItalicMT'), url('./LiberationMono-BoldItalic-CW50-m9W.ttf');
size-adjust: 91.3%;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Office-private CJK faces (DengXian, PMingLiU) are not visible to Chromium, so
* their stand-ins lay lines out with the stand-in's own ascent/descent; Word
* lays them out with the real face: line = the probed factor, split as the
* face's hhea ascent/descent plus half the remainder on each side (DengXian
* 0.810/0.232 -> 0.969/0.391 of 1.36; PMingLiU 0.801/0.199 -> 0.952/0.351 of
* 1.3029). These aliases lead the chains and carry that geometry over the
* stand-in's glyphs; U+0020 in the range makes them the primary face for the
* line box, other scripts fall through to the chain.
*
* DengXian GO: probe 2026-09-23
* probed line factor 1.36 split as DengXian hhea 0.810/0.232 plus half the remainder each side */
@font-face {
font-family: 'DengXian GO';
src: local('DengXian'), local('PingFangSC-Regular'), local('PingFang SC Regular');
unicode-range: U+0020, U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
ascent-override: 96.9%;
descent-override: 39.1%;
line-gap-override: 0%;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DengXian GO';
src: local('DengXian-Bold'), local('DengXian Bold'), local('PingFangSC-Semibold'), local('PingFang SC Semibold');
unicode-range: U+0020, U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
ascent-override: 96.9%;
descent-override: 39.1%;
line-gap-override: 0%;
font-weight: bold;
font-style: normal;
}
/* Dubai (M365 cloud face Word renders real, never installed locally): Word
* line width over the Noto Sans subset's hb-shape width of the same text
* spreads 0.89-1.01 across 300 body lines (median 0.942, per-glyph ratios
* differ), and 0.945 still wraps one line more than Word per paragraph; 0.88
* reproduces Word's paragraph breaks on the corpus sample (2026-10-28). Box
* pinned to the embedded subset's hhea 1129/559 so the line paces 1.688.
*
* Dubai GO: corpus 2026-10-28
* Word line width over hb-shape of the Noto Sans Arabic subset across 300 body lines (median 0.942); 0.88 reproduces the paragraph breaks; box = embedded subset hhea 1129/559 */
@font-face {
font-family: 'Dubai GO';
src: url('./NotoSansArabic-Regular-subset-D207GVuU.woff2') format('woff2');
size-adjust: 88%;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
ascent-override: 112.9%;
descent-override: 55.9%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Garamond GO: hmtx 2026-10-27
* word-truths 2026-10-27: per-class advances
* fonts: Garamond (macOS asset ttc); LiberationSerif */
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf');
size-adjust: 100%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf');
size-adjust: 95.4%;
unicode-range: U+0061-007A;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf');
size-adjust: 94.9%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf');
size-adjust: 100.3%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf');
size-adjust: 93.8%;
unicode-range: U+0030-0039;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf');
size-adjust: 104.9%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf');
size-adjust: 100%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf');
size-adjust: 98.3%;
unicode-range: U+0061-007A;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf');
size-adjust: 100.2%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf');
size-adjust: 99.1%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf');
size-adjust: 92.3%;
unicode-range: U+0030-0039;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf');
size-adjust: 108%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Italic-Bwtmn-ni.ttf');
size-adjust: 100%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Italic-Bwtmn-ni.ttf');
size-adjust: 82.3%;
unicode-range: U+0061-007A;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Italic-Bwtmn-ni.ttf');
size-adjust: 76.8%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Italic-Bwtmn-ni.ttf');
size-adjust: 104.3%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Italic-Bwtmn-ni.ttf');
size-adjust: 93.8%;
unicode-range: U+0030-0039;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-Italic-Bwtmn-ni.ttf');
size-adjust: 101.1%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-BoldItalic-DHf5skZ4.ttf');
size-adjust: 100%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-BoldItalic-DHf5skZ4.ttf');
size-adjust: 98.3%;
unicode-range: U+0061-007A;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-BoldItalic-DHf5skZ4.ttf');
size-adjust: 94.5%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-BoldItalic-DHf5skZ4.ttf');
size-adjust: 99.6%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-BoldItalic-DHf5skZ4.ttf');
size-adjust: 93.8%;
unicode-range: U+0030-0039;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Garamond GO';
src: url('./LiberationSerif-BoldItalic-DHf5skZ4.ttf');
size-adjust: 110.2%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Lucida Handwriting ships with Office (Word's DFonts) and Windows, not macOS
* or Linux, so Chromium fell to the Helvetica-class sans: ~23% narrower per
* body line and 1.15 pitch instead of its 1.3794. Against Liberation Sans
* Italic (hmtx of both fonts over the script's Latin, 2026-09-24) its
* lowercase runs +30.7%, capitals +8.2%, digits +21.3%, space and punctuation
* +22.5%, so per-case faces carry the adjustment. Registered weight-normal
* only: the font has a single cut and Word synthesizes bold without changing
* advances.
*
* Lucida Handwriting GO: hmtx 2026-09-24
* hmtx per case class over the script Latin
* fonts: Lucida Handwriting (Word DFonts); LiberationSans-Italic.ttf */
@font-face {
font-family: 'Lucida Handwriting GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 122.5%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lucida Handwriting GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 130.7%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lucida Handwriting GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 108.2%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lucida Handwriting GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 121.3%;
unicode-range: U+0030-0039;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Ethiopic faces (Nyala/Ebrima/Abyssinica) are missing on macOS and fall back
* to Kefa, 1.35-1.4x wider than Word's Nyala. Only routed when an Ethiopic
* face is declared, so no unicode-range needed; on Windows the declared name
* itself resolves ahead of this alias.
* Chromium local() matches PostScript/full names, not family names.
*
* Lycero Office Ethiopic: corpus 2026-08-13
* regression sample 39: line breaks match Word at 72%; the residual page-4 spill is line-height, not width */
@font-face {
font-family: 'Lycero Office Ethiopic';
src: local('Kefa-Regular'), local('Kefa Regular'), local('Kefa');
size-adjust: 72%;
font-weight: normal;
font-style: normal;
}
/* Latin stand-in for Microsoft YaHei on machines without it: YaHei's tabular
* digits advance 0.586em (bold 0.617), Helvetica's 0.556, so the size-adjusted
* alias keeps digit-heavy cells wrapping like Word. A locally installed YaHei
* precedes it in the chain.
*
* Lycero Office YaHei Latin: hmtx 2026-09-23
* tabular digits 0.586em (bold 0.617) vs Helvetica 0.556
* fonts: Microsoft YaHei; Helvetica */
@font-face {
font-family: 'Lycero Office YaHei Latin';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 106%;
unicode-range: U+0020-007E;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lycero Office YaHei Latin';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 108%;
unicode-range: U+0020-007E;
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Meiryo GO: probe 2026-09-03
* Word probe from meiryo.ttc: Latin Verdana-derived at 0.9705x (bold 0.948x) */
@font-face {
font-family: 'Meiryo GO';
src: local('Verdana'), local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 97.05%;
unicode-range: U+0020-007E, U+00A0-024F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Meiryo GO';
src: local('Verdana-Bold'), local('Verdana Bold'), local('HiraginoSans-W6');
size-adjust: 94.8%;
unicode-range: U+0020-007E, U+00A0-024F;
font-weight: bold;
font-style: normal;
}
/* Meiryo / Meiryo UI (Word-private on macOS; Word renders them real, probe
* 2026-09-03 from Word's meiryo.ttc). Meiryo UI kana are proportional
* (text-weighted mean 0.769em, bold 0.820em), U+30FC 0.816/0.882em,
* ideographic space and 、。 0.664em, corner/angle brackets and ・ 0.5em, at
* full glyph height; kanji and （）：；！？ stay 1em and fall through to the
* chain. The bundled Lycero Office UI Kana JP faces (tools/build-meiryo-ui-kana-
* font.py: Noto Sans JP outlines condensed horizontally to Meiryo UI's exact
* per-glyph advances) carry those ranges — a size-adjust alias would shrink
* the height too and leave kana at ~77% next to full-size kanji. Latin in
* both cuts is Verdana-derived at 0.9705x (bold 0.948x); Hiragino W3/W6
* backstops hosts without Verdana. Installed Meiryo (Windows) still precedes
* these aliases in the chain.
*
* Meiryo UI GO: probe 2026-09-03
* Word probe from meiryo.ttc: Latin Verdana-derived at 0.9705x (bold 0.948x), kana via the bundled Lycero Office UI Kana JP faces */
@font-face {
font-family: 'Meiryo UI GO';
src: url('./GenOfficeUIKanaJP-Regular-Bj_7JzTT.woff2') format('woff2');
unicode-range: U+3000-3002, U+3008-3011, U+3014-3015, U+3041-3096, U+3099-30FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Meiryo UI GO';
src: url('./GenOfficeUIKanaJP-Bold-DbcaglVT.woff2') format('woff2');
unicode-range: U+3000-3002, U+3008-3011, U+3014-3015, U+3041-3096, U+3099-30FF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Meiryo UI GO';
src: local('Verdana'), local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 97.05%;
unicode-range: U+0020-007E, U+00A0-024F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Meiryo UI GO';
src: local('Verdana-Bold'), local('Verdana Bold'), local('HiraginoSans-W6');
size-adjust: 94.8%;
unicode-range: U+0020-007E, U+00A0-024F;
font-weight: bold;
font-style: normal;
}
/* Merriweather (M365 cloud face Word renders real, hhea 1.257): Georgia
* rescaled to its advances per cut (cloud-font hmtx over sample lines:
* regular 1.120x, bold 0.978x, italic 1.033x, bold italic 0.897x)
*
* Merriweather GO: hmtx 2026-10-20
* cloud-font hmtx over sample lines per cut: regular 1.120x, bold 0.978x, italic 1.033x, bold italic 0.897x
* fonts: Merriweather (M365 cloud cuts); Georgia */
@font-face {
font-family: 'Merriweather GO';
src: local('Georgia');
size-adjust: 112%;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Merriweather GO';
src: local('Georgia-Bold'), local('Georgia Bold');
size-adjust: 97.8%;
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Merriweather GO';
src: local('Georgia-Italic'), local('Georgia Italic');
size-adjust: 103.3%;
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Merriweather GO';
src: local('Georgia-BoldItalic'), local('Georgia Bold Italic');
size-adjust: 89.7%;
font-weight: bold;
font-style: italic;
}
/* Montserrat is an M365 cloud font Word downloads and renders real even when
* the fontTable names an altName for it. Its geometry is not a uniform scale
* of Liberation Sans (hmtx of Word's cached faces, 2026-09-23): lowercase
* +17.3% (+12.1% bold), capitals +5.8%, digits +4.8% (+9.5% bold), the space
* and no-break space -5.7% (+1.9% bold), Cyrillic lowercase +13.9% (+9.9%
* bold) and capitals +10%, punctuation and extended Cyrillic +11.5%, so
* per-class faces carry the adjustment (later faces win inside their
* unicode-range). Latin-1 accented capitals share the capitals face; the
* accented lowercase set is vowel-heavy and measures +10% (usage-weighted),
* so it gets a face of its own. Pitch stays the probed 1.219
* (`lineHeightFactor`).
*
* Montserrat GO: hmtx 2026-09-23
* hmtx per class, usage-weighted for accented lowercase
* fonts: Montserrat (Word cloud-font cache); LiberationSans */
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 111.5%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 117.3%;
unicode-range: U+0061-007A;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 110%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 105.8%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 104.8%;
unicode-range: U+0030-0039;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 94.3%;
unicode-range: U+0020, U+00A0;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 113.9%;
unicode-range: U+0430-044F;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 110%;
unicode-range: U+0410-042F;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 113%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 112.1%;
unicode-range: U+0061-007A;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 111.3%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 106.9%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 109.5%;
unicode-range: U+0030-0039;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 101.9%;
unicode-range: U+0020, U+00A0;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 109.9%;
unicode-range: U+0430-044F;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 108.8%;
unicode-range: U+0410-042F;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 112%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 117.9%;
unicode-range: U+0061-007A;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 113.9%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 105.8%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 104.8%;
unicode-range: U+0030-0039;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 94.3%;
unicode-range: U+0020, U+00A0;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 111.4%;
unicode-range: U+0430-044F;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 110%;
unicode-range: U+0410-042F;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 110%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 112.5%;
unicode-range: U+0061-007A;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 114.2%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 106.9%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 109.5%;
unicode-range: U+0030-0039;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 101.9%;
unicode-range: U+0020, U+00A0;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 106.9%;
unicode-range: U+0430-044F;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Montserrat GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 109.1%;
unicode-range: U+0410-042F;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* MS Gothic family (Word-private on macOS, so the JA chain lands on Hiragino
* Sans whose Latin is proportional and kana fullwidth). Advances measured from
* Word's msgothic.ttc and confirmed by a Word probe (2026-09-03): MS Gothic
* Latin is monospaced 0.5em; MS PGothic / MS UI Gothic have proportional kana
* (frequency-weighted hiragana 0.900/0.776em, katakana 0.869/0.744em, long
* vowel mark 0.961/0.816em), half-width brackets/colons, 0.664em ideographic
* space/comma/period and Arial-class Latin at 0.9137x (space 1.0967x). Only
* the ranges that differ from the Hiragino stand-in are claimed; kanji and the
* fullwidth marks that stay 1em fall through to the chain. Latin-1 symbols the
* real faces draw fullwidth (section/degree/plus-minus/multiply/divide...) come
* from the bundled CJK subset where it has 1em glyphs and from the mono face
* scaled up otherwise, since the chain's JA faces expose no Latin-1. The kana
* and punctuation ranges live in separate "JA GO" families so a dual-slot run
* keeps only the Latin alias in its ascii head and its eastAsia face still owns
* the kana. Real faces (Windows) precede these aliases in the chain.
*
* MS Gothic GO: probe 2026-09-03
* advances from Word msgothic.ttc confirmed by a Word probe: Latin monospaced 0.5em */
@font-face {
font-family: 'MS Gothic GO';
src: url('./LiberationMono-Regular-CscJ8ftk.ttf') format('truetype');
size-adjust: 83.333%;
unicode-range: U+0020-007E, U+00A0-00A6, U+00A9-00AF, U+00B2-00B3, U+00B5, U+00B7-00D6, U+00D8-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS Gothic GO';
src: url('./NotoSansCJKsc-Regular-subset-CI7WjJWU.woff2') format('woff2');
unicode-range: U+00A7, U+00B1, U+00B6, U+00D7, U+00F7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS Gothic GO';
src: url('./LiberationMono-Regular-CscJ8ftk.ttf') format('truetype');
size-adjust: 166.667%;
unicode-range: U+00A8, U+00B0, U+00B4;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* MS Mincho: the same fixed-pitch half-width Latin as MS Gothic (Word probe 2026-09-17)
*
* MS Mincho GO: probe 2026-09-17
* Word probe: the same fixed-pitch half-width Latin as MS Gothic */
@font-face {
font-family: 'MS Mincho GO';
src: url('./LiberationMono-Regular-CscJ8ftk.ttf') format('truetype');
size-adjust: 83.333%;
unicode-range: U+0020-007E, U+00A0-00A6, U+00A9-00AF, U+00B2-00B3, U+00B5, U+00B7-00D6, U+00D8-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS Mincho GO';
src: url('./NotoSansCJKsc-Regular-subset-CI7WjJWU.woff2') format('woff2');
unicode-range: U+00A7, U+00B1, U+00B6, U+00D7, U+00F7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS Mincho GO';
src: url('./LiberationMono-Regular-CscJ8ftk.ttf') format('truetype');
size-adjust: 166.667%;
unicode-range: U+00A8, U+00B0, U+00B4;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* MS PGothic GO: probe 2026-09-03
* advances from Word msgothic.ttc confirmed by a Word probe: Arial-class Latin at 0.9137x (space 1.0967x) */
@font-face {
font-family: 'MS PGothic GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
size-adjust: 91.37%;
unicode-range: U+0021-007E, U+00A1-00A6, U+00A8-00AF, U+00B2-00D6, U+00D8-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS PGothic GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
size-adjust: 109.67%;
unicode-range: U+0020, U+00A0;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS PGothic GO';
src: url('./NotoSansCJKsc-Regular-subset-CI7WjJWU.woff2') format('woff2');
unicode-range: U+00A7, U+00B1, U+00D7, U+00F7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS PGothic GO';
src: url('./LiberationMono-Regular-CscJ8ftk.ttf') format('truetype');
size-adjust: 166.667%;
unicode-range: U+00B0;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* MS PGothic JA GO: probe 2026-09-03
* advances from Word msgothic.ttc: proportional kana (hiragana 0.900em, katakana 0.869em, long vowel mark 0.961em), half-width brackets, 0.664em ideographic punctuation */
@font-face {
font-family: 'MS PGothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 90.03%;
unicode-range: U+3041-3096, U+3099-309F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MS PGothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 86.88%;
unicode-range: U+30A1-30FA, U+30FD-30FF;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MS PGothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 96.09%;
unicode-range: U+30FC;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MS PGothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 66.4%;
unicode-range: U+3000-3002;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MS PGothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 50%;
unicode-range: U+3008-3011, U+3014-3015, U+30FB, U+FF08-FF09, U+FF1A-FF1B, U+FF3B, U+FF3D-FF3E, U+FF40, U+FF5B, U+FF5D;
font-weight: normal;
font-style: normal;
}
/* MS UI Gothic GO: probe 2026-09-03
* advances from Word msgothic.ttc confirmed by a Word probe: Arial-class Latin at 0.9137x (space 1.0967x) */
@font-face {
font-family: 'MS UI Gothic GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
size-adjust: 91.37%;
unicode-range: U+0021-007E, U+00A1-00A6, U+00A8-00AF, U+00B2-00D6, U+00D8-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS UI Gothic GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
size-adjust: 109.67%;
unicode-range: U+0020, U+00A0;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS UI Gothic GO';
src: url('./NotoSansCJKsc-Regular-subset-CI7WjJWU.woff2') format('woff2');
unicode-range: U+00A7, U+00B1, U+00D7, U+00F7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'MS UI Gothic GO';
src: url('./LiberationMono-Regular-CscJ8ftk.ttf') format('truetype');
size-adjust: 166.667%;
unicode-range: U+00B0;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* MS UI Gothic JA GO: probe 2026-09-03
* advances from Word msgothic.ttc: proportional kana (hiragana 0.776em, katakana 0.744em, long vowel mark 0.816em), half-width brackets, 0.664em ideographic punctuation */
@font-face {
font-family: 'MS UI Gothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 77.58%;
unicode-range: U+3041-3096, U+3099-309F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MS UI Gothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 74.42%;
unicode-range: U+30A1-30FA, U+30FD-30FF;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MS UI Gothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 81.64%;
unicode-range: U+30FC;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MS UI Gothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 66.4%;
unicode-range: U+3000-3002;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MS UI Gothic JA GO';
src: local('Hiragino Sans'), local('HiraginoSans-W3');
size-adjust: 50%;
unicode-range: U+3008-3011, U+3014-3015, U+30FB, U+FF08-FF09, U+FF1A-FF1B, U+FF3B, U+FF3D-FF3E, U+FF40, U+FF5B, U+FF5D;
font-weight: normal;
font-style: normal;
}
/* Noto Naskh Arabic SA: hmtx 2026-09-11
* hb-shape width of a long Arabic body, 0.924 (bold 0.916)
* fonts: Simplified Arabic (M365 cloud); NotoNaskhArabic-Regular-subset.woff2 */
@font-face {
font-family: 'Noto Naskh Arabic SA';
src: url('./NotoNaskhArabic-Regular-subset-DQSqx2ZA.woff2') format('woff2');
size-adjust: 92.4%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Stand-ins for Traditional/Simplified Arabic (compact Windows naskh faces
* Word downloads from M365 and renders real). Ratios are the shaped width of
* a long Arabic body in the cloud font vs the bundled Noto Naskh
* subset (harfbuzz over the real files, 2026-09-11): Traditional Arabic
* 0.800 (bold cut 0.834), Simplified Arabic 0.924 (bold 0.916). Registered
* weight-normal only so Blink still synthesizes bold; bold runs keep the
* regular ratio. Canvas measureText resolves the same @font-face, so metrics
* follow automatically.
*
* Noto Naskh Arabic TA: hmtx 2026-09-11
* hb-shape width of a long Arabic body, 0.800 (bold 0.834)
* fonts: Traditional Arabic (M365 cloud); NotoNaskhArabic-Regular-subset.woff2 */
@font-face {
font-family: 'Noto Naskh Arabic TA';
src: url('./NotoNaskhArabic-Regular-subset-DQSqx2ZA.woff2') format('woff2');
size-adjust: 80%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Missing Arabic serif names (incl. Persian B/XB/IR faces) substitute wholesale
* to Times New Roman in Word; the bundled Naskh subset shapes 1.125× (Arabic) /
* 1.074× (Persian) wider than Times (M3 probe 2026-08-14, whole-sentence shaped
* R). 90% splits the difference; same value as the TA alias above but from a
* different calibration source, so they stay separate (like the W alias).
*
* Noto Naskh Arabic TNR: probe 2026-08-14
* M3 probe: bundled Naskh subset shapes 1.125x (Arabic) / 1.074x (Persian) wider than Times New Roman */
@font-face {
font-family: 'Noto Naskh Arabic TNR';
src: url('./NotoNaskhArabic-Regular-subset-DQSqx2ZA.woff2') format('woff2');
size-adjust: 90%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Documents declaring Noto Naskh/Sans Arabic by name resolve to the bundled
* subsets, which run ~13% wider than Word's rendering of those faces; kept
* separate from the 90% TA alias (different calibration source).
*
* Noto Naskh Arabic W: legacy 2026-08-13
* bundled subset ~13% wider than Word, calibration source not recorded */
@font-face {
font-family: 'Noto Naskh Arabic W';
src: url('./NotoNaskhArabic-Regular-subset-DQSqx2ZA.woff2') format('woff2');
size-adjust: 87%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Noto Sans Arabic W: legacy 2026-08-13
* bundled subset ~13% wider than Word, calibration source not recorded */
@font-face {
font-family: 'Noto Sans Arabic W';
src: url('./NotoSansArabic-Regular-subset-D207GVuU.woff2') format('woff2');
size-adjust: 87%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Nunito Sans is an Office cloud font Word downloads and renders real (probe
* 2026-08-23). Its advances run 4.4% wider than Helvetica (272.93 vs 261.5pt
* per probe string @12pt, measured from Word's cached NunitoSans-Regular), so
* the size-adjusted alias keeps line wraps aligned with Word. A locally
* installed Nunito still precedes this alias in the chain.
*
* Nunito Sans GO: probe 2026-08-23
* Word cached NunitoSans-Regular, 272.93 vs 261.5pt per probe string at 12pt against Helvetica */
@font-face {
font-family: 'Nunito Sans GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 104.4%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Nunito Sans GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 104.4%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Nunito Sans GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 104.4%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Nunito Sans GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 104.4%;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* weight-normal only: bold synthesizes like Word's faux-bold PMingLiU
*
* PMingLiU GO: probe 2026-09-23
* probed line factor 1.3029 split as PMingLiU hhea 0.801/0.199 plus half the remainder each side */
@font-face {
font-family: 'PMingLiU GO';
src: local('PMingLiU'), local('STSongti-TC-Regular'), local('Songti TC Regular');
unicode-range: U+0020, U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
ascent-override: 95.2%;
descent-override: 35.1%;
line-gap-override: 0%;
font-weight: normal;
font-style: normal;
}
/* Roboto / Garamond: faces Word for Mac lays out for real (cloud or Office
* copies) that Chromium cannot see here. Per-class size-adjusted Liberation
* aliases carry their advances (word-truths 2026-10-27: Roboto from the
* Google files, Garamond from the macOS asset ttc).
*
* Roboto GO: hmtx 2026-10-27
* word-truths 2026-10-27: per-class advances
* fonts: Roboto (Google files); LiberationSans */
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 89.1%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 101.9%;
unicode-range: U+0061-007A;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 98%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 92.5%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 101%;
unicode-range: U+0030-0039;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 95.4%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 89.6%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 94.2%;
unicode-range: U+0061-007A;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 94.5%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 92.2%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 103.2%;
unicode-range: U+0030-0039;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 92.9%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 88.2%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 99.9%;
unicode-range: U+0061-007A;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 96%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 90.4%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 98.9%;
unicode-range: U+0030-0039;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 93.7%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 88.8%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 92.3%;
unicode-range: U+0061-007A;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 92.6%;
unicode-range: U+00DF-00F6, U+00F8-00FF;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 90.1%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 101%;
unicode-range: U+0030-0039;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Roboto GO';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 91.2%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Sakkal Majalla (M365 cloud face Word renders real) is a compact naskh
* with a narrow Latin. Class scales are shaped widths of a 64k-char Arabic
* report in the cloud cuts vs the stand-in (harfbuzz over the real files,
* 2026-09-30): Arabic letters 0.8055 of the Noto Naskh subset (bold cut
* 0.841; registered weight-normal so Blink synthesizes bold), Arabic-Indic
* digits 0.9396, and vs Liberation Sans/Helvetica: ASCII digits 0.7287,
* space 0.545, punctuation 0.6667, letters 0.67, dashes 0.9113, other Latin-1
* and general punctuation symbols 0.66 (they would otherwise fall to Al Bayan,
* whose 1.5 em box stretches the line). Weight-normal only: Blink
* serves one weight group per family, so a bold group without the Arabic
* ranges would send bold Arabic past the alias to Geeza Pro; bold runs are
* synthesized and keep the regular ratios (bold cuts run 4-12% wider).
* Letters sit in a second family so a run's own ascii face still wins them
* (chain splice in line-metrics.ts). Every face pins the Word hhea box
* 1810/1050 over 2048.
*
* Sakkal Majalla GO: hmtx 2026-09-30
* hb-shape widths of a 64k-character Arabic report per class; box = Word hhea 1810/1050 over 2048
* fonts: Sakkal Majalla (M365 cloud); NotoNaskhArabic-Regular-subset.woff2; LiberationSans-Regular.ttf */
@font-face {
font-family: 'Sakkal Majalla GO';
src: url('./NotoNaskhArabic-Regular-subset-DQSqx2ZA.woff2') format('woff2');
size-adjust: 80.55%;
unicode-range: U+0600-065F, U+066A-06EF, U+06FA-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
ascent-override: 88.38%;
descent-override: 51.27%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Sakkal Majalla GO';
src: url('./NotoNaskhArabic-Regular-subset-DQSqx2ZA.woff2') format('woff2');
size-adjust: 93.96%;
unicode-range: U+0660-0669, U+06F0-06F9;
ascent-override: 88.38%;
descent-override: 51.27%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Sakkal Majalla GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 72.87%;
unicode-range: U+0030-0039;
ascent-override: 88.38%;
descent-override: 51.27%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Sakkal Majalla GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 54.5%;
unicode-range: U+0020, U+00A0;
ascent-override: 88.38%;
descent-override: 51.27%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Sakkal Majalla GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 66.67%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
ascent-override: 88.38%;
descent-override: 51.27%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Sakkal Majalla GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 91.13%;
unicode-range: U+2010-2015;
ascent-override: 88.38%;
descent-override: 51.27%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Sakkal Majalla GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 66%;
unicode-range: U+00A1-00BF, U+00D7, U+00F7, U+2016-2027, U+2212, U+2248, U+2260-2265;
ascent-override: 88.38%;
descent-override: 51.27%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Sakkal Majalla Latin GO: hmtx 2026-09-30
* hb-shape widths of a 64k-character Arabic report, Latin letters 0.67
* fonts: Sakkal Majalla (M365 cloud); LiberationSans-Regular.ttf */
@font-face {
font-family: 'Sakkal Majalla Latin GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 67%;
unicode-range: U+0041-005A, U+0061-007A;
ascent-override: 88.38%;
descent-override: 51.27%;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Segoe UI is an M365 cloud font Word downloads and renders real; where it is
* not installed Chromium falls to Helvetica/Arial, whose letters run wider.
* Whole-face ratios (shaped widths of a long body per cut, 2026-09-11: 0.986
* regular, 0.987 bold) still moved a wrap every few lines on English body text
* (validation corpus 2026-10-29: 14 Segoe UI documents at 5.2 % mean deviation);
* the faces are now advance-ratio buckets over Helvetica (Word advance / Helvetica
* advance per Latin-1 glyph, greedy buckets no wider than 1.5 %, one size-adjusted
* face per bucket with an explicit unicode-range, the rangeless face at the median
* lowercase ratio). An installed Segoe UI precedes this alias in the chain.
*
* Segoe UI GO: hmtx 2026-10-29
* hmtx advance-ratio buckets (<= 1.5 % span, build-font-aliases.mjs --refit-buckets); Word lays the cloud face out at its own advances
* fonts: Segoe UI (Office CloudFonts cache: Regular, Bold, Italic, Bold Italic); Helvetica (macOS Helvetica.ttc) */
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 103.4%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 61.6%;
unicode-range: U+00B8;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 67.4%;
unicode-range: U+2020-2021;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 71.9%;
unicode-range: U+004A, U+20AC;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 73.3%;
unicode-range: U+00BF, U+2026;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 74.6%;
unicode-range: U+005F;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 75.8%;
unicode-range: U+0045, U+00C8-00CB;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 78%;
unicode-range: U+002C, U+002E, U+003A-003B, U+00B7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 80.3%;
unicode-range: U+003F, U+0046, U+0053, U+0060, U+00A7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 83.3%;
unicode-range: U+0050, U+0052, U+0059, U+00DD-00DE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 85.3%;
unicode-range: U+0043, U+004C, U+0054, U+0073, U+00A1, U+00B4, U+00B6, U+00C7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 86.8%;
unicode-range: U+0042, U+004B, U+00C6, U+00EC-00EF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 88.6%;
unicode-range: U+0047, U+0058, U+00DF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 90.5%;
unicode-range: U+0028-0029, U+007A-007B, U+007D, U+00AB, U+00BB, U+2013;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 91.8%;
unicode-range: U+0025, U+0061, U+0063, U+0078, U+007C, U+00A6, U+00E0-00E5, U+00E7;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 93.9%;
unicode-range: U+0040, U+0056, U+005A, U+0065, U+00B0, U+00E6, U+00E8-00EB;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 95.5%;
unicode-range: U+0049, U+0055, U+0076, U+00CC-00CF, U+00D9-00DC, U+00F8;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 96.9%;
unicode-range: U+0024, U+0030-0039, U+0041, U+0044, U+004F, U+0051, U+0079, U+00A2-00A3, U+00A5, U+00C0-00C5, U+00D0, U+00D2-00D6, U+00D8, U+00FD, U+00FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 98.8%;
unicode-range: U+0020, U+0048, U+0057, U+006B, U+00A0;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 100.1%;
unicode-range: U+0077, U+00A4, U+00B5, U+00F0, U+2014-2015;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 102.2%;
unicode-range: U+0021, U+0068, U+006E, U+0075, U+00F1, U+00F9-00FC, U+2018-201B;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 103.7%;
unicode-range: U+004E, U+006D, U+0072, U+00D1;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 105.6%;
unicode-range: U+0023, U+0062, U+0064, U+0067, U+006F-0071, U+00AA, U+00B9, U+00F2-00F6, U+00FE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 108.2%;
unicode-range: U+002A, U+004D, U+005B, U+005D, U+00BC;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 109.6%;
unicode-range: U+0022, U+0069-006A, U+006C, U+00B2-00B3;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 112.8%;
unicode-range: U+0066, U+00BD, U+201C-201E;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 114.2%;
unicode-range: U+00BE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 117%;
unicode-range: U+002B, U+003C-003E, U+007E, U+00AC, U+00D7, U+2022;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 117.9%;
unicode-range: U+00BA;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 120.4%;
unicode-range: U+0026-0027, U+002D, U+00A9, U+00AD-00AE;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 122%;
unicode-range: U+0074;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 124.6%;
unicode-range: U+00A8, U+00AF, U+00B1, U+00F7, U+2017;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 136.4%;
unicode-range: U+005C;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 140.2%;
unicode-range: U+002F;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 145.8%;
unicode-range: U+005E;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 101.4%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 64.7%;
unicode-range: U+00B8;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 71.7%;
unicode-range: U+003F, U+00BF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 73%;
unicode-range: U+2020-2021;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 74.6%;
unicode-range: U+005F;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 77.3%;
unicode-range: U+20AC;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 79.7%;
unicode-range: U+0045, U+004A, U+0073, U+00C8-00CB;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 81.4%;
unicode-range: U+003A-003B;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 83.9%;
unicode-range: U+004C, U+0053;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 85.9%;
unicode-range: U+0046, U+0063, U+00E7;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 86.7%;
unicode-range: U+0043, U+00A7, U+00C7;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 89.5%;
unicode-range: U+0042, U+004B, U+2013;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 91.1%;
unicode-range: U+0047, U+0052, U+0059, U+00B4, U+00B6, U+00DD, U+2026;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 92.4%;
unicode-range: U+0050, U+00DE, U+00E6;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 94.4%;
unicode-range: U+0060, U+007B, U+007D, U+00C6;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 95.6%;
unicode-range: U+0054, U+007A, U+00B0;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 97.2%;
unicode-range: U+0025, U+002C, U+002E, U+0040-0041, U+004F, U+0051, U+0061, U+0065, U+0076, U+0079, U+00B7, U+00C0-00C5, U+00D2-00D6, U+00D8, U+00E0-00E5, U+00E8-00EB, U+00F0, U+00FD, U+00FF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 98.9%;
unicode-range: U+0020-0021, U+0058, U+005A, U+0068, U+006E, U+0075, U+0078, U+00A0-00A1, U+00F1, U+00F9-00FC, U+201C-201E;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 100.3%;
unicode-range: U+0055-0056, U+0064, U+0067, U+006B, U+006F, U+0071, U+00A4, U+00D9-00DC, U+00F2-00F6, U+00F8, U+2014-2015;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 102.2%;
unicode-range: U+0044, U+0062, U+0069-006A, U+006C-006D, U+0070, U+0072, U+0077, U+00D0, U+00DF, U+00EC-00EF, U+00FE;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 103.7%;
unicode-range: U+0022, U+0024, U+0030-0039, U+00A2-00A3, U+00A5, U+00AB, U+00BB, U+2018-201B;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 106.4%;
unicode-range: U+0023, U+0048, U+0057, U+00B5;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 110.4%;
unicode-range: U+0028-0029, U+004E, U+005B, U+005D, U+00AA, U+00D1;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 114.5%;
unicode-range: U+0049, U+004D, U+0066, U+00BC-00BD, U+00CC-00CF;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 117%;
unicode-range: U+0026, U+002A, U+0074, U+007C, U+00A6, U+00BE;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 118.5%;
unicode-range: U+00A9, U+00AE, U+00B9;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 121.1%;
unicode-range: U+002B, U+002D, U+003C-003E, U+005E, U+007E, U+00AC-00AD, U+00B2-00B3, U+00D7, U+2022;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 124.3%;
unicode-range: U+0027, U+00AF, U+00BA, U+2017;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 128.8%;
unicode-range: U+00B1, U+00F7;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 138.7%;
unicode-range: U+00A8;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 156.9%;
unicode-range: U+005C;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
size-adjust: 159.6%;
unicode-range: U+002F;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 97.5%;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 67.6%;
unicode-range: U+2020-2021;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 69.2%;
unicode-range: U+004A;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 70.4%;
unicode-range: U+00BF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 72.4%;
unicode-range: U+20AC;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 74.2%;
unicode-range: U+0053, U+005F, U+2026;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 74.8%;
unicode-range: U+0045, U+00C8-00CB;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 78.2%;
unicode-range: U+002C, U+002E, U+003A-003B, U+003F, U+00B7;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 79.5%;
unicode-range: U+0046, U+0073;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 80.6%;
unicode-range: U+0052, U+00A7;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 83.1%;
unicode-range: U+004C, U+0059, U+00DD;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 85.9%;
unicode-range: U+0042, U+0050, U+0054, U+00B6, U+00C6, U+00DE;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 87.8%;
unicode-range: U+0043, U+0047, U+0063, U+0065, U+00C7, U+00DF, U+00E7-00EB, U+00F8;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 89.5%;
unicode-range: U+004B, U+0058, U+2013;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 91.1%;
unicode-range: U+0028-0029, U+0078, U+007A-007B, U+007D;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 92.8%;
unicode-range: U+0025, U+005A, U+007C, U+00A6, U+00AB, U+00BB, U+00E6, U+00EC-00EF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 94.6%;
unicode-range: U+0040-0041, U+0056, U+0076, U+00B0, U+00C0-00C5, U+00F0, U+2018-201B;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 96%;
unicode-range: U+0049, U+0055, U+006F, U+0079, U+00A1, U+00CC-00CF, U+00D9-00DC, U+00F2-00F6, U+00FD, U+00FF;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 97.2%;
unicode-range: U+0024, U+0030-0039, U+0048, U+004D, U+004F, U+0051, U+0061-0062, U+0064, U+0067, U+006B, U+0070-0071, U+00A2-00A3, U+00A5, U+00D2-00D6, U+00D8, U+00E0-00E5, U+00FE;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 99%;
unicode-range: U+0020, U+0044, U+0057, U+0077, U+00A0, U+00B5, U+00D0;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 100.4%;
unicode-range: U+0068, U+006E, U+0075, U+00A4, U+00F1, U+00F9-00FC, U+2014-2015;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 103.7%;
unicode-range: U+004E, U+006D, U+00D1;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 105.2%;
unicode-range: U+0022-0023, U+0060, U+0066, U+00A8, U+00AF, U+00B4, U+00B8;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 107.4%;
unicode-range: U+002A, U+006A, U+0072;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 109.8%;
unicode-range: U+005B, U+005D, U+00B2-00B3, U+00B9, U+00BC;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 112.6%;
unicode-range: U+00BD, U+201C-201E;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 115.8%;
unicode-range: U+0021, U+0026, U+0069, U+006C, U+0074, U+00BE, U+2022;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 117.5%;
unicode-range: U+0027, U+002B, U+003C-003E, U+007E, U+00AA, U+00AC, U+00D7;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 120.3%;
unicode-range: U+002D, U+00AD-00AE;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 122.9%;
unicode-range: U+00A9, U+00BA;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 124.8%;
unicode-range: U+00B1, U+00F7, U+2017;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 139%;
unicode-range: U+005C;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 142.5%;
unicode-range: U+002F;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
size-adjust: 146%;
unicode-range: U+005E;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 97.9%;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 73.2%;
unicode-range: U+003F, U+00BF, U+2020-2021;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 74.6%;
unicode-range: U+005F;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 77.4%;
unicode-range: U+20AC;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 79.4%;
unicode-range: U+0045, U+004A, U+0073, U+00C8-00CB;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 81.1%;
unicode-range: U+003A-003B, U+0053;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 83.3%;
unicode-range: U+004C, U+0063, U+00E7;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 85.3%;
unicode-range: U+0046;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 87.9%;
unicode-range: U+0043, U+0052, U+00A7, U+00C7;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 89.9%;
unicode-range: U+0042, U+004B, U+2013;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 91.3%;
unicode-range: U+0047, U+0059, U+00B6, U+00DD, U+2026;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 93.9%;
unicode-range: U+0050, U+0065, U+006F, U+00C6, U+00DE, U+00E8-00EB, U+00F0, U+00F2-00F6, U+00F8;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 95.1%;
unicode-range: U+006A, U+0076, U+007B, U+007D, U+00B0;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 97.1%;
unicode-range: U+0041, U+0054, U+0062, U+0064, U+0067, U+0070-0071, U+0079-007A, U+00C0-00C5, U+00E6, U+00FD-00FF;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 98%;
unicode-range: U+0020, U+0025, U+002C, U+002E, U+0040, U+004F, U+0051, U+0058, U+0068, U+006E, U+0075, U+0078, U+00A0, U+00B7, U+00D2-00D6, U+00D8, U+00DF, U+00F1, U+00F9-00FC, U+201C-201E;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 100%;
unicode-range: U+0055-0056, U+005A, U+00A4, U+00D9-00DC, U+2014-2015;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 101.9%;
unicode-range: U+006B, U+006D, U+0077;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 103.6%;
unicode-range: U+0021-0024, U+0030-0039, U+0044, U+0072, U+00A1-00A3, U+00A5, U+00D0;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 104.9%;
unicode-range: U+0048, U+004D, U+00AB, U+00BB, U+2018-201B;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 106.6%;
unicode-range: U+0057, U+0061, U+00B5, U+00E0-00E5;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 111%;
unicode-range: U+0026, U+0028-0029, U+004E, U+005B, U+005D, U+00D1;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 113.9%;
unicode-range: U+0049, U+0066, U+0069, U+006C, U+0074, U+00B9, U+00BC, U+00CC-00CF, U+00EC-00EF;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 116.4%;
unicode-range: U+002A, U+007C, U+00A6, U+00BD;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 118.3%;
unicode-range: U+00A9, U+00AE, U+00BE;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 121.2%;
unicode-range: U+002B, U+002D, U+003C-003E, U+005E, U+007E, U+00AC-00AD, U+00D7, U+2022;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 124.2%;
unicode-range: U+0027, U+00B2-00B3, U+00BA, U+2017;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 126.8%;
unicode-range: U+00AA;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 129%;
unicode-range: U+00B1, U+00F7;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 131.8%;
unicode-range: U+0060, U+00A8, U+00AF, U+00B4, U+00B8;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 157.3%;
unicode-range: U+005C;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Segoe UI GO';
src: local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'), url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
size-adjust: 159.8%;
unicode-range: U+002F;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Segoe UI Symbol, Word's fallback for a bullet glyph the paragraph face lacks
* (U+25B8 and friends): ships only inside Office, so the ink comes from the real
* face where installed, else Apple Symbols. The overrides carry its 1.3301em
* line (hhea 1.0791 / 0.2510) split at the same 0.36em baseline as above.
*
* Segoe UI Symbol GO: hmtx 2026-09-30
* hhea 1.0791/0.2510 split at the 0.36em baseline
* fonts: Segoe UI Symbol (Word DFonts) */
@font-face {
font-family: 'Segoe UI Symbol GO';
src: local('Segoe UI Symbol'), local('SegoeUISymbol'), local('Apple Symbols'), local('AppleSymbols');
ascent-override: 97.9%;
descent-override: 35.1%;
line-gap-override: 0%;
font-display: block;
}
/* Word's Symbol / Wingdings bullets when the face is missing (macOS Symbol.ttf has
* no F0xx cmap): Liberation Sans' U+25CF (0.43em) scaled to the Word glyph's ink
* (Symbol bullet 0.357em, Wingdings circle 0.579em). The overrides keep the Word
* face's total (Symbol 1.2251em, Wingdings 1.1098em) and split it so the glyph
* baseline sits 0.36em above the bottom of the bullet box, where Chromium puts the
* Calibri/Carlito text baseline (0.25em descent + half of the 0.22em leading);
* Chromium applies the overrides after size-adjust, hence the rescaled values.
*
* Symbol Bullet GO: hmtx 2026-09-30
* Word glyph ink 0.357em over Liberation Sans U+25CF 0.43em; box = Word face total 1.2251em split at the 0.36em baseline
* fonts: Symbol (Word DFonts); LiberationSans-Regular.ttf */
@font-face {
font-family: 'Symbol Bullet GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 83%;
ascent-override: 107.2%;
descent-override: 40.4%;
line-gap-override: 0%;
font-display: block;
}
/* Wingdings Bullet GO: hmtx 2026-09-30
* Word glyph ink 0.579em over Liberation Sans U+25CF 0.43em; box = Word face total 1.1098em
* fonts: Wingdings (Word DFonts); LiberationSans-Regular.ttf */
@font-face {
font-family: 'Wingdings Bullet GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
size-adjust: 134.5%;
ascent-override: 57.9%;
descent-override: 24.6%;
line-gap-override: 0%;
font-display: block;
}
/* Yu Gothic GO: hmtx 2026-09-30
* Yu Gothic Regular/Bold equal the Apple Medium/Bold advances; box = Word hhea 0.88/0.222
* fonts: YuGoth*.ttc (Word); YuGo-Medium/Bold (Apple) */
@font-face {
font-family: 'Yu Gothic GO';
src: local('YuGo-Medium'), local('YuGothic Medium');
unicode-range: U+0020-007E, U+00A0-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic GO';
src: local('YuGo-Bold'), local('YuGothic Bold');
unicode-range: U+0020-007E, U+00A0-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Yu Gothic Light GO: hmtx 2026-09-30
* advances weighted over a trilingual EN/JP/ID body; box = Word hhea 0.88/0.222
* fonts: YuGoth*.ttc (Word); YuGo-Medium (Apple); LiberationSans */
@font-face {
font-family: 'Yu Gothic Light GO';
src: local('YuGo-Medium'), local('YuGothic Medium');
size-adjust: 91.97%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Light GO';
src: local('YuGo-Medium'), local('YuGothic Medium');
size-adjust: 95.26%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Light GO';
src: local('YuGo-Medium'), local('YuGothic Medium');
size-adjust: 96.6%;
unicode-range: U+0030-0039;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Light GO';
src: local('YuGo-Medium'), local('YuGothic Medium');
size-adjust: 88.66%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Light GO';
src: local('YuGo-Medium'), local('YuGothic Medium');
unicode-range: U+0020;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Light GO';
src: local('YuGo-Bold'), local('YuGothic Bold');
unicode-range: U+0020-007E, U+00A0-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Yu Gothic Sans GO: hmtx 2026-09-30
* class scales for hosts without the Apple cuts; box = Word hhea 0.88/0.222
* fonts: YuGoth*.ttc (Word); LiberationSans */
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
size-adjust: 104.62%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
size-adjust: 100.55%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
unicode-range: U+0030-0039;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
size-adjust: 113.27%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf') format('truetype');
size-adjust: 102.64%;
unicode-range: U+0020;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf') format('truetype');
size-adjust: 102.2%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf') format('truetype');
size-adjust: 103.79%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf') format('truetype');
size-adjust: 103.07%;
unicode-range: U+0030-0039;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf') format('truetype');
size-adjust: 110.96%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Gothic Sans GO';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf') format('truetype');
size-adjust: 102.64%;
unicode-range: U+0020;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Yu Mincho / Yu Gothic: Office-private on macOS (Word lays out with its own
* yumin.ttf / YuGoth*.ttc; advances read from those faces 2026-09-30, weighted
* over a trilingual EN/JP/ID body). Apple's downloadable YuMincho/YuGothic cuts
* share the design, so they lead: Yu Gothic Regular/Bold equal the Apple
* Medium/Bold advances outright, Yu Mincho Demibold equals the Apple Demibold,
* and Yu Mincho Regular differs per class (space 0.260 em vs 0.333). Where the
* Apple cuts are absent the Liberation faces stand in with class scales.
* Line geometry pinned to the Word faces' hhea (0.88 / 0.222) in every tier.
*
* Yu Mincho GO: hmtx 2026-09-30
* advances weighted over a trilingual EN/JP/ID body; box = Word hhea 0.88/0.222
* fonts: yumin.ttf (Word); YuMin-Medium/Demibold (Apple); LiberationSerif */
@font-face {
font-family: 'Yu Mincho GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
size-adjust: 101.86%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
size-adjust: 99.51%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
size-adjust: 108.4%;
unicode-range: U+0030-0039;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
size-adjust: 108.11%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
size-adjust: 78.01%;
unicode-range: U+0020;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho GO';
src: local('YuMin-Demibold'), local('YuMincho Demibold');
unicode-range: U+0020-007E, U+00A0-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Yu Mincho Light GO: hmtx 2026-09-30
* advances weighted over a trilingual EN/JP/ID body; box = Word hhea 0.88/0.222
* fonts: yumin.ttf (Word); YuMin-Medium/Demibold (Apple); LiberationSerif */
@font-face {
font-family: 'Yu Mincho Light GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
size-adjust: 97.44%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Light GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
size-adjust: 96.19%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Light GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
unicode-range: U+0030-0039;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Light GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
size-adjust: 93.21%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Light GO';
src: local('YuMin-Medium'), local('YuMincho Medium');
unicode-range: U+0020;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Light GO';
src: local('YuMin-Demibold'), local('YuMincho Demibold');
unicode-range: U+0020-007E, U+00A0-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Yu Mincho Serif GO: hmtx 2026-09-30
* class scales for hosts without the Apple cuts; box = Word hhea 0.88/0.222
* fonts: yumin.ttf (Word); LiberationSerif */
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf') format('truetype');
size-adjust: 109.65%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf') format('truetype');
size-adjust: 109.73%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf') format('truetype');
size-adjust: 108.4%;
unicode-range: U+0030-0039;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf') format('truetype');
size-adjust: 118.69%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf') format('truetype');
size-adjust: 103.91%;
unicode-range: U+0020;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf') format('truetype');
size-adjust: 102.36%;
unicode-range: U+0061-007A, U+00DF-00F6, U+00F8-00FF;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf') format('truetype');
size-adjust: 107.04%;
unicode-range: U+0041-005A, U+00C0-00D6, U+00D8-00DE;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf') format('truetype');
size-adjust: 104.39%;
unicode-range: U+0030-0039;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf') format('truetype');
size-adjust: 105.87%;
unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Yu Mincho Serif GO';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf') format('truetype');
size-adjust: 133.2%;
unicode-range: U+0020;
ascent-override: 88%;
descent-override: 22.2%;
font-weight: bold;
font-style: normal;
font-display: block;
}
/* "Carlito GO": Carlito with Vietnamese stacked diacritics fixed at build time
(tools/patch-carlito-vi.py); renamed per OFL Reserved Font Name clause */
@font-face {
font-family: 'Carlito GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Carlito GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Carlito GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Carlito GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Caladea';
src: url('./Caladea-Regular-BTbwo_Qo.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Caladea';
src: url('./Caladea-Bold-D8qQyaGr.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Caladea';
src: url('./Caladea-Italic-B_Jy4Zu6.ttf');
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Caladea';
src: url('./Caladea-BoldItalic-wZEKqfeH.ttf');
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Cambria Math is an Office-private face Chromium cannot see; its Latin text
* glyphs carry Cambria's advances and the face has no bold cut, so Word
* emboldens the regular outlines (probe 2026-10-14: bold headings measure
* 0.92x Caladea Bold, Caladea Regular within 0.5% once kerned). One
* regular-weight face lets Chromium synthesise bold the same way; math
* symbols fall through to STIX. */
@font-face {
font-family: 'Cambria Math GO';
src: url('./Caladea-Regular-BTbwo_Qo.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Liberation Serif';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Liberation Serif';
src: url('./LiberationSerif-Bold-CT7WGLoV.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Liberation Serif';
src: url('./LiberationSerif-Italic-Bwtmn-ni.ttf');
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Liberation Serif';
src: url('./LiberationSerif-BoldItalic-DHf5skZ4.ttf');
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Liberation Sans';
src: url('./LiberationSans-Regular-CqxnOoBp.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Liberation Sans';
src: url('./LiberationSans-Bold-CAnzDFU4.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Liberation Sans';
src: url('./LiberationSans-Italic-D6GtLuAT.ttf');
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Liberation Sans';
src: url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Liberation Mono';
src: url('./LiberationMono-Regular-CscJ8ftk.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Liberation Mono';
src: url('./LiberationMono-Bold-JpIqZVyK.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Liberation Mono';
src: url('./LiberationMono-Italic-BaW6sbi8.ttf');
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Liberation Mono';
src: url('./LiberationMono-BoldItalic-CW50-m9W.ttf');
font-weight: bold;
font-style: italic;
font-display: block;
}
/*
* CJK fallback (Noto Sans/Serif CJK SC, SIL OFL): environments with no Chinese
* fonts at all (e.g. stripped-down Windows/Linux packages) no longer show tofu
* boxes. GB2312 subset (7445 common characters + CJK punctuation/fullwidth
* forms); rare characters still use system fallback. Bold is synthesized by the browser.
*/
@font-face {
font-family: 'Noto Sans CJK SC';
src: url('./NotoSansCJKsc-Regular-subset-CI7WjJWU.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Noto Serif CJK SC';
src: url('./NotoSerifCJKsc-Regular-subset-DE8BO6ke.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Chromium never system-falls-back for Private Use codepoints: unmapped PUA
* renders the chain's primary font's .notdef. Chains headed by a real face
* (Calibri, Carlito GO) draw tofu boxes for AI-residue PUA tokens, while Word
* and subset-headed chains (blank subsetted .notdef) show nothing. This tiny
* generated font (tools/build-pua-blank-font.py) maps all of U+E000-F8FF to a
* blank 1em glyph so PUA stays invisible in the chains that carry it. */
@font-face {
font-family: 'Lycero Office PUA Blank';
src: url('data:font/woff2;base64,d09GMgABAAAAAAE4AAoAAAAANIAAAADwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAA5DTKAQE2AiQDBssGBCAFgQQHLBvKMwAuBuymYxqvxkwdhdeKL8rx03s08TzffXrfzGRdKBTK8VXT7lq2lqjCFQz1fMBYO6XMhvWn9ScjqZ8lHYluUBqHJ1NU/4PUAyxq8qmb+r/5N48Czima51lAi6dB4omEUcQJBEbpDlnHIhHVcU+9Va1dfgSNuyXwdsrdQw1kZn8A3sPiK7ZFKNox0HrCAzru8MtNARANiU8E4fts0Q9r7eD/N3YBUBUQ5CiqgwdrsoXSoOw6LjZXuRcbBBQDG1XaSBzsOCvmnj5BZWpbTB+rze+BP+wSoGyatgHEF6PEi6ujo4Llzw48XpkUUnoCLgAA') format('woff2');
unicode-range: U+E000-F8FF;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* CJK-range-only views of the same subsets, for unknown *Latin-named* fonts
* (Aptos-era cloud faces etc.): the full subsets cover U+2018/2019/201C/201D
* at a 1em advance and would swallow Latin punctuation ahead of the generic
* face, shifting every wrap. CJK-named unknown fonts keep the full subsets
* (fullwidth quotes are correct inside CJK body text). Same ranges as the
* 'Lycero Office Hiragino/Batang…' local() aliases below. */
@font-face {
font-family: 'Noto Sans CJK GO';
src: url('./NotoSansCJKsc-Regular-subset-CI7WjJWU.woff2') format('woff2');
unicode-range:
U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF, U+FE30-FE4F,
U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Noto Serif CJK GO';
src: url('./NotoSerifCJKsc-Regular-subset-DE8BO6ke.woff2') format('woff2');
unicode-range:
U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF, U+FE30-FE4F,
U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
font-display: block;
}
/*
* Korean fallback: Noto Sans/Serif CJK KR subsets (KS X 1001 syllables + jamo),
* renamed per OFL since advances are normalized to the Windows faces Word
* substitutes (Batang/Malgun): hangul 1.0em; serif digits/space match Batang;
* sans Basic Latin matches Malgun (tools/normalize-kr-sans-hmtx.py).
*/
@font-face {
font-family: 'Lycero Office Sans KR';
src: url('./GenOfficeSansKR-Regular-subset-B22c6P7v.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lycero Office Serif KR';
src: url('./GenOfficeSerifKR-Regular-subset-nbiiZ_31.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Missing KR font names (Noto/Source Han KR variants): Word keeps hangul on
* Batang but renders every non-hangul character with the substituted Latin
* face (M3 probe sample 13: Batang-metric Latin measures 1.13–1.19×
* Cambria/Calibri; prod corpus 20261020 sample 023 Word PDF: U+0020 0.22em,
* U+00B7 0.28, curly quotes 0.375, × 0.55 all drawn by Cambria, never the
* Batang 0.333/0.5 glyphs). Claims Basic Latin incl. the space, Latin-1
* Supplement and General Punctuation; a flagged hangul-context space is
* re-wrapped by .doc-hangul-space and unaffected. Serif class only: the
* missing-KR chain is always Batang-ward (cssFontFamily). */
@font-face {
font-family: 'KR Theme Latin GO';
src: local('Cambria'), url('./Caladea-Regular-BTbwo_Qo.ttf');
unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Documents declaring NanumGothic: mac Word lays out with the OS *downloadable*
* source asset Chromium cannot see (M3 probe sample 19: hangul 0.94em, space
* 0.28, digits 0.606 vs the Batang-normalized subset's 1.0/0.333/0.596 —
* +6.4% per hangul line, +19% per space). Real-metric source subset
* (tools/build-gothic-kr-font.py), advances unmodified; renamed per OFL
* ("Nanum" is a Reserved Font Name and subsetting is a modification). */
@font-face {
font-family: 'Lycero Office Gothic KR';
src: url('./GenOfficeGothicKR-Regular-subset-Bkvj_MFZ.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* -Che (fixed-pitch) KR faces: Word renders the real BatangChe/GulimChe/
* DotumChe/GungsuhChe whose Latin is 0.5 em fixed (probe 2026-08-24). ASCII
* rides this bundled half-width face (tools/build-kr-che-latin-font.py:
* Sans KR outlines reshaped to DotumChe ink boxes); hangul falls through to
* the KR chains. */
@font-face {
font-family: 'Lycero Office Che Latin KR';
src: url('./GenOfficeCheLatinKR-Dxa8BmkD.woff2') format('woff2');
unicode-range: U+0020-007E;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* SimSun ASCII is half-width fixed pitch (Word PDF: 0.5em per character at
* 12pt); the -Che face carries the same 0.5em advances. */
@font-face {
font-family: 'Lycero Office SimSun Latin';
src: url('./GenOfficeCheLatinKR-Dxa8BmkD.woff2') format('woff2');
unicode-range: U+0020-007E;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Word lays out a space touching hangul at 0.5em whatever the run font (corpus
* probe 2026-09-24: Batang 0.49-0.50, Malgun Gothic and Times New Roman spaces
* inside Korean runs 0.51-0.52em); .doc-hangul-space (styles.css) draws such
* spaces from the -Che face's half-width space. */
@font-face {
font-family: 'Lycero Office Hangul Space';
src: url('./GenOfficeCheLatinKR-Dxa8BmkD.woff2') format('woff2');
unicode-range: U+0020;
font-weight: normal;
font-style: normal;
font-display: block;
}
/*
* Arabic fallback: unmodified Noto Naskh/Sans Arabic subsets (Arabic blocks +
* presentation forms + digits/punctuation). Without them, missing Arabic fonts
* fall through to the CJK/generic tail and Chromium picks a Geeza Pro-style UI
* face — larger and heavier than the naskh serif Word substitutes.
*/
@font-face {
font-family: 'Noto Naskh Arabic';
src: url('./NotoNaskhArabic-Regular-subset-DQSqx2ZA.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Noto Sans Arabic';
src: url('./NotoSansArabic-Regular-subset-D207GVuU.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Arabic-Indic digits already run narrower than Times' (R≈0.855, same probe);
* scaling them another 10% would overshoot, so they stay unscaled ahead of the
* TNR alias in the missing-serif chain. */
@font-face {
font-family: 'Naskh Digits GO';
src: url('./NotoNaskhArabic-Regular-subset-DQSqx2ZA.woff2') format('woff2');
unicode-range: U+0660-0669, U+06F0-06F9;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* cs runs with a missing naskh font route ASCII punctuation/digits to the
* substituted Times shapes (Word renders them there after wholesale TNR
* substitution; the Naskh subset's forms sit sunken on the Arabic baseline).
* Only non-letter ASCII is claimed, so Latin letters keep resolving in the
* run's ascii slot and Arabic in the Naskh subset behind this alias.
* local() needs the PostScript name in Chromium; the bundled Liberation file
* backstops hosts without a system Times. */
@font-face {
font-family: 'Times Punct GO';
src: local('TimesNewRomanPSMT'), local('Times New Roman'), url('./LiberationSerif-Regular-DREh6cMU.ttf');
unicode-range: U+0020-0040, U+005B-0060, U+007B-007E;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Poppins is an M365 cloud font Word downloads and renders real (probe
* 2026-09-01: PDF embeds Poppins-Regular/Bold, line factor exactly 1.500).
* The Helvetica class runs ~12.6% narrower, so the real Latin subset is
* bundled (tools/build-poppins-font.py). A locally installed Poppins still
* precedes this face in the chain. */
@font-face {
font-family: 'Lycero Office Poppins';
src: url('./GenOfficePoppins-Regular-subset-RElVmxhA.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lycero Office Poppins';
src: url('./GenOfficePoppins-Bold-subset-CLJyStaw.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: block;
}
/* DM Sans (Google Fonts) renders real in Word when installed (corpus
* 2026-09-30: PDF embeds DMSans-Regular/Bold = the 1.200 statics, line factor
* 1.302). The Helvetica class runs ~7% narrower and 1.15-spaced, so the real
* Latin subset is bundled (tools/build-dm-sans-font.py). A locally installed
* DM Sans still precedes this face in the chain. */
@font-face {
font-family: 'Lycero Office DM Sans';
src: url('./GenOfficeDMSans-Regular-subset-DEQZCK4K.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lycero Office DM Sans';
src: url('./GenOfficeDMSans-Bold-subset-DVFBF4J5.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Latin-range backstops closing dual-slot / eastAsia-only chains: Word
* substitutes a missing w:ascii face with a Latin font and never draws Latin
* glyphs from the eastAsia slot (probe 2026-08-23). The range covers letters,
* digits and ASCII punctuation only — no general punctuation or Latin-1
* symbols (quotes, x/÷, °±) so ambiguous-width characters keep resolving
* through the East Asian font like Word. local() needs PostScript names in
* Chromium; the bundled Liberation files backstop other hosts. */
@font-face {
font-family: 'Latin Serif GO';
src: local('TimesNewRomanPSMT'), local('Times New Roman'), url('./LiberationSerif-Regular-DREh6cMU.ttf');
unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-024F, U+1E00-1EFF, U+FB00-FB06;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Latin Serif GO';
src:
local('TimesNewRomanPS-BoldMT'), local('Times New Roman Bold'),
url('./LiberationSerif-Bold-CT7WGLoV.ttf');
unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-024F, U+1E00-1EFF, U+FB00-FB06;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Latin Serif GO';
src:
local('TimesNewRomanPS-ItalicMT'), local('Times New Roman Italic'),
url('./LiberationSerif-Italic-Bwtmn-ni.ttf');
unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-024F, U+1E00-1EFF, U+FB00-FB06;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Latin Serif GO';
src:
local('TimesNewRomanPS-BoldItalicMT'), local('Times New Roman Bold Italic'),
url('./LiberationSerif-BoldItalic-DHf5skZ4.ttf');
unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-024F, U+1E00-1EFF, U+FB00-FB06;
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Latin Sans GO';
src: local('Helvetica'), local('ArialMT'), url('./LiberationSans-Regular-CqxnOoBp.ttf');
unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-024F, U+1E00-1EFF, U+FB00-FB06;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Latin Sans GO';
src: local('Helvetica-Bold'), local('Arial-BoldMT'), url('./LiberationSans-Bold-CAnzDFU4.ttf');
unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-024F, U+1E00-1EFF, U+FB00-FB06;
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Latin Sans GO';
src: local('Helvetica-Oblique'), local('Arial-ItalicMT'), url('./LiberationSans-Italic-D6GtLuAT.ttf');
unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-024F, U+1E00-1EFF, U+FB00-FB06;
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Latin Sans GO';
src:
local('Helvetica-BoldOblique'), local('Arial-BoldItalicMT'),
url('./LiberationSans-BoldItalic-BC07J_j6.ttf');
unicode-range: U+0020-007E, U+00C0-00D6, U+00D8-00F6, U+00F8-024F, U+1E00-1EFF, U+FB00-FB06;
font-weight: bold;
font-style: italic;
font-display: block;
}
/* macOS's PMingLiU stand-in (Songti TC) draws these fullwidth glyphs at
* ~0.2-0.5em of ink inside the 1em advance — U+FF0F looks like a spaced
* half-width slash. Serve them from the bundled Noto subset (ink matches
* PMingLiU); real PMingLiU still precedes this face in the TC serif chain. */
@font-face {
font-family: 'Lycero Office Fullwidth TC';
src: url('./NotoSerifCJKsc-Regular-subset-DE8BO6ke.woff2') format('woff2');
unicode-range: U+FF0D, U+FF0F, U+FF3C, U+FF3F, U+FF5E;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* macOS Chromium refuses to synthesize bold for 'Songti SC' requested by family
* name at weight 600/700 (only 900 selects Black). This local() alias, registered
* at weight normal only, forces Blink to synthesize bold at >=600. On Windows the
* local() sources don't resolve and the chain falls through to SimSun. */
@font-face {
font-family: 'Lycero Office Songti SC';
src: local('STSongti-SC-Regular'), local('Songti SC Regular');
font-weight: normal;
font-style: normal;
}
/* Same for the PMingLiU stand-in: Songti TC ships a real Bold face that is barely
* heavier than Regular (ink 0.055 vs 0.046), while Word synthesizes bold on PMingLiU
* (0.075). Registering weight-normal only makes Blink synthesize (0.082) instead of
* selecting the anemic face, so bold TC headings read as bold like in Word. */
@font-face {
font-family: 'Lycero Office Songti TC';
src: local('STSongti-TC-Regular'), local('Songti TC Regular');
font-weight: normal;
font-style: normal;
}
/* East Asian system faces used as chain fallbacks (Hiragino Sans/Mincho,
* MS Mincho/Gothic, AppleMyungjo, Batang, Heiti TC, (P)MingLiU) draw Cyrillic
* and Greek as JIS fullwidth glyphs (Т measures 1em), exploding advances in
* Russian/Mongolian text that falls through a CJK chain. These local() aliases
* expose only the CJK ranges; other scripts continue down the chain to
* proportional faces. Roman numerals (U+2160-217F) are included: East Asian
* faces draw them fullwidth like Word (prod_020 JP reference list). Registered weight-normal (bold synthesized, like
* 'Lycero Office Songti SC') except Hiragino Sans, which has a real W6 face.
* Hiragino Mincho stays weight-normal on purpose: Word's JP serif faces
* (Yu Mincho, MS Mincho) ship no bold and Word synthesizes uniform thick
* strokes, while real Mincho W6 keeps hairline horizontals — a bold U+4E00
* reads as an arrow at body sizes (prod_070 table caption). */
@font-face {
font-family: 'Lycero Office Hiragino Sans';
src: local('Hiragino Sans'), local('HiraginoSans-W3'), local('MS Gothic');
unicode-range:
U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF,
U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lycero Office Hiragino Sans';
src: local('HiraginoSans-W6'), local('Hiragino Sans W6');
unicode-range:
U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF,
U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
font-weight: bold;
font-style: normal;
}
/* MS Reference Sans Serif (Office DFonts) is Verdana under another name: hhea
and hmtx tables are identical. Word has only the regular cut and fakes bold
and italic without widening (prod corpus 20261020: bold heading 169.1pt =
regular advances), so the alias registers weight-normal only and lets
Chromium synthesize, which keeps the advances too. */
@font-face {
font-family: 'MS Reference Sans Serif GO';
src: local('Verdana');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lycero Office Hiragino Mincho';
src: local('Hiragino Mincho ProN'), local('HiraMinProN-W3');
unicode-range:
U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF,
U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lycero Office MS Mincho';
src: local('MS Mincho'), local('MS PMincho');
unicode-range:
U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF,
U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lycero Office Batang';
src: local('Batang'), local('BatangChe');
unicode-range:
U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF,
U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lycero Office Myungjo';
src: local('AppleMyungjo');
unicode-range:
U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF,
U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lycero Office Heiti TC';
src: local('Heiti TC'), local('Heiti TC Light'), local('STHeitiTC-Light');
unicode-range:
U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF,
U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lycero Office MingLiU';
src: local('PMingLiU'), local('MingLiU');
unicode-range:
U+2160-217F, U+2E80-303F, U+3041-33FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7A3, U+F900-FAFF,
U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
font-weight: normal;
font-style: normal;
}
/* Tamil: Word substitutes missing Tamil families with Latha; Chromium's macOS
* fallback (Tamil Sangam MN) shapes ~27% narrower (M3 probe: sentence R 0.728,
* space 0.39x) — too far for size-adjust (137% would inflate glyph ink). Noto
* Sans Tamil with advances rewritten to Latha's (tools/build-tamil-font.py;
* shaped sentence R 0.994, all probe sentences within ±2.3%). */
@font-face {
font-family: 'Lycero Office Tamil';
src: url('./GenOfficeTamil-Regular-DLISHPmH.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Nirmala UI (M365 cloud face Word renders real) has no macOS twin and
* Chromium's Kohinoor Bangla shapes ~8% narrower: Noto Sans Bengali with
* advances rewritten to Nirmala UI's (tools/build-bengali-font.py; shaped
* body paragraphs within 0.98-1.02 of Nirmala UI). */
@font-face {
font-family: 'Lycero Office Bengali';
src: url('./GenOfficeBengali-Regular-B8AH1Hcw.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lycero Office Bengali';
src: url('./GenOfficeBengali-Bold-C1wtHFaL.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: block;
}
/* Caladea has no box-drawing glyphs, so U+2500 separator rules fall to the CJK
* subset at 1em fullwidth and an 80-char rule overflows the column (Word draws
* it ~0.65em on a single line). Menlo/Consolas keep them ~0.6em. */
@font-face {
font-family: 'Lycero Office Box Drawing';
/* Chromium local() matches PostScript/full names, not family names */
src: local('Menlo-Regular'), local('Menlo Regular'), local('Menlo'), local('Consolas');
unicode-range: U+2500-257F;
font-weight: normal;
font-style: normal;
}
/* Superscript/subscript digits are outside the KR subsets and would fall
* through to AppleMyungjo, whose U+2082 is a full-width (1.0em) glyph —
* "Cu₂O" rendered as "Cu₂ O". Serve them from bundled latin faces instead. */
@font-face {
font-family: 'Lycero Office Sans KR';
src: url('./Carlito-Regular-Cbe9FLjp.ttf') format('truetype');
unicode-range: U+2070-209F, U+00B2-00B3, U+00B9;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Lycero Office Serif KR';
/* Carlito, not Caladea/LiberationSerif: only Carlito covers the whole block */
src: url('./Carlito-Regular-Cbe9FLjp.ttf') format('truetype');
unicode-range: U+2070-209F, U+00B2-00B3, U+00B9;
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Same for the Cambria→Caladea chain and the CJK SC subsets: none covers the
* sub/superscript block, so BaSO₄ falls to a system symbol font (small, dark
* glyphs). Ranges list only codepoints the substitute face actually has (and
* skip glyphs the base face covers itself, e.g. Caladea's ²³¹ⁿ), so everything
* else keeps today's fallback. Liberation Serif for the serif faces (style
* match), Carlito for the sans one. Normal weight only, like the KR fix. */
@font-face {
font-family: 'Caladea';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf') format('truetype');
unicode-range: U+2074-2079, U+2080-2094;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Noto Serif CJK SC';
src: url('./LiberationSerif-Regular-DREh6cMU.ttf') format('truetype');
unicode-range: U+2074-2079, U+207F, U+2080-2094;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Noto Sans CJK SC';
src: url('./Carlito-Regular-Cbe9FLjp.ttf') format('truetype');
unicode-range: U+2070-2071, U+2074-2094;
font-weight: normal;
font-style: normal;
font-display: block;
}