/* Async Art viewer (archive site + Pinwatch). Light, readable at 500 px and up; no web fonts; reduced motion respected. */
.av{margin:6px 0 2px;font-size:13px;line-height:1.45}
.av-still{display:block;max-width:100%;height:auto;border-radius:4px;background:#f2f2f2}
.av-nostrip{padding:18px 10px;color:#666;font-size:12px;text-align:center}
.av-bar{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center;margin:6px 0 4px}
.av-bar button{font:inherit;font-size:12.5px;line-height:18px;padding:2px 10px;border:1px solid #c3c8ce;border-radius:12px;background:#fff;color:#1f2328;cursor:pointer}
.av-bar button:hover{border-color:#0645ad}
.av-bar button:focus-visible,.av-ctl button:focus-visible,.av-layers button:focus-visible{outline:2px solid #0645ad;outline-offset:1px}
.av-bar button[aria-pressed="true"]{background:#1f2933;border-color:#1f2933;color:#fff}
/* the Layers toggle (a panel that opens, not a mode): open is an outline and a caret, never the pressed modes' dark fill (sims-11, 26 Sep) */
.av-bar button[aria-expanded]::after{content:" \25BE"}
.av-bar button[aria-expanded="true"]{border-color:#1f2933;box-shadow:inset 0 0 0 1px #1f2933;background:#f6f8fa}
.av-bar button[aria-expanded="true"]::after{content:" \25B4"}
.av-bar .av-more{font-size:12.5px;margin-left:3px}
.av-note{color:#8a5a00;font-size:12.5px}
.av-body{margin:4px 0}
.av-stage{position:relative;width:100%;aspect-ratio:var(--av-ar,1);max-height:80vh;background:#f2f2f2;border-radius:4px;overflow:hidden}
@supports not (aspect-ratio:1){.av-stage{max-height:none}.av-stage::before{content:"";display:block;padding-top:var(--av-ratio,100%)}}
.av-ph{position:absolute;background-repeat:no-repeat}
.av-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s ease}
.av-img.on{opacity:1}
.av-msg{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);font-size:12px;color:#fff;background:rgba(31,41,51,.78);border-radius:4px;padding:1px 7px}
.av-msg:empty{display:none}
.av-cap{margin:5px 0 2px;color:#444}.av-cap b{color:#1f2328}
/* A2 (24 Sep): the thin bar under the picture while a work's states load ("Loading states 7 of 24"); gone once all have loaded */
.av-prog{display:flex;align-items:center;gap:8px;margin:3px 0 0;font-size:11.5px;line-height:1.3;color:#57606a}
.av-prog[hidden],.av-src[hidden]{display:none}
.av-prog-bar{flex:1 1 auto;min-width:60px;height:3px;background:#e5e7ea;border-radius:2px;overflow:hidden}
.av-prog-bar i{display:block;height:100%;background:#0645ad;transition:width .3s ease}
.av-prog-t{white-space:nowrap;font-variant-numeric:tabular-nums}
.av-prog[data-av-prog=done] .av-prog-t{white-space:normal;color:#8a5a00}
/* A5: what the picture is (the site's display copy, or the original) and the original's link */
.av-src{margin:2px 0 0;font-size:11.5px;line-height:1.35;color:#57606a}
.av-smsg:empty{display:none}
/* B (24 Sep): a lever work's Current state line under its still, and the Shuffle: the caption on the picture, the option each layer
   shows, the number of possible combinations; a work not shuffled shows its reason */
.av-cur{margin:3px 0 0;font-size:12px;line-height:1.4;color:#444}.av-cur[hidden]{display:none}
/* open item 8, decided 26 Sep (option B): the phase strip / Current state picture shows only where the script leaves it shown - it
   gives way whenever the script hides it (Live, Slideshow, Shuffle), on async.html's cards too (.av-still's display:block would
   otherwise override [hidden]; until 26 Sep only Shuffle had this rule) */
.av-still[hidden]{display:none}
.av-shcap[hidden],.av-shl[hidden]{display:none}
.av-shcap{display:block;color:#8a3a00}
.av-shl{margin:3px 0 3px 20px;padding:0;columns:2 180px;column-gap:18px}
.av-shl li{break-inside:avoid}.av-shl li.fixed{color:#666}
.av-shn{color:#444;font-variant-numeric:tabular-nums}
.av-shoff{margin:4px 0}
.av-ctl button:disabled{opacity:.5;cursor:default}
.av-ctl{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:4px 0}
.av-ctl button,.av-layers button{font:inherit;font-size:12.5px;padding:2px 10px;border:1px solid #c3c8ce;border-radius:5px;background:#fff;cursor:pointer}
.av-ctl select{font:inherit;font-size:12.5px}
.av-ctl input[type=range]{flex:1 1 150px;min-width:120px;max-width:340px}
.av-hour{font-variant-numeric:tabular-nums;min-width:3.2em}
.av-opt{white-space:nowrap}
.av-layers{margin:6px 0;padding:6px 10px;border:1px solid #e5e5e5;border-radius:6px;background:#fafbfc}
.av-layers .av-context{margin:2px 0 6px}
.av-ll{list-style:none;margin:0;padding:0}
.av-ll>li{margin:4px 0 8px}
.av-ll ol{margin:2px 0 2px 20px;padding:0;columns:2 150px;column-gap:18px}
.av-ll ol li{break-inside:avoid;color:#555}
.av-ll ol li.on{color:#1f2328;font-weight:600;background:#e8f0fe;border-radius:3px}
.av-lever{margin:2px 0}
.av-try{white-space:nowrap}
.av-prev{color:#b3261e;font-weight:600}
.av-lvmsg{margin-left:6px}
.av-files ul,.avf{padding-left:20px}.av-files li,.avf li{margin:2px 0;word-break:break-word}
.s .av-note{font-size:inherit}
/* Frame: the whole screen, black, the image contained; no controls */
.av-frame{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483000;background:#000;cursor:none}
.av-frame .av-stage{position:absolute;top:0;left:0;right:0;bottom:0;width:auto;aspect-ratio:auto;max-height:none;border-radius:0;background-color:#000}
.av-frame .av-stage::before{display:none}
.av-frame .av-msg{left:12px;bottom:26px}
.av-frame .av-fprog{position:absolute;left:12px;right:12px;bottom:6px;margin:0;color:#c9d1d9}
.av-frame .av-fprog .av-prog-bar{background:rgba(255,255,255,.2)}.av-frame .av-fprog .av-prog-bar i{background:#9fb3c8}
html.av-framed,html.av-framed body{overflow:hidden}
/* the Artist archive section */
.aa{margin-top:28px;border-top:1px solid #e5e5e5;padding-top:6px}
.aa h3{font-size:16px;margin:18px 0 8px}
.aw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.aw{border:1px solid #e5e5e5;border-radius:8px;padding:10px;background:#fff;min-width:0}
.aw h3{font-size:15px;margin:2px 0 2px}
.aw .k{font-size:12px;color:#444;margin:2px 0}
.av-detail{max-width:1100px}
/* async.html - Async Art, living works: the jump menu, the intro, a group per artist */
.lw-jump{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:4px 0 12px;padding:8px 10px;border:1px solid #e5e5e5;border-radius:8px;background:#fafbfc}
.lw-jump a{padding:3px 11px;border:1px solid #c3c8ce;border-radius:14px;background:#fff;white-space:nowrap}
.lw-jump a:hover{border-color:#0645ad;text-decoration:none}
.lw-intro{max-width:780px}
.lw-intro ul{padding-left:20px;margin:4px 0 10px}
.lw-intro li{margin:3px 0}
.lw-how{margin:8px 0 4px;padding:6px 10px;border:1px solid #e5e5e5;border-radius:8px;background:#fafbfc}
.lw-how>summary{cursor:pointer;font-weight:600;color:#0645ad}
.lw-how[open]>summary{margin-bottom:6px}
.aa.lw{margin-top:18px}
.aa.lw>h2,.aa.lw>.lw-grp>h2{font-size:20px;margin:22px 0 10px;scroll-margin-top:8px}
.lw-top{font-size:13px;margin:10px 0 0}
@media (max-width:640px){.aw-grid{grid-template-columns:1fr}.av-ll ol,.av-shl{columns:1}}
@media (prefers-reduced-motion:reduce){.av-img,.av-prog-bar i{transition:none}}
/* async.html's first choice (mobile note of 26 Sep): the creator cards (name, number of works, one small preview), then one creator's
   works at a time, with filters by kind. html.lw-js (the page's first line, where the viewer's script can run) hides the groups until
   one is chosen: async_viewer.js marks the chosen group lw-on; a group whose heading or card is the address's anchor (:target: a
   creator's #hulki-okan-tabak, a work's #w<id>) shows by the style alone, before the script has run. Two rules, not one list: a
   browser without :has() drops only its own rule. Without the script the page is the one long page it was */
.lw-pick{margin:4px 0 14px}
.lw-ask{margin:0 0 6px;font-size:13px;color:#444}
.lw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;max-width:780px}
.lw-card{display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;color:#1f2328;text-decoration:none}
.lw-card:hover{border-color:#0645ad;text-decoration:none}
.lw-card:focus-visible{outline:2px solid #0645ad;outline-offset:2px}
.lw-card[aria-current]{border-color:#1f2933;box-shadow:inset 0 0 0 1px #1f2933}
.lw-prev{display:block;width:100%;height:auto;aspect-ratio:2;object-fit:cover;margin:0 0 5px;border-radius:4px;background:#f2f2f2}
.lw-name{font-weight:600;color:#0645ad;overflow-wrap:anywhere}
.lw-n{font-size:12px;color:#57606a}
.lw-kinds{display:flex;flex-wrap:wrap;gap:6px 8px;margin:-2px 0 12px}
.lw-kinds[hidden]{display:none}
.lw-kinds button{font:inherit;font-size:12.5px;line-height:18px;padding:3px 11px;border:1px solid #c3c8ce;border-radius:14px;background:#fff;color:#1f2328;cursor:pointer}
.lw-kinds button:hover{border-color:#0645ad}
.lw-kinds button[aria-pressed="true"]{background:#1f2933;border-color:#1f2933;color:#fff}
.lw-kinds button[aria-pressed="true"] .s{color:#d0d7de}
.lw-kinds button:focus-visible{outline:2px solid #0645ad;outline-offset:1px}
.aw.lw-off{display:none}
html.lw-js .lw-grp{display:none}
html.lw-js .lw-grp.lw-on{display:block}
html.lw-js .lw-grp:has(:target){display:block}
@media (max-width:640px){.lw-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.lw-card{padding:5px}.lw-name{font-size:13px;line-height:1.25}}
/* tap to advance (mobile note of 26 Sep): the stage takes a click - a tap, or Enter / Space once focused - for the next phase (Live,
   Slideshow), another combination (Shuffle) or the next layer (the layered view); a one-time hint under the picture says so. No
   touch handler: touch-action:manipulation keeps scrolling and pinch-zoom (only the double-tap zoom goes, and its delay) */
.av-stage.av-tap{cursor:pointer;touch-action:manipulation}
.av-stage.av-tap:focus-visible,.av-still[tabindex]:focus-visible{outline:2px solid #0645ad;outline-offset:2px}
.av-hint,.av-curhint,.av-lcap{margin:3px 0 0;font-size:12px;line-height:1.4;color:#57606a}
.av-hint[hidden],.av-curhint[hidden],.av-lcap[hidden]{display:none}
.av-hint:empty,.av-curhint:empty,.av-lcap:empty{margin:0}
/* Shuffle and the layered view at most 880 px wide, as a lever work's Current state picture (a large screen; the stage no wider
   than the 80vh cap allows at its ratio, so a tall work gets no grey bars). The embed view's own caps (below) are more specific */
.av-stage.av-w880{max-width:min(880px,calc(80vh * var(--av-ar,1)))}
.av[data-av-lever="1"]>.av-still{max-width:min(100%,880px)}
/* 26 Sep: the Current state picture takes the stage's cap, min(880px, 80vh x its ratio) - max-height 80vh on the image (its ratio kept,
   width:auto) - so a portrait (#1951) is the same size in Current state, Shuffle and Layers and fits one screen on desktop. Full page
   only: the embed view keeps its own fixed 880 px cap (no vh inside a frame whose height follows the page). */
html:not(.av-embed) .av[data-av-lever="1"]>.av-still{max-height:80vh;width:auto}
/* Shuffle while its layer images load: the Current state picture in the stage (its placeholder), under the 'loading' note */
.av-ph.av-cover{background-size:contain;background-position:center}
/* a work's page (26 Sep): the full CIDs of its files break anywhere inside the list (sims-21); the long list closed under a one-line
   summary, below the artist's words (sims-15); '↑ creators' beside each creator's heading on async.html (sims-17) */
.avf code{word-break:break-all}
.avf-d{margin:4px 0 10px}.avf-d>summary{cursor:pointer;color:#0645ad;font-size:13px}.avf-d[open]>summary{margin-bottom:4px}
.lw-up{font-size:13px;margin:-6px 0 10px}
/* Embed view (25 Sep 2026): a work's page opened by a gallery in an iframe as async/<id>.html?embed=1. async_viewer.js's first block
   marks such a page html.av-embed (a work's own page only), and every rule here is keyed on that class: a page without embed=1 is
   exactly as before. Hidden: the site's tabs, the way back (the page's first line), the files list and everything after it (the
   notes, the links line, the footer), and any other line after the viewer that is not one of its captions. Kept: the title and the
   by-line (compact), the artist's line on how the work changes, the viewer (its buttons, the picture or stage) and every line it shows.
   The stage fits the frame's width and takes no height from the frame: no vh here, because the host sets the frame's height from the
   page's own; a stable scrollbar gutter, so a scrollbar that comes and goes cannot change the width and the height with it.
   Instead of the full page's cap (a share of the window's height), a fixed one: the viewer's stage and its Current state picture
   are at most 880 px high, each by its width capped at 880 px times its own ratio (the stage's ratio is the viewer's; the picture's
   is set by async_viewer.js's first block from the picture's width and height), so the ratio stays exact, the picture's box has its
   size before the image arrives, and the two show a work at about the same size. Frame (the viewer's overlay, added at the end of
   the body) is never hidden here and keeps its own size (the cap is scoped to the viewer, .av-detail). */
html.av-embed{scrollbar-gutter:stable}
html.av-embed,html.av-embed body{background:#fff}
html.av-embed body{max-width:none;padding:8px 10px 10px}
html.av-embed nav.tabs,html.av-embed body>p:first-of-type,html.av-embed body>p:last-of-type,
html.av-embed body>.av~h2,html.av-embed body>.av~h2~*:not(.av-frame),html.av-embed body>.av~p:not(.s){display:none}
html.av-embed h1{font-size:18px;line-height:1.3;margin:0 0 2px;overflow-wrap:anywhere}
html.av-embed h1+p.s{font-size:12px;margin:0 0 4px}
html.av-embed h1+p.s+p:not(.s){font-size:12.5px;margin:0 0 4px;color:#444}
html.av-embed .av-detail{max-width:none}
html.av-embed .av-stage{max-height:none}
html.av-embed .av-detail .av-stage{max-width:calc(880px * var(--av-ar,1))}
html.av-embed .av-detail .av-still{max-width:min(100%,calc(880px * var(--av-ar,1000)))}
html.av-embed .av-try,html.av-embed .av-opt{white-space:normal}
html.av-embed select{max-width:100%}
html.av-embed .av-detail~p.s{margin:4px 0}
html.av-embed .av-embed-open{margin:8px 0 0;font-size:12.5px}