/* The demo page: a working miniature of the app. It borrows the app's shapes (src/web/css/app.css) and the site's tokens.
   The rule holds here too: no picture is cropped. The only cut image is a blurred backdrop behind a whole picture. */
.demo-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px clamp(24px, 5vw, 72px); align-items: end; padding-block: clamp(28px, 4.5vw, 64px) clamp(20px, 3vw, 36px); }
.demo-head .h1 { margin-top: 14px; font-size: clamp(2.3rem, 5.4vw, 4.4rem); }
@media (max-width: 860px) { .demo-head { grid-template-columns: 1fr; } }

.demo { position: relative; border-block: 1px solid var(--line); background: var(--surface); min-height: 70vh; }
.demo-note { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 9px var(--gut); background: var(--blue-soft); border-bottom: 1px solid var(--line); font-size: 14.5px; }
.demo-note > .ic { color: var(--blue-text); width: 18px; height: 18px; }
.demo-note b { font-weight: 650; }
.demo-note .btn .ic { width: 15px; height: 15px; }
.demo-bar { position: sticky; top: var(--top-h); z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px var(--gut); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.seg { display: flex; background: var(--field); border-radius: 10px; padding: 3px; flex: none; }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 550; font-size: 14.5px; }
.seg button[aria-selected=true] { background: var(--raised); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.lens { position: relative; flex: 1 1 240px; max-width: 420px; display: block; }
.lens .ic { position: absolute; left: 11px; top: 10px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.lens input { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); padding: 0 12px 0 36px; font-size: 15px; color: var(--text); }
.lens input:focus-visible { outline: 2px solid var(--amber); outline-offset: 0; border-radius: 10px; }
.demo-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-filters .chip { height: 32px; cursor: pointer; background: var(--raised); } .demo-filters .chip[aria-pressed=true] { background: var(--amber-soft); border-color: var(--amber); } .demo-filters .chip[aria-pressed=true] .ic { fill: var(--amber); color: var(--amber-text); }
.chip.sel { -webkit-appearance: none; appearance: none; padding-right: 26px; max-width: 190px; text-overflow: ellipsis; background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4'%3E%3Cpath d='M6 9.500l6 6 6-6'/%3E%3C/svg%3E") right 8px center / 13px no-repeat; }
.chip.sel.on { background-color: var(--amber-soft); border-color: var(--amber); }
.demo-bar .rowsize { font-size: 13.5px; color: var(--muted); display: inline-flex; gap: 10px; align-items: center; margin-left: 6px; } .demo-bar .rowsize .sl { width: 110px; }
.demo-view { padding: 4px var(--gut) 56px; min-height: 50vh; }
.demo-count { font-size: 14px; color: var(--muted); padding: 12px 0 0; }
.demo-empty { padding: 70px 20px; text-align: center; color: var(--muted); display: grid; gap: 14px; justify-items: center; }
@media (max-width: 760px) { .demo-bar .rowsize { display: none; } .demo-bar { gap: 8px; } .lens { order: 5; flex-basis: 100%; max-width: none; } .demo-filters { order: 6; } .demo-bar .btn span.wide { display: none; } }

/* the grid: rows of one height, every tile sized from its picture */
.dgrid { position: relative; }
.dhead { position: absolute; left: 0; right: 0; height: 52px; display: flex; align-items: flex-end; gap: 12px; padding-bottom: 9px; }
.dhead h2 { font: 650 20px/1.2 var(--sans); letter-spacing: -.015em; }
.dhead span { color: var(--muted); font-size: 13.5px; padding-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dt { position: absolute; padding: 0; border: 0; background: var(--field); overflow: hidden; cursor: zoom-in; display: block; transition: left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1), height .5s cubic-bezier(.2, .8, .2, 1); }
.dgrid.still .dt { transition: none; }
.dt img { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .45s; }
.dt img.in { opacity: 1; }
.dt:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; border-radius: 0; z-index: 1; }
.dt .dcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 9px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; font: 15px var(--serif); text-align: left; opacity: 0; transition: opacity .15s; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt:hover .dcap, .dt:focus-visible .dcap { opacity: 1; }
.dt .bdgs { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; pointer-events: none; }
.bdg { display: inline-flex; align-items: center; gap: 3px; background: rgba(0, 0, 0, .58); color: #fff; font: 600 11.5px/1 var(--sans); padding: 4px 6px; border-radius: 5px; }
.bdg .ic { width: 12px; height: 12px; } .bdg.fav { color: var(--amber); } .bdg.fav .ic { fill: currentColor; } .bdg.yours { background: var(--amber); color: #1f1600; }
.dt.flash { animation: flash 1.6s ease-out; z-index: 2; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px var(--amber); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* dropping and the queue */
.dropveil { position: absolute; inset: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 3px dashed var(--amber); display: grid; place-items: center; pointer-events: none; }
.dropveil > div { display: grid; gap: 6px; justify-items: center; font-size: 17px; position: sticky; top: 40vh; } .dropveil .ic { width: 40px; height: 40px; color: var(--amber-text); } .dropveil b { font: 400 2rem var(--serif); } .dropveil span { color: var(--muted); }
.queue { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: 46vh; overflow-y: auto; background: var(--raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 10px; }
.queue h2 { font: 650 15px var(--sans); letter-spacing: 0; display: flex; justify-content: space-between; align-items: center; }
.qrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13.5px; }
.qrow .qn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; } .qrow .qs { color: var(--muted); } .qrow.bad .qs { color: var(--red-text); grid-column: 1 / -1; } .qrow.done .qs { color: var(--green-text); }
.qbar { grid-column: 1 / -1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; } .qbar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .25s; } .qrow.done .qbar i { background: var(--green); } .qrow.bad .qbar { display: none; }

/* viewer and editor: full-window layers, dark like the app's */
.layer { position: fixed; inset: 0; z-index: 80; background: #131415; color: #eceae6; --bg: #1a1b1d; --surface: #212325; --raised: #2b2d30; --field: #141516; --line: #383b3f; --text: #eceae6; --muted: #a3a6ac; --amber-text: #ffc457; --amber-soft: rgba(255, 178, 36, .16); --blue-text: #94b3ff; --blue-soft: rgba(77, 125, 255, .2); display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); animation: fade .15s; color-scheme: dark; }
.layer .iconbtn { color: #eceae6; } .layer .iconbtn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 56px 18px 18px; overflow: hidden; }
.stage-img { position: relative; max-width: 100%; max-height: 100%; display: grid; cursor: crosshair; touch-action: none; }
.stage-img img, .stage-img canvas { display: block; max-width: 100%; max-height: calc(100dvh - 74px); width: auto; height: auto; }
.stage-tools { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; gap: 4px; align-items: center; z-index: 3; }
.stage-tools .hint { color: #a3a6ac; font-size: 13.5px; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 64px; border-radius: 12px; background: rgba(0, 0, 0, .35) !important; } .navbtn.prev { left: 8px; } .navbtn.next { right: 8px; }
.side { border-left: 1px solid #383b3f; background: #1a1b1d; overflow-y: auto; padding: 18px 18px 28px; display: grid; gap: 14px; align-content: start; min-height: 0; }
.side h2 { font: 400 1.7rem/1.1 var(--serif); letter-spacing: -.02em; }
.side .desc { font: 400 1.06rem/1.45 var(--serif); }
.side .said { font: 400 15.5px/1.4 var(--serif); color: var(--blue-text); border-left: 2px solid var(--blue); padding-left: 10px; }
.side dl { display: grid; grid-template-columns: 22px 1fr; gap: 8px 10px; margin: 0; font-size: 14.5px; align-items: start; } .side dt .ic { width: 17px; height: 17px; color: var(--muted); margin-top: 2px; } .side dd { margin: 0; }
.side .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.side .lbl { font: 600 12.5px var(--sans); color: var(--muted); margin-bottom: -6px; }
.side .btn { background: #2b2d30; border-color: #44474c; color: #eceae6; } .side .btn.primary { background: var(--amber); border-color: var(--amber); color: #1f1600; }
.side .btn.on .ic { fill: var(--amber); color: var(--amber); }
.side .origin { font-size: 13.5px; color: var(--muted); border: 1px solid #383b3f; border-radius: 10px; padding: 10px 12px; }
.layer .loupe { z-index: 2; }
@media (max-width: 860px) { .layer { grid-template-columns: 1fr; grid-template-rows: minmax(0, 54dvh) minmax(0, 1fr); } .side { border-left: 0; border-top: 1px solid #383b3f; } .stage-img img, .stage-img canvas { max-height: calc(54dvh - 74px); } .navbtn { height: 48px; } .stage-tools .hint { display: none; } }

/* editor */
.ed-side { gap: 16px; }
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lookbtn { padding: 0; border: 1px solid #383b3f; background: #141516; border-radius: 8px; overflow: hidden; color: #eceae6; display: grid; text-align: left; }
.lookbtn canvas { display: block; width: 100%; height: auto; background: #141516; }
.lookbtn span { font-size: 12px; padding: 4px 6px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lookbtn[aria-pressed=true] { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.lookbtn:hover { border-color: #6b6f76; }
.ed-sl { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; font-size: 13.5px; } .ed-sl output { color: var(--muted); font-variant-numeric: tabular-nums; } .ed-sl .sl { grid-column: 1 / -1; }
.ed-side select.inp { min-height: 38px; background: #141516; border-color: #383b3f; }
.ed-foot { position: sticky; bottom: -28px; background: #1a1b1d; padding: 12px 0 0; margin-bottom: -10px; display: grid; gap: 8px; border-top: 1px solid #383b3f; }
.ed-note { font-size: 13px; color: var(--muted); }

/* stories */
.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px 24px; padding-top: 22px; }
.scard { display: grid; gap: 10px; text-align: left; background: none; border: 0; padding: 0; color: var(--text); align-content: start; }
.scard .cover { display: flex; gap: 3px; align-items: stretch; background: var(--field); } .scard .cover img { display: block; min-width: 0; height: auto; flex: var(--ar) 1 0; width: 0; }
.scard h2 { font: 400 1.6rem/1.1 var(--serif); letter-spacing: -.02em; } .scard p { color: var(--muted); font-size: 14.5px; }
.scard:hover h2 { color: var(--amber-text); }
.reader { max-width: 1080px; margin: 0 auto; padding-top: 18px; display: grid; gap: 20px; }
.reader-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reader h2 { font: 400 clamp(2.2rem, 5vw, 3.8rem)/1.02 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.reader .intro { font: 400 1.25rem/1.5 var(--serif); max-width: 34em; }
.reader .rgrid { position: relative; }
.reader .rgrid .dt { cursor: zoom-in; }
.show { position: fixed; inset: 0; z-index: 85; background: #0c0c0d; color: #fff; display: grid; place-items: center; overflow: hidden; }
/* the blurred copy behind may be cut to fill the frame. The picture on top is whole. */
.show .backdrop { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(34px) brightness(.5) saturate(1.2); transition: background-image .6s; }
.show img { position: relative; max-width: 100vw; max-height: 100dvh; width: auto; height: auto; display: block; animation: fade .7s; }
.show-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; display: flex; gap: 8px; align-items: center; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.show-bar .t { font: 400 1.2rem var(--serif); margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .show-bar .n { font-size: 13.5px; opacity: .8; font-variant-numeric: tabular-nums; }
.show .iconbtn { color: #fff; } .show .iconbtn:hover { background: rgba(255, 255, 255, .14) !important; }
.dhead h2 { white-space: nowrap; }
@media (max-width: 620px) { .demo-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; } .demo-note .grow { display: none; } .demo-note .btn { grid-column: 2; justify-self: start; } .dhead h2 { font-size: 17px; } }