/* Generated from the studio prototype's pages.css by tools/import-studio.mjs; every selector is scoped to this page's body class (tools/css-scope.mjs). */
/* ===== SUN ===== */
body.page-sun.sun { font-family: 'Hanken Grotesk', var(--body); }
/* Release 006 · the SUN case study · SUN's own world inside the rail (frame=sun) or a paper frame (frame=neutral).
   SUN's tokens are read from the site's DESIGN.md: #0A0A09 ground, #141310 panel, #F5A623 amber, #FFF7E6 cream,
   Young Serif display, Hanken Grotesk body, JetBrains Mono labels. The page never invents a SUN colour. */
body.page-sun.sun h1, body.page-sun.sun h2, body.page-sun.sun h3 { font-family: 'Young Serif', var(--serif); font-weight: 400; letter-spacing: -.01em; }
body.page-sun.sun-neutral-unused h1, body.page-sun.sun-neutral-unused h2, body.page-sun.sun-neutral-unused h3 { font-family: var(--display); font-weight: 400; }
body.page-sun.sun .p-top h1 { font-size: clamp(34px, 4.7vw, 68px); overflow-wrap: anywhere; }
body.page-sun.sun .p-top h1 { color: var(--w-accent); }
body.page-sun.sun .kicker .live { color: var(--w-accent); }
body.page-sun.sun .sec .head { border-bottom-color: var(--w-line); }
body.page-sun.sun .sec .head .no { color: var(--w-accent); }
body.page-sun.sun .need, body.page-sun.sun .gap { border-color: rgba(245,166,35,.45); }
body.page-sun.sun .ask { border-left-color: var(--w-accent); }
body.page-sun.sun .tc { font: 11px var(--meta); letter-spacing: .05em; text-transform: uppercase; color: var(--w-muted); border-bottom: 1px dotted currentColor; }
body.page-sun.sun .figs li { border-color: var(--w-line); background: var(--w-panel); color: var(--w-ink); }
body.page-sun.sun .figs figcaption { color: var(--w-muted); }
body.page-sun.sun .figs .pv { border-bottom-color: var(--w-line); }
body.page-sun.sun .spec th { color: var(--w-muted); }
body.page-sun.sun .spec th, body.page-sun.sun .spec td { border-bottom-color: var(--w-line); }
body.page-sun.sun .wbtn:hover:not([aria-pressed="true"]) { box-shadow: 3px 3px 0 var(--w-accent); }
body.page-sun.sun .wbtn[aria-pressed="true"] { background: var(--w-accent); color: var(--w-accent-ink); border-color: var(--w-accent); }
body.page-sun.sun .studio-switch a[aria-current="true"] { background: var(--w-accent); color: var(--w-accent-ink); border-color: var(--w-accent); }
body.page-sun.sun .slot.shipped { background: var(--w-accent); color: var(--w-accent-ink); border-color: var(--w-accent); }

/* the three-line card */
body.page-sun .three { margin: 0; border-top: 1px solid var(--w-ink); }
body.page-sun .three div { border-bottom: 1px solid var(--w-line); padding: 9px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
body.page-sun .three dt { font: 11px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--w-muted); padding-top: 3px; }
body.page-sun .three dd { margin: 0; font-size: 14.5px; line-height: 1.45; }
body.page-sun .switches { display: flex; flex-direction: column; gap: 6px; }

