/* TextEdit (macOS 27, dark appearance) — measured against a 2x capture.
   1 CSS px = 1 macOS point. Window chrome is 603 × 505 pt. */

:root {
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
  --chrome: #262626;
  --ctl: #404040;
  --ctl-fg: #e3e3e3;
  --doc-bg: #1e1e1e;
  --bar: #141414;
  --knob: #1f1f1f;
  --accent: #3d81f9;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 13px/1 var(--ui);
  color: var(--ctl-fg);
  background: #1b2a44;
  overflow: hidden;
  -webkit-font-smoothing: auto;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: default; }

/* ---------- desktop ---------- */
.desktop {
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 90% at 18% 105%, #f28c5a 0%, rgba(242,140,90,0) 55%),
    radial-gradient(90% 80% at 95% 100%, #c2477a 0%, rgba(194,71,122,0) 60%),
    radial-gradient(140% 100% at 50% -10%, #2d5fa8 0%, #1b2a55 55%, #1a1838 100%);
}
.menubar {
  position: absolute; inset: 0 0 auto 0; height: 24px;
  display: flex; align-items: center; gap: 18px; padding: 0 14px 0 18px;
  font-size: 13px; color: #fff; font-weight: 500;
  text-shadow: 0 0 6px rgba(0,0,0,.25);
  user-select: none;
}
.menubar b { font-weight: 700; }
.menubar .apple { font-size: 15px; margin-right: 2px; }
.menubar .spacer { flex: 1; }

.dock {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  padding: 5px 6px 4px;
  border-radius: 22px;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.25);
}
.dock button { position: relative; display: block; width: 56px; height: 58px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.dock button:hover { transform: translateY(-6px) scale(1.12); }
.dock img { display: block; width: 56px; height: 56px; }
.dock .dot { position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.85); }
.dock.closed .dot { display: none; }

/* ---------- window ---------- */
.window {
  position: absolute;
  left: calc(50% - 301.5px); top: calc(50% - 252.5px);
  width: 603px; height: 505px;
  display: flex; flex-direction: column;
  background: var(--chrome);
  border-radius: 16px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.95), 0 20px 38px rgba(0,0,0,.69);
  overflow: hidden;
  isolation: isolate;
  transform-origin: 50% 100%;
  transition: transform .32s cubic-bezier(.3,.7,.2,1), opacity .25s ease, border-radius .3s;
  user-select: none;
}
.window::after { /* 1pt light rim drawn over everything, like AppKit */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 10;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.window.inactive .light { background: #3a3a3a !important; box-shadow: none !important; }
.window.inactive .title { opacity: .7; }
.window.hidden { opacity: 0; transform: scale(.92); pointer-events: none; }
.window.minimized { opacity: 0; transform: translateY(60vh) scale(.08, .05); pointer-events: none; }
.window.zoomed { left: 6px !important; top: 30px !important; width: calc(100% - 12px); height: calc(100% - 100px); }
.window.dragging { transition: none; }

/* title bar */
.titlebar { position: relative; height: 32px; flex: none; }
.lights { position: absolute; left: 9px; top: 9px; display: flex; gap: 9px; z-index: 2; }
.light {
  width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.06);
}
.light svg { width: 14px; height: 14px; opacity: 0; stroke: rgba(0,0,0,.6); stroke-width: 1.2; stroke-linecap: round; fill: none; }
.light svg .fill { fill: rgba(0,0,0,.6); stroke: none; }
.lights:hover svg { opacity: 1; }
.light.close { background: linear-gradient(180deg, #ffa498 0, #e86d5f 1.2px, #e35c4f 5px, #e2685a 8.5px, #de7165 14px); }
.light.min   { background: linear-gradient(180deg, #ffe068 0, #f1b922 1.2px, #f1b700 5px, #f3c019 8.5px, #f6cf55 14px); }
.light.zoom  { background: linear-gradient(180deg, #a0f078 0, #66c232 1.2px, #4fb900 5px, #5cbc1b 8.5px, #70c14c 14px); }
.light:active { filter: brightness(.82); }

.title {
  position: absolute; left: 82px; top: 7px; height: 16px;
  display: flex; align-items: center; white-space: nowrap;
  font-size: 13.5px; letter-spacing: -.2px; font-weight: 700; color: #a2a2a2;
  pointer-events: none;
}
.title img { width: 16px; height: 16px; margin-right: 4px; }
.title > span { position: relative; top: 2px; }
.title .edited { font-weight: 400; color: #686868; margin-left: 4px; }
.title .dash { margin-right: 3px; }

/* toolbar */
.toolbar {
  flex: none; height: 36px; padding: 8px 0 0 8.75px;
  display: flex; align-items: flex-start;
  border-bottom: .5px solid #353535;
  overflow: hidden;
}
.toolbar > * { flex: none; position: relative; height: 20px; }
.seg { display: flex; background: var(--ctl); border-radius: 5px; }
.seg button { position: relative; height: 20px; display: grid; place-items: center; border-radius: 6px; }
.seg button svg { display: block; height: 20px; }
.bius { width: 84px; }
.bius button { width: 21px; }
.bius button svg { width: 21px; }
.bius button + button::before, .align button + button::before {
  content: ""; position: absolute; left: -1px; top: 4px; width: 1px; height: 12px; background: #6c6c6c;
}
.align button.on::before, .align button.on + button::before { display: none; }
.g-b { font: 700 11px var(--ui); fill: var(--ctl-fg); }
.g-s { font: 400 11px var(--ui); fill: var(--ctl-fg); }
.st { stroke: var(--ctl-fg); stroke-width: 1; fill: none; stroke-linecap: butt; }
.seg button.on { background: var(--accent); }
.bius button.on { background: #5a5a5a; }

.well { margin-left: 5.25px; width: 20px; height: 21px !important; top: -.5px; border-radius: 5px; overflow: hidden; display: block; }
.well input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: default; border: 0; padding: 0; }
.well .swatch { position: absolute; inset: 0; border-radius: 5px; pointer-events: none; }
.well.fg { box-shadow: 0 0 0 .5px #444; }
.well.fg .swatch { background: #fff; }
.well.bg { margin-left: 5px; background: #1e1e1e; box-shadow: inset 0 0 0 1px #3b3b3b; }
.well.bg svg { position: absolute; inset: 0; width: 20px; height: 20px; pointer-events: none; top: .5px; }
.g-a { font: 400 14px var(--ui); fill: #6f6f6f; }
.slash { stroke: #e0564c; stroke-width: 1.2; stroke-linecap: round; }

.pop { background: var(--ctl); border-radius: 5px; display: flex; align-items: center; }
.pop .val { font-size: 11.25px; color: var(--ctl-fg); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.pop svg.ud { position: absolute; right: 8px; top: 5.25px; width: 6px; height: 9px; }
.pop svg path, .combo svg path { fill: none; stroke: var(--ctl-fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pop select, .combo select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: default; -webkit-appearance: menulist; }
.font { margin-left: 5.5px; width: 79px; padding-left: 5.5px; padding-right: 20px; }
.face { margin-left: 6px; width: 79px; padding-left: 9.5px; padding-right: 20px; }
.combo.size { margin-left: 5px; width: 51px; background: #181818; border-radius: 6px; box-shadow: inset 0 0 0 1px #333; }
.combo input {
  position: absolute; left: 1px; top: 0; width: 26px; height: 18px; padding: 0 0 0 6px;
  background: none; border: 0; outline: 0; font-size: 11.25px; color: var(--ctl-fg);
  -webkit-user-select: text; user-select: text;
}
.combo .cbtn { position: absolute; left: 28px; top: 3px; width: 20px; height: 14px; border-radius: 4px; background: #323232; display: grid; place-items: center; }
.combo .cbtn svg { width: 8px; height: 5px; position: relative; top: 0; left: .5px; }
.combo .cbtn svg path { stroke-width: 1.6; }
.align { margin-left: 5px; width: 95px; }
.align button { width: 23.66px; }
.align button:first-child { width: 24px; }
.align button svg { width: 24px; position: relative; left: .5px; }
.align button svg path { stroke: var(--ctl-fg); stroke-width: 1; fill: none; }
.align button.on svg path { stroke: #fff; }
.list { margin-left: 6px; width: 45px; }
.list svg.li { position: absolute; left: 6px; top: 5.25px; width: 12px; height: 9px; overflow: visible; }
.list svg.li .dots { fill: var(--ctl-fg); stroke: none; }
.list svg.li .bars { stroke: var(--ctl-fg); stroke-width: 1; stroke-linecap: butt; }
.list svg.dn { position: absolute; right: 8px; top: 8px; width: 6px; height: 4px; }
.spacing { margin-left: 6px; width: 50px; padding-left: 8.5px; }

/* ruler */
.ruler { flex: none; height: 32px; border-bottom: 1px solid #393939; box-shadow: 0 .5px 0 #242424; position: relative; z-index: 1; overflow: hidden; }
.ruler svg { display: block; position: absolute; left: 0; top: -.5px; }
.ruler .num { font: 400 9.5px var(--ui); fill: #dcdcdc; }

/* document */
.docwrap { position: relative; flex: 1; min-height: 0; margin-top: .5px; background: var(--doc-bg); }
.scroller { position: absolute; left: 0; top: 0; right: 17px; bottom: 17px; overflow: auto; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.doc {
  min-height: 100%;
  padding: 0 5px 24px 5px;
  font: 12px Avenir, "Avenir Next", Helvetica, Arial, sans-serif;
  color: #fff;
  outline: none;
  caret-color: #fff;
  -webkit-user-select: text; user-select: text;
  overflow-wrap: break-word;
  cursor: text;
  margin-top: -.25px;
}
.doc, .doc * { line-height: round(calc(1.37em * var(--ls, 1)), 1px); } /* Avenir's AppKit line height: 12pt → 16pt */
.doc ::selection { background: #3f638b; }
.doc ul, .doc ol { margin: 0; padding: 0 0 0 36px; list-style: none; }
.doc ul > li, .doc ol > li { position: relative; }
.doc ul > li::before { content: "•"; position: absolute; left: -25px; }
.doc ul.circle > li::before { content: "◦"; }
.doc ul.square > li::before { content: "▪"; }
.doc ul.dash > li::before { content: "–"; }
.doc ol { counter-reset: te; }
.doc ol > li { counter-increment: te; }
.doc ol > li::before { content: counter(te) "."; position: absolute; left: -25px; }
.doc ol.lower-alpha > li::before { content: counter(te, lower-alpha) "."; }
.doc ol.upper-roman > li::before { content: counter(te, upper-roman) "."; }

.vbar { position: absolute; right: 0; top: 0; bottom: 17px; width: 17px; background: var(--bar); }
.hbar { position: absolute; left: 0; right: 17px; bottom: 0; height: 17px; background: var(--bar); }
.vbar .knob { position: absolute; left: 3px; width: 11px; top: 3px; height: calc(100% - 6px); border-radius: 5.5px; background: var(--knob); }
.hbar .knob { position: absolute; top: 3px; height: 11px; left: 10.5px; right: 7px; border-radius: 5.5px; background: var(--knob); }
.corner { position: absolute; right: 0; bottom: 0; width: 17px; height: 17px; background: #222; }

/* call to action under the window */
.cta {
  position: absolute; z-index: 5; left: 50%; top: calc(50% + 252.5px + 18px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 16px 0 12px; border-radius: 20px;
  font: 600 14px/1 var(--ui); color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #4a8dfb, #2f74f0);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.35), 0 0 0 .5px rgba(0,0,0,.35), 0 8px 24px rgba(20,60,160,.45);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, opacity .25s;
  -webkit-font-smoothing: antialiased;
}
.cta:hover { transform: translateX(-50%) translateY(-1px); box-shadow: inset 0 .5px 0 rgba(255,255,255,.4), 0 0 0 .5px rgba(0,0,0,.35), 0 12px 30px rgba(20,60,160,.55); }
.cta:active { transform: translateX(-50%) scale(.98); }
.cta:focus-visible { outline: 3px solid rgba(74,141,251,.6); outline-offset: 2px; }
.cta > svg:first-child { width: 18px; height: 18px; flex: none; }
.cta .arrow { width: 12px; height: 12px; opacity: .85; }
.window { top: calc(50% - 252.5px - 30px); }
.cta { top: calc(50% + 252.5px - 30px + 18px); }
.cta.away { opacity: 0; pointer-events: none; }
.ref .cta { display: none; }

/* reference-diff mode: transparent page, window at the capture's offset */
.ref body, html.ref { background: transparent; }
.ref .desktop { background: transparent; }
.ref .menubar, .ref .dock { display: none; }
.ref .window { left: 56px; top: 38px; transition: none; }

/* ---------- small screens: window becomes the app ---------- */
@media (max-width: 700px), (max-height: 560px) {
  .menubar, .dock { display: none; }
  .window, .window.zoomed {
    left: 0 !important; top: 0 !important; width: 100%; height: 100%; height: 100dvh;
    border-radius: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top);
  }
  .window::after { display: none; }
  .titlebar { height: 34px; }
  .lights { top: 10px; }
  .title { position: absolute; left: 50%; transform: translateX(-50%); top: 9px; }
  .title .edited { display: none; }
  .toolbar { overflow-x: auto; scrollbar-width: none; padding-right: 9px; height: 38px; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar::after { content: ""; flex: none; width: 9px; }
  .ruler { display: none; }
  .docwrap { margin-top: 0; }
  .scroller { right: 0; bottom: 0; }
  .vbar, .hbar, .corner { display: none; }
  .doc { font-size: 16px; padding: 8px 14px calc(96px + env(safe-area-inset-bottom)); }
  .cta { position: fixed; top: auto !important; left: 50% !important; bottom: calc(18px + env(safe-area-inset-bottom)); height: 46px; padding: 0 18px 0 14px; border-radius: 23px; font-size: 15px; }
  .doc ul, .doc ol { padding-left: 40px; }
  .doc ul > li::before, .doc ol > li::before { left: -26px; }
}

/* short laptop screens: the Dock would cover the window */
@media (max-height: 720px) and (min-width: 701px) { .dock { display: none; } }