/* ═══════════════════════════════════════════════════════════════════════ VALPROVIA — Illustration UI Kit One source of truth for the product-UI illustrations (600 × 450, 4:3). Principles · One size per component. Variants change COLOUR / STATE, never size. · Never hardcode font-size on a component — use a type role (.t-*). · Never hardcode brand hex — read from --color-* tokens. · Re-skin per product with a body tint class (.tint-sharepoint / .tint-teams). Load order: valprovia-kit.css ← this file (tokens + type + atoms + window frame) console.css ← dark/light code surface family (optional) schema.css ← concept-thumbnail family (optional) ═══════════════════════════════════════════════════════════════════════ */ /* ─── Tokens ──────────────────────────────────────────────────────────── */ :root { /* Type */ --font-body: 'Inter', Helvetica, Arial, sans-serif; --font-heading: 'Poppins', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Brand */ --color-primary: #2bb8f0; /* light cyan — tints, icon fills, accents, rings */ --color-primary-rgb: 43, 184, 240; --color-primary-deep: #1187cb; /* deep cyan — white-on-color, text/links, active states */ --color-brand-navy: #2b3150; --color-brand-navy-rgb: 43, 49, 80; /* Text */ --color-text-primary: #2b3150; --color-text-secondary: #6e7691; --color-text-secondary-rgb: 110, 118, 145; --color-text-light: #f8fafc; /* Surfaces */ --color-surface: #ffffff; --color-surface-muted: #f7f8fa; --color-surface-bg: #fbfcfe; /* artboard background */ --color-surface-tint: #e6f6fe; /* tintable */ --color-surface-tint-soft: #f2fafe; /* tintable */ /* Borders */ --color-border: #e8ebf1; --color-border-strong: #ccd1de; /* Status */ --color-status-ok: #16b364; --color-status-ok-rgb: 22, 179, 100; --color-status-risk: #e5565b; --color-status-risk-rgb: 229, 86, 91; --color-status-warning: #f0a93b; --color-status-warning-rgb: 240, 169, 59; --color-status-warning-dark: #c47f15; --color-status-ok-bg: rgba(22, 179, 100, 0.14); --color-status-risk-bg: rgba(229, 86, 91, 0.12); --color-status-warning-bg: rgba(240, 169, 59, 0.15); --color-status-neutral-bg: rgba(110, 118, 145, 0.10); /* Radii — one per role */ --r-pill: 999px; --r-control: 7px; /* buttons, inputs */ --r-card: 10px; /* cards, modals */ --r-frame: 14px; /* window frame */ /* Shadows */ --shadow-soft: 0 6px 14px rgba(43, 49, 80, .05); --shadow-focal: 0 10px 22px rgba(43, 49, 80, .08), 0 2px 6px rgba(43, 49, 80, .04); --shadow-frame: 0 1px 0 rgba(43,49,80,.04) inset, 0 20px 40px -20px rgba(43,49,80,.16), 0 50px 80px -40px rgba(43,184,240,.18); /* Syntax (console family reads these) */ --syntax-key: #0f6cbd; --syntax-string: #16b364; --syntax-literal: #7719aa; --syntax-comment: #94a3b8; --syntax-pipe: #c084fc; } /* ─── Brand tints — re-skin the cyan primary per product ────────────────── Apply on etc. Only the 5 tintable tokens change; all semantic tokens (navy, text, status, borders) stay fixed. */ .tint-sharepoint { --color-primary: #1fbeb3; --color-primary-rgb: 31, 190, 179; --color-primary-deep: #129a92; --color-surface-tint: #e4f7f5; --color-surface-tint-soft: #f0fbfa; } .tint-teams { --color-primary: #7479e6; --color-primary-rgb: 116, 121, 230; --color-primary-deep: #5559cf; --color-surface-tint: #eef0fe; --color-surface-tint-soft: #f5f6fe; } /* ─── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-text-primary); background: var(--color-surface); -webkit-font-smoothing: antialiased; line-height: 1.5; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: default; border: 0; background: transparent; color: inherit; } b { font-weight: inherit; color: var(--color-brand-navy); } /* colour-only emphasis */ /* ═══════════════════════════════════════════════════════════════════════ TYPE SCALE — 3 sizes, 5 roles. Apply by class; never inline font-size. 18 .t-value KPI numbers, big metrics Poppins 600, navy 14 .t-title Panel / modal-header titles Poppins 600, navy + .t-title--on-primary (white, for primary bars) 12 .t-name Genuine names / titles only Inter 600, navy (SPARING) .t-label Field labels Inter 500, navy .t-body Normal text, filled values Inter 400, navy .t-meta Placeholders, captions, meta Inter 400, secondary 11 .t-col-header Table column headers Inter 400, secondary, UPPER ═══════════════════════════════════════════════════════════════════════ */ .t-value { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1; color: var(--color-brand-navy); letter-spacing: -0.02em; } .t-title { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--color-brand-navy); letter-spacing: -0.01em; } .t-title--on-primary { color: var(--color-surface); } .t-name { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--color-brand-navy); letter-spacing: -0.01em; } .t-label { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-brand-navy); } .t-body { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--color-text-primary); } .t-meta { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--color-text-secondary); } .t-col-header { font-family: var(--font-body); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════ ATOMS — one size each. Variants = colour / state only. ═══════════════════════════════════════════════════════════════════════ */ /* ─── Button — primary + ghost. 32px, one size. ─────────────────────────── */ .ill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-control); font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; } .ill-btn svg { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ill-btn--primary { background: var(--color-primary-deep); color: var(--color-surface); } .ill-btn--ghost { background: transparent; color: var(--color-primary-deep); padding: 0 8px; } /* Icon button — chrome only (close, toolbar). One size, 28px square. */ .ill-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-control); background: transparent; color: var(--color-text-secondary); flex: none; } .ill-iconbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ill-iconbtn--on-primary { color: var(--color-surface); opacity: .9; } /* ─── Badge / pill — one size, status colours. ──────────────────────────── */ .ill-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 4px 9px; font-family: var(--font-body); font-size: 11px; line-height: 1; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .ill-pill__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: currentColor; } .ill-pill__icon { width: 11px; height: 11px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; } .ill-pill--ok { background: var(--color-status-ok-bg); border-color: rgba(var(--color-status-ok-rgb), .28); color: var(--color-status-ok); } .ill-pill--risk { background: var(--color-status-risk-bg); border-color: rgba(var(--color-status-risk-rgb), .24); color: var(--color-status-risk); } .ill-pill--warning { background: var(--color-status-warning-bg); border-color: rgba(var(--color-status-warning-rgb), .28); color: var(--color-status-warning-dark); } .ill-pill--primary { background: var(--color-surface-tint); border-color: rgba(var(--color-primary-rgb), .22); color: var(--color-primary-deep); } .ill-pill--neutral { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-secondary); } /* ─── Avatar — one size, 24px circle, tinted bg + solid initials. ───────── */ .ill-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-surface-tint); color: var(--color-primary-deep); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; flex: none; } .ill-avatar--bordered { border: 1.5px solid var(--color-surface); box-shadow: 0 1px 2px rgba(var(--color-brand-navy-rgb), .08); } .ill-avatar--ok { background: var(--color-status-ok-bg); color: var(--color-status-ok); } .ill-avatar--warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-dark); } .ill-avatar--risk { background: var(--color-status-risk-bg); color: var(--color-status-risk); } .ill-avatar--neutral { background: var(--color-status-neutral-bg); color: var(--color-text-secondary); } .ill-avatar-stack { display: inline-flex; } .ill-avatar-stack .ill-avatar + .ill-avatar { margin-left: -6px; } /* ─── Icon tile — one size, 24px, colour variants. ──────────────────────── */ .ill-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--color-surface); flex: none; } .ill-icon-tile--round { border-radius: 50%; } /* Solid — white glyph on colour. Use for a single focal / hero icon. */ .ill-icon-tile--primary { background: var(--color-primary-deep); } .ill-icon-tile--navy { background: var(--color-brand-navy); } .ill-icon-tile--muted { background: var(--color-border-strong); } .ill-icon-tile--warning { background: var(--color-status-warning); } .ill-icon-tile--risk { background: var(--color-status-risk); } .ill-icon-tile--ok { background: var(--color-status-ok); } /* Tinted — colour glyph on soft fill. Use in lists / rows / repeated tiles. */ .ill-icon-tile--primary-tint { background: var(--color-surface-tint); color: var(--color-primary-deep); } .ill-icon-tile--ok-tint { background: var(--color-status-ok-bg); color: var(--color-status-ok); } .ill-icon-tile--risk-tint { background: var(--color-status-risk-bg); color: var(--color-status-risk); } .ill-icon-tile--warning-tint { background: var(--color-status-warning-bg); color: var(--color-status-warning-dark); } .ill-icon-tile--neutral-tint { background: var(--color-status-neutral-bg); color: var(--color-text-secondary); } .ill-icon-tile svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ill-icon-tile img { width: 15px; height: 15px; } /* ─── Input — one size, 32px. States: muted / focus. ────────────────────── */ .ill-input { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--color-border); background: var(--color-surface); } .ill-input > svg { width: 14px; height: 14px; flex: none; stroke: var(--color-text-secondary); stroke-width: 1.8; fill: none; } .ill-input__chev { width: 12px; height: 12px; flex: none; margin-left: auto; stroke: var(--color-text-secondary); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ill-input--muted { background: var(--color-surface-bg); } .ill-input--focus { border: 1.5px solid var(--color-primary-deep); } /* Dropdown / select menu */ .ill-menu { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-control); box-shadow: var(--shadow-focal); overflow: hidden; display: flex; flex-direction: column; } .ill-option { display: flex; align-items: center; gap: 9px; padding: 9px 12px; } .ill-option.is-active { background: var(--color-surface-tint); } /* ─── Checkbox + toggle — one size each. ────────────────────────────────── */ .ill-checkbox { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 3px; background: var(--color-surface); border: 1px solid var(--color-border-strong); flex: none; } .ill-checkbox.is-active { background: var(--color-primary-deep); border-color: var(--color-primary-deep); } .ill-checkbox svg { width: 9px; height: 9px; stroke: var(--color-surface); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ill-toggle { width: 32px; height: 17px; border-radius: 9px; background: var(--color-border-strong); position: relative; flex: none; transition: none; } .ill-toggle.is-active { background: var(--color-primary-deep); } .ill-toggle__thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--color-surface); position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.15); } .ill-toggle.is-active .ill-toggle__thumb { left: auto; right: 2px; } /* ─── Tabs — one style (underline). ─────────────────────────────────────── */ .ill-tabs { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--color-border); } .ill-tab { padding: 7px 0; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ill-tab.is-active { color: var(--color-brand-navy); border-bottom-color: var(--color-primary-deep); font-weight: 600; } .ill-tab__count { color: var(--color-primary-deep); font-weight: 600; } .ill-tab__count::before { content: "·"; margin: 0 5px; color: rgba(var(--color-primary-rgb), .45); } /* ─── Segmented control — one style. ────────────────────────────────────── */ .ill-segmented { display: inline-flex; align-items: center; gap: 6px; } .ill-segmented__item { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-body); font-size: 11px; font-weight: 500; line-height: 1; } .ill-segmented__item.is-active { background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: var(--color-surface); font-weight: 600; } /* ─── Stepper — wizard progress. One size. ──────────────────────────────── */ .ill-stepper { display: inline-flex; align-items: center; gap: 6px; } .ill-stepper__step { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 11px; font-weight: 600; background: var(--color-surface); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); flex: none; } .ill-stepper__step.is-active { background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: var(--color-surface); } .ill-stepper__step.is-done { background: var(--color-surface-tint); border-color: rgba(var(--color-primary-rgb), .3); color: var(--color-primary-deep); } .ill-stepper__bar { width: 18px; height: 2px; border-radius: 2px; background: var(--color-border); flex: none; } .ill-stepper__bar.is-done { background: var(--color-primary-deep); } /* ─── Card — one base, optional focal shadow. ───────────────────────────── */ .ill-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); padding: 12px 14px; } .ill-card--focal { box-shadow: var(--shadow-soft); } .ill-cards { display: grid; gap: 10px; } /* ─── Status pip (corner badge on tiles/discs). ─────────────────────────── */ .ill-pip { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-deep); color: var(--color-surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(var(--color-primary-rgb), .30); border: 2.5px solid var(--color-surface); flex: none; } .ill-pip--ok { background: var(--color-status-ok); box-shadow: 0 6px 14px rgba(var(--color-status-ok-rgb), .30); } .ill-pip--risk { background: var(--color-status-risk); box-shadow: 0 6px 14px rgba(var(--color-status-risk-rgb), .30); } .ill-pip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* ─── Live dot (static — no animation). ─────────────────────────────────── */ .ill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-deep); flex: none; display: inline-block; } .ill-dot--live { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .18); } .ill-dot--ok { background: var(--color-status-ok); } /* ─── Delta — trend indicator (text + direction arrow). NOT a status pill. ─ */ .ill-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1; color: var(--color-status-ok); } .ill-delta svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ill-delta--down { color: var(--color-status-risk); } .ill-delta--down svg { transform: rotate(180deg); } /* ═══════════════════════════════════════════════════════════════════════ FORM CONTROLS — labels, settings rows, selectable type cards. ═══════════════════════════════════════════════════════════════════════ */ .ill-field-label { display: flex; align-items: center; gap: 5px; font-weight: 500; color: var(--color-brand-navy); } .ill-field-label .req { color: var(--color-status-risk); margin-left: 2px; } .ill-info-icon { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--color-border-strong); font-style: italic; font-family: serif; flex: none; } .ill-setting-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); } .ill-setting-row__label { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--color-brand-navy); } .ill-setting-row__label .req { color: var(--color-status-risk); margin-left: 2px; } .ill-type-card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--r-card); background: var(--color-surface); } .ill-type-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ill-type-card.is-active { border: 1.5px solid var(--color-primary-deep); background: var(--color-surface-tint-soft); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .10); } /* ═══════════════════════════════════════════════════════════════════════ MODAL — white card over a blurred context underlay (.ill-bg-stack). ═══════════════════════════════════════════════════════════════════════ */ .ill-modal-overlay { position: absolute; inset: 0; background: rgba(var(--color-brand-navy-rgb), 0.06); backdrop-filter: blur(1px); display: flex; align-items: center; justify-content: center; z-index: 1; } .ill-modal-overlay--top { align-items: flex-start; padding-top: 18px; } .ill-modal { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-focal), 0 30px 60px -20px rgba(var(--color-brand-navy-rgb), .18); width: 92%; max-width: 480px; } /* Header — UNIFORM across every modal: fixed height, icon + heading on the left, close button on the right. Never omit the icon or the close button. */ .ill-modal__header { background: var(--color-primary-deep); height: 48px; padding: 0 12px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; } .ill-modal__header--split { justify-content: space-between; } .ill-modal__heading { display: flex; align-items: center; gap: 9px; min-width: 0; } .ill-modal__heading svg { width: 16px; height: 16px; stroke: var(--color-surface); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .9; flex: none; } .ill-modal__heading img { width: 17px; height: 17px; flex: none; } .ill-modal__title { padding: 14px 16px 12px; } .ill-modal__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .ill-modal__field { display: flex; flex-direction: column; gap: 5px; } .ill-modal__footer { padding: 12px 16px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--color-border); } /* ─── Bg-stack — blurred, non-interactive context underlay. ─────────────── */ .ill-bg-stack { position: absolute; inset: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; filter: blur(3px); pointer-events: none; } .ill-bg-stack__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); } .ill-bg-stack__col { display: flex; flex-direction: column; gap: 2px; } .ill-bg-stack__tabs { display: flex; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); } .ill-bg-stack__tab { padding-bottom: 6px; } .ill-bg-stack__tab.is-on { color: var(--color-brand-navy); font-weight: 600; border-bottom: 2px solid var(--color-primary-deep); } .ill-bg-stack__list { display: flex; flex-direction: column; } .ill-bg-stack__item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-border); } .ill-bg-stack__label { flex: 1; color: var(--color-brand-navy); font-weight: 500; } .ill-bg-stack__role { padding: 2px 7px; border: 1px solid var(--color-border); border-radius: var(--r-pill); } /* ═══════════════════════════════════════════════════════════════════════ WINDOW FRAME — light app-window chrome (the default illustration shell). .mod-frame fills its parent; on a standalone artboard, set the body to 600 × 450 and drop in a .mod-frame. ═══════════════════════════════════════════════════════════════════════ */ .mod-frame { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: var(--r-frame); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-frame); overflow: hidden; } .mod-frame__head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: rgba(248, 248, 248, 0.7); flex: none; } .mod-frame__head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); } .mod-frame__head .name { margin-left: 10px; font-family: var(--font-body); text-transform: uppercase; font-size: 11px; color: var(--color-text-secondary); letter-spacing: 0.04em; } .mod-frame__body { flex: 1; min-height: 0; padding: 18px 20px; display: flex; flex-direction: column; } .mod-frame__body--flush { padding: 0; } /* ═══════════════════════════════════════════════════════════════════════ LAYOUT UTILITIES ═══════════════════════════════════════════════════════════════════════ */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap-2{gap:2px} .gap-3{gap:3px} .gap-4{gap:4px} .gap-5{gap:5px} .gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px} .gap-16{gap:16px} .between { justify-content: space-between; } .center { justify-content: center; align-items: center; } .grow { flex: 1 1 auto; min-width: 0; } .nowrap { white-space: nowrap; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ill-hr { height: 1px; background: var(--color-border); width: 100%; } .ill-vhr { width: 1px; background: var(--color-border); align-self: stretch; } /* ═══════════════════════════════════════════════════════════════════════ STANDALONE ARTBOARD — make a single illustration fill the 600×450 viewport. Add class="artboard" to in a one-illustration file. ═══════════════════════════════════════════════════════════════════════ */ .artboard { width: 100vw; height: 100vh; overflow: hidden; background: var(--color-surface-bg); } .artboard .mod-frame { border-radius: 0; border: 0; box-shadow: none; }