.status{position:fixed;inset:auto 0 0;z-index:var(--z-status);height:calc(var(--status-h) + env(safe-area-inset-bottom));padding:0 clamp(1.25rem,5vw,4.5rem) env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);background:linear-gradient(color-mix(in srgb,var(--paper),transparent 100%),var(--paper) 45%);font:450 var(--t-label) / 1 var(--sans);color:var(--lead);font-variant-numeric:tabular-nums;pointer-events:none}.status>*{pointer-events:auto}.status__info{display:flex;align-items:center;gap:var(--s-5);min-width:0;white-space:nowrap}.status__file{color:var(--ink);font-size:1em;overflow:hidden;text-overflow:ellipsis}.status__revert{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pencil);text-underline-offset:.2em}.switch{display:flex;border:0;padding:3px;border-radius:var(--r-pill);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--rule)}.switch__option{position:relative;cursor:pointer}.switch__option input{position:absolute;inset:0;opacity:0;cursor:pointer}.switch__option span{display:block;padding:.5rem .85rem;border-radius:var(--r-pill);color:var(--lead);transition:background-color var(--dur-out) var(--ease-out),color var(--dur-out) var(--ease-out),transform var(--dur-in) var(--ease-out)}.switch__option input:checked+span{background:var(--ink);color:var(--sheet);transition-duration:var(--dur-in)}.switch__option input:focus-visible+span{outline:2px solid var(--pencil);outline-offset:2px}@media(hover:hover){.switch__option:hover input:not(:checked)+span{color:var(--ink)}}.switch__option:active span{transform:scale(.96)}@media(max-width:68rem){.switch__option[data-view=split]{display:none}}@media(max-width:40rem){.status__words{display:none}.status__info{gap:var(--s-4)}.switch__option span{padding:.7rem 1rem}}.source-access{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5);padding:var(--s-5) clamp(1.25rem,5vw,4.5rem);font:450 var(--t-ui) / 1.5 var(--sans)}.source-access__button{min-height:var(--target);text-decoration:underline;text-underline-offset:.25em}.source-access__button:active{transform:translateY(1px)}.source-access__button:hover{color:var(--accent)}.frame__main{padding-bottom:calc(var(--status-h) + var(--s-6))}.frame[data-view=reader] .frame__main{padding-bottom:0}.frame__reader{container:reader / inline-size;min-width:0}.frame[data-view=split] .frame__main{display:grid;grid-template-columns:minmax(0,7fr) minmax(24rem,5fr);align-items:start}.frame[data-view=split] .frame__code{position:sticky;top:var(--bar-h);height:calc(100dvh - var(--bar-h) - var(--status-h));overflow-y:auto;overscroll-behavior:contain}::view-transition-old(root){animation:none}::view-transition-new(root){animation:draw-in var(--dur-out) var(--ease-out) both}@keyframes draw-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.shot{display:grid;gap:var(--s-3)}.shot__media{width:100%;height:auto}.shot[data-frame=phone]{max-width:var(--phone-w)!important}.shot[data-frame=phone] .shot__media{border-radius:var(--r-window)}.shot[data-frame=window] .shot__media{border-radius:var(--r-window);box-shadow:var(--shadow-window);background:var(--ink)}.shot[data-frame=cutout] .shot__media{filter:var(--shadow-cutout)}.shot__caption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-1) var(--s-5)}.shot__caption>span{max-width:44em}.shot__toggle{min-height:var(--target);padding:var(--s-1) 0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.25em}.shot__toggle:active{transform:translateY(1px)}video.shot__media{cursor:pointer}.shot__zoom{position:relative;display:block;width:100%;height:100%;cursor:zoom-in}.shot__zoom-hint{position:absolute;bottom:var(--s-2);right:var(--s-2);padding:var(--s-2) var(--s-3);background:var(--sheet);color:var(--ink);border:1px solid var(--rule);font:500 var(--t-small) / 1 var(--sans)}.shot__zoom:active{transform:scale(.99)}.shot__lightbox{position:fixed;inset:0;margin:auto;width:96vw;max-width:none;height:96dvh;max-height:none;padding:var(--s-5);border:0;background:var(--sheet);color:var(--ink)}.shot__lightbox[open]{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}.shot__lightbox::backdrop{background:#141210cc}.shot__close{align-self:flex-end;min-height:var(--target);padding-inline:var(--s-4);border:1px solid var(--rule);flex-shrink:0}.shot__close:active{transform:translateY(1px)}.shot__full{display:block;width:100%;height:0;min-height:0;flex:1;-o-object-fit:contain;object-fit:contain}.shot__lightbox p{font:450 var(--t-small) / 1.4 var(--sans);text-align:center}.prose>*{max-width:var(--measure)}.prose>.table-scroll,.prose>pre,.prose>.prose__shot{max-width:62rem;margin-block:2em}.prose>*+*{margin-top:1.1em}.prose h2{font-family:var(--serif-display);font-size:var(--t-h3);line-height:var(--lh-heading);letter-spacing:var(--track-heading);margin-top:2.2em}.prose h3,.prose h4{font-family:var(--serif);font-size:1.2em;font-weight:600;line-height:1.25;margin-top:1.8em}.prose a{background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--rule),var(--rule))}.prose ul,.prose ol{padding-left:1.3em}.prose ul{list-style:"–  " outside}.prose ol{list-style:decimal outside;font-variant-numeric:tabular-nums}.prose li+li{margin-top:.35em}.prose li::marker{color:var(--lead)}.prose blockquote{padding-left:var(--s-5);border-left:2px solid var(--ink);font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:var(--track-lead)}.prose pre{max-width:none;padding:var(--s-5);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--rule-soft);overflow-x:auto;font-size:.82em;line-height:1.6;-moz-tab-size:2;-o-tab-size:2;tab-size:2}.prose pre .code{font-size:1em}.prose :not(pre)>.code{padding:.08em .32em;background:var(--wash)}.table-scroll{max-width:100%;overflow-x:auto}.prose table{width:100%;font-size:.92em}.prose th,.prose td{padding:var(--s-3) var(--s-5) var(--s-3) 0;border-top:1px solid var(--rule);text-align:left;vertical-align:top}.prose th{font:450 var(--t-label) / 1.35 var(--sans);color:var(--lead);border-top:0}