/* ---------- the stage ---------- */
body.page-sun .worlds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
body.page-sun .worlds button { --acc: var(--w-accent); display: inline-flex; align-items: center; gap: 8px; font: 12px var(--meta); letter-spacing: .07em; text-transform: uppercase; background: transparent; color: var(--w-ink); border: 1px solid var(--w-line); padding: 9px 12px; cursor: pointer; }
body.page-sun .worlds button i { width: 10px; height: 10px; background: var(--acc); display: inline-block; }
body.page-sun .worlds button[aria-pressed="true"] { border-color: var(--acc); box-shadow: inset 0 -3px 0 var(--acc); }
body.page-sun .worlds button:focus-visible { outline: 2px solid var(--w-ink); outline-offset: 2px; }
body.page-sun .stagegrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
body.page-sun .pagelist { display: flex; flex-direction: column; border: 1px solid var(--w-line); background: var(--w-panel); }
body.page-sun .pagelist button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: baseline; text-align: left; background: transparent; color: var(--w-ink); border: 0; border-bottom: 1px solid var(--w-line); padding: 9px 10px; font: 13px/1.3 inherit; cursor: pointer; }
body.page-sun .pagelist button:last-child { border-bottom: 0; }
body.page-sun .pagelist button b { font: 10px var(--meta); color: var(--w-muted); }
body.page-sun .pagelist button small { display: block; font: 10px var(--meta); letter-spacing: .05em; text-transform: uppercase; color: var(--w-muted); margin-top: 2px; }
body.page-sun .pagelist button[aria-current="true"] { background: var(--w-ink); color: var(--w-bg); }
body.page-sun .pagelist button[aria-current="true"] b, body.page-sun .pagelist button[aria-current="true"] small { color: inherit; opacity: .75; }
body.page-sun .pagelist button:focus-visible { outline: 2px solid var(--w-accent); outline-offset: -3px; }
body.page-sun .pagelist .grp { font: 10px var(--pixel); text-transform: uppercase; color: var(--w-muted); padding: 10px 10px 4px; border-bottom: 1px dotted var(--w-line); }
body.page-sun .frames { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
body.page-sun.dev-desktop .frames { grid-template-columns: minmax(0, 1fr); }
body.page-sun.dev-desktop #dev-phone { display: none; }
body.page-sun.dev-phone .frames { grid-template-columns: 300px minmax(0, 1fr); }
body.page-sun.dev-phone #dev-desktop { display: none; }
body.page-sun.dev-phone .frames { grid-template-columns: minmax(280px, 360px); justify-content: center; }
body.page-sun .device { margin: 0; border: 1px solid var(--w-ink); background: var(--w-media); display: flex; flex-direction: column; }
body.page-sun .device .chrome { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--w-ink); background: var(--w-panel); color: var(--w-ink); font: 10px var(--meta); letter-spacing: .06em; text-transform: uppercase; }
body.page-sun .device .chrome .dots { display: inline-flex; gap: 4px; }
body.page-sun .device .chrome .dots i { width: 8px; height: 8px; border: 1px solid currentColor; display: block; opacity: .6; }
body.page-sun .device .chrome .url { flex: 1; border: 1px solid var(--w-line); padding: 4px 8px; text-transform: none; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-sun .device .chrome .cap-date { white-space: nowrap; color: var(--w-muted); }
body.page-sun .device .screen { position: relative; overflow-y: auto; overflow-x: hidden; background: #0A0A09; scrollbar-width: thin; scrollbar-color: var(--w-accent) transparent; }
body.page-sun .device.desktop .screen { height: min(640px, 62vh); }
body.page-sun .device.phone .screen { height: min(640px, 62vh); }
body.page-sun .device .screen img { display: block; width: 100%; height: auto; }
body.page-sun .device .screen .none { min-height: 320px; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--w-ink); font: 10px/1.6 var(--meta); letter-spacing: .06em; text-transform: uppercase; border: 1px dotted var(--w-line); margin: 12px; }
body.page-sun .device .screen:focus-visible { outline: 2px solid var(--w-accent); outline-offset: -2px; }
body.page-sun .device.phone { max-width: 360px; }
body.page-sun .device.phone .chrome .url { text-align: center; }
body.page-sun .devfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px; border-top: 1px solid var(--w-ink); background: var(--w-panel); }
body.page-sun .devfoot .wbtn { font-size: 11px; padding: 8px 10px; }

