/* Solverise website (owner's choices, 18 Oct 2026): the Mac's own serif and sans; ink text with Solverise indigo
   links (scheme B); one quiet indigo-grey button colour for every app; light always, dark only from the moon button,
   with grey buttons and a thin indigo ring. Each app shows its features as small live windows drawn in the app's
   own new look, never screenshots. Things fade in with the scroll: the heading first, then what is under it. */

:root {
  --bg: #FFFFFF; --alt: #F4F4F7; --ink: #16181D; --muted: #5B6068; --label: #3F444C; --line: rgba(22, 24, 29, .11); --card: #FFFFFF;
  --link: #3B35A5; --acc: #3B35A5; --dot: #3B35A5; --leaf-s: #1FA59B; --leaf-t: #2E2A7A;
  --btn: #3D3F5C; --btn-ink: #FFFFFF; --btn-line: transparent; --bar: #FFFFFF; --accent: #16181D;
  --shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 20px 48px rgba(0, 0, 0, .12);
  --ll: inline; --ld: none;
  --h: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --b: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--h); --sans: var(--b); --ui-sans: var(--b); color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121316; --alt: #18191D; --ink: #E9EAEC; --muted: #A0A4AC; --label: #B3B7BE; --line: rgba(255, 255, 255, .10); --card: #1B1D21;
  --link: #C9CDD4; --acc: #9E99E6; --dot: #9E99E6; --leaf-s: #7FE0D4; --leaf-t: #8C82F0;
  --btn: #2B2E35; --btn-ink: #E9EAEC; --btn-line: #9E99E6; --bar: #121316; --accent: #E9EAEC;
  --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .55);
  --ll: none; --ld: inline; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--b); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--h); font-weight: 500; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--bg); color: var(--ink); padding: 8px 12px; z-index: 20; }
.leaf-s { fill: var(--leaf-s); } .leaf-t { fill: var(--leaf-t); }
.in { max-width: 1072px; margin: 0 auto; padding: 0 24px; }
.alt { background: var(--alt); }
.muted { color: var(--muted); }
.label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--label); letter-spacing: .01em; }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.btn { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--btn); color: var(--btn-ink) !important; border: 1px solid var(--btn-line); font: 500 15.5px var(--b); cursor: pointer; }
.btn2 { display: inline-block; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink) !important; background: transparent; font: 15.5px var(--b); cursor: pointer; }
.btn:hover, .btn2:hover { text-decoration: none; filter: brightness(1.12); }
.btn.sm, .btn2.sm { padding: 7px 14px; font-size: 14px; }
.acts { display: flex; gap: 12px 18px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
.sec { padding: 84px 0; }
.head { margin-bottom: 28px; }
.head h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
.head p { margin-top: 8px; font-size: 18.5px; color: var(--muted); }
.note { max-width: 1072px; margin: 24px auto 0; padding: 0 24px; color: var(--muted); font-size: 15px; }


/* The bar across the top: the leaf and the name on the left, the apps and Support together on the right. */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bar); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1120px; margin: 0 auto; height: 60px; padding: 0 24px; display: flex; align-items: center; gap: 8px; }
.brand { display: flex; align-items: center; gap: 9px; height: 60px; margin-right: auto; color: var(--ink); font: 600 19px/1 var(--h); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 24px; height: 24px; }
.items { display: flex; gap: 26px; margin-right: 14px; }
.topbar .item { font-size: 14.5px; color: var(--muted); line-height: 60px; border-bottom: 2px solid transparent; }
.topbar .item:hover { color: var(--ink); text-decoration: none; }
.topbar .item[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.mode { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; opacity: .82; }
.mode:hover { background: var(--line); opacity: 1; }
.mode[hidden] { display: none; }
.mode svg, .menu summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: -10px; top: 40px; min-width: 210px; padding: 8px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.menu-list a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--ink); font-size: 16px; }
.menu-list a:hover { background: var(--alt); text-decoration: none; }


/* Menus per group of apps: a panel drops down under the bar, each app with its icon, a line about it,
   and its support and privacy pages. Opens on hover, on click and from the keyboard. */
