/* DL2 UI drawings: original schematic Microsoft 365 / Windows 10 / Edge screens for the deck.
 * Markup comes from scripts/dl2/mission-control/ui.py. Teaching diagrams, not screenshots:
 * no images, logos or web fonts. Every selector is scoped under .ui (a drawing root) or
 * .app-badge. All sizes are cqw of the .deck container, so a drawing scales with the projector.
 * No text below 1.15cqw; a target label (.u-big) is at least 1.6cqw and bold.
 * Markup is div/span only, so the deck's !important p/li/td/th/h1/h2 rules never reach it.
 * A target = gold ring with dark edges (.u-t) + numbered gold badge (.u-bd): shape and number,
 * never colour alone. */

/* ---------------------------------------------------------------- app identity badge */
.app-badge { display:inline-grid; place-items:center; flex:none; box-sizing:border-box; width:2.2cqw; height:2.2cqw; border-radius:.45cqw; color:#fff; font:700 1.35cqw/1 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; letter-spacing:0; text-shadow:0 .06cqw .12cqw rgba(0,0,0,.35); vertical-align:middle; }
.app-badge-lg { width:7cqw; height:7cqw; border-radius:1.3cqw; font-size:4.4cqw; }
.app-badge-word { background:#185abd; }
.app-badge-excel { background:#107c41; }
.app-badge-powerpoint { background:#c43e1c; }
.app-badge-edge { background:#0c7a8a; }
.app-badge-explorer { background:linear-gradient(#b07c00 0 22%, #e0a106 22%); border-radius:.2cqw; padding-top:.35cqw; clip-path:polygon(0 0, 42% 0, 52% 14%, 100% 14%, 100% 100%, 0 100%); }
.app-badge-lg.app-badge-explorer { padding-top:1.1cqw; }

/* ---------------------------------------------------------------- root + window frame */
.ui { box-sizing:border-box; display:block; width:100%; max-height:27cqw; overflow:hidden; padding:.5cqw; font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size:1.2cqw; line-height:1.25; font-weight:400; font-style:normal; color:#222; text-align:left; letter-spacing:normal; text-transform:none; white-space:nowrap; -webkit-user-select:none; user-select:none; }
.ui *, .ui *::before, .ui *::after { box-sizing:border-box; }
.ui .u-w { position:relative; overflow:hidden; border-radius:.6cqw; background:#f3f3f3; color:#222; box-shadow:0 .35cqw 1.2cqw rgba(0,0,0,.55), 0 0 0 .1cqw rgba(255,255,255,.3); }
.ui .u-word { --app:#185abd; } .ui .u-excel { --app:#107c41; } .ui .u-powerpoint { --app:#c43e1c; }
.ui .u-edge { --app:#0c7a8a; } .ui .u-explorer { --app:#1979ca; }

/* target ring + numbered badge (kept early so components may still set position) */
.ui .u-t { position:relative; z-index:3; border-radius:.3cqw; outline:.35cqw solid #ffc400 !important; outline-offset:.15cqw !important; box-shadow:0 0 0 .65cqw #111 !important; }
.ui .u-big { font-size:max(1.6cqw, 1em); font-weight:700; }
.ui .u-bd { position:absolute; z-index:6; display:grid; place-items:center; width:2.4cqw; height:2.4cqw; border-radius:50%; background:#ffc400; color:#000; border:.18cqw solid #111; font:800 1.45cqw/1 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; letter-spacing:0; box-shadow:0 .15cqw .4cqw rgba(0,0,0,.45); }
.ui .u-bd.u-p-tr { top:-1.35cqw; right:-1.35cqw; }
.ui .u-bd.u-p-tl { top:-1.35cqw; left:-1.35cqw; }
.ui .u-bd.u-p-br { bottom:-1.35cqw; right:-1.35cqw; }
.ui .u-bd.u-p-bl { bottom:-1.35cqw; left:-1.35cqw; }
.ui .u-bd.u-p-r { left:calc(100% + 1cqw); top:50%; margin-top:-1.2cqw; }
.ui .u-bd.u-p-l { right:calc(100% + 1cqw); top:50%; margin-top:-1.2cqw; }
.ui .u-bd.u-p-t { bottom:calc(100% + .9cqw); left:50%; margin-left:-1.2cqw; }
.ui .u-bd.u-p-b { top:calc(100% + .9cqw); left:50%; margin-left:-1.2cqw; }
.ui .u-bd.u-p-ir { right:.45cqw; top:50%; margin-top:-1.2cqw; }
.ui .u-bd.u-p-in { position:relative; flex:none; margin-left:.6cqw; }
.ui .u-bd.u-p-ta { right:-.7cqw; bottom:calc(100% - .35cqw); }
.ui .u-bd.u-p-tr2 { top:-.5cqw; right:-1.4cqw; }

/* title bar + window controls */
.ui .u-tb { display:flex; align-items:center; gap:.6cqw; height:2.1cqw; padding:0 .4cqw 0 .8cqw; background:var(--app, #fff); color:#fff; font-size:1.15cqw; line-height:1; }
.ui .u-tt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.ui .u-dlg .u-tb { background:#fff; color:#1f1f1f; border-bottom:.1cqw solid #e3e3e3; }
.ui .u-dlg .u-tt { text-align:left; }
.ui .u-tb .app-badge { width:1.6cqw; height:1.6cqw; font-size:1.15cqw; border-radius:.3cqw; }
.ui .u-tb .app-badge-explorer { padding-top:.2cqw; }
.ui .u-wc { display:flex; align-items:center; gap:1.1cqw; margin-left:auto; padding:0 .3cqw; }
.ui .u-wc > span, .ui .u-x { position:relative; display:inline-block; flex:none; width:1cqw; height:1cqw; }
.ui .u-min::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:.12cqw solid currentColor; }
.ui .u-max::before { content:""; position:absolute; inset:.05cqw; border:.12cqw solid currentColor; }
.ui .u-x::before, .ui .u-x::after { content:""; position:absolute; left:50%; top:-.15cqw; bottom:-.15cqw; border-left:.13cqw solid currentColor; transform:rotate(45deg); }
.ui .u-x::after { transform:rotate(-45deg); }
.ui .u-xs { width:.9cqw; height:.9cqw; margin-left:auto; color:#444; }

/* small shared glyphs */
.ui .u-dd { flex:none; display:inline-block; width:0; height:0; margin-left:.35cqw; border-left:.42cqw solid transparent; border-right:.42cqw solid transparent; border-top:.48cqw solid currentColor; }
.ui .u-up { flex:none; display:inline-block; width:0; height:0; border-left:.42cqw solid transparent; border-right:.42cqw solid transparent; border-bottom:.48cqw solid currentColor; }
.ui .u-mag { position:relative; flex:none; display:inline-block; width:1.1cqw; height:1.1cqw; margin-right:.25cqw; border:.15cqw solid currentColor; border-radius:50%; }
.ui .u-mag::after { content:""; position:absolute; right:-.42cqw; bottom:-.32cqw; width:.5cqw; border-top:.17cqw solid currentColor; transform:rotate(45deg); }
.ui .u-caret { display:inline-block; flex:none; width:.15cqw; height:1.8cqw; margin-left:.15cqw; background:#111; }
.ui .u-cb { position:relative; flex:none; display:inline-block; width:1.3cqw; height:1.3cqw; border:.13cqw solid #444; border-radius:.15cqw; background:#fff; }
.ui .u-cb.u-on { background:var(--app, #0f6cbd); border-color:var(--app, #0f6cbd); }
.ui .u-dlg .u-cb.u-on { background:#0078d7; border-color:#0078d7; }
.ui .u-cb.u-on::after { content:""; position:absolute; left:.33cqw; top:.06cqw; width:.42cqw; height:.78cqw; border:solid #fff; border-width:0 .17cqw .17cqw 0; transform:rotate(45deg); }

/* ---------------------------------------------------------------- ribbon */
.ui .u-tabs { position:relative; display:flex; align-items:flex-end; gap:.15cqw; height:2.6cqw; padding:0 .5cqw .1cqw; background:#f3f3f3; }
.ui .u-tab { position:relative; flex:none; padding:.2cqw .45cqw .45cqw; font-size:1.15cqw; line-height:1.25; color:#2b2b2b; border-radius:.3cqw; }
.ui .u-tab.u-t { margin:0 .6cqw; }
.ui .u-tabs.u-tabs-mk { height:4.2cqw; }
.ui .u-tab .u-big { line-height:1.05; }
.ui .u-tab.u-on { font-weight:600; color:#000; }
.ui .u-tab.u-on::after { content:""; position:absolute; left:.45cqw; right:.45cqw; bottom:.1cqw; height:.3cqw; border-radius:.2cqw; background:var(--app); }
.ui .u-tab.u-ctx { color:#9e2f14; }
.ui .u-rb { position:relative; display:flex; align-items:stretch; min-height:7.6cqw; padding:.45cqw .3cqw .3cqw; background:#fff; border-bottom:.1cqw solid #d4d4d4; box-shadow:0 .1cqw .3cqw rgba(0,0,0,.08); }
.ui .u-grp { flex:none; display:flex; flex-direction:column; align-items:center; padding:0 .7cqw; border-right:.1cqw solid #dadada; }
.ui .u-gi { flex:1; display:flex; align-items:flex-start; gap:.45cqw; }
.ui .u-gn { margin-top:.25cqw; font-size:1.15cqw; line-height:1.2; color:#505050; }
.ui .u-gnc { text-align:center; }
.ui .u-btn { position:relative; display:flex; flex-direction:column; align-items:center; gap:.3cqw; padding:.3cqw .35cqw; border:.1cqw solid transparent; border-radius:.3cqw; font-size:1.15cqw; line-height:1.15; color:#222; text-align:center; }
.ui .u-btn.u-t { margin:0 .6cqw .5cqw; }
.ui .u-btn.u-down { background:#dbe7f6; border-color:#8eaedb; }
.ui .u-bl { display:block; }
.ui .u-stk { display:flex; flex-direction:column; align-items:flex-start; gap:.3cqw; padding-top:.1cqw; }
.ui .u-chk { position:relative; display:flex; align-items:center; gap:.5cqw; padding:.1cqw .35cqw; border-radius:.25cqw; font-size:1.2cqw; line-height:1.3; }
.ui .u-fld > span:first-child { padding:0 .4cqw; border:.1cqw solid #b9b9b9; border-radius:.2cqw; background:#fff; }

/* ribbon button glyphs (generic shapes, not product icons) */
.ui .u-g { position:relative; display:block; flex:none; width:2.6cqw; height:2.2cqw; border-radius:.25cqw; background:#eef2f7; border:.12cqw solid #7d8fa6; }
.ui .u-g::before { content:""; position:absolute; left:18%; right:18%; top:22%; height:56%; background:repeating-linear-gradient(#7d8fa6 0 .14cqw, transparent .14cqw .45cqw); }
.ui .u-g-pic, .ui .u-g-pic::before { background:linear-gradient(to top right, #3f8a4a 32%, transparent 33%) 0 100% / 100% 55% no-repeat, radial-gradient(circle at 72% 30%, #f0b323 0 .32cqw, transparent .36cqw), #d5e6f7; }
.ui .u-g-pic::before, .ui .u-g-tbl::before, .ui .u-g-sld::before, .ui .u-g-shp::before, .ui .u-g-crop::before, .ui .u-g-adj::before, .ui .u-g-clr::before { display:none; }
.ui .u-g-crop { border:0; background:linear-gradient(#2f2f2f, #2f2f2f) 1.9cqw .2cqw / .3cqw 1.6cqw no-repeat, linear-gradient(#2f2f2f, #2f2f2f) .7cqw .2cqw / 1.5cqw .3cqw no-repeat; }
.ui .u-g-crop::after { content:""; position:absolute; left:.35cqw; top:.55cqw; width:1.55cqw; height:1.6cqw; border-left:.3cqw solid #2f2f2f; border-bottom:.3cqw solid #2f2f2f; }
.ui .u-g-tbl { background:repeating-linear-gradient(90deg, #7d8fa6 0 .1cqw, transparent .1cqw .62cqw), repeating-linear-gradient(#7d8fa6 0 .1cqw, transparent .1cqw .52cqw), #fff; }
.ui .u-g-sld { background:linear-gradient(#c43e1c, #c43e1c) 50% 32% / 62% .3cqw no-repeat, linear-gradient(#9aa5b1, #9aa5b1) 50% 66% / 40% .2cqw no-repeat, #fff; }
.ui .u-g-shp { background:radial-gradient(circle at 34% 38%, #4a7fc1 0 .5cqw, transparent .55cqw), linear-gradient(#e08a3c, #e08a3c) 82% 82% / 46% 50% no-repeat, #fff; }
.ui .u-g-adj { background:radial-gradient(circle, #f0b323 0 .55cqw, transparent .6cqw), #fff8e6; }
.ui .u-g-clr { background:linear-gradient(90deg, #d24726 0 33%, #f0b323 33% 66%, #3f8a4a 66%); }
.ui .u-g-zm { border-radius:50%; width:2.2cqw; background:#fff; }
.ui .u-g-zm::before { display:none; }

.ui .u-doc { position:relative; display:flex; justify-content:center; align-items:flex-start; height:4.4cqw; padding-top:.9cqw; background:#e7e7e7; overflow:hidden; }
.ui .u-stub { display:block; flex:none; width:58%; height:14cqw; background:#fff; box-shadow:0 0 .3cqw rgba(0,0,0,.18); }
.ui .u-doc-excel { padding:0; background:#fff; }
.ui .u-doc-excel .u-stub { width:100%; height:100%; box-shadow:none; background:repeating-linear-gradient(90deg, #e1e1e1 0 .1cqw, transparent .1cqw 7cqw), repeating-linear-gradient(#e1e1e1 0 .1cqw, transparent .1cqw 2cqw); }
.ui .u-doc-powerpoint .u-stub { width:64%; }
.ui .u-doc-tall { height:9.2cqw; }

/* zoomed-in caption strip */
.ui .u-zoom { background:#fff; }
.ui .u-cap { display:flex; align-items:center; gap:.7cqw; height:3.2cqw; padding:0 .9cqw; background:#f3f3f3; border-bottom:.1cqw solid #dcdcdc; font-size:1.45cqw; font-weight:700; color:#1b1b1b; }
.ui .u-zoomed { margin-left:auto; display:flex; align-items:center; gap:.5cqw; font-size:1.15cqw; font-weight:400; color:#4a4a4a; }
.ui .u-lens { position:relative; display:inline-block; width:1.1cqw; height:1.1cqw; border:.16cqw solid #4a4a4a; border-radius:50%; }
.ui .u-lens::after { content:""; position:absolute; right:-.45cqw; bottom:-.35cqw; width:.55cqw; border-top:.18cqw solid #4a4a4a; transform:rotate(45deg); }
.ui .u-mb { padding:1.7cqw 1.4cqw 1cqw; background:#fff; }

/* ---------------------------------------------------------------- 1. Windows 10 search */
.ui .u-win10 { background:#f2f2f2; }
.ui .u-sp { display:flex; height:15.4cqw; }
.ui .u-sl { flex:1.3; min-width:0; display:flex; flex-direction:column; gap:.5cqw; padding:.9cqw .9cqw .6cqw; }
.ui .u-sh { font-size:1.2cqw; font-weight:700; color:#1f1f1f; }
.ui .u-res { display:flex; align-items:center; gap:.8cqw; padding:.6cqw 3.6cqw .6cqw .8cqw; background:#cfe3f8; border-radius:.2cqw; }
.ui .u-rt { display:flex; flex-direction:column; line-height:1.15; }
.ui .u-sub { font-size:1.15cqw; color:#444; }
.ui .u-res2 { display:flex; align-items:center; gap:.5cqw; padding:.3cqw .8cqw; font-size:1.2cqw; color:#222; }
.ui .u-sr { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2cqw; background:#fafafa; border-left:.1cqw solid #dcdcdc; }
.ui .u-pn { margin-top:.5cqw; font-size:1.6cqw; font-weight:600; }
.ui .u-open { display:flex; align-items:center; gap:.5cqw; margin-top:.6cqw; padding:.35cqw 1.2cqw 0; font-size:1.2cqw; border-top:.1cqw solid #d6d6d6; }
.ui .u-sq { display:inline-block; width:1cqw; height:1cqw; border:.13cqw solid #444; }
.ui .u-task { display:flex; align-items:center; gap:.8cqw; height:3.9cqw; padding:0 .8cqw 0 .9cqw; background:#1c1c1c; color:#fff; }
.ui .u-start { display:grid; place-items:center; flex:none; width:3.2cqw; height:2.5cqw; border-radius:.2cqw; }
.ui .u-win4 { display:grid; grid-template-columns:1fr 1fr; gap:.18cqw; width:1.6cqw; height:1.6cqw; }
.ui .u-win4 span { background:#fff; }
.ui .u-sbox { flex:0 1 23cqw; min-width:0; display:flex; align-items:center; gap:.5cqw; height:2.7cqw; padding:0 .8cqw; background:#fff; color:#111; }
.ui .u-typed { display:flex; align-items:center; padding:0 .3cqw; border-radius:.2cqw; }
.ui .u-tbi { flex:none; width:2.2cqw; height:2.2cqw; border-radius:.25cqw; background:#3d3d3d; }

/* ---------------------------------------------------------------- 2. Office start screen */
.ui .u-os { display:flex; height:19.6cqw; background:#fff; }
.ui .u-os-side { flex:none; display:flex; flex-direction:column; gap:.2cqw; width:8cqw; padding:.8cqw 0; background:var(--app); color:#fff; }
.ui .u-os-nm { padding:0 .8cqw .7cqw; font-size:1.2cqw; font-weight:700; }
.ui .u-os-i { display:flex; align-items:center; gap:.5cqw; padding:.45cqw .8cqw; font-size:1.25cqw; border-left:.3cqw solid transparent; }
.ui .u-os-i.u-on { background:rgba(0,0,0,.28); border-left-color:#fff; font-weight:600; }
.ui .u-os-g { flex:none; width:1.1cqw; height:1.1cqw; border:.13cqw solid #fff; border-radius:.15cqw; }
.ui .u-os-g0 { border-radius:.1cqw .1cqw .15cqw .15cqw; clip-path:polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); background:#fff; }
.ui .u-os-g2 { border-radius:.1cqw; border-top-width:.3cqw; }
.ui .u-os-main { flex:1; min-width:0; padding:1cqw 1.2cqw; }
.ui .u-os-h { margin-bottom:1.5cqw; font-size:1.6cqw; font-weight:600; }
.ui .u-tiles { display:flex; align-items:flex-start; gap:.7cqw; }
.ui .u-tile { position:relative; flex:none; display:flex; flex-direction:column; align-items:center; gap:.5cqw; width:8.2cqw; padding:.4cqw; border-radius:.3cqw; white-space:normal; text-align:center; line-height:1.15; }
.ui .u-tile.u-t { width:12.6cqw; }
.ui .u-tl { font-size:1.2cqw; }
.ui .u-dim { color:#595959; }
.ui .u-th { display:grid; place-items:center; width:100%; height:9cqw; background:#f3f3f3; border-radius:.2cqw; }
.ui .u-thi { display:block; width:6.4cqw; height:8.2cqw; background:#fff; border:.1cqw solid #c8c8c8; box-shadow:0 .1cqw .3cqw rgba(0,0,0,.15); }
.ui .u-th-excel .u-thi { width:8.4cqw; height:6.6cqw; background:repeating-linear-gradient(90deg, #dadada 0 .1cqw, transparent .1cqw 2.1cqw), repeating-linear-gradient(#dadada 0 .1cqw, transparent .1cqw 1.1cqw), #fff; }
.ui .u-th-powerpoint .u-thi { width:8.4cqw; height:4.73cqw; }
.ui .u-busy .u-thi { background:linear-gradient(#b9c3cf, #b9c3cf) 50% 22% / 70% .5cqw no-repeat, linear-gradient(#d5dbe2, #d5dbe2) 50% 70% / 70% 30% no-repeat, #fff; }

/* ---------------------------------------------------------------- 4. Word styles gallery */
.ui .u-gal { display:flex; align-items:stretch; gap:.5cqw; padding:.4cqw; border:.1cqw solid #c8c8c8; border-radius:.3cqw; background:#fff; }
.ui .u-sty { position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:.3cqw; height:7.4cqw; padding:.45cqw .5cqw; border:.1cqw solid #e3e3e3; border-radius:.25cqw; background:#fafafa; }
.ui .u-sty.u-t { flex:0 0 auto; background:#fff; }
.ui .u-smp { display:block; max-width:100%; overflow:hidden; line-height:1.15; color:#222; }
.ui .u-sty-n .u-smp { font-size:1.3cqw; }
.ui .u-sty-h1 .u-smp { font-size:1.9cqw; color:#0f4761; }
.ui .u-sty-h2 .u-smp { font-size:1.6cqw; color:#0f4761; }
.ui .u-sty-ti .u-smp { font-size:2.5cqw; }
.ui .u-sn { font-size:1.15cqw; line-height:1.15; white-space:normal; color:#333; }
.ui .u-sty.u-t .u-sn { color:#111; white-space:nowrap; }
.ui .u-more { flex:none; display:flex; flex-direction:column; justify-content:space-around; align-items:center; width:1.8cqw; border-left:.1cqw solid #ddd; }
.ui .u-more span { width:0; height:0; border-left:.45cqw solid transparent; border-right:.45cqw solid transparent; border-top:.5cqw solid #444; }
.ui .u-more span:first-child { border-top:0; border-bottom:.5cqw solid #444; }

/* ---------------------------------------------------------------- 5. Word paragraph group */
.ui .u-nb { display:flex; flex-direction:column; align-items:flex-start; }
.ui .u-para { display:flex; flex-direction:column; gap:.6cqw; padding:.8cqw 1cqw .4cqw; border:.1cqw solid #d0d0d0; border-radius:.3cqw; background:#fff; }
.ui .u-prow { display:flex; align-items:center; gap:.8cqw; }
.ui .u-pb { position:relative; display:flex; align-items:center; gap:.35cqw; padding:.45cqw .5cqw; border:.1cqw solid transparent; border-radius:.3cqw; }
.ui .u-ico { display:flex; flex-direction:column; gap:.25cqw; width:5cqw; }
.ui .u-ico > span { display:flex; align-items:center; gap:.35cqw; height:1.35cqw; }
.ui .u-ico .u-lv1 { padding-left:.9cqw; } .ui .u-ico .u-lv2 { padding-left:1.8cqw; }
.ui .u-ln2 { flex:1; height:.24cqw; background:#3a3a3a; }
.ui .u-dot { flex:none; width:.6cqw; height:.6cqw; border-radius:50%; background:#3a3a3a; }
.ui .u-dg { flex:none; min-width:.9cqw; font-size:1.2cqw; font-weight:700; line-height:1; color:#1f1f1f; text-align:right; }
.ui .u-ab { display:flex; flex-direction:column; gap:.28cqw; width:3cqw; padding:.4cqw .45cqw; }
.ui .u-ab span { display:block; width:100%; height:.22cqw; background:#3a3a3a; }
.ui .u-ab-l span:nth-child(even), .ui .u-ab-c span:nth-child(even), .ui .u-ab-r span:nth-child(even) { width:62%; }
.ui .u-ab-c { align-items:center; } .ui .u-ab-r { align-items:flex-end; }
.ui .u-ptr { position:absolute; right:-.2cqw; bottom:-1.5cqw; z-index:2; width:1.5cqw; height:2.2cqw; background:#111; clip-path:polygon(0 0, 0 78%, 24% 60%, 44% 100%, 60% 93%, 41% 55%, 76% 55%); }
.ui .u-tip { position:relative; display:flex; flex-direction:column; gap:.2cqw; max-width:20cqw; margin:1.3cqw 0 0 9cqw; padding:.6cqw .9cqw; background:#fff; border:.1cqw solid #8a8a8a; box-shadow:0 .2cqw .6cqw rgba(0,0,0,.25); white-space:normal; }
.ui .u-tip::before { content:""; position:absolute; top:-.75cqw; left:3.2cqw; border-left:.7cqw solid transparent; border-right:.7cqw solid transparent; border-bottom:.75cqw solid #8a8a8a; }
.ui .u-tipd { font-size:1.2cqw; color:#333; }

/* ---------------------------------------------------------------- 6. Word page */
.ui .u-doc-page { height:auto; max-height:22.4cqw; padding-top:1cqw; }
.ui .u-page { width:31cqw; min-height:15cqw; padding:1.8cqw 2.4cqw 1.4cqw; background:#fff; color:#111; box-shadow:0 0 .35cqw rgba(0,0,0,.22); white-space:normal; }
.ui .u-ln { font-size:1.25cqw; line-height:1.4; }
.ui .u-h1 { margin-bottom:.5cqw; font-size:1.9cqw; line-height:1.2; color:#0f4761; }
.ui .u-h2 { margin:.6cqw 0 .15cqw; font-size:1.5cqw; line-height:1.25; color:#0f4761; }
.ui .u-step { line-height:1.45; }
.ui .u-step.u-numd { display:flex; gap:.5cqw; padding-left:1cqw; }
.ui .u-num { flex:none; width:1.4cqw; }
.ui .u-step.u-hl .u-lt { background:#c4d5ea; box-shadow:0 0 0 .08cqw #c4d5ea; }
.ui .u-step.u-hl .u-num { background:#e1e7ee; }
.ui .u-cur { display:inline-block; width:.15cqw; height:1.25em; margin-left:.15cqw; vertical-align:-.25em; background:#111; }
.ui .u-tight .u-h1 { font-size:1.6cqw; } .ui .u-tight .u-h2 { font-size:1.35cqw; }
.ui .u-tight .u-body, .ui .u-tight .u-step { font-size:1.15cqw; }

/* ---------------------------------------------------------------- 7. Word navigation pane */
.ui .u-split { display:flex; height:11.2cqw; background:#e7e7e7; }
.ui .u-nav { flex:none; width:19.5cqw; padding:.5cqw .8cqw; background:#fff; border-right:.1cqw solid #d0d0d0; white-space:normal; }
.ui .u-navh { display:flex; align-items:center; font-size:1.4cqw; font-weight:700; line-height:1.3; }
.ui .u-navt { display:flex; gap:1.1cqw; margin:.35cqw 0 .45cqw; font-size:1.2cqw; border-bottom:.1cqw solid #ddd; }
.ui .u-navt span { padding-bottom:.2cqw; }
.ui .u-navt .u-on { font-weight:700; color:var(--app); border-bottom:.25cqw solid var(--app); }
.ui .u-navl { display:flex; flex-direction:column; gap:.2cqw; font-size:1.2cqw; line-height:1.25; }
.ui .u-n1 { position:relative; padding:.15cqw .4cqw .15cqw 1.4cqw; }
.ui .u-n1::before { content:""; position:absolute; left:.35cqw; top:.55cqw; border-left:.35cqw solid transparent; border-right:.35cqw solid transparent; border-top:.42cqw solid #444; }
.ui .u-n1.u-on { background:#dce8f7; }
.ui .u-n2 { padding:.1cqw .4cqw .1cqw 2.7cqw; }
.ui .u-doc-nav { flex:1; height:auto; padding-top:.9cqw; }
.ui .u-pgmini { display:flex; flex-direction:column; gap:.55cqw; width:15cqw; min-height:0; height:14cqw; padding:1.4cqw 1.6cqw; }
.ui .u-bar1 { display:block; height:.7cqw; width:85%; background:#0f4761; }
.ui .u-bar2 { display:block; height:.5cqw; width:45%; margin-top:.3cqw; background:#0f4761; }
.ui .u-barl { display:block; height:.3cqw; background:#a0a0a0; }

/* ---------------------------------------------------------------- 8. File (backstage) */
.ui .u-bk { position:relative; display:flex; height:24.2cqw; background:#fff; }
.ui .u-bs { flex:none; display:flex; flex-direction:column; width:13cqw; padding:.4cqw 0; background:var(--app); color:#fff; }
.ui .u-back { position:relative; display:block; flex:none; width:2.4cqw; height:2.4cqw; margin:0 0 .3cqw .8cqw; border:.14cqw solid rgba(255,255,255,.9); border-radius:50%; }
.ui .u-back span { position:absolute; left:.5cqw; right:.5cqw; top:50%; margin-top:-.08cqw; border-top:.16cqw solid #fff; }
.ui .u-back span::before { content:""; position:absolute; left:.02cqw; top:-.45cqw; width:.7cqw; height:.7cqw; border-left:.16cqw solid #fff; border-bottom:.16cqw solid #fff; transform:rotate(45deg); }
.ui .u-bi { position:relative; display:flex; align-items:center; flex:none; height:1.85cqw; padding:0 1.2cqw; font-size:1.2cqw; border-left:.35cqw solid transparent; }
.ui .u-bi.u-on { background:rgba(0,0,0,.3); border-left-color:#fff; }
.ui .u-bi.u-t { height:2.6cqw; margin:.25cqw .6cqw; padding:0 3.2cqw 0 .6cqw; border-radius:.2cqw; }
.ui .u-bsep { display:block; flex:none; height:.1cqw; margin:.35cqw 1.2cqw; background:rgba(255,255,255,.5); }
.ui .u-bm { flex:1; min-width:0; padding:2.8cqw 1.8cqw 1cqw; }
.ui .u-bh { margin-bottom:1cqw; font-size:2.2cqw; line-height:1.2; color:#1f1f1f; }
.ui .u-bh-dim { color:#5e5e5e; }
.ui .u-bt { position:absolute; top:.55cqw; left:13cqw; right:0; text-align:center; font-size:1.15cqw; color:#444; }
.ui .u-phs { display:flex; gap:1cqw; }
.ui .u-phs span { width:6.5cqw; height:8cqw; background:#f0f0f0; border:.1cqw solid #e2e2e2; }
.ui .u-phl { display:flex; flex-direction:column; gap:.6cqw; margin-top:1.2cqw; }
.ui .u-phl span { width:90%; height:.6cqw; background:#efefef; }
.ui .u-locs { display:flex; flex-direction:column; align-items:flex-start; gap:.35cqw; }
.ui .u-loc { position:relative; display:flex; align-items:center; gap:.8cqw; min-height:2.3cqw; padding:.2cqw .7cqw; font-size:1.25cqw; border-radius:.2cqw; }
.ui .u-loc.u-t { margin:.3cqw 0; }
.ui .u-li { position:relative; flex:none; display:inline-block; width:1.9cqw; height:1.6cqw; }
.ui .u-li-clock { width:1.6cqw; margin:0 .15cqw; border:.16cqw solid #444; border-radius:50%; }
.ui .u-li-clock::before { content:""; position:absolute; left:42%; top:16%; width:32%; height:40%; border-left:.15cqw solid #444; border-bottom:.15cqw solid #444; }
.ui .u-li-cloud { background:radial-gradient(circle at 32% 62%, #0f6cbd 0 28%, transparent 29%), radial-gradient(circle at 60% 46%, #0f6cbd 0 34%, transparent 35%), linear-gradient(#0f6cbd, #0f6cbd) 50% 88% / 80% 34% no-repeat; }
.ui .u-li-pc { height:1.25cqw; margin-bottom:.35cqw; border:.16cqw solid #444; border-radius:.1cqw; }
.ui .u-li-pc::after { content:""; position:absolute; left:28%; right:28%; bottom:-.5cqw; border-top:.16cqw solid #444; }
.ui .u-li-plus { background:linear-gradient(#444, #444) center / 1.4cqw .18cqw no-repeat, linear-gradient(#444, #444) center / .18cqw 1.4cqw no-repeat; }
.ui .u-li-fold { height:1.4cqw; background:#e8b84a; border-radius:.1cqw; }

/* ---------------------------------------------------------------- 9/10/16. Windows 10 file dialogs */
.ui .u-dlg { background:#fff; }
.ui .u-da { display:flex; align-items:center; gap:.5cqw; height:2.5cqw; padding:0 .6cqw; font-size:1.2cqw; border-bottom:.1cqw solid #e5e5e5; }
.ui .u-arr { flex:none; width:1.2cqw; text-align:center; font-size:1.25cqw; color:#666; }
.ui .u-path { flex:1; min-width:0; display:flex; align-items:center; gap:.35cqw; height:1.9cqw; padding:0 .5cqw; border:.1cqw solid #d9d9d9; overflow:hidden; }
.ui .u-cr { color:#666; }
.ui .u-srch { flex:0 1 7.5cqw; min-width:4.6cqw; display:flex; align-items:center; gap:.3cqw; height:1.9cqw; padding:0 .5cqw; border:.1cqw solid #d9d9d9; font-size:1.15cqw; color:#595959; overflow:hidden; }
.ui .u-dt { display:flex; align-items:center; gap:1.6cqw; height:2.3cqw; padding:0 .9cqw; font-size:1.2cqw; border-bottom:.1cqw solid #e5e5e5; }
.ui .u-org { display:flex; align-items:center; }
.ui .u-nf { position:relative; padding:.1cqw .4cqw; }
.ui .u-db { display:flex; height:9.6cqw; overflow:hidden; }
.ui .u-db.u-short { height:8.4cqw; }
.ui .u-np { flex:none; display:flex; flex-direction:column; width:12.6cqw; padding:.3cqw .25cqw .3cqw .45cqw; font-size:1.2cqw; border-right:.1cqw solid #e5e5e5; }
.ui .u-nr { position:relative; display:flex; align-items:center; gap:.5cqw; flex:none; min-height:1.5cqw; padding:.05cqw .5cqw; line-height:1.2; }
.ui .u-nr.u-on { background:#cce8ff; }
.ui .u-nr.u-t { margin:.35cqw .3cqw; }
.ui .u-ni { position:relative; flex:none; display:inline-block; width:1.4cqw; height:1.15cqw; background:#e8b84a; border-radius:.1cqw; }
.ui .u-ni-star { height:1.4cqw; background:#2b88d8; border-radius:0; clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ui .u-ni-pc { height:1cqw; background:#3b8ad9; box-shadow:0 .25cqw 0 -.05cqw #555; }
.ui .u-fl { flex:1; min-width:0; display:flex; flex-direction:column; padding:.2cqw .6cqw; font-size:1.2cqw; }
.ui .u-fh { display:flex; gap:1cqw; padding:.2cqw .4cqw; font-size:1.15cqw; color:#4c607a; border-bottom:.1cqw solid #e5e5e5; }
.ui .u-fh span:first-child { flex:1; }
.ui .u-fh span:last-child, .ui .u-ft { flex:none; width:11cqw; }
.ui .u-fr { display:flex; align-items:center; gap:1cqw; min-height:1.8cqw; padding:0 .4cqw; }
.ui .u-fn { position:relative; display:flex; align-items:center; gap:.5cqw; margin-right:auto; min-width:0; }
.ui .u-fn.u-t { margin-top:.3cqw; margin-bottom:.3cqw; padding:0 .3cqw; }
.ui .u-fnt { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ui .u-dlg .u-fl:not(.u-fl-x) .u-ft, .ui .u-dlg .u-fl:not(.u-fl-x) .u-fh span:last-child { width:9.6cqw; }
.ui .u-ft { font-size:1.15cqw; color:#555; overflow:hidden; text-overflow:ellipsis; }
.ui .u-empty { padding:1.4cqw .5cqw; text-align:center; font-size:1.2cqw; color:#666; }
.ui .u-fi { position:relative; flex:none; display:inline-block; width:1.5cqw; height:1.8cqw; background:#fff; border:.12cqw solid #8a8a8a; border-radius:.1cqw; }
.ui .u-fi::before { content:""; position:absolute; left:-.12cqw; top:25%; width:62%; height:50%; background:var(--fc, #888); border-radius:.1cqw; }
.ui .u-fi-word { --fc:#185abd; } .ui .u-fi-excel { --fc:#107c41; } .ui .u-fi-powerpoint { --fc:#c43e1c; } .ui .u-fi-pdf { --fc:#c4262e; }
.ui .u-fi-folder { width:1.9cqw; height:1.45cqw; background:#e8b84a; border:0; border-radius:0 .2cqw .2cqw .2cqw; }
.ui .u-fi-folder::before { left:0; top:-.3cqw; width:45%; height:.45cqw; background:#d39e2c; border-radius:.15cqw .15cqw 0 0; }
.ui .u-pdfb { flex:none; display:inline-grid; place-items:center; width:2.6cqw; height:2.2cqw; border-radius:.4cqw; background:#c4262e; color:#fff; font-size:1.15cqw; font-weight:700; line-height:1; }
.ui .u-dbot { padding:.45cqw .9cqw .75cqw; background:#fff; border-top:.1cqw solid #e5e5e5; }
.ui .u-frow { display:flex; align-items:center; gap:.6cqw; margin-bottom:.35cqw; }
.ui .u-flab { flex:none; width:9.4cqw; text-align:right; font-size:1.2cqw; }
.ui .u-in { position:relative; flex:1; min-width:0; display:flex; align-items:center; height:2.1cqw; padding:0 .5cqw; border:.1cqw solid #7a7a7a; background:#fff; font-size:1.2cqw; }
.ui .u-in.u-t { height:2.6cqw; border-radius:0; }
.ui .u-iv { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ui .u-sel.u-open { border-color:#0078d7; box-shadow:inset 0 0 0 .08cqw #0078d7; }
.ui .u-filt { flex:0 0 11cqw; }
.ui .u-brow { display:flex; align-items:center; gap:1cqw; margin-top:.3cqw; }
.ui .u-hide { display:flex; align-items:center; gap:.5cqw; font-size:1.2cqw; }
.ui .u-oa { max-width:22cqw; white-space:normal; line-height:1.15; }
.ui .u-btns { display:flex; gap:.8cqw; margin-left:auto; }
.ui .u-pbtn { position:relative; display:flex; align-items:center; justify-content:center; min-width:6.6cqw; height:2.3cqw; padding:0 .9cqw; background:#e1e1e1; border:.1cqw solid #adadad; font-size:1.2cqw; }
.ui .u-pbtn.u-def { border:.16cqw solid #0078d7; }
.ui .u-pbtn.u-t { height:2.6cqw; border-radius:0; }
.ui .u-dbot-open { border-top:0; padding-top:.7cqw; }
.ui .u-list { flex:1; min-width:0; display:flex; flex-direction:column; margin-top:-.4cqw; padding:.1cqw 0; background:#fff; border:.1cqw solid #7a7a7a; box-shadow:0 .25cqw .6cqw rgba(0,0,0,.25); }
.ui .u-opt { position:relative; display:block; padding:.05cqw .5cqw; font-size:1.2cqw; line-height:1.3; overflow:hidden; text-overflow:ellipsis; }
.ui .u-opt.u-t { margin:.4cqw .35cqw; padding:.1cqw .5cqw; line-height:1.2; background:#cce8ff; overflow:visible; }
.ui .u-db-ins { height:9.6cqw; }
.ui .u-fl-big { align-items:flex-start; padding:.9cqw 1.6cqw .9cqw 4.6cqw; }
.ui .u-bigfile { position:relative; display:flex; flex-direction:column; align-items:center; gap:.35cqw; padding:.4cqw .6cqw; background:#cce8ff; }
.ui .u-bthumb { position:relative; display:block; width:7.6cqw; height:5.1cqw; border:.1cqw solid #999; }

/* ---------------------------------------------------------------- Edge */
.ui .u-edge { background:#fff; }
.ui .u-et { display:flex; align-items:flex-end; gap:.5cqw; height:2.6cqw; padding:0 .4cqw 0 .6cqw; background:#e6e6e6; }
.ui .u-et > .app-badge { align-self:center; width:1.7cqw; height:1.7cqw; font-size:1.2cqw; border-radius:.35cqw; }
.ui .u-etab { display:flex; align-items:center; gap:.5cqw; min-width:0; max-width:24cqw; height:2.2cqw; padding:0 .7cqw; background:#fff; border-radius:.5cqw .5cqw 0 0; font-size:1.15cqw; }
.ui .u-ett { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ui .u-etab .u-xs { margin-left:.6cqw; }
.ui .u-eplus { align-self:center; font-size:1.4cqw; color:#444; }
.ui .u-et .u-wc { align-self:center; color:#333; }
.ui .u-fav { flex:none; display:inline-block; width:1.2cqw; height:1.3cqw; border-radius:.15cqw; background:#1B365D; }
.ui .u-fav-pdf { background:#c4262e; }
.ui .u-ea { display:flex; align-items:center; gap:.6cqw; height:2.7cqw; padding:0 .6cqw; background:#fff; border-bottom:.1cqw solid #e3e3e3; }
.ui .u-rf { position:relative; flex:none; display:inline-block; width:1.2cqw; height:1.2cqw; margin:0 .2cqw; border:.15cqw solid #555; border-top-color:transparent; border-radius:50%; }
.ui .u-url { position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:.5cqw; height:2cqw; padding:0 .8cqw; background:#f1f1f1; border-radius:1cqw; font-size:1.2cqw; }
.ui .u-url.u-t { height:2.3cqw; background:#fff; }
.ui .u-ut { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#333; }
.ui .u-caretd { height:1.7cqw; }
.ui .u-lock { position:relative; flex:none; display:inline-block; width:.9cqw; height:.75cqw; margin-top:.35cqw; background:#555; border-radius:.1cqw; }
.ui .u-lock::before { content:""; position:absolute; left:.13cqw; right:.13cqw; top:-.45cqw; height:.55cqw; border:.13cqw solid #555; border-bottom:0; border-radius:.3cqw .3cqw 0 0; }
.ui .u-filet { flex:none; padding-right:.5cqw; font-size:1.15cqw; color:#555; border-right:.1cqw solid #c8c8c8; }
.ui .u-dots { flex:none; font-size:1.3cqw; color:#444; }
.ui .u-dlb { flex:none; display:grid; place-items:center; width:2.2cqw; height:2cqw; border-radius:.3cqw; background:#e3e3e3; font-size:1.3cqw; font-weight:700; color:#222; }
.ui .u-dlb span { display:block; line-height:1; padding-bottom:.1cqw; border-bottom:.15cqw solid #222; }
.ui .u-epage { position:relative; background:#f5f7fa; }
.ui .u-pdfbar { display:flex; align-items:center; gap:1.2cqw; height:2.2cqw; padding:0 1cqw; background:#fff; border-bottom:.1cqw solid #e0e0e0; font-size:1.15cqw; color:#333; }
.ui .u-pdfz { font-size:1.4cqw; line-height:1; }
.ui .u-pdfsep { width:.1cqw; height:1.3cqw; background:#ccc; }
.ui .u-doc-pdf { height:17cqw; padding-top:.6cqw; }
.ui .u-page-pdf { width:36cqw; min-height:17cqw; padding:1.1cqw 2.2cqw; }
.ui .u-page-pdf .u-h1 { margin-bottom:.3cqw; font-size:1.6cqw; }
.ui .u-page-pdf .u-h2 { margin:.4cqw 0 .1cqw; font-size:1.35cqw; }
.ui .u-page-pdf .u-ln { font-size:1.2cqw; line-height:1.35; }

/* vublessons.com pages (schematic) */
.ui .u-vub { display:flex; align-items:center; height:2.4cqw; padding:0 1.2cqw; background:#1B365D; color:#fff; font-size:1.25cqw; font-weight:700; }
.ui .u-wk { padding:.9cqw 1.4cqw 1.3cqw; white-space:normal; }
.ui .u-wkh { font-size:1.6cqw; font-weight:700; line-height:1.2; color:#1B365D; }
.ui .u-part { margin:.8cqw 0 .7cqw; font-size:1.35cqw; font-weight:700; color:#333; }
.ui .u-gold { position:relative; display:inline-flex; align-items:center; padding:.55cqw 1.2cqw; background:#ffc400; color:#111; border-radius:.4cqw; white-space:nowrap; }
.ui .u-dlp { position:absolute; top:.4cqw; right:.7cqw; z-index:5; width:17.5cqw; padding:.6cqw .8cqw .8cqw; background:#fff; border-radius:.6cqw; white-space:normal; }
.ui .u-dlh { margin-bottom:.5cqw; font-size:1.3cqw; font-weight:700; }
.ui .u-dlr { display:flex; align-items:center; gap:.7cqw; }
.ui .u-dlthumb { position:relative; flex:none; display:block; width:3.6cqw; height:2.6cqw; border:.1cqw solid #999; }
.ui .u-dlx { display:flex; flex-direction:column; gap:.15cqw; min-width:0; }
.ui .u-dln { font-size:1.2cqw; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.ui .u-link { position:relative; font-size:1.25cqw; color:#0b57b8; text-decoration:underline; }
.ui .u-card { display:flex; flex-direction:column; align-items:flex-start; gap:.45cqw; padding:.7cqw 1.2cqw .9cqw; background:#fff; border:.1cqw solid #d5dbe3; border-left:.5cqw solid #1B365D; border-radius:.4cqw; }
.ui .u-cardt { font-size:1.5cqw; font-weight:700; color:#1B365D; }
.ui .u-cards { display:none; }
.ui .u-navy { position:relative; display:inline-flex; align-items:center; padding:.45cqw 1.1cqw; background:#1B365D; color:#fff; border-radius:.35cqw; }
.ui .u-week { display:flex; flex-direction:column; align-items:flex-start; gap:.5cqw; margin-top:.9cqw; padding:.7cqw 1.2cqw .9cqw; background:#fff; border:.1cqw solid #d5dbe3; border-radius:.4cqw; }
.ui .u-weekt { font-size:1.3cqw; font-weight:600; }
.ui .u-wl { display:flex; align-items:center; gap:2cqw; }

/* ---------------------------------------------------------------- 12. Excel */
.ui .u-fx { display:flex; align-items:center; gap:.5cqw; height:2.6cqw; padding:0 1cqw 0 .4cqw; background:#fff; border-bottom:.1cqw solid #d4d4d4; }
.ui .u-nbox { flex:none; display:flex; align-items:center; justify-content:space-between; width:6.2cqw; height:1.9cqw; padding:0 .4cqw; border:.1cqw solid #c6c6c6; font-size:1.2cqw; }
.ui .u-fxs { flex:none; padding:0 .6cqw; border-left:.1cqw solid #d4d4d4; border-right:.1cqw solid #d4d4d4; }
.ui .u-fxl { font:italic 600 1.35cqw/1 Georgia, "Times New Roman", serif; color:#444; }
.ui .u-fxi { position:relative; flex:1; min-width:0; display:flex; align-items:center; height:1.9cqw; padding:0 3.2cqw 0 .5cqw; font-size:1.3cqw; color:#1a1a1a; }
.ui .u-grid { display:grid; grid-template-columns:2.6cqw repeat(4, 1fr); grid-auto-rows:2.25cqw; padding-right:1cqw; background:#fff; color:#1a1a1a; }
.ui .u-xc { position:relative; display:flex; align-items:center; min-width:0; padding:0 .35cqw; border-right:.1cqw solid #e1e1e1; border-bottom:.1cqw solid #e1e1e1; font-size:1.3cqw; color:#1a1a1a; overflow:hidden; }
.ui .u-xc.u-isnum { justify-content:flex-end; }
.ui .u-xc.u-spill { overflow:visible; z-index:1; border-right-color:transparent; }
.ui .u-xh { justify-content:center; background:#f3f3f3; color:#444; font-size:1.2cqw; border-color:#d0d0d0; }
.ui .u-xh.u-on { background:#d3e8dc; color:#0b5a2f; font-weight:700; box-shadow:inset 0 -.25cqw 0 #107c41; }
.ui .u-xr.u-on { box-shadow:inset -.25cqw 0 0 #107c41; }
.ui .u-xc.u-act { z-index:2; box-shadow:inset 0 0 0 .3cqw #107c41; overflow:visible; }
.ui .u-xc.u-act::after { content:""; position:absolute; right:-.3cqw; bottom:-.3cqw; width:.65cqw; height:.65cqw; background:#107c41; border:.1cqw solid #fff; }
.ui .u-xc.u-act.u-t { box-shadow:inset 0 0 0 .3cqw #107c41, 0 0 0 .65cqw #111 !important; }
.ui .u-xc.u-t { overflow:visible; border-radius:0; }
.ui .u-sheets { display:flex; align-items:center; gap:.9cqw; height:2.1cqw; padding:0 .8cqw; background:#f3f3f3; border-top:.1cqw solid #d4d4d4; font-size:1.2cqw; }
.ui .u-sheet { padding:.1cqw .9cqw; background:#fff; color:#0b5a2f; font-weight:700; border-bottom:.25cqw solid #107c41; }
.ui .u-plus { font-size:1.4cqw; color:#444; }

/* ---------------------------------------------------------------- PowerPoint */
.ui .u-pv { display:flex; height:19cqw; background:#e6e6e6; }
.ui .u-thp { flex:none; display:flex; align-items:flex-start; gap:.4cqw; width:7.2cqw; padding:.8cqw .5cqw; background:#f3f3f3; border-right:.1cqw solid #d6d6d6; }
.ui .u-thn { font-size:1.15cqw; color:#333; }
.ui .u-mini { position:relative; display:block; width:5cqw; aspect-ratio:16 / 9; background:#fff; border:.2cqw solid var(--app); }
.ui .u-mini.u-theme { background:#0e4f5a; }
.ui .u-minip { position:absolute; inset:15% 18%; background:#c9a97a; }
.ui .u-stage { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; padding:.8cqw; }
.ui .u-slide { position:relative; height:100%; aspect-ratio:16 / 9; max-width:100%; background:#fff; box-shadow:0 0 .4cqw rgba(0,0,0,.25); white-space:normal; }
.ui .u-txt { position:absolute; left:8%; right:8%; top:10%; bottom:12%; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:1.2cqw; }
.ui .u-txt.u-side { left:5%; right:45%; top:12%; bottom:auto; justify-content:flex-start; gap:1.1cqw; }
.ui .u-box { position:relative; display:flex; align-items:center; justify-content:center; padding:.3cqw .6cqw; text-align:center; line-height:1.15; color:#222; }
.ui .u-box-title { min-height:5.2cqw; font-size:2.2cqw; }
.ui .u-box-subtitle { min-height:3cqw; margin:0 8%; font-size:1.45cqw; color:#444; }
.ui .u-ph { border:.12cqw dashed #7a7a7a; }
.ui .u-ph > span { color:#555; }
.ui .u-side .u-box { justify-content:flex-start; min-height:0; margin:0; text-align:left; }
.ui .u-side .u-box-title { font-size:1.7cqw; line-height:1.12; }
.ui .u-side .u-box-subtitle { font-size:1.2cqw; line-height:1.3; }
.ui .u-side .u-ph.u-box-title { min-height:4.4cqw; }
.ui .u-slide.u-theme { background:linear-gradient(135deg, #0a3a44, #0e5560 60%, #11707f); }
.ui .u-slide.u-theme::before { content:""; position:absolute; left:0; right:0; bottom:0; height:6%; background:#f2c14e; }
.ui .u-theme .u-box { color:#fff; }
.ui .u-theme .u-box-subtitle { color:#dff3f4; }
.ui .u-theme .u-ph { border-color:rgba(255,255,255,.8); }
.ui .u-theme .u-ph > span { color:#eef9f9; }
.ui .u-photo { position:absolute; display:block; }
.ui .u-ph-inserted { left:12%; right:12%; top:7%; bottom:7%; }
.ui .u-ph-cropping { left:5%; right:5%; top:5%; bottom:5%; }
.ui .u-ph-cropped { left:58%; right:4%; top:18%; bottom:18%; }
.ui .u-pclip { position:absolute; inset:0; display:block; overflow:hidden; }
.ui .u-art { position:absolute; inset:0; display:block; background:#e8dcc4; }
.ui .u-wall { position:absolute; left:0; right:0; top:0; height:64%; background:linear-gradient(#cdb995, #e6d8bb); }
.ui .u-tbl { position:absolute; left:0; right:0; bottom:0; height:36%; background:linear-gradient(#9a6b43, #7a5232); }
.ui .u-fig { position:absolute; bottom:30%; width:20%; height:50%; }
.ui .u-fig::before { content:""; position:absolute; left:28%; width:44%; top:0; aspect-ratio:1; border-radius:50%; background:var(--skin); }
.ui .u-fig::after { content:""; position:absolute; left:0; right:0; top:40%; bottom:0; border-radius:45% 45% 0 0; background:var(--cloth); }
.ui .u-f1 { left:17%; --skin:#8d5a3c; --cloth:#35648c; }
.ui .u-f2 { right:17%; --skin:#c89066; --cloth:#7c4a6b; }
.ui .u-paper { position:absolute; left:40%; width:20%; bottom:10%; height:17%; background:repeating-linear-gradient(#fff 0 22%, #b8b8b8 22% 28%) content-box, #fff; padding:6% 10%; transform:rotate(-5deg); box-shadow:0 .1cqw .25cqw rgba(0,0,0,.35); }
.ui .u-chip { position:absolute; left:.5cqw; top:.5cqw; padding:.05cqw .5cqw; background:rgba(0,0,0,.75); color:#fff; font-size:1.15cqw; border-radius:.2cqw; white-space:nowrap; }
.ui .u-cf { position:absolute; left:16%; right:16%; top:8%; bottom:8%; box-shadow:0 0 0 40cqw rgba(25,25,25,.58); }
.ui .u-hd { position:absolute; display:block; background:#111; box-shadow:0 0 0 .12cqw #fff; }
.ui .u-hd-t, .ui .u-hd-b { left:50%; width:2.2cqw; height:.5cqw; margin-left:-1.1cqw; }
.ui .u-hd-t { top:calc(8% - .25cqw); } .ui .u-hd-b { bottom:calc(8% - .25cqw); }
.ui .u-hd-l, .ui .u-hd-r { top:50%; width:.55cqw; height:2.4cqw; margin-top:-1.2cqw; }
.ui .u-hd-l { left:calc(16% - .27cqw); } .ui .u-hd-r { right:calc(16% - .27cqw); }
.ui .u-hd-tl, .ui .u-hd-tr, .ui .u-hd-bl, .ui .u-hd-br { width:1.6cqw; height:1.6cqw; background:none; box-shadow:none; border:.5cqw solid #111; filter:drop-shadow(0 0 .08cqw #fff) drop-shadow(0 0 .08cqw #fff); }
.ui .u-hd-tl { left:calc(16% - .25cqw); top:calc(8% - .25cqw); border-right:0; border-bottom:0; }
.ui .u-hd-tr { right:calc(16% - .25cqw); top:calc(8% - .25cqw); border-left:0; border-bottom:0; }
.ui .u-hd-bl { left:calc(16% - .25cqw); bottom:calc(8% - .25cqw); border-right:0; border-top:0; }
.ui .u-hd-br { right:calc(16% - .25cqw); bottom:calc(8% - .25cqw); border-left:0; border-top:0; }
.ui .u-hd.u-t { border-radius:.1cqw; }
.ui .u-drag { position:absolute; top:50%; margin-top:-1.1cqw; font-size:2cqw; font-weight:700; line-height:1; color:#fff; text-shadow:0 0 .25cqw #000, 0 0 .1cqw #000; }
.ui .u-drag-l { left:3%; } .ui .u-drag-r { right:3%; }
.ui .u-pv-crop { height:12.4cqw; }

/* themes gallery */
.ui .u-rb-themes .u-gi { gap:.5cqw; align-items:stretch; }
.ui .u-thm { position:relative; display:flex; flex-direction:column; justify-content:space-between; width:5.4cqw; height:4.6cqw; padding:.35cqw .4cqw; border:.1cqw solid #c9c9c9; background:var(--bg); color:var(--fg); }
.ui .u-aa { font-size:1.7cqw; font-weight:600; line-height:1; }
.ui .u-aa.u-big { font-weight:700; }
.ui .u-pal { display:flex; gap:.12cqw; height:.55cqw; }
.ui .u-pal span { flex:1; background:var(--c1); }
.ui .u-pal span:nth-child(2) { background:var(--c2); } .ui .u-pal span:nth-child(3) { background:var(--c3); } .ui .u-pal span:nth-child(4) { background:var(--c4); }
.ui .u-thm1 { --bg:#fff; --fg:#222; --c1:#156082; --c2:#e97132; --c3:#196b24; --c4:#0f9ed5; }
.ui .u-thm2 { --bg:#1f2b4d; --fg:#fff; --c1:#5b8def; --c2:#f4b942; --c3:#e45d50; --c4:#9fb4d9; }
.ui .u-thm3 { --bg:#0e5560; --fg:#fff; --c1:#4fc3c9; --c2:#f2c14e; --c3:#e85d4a; --c4:#d9f2f2; }
.ui .u-thm4 { --bg:#f4ecd8; --fg:#2f4f2f; --c1:#4c7a3d; --c2:#c0873f; --c3:#7a5c3a; --c4:#a7b98a; }
.ui .u-thm5 { --bg:#2d2d2d; --fg:#ffb35c; --c1:#ff9f43; --c2:#54a0ff; --c3:#c8d6e5; --c4:#ee5253; }
.ui .u-thm6 { --bg:#ece6f6; --fg:#4b2a7b; --c1:#6d43b0; --c2:#d16ba5; --c3:#3e8e9e; --c4:#b9a6db; }

/* Insert > Pictures menu */
.ui .u-menu { position:absolute; left:-.1cqw; top:calc(100% + .35cqw); z-index:6; display:flex; flex-direction:column; gap:.15cqw; min-width:17cqw; padding:.4cqw; background:#fff; border:.1cqw solid #c6c6c6; box-shadow:0 .3cqw .9cqw rgba(0,0,0,.3); text-align:left; }
.ui .u-mi { position:relative; display:flex; align-items:center; gap:.7cqw; padding:.35cqw .6cqw; font-size:1.25cqw; line-height:1.2; border-radius:.2cqw; color:#222; }
.ui .u-mi.u-t { margin:.35cqw .25cqw; background:#e8eef7; }
.ui .u-mg { position:relative; flex:none; display:inline-block; width:1.8cqw; height:1.45cqw; border:.14cqw solid #444; border-radius:.12cqw; }
.ui .u-mg-pc { height:1.2cqw; margin-bottom:.3cqw; }
.ui .u-mg-pc::after { content:""; position:absolute; left:25%; right:25%; bottom:-.45cqw; border-top:.15cqw solid #444; }
.ui .u-mg-stock { background:linear-gradient(to top right, #3f8a4a 32%, transparent 33%) 0 100% / 100% 55% no-repeat, #e5eef8; }
.ui .u-mg-web { width:1.6cqw; height:1.6cqw; border-radius:50%; background:linear-gradient(#444, #444) center / 100% .12cqw no-repeat, linear-gradient(#444, #444) center / .12cqw 100% no-repeat; }

/* Designer pane */
.ui .u-pv-dz { height:22.4cqw; }
.ui .u-dz { flex:none; display:flex; flex-direction:column; gap:.6cqw; width:16cqw; padding:.8cqw .9cqw; background:#fff; border-left:.1cqw solid #d0d0d0; overflow:hidden; }
.ui .u-dzh { display:flex; align-items:center; justify-content:space-between; }
.ui .u-dzt { font-size:1.6cqw; font-weight:600; }
.ui .u-dzx { position:relative; display:grid; place-items:center; width:2.4cqw; height:2.4cqw; line-height:1; }
.ui .u-dzx .u-big { font-size:2.3cqw; line-height:1; }
.ui .u-ideas { display:flex; flex-direction:column; gap:.7cqw; }
.ui .u-idea { position:relative; display:block; flex:none; width:100%; aspect-ratio:16 / 9; background:#fff; border:.15cqw solid #c8c8c8; overflow:hidden; }
.ui .u-ip { position:absolute; display:block; background:linear-gradient(#cdb995 0 60%, #8d6440 60%); }
.ui .u-ib { position:absolute; display:block; height:12%; background:#2b2b2b; }
.ui .u-ib2 { height:7%; background:#9a9a9a; }
.ui .u-idea1 .u-ip { right:0; top:0; bottom:0; width:48%; } .ui .u-idea1 .u-ib { left:7%; width:36%; top:34%; } .ui .u-idea1 .u-ib2 { top:54%; width:26%; }
.ui .u-idea2 { background:#0e5560; } .ui .u-idea2 .u-ip { left:0; right:0; top:0; height:64%; } .ui .u-idea2 .u-ib { left:8%; width:56%; top:72%; background:#fff; } .ui .u-idea2 .u-ib2 { left:8%; top:88%; width:34%; background:#9fd3d6; }
.ui .u-idea3 .u-ip { left:6%; top:12%; width:40%; height:76%; } .ui .u-idea3 .u-ib { left:52%; width:40%; top:30%; } .ui .u-idea3 .u-ib2 { left:52%; top:50%; width:28%; }

/* ---------------------------------------------------------------- File Explorer */
.ui .u-xtabs { display:flex; align-items:stretch; gap:.3cqw; height:2.3cqw; padding:0 .4cqw; background:#fff; border-bottom:.1cqw solid #e3e3e3; font-size:1.2cqw; }
.ui .u-xtabs span { display:flex; align-items:center; padding:0 .9cqw; }
.ui .u-xtabs .u-on { background:#1979ca; color:#fff; }
.ui .u-fl-x { padding:.3cqw .8cqw .6cqw; background:#fff; }
.ui .u-fl-x .u-fr { min-height:2.7cqw; font-size:1.25cqw; }
.ui .u-fl-x .u-fn { gap:.8cqw; }
.ui .u-fl-x .u-fn .app-badge { margin:0 .2cqw; }
.ui .u-fl-x .u-ft, .ui .u-fl-x .u-fh span:last-child { width:15.5cqw; font-size:1.2cqw; }
.ui .u-status { display:flex; align-items:center; height:2cqw; padding:0 .8cqw; font-size:1.15cqw; color:#444; background:#fff; border-top:.1cqw solid #eee; }