/* ---------- the task strip (proposal) ---------- */
body.page-sun .tasks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.page-sun .task { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; width: 100%; text-align: left; background: transparent; color: var(--w-ink); border: 1px solid var(--w-line); padding: 14px 14px; cursor: pointer; font: inherit; }
body.page-sun .task b { grid-row: 1 / span 2; font: 22px var(--pixel); color: var(--w-accent); }
body.page-sun .task span { font-size: 17px; font-weight: 600; }
body.page-sun .task small { font: 11px/1.4 var(--meta); letter-spacing: .04em; color: var(--w-muted); }
body.page-sun .task[aria-pressed="true"] { border-color: var(--w-accent); box-shadow: inset 0 -3px 0 var(--w-accent); }
body.page-sun .task:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }

/* ---------- decisions ---------- */
body.page-sun .dec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
body.page-sun .dec .fig { margin: 0 0 12px; position: relative; border: 1px solid var(--w-line); background: var(--w-media); }
body.page-sun .dec .fig .pv { width: 100%; aspect-ratio: 4 / 3; border: 0; }
body.page-sun .dec .fig > .pv { aspect-ratio: 16 / 9; }
body.page-sun .dec .fig .two-up { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--w-line); }
body.page-sun .dec .fig .two-up .pv { aspect-ratio: 4 / 3; }
body.page-sun .device .screen .standin { position: sticky; top: 8px; left: 8px; z-index: 2; display: inline-block; margin: 8px; font: 10px/1.4 var(--meta); letter-spacing: .06em; text-transform: uppercase; background: var(--w-bg); color: var(--w-ink); border: 1px dotted var(--w-ink); padding: 5px 7px; max-width: calc(100% - 16px); }
body.page-sun .dec h3 { font-size: 22px; margin: 0 0 8px; }
body.page-sun .dec p { font-size: 15px; line-height: 1.5; margin: 0 0 8px; max-width: 52ch; }
body.page-sun .shipped { margin-top: 30px; border-top: 1px solid var(--w-line); padding-top: 16px; }
body.page-sun .shipped h3 { font-size: 20px; margin: 0 0 8px; }
body.page-sun .shiplist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 20px; counter-reset: p; }
body.page-sun .shiplist li { font-size: 14px; padding: 6px 0; border-bottom: 1px dotted var(--w-line); display: flex; gap: 10px; align-items: baseline; counter-increment: p; }
body.page-sun .shiplist li::before { content: counter(p, decimal-leading-zero); font: 10px var(--meta); color: var(--w-muted); }
body.page-sun .shiplist li small { margin-left: auto; font: 10px var(--meta); letter-spacing: .05em; text-transform: uppercase; color: var(--w-muted); }

/* ---------- every page ---------- */
body.page-sun .pagegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.page-sun .pagegrid li { position: relative; }
body.page-sun .pagegrid .pv { aspect-ratio: 4 / 3; }

/* ---------- the system sheet (R131: paperwork as honest decoration) ---------- */
body.page-sun .sheet { border: 1px solid var(--w-ink); background: var(--w-panel); }
body.page-sun .sheet-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--w-ink); font: 11px var(--meta); letter-spacing: .07em; text-transform: uppercase; }
body.page-sun .sheet-head .stripes { flex: 1; height: 10px; background: repeating-linear-gradient(var(--w-ink) 0 1px, transparent 1px 3px); opacity: .6; }
body.page-sun .sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; padding: 18px 20px 22px; }
body.page-sun .sheet-body h3 { font-size: 18px; margin: 0 0 10px; }
body.page-sun .swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body.page-sun .swatches li { display: grid; grid-template-columns: 34px 92px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13.5px; border-bottom: 1px solid var(--w-line); padding-bottom: 6px; }
body.page-sun .swatches i { width: 34px; height: 24px; border: 1px solid var(--w-ink); display: block; }
body.page-sun .swatches b { font: 12px var(--meta); font-weight: 400; }
body.page-sun .spec td.ys { font-family: 'Young Serif', serif; font-size: 20px; }
body.page-sun .spec td.hg { font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; }
body.page-sun .spec td.jb { font-family: var(--meta); font-size: 11px; letter-spacing: .12em; color: var(--w-accent); }