.group { position: static; }
.group > .item { background: none; border: 0; font: inherit; font-size: 14.5px; color: var(--muted); cursor: pointer; padding: 0; line-height: 58px; border-bottom: 2px solid transparent; }
.group > .item::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .6; }
.group.on > .item { color: var(--ink); border-bottom-color: var(--accent); }
.group > .item:hover, .group.open > .item { color: var(--ink); }
.panel { position: absolute; left: 0; right: 0; top: 60px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(27, 28, 34, .08);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.group.open .panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.panel-in { max-width: 1120px; margin: 0 auto; padding: 28px 24px 34px; display: grid; grid-template-columns: 1fr 260px; gap: 8px 48px; }
.panel-in > .panel-head { grid-column: 1 / -1; }
.panel-head { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
.picks li { padding: 10px 12px; border-radius: 12px; }
.picks li:hover { background: var(--alt); }
.pick { display: flex; gap: 14px; align-items: center; color: var(--ink); }
.pick:hover { text-decoration: none; }
.pick b { display: block; font: 500 22px/1.2 var(--serif); }
.pick i { display: block; font-style: normal; color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.sub-links { display: flex; gap: 16px; margin: 8px 0 0 58px; font-size: 13.5px; }
.panel-side { display: flex; flex-direction: column; gap: 10px; padding-left: 28px; border-left: 1px solid var(--line); font-size: 15px; }
.panel-side .panel-head { margin-bottom: 4px; }
.topbar { position: sticky; }
.topbar-in { position: static; }
.menu-head { margin: 10px 12px 2px; font-size: 12.5px; font-weight: 600; color: var(--accent); }


/* An app's own bar under the top bar: its name, then Overview, Support and Privacy. */
.localbar { position: sticky; top: 61px; z-index: 9; background: var(--bg); border-bottom: 1px solid var(--line); }
.localbar-in { max-width: 1120px; margin: 0 auto; height: 50px; padding: 0 22px; display: flex; align-items: center; gap: 22px; font-size: 13.5px; }
.localbar .app-name { font: 500 21px/1 var(--serif); color: var(--ink); margin-right: auto; letter-spacing: -.01em; }
.localbar .app-name:hover { text-decoration: none; }
.localbar a { color: var(--ink); opacity: .82; }
.localbar a[aria-current] { opacity: 1; color: var(--ink); font-weight: 600; pointer-events: none; }


/* home and app pages */
/* home */
.hero { padding: 84px 0 64px; background: var(--alt); }
.hero .g { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.kicker { font-size: 15px; font-weight: 600; color: var(--label); margin-bottom: 16px !important; }
.hero h1 { font-size: clamp(42px, 5.6vw, 70px); line-height: 1.04; }
.hero .sub { font-size: 21px; color: var(--muted); margin-top: 20px !important; line-height: 1.45; max-width: 520px; }
.acts { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
.hero .photo { aspect-ratio: 4 / 5; border-radius: 14px; background: url(../shots/solvephotos-lookout-after.jpg) center / cover; }
.shelf { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.shelf a { display: flex; align-items: center; gap: 12px; color: var(--ink) !important; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.shelf img { width: 46px; height: 46px; }
.rail { list-style: none; margin: 0; padding: 4px 24px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 340px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 1120px) { .rail { padding-left: calc((100vw - 1024px) / 2); padding-right: calc((100vw - 1024px) / 2); } }
.arrows { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font-size: 18px; }
.tile { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); overflow: hidden; }
.tile .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.tile h3 { font-size: 29px; } .tile .t { color: var(--muted); font-size: 16px; }
.tile .acts { margin-top: auto; padding-top: 12px; gap: 16px; font-size: 15px; }
.tile ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 15px; }
.tile li { padding: 7px 0 7px 18px; border-top: 1px solid var(--line); position: relative; }
.tile li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 6px 14px 6px 8px; cursor: pointer; font: 15px var(--b); }
.tabs button img { width: 24px; height: 24px; }
.tabs button[aria-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }

/* app pages */
.local { position: sticky; top: 60px; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--line); }
.local .in { height: 50px; display: flex; align-items: center; gap: 22px; font-size: 14px; }
.local b { font: 500 22px/1 var(--h); margin-right: auto; display: flex; align-items: center; gap: 8px; }
.local b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.local a { color: var(--ink) !important; } .local a.cur { font-weight: 600; }
.apphero { padding: 64px 0 64px; }
.apphero .hg { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
.apphero img.icon { width: 76px; height: 76px; margin-bottom: 18px; }
.apphero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; }
.apphero .sub { margin-top: 16px !important; font-size: 19px; color: var(--muted); }
.keyline { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.frow { padding: 84px 0; }
.frow .g { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.frow.flip .txt { order: 2; }
.frow h3 { font-size: clamp(28px, 3.2vw, 40px); margin-top: 10px; } .frow .t { color: var(--muted); margin-top: 12px !important; font-size: 18.5px; }
.factlist { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.factlist dl { margin: 0; } .factlist dl div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.factlist dt { color: var(--muted); } .factlist dd { margin: 0; font-weight: 500; text-align: right; }
.factlist h4 { font-size: 22px; margin-bottom: 6px; }
.foot { padding: 40px 24px 48px; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); background: var(--alt); }

/* All features pictures, drawn, never app screenshots */
.drail { list-style: none; margin: 0; padding: 4px 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: min(560px, 80%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.drail::-webkit-scrollbar { display: none; }
.drail > li { scroll-snap-align: start; border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.drail .meta { padding: 16px 20px 20px; } .drail h3 { font-size: 24px; margin-top: 6px; } .drail .t { color: var(--muted); font-size: 15.5px; margin-top: 6px !important; }
.drail .mw { border-radius: 0; box-shadow: none; }
.drail .more { display: grid; place-items: center; text-align: center; padding: 28px; gap: 10px; background: var(--alt); }
.drail .more strong { font: 400 56px/1 var(--h); } .tabhead { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.tabhead p { color: var(--muted); max-width: 560px; }

/* feature group mocks */
.fscene { padding: 14px 14px 0; background: var(--alt); }
.fscene .mw { aspect-ratio: 16 / 11; border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px var(--line); zoom: .7; }
.fscene { padding: 10px 10px 0; }
.fscene .mw-replay { display: none; }
.mw.still .mw-replay { display: none; }
.mw .ln { display: block; height: 6px; margin: 8px 0; border-radius: 3px; background: #d9d6ce; width: var(--w, 100%); }
.mw .ln.hl { background: #f6dd6a; height: 9px; } .mw .ln.ul { box-shadow: 0 3px 0 #d2453a; }
.mw .sheet.plain { top: 14px; }
.gp { position: absolute; z-index: 4; font: 600 11px var(--ui-sans); padding: 4px 10px; border-radius: 999px; color: var(--mw-ink); background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 4px 12px rgba(0,0,0,.12); }
.gp.tr { top: 10px; right: 10px; } .gp.br { bottom: 12px; right: 12px; }
.stickynote { position: absolute; right: 8%; top: 38%; width: 34%; background: #fff4b8; border-radius: 4px; padding: 8px 10px; font-size: 11.5px; box-shadow: 0 6px 16px rgba(0,0,0,.14); transform: rotate(2deg); }
.stickynote small { display: block; color: #7a6a20; margin-top: 4px; }
.pgrid { position: absolute; inset: 14px 14px 14px 70px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pgrid div { background: #fffefb; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.14); padding: 6px; position: relative; } .pgrid .ln { height: 4px; margin: 5px 0; }
.pgrid small { position: absolute; bottom: -2px; left: 0; right: 0; text-align: center; font-size: 9.5px; color: var(--mw-muted); transform: translateY(100%); }
.pgrid .sel { outline: 2.5px solid var(--mw-acc); outline-offset: 2px; }
.conv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; }
.docc { width: 70px; height: 90px; background: #fffefb; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.14); display: grid; place-items: center; font: 700 14px var(--ui-sans); color: var(--mw-acc); }
.arr { font-size: 26px; color: var(--mw-muted); }
.fmts { display: flex; flex-direction: column; gap: 6px; } .fmts span { background: #fff; border: 1px solid var(--mw-line); border-radius: 999px; padding: 3px 12px; font-size: 11.5px; font-weight: 600; }
.fmts.left { flex-direction: row; flex-wrap: wrap; margin: 6px 0 10px; } .fmts span.on { background: var(--mw-acc); color: #fff; border-color: var(--mw-acc); }
.mw.solvephotos .fmts span.on { color: #2b1a04; }
.plan rect, .plan path { fill: none; stroke: #555; stroke-width: 2; } .plan .dim { stroke: var(--mw-acc); stroke-width: 1.6; }
.dimtxt { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font: 700 11px var(--ui-sans); color: var(--mw-acc); }
.panel2 { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: 76%; max-width: 360px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 12px 14px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.panel2 > div { padding: 3px 0; border-bottom: 1px solid var(--mw-line); } .panel2 .i1 { padding-left: 14px; } .panel2 .ok { color: #2d7a5a; } .panel2 .res { border: 0; color: var(--mw-acc); font-weight: 600; }
.keysp > div { display: flex; justify-content: space-between; align-items: center; }
kbd { font: 600 11px var(--ui-sans); background: #f4f4f6; border: 1px solid #d8d8dc; border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; }
.desk { position: absolute; inset: 0; background: var(--mw-desk); }
.capbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; padding: 6px; border-radius: 34px; background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 12px 34px rgba(70,35,25,.2); font-size: 11px; }
.capbar span { padding: 7px 10px; border-radius: 20px; } .capbar .on { background: var(--mw-soft); color: var(--mw-acc); font-weight: 700; } .capbar .rec { color: #ff453a; font-size: 14px; padding: 4px 10px; }
.mw-chip.shown { opacity: 1; transform: none; }
.shot.dim { filter: brightness(.8); } .shot .ln { height: 5px; }
.recpill { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 4; background: #1d1d1f; color: #fff; border-radius: 999px; padding: 4px 12px; font: 600 11.5px var(--ui-sans); }
.recpill::first-letter { color: #ff453a; }
.cam { position: absolute; right: 16px; bottom: 16px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #f1cdb7 0 18%, transparent 19%), radial-gradient(ellipse at 50% 100%, #9fb3d9 0 45%, transparent 46%), #dfe6ef; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0,0,0,.2); z-index: 4; }
.prev { position: absolute; left: 12%; right: 12%; top: 12px; height: 52%; border-radius: 8px; background: linear-gradient(135deg, #b9c8ff, #a6e0cd); }
.tl { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 24%; background: #fff; border-radius: 10px; padding: 10px; display: flex; gap: 4px; align-items: flex-start; }
.tl .clip { height: 26px; border-radius: 6px; background: #c9d6e6; } .tl .zoomr { position: absolute; left: 20%; bottom: 8px; width: 30%; height: 16px; border-radius: 5px; background: var(--mw-soft); color: var(--mw-acc); font: 700 10px/16px var(--ui-sans); text-align: center; }
.tl .head { position: absolute; left: 44%; top: 4px; bottom: 4px; width: 2px; background: #ff453a; }
.qa { position: absolute; left: 16px; bottom: 70px; width: 170px; border-radius: 16px; padding: 8px; background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 12px 34px rgba(70,35,25,.2); }
.qthumb { height: 80px; border-radius: 10px; background: linear-gradient(135deg, #fff, #e8ecf3); box-shadow: inset 0 0 0 1px #d8d8dc; }
.qbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; } .qbtns span { background: rgba(255,255,255,.7); border-radius: 8px; text-align: center; padding: 4px; font-size: 11px; font-weight: 600; }
.lib { position: absolute; inset: 12px 14px; font-size: 11px; } .lib b { display: block; margin: 4px 0; color: var(--mw-muted); }
.lg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; } .lg i { aspect-ratio: 16 / 10; border-radius: 8px; background: center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.jg { position: absolute; inset: 10px; display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; grid-auto-rows: 1fr; gap: 6px; } .jg i { border-radius: 3px; background: center / cover; position: relative; }
.jg i em { position: absolute; left: 6px; bottom: 4px; color: #fff; font-size: 10px; font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.lk { position: absolute; inset: 10px; display: flex; flex-direction: column; gap: 8px; } .lk .big { flex: 1; border-radius: 6px; background: center / cover; }
.lk .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 22%; } .lk .row i { border-radius: 5px; background: center / cover; } .lk .row i.on { outline: 3px solid var(--mw-acc); outline-offset: -3px; }
.sl2 { display: grid; grid-template-columns: 76px 1fr 56px; gap: 8px; align-items: center; border: 0 !important; color: var(--mw-muted); }
.sl2 i { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--mw-acc) var(--p, 64%), rgba(0,0,0,.12) var(--p, 64%)); }
.prog { height: 6px; border-radius: 3px; background: rgba(0,0,0,.1); border: 0 !important; padding: 0 !important; } .prog i { display: block; height: 100%; width: 70%; border-radius: 3px; background: var(--mw-acc); }
.mw mark { background: rgba(60,74,160,.18); color: inherit; padding: 0 2px; }
.math { font: italic 18px Georgia, serif; text-align: center; margin: 10px 0; }
.diag { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 11px; color: var(--mw-muted); } .diag span { border: 1.5px solid var(--mw-acc); color: var(--mw-ink); border-radius: 6px; padding: 3px 8px; }
.wl { color: var(--mw-acc); background: var(--mw-soft); border-radius: 3px; padding: 0 2px; }
.hover { margin-top: 10px; background: #fff; border-radius: 10px; box-shadow: 0 10px 26px rgba(30,30,50,.18); padding: 8px 10px; font-size: 11.5px; width: 70%; }
.tpl { position: absolute; inset: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .tpl > div { text-align: center; }
.tpl .pp { aspect-ratio: 1 / 1.41; background: #fffffd; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.14); padding: 10px 8px; text-align: left; } .tpl .pp .ln { height: 4px; margin: 6px 0; }
.tpl .pp em { display: block; font: italic 12px Georgia, serif; color: var(--mw-acc); margin: 20px 0 10px; }
.tpl .on .pp { outline: 2.5px solid var(--mw-acc); outline-offset: 3px; } .tpl small { display: block; margin-top: 8px; font-size: 11px; color: var(--mw-muted); }
.vrow { display: flex; justify-content: space-between; align-items: center; } .vrow em { font-style: normal; color: var(--mw-muted); } .vrow u { text-decoration: none; color: var(--mw-acc); font-weight: 600; }
.sugg { margin-top: 4px; border: 1px solid var(--mw-line); border-radius: 10px; overflow: hidden; } .sugg div { display: flex; gap: 8px; align-items: center; padding: 6px 8px; } .sugg .on { background: var(--mw-soft); }
.sugg i { width: 22px; height: 22px; border-radius: 50%; background: var(--mw-acc); color: #fff; font: 700 9px/22px var(--ui-sans); text-align: center; font-style: normal; } .sugg small { color: var(--mw-muted); margin-left: auto; }
.pal { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: 78%; background: rgba(255,255,255,.9); border-radius: 14px; box-shadow: 0 14px 36px rgba(27,28,34,.2); padding: 10px; font-size: 12px; }
.pal .pin { border: 1px solid var(--mw-line); border-radius: 9px; padding: 6px 10px; margin-bottom: 6px; } .pal b { display: block; font-size: 10px; color: var(--mw-muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 4px 2px; }
.pal > div:not(.pin) { padding: 5px 8px; border-radius: 7px; } .pal .on { background: var(--mw-soft); }
.banner { position: absolute; left: 10px; right: 10px; top: 10px; background: #fff6e0; border: 1px solid #f0d89a; border-radius: 10px; padding: 7px 10px; font-size: 11.5px; z-index: 3; } .banner u { text-decoration: none; color: var(--mw-acc); font-weight: 600; }
.mailv { position: absolute; left: 10px; right: 10px; top: 54px; bottom: 10px; background: #fff; border-radius: 12px; padding: 12px 14px; } .mailv h5 { margin: 4px 0 6px; font: 600 14px Georgia, serif; }
.trk { float: right; font-size: 10.5px; font-weight: 600; color: var(--mw-acc); background: var(--mw-soft); border-radius: 999px; padding: 2px 8px; }
.blk { margin-top: 8px; height: 40px; border: 1.5px dashed var(--mw-line); border-radius: 8px; display: grid; place-items: center; color: var(--mw-muted); font-size: 11px; }
.rule p { margin: 4px 0 6px !important; line-height: 1.8; } .tok { background: var(--mw-soft); color: var(--mw-acc); border-radius: 6px; padding: 1px 7px; font-weight: 600; }
.fld { border: 1px solid var(--mw-line) !important; border-radius: 8px; padding: 6px 9px !important; }
/* ---------- demo windows, each in its app's own look ---------- */
.mw { --mw-bg: #f7f6f2; --mw-bar: #efede7; --mw-line: #dcd8cf; --mw-ink: #23241f; --mw-muted: #5f5d56; --mw-acc: #3f6a52; --mw-soft: #dde8df; --mw-desk: #eeece6;
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--mw-desk); color: var(--mw-ink);
  font: 12.5px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 18px 50px rgba(0,0,0,.18); text-align: left; }
.mw.solvecapture { --mw-bg: #f6f6f7; --mw-bar: #ececee; --mw-line: #d8d8dc; --mw-ink: #1d1d1f; --mw-muted: #76767c; --mw-acc: #1d7f8f; --mw-soft: rgba(29,127,143,.15);
  --mw-desk: radial-gradient(circle at 15% 20%, #ffc4a2 0, transparent 40%), radial-gradient(circle at 85% 25%, #b9c8ff 0, transparent 42%), radial-gradient(circle at 70% 90%, #a6e0cd 0, transparent 45%), radial-gradient(circle at 20% 85%, #f2b0d2 0, transparent 40%), #ece4ec; border-radius: 22px; }
.mw.solvephotos { --mw-bg: #f7f4ef; --mw-bar: #efebe4; --mw-line: #e3ddd3; --mw-ink: #25222c; --mw-muted: #7a7381; --mw-acc: #e9a23b; --mw-soft: rgba(233,162,59,.2); --mw-desk: #e3e0db; border-radius: 14px; }
.mw.solvetext { --mw-bg: #ebeae6; --mw-bar: #e4e3df; --mw-line: #dcdad4; --mw-ink: #25262b; --mw-muted: #6e6f77; --mw-acc: #3c4aa0; --mw-soft: rgba(60,74,160,.16); --mw-desk: #ebeae6; border-radius: 14px; }
.mw.solveinbox { --mw-bg: #ebeae5; --mw-bar: #e3e2dd; --mw-line: #dddcd6; --mw-ink: #1b1c22; --mw-muted: #62646c; --mw-acc: #2b5ca8; --mw-soft: #e6ebf5; --mw-desk: #ebeae5; border-radius: 16px; }
.mw-bar { position: absolute; left: 0; right: 0; top: 0; height: 30px; background: var(--mw-bar); border-bottom: 1px solid var(--mw-line); display: flex; align-items: center; gap: 7px; padding: 0 11px; z-index: 3; }
.mw-bar i { width: 11px; height: 11px; border-radius: 50%; } .mw-bar i:nth-child(1) { background: #ff5f57; } .mw-bar i:nth-child(2) { background: #febc2e; } .mw-bar i:nth-child(3) { background: #28c840; }
.mw-bar span { margin: 0 auto; font-size: 11.5px; color: var(--mw-muted); padding-right: 40px; }
.mw-body { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; background: var(--mw-desk); overflow: hidden; }
.mw-corner { position: absolute; left: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; z-index: 4; display: grid; place-items: center;
  background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 22px rgba(0,0,0,.18); }
.mw-corner img { width: 34px; height: 34px; border-radius: 50%; }
.mw-replay { position: absolute; right: 10px; bottom: 10px; z-index: 5; border: 0; border-radius: 999px; padding: 5px 11px; font: 600 11.5px var(--ui-sans); cursor: pointer;
  background: rgba(255,255,255,.72); color: #333; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 4px 12px rgba(0,0,0,.14); }
.mw-chip { position: absolute; z-index: 5; top: 40px; right: 12px; background: var(--mw-acc); color: #fff; font: 600 11.5px var(--ui-sans); padding: 3px 10px; border-radius: 999px; opacity: 0; transform: translateY(-4px); transition: opacity .4s ease, transform .4s ease; }
.mw.solvephotos .mw-chip { color: #2b1a04; }
.mw .on-chip .mw-chip, .mw.done .mw-chip { opacity: 1; transform: none; }
.mw .sheet { position: absolute; left: 50%; top: 16px; width: 70%; max-width: 360px; transform: translateX(-50%); background: #fffefb; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.10); padding: 18px 20px 22px; font: 12px/1.65 Georgia, serif; color: #2a2a2a; }
.mw .sheet h5 { margin: 0 0 6px; font: 600 12.5px -apple-system, sans-serif; }
.r { border-radius: 2px; transition: background .5s ease, color .5s ease, box-shadow .5s ease; }
.s1 .r { box-shadow: 0 0 0 1.5px #d2453a; background: rgba(210,69,58,.10); }
.done .r { background: #111; color: transparent; box-shadow: none; }
.sigline { margin-top: 14px; border-bottom: 1px solid #999; height: 46px; position: relative; }
.sigline svg { position: absolute; left: 6px; bottom: 2px; width: 70%; height: 44px; }
.sigline path { fill: none; stroke: #1c2a5a; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.8s ease; }
.done .sigline path { stroke-dashoffset: 0; }
.fieldv { color: #1c2a5a; font-family: -apple-system, sans-serif; opacity: 0; transition: opacity .5s ease 1.6s; }
.done .fieldv { opacity: 1; }
.scan { transform: translateX(-50%) rotate(-4deg); filter: grayscale(1) contrast(.85) brightness(.97); transition: transform 1s ease, filter 1s ease; }
.s1 .scan, .done .scan { transform: translateX(-50%) rotate(0); filter: none; }
.scan .ln { display: block; height: 7px; margin: 8px 0; border-radius: 3px; background: #c9c6be; width: var(--w, 100%); transition: background .35s ease; }
.scan .ln.hl { background: rgba(63,106,82,.45); }
/* solvecapture */
.shot { position: absolute; left: 50%; top: 16px; width: 76%; max-width: 380px; transform: translateX(-50%); background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.16); overflow: hidden; }
.shot .sb { background: #eef0f2; padding: 5px 10px; font-size: 10.5px; color: #666; }
.shot .sbody { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.pv { border-radius: 3px; padding: 0 2px; transition: filter .5s ease, background .5s ease; }
.done .pv { filter: blur(5px); background: var(--mw-soft); }
.vf { position: absolute; z-index: 3; border: 0; pointer-events: none; transition: all 1.2s cubic-bezier(.4,0,.2,1); }
.vf::before, .vf::after, .vf span::before, .vf span::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--mw-acc); }
.vf::before { left: -2px; top: -2px; border-width: 2px 0 0 2px; } .vf::after { right: -2px; top: -2px; border-width: 2px 2px 0 0; }
.vf span::before { left: -2px; bottom: -2px; border-width: 0 0 2px 2px; } .vf span::after { right: -2px; bottom: -2px; border-width: 0 2px 2px 0; }
.longpage { position: absolute; left: 7%; top: 10px; width: 42%; height: 320%; background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 10px; transition: transform 3s cubic-bezier(.4,0,.2,1); }
.longpage i { display: block; height: 7px; border-radius: 3px; background: #dcdde2; margin: 9px 0; width: var(--w, 100%); }
.longpage b { display: block; height: 44px; border-radius: 5px; background: linear-gradient(135deg, #b9c8ff, #a6e0cd); margin: 10px 0; }
.done .longpage { transform: translateY(-62%); }
.stitch { position: absolute; right: 7%; top: 10px; width: 34%; height: 12%; background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); overflow: hidden; transition: height 3s cubic-bezier(.4,0,.2,1); outline: 2px solid var(--mw-acc); outline-offset: 2px; }
.done .stitch { height: 82%; }
.stitch div { transform: scale(.82); transform-origin: top center; padding: 6px; }
.stitch i { display: block; height: 5px; border-radius: 3px; background: #dcdde2; margin: 6px 0; width: var(--w, 100%); }
.stitch b { display: block; height: 30px; border-radius: 4px; background: linear-gradient(135deg, #b9c8ff, #a6e0cd); margin: 7px 0; }
.mark svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.mark .arrowp { fill: none; stroke: #d2453a; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset .9s ease .2s; }
.done .mark .arrowp { stroke-dashoffset: 0; }
.cnt { position: absolute; z-index: 4; width: 22px; height: 22px; border-radius: 50%; background: #d2453a; color: #fff; font: 700 12px/22px var(--ui-sans); text-align: center; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.done .cnt { transform: scale(1); } .cnt:nth-of-type(2) { transition-delay: .9s; } .cnt:nth-of-type(3) { transition-delay: 1.2s; } .cnt:nth-of-type(4) { transition-delay: 1.5s; }
.spot { position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .6s ease 1.8s; -webkit-mask: radial-gradient(ellipse 22% 16% at 64% 46%, transparent 98%, #000 100%); mask: radial-gradient(ellipse 22% 16% at 64% 46%, transparent 98%, #000 100%); }
.done .spot { opacity: 1; }
/* solvephotos */
.compare { position: absolute; inset: 0; overflow: hidden; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .after { clip-path: inset(0 0 0 var(--split, 50%)); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 2; }
.compare .tag { position: absolute; bottom: 22%; color: #fff; font: 700 12.5px var(--ui-sans); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
.compare .tag.b { right: calc(100% - var(--split, 50%) + 10px); } .compare .tag.a { left: calc(var(--split, 50%) + 10px); }
.skyimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skyfx { opacity: 0; transition: opacity 1.2s ease 1.4s; }
.skymask { position: absolute; inset: 0; background: rgba(230,60,60,.42); -webkit-mask: linear-gradient(#000 0 42%, transparent 48%); mask: linear-gradient(#000 0 42%, transparent 48%); opacity: 0; transition: opacity .6s ease; }
.s1 .skymask { opacity: 1; } .done .skymask { opacity: 0; transition-delay: .2s; } .done .skyfx { opacity: 1; }
.glasspanel { position: absolute; right: 12px; top: 12px; width: 150px; z-index: 3; border-radius: 16px; padding: 10px 12px; background: rgba(255,251,245,.56); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 14px 36px rgba(50,30,50,.2); font-size: 11.5px; }
.glasspanel b { display: block; margin-bottom: 6px; } .glasspanel .sl { height: 4px; border-radius: 2px; background: rgba(0,0,0,.12); margin: 6px 0 10px; position: relative; }
.glasspanel .sl i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; border-radius: 2px; background: var(--mw-acc); transition: width 1.2s ease 1.4s; }
.done .glasspanel .sl i { width: 72%; }
.jgrid { position: absolute; inset: 10px 10px 10px 10px; display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; grid-auto-rows: 1fr; gap: 6px; }
.jgrid div { border-radius: 4px; background: center / cover; position: relative; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .3s ease, opacity .4s ease; }
.jgrid div .st { position: absolute; left: 6px; bottom: 5px; color: #fff; font-size: 11px; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.6); opacity: 0; transition: opacity .3s ease; }
.done .jgrid .keep { outline-color: var(--mw-acc); } .done .jgrid .keep .st { opacity: 1; } .done .jgrid .rej { opacity: .35; }
.jgrid .keep:nth-child(1), .jgrid .keep:nth-child(1) .st { transition-delay: .3s; } .jgrid .keep:nth-child(4), .jgrid .keep:nth-child(4) .st { transition-delay: .8s; } .jgrid .keep:nth-child(8), .jgrid .keep:nth-child(8) .st { transition-delay: 1.3s; }
.selbar { position: absolute; left: 50%; bottom: 16px; z-index: 4; transform: translate(-50%, 70px); background: rgba(255,251,245,.84); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); border-radius: 999px; padding: 6px 14px; font: 600 12px var(--ui-sans); box-shadow: 0 10px 28px rgba(50,30,50,.2); transition: transform .5s cubic-bezier(.3,1.3,.5,1) 1.6s; }
.selbar em { font-style: normal; background: var(--mw-acc); color: #2b1a04; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.done .selbar { transform: translate(-50%, 0); }
/* solvetext */
.paper { position: absolute; left: 50%; top: 52px; width: 74%; max-width: 380px; bottom: -10px; transform: translateX(-50%); background: #fffffd; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 14px 34px rgba(30,30,50,.12); padding: 18px 22px; color: #25262b; }
.fbar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; height: 32px; border-radius: 16px; padding: 0 6px; display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.56); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 10px 30px rgba(30,30,50,.16); font-size: 12px; }
.fbar span { width: 26px; text-align: center; color: #333; } .fbar span.on { color: var(--mw-acc); font-weight: 700; } .fbar .st { width: auto; padding: 0 8px; border-left: 1px solid rgba(0,0,0,.12); color: #555; }
.pg h5 { margin: 0 0 6px; font: 600 19px/1.2 Georgia, serif; } .pg ul { margin: 6px 0; padding-left: 18px; font: 13px/1.6 Georgia, serif; }
.pg .call { border-left: 3px solid var(--mw-acc); background: var(--mw-soft); padding: 6px 10px; margin-top: 8px; font-size: 12px; border-radius: 0 4px 4px 0; }
.src { font: 12px/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: #444; } .src b { color: var(--mw-acc); font-weight: 600; }
.pg, .src { transition: opacity .5s ease; } .src { position: absolute; inset: 18px 22px; opacity: 0; }
.mw[data-kind="page"].s1 .src { opacity: 1; } .mw[data-kind="page"].s1 .pg { opacity: 0; }
.typed { font: 13px/1.6 Georgia, serif; min-height: 20px; } .typed::after { content: "|"; color: var(--mw-acc); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.slash { margin-top: 4px; width: 180px; border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(30,30,50,.2); padding: 5px; font: 12px var(--ui-sans); opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; }
.slash div { padding: 5px 8px; border-radius: 7px; } .slash div.hi { background: var(--mw-soft); color: var(--mw-acc); font-weight: 600; }
.s1 .slash { opacity: 1; transform: none; }
.mtable { border-collapse: collapse; width: 100%; font: 12px/1.4 var(--ui-sans); margin-top: 8px; opacity: 0; transition: opacity .5s ease; }
.mtable td, .mtable th { border: 1px solid #ddd; padding: 4px 6px; text-align: left; } .mtable th { background: #f4f4f7; }
.done .mtable { opacity: 1; } .done .slash { opacity: 0; }
/* SolveText page: the note writes itself line by line, then the button shows the plain Markdown */
.mw.solvetext .mk-w { opacity: 0; transform: translateY(3px); transition: opacity .45s ease calc(var(--i) * .4s), transform .45s ease calc(var(--i) * .4s); }
.mw.solvetext.made .mk-w { opacity: 1; transform: none; }
.mw.solvetext .mk-key { position: absolute; z-index: 5; left: 50%; bottom: 22px; transform: translate(-50%, 6px); opacity: 0; padding: 5px 12px; border-radius: 9px; font: 600 15px var(--ui-sans); letter-spacing: .08em; color: #25262b;
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 8px 24px rgba(30,30,50,.2); transition: opacity .25s ease, transform .25s ease; }
.mw.solvetext .mk-key.shown { opacity: 1; transform: translate(-50%, 0); }
/* SolveText dock card: the file pill, the View tray's Glass and Layout, the dock from the corner button */
.mw.solvetext .mk-pill { position: absolute; z-index: 3; left: 12px; top: 10px; display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font: 11px var(--ui-sans); color: #25262b;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 18px rgba(30,30,50,.14); }
.mw.solvetext .mk-pill i { font-style: normal; color: #6e6f77; } .mw.solvetext .mk-pill em { font-style: normal; color: #6e6f77; border-left: 1px solid rgba(0,0,0,.12); padding-left: 7px; }
.mw.solvetext .mk-tray { position: absolute; z-index: 3; left: 64px; right: 14px; bottom: 54px; padding: 8px 10px; border-radius: 14px; font: 10.5px var(--ui-sans); color: #25262b;
  background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 28px rgba(30,30,50,.18); }
.mw.solvetext .mk-tray small { display: block; color: #6e6f77; font-size: 9.5px; margin: 0 0 3px; } .mw.solvetext .mk-tray div { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .mw.solvetext .mk-tray div:last-child { margin-bottom: 0; }
.mw.solvetext .mk-tray span { padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.05); } .mw.solvetext .mk-tray span.on { background: var(--mw-soft); color: var(--mw-acc); font-weight: 600; }
.mw.solvetext .mk-dock { position: absolute; z-index: 3; left: 64px; right: 14px; bottom: 14px; height: 34px; display: flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 17px; overflow: hidden; font: 10px var(--ui-sans); color: #33343a; white-space: nowrap;
  background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 28px rgba(30,30,50,.16); }
.mw.solvetext .mk-dock { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.mw.solvetext .mk-dock span { padding: 3px 5px; border-radius: 8px; } .mw.solvetext .mk-dock span.on { background: var(--mw-soft); color: var(--mw-acc); font-weight: 600; }
.mw.solvetext .mk-dock i { width: 1px; height: 16px; background: rgba(0,0,0,.14); margin: 0 2px; flex: none; }
/* SolveText slash menu: "/" opens the list, "/tab" narrows it, Table puts in a 3 by 3 table */
.mw.solvetext .mk-p { margin: 0; font: 13px/1.6 Georgia, serif; color: #555; }
.mw.solvetext .mk-at { position: relative; }
.mw.solvetext .mk-sl { position: absolute; left: 0; top: 100%; z-index: 2; width: 170px; margin-top: 2px; }
.mw.solvetext .mk-sl div { padding: 4px 8px; }
.mw.solvetext .mk-sl:not(.f) { max-height: 96px; overflow: hidden; }
.mw.solvetext .mk-sl:not(.f) .m, .mw.solvetext .mk-sl.f div:not(.m) { display: none; }
.mw.solvetext .mk-sl:not(.f) .h0, .mw.solvetext .mk-sl.f .h1 { background: var(--mw-soft); color: var(--mw-acc); font-weight: 600; }
.mw.solvetext.done .mk-at { display: none; }
.mw.solvetext .mk-tb th, .mw.solvetext .mk-tb td { height: 26px; width: 33%; box-sizing: border-box; }
.mw.solvetext .mk-tb .cur::after { content: "|"; color: var(--mw-acc); font-weight: 400; animation: blink 1s steps(1) infinite; }
/* SolveText import: the .docx is opened, the import sheet runs its steps, then the new note opens */
.mw.solvetext .mk-file { position: absolute; z-index: 4; left: 50%; top: 44%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 7px; transition: transform .8s cubic-bezier(.4,0,.2,1), opacity .4s ease .4s; }
.mw.solvetext .mk-file .docx { width: 64px; height: 80px; border-radius: 6px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.18); display: grid; place-items: center; font: 700 11px var(--ui-sans); color: #2b579a; }
.mw.solvetext .mk-file small { font: 11px var(--ui-sans); color: var(--mw-ink); background: rgba(255,255,255,.6); padding: 1px 7px; border-radius: 4px; }
.mw.solvetext.s1 .mk-file { transform: translate(-50%, -60%) scale(.45); opacity: 0; }
.mw.solvetext .mk-sheet { position: absolute; z-index: 5; left: 50%; top: 42%; width: 68%; max-width: 300px; box-sizing: border-box; transform: translate(-50%, -50%) scale(.96); opacity: 0; padding: 14px 16px 12px; border-radius: 14px;
  background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 16px 40px rgba(30,30,50,.2); font: 12px var(--ui-sans); color: #25262b; transition: opacity .35s ease, transform .35s ease; }
.mw.solvetext .mk-sheet b { display: block; font-size: 12.5px; margin-bottom: 9px; }
.mw.solvetext .mk-sheet .bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.08); overflow: hidden; margin-bottom: 7px; }
.mw.solvetext .mk-sheet .bar i { display: block; height: 100%; width: 0; background: var(--mw-acc); transition: width .45s ease; }
.mw.solvetext .mk-sheet span { color: var(--mw-muted); font-size: 11.5px; }
.mw.solvetext.s1 .mk-sheet { opacity: 1; transform: translate(-50%, -50%); transition-delay: .45s; }
.mw.solvetext.done .mk-sheet { opacity: 0; transition-delay: 0s; }
.mw.solvetext .mk-imp { top: 18px; opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity .5s ease .15s, transform .5s ease .15s; }
.mw.solvetext.done .mk-imp { opacity: 1; transform: translateX(-50%); }
.mw.solvetext .mk-imp h6 { margin: 10px 0 2px; font: 600 14px Georgia, serif; }
.mw.solvetext .mk-imp p { margin: 0; font: 13px/1.6 Georgia, serif; }
.mw.solvetext .mk-imp .mtable { opacity: 1; }
/* solveinbox */
.ribbon { position: absolute; left: 10px; right: 10px; top: 10px; height: 40px; border-radius: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: rgba(251,251,252,.91); -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 14px 36px rgba(27,28,34,.14); font-size: 11.5px; color: var(--mw-muted); }
.ribbon b { color: var(--mw-ink); }
/* SolveInbox's day ribbon: today's hours across the top of the window */
.dayrib { position: absolute; left: 10px; right: 10px; top: 10px; height: 48px; border-radius: 18px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 14px;
  background: rgba(251,251,252,.91); -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 14px 36px rgba(27,28,34,.14); font-size: 11px; color: var(--mw-muted); }
.dayrib b { color: var(--mw-ink); white-space: nowrap; font-size: 11.5px; }
.dayrib .trk { position: relative; flex: 1; height: 100%; }
.dayrib .hr { position: absolute; top: 4px; bottom: 4px; border-left: 1px solid var(--mw-line); padding-left: 3px; font-size: 9.5px; }
.dayrib .blk { position: absolute; top: 18px; height: 22px; border-radius: 6px; padding: 0 4px; font-size: 9.5px; font-weight: 600; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--ec) 16%, #fff); border: 1px solid color-mix(in srgb, var(--ec) 32%, #fff); color: color-mix(in srgb, var(--ec) 80%, #000); transition: box-shadow .3s ease; }
.dayrib .nowl { position: absolute; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: #d33b3b; left: 10%; transition: left 1.4s cubic-bezier(.4,0,.2,1); }
.s1 .dayrib .nowl, .done .dayrib .nowl { left: 48%; }
.done .dayrib .blk.pick { box-shadow: 0 0 0 2px var(--mw-acc); }
.mlist { position: absolute; left: 10px; right: 10px; top: 70px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.mrow { background: #fff; border: 1px solid var(--mw-line); border-radius: 10px; padding: 8px 12px; font-size: 11.5px; display: flex; gap: 10px; color: var(--mw-muted); }
.mrow b { color: var(--mw-ink); min-width: 84px; }
.drawer { position: absolute; right: 10px; top: 66px; width: 46%; z-index: 4; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(27,28,34,.18); padding: 12px 14px; font-size: 11.5px; display: flex; flex-direction: column; gap: 4px; color: var(--mw-muted);
  opacity: 0; transform: translateY(-8px); transition: opacity .4s ease, transform .4s ease; }
.drawer b { color: var(--mw-ink); font-size: 13px; }
.done .drawer { opacity: 1; transform: none; }
.evchip { border-radius: 7px; padding: 2px 8px; font-weight: 600; background: color-mix(in srgb, var(--ec) 15%, #fff); border: 1px solid color-mix(in srgb, var(--ec) 30%, #fff); color: color-mix(in srgb, var(--ec) 80%, #000); }
.cal { position: absolute; left: 10px; right: 10px; top: 58px; bottom: 10px; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
.cal .type { margin: 10px; border: 1px solid var(--mw-line); border-radius: 9px; padding: 6px 10px; min-height: 30px; font-size: 12.5px; }
.cal .type::after { content: "|"; color: var(--mw-acc); animation: blink 1s steps(1) infinite; }
.cal .week { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--mw-line); height: calc(100% - 52px); }
.cal .day { border-right: 1px solid #eeedf2; padding: 6px; position: relative; } .cal .day:last-child { border-right: 0; }
.cal .day b { display: block; font-size: 10.5px; color: var(--mw-muted); font-weight: 600; }
.cal .ev { position: absolute; left: 4px; right: 4px; top: 48%; font-size: 10.5px; line-height: 1.3; opacity: 0; transform: scale(.92); transition: opacity .45s ease, transform .45s cubic-bezier(.3,1.4,.5,1); border-radius: 7px; padding: 4px 6px; --ec: #2b5ca8;
  background: color-mix(in srgb, var(--ec) 15%, #fff); border: 1px solid color-mix(in srgb, var(--ec) 30%, #fff); color: color-mix(in srgb, var(--ec) 85%, #000); }
.cal .ev.home { --ec: #2d7a5a; top: 20%; opacity: 1; transform: none; }
.made .cal .ev.new { opacity: 1; transform: none; }
.now { position: absolute; left: 0; right: 0; top: 40%; height: 2px; background: #d0473a; }
.mw .list { position: absolute; left: 10px; right: 10px; top: 58px; bottom: 10px; background: #fff; border-radius: 12px; overflow: hidden; }
.mw .row { position: absolute; left: 0; right: 0; height: 12%; padding: 6px 14px 6px 24px; border-bottom: 1px solid var(--mw-line); font-size: 11.5px; background: #fff; transition: top .8s cubic-bezier(.4,0,.2,1); }
.mw .row b { display: block; font-size: 12px; } .mw .row span { color: var(--mw-muted); }
.mw .row.u::before { content: ""; position: absolute; left: 10px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--mw-acc); }
.grp { position: absolute; left: 0; right: 0; height: 9%; padding: 4px 14px; font: 700 10.5px var(--ui-sans); color: var(--mw-acc); letter-spacing: .04em; text-transform: uppercase; opacity: 0; transition: opacity .5s ease .5s; background: #faf7fa; }
.done .grp { opacity: 1; }
.compose { position: absolute; left: 10%; right: 10%; top: 62px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(27,28,34,.16); padding: 12px 14px; font-size: 12px; transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
.compose .f { border-bottom: 1px solid var(--mw-line); padding: 4px 0; color: var(--mw-muted); } .compose .f b { color: var(--mw-ink); font-weight: 500; }
.compose p { margin: 8px 0 !important; line-height: 1.5; }
.compose .send { display: inline-block; background: var(--mw-acc); color: #fff; border-radius: 999px; padding: 4px 14px; font-weight: 600; }
.s1 .compose { transform: translateY(60%) scale(.9); opacity: 0; }
.toast2 { position: absolute; left: 50%; bottom: 18px; z-index: 4; transform: translate(-50%, 80px); display: flex; gap: 10px; align-items: center; background: #1f1e24; color: #fff; border-radius: 12px; padding: 8px 14px; font-size: 12px; transition: transform .45s cubic-bezier(.3,1.3,.5,1); white-space: nowrap; }
.toast2 u { text-decoration: none; color: #f0c9e7; font-weight: 700; }
.s1 .toast2 { transform: translate(-50%, 0); }
.ring { width: 16px; height: 16px; } .ring circle { fill: none; stroke: #f0c9e7; stroke-width: 2.5; stroke-dasharray: 44; stroke-dashoffset: 0; }
.s1 .ring circle { animation: drain 5s linear forwards; } @keyframes drain { to { stroke-dashoffset: 44; } }

/* fade: tied to the scroll, heading first, then the content */
@supports (animation-timeline: view()) {
  body .fx-h { animation: fadein linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
  body .fx-c { animation: fadein linear both; animation-timeline: view(); animation-range: entry 20% entry 100%; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@supports not (animation-timeline: view()) {
  body .fx-h, body .fx-c { transition: opacity 1.1s cubic-bezier(.22,1,.36,1); }
  body .fx-c { transition-delay: .2s; }
  body .fx-h.pre, body .fx-c.pre { opacity: 0; transition: none; }
}
@media (prefers-reduced-motion: reduce) { body .fx-h, body .fx-c { animation: none !important; opacity: 1 !important; } .mw * { transition: none !important; } }

/* Support and privacy pages: one calm reading column. */
.doc { max-width: 760px; margin: 0 auto; padding: 72px 24px 40px; }
.doc .app-top { text-align: center; margin-bottom: 56px; }
.doc .app-top .app-icon { width: 96px; height: 96px; margin-bottom: 20px; }
.doc .app-top h1 { font-size: clamp(36px, 5.5vw, 56px); }
.doc .lead { font-size: 21px; color: var(--muted); margin: 14px 0 0; }
.doc section { margin: 0 0 40px; }
.doc .two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.doc .two > div { margin: 0; }
.doc h2, .doc .tray-head { font-size: 24px; letter-spacing: -.015em; font-weight: 700; margin: 0 0 12px; text-transform: none; color: var(--ink); }
.doc h3 { font-size: 19px; margin: 24px 0 6px; letter-spacing: -.01em; }
.doc p, .doc li { color: var(--ink); }
.doc .short { font-size: 21px; font-weight: 500; }
.doc .list { padding-left: 20px; } .doc .list li { margin: 4px 0; }
.doc .email { font-size: 21px; font-weight: 600; margin: 0 0 6px; }
.doc .muted { color: var(--muted); font-size: 15px; }
.rows-q details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.rows-q summary { cursor: pointer; font-weight: 600; font-size: 18px; }
.rows-q details p { color: var(--muted); margin: 10px 0 0; }
.doc .rows { margin: 0; } .doc .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc .row dt { color: var(--muted); } .doc .row dd { margin: 0; text-align: right; }

/* placeholders the script draws demos into; the price; promotions; help */
.slot { position: relative; min-height: 200px; border-radius: 12px; display: grid; place-items: center; background: var(--alt); }
.slot:has(.mw) { display: block; min-height: 0; background: none; }
.slot-icon { width: 72px; height: 72px; opacity: .9; }
.fscene .slot { border-radius: 10px 10px 0 0; min-height: 160px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 14px; font-size: 15px; color: var(--muted); }
.price b { font: 500 22px/1 var(--h); color: var(--ink); }
.price s { color: var(--muted); }
.promo-tag { font: 600 12.5px var(--b); color: var(--acc); border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; }
.promo-bar { background: var(--btn); color: var(--btn-ink); text-align: center; font-size: 14px; padding: 9px 16px; border-bottom: 1px solid var(--btn-line); }

/* the bundle band on home, before The apps (owner, 18 Oct) */
.bundle .bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bundle h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin-top: 10px; }
.bundle .sub { margin-top: 10px; font-size: 18.5px; color: var(--muted); }
.bundle .price { margin-top: 22px; } .bundle .price b { font-size: 30px; }
.bundle .acts { margin-top: 22px; }
.bundle .small { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.icons5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 34px; border: 1px solid var(--line); border-radius: 14px; background: var(--alt); justify-items: center; }
.icons5 a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.icons5 img { width: 76px; height: 76px; }
.icons5 .sum { align-self: center; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
  .bundle .bgrid { grid-template-columns: 1fr; gap: 28px; }
  .icons5 { padding: 22px; gap: 16px; } .icons5 img { width: 56px; height: 56px; }
}
.buy .acts { margin-top: 18px; }
.apphero .keyline + .buy { margin-top: 8px; }
.tabpanel2[hidden] { display: none; }
.helplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 24px; }
.helplist a { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; color: var(--ink); }
.helplist a:hover { background: var(--bg); text-decoration: none; }
.helplist b { display: block; font: 500 19px/1.2 var(--h); } .helplist i { display: block; font-style: normal; color: var(--muted); font-size: 14px; }
.center-acts { text-align: center; margin-top: 32px; }
.glance-link { margin-top: 14px; }

footer.site { padding: 44px 24px 56px; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); background: var(--alt); }
footer.site p { margin: 3px 0; }
footer.site nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }


footer.site { padding: 44px 24px 56px; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); background: var(--alt); }
footer.site p { margin: 3px 0; }
footer.site nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }

@media (max-width: 860px) {
  .items { display: none; } .menu { display: block; }
  .doc { padding: 48px 18px 32px; } .doc .two { grid-template-columns: 1fr; gap: 32px; } .localbar-in { gap: 16px; }
  .menus { display: none; } .burger { display: grid; }
  .in, .top-in { padding-left: 18px; padding-right: 18px; }
  .hero { padding: 44px 0 40px; } .hero .g { grid-template-columns: 1fr; gap: 26px; } .hero .photo { aspect-ratio: 4 / 3; } .hero .sub { font-size: 18px; }
  .shelf { flex-direction: column; gap: 10px; margin-top: 32px; } .shelf img { width: 36px; height: 36px; }
  .sec { padding: 56px 0; } .rail { grid-auto-columns: 84vw; padding: 4px 18px 8px; }
  .tabpanel { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .frow .g, .apphero .hg { grid-template-columns: 1fr; gap: 24px; } .frow.flip .txt { order: 0; } .frow { padding: 56px 0; }
  .apphero { padding: 40px 0; } .apphero img.icon { width: 60px; height: 60px; }
  .factlist { grid-template-columns: 1fr; gap: 10px; } .local .in { gap: 14px; }
  .mw { aspect-ratio: 4 / 3.6; }
}

/* SolveInbox's icon A has its own dark version (owner, 19 Oct); the dark site swaps it in. */
:root[data-theme="dark"] img[src$="app-icons/solveinbox.png"] { content: url("../app-icons/solveinbox-dark.png"); }


/* SolvePaper demos drawn from the real app (screenshot of 19 Oct): warm window, quiet title bar, glass dock with the tool in use */
.mw.solvepaper { --mw-bg: #f1efea; --mw-bar: #f2f0eb; --mw-line: rgba(46,47,41,.08); --mw-ink: #2e2f29; --mw-muted: #6b6a63; --mw-acc: #406b56; --mw-soft: #e3ece5; --mw-desk: #f1efea; }
.mw.solvepaper .mw-bar span { font-weight: 600; color: var(--mw-ink); }
.mw.solvepaper .mw-bar .saved { position: absolute; right: 12px; font: 10px var(--ui-sans); font-style: normal; color: var(--mw-muted); }
.mw.solvepaper .mw-body { bottom: 0; }
.pdock { position: absolute; left: 66px; right: 66px; bottom: 10px; z-index: 4; display: flex; justify-content: space-between; gap: 2px; padding: 5px 6px; border-radius: 14px;
  background: rgba(247,247,248,.88); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 6px 20px rgba(46,47,41,.14); }
.pdock span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 3px; border-radius: 9px; font: 8.5px var(--ui-sans); color: #4a4b45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pdock span.on { background: var(--mw-soft); color: var(--mw-acc); }
.mw.solvepaper .sheet { bottom: 64px; overflow: hidden; }
@media (max-width: 560px) { .pdock span:nth-child(n+7) { display: none; } }
.mw.solvepaper .mw-replay { bottom: 64px; }
.mw.solvepaper { container-type: inline-size; }
@container (max-width: 470px) { .pdock span { font-size: 0; gap: 0; padding: 5px 2px; } .pdock { left: 64px; right: 64px; } }

/* ---------- SolvePaper showcase (owner, 19 Oct) ----------
   A looping video of the real app at the top, then one section per main feature, each with a drawn demo in the
   app's real Light look and labels pointing at the control. The demos stay Light in either site look. */
.hvid { margin: 0; }
.hvid .vbox { position: relative; }
.hvid video, .hvid img { width: 100%; height: auto; display: block; border-radius: 16px; background: #e9ece9; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 26px 60px rgba(30,40,35,.16); }
.hvid .pp { position: absolute; right: 12px; bottom: 12px; border: 0; border-radius: 999px; padding: 5px 12px; font: 600 12.5px var(--b); color: #2e2f29; background: rgba(247,247,248,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.hvid figcaption { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.pf-fit { position: relative; aspect-ratio: 960 / 640; border-radius: 16px; overflow: hidden; background: center / cover url("../backdrops/mist-light.jpg"); box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 26px 60px rgba(30,40,35,.14); }

/* the stage: a fixed 960 by 600 drawing, scaled to fit by site.js */
.pf-stage { position: absolute; left: 0; top: 0; width: 960px; height: 640px; transform-origin: 0 0; color: #2e2f29; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --cy: 9s; }
.pf-stage * { animation-duration: var(--cy); animation-iteration-count: infinite; animation-play-state: paused; animation-timing-function: cubic-bezier(.45,0,.25,1); animation-fill-mode: both; }
.run .pf-stage * { animation-play-state: running; }
.pf-win { position: absolute; left: 48px; top: 22px; width: 864px; height: 540px; border-radius: 12px; background: #f1efea; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 22px 50px rgba(30,40,35,.26); }
.pf-bar { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: #f2f0eb; border-bottom: 1px solid rgba(0,0,0,.07); display: flex; align-items: center; padding: 0 12px; z-index: 3; }
.pf-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; margin-right: 7px; }
.pf-bar i:nth-child(2) { background: #febc2e; } .pf-bar i:nth-child(3) { background: #28c840; }
.pf-bar b { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; pointer-events: none; }
.pf-bar em { margin-left: auto; font-style: normal; font-size: 12px; color: #77786f; }
.pf-desk { position: absolute; left: 0; right: 0; top: 35px; bottom: 0; overflow: hidden; }
.pf-sheet { position: absolute; left: 182px; top: 20px; width: 500px; min-height: 560px; background: #fbfaf7; box-shadow: 0 1px 3px rgba(0,0,0,.1); padding: 40px 44px; font: 15px/1.62 "Iowan Old Style", Charter, Georgia, serif; color: #23251f; }
.pf-sheet .kick { font: 600 11px/1 -apple-system, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #2f6f73; margin: 0 0 8px; }
.pf-sheet h5 { font: 400 28px/1.15 "Iowan Old Style", Charter, Georgia, serif; margin: 0 0 14px; }
.pf-sheet p { margin: 0 0 12px; }
.pf-sheet .ph { width: 100%; height: 170px; object-fit: cover; border-radius: 8px; }
.pf-sheet .ph.short { height: 140px; margin-top: 4px; }
.pf-dock { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0 auto; width: max-content; display: flex; align-items: center; gap: 2px; padding: 5px 6px; border-radius: 16px; background: rgba(247,247,248,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.10); z-index: 4; white-space: nowrap; }
.pf-dock span { position: relative; width: 47px; height: 44px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 9.5px; color: #2e2f29; letter-spacing: -.01em; }
.pf-dock span[data-t="Scan to text"], .pf-dock span[data-t="Make PDF"] { width: 54px; }
.pf-dock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.pf-dock span[data-t="More"] svg circle { fill: currentColor; stroke: none; }
.pf-dock .sep { width: 1px; height: 28px; background: rgba(0,0,0,.12); margin: 0 4px; }
.pf-dock .moon { width: 34px; }
.pf-dock .on { background: #e3ece5; color: #406b56; }
.pf-dock .badge { position: absolute; top: 3px; right: 6px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: #f2c14b; color: #2e2f29; font: 700 8.5px/13px -apple-system, sans-serif; text-align: center; }
.pf-chip { position: absolute; right: 18px; top: 48px; z-index: 5; padding: 6px 12px; border-radius: 999px; background: #406b56; color: #fff; font-size: 12px; font-weight: 600; animation-name: pfchip; }
@keyframes pfchip { 0%, 62% { opacity: 0; transform: translateY(-6px); } 68%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.pf-tray { position: absolute; left: 0; right: 0; bottom: 70px; margin: 0 auto; width: max-content; display: flex; gap: 4px; padding: 5px; border-radius: 12px; background: rgba(247,247,248,.92); box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08); z-index: 4; animation-name: pftray; }
.pf-tray span { padding: 5px 10px; border-radius: 8px; font-size: 12px; }
.pf-tray .on { background: #e3ece5; color: #406b56; font-weight: 600; }
@keyframes pftray { 0%, 6% { opacity: 0; transform: translateY(8px); } 12%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* labels and their lines: they come in once, a beat apart, and stay */
.pf-lines { position: absolute; left: 0; top: 0; width: 960px; height: 640px; pointer-events: none; z-index: 6; overflow: visible; }
.pf-lines path { fill: none; stroke: #406b56; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pf-lines circle { fill: #406b56; stroke: #fff; stroke-width: 2; opacity: 0; }
.pf-call { position: absolute; z-index: 7; padding: 7px 13px; border-radius: 999px; background: #406b56; color: #fff; font: 600 max(15px, calc(11px / var(--k, 1)))/1.2 -apple-system, BlinkMacSystemFont, sans-serif; white-space: nowrap; box-shadow: 0 4px 14px rgba(30,60,45,.28); opacity: 0; transform: translateY(6px); }
.met .pf-call { opacity: 1; transform: none; transition: opacity .6s ease calc(.9s + var(--n) * .5s), transform .6s cubic-bezier(.22,1,.36,1) calc(.9s + var(--n) * .5s); }
.met .pf-lines path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease calc(1.2s + var(--n) * .5s); }
.met .pf-lines circle { opacity: 1; transition: opacity .3s ease calc(1.8s + var(--n) * .5s); }
.pf-stage .pf-call, .pf-stage .pf-lines * { animation: none; }

/* Highlight and note */
.pf-highlight .hl { white-space: nowrap; background: linear-gradient(rgba(249,214,92,.62), rgba(249,214,92,.62)) no-repeat 0 55% / 0% 88%; animation-name: pfhl1; }
.pf-highlight .hl.b { animation-name: pfhl2; }
@keyframes pfhl1 { 0%, 12% { background-size: 0% 88%; } 22%, 90% { background-size: 100% 88%; } 97%, 100% { background-size: 0% 88%; } }
@keyframes pfhl2 { 0%, 23% { background-size: 0% 88%; } 31%, 90% { background-size: 100% 88%; } 97%, 100% { background-size: 0% 88%; } }
.pf-highlight .pnote { position: absolute; right: -50px; top: 130px; width: 26px; height: 26px; border-radius: 3px 3px 9px 3px; background: #f9cf4a; box-shadow: 0 1px 3px rgba(0,0,0,.25); animation-name: pfnote; }
@keyframes pfnote { 0%, 38% { opacity: 0; transform: translateY(-22px) scale(.85); } 44% { opacity: 1; transform: translateY(2px) scale(1.04); } 47%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.pf-highlight .pbub { position: absolute; right: -40px; top: 162px; width: 170px; padding: 10px 12px; border-radius: 10px; background: #fff7d6; box-shadow: 0 6px 16px rgba(0,0,0,.14); font: 13px/1.4 -apple-system, sans-serif; color: #2e2f29; animation-name: pfbub; }
@keyframes pfbub { 0%, 49% { opacity: 0; transform: translateY(-6px); } 54%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; } }
.pf-highlight .badge { animation-name: pfbadge; }
@keyframes pfbadge { 0%, 22% { opacity: 0; transform: scale(.4); } 26%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* Edit text in place */
.pf-edit .edbox { position: relative; margin: 0 -10px 12px; padding: 6px 10px; border-radius: 4px; outline: 1.5px dashed transparent; animation-name: pfedbox; }
@keyframes pfedbox { 0%, 8% { outline-color: transparent; background: transparent; } 13%, 90% { outline-color: #406b56; background: rgba(64,107,86,.04); } 96%, 100% { outline-color: transparent; } }
.pf-edit .ed { position: relative; display: inline-block; white-space: nowrap; vertical-align: bottom; }
.pf-edit .old { display: inline-block; animation-name: pfold; border-radius: 2px; }
@keyframes pfold { 0%, 20% { background: transparent; max-width: 200px; } 24%, 34% { background: #b9d3f5; max-width: 200px; } 36%, 100% { background: transparent; max-width: 0; } }
.pf-edit .old { overflow: hidden; vertical-align: bottom; }
.pf-edit .new { display: inline-block; overflow: hidden; vertical-align: bottom; max-width: 0; border-right: 1.5px solid #2e2f29; animation-name: pfnew; animation-timing-function: steps(12, end); }
@keyframes pfnew { 0%, 36% { max-width: 0; border-right-color: #2e2f29; } 52% { max-width: 120px; } 53%, 58% { border-right-color: #2e2f29; } 60%, 64% { border-right-color: transparent; } 66%, 90% { max-width: 120px; border-right-color: transparent; } 96%, 100% { max-width: 0; } }
.pf-edit .old, .pf-edit .new { animation-timing-function: steps(12, end); }
.pf-edit .old { animation-timing-function: linear; }

/* Fill and sign */
.pf-sign .frm { display: grid; grid-template-columns: 70px 1fr; gap: 12px 10px; align-items: end; font: 14px -apple-system, sans-serif; margin: 6px 0 18px; }
.pf-sign .frm label { color: #6b6c64; }
.pf-sign .fv { display: block; height: 28px; border-bottom: 1px solid #b9b8b0; padding: 0 4px; font: 16px/28px -apple-system, sans-serif; }
.pf-sign .ty { display: inline-block; font-style: normal; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation-timing-function: steps(11, end); }
.pf-sign .t1 { animation-name: pfty1; } .pf-sign .t2 { animation-name: pfty2; }
@keyframes pfty1 { 0%, 10% { max-width: 0; } 22%, 92% { max-width: 110px; } 97%, 100% { max-width: 0; } }
@keyframes pfty2 { 0%, 22% { max-width: 0; } 32%, 92% { max-width: 110px; } 97%, 100% { max-width: 0; } }
.pf-sign .tickrow { display: flex; align-items: center; gap: 10px; font: 14px -apple-system, sans-serif; }
.pf-sign .tick { width: 20px; height: 20px; border: 1.5px solid #8d8c84; border-radius: 4px; display: grid; place-items: center; }
.pf-sign .tick svg { width: 16px; height: 16px; fill: none; stroke: #2e2f29; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; animation-name: pftick; animation-timing-function: ease-out; }
@keyframes pftick { 0%, 34% { stroke-dashoffset: 20; } 39%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 20; } }
.pf-sign .sig { margin-top: 26px; height: 74px; border-bottom: 1px solid #b9b8b0; }
.pf-sign .sig svg { width: 260px; height: 60px; fill: none; stroke: #23306b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; animation-name: pfsig; animation-timing-function: cubic-bezier(.5,0,.4,1); }
@keyframes pfsig { 0%, 42% { stroke-dashoffset: 900; } 62%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 900; } }
.pf-sign .cap { font: 12px -apple-system, sans-serif; color: #77786f; margin-top: 4px; }

/* Forms */
.pf-forms .fq { font: 14px -apple-system, sans-serif; color: #4d4e47; }
.pf-forms .fq p { margin: 10px 0 4px; }
.pf-forms .fl { position: relative; display: block; height: 30px; border-bottom: 1px solid #b9b8b0; }
.pf-forms .fl.half { width: 60%; } .pf-forms .fl.short { width: 30%; }
.pf-forms .fl::after, .pf-forms .fb::after { content: ""; position: absolute; inset: 2px -4px -4px; border: 1.8px solid #406b56; border-radius: 5px; background: rgba(64,107,86,.08); opacity: 0; animation-name: pffield; animation-delay: calc(var(--i) * .35s); }
.pf-forms .ck { display: flex; align-items: center; gap: 10px; margin-top: 18px !important; }
.pf-forms .fb { position: relative; width: 18px; height: 18px; border: 1.5px solid #8d8c84; border-radius: 4px; }
.pf-forms .fb::after { inset: -4px; }
@keyframes pffield { 0%, 14% { opacity: 0; transform: scale(1.06); } 19%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.pf-forms .fl::after, .pf-forms .fb::after { animation-duration: var(--cy); animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; }
.run .pf-forms .fl::after, .run .pf-forms .fb::after { animation-play-state: running; }

/* Redact */
.pf-redact .pf-sheet p { font-size: 15.5px; }
.pf-redact .r { position: relative; white-space: nowrap; border-radius: 2px; animation-name: pfmark; }
@keyframes pfmark { 0%, 14% { outline: 1.5px dashed transparent; background: transparent; color: inherit; } 20%, 44% { outline: 1.5px dashed #c2410c; background: rgba(194,65,12,.08); color: inherit; } 52%, 90% { outline: 1.5px dashed transparent; background: #111; color: #111; } 96%, 100% { outline: 1.5px dashed transparent; background: transparent; color: inherit; } }
.pf-redact .apply { animation-name: pfapply; }
@keyframes pfapply { 0%, 42% { background: transparent; color: inherit; } 45%, 52% { background: #406b56; color: #fff; } 56%, 100% { background: transparent; color: inherit; } }

/* Pages */
.pgrid2 { position: absolute; left: 92px; top: 50px; width: 680px; display: grid; grid-template-columns: repeat(4, 140px); gap: 26px 40px; }
.pgrid2 .pg { position: relative; text-align: center; }
.pgrid2 .mini { height: 158px; background: #fbfaf7; box-shadow: 0 1px 4px rgba(0,0,0,.14); padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; border-radius: 2px; }
.pgrid2 .mini i { display: block; height: 60px; border-radius: 3px; background: center / cover; margin-bottom: 4px; }
.pgrid2 .mini s { display: block; height: 5px; width: var(--w); border-radius: 3px; background: #d9d7cf; text-decoration: none; }
.pgrid2 small { display: block; margin-top: 7px; font-size: 11px; color: #6b6c64; }
.pgrid2 .mv { z-index: 2; animation-name: pfmove; }
.pgrid2 .p2, .pgrid2 .p3 { animation-name: pfshift; }
@keyframes pfmove { 0%, 12% { transform: none; } 18% { transform: translate(0, -8px) scale(1.06); filter: drop-shadow(0 12px 18px rgba(0,0,0,.22)); } 38% { transform: translate(360px, -8px) scale(1.06); filter: drop-shadow(0 12px 18px rgba(0,0,0,.22)); } 44%, 88% { transform: translate(360px, 0); filter: none; } 96%, 100% { transform: none; } }
@keyframes pfshift { 0%, 22% { transform: none; } 38%, 88% { transform: translateX(-180px); } 96%, 100% { transform: none; } }
.pgrid2 .mv { outline: 2.5px solid transparent; outline-offset: 3px; border-radius: 4px; }
.pgrid2 .rot .mini { animation-name: pfrot; }
@keyframes pfrot { 0%, 52% { transform: none; } 62%, 88% { transform: rotate(90deg) scale(.78); } 96%, 100% { transform: none; } }
.pf-pages .pgrid2 .mv .mini { box-shadow: 0 0 0 2.5px #406b56, 0 1px 4px rgba(0,0,0,.14); }

/* Scan to text */
.scandesk { position: absolute; inset: 0; background: #e6e3dc; }
.scanpg { position: absolute; left: 260px; top: 30px; width: 340px; height: 420px; background: #f4f1e8; padding: 34px 34px; font: 16px/1.5 "Courier New", Courier, monospace; color: #2f2d27; box-shadow: 0 2px 10px rgba(0,0,0,.18); animation-name: pfstraight; overflow: hidden; }
@keyframes pfstraight { 0%, 8% { transform: perspective(900px) rotate(-7deg) rotateX(14deg) scale(.92); filter: brightness(.86) sepia(.25) blur(.4px); } 26%, 90% { transform: none; filter: none; } 97%, 100% { transform: perspective(900px) rotate(-7deg) rotateX(14deg) scale(.92); filter: brightness(.86) sepia(.25) blur(.4px); } }
.scanpg h6 { font: 700 18px/1.2 "Courier New", monospace; text-align: center; margin: 0 0 24px; letter-spacing: .06em; }
.scanpg p { display: flex; justify-content: space-between; margin: 0 0 10px; }
.scanpg p span { border-radius: 2px; animation-name: pfsel; }
.scanpg .tot { border-top: 1.5px dashed #8d8a80; padding-top: 10px; margin-top: 16px; font-weight: 700; }
.scanpg .thx { justify-content: center; margin-top: 30px; font-size: 14px; }
.scanpg .beam { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(rgba(64,107,86,0), rgba(64,107,86,.22) 70%, #406b56 72%, rgba(64,107,86,0) 76%); opacity: 0; animation-name: pfbeam; animation-timing-function: linear; }
@keyframes pfbeam { 0%, 30% { opacity: 0; transform: translateY(-40px); } 32% { opacity: 1; } 54% { opacity: 1; transform: translateY(420px); } 56%, 100% { opacity: 0; transform: translateY(420px); } }
@keyframes pfsel { 0%, 58% { background: transparent; } 64%, 90% { background: #b9d3f5; } 96%, 100% { background: transparent; } }

/* Export */
.pf-pop { position: absolute; right: 70px; bottom: 70px; width: 170px; padding: 8px; border-radius: 12px; background: rgba(250,250,250,.96); box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 12px 30px rgba(0,0,0,.16); z-index: 5; display: flex; flex-direction: column; font-size: 13px; animation-name: pfpop; transform-origin: 80% 100%; }
.pf-pop b { font-size: 11px; color: #77786f; font-weight: 600; padding: 2px 8px 6px; }
.pf-pop span { padding: 5px 8px; border-radius: 6px; }
.pf-pop .pick { animation-name: pfpick; }
@keyframes pfpop { 0%, 8% { opacity: 0; transform: scale(.92) translateY(8px); } 14%, 46% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: scale(.96); } }
@keyframes pfpick { 0%, 24% { background: transparent; color: inherit; } 28%, 100% { background: #406b56; color: #fff; } }
.pf-export .pf-sheet { animation-name: pffly; transform-origin: 50% 30%; }
@keyframes pffly { 0%, 48% { transform: none; opacity: 1; } 60% { transform: translate(250px, 40px) scale(.22); opacity: 0; } 61% { transform: none; opacity: 0; } 70%, 100% { transform: none; opacity: 1; } }
.pf-export .pf-desk::after { content: ".docx"; position: absolute; right: 150px; top: 120px; width: 96px; height: 120px; border-radius: 6px; background: #fff linear-gradient(#406b56, #406b56) no-repeat 0 100% / 100% 30px; box-shadow: 0 2px 8px rgba(0,0,0,.16); color: #fff; font: 700 13px/30px -apple-system, sans-serif; display: flex; align-items: flex-end; justify-content: center; animation: pffile var(--cy) infinite both paused; }
.run .pf-export .pf-desk::after { animation-play-state: running; }
@keyframes pffile { 0%, 56% { opacity: 0; transform: scale(.7); } 62%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.pf-export .pf-desk::before { content: "Northern Rivers field guide.docx"; position: absolute; right: 108px; top: 250px; width: 180px; text-align: center; font-size: 12px; color: #4d4e47; animation: pffile var(--cy) infinite both paused; }
.run .pf-export .pf-desk::before { animation-play-state: running; }
.pf-export .pf-chip { animation-name: pfchip; }

@media (prefers-reduced-motion: reduce) {
  .pf-stage *, .pf-stage *::before, .pf-stage *::after { animation-play-state: paused !important; animation-delay: calc(var(--cy) * -.8) !important; }
  .met .pf-call, .met .pf-lines * { transition: none !important; }
}
.frow.flip .g:has(.pf-fit) { grid-template-columns: 7fr 5fr; }
@media (max-width: 860px) { .frow.flip .g:has(.pf-fit) { grid-template-columns: 1fr; } }
/* SolvePaper's card on the home page: a still of the real app (owner, 19 Oct), cut like the drawn windows beside it */
.fscene .cardshot { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: top center; border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px var(--line); }

/* ---------- SolveCapture showcase (owner, 19 Oct): its real Light editor and capture bar, teal #1E90A0 ---------- */
.pp-stage { --pp: #1E90A0; color: #1d1d1f; }
.pf-fit.pp-fit { background-image: url("../backdrops/lagoon-light.jpg"); }
.pf-call.pp { background: #1E90A0; box-shadow: 0 4px 14px rgba(20,90,100,.28); }
.pf-lines.pp path { stroke: #1E90A0; } .pf-lines.pp circle { fill: #1E90A0; }
.pf-chip.pp { background: #1E90A0; top: 62px; right: 120px; }
.pp-ed { background: #fff; }
.pp-lights { position: absolute; left: 14px; top: 14px; display: flex; gap: 7px; z-index: 3; }
.pp-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .pp-lights i:nth-child(2) { background: #febc2e; } .pp-lights i:nth-child(3) { background: #28c840; }
.pp-crumb, .pp-acts, .pp-dock, .pp-corner { background: rgba(252,252,252,.94); box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.08); }
.pp-crumb { position: absolute; left: 76px; top: 8px; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 14px; font-size: 11.5px; color: #55565c; z-index: 3; }
.pp-crumb b { color: #1d1d1f; font-weight: 600; } .pp-crumb em { font-style: normal; color: #b9b9be; }
.pp-crumb svg, .pp-dock svg, .pp-corner svg, .pp-mbi svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pp-acts { position: absolute; right: 8px; top: 6px; height: 30px; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 10px; border-radius: 16px; font-size: 11.5px; font-weight: 600; z-index: 3; }
.pp-acts span { padding: 3px 7px; color: #3a3a3f; } .pp-acts span:nth-child(-n+2) { color: #9a9aa0; font-weight: 400; }
.pp-acts .pan { width: 22px; height: 18px; border-radius: 5px; background: #e6e6e9; padding: 0; }
.pp-acts .copy { background: #1E90A0; color: #fff; border-radius: 12px; padding: 4px 12px; }
.pp-shelf { position: absolute; right: 8px; top: 46px; bottom: 60px; width: 64px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; z-index: 2; }
.pp-shelf i { display: block; height: 36px; border-radius: 6px; background: center / cover; }
.pp-canvas { position: absolute; left: 20px; right: 84px; top: 46px; bottom: 66px; display: grid; place-items: center; }
.pp-corner { position: absolute; left: 10px; bottom: 10px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #1E90A0; z-index: 4; }
.pp-corner svg { width: 22px; height: 22px; }
.pp-dock { position: absolute; left: 64px; bottom: 9px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 16px; z-index: 4; }
.pp-dock span { width: 50px; height: 40px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 9.5px; font-weight: 500; color: #2a2a2e; }
.pp-dock span[data-t="Background"] { width: 62px; }
.pp-dock .on { background: #1E90A0; color: #fff; font-weight: 600; }
.pp-dock .sep { width: 1px; height: 26px; background: rgba(0,0,0,.1); margin: 0 3px; }
.pp-dock .moon { width: 32px; }
.pf-tray.pp-tray { left: 64px; right: auto; margin: 0; bottom: 62px; }
.pf-tray.pp-tray .on { background: #1E90A0; color: #fff; }

/* the desktop with the capture bar */
.pp-desk { position: absolute; left: 48px; top: 22px; width: 864px; height: 540px; border-radius: 12px; overflow: hidden; background: center / cover url("../backdrops/lagoon-light.jpg"); box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 22px 50px rgba(30,40,35,.22); }
.pp-menubar { position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-size: 11.5px; z-index: 5; }
.pp-menubar b { font-weight: 400; } .pp-mbi { margin-left: auto; color: #1d1d1f; display: grid; }
.pp-bar { position: absolute; right: 70px; top: 32px; display: flex; gap: 3px; padding: 5px; border-radius: 24px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 30px rgba(20,60,70,.2); font-size: 12px; font-weight: 500; z-index: 6; }
.pp-bar span { padding: 6px 12px; border-radius: 18px; display: flex; align-items: center; gap: 5px; }
.pp-bar .on { background: #1E90A0; color: #fff; font-weight: 600; }
.pp-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; }
.pp-app { position: absolute; left: 70px; top: 90px; width: 560px; height: 420px; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.15), 0 16px 40px rgba(0,0,0,.18); }
.pp-app-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #f3f3f4; border-bottom: 1px solid #e3e3e6; font-size: 11px; color: #55565c; }
.pp-app-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d4d8; } .pp-app-bar span { margin-left: 10px; }
.pp-page { padding: 18px 40px; font: 13px/1.6 "Iowan Old Style", Charter, Georgia, serif; color: #23251f; }
.pp-page .kick { font: 600 9.5px -apple-system, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #2f6f73; margin: 0 0 4px; }
.pp-page h5 { font: 400 22px/1.2 "Iowan Old Style", Charter, Georgia, serif; margin: 0 0 8px; }
.pp-page p { margin: 0 0 10px; } .pp-page img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.pp-sel { position: absolute; border: 1.5px solid #fff; outline: 1px solid rgba(0,0,0,.35); box-shadow: 0 0 0 2000px rgba(10,30,35,.32); z-index: 4; }
.pp-sel .dim { position: absolute; left: 0; bottom: -26px; padding: 3px 8px; border-radius: 6px; background: rgba(20,20,22,.78); color: #fff; font: 600 10.5px -apple-system, sans-serif; }

/* hide private details */
.pp-shot { width: 420px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e3e3e6, 0 10px 26px rgba(0,0,0,.1); overflow: hidden; font-size: 14px; }
.pp-shot .sb { padding: 10px 16px; background: #f3f3f4; font-weight: 600; border-bottom: 1px solid #e6e6e9; }
.pp-shot .sbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pp-hide .pv { font-weight: 500; border-radius: 3px; animation-name: pphide; }
.pp-hide .sbody span:nth-child(2) .pv { animation-name: pphide2; } .pp-hide .sbody span:nth-child(3) .pv { animation-name: pphide3; } .pp-hide .sbody span:nth-child(4) .pv { animation-name: pphide4; }
@keyframes pphide { 0%, 16% { filter: none; background: transparent; } 20%, 26% { filter: none; background: rgba(30,144,160,.18); } 32%, 90% { filter: blur(5px); background: rgba(30,144,160,.12); } 96%, 100% { filter: none; background: transparent; } }
@keyframes pphide2 { 0%, 22% { filter: none; background: transparent; } 26%, 32% { filter: none; background: rgba(30,144,160,.18); } 38%, 90% { filter: blur(5px); background: rgba(30,144,160,.12); } 96%, 100% { filter: none; background: transparent; } }
@keyframes pphide3 { 0%, 28% { filter: none; background: transparent; } 32%, 38% { filter: none; background: rgba(30,144,160,.18); } 44%, 90% { filter: blur(5px); background: rgba(30,144,160,.12); } 96%, 100% { filter: none; background: transparent; } }
@keyframes pphide4 { 0%, 34% { filter: none; background: transparent; } 38%, 44% { filter: none; background: rgba(30,144,160,.18); } 50%, 90% { filter: blur(5px); background: rgba(30,144,160,.12); } 96%, 100% { filter: none; background: transparent; } }

/* mark it up */
.pp-photo { position: relative; width: 560px; height: 373px; }
.pp-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.pp-photo .pspot { position: absolute; left: 115px; top: 55px; width: 160px; height: 135px; border-radius: 10px; box-shadow: 0 0 0 2000px rgba(0,0,0,0); animation-name: ppspot; }
.pp-photo { overflow: hidden; }
@keyframes ppspot { 0%, 44% { box-shadow: 0 0 0 2000px rgba(0,0,0,0); outline: 2px solid rgba(255,255,255,0); } 52%, 92% { box-shadow: 0 0 0 2000px rgba(0,0,0,.45); outline: 2px solid rgba(255,255,255,.9); } 97%, 100% { box-shadow: 0 0 0 2000px rgba(0,0,0,0); outline: 2px solid rgba(255,255,255,0); } }
.pp-photo .arr { position: absolute; left: 60px; top: 60px; width: 400px; height: 260px; fill: none; stroke: #ff3b30; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; animation-name: pparr; }
@keyframes pparr { 0%, 10% { stroke-dashoffset: 300; } 24%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 300; } }
.pp-photo .arr .head { stroke-dasharray: none; animation-name: pphead; }
@keyframes pphead { 0%, 22% { opacity: 0; } 25%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pp-photo .cnt { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #ff3b30; color: #fff; font: 700 15px/30px -apple-system, sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); animation-name: ppcnt; }
.pp-photo .c1 { left: 222px; top: 62px; } .pp-photo .c2 { left: 345px; top: 140px; animation-name: ppcnt2; } .pp-photo .c3 { left: 470px; top: 230px; animation-name: ppcnt3; }
@keyframes ppcnt { 0%, 26% { opacity: 0; transform: scale(.4); } 30%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ppcnt2 { 0%, 32% { opacity: 0; transform: scale(.4); } 36%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ppcnt3 { 0%, 38% { opacity: 0; transform: scale(.4); } 42%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* background and 3D mockup */
.pp-bgwrap { width: 600px; height: 400px; display: grid; place-items: center; border-radius: 0; background: transparent; animation-name: ppbg; }
.pp-bgwrap img { width: 560px; height: auto; border-radius: 0; display: block; animation-name: ppbgimg; }
@keyframes ppbg { 0%, 10% { background: transparent; border-radius: 0; } 24%, 90% { background: linear-gradient(135deg, #8fd3dc, #1E90A0 55%, #2b5f8a); border-radius: 18px; } 96%, 100% { background: transparent; } }
@keyframes ppbgimg { 0%, 12% { width: 560px; border-radius: 0; box-shadow: none; transform: none; } 26%, 50% { width: 470px; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.35); transform: none; } 60%, 88% { width: 470px; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.35); transform: perspective(900px) rotateY(-16deg) rotateX(8deg); } 96%, 100% { width: 560px; border-radius: 0; box-shadow: none; transform: none; } }

/* area with the magnifier */
.pp-sel.a1 { left: 140px; top: 150px; width: 320px; height: 180px; animation-name: ppsel; transform-origin: 0 0; }
@keyframes ppsel { 0%, 10% { width: 0; height: 0; opacity: 0; } 12% { opacity: 1; width: 0; height: 0; } 40%, 90% { width: 320px; height: 180px; opacity: 1; } 96%, 100% { opacity: 0; } }
.pp-loupe { position: absolute; left: 470px; top: 340px; width: 110px; height: 128px; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); padding: 6px; z-index: 5; animation-name: pploupe; }
.pp-loupe i { display: block; height: 96px; border-radius: 9px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 12px), linear-gradient(135deg, #a9d2e8 0 50%, #1E90A0 50%); }
.pp-loupe b { display: block; text-align: center; font: 600 10.5px/20px ui-monospace, Menlo, monospace; }
@keyframes pploupe { 0%, 10% { opacity: 0; transform: translate(-330px, -190px); } 14% { opacity: 1; transform: translate(-330px, -190px); } 40%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* scrolling capture */
.pp-sel.s1 { left: 90px; top: 130px; width: 520px; height: 300px; }
.pp-scroll .pp-page { animation-name: ppscrollpg; }
@keyframes ppscrollpg { 0%, 12% { transform: none; } 70%, 90% { transform: translateY(-330px); } 96%, 100% { transform: none; } }
.pp-stitch { position: absolute; right: 70px; top: 90px; width: 120px; height: 420px; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.22); overflow: hidden; z-index: 5; padding: 8px; }
.pp-stitch div { display: flex; flex-direction: column; gap: 5px; clip-path: inset(0 0 100% 0); animation-name: ppstitch; }
.pp-stitch img { width: 100%; height: 66px; object-fit: cover; border-radius: 3px; } .pp-stitch i { display: block; height: 5px; border-radius: 3px; background: #dcdce0; }
@keyframes ppstitch { 0%, 12% { clip-path: inset(0 0 100% 0); } 72%, 90% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 0 100% 0); } }

/* capture text */
.pp-sel.t1 { left: 105px; top: 175px; width: 490px; height: 96px; animation-name: ppsel2; }
@keyframes ppsel2 { 0%, 10% { opacity: 0; } 16%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pp-toast { position: absolute; left: 50%; top: 470px; transform: translateX(-50%); padding: 9px 16px; border-radius: 12px; background: rgba(252,252,252,.96); box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: 13px; font-weight: 600; z-index: 6; animation-name: pptoast; }
@keyframes pptoast { 0%, 34% { opacity: 0; transform: translate(-50%, 10px); } 40%, 88% { opacity: 1; transform: translate(-50%, 0); } 94%, 100% { opacity: 0; } }

/* recording */
.pp-sel.r1 { left: 70px; top: 90px; width: 560px; height: 420px; border-color: #ff453a; outline: 0; box-shadow: 0 0 0 2000px rgba(10,30,35,.22); }
.pp-rec { position: absolute; left: 280px; top: 40px; padding: 6px 12px; border-radius: 14px; background: rgba(20,20,22,.82); color: #fff; font: 600 12px -apple-system, sans-serif; z-index: 6; display: flex; align-items: center; gap: 6px; }
.pp-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; animation-name: ppblink; animation-duration: 1.2s !important; }
@keyframes ppblink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .2; } }
.pp-cam { position: absolute; left: 540px; top: 420px; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(145deg, #cfe6ea, #8cc2cb); box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(0,0,0,.25); display: grid; place-items: center; color: #2b5f6a; z-index: 6; }
.pp-cam svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.pp-ripple { position: absolute; left: 300px; top: 300px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid #1E90A0; z-index: 6; animation-name: ppripple; }
@keyframes ppripple { 0%, 20% { opacity: 0; transform: scale(.3); } 22% { opacity: 1; transform: scale(.4); } 34% { opacity: 0; transform: scale(2.4); } 50% { opacity: 0; transform: scale(.3); } 52% { opacity: 1; transform: scale(.4); } 64%, 100% { opacity: 0; transform: scale(2.4); } }
.pp-key { position: absolute; left: 290px; top: 450px; padding: 8px 14px; border-radius: 10px; background: rgba(20,20,22,.8); color: #fff; font: 600 16px -apple-system, sans-serif; z-index: 6; animation-name: ppkey; }
@keyframes ppkey { 0%, 60% { opacity: 0; } 64%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* quick access and pinning */
.pp-qa { position: absolute; left: 20px; bottom: 20px; width: 220px; padding: 8px; border-radius: 14px; background: rgba(252,252,252,.96); box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 6; animation-name: ppqa; }
.pp-qa i { display: block; height: 110px; border-radius: 8px; background: center / cover; }
.pp-qa div { display: flex; gap: 4px; margin-top: 8px; } .pp-qa span { flex: 1; text-align: center; padding: 5px 0; border-radius: 8px; background: #eef4f5; font-size: 11.5px; font-weight: 600; color: #1d5f69; }
.pp-qa span:nth-child(4) { animation-name: pppick; }
@keyframes ppqa { 0%, 8% { opacity: 0; transform: translateX(-260px); } 16%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes pppick { 0%, 38% { background: #eef4f5; color: #1d5f69; } 42%, 50% { background: #1E90A0; color: #fff; } 54%, 100% { background: #eef4f5; color: #1d5f69; } }
.pp-pin { position: absolute; right: 70px; top: 120px; width: 220px; padding: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 14px 34px rgba(0,0,0,.3); z-index: 6; animation-name: pppin; }
.pp-pin img { width: 100%; height: 150px; object-fit: cover; display: block; }
@keyframes pppin { 0%, 48% { opacity: 0; transform: translate(-480px, 260px) scale(.6); } 60%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.pp-app-bar { position: relative; z-index: 2; }
/* SolveCapture's mark-up demo (owner, 19 Oct): every mark points at a real item. Steps 1 to 3 go down the list, the
   arrow points at Privacy and security, and a spotlight keeps that item readable while the rest dims. */
.shot.mk .sbody span { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.shot.mk .n { width: 17px; height: 17px; border-radius: 50%; background: #d2453a; color: #fff; font: 700 10.5px/17px var(--ui-sans); font-style: normal; text-align: center; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1) var(--d); }
.done .shot.mk .n { transform: scale(1); }
.shot.mk .lit { z-index: 2; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; transition: box-shadow .6s ease 1.5s, background .6s ease 1.5s; }
.done .shot.mk .lit { background: #fff; box-shadow: 0 0 0 1.5px #d2453a, 0 0 0 999px rgba(20,22,26,.32); }
.shot.mk .mkarrow { position: absolute; left: calc(100% + 2px); top: 60%; width: 104px; height: 58px; overflow: visible; fill: none; stroke: #d2453a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.shot.mk .mkarrow path:first-child { stroke-dasharray: 110; stroke-dashoffset: 110; transition: stroke-dashoffset .8s ease .2s; }
.shot.mk .mkarrow path:last-child { opacity: 0; transition: opacity .2s ease .95s; }
.done .shot.mk .mkarrow path:first-child { stroke-dashoffset: 0; } .done .shot.mk .mkarrow path:last-child { opacity: 1; }