/* ---------- apparel ---------- */
body.page-sun .seals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.page-sun .seals li { display: flex; }
body.page-sun .seals figure { margin: 0; border: 1px solid var(--w-ink); background: var(--w-cream); flex: 1; display: flex; flex-direction: column; }
body.page-sun .seals .ink { flex: 1; aspect-ratio: 3 / 4; display: grid; place-items: center; padding: 14%; }
body.page-sun .seals .ink img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
body.page-sun .seals figcaption { padding: 8px 10px; font: 10px/1.5 var(--meta); letter-spacing: .05em; text-transform: uppercase; color: #141311; border-top: 1px solid var(--w-ink); background: var(--w-cream); }
body.page-sun .inks { margin-top: 18px; border: 1px solid var(--w-ink); background: #0A0A09; color: #FFF7E6; }
body.page-sun .inks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,247,230,.25); }
body.page-sun .inks-head h3 { font-size: 18px; margin: 0; color: #FFF7E6; }
body.page-sun .inks-head .meta { color: rgba(242,234,218,.66); }
body.page-sun .inks ul { list-style: none; margin: 0; padding: 12px 16px 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.page-sun .inks li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.page-sun .inks img { width: 100%; height: auto; max-width: 180px; }
body.page-sun .inks span { font: 10px var(--meta); letter-spacing: .06em; text-transform: uppercase; color: rgba(242,234,218,.66); }
/* ---------- before and after: the same page, old against new (Wayback capture against the 2026-09-10 capture) ---------- */
body.page-sun .cmp { --split: 50%; margin-top: 4px; }
body.page-sun .cmp-picks { display: flex; align-items: flex-end; gap: 12px 28px; flex-wrap: wrap; margin-bottom: 14px; }
body.page-sun .cmp-picks .pick { display: grid; gap: 6px; }
body.page-sun .cmp-picks .lbl { font: 10px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--w-muted); }
body.page-sun .cmp-picks .seg { border-color: var(--w-ink); }
body.page-sun .cmp-picks .seg .wbtn { font-size: 11px; padding: 9px 12px; border-left-color: var(--w-ink); }
body.page-sun .cmp-picks .seg .wbtn[aria-pressed="true"] { background: var(--w-ink); color: var(--w-bg); }
body.page-sun.sun .cmp-picks .seg .wbtn[aria-pressed="true"] { background: var(--w-accent); color: var(--w-accent-ink); }
body.page-sun .cmp-picks .seg .wbtn[disabled] { opacity: .45; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
body.page-sun .cmp-picks .seg .wbtn[disabled]:hover { text-decoration: line-through; box-shadow: none; transform: none; }
body.page-sun .cmp-bar { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 12px; }
body.page-sun .cmp-bar .seg { border-color: var(--w-ink); }
body.page-sun .cmp-bar .seg .wbtn { font-size: 11px; padding: 9px 12px; border-left-color: var(--w-ink); }
body.page-sun .cmp-bar .seg .wbtn[aria-pressed="true"] { background: var(--w-ink); color: var(--w-bg); }
body.page-sun.sun .cmp-bar .seg .wbtn[aria-pressed="true"] { background: var(--w-accent); color: var(--w-accent-ink); }
body.page-sun .cmp-range { flex: 1 1 220px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; font: 10px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--w-muted); }
body.page-sun .cmp-range input { width: 100%; margin: 0; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize; }
body.page-sun .cmp-range input::-webkit-slider-runnable-track { height: 1px; background: var(--w-ink); }
body.page-sun .cmp-range input::-moz-range-track { height: 1px; background: var(--w-ink); }
body.page-sun .cmp-range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -8.5px; background: var(--w-bg); border: 1px solid var(--w-ink); box-shadow: inset 0 0 0 3px var(--w-bg), inset 0 0 0 6px var(--w-ink); }
body.page-sun .cmp-range input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 0; background: var(--w-bg); border: 1px solid var(--w-ink); box-shadow: inset 0 0 0 3px var(--w-bg), inset 0 0 0 6px var(--w-ink); }
body.page-sun .cmp-range input:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }
body.page-sun .cmp-dates { display: inline-flex; align-items: center; gap: 6px; min-height: 35px; font: 10px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--w-muted); }
body.page-sun .cmp-dates button { font: 11px var(--meta); letter-spacing: .06em; text-transform: uppercase; background: transparent; color: var(--w-ink); border: 1px dotted var(--w-ink); padding: 9px 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
body.page-sun .cmp-dates button[aria-pressed="true"] { border-style: solid; box-shadow: inset 0 -3px 0 var(--w-accent); }
body.page-sun .cmp-dates button:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }
body.page-sun .cmp-frame { margin: 0; border: 1px solid var(--w-ink); background: var(--w-media); }
body.page-sun .cmp[data-view="phone"] .cmp-frame { max-width: 420px; margin: 0 auto; }
body.page-sun .cmp[data-view="phone"] .cmp-cap { grid-template-columns: 1fr; }
body.page-sun .cmp[data-view="phone"] .cmp-cap .r { text-align: left; justify-self: start; }
body.page-sun .cmp[data-view="phone"] .cmp-screen { height: min(760px, 74vh); }
body.page-sun .cmp-frame .chrome { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--w-ink); background: var(--w-panel); color: var(--w-ink); font: 10px var(--meta); letter-spacing: .06em; text-transform: uppercase; }
body.page-sun .cmp-frame .chrome .url { flex: 1; border: 1px solid var(--w-line); padding: 4px 8px; text-transform: none; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-sun .cmp-frame .chrome .dots { display: inline-flex; gap: 4px; }
body.page-sun .cmp-frame .chrome .dots i { width: 8px; height: 8px; border: 1px solid currentColor; display: block; opacity: .6; }
body.page-sun .cmp-box { position: relative; }
body.page-sun .cmp-screen { position: relative; height: min(680px, 66vh); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--w-accent) transparent; }
body.page-sun .cmp-screen:focus-visible { outline: 2px solid var(--w-accent); outline-offset: -2px; }
body.page-sun .cmp-stack { display: grid; }
body.page-sun .cmp-layer { grid-area: 1 / 1; align-self: stretch; min-width: 0; }
body.page-sun .cmp-layer img { display: block; width: 100%; height: auto; }
body.page-sun .cmp-layer.before { background: #fff; }
body.page-sun .cmp-layer.after { background: #0A0A09; clip-path: inset(0 0 0 var(--split)); }
body.page-sun .cmp.is-dragging .cmp-layer.after, body.page-sun .cmp.is-dragging .cmp-divider { transition: none; }
body.page-sun .cmp-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 0; pointer-events: none; z-index: 3; }
body.page-sun .cmp-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--w-bg); box-shadow: 0 0 0 1px var(--w-ink); }
body.page-sun.sun .cmp-divider::before { background: var(--w-accent); box-shadow: none; }
body.page-sun .cmp-handle { position: absolute; top: 50%; left: -22px; width: 44px; height: 44px; transform: translateY(-50%); display: grid; place-items: center; pointer-events: auto; cursor: ew-resize; touch-action: none; background: var(--w-bg); border: 1px solid var(--w-ink); color: var(--w-ink); }
body.page-sun.sun .cmp-handle { background: var(--w-accent); border-color: var(--w-accent); color: var(--w-accent-ink); }
body.page-sun .cmp-handle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.page-sun .cmp-tags { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; z-index: 2; }
body.page-sun .cmp-tags span { font: 10px/1.35 var(--meta); letter-spacing: .07em; text-transform: uppercase; padding: 5px 7px; background: var(--w-bg); color: var(--w-ink); border: 1px solid var(--w-ink); max-width: 48%; }
body.page-sun .cmp-tags .after { text-align: right; }
body.page-sun .cmp-tags .after { margin-left: auto; }
body.page-sun .cmp-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px; border-top: 1px solid var(--w-ink); background: var(--w-panel); font: 10px/1.5 var(--meta); letter-spacing: .05em; text-transform: uppercase; color: var(--w-muted); }
body.page-sun .cmp-cap b { display: block; color: var(--w-ink); font-weight: 600; margin-bottom: 2px; }
body.page-sun .cmp-cap > div { max-width: 62ch; }
body.page-sun .cmp-cap .r { justify-self: end; }
body.page-sun .cmp-cap .r { text-align: right; }
body.page-sun .cmp-cap a { color: inherit; }
body.page-sun .cmp-state { font: 10px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--w-muted); font-variant-numeric: tabular-nums; min-width: 22ch; }
body.page-sun .cmp-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0; align-items: start; }
body.page-sun .need-line { margin: 10px 0 0; border: 1px dotted currentColor; padding: 8px 10px; font: 10px/1.6 var(--meta); letter-spacing: .06em; text-transform: uppercase; color: var(--w-ink); display: inline-block; }
body.page-sun .cmp-figs .pv { aspect-ratio: 4 / 3; }
body.page-sun .cmp-figs .pv.tall { aspect-ratio: 3 / 4; }
body.page-sun .changes { max-width: 62ch; }
body.page-sun .changes h3 { font-size: 22px; margin: 0 0 8px; }
body.page-sun .changes ol { margin: 0; padding: 0; list-style: none; counter-reset: c; }
body.page-sun .changes li { counter-increment: c; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px dotted var(--w-line); font-size: 15px; line-height: 1.45; }
body.page-sun .changes li::before { content: counter(c, decimal-leading-zero); font: 11px var(--meta); color: var(--w-accent); padding-top: 4px; }
body.page-sun .changes li b { font-weight: 600; }
body.page-sun .changes li small { display: block; font: 10px/1.5 var(--meta); letter-spacing: .05em; text-transform: uppercase; color: var(--w-muted); margin-top: 3px; }
body.page-sun .cmp-after { margin-top: 26px; }
@media (prefers-reduced-motion: no-preference) { body.page-sun .cmp-layer.after { transition: clip-path 360ms cubic-bezier(.2,.7,.2,1); } body.page-sun .cmp-divider { transition: left 360ms cubic-bezier(.2,.7,.2,1); } }

@media (max-width: 1100px) {
  body.page-sun .frames { grid-template-columns: minmax(0, 1fr); }
  body.page-sun #dev-phone { max-width: 320px; }
  body.page-sun .dec-grid { grid-template-columns: 1fr; }
  body.page-sun .shiplist { grid-template-columns: 1fr 1fr; }
  body.page-sun .seals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  body.page-sun.sun .p-top h1 { font-size: clamp(30px, 9.4vw, 40px); }
  body.page-sun .stagegrid { grid-template-columns: 1fr; }
  body.page-sun .pagelist { flex-direction: row; overflow-x: auto; scrollbar-width: thin; }
  body.page-sun .pagelist .grp { display: none; }
  body.page-sun .pagelist button { flex: 0 0 auto; grid-template-columns: 1fr; border-bottom: 0; border-right: 1px solid var(--w-line); padding: 8px 10px; }
  body.page-sun .pagelist button b { display: none; }
  body.page-sun .device.desktop .screen, body.page-sun .device.phone .screen { height: 56vh; }
  body.page-sun .tasks { grid-template-columns: 1fr; }
  body.page-sun .shiplist { grid-template-columns: 1fr; }
  body.page-sun .pagegrid { grid-template-columns: 1fr 1fr; }
  body.page-sun .sheet-body { grid-template-columns: 1fr; }
  body.page-sun .seals { grid-template-columns: 1fr 1fr; }
  body.page-sun .inks ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-sun .cmp-screen { height: 60vh; }
  body.page-sun .cmp-range { flex-basis: 100%; }
  body.page-sun .cmp-state { min-width: 0; flex: 1; text-align: right; }
  body.page-sun .cmp-picks { gap: 10px 18px; }
  body.page-sun .cmp-figs { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.page-sun .cmp-tags span { max-width: 46%; font-size: 9px; }
  body.page-sun .cmp-cap { grid-template-columns: 1fr; }
  body.page-sun .cmp-cap .r { text-align: left; justify-self: start; }
  body.page-sun .three div { grid-template-columns: 80px minmax(0, 1fr); }
}