/* Original illustrated covers within the shared site's layout and themes. */
.works-page{--width:960px}.works-page>.page-heading{max-width:720px;margin-left:auto;margin-right:auto;margin-bottom:56px}.collection-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:17px 0 22px;font-size:11px;color:var(--muted);letter-spacing:.6px}.collection-heading span:last-child{font-family:ui-monospace,monospace;font-size:10px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px 32px}.work-card{min-width:0;display:flex;flex-direction:column}.work-cover{display:block;border-radius:4px;overflow:hidden}.work-cover:hover .pg-cover{transform:scale(1.018)}.work-meta{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted);margin:22px 0 9px;letter-spacing:.4px}.work-meta span:last-child{font-family:ui-monospace,monospace}.work-card h2{font-size:25px;font-weight:500;line-height:1.4;letter-spacing:-.5px;margin:0 0 10px;color:var(--title)}.work-card h2 a:hover{color:var(--accent)}.work-tagline{font-size:14px;color:var(--title);margin:0 0 7px;line-height:1.85}.work-description{font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 22px}.work-actions{margin-top:auto;display:flex;align-items:center;gap:19px;flex-wrap:wrap}.work-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--title);color:var(--bg);padding:9px 16px;border:1px solid var(--title);border-radius:4px;font-size:12px;line-height:1.6;transition:opacity .2s}.work-primary:hover{opacity:.8}.work-more{font-size:12px;color:var(--muted)}.work-more:hover{color:var(--accent)}.work-status{font-size:11px;color:var(--muted);padding:9px 12px;border:1px solid var(--line);border-radius:4px;line-height:1.75}.works-page>.quiet-note{margin-top:60px}.work-detail-art{margin:0 0 37px}.work-detail-art .pg-cover{border-radius:4px;aspect-ratio:2.1}.work-detail-art figcaption{font-size:10px;text-align:right;color:var(--muted);margin-top:7px}.work-detail-art .prompt-window{max-width:430px}.work-detail-art .color-title{font-size:78px}.work-detail-art .music-title{font-size:49px}.install-guide{border-top:1px solid var(--line);padding-top:32px;margin-top:38px;scroll-margin-top:30px}.install-guide h2{font-size:23px;font-weight:500;color:var(--title);margin:0 0 10px}.install-guide>p{font-size:13px;color:var(--muted)}.install-guide ol{padding-left:22px;font-size:14px;line-height:1.9;margin:26px 0}.install-guide li{padding-left:5px;margin-bottom:16px}.install-guide pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 ui-monospace,monospace;background:var(--soft);padding:14px 16px;border-radius:4px;margin:12px 0}.install-guide>.work-primary{margin-top:8px}
.pg-cover{position:relative;aspect-ratio:1.72;overflow:hidden;isolation:isolate;transition:transform .35s ease;display:flex;align-items:center;justify-content:center}.pg-cover-link:hover .pg-cover{transform:scale(1.018)}.pg-cover-label{position:absolute;left:24px;top:19px;font-family:monospace;font-size:9px;letter-spacing:1.3px;opacity:.65}.pg-cover-foot{position:absolute;bottom:17px;right:22px;font-family:monospace;font-size:9px;letter-spacing:1px;opacity:.7}.pg-card-meta{display:flex;gap:20px;justify-content:space-between;margin:22px 0 10px;font-size:10px;letter-spacing:.6px;color:var(--muted)}.pg-card h3{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:Georgia,serif;font-weight:400;font-size:29px;letter-spacing:-.7px;margin:0 0 12px}.pg-arrow{font-family:Arial,sans-serif;font-size:23px;font-weight:300;transition:transform .2s}.pg-card a:hover .pg-arrow{transform:translate(3px,-3px)}.pg-card p{font-size:13px;line-height:1.95;color:var(--muted);max-width:470px;margin:0}.pg-card .pg-tagline{font-size:14px;color:var(--ink);margin-bottom:6px}.cover-prompts{background:#e9e8df;color:#3a3f33}.prompt-window{width:77%;background:#fafaf6;box-shadow:0 15px 35px #333b2120;border:1px solid #d3d5c9;border-radius:5px;padding:17px 21px 15px;transform:rotate(-3deg)}.prompt-top{display:flex;justify-content:space-between;font-family:Georgia,serif;font-size:18px;margin-bottom:15px}.prompt-top small{font:9px monospace;letter-spacing:1px;color:#797e6a}.prompt-search{display:flex;align-items:center;gap:10px;border:1px solid #caccbf;border-radius:4px;padding:10px;font-size:11px;color:#6b705f;margin-bottom:13px}.prompt-search svg{width:13px;height:13px;stroke:currentColor;fill:none}.prompt-result{display:flex;gap:12px;padding:11px 7px;border-top:1px solid #e4e6dc;font-size:10px;line-height:1.5}.prompt-result i{font:9px monospace;color:#87917a;padding-top:2px}.prompt-result mark{background:#dfe7c7;padding:2px 3px;color:#434d32}.prompt-result small{display:block;color:#8a8e80;font-size:8px;margin-top:4px}.cover-music{background:#202c38;color:#dee4e5}.music-waves{position:absolute;inset:8% 0 0;width:100%;height:85%;opacity:.65}.music-title{position:absolute;left:25px;bottom:56px;font:italic 40px Georgia,serif;letter-spacing:-1.5px}.music-prompt{position:absolute;bottom:20px;left:25px;border-left:1px solid #819baa;padding-left:11px;font-size:10px;color:#c3cfd4}.cover-color{background:#e2d9ce;color:#47392e}.color-strips{display:flex;width:100%;height:100%;position:absolute;inset:0}.color-strips span{flex:1}.color-strips span:nth-child(1){background:#ca7452}.color-strips span:nth-child(2){background:#deaa86}.color-strips span:nth-child(3){background:#ecd7bc}.color-strips span:nth-child(4){background:#a8b2a0}.color-strips span:nth-child(5){background:#5a797a}.color-title{position:relative;text-align:center;font:60px/.91 Georgia,serif;letter-spacing:-3px;color:#342f26;mix-blend-mode:multiply}.color-title em{font-weight:400}.color-ring{position:absolute;right:18%;bottom:16%;height:41%;aspect-ratio:1;border:1px solid #faf5e9b0;border-radius:50%}
@media(max-width:760px){.work-grid{gap:42px 24px}.work-card h2{font-size:23px}.works-page>.page-heading{margin-bottom:38px}.prompt-window{padding:13px}.prompt-top{font-size:16px;margin-bottom:9px}.prompt-search{font-size:10px;padding:8px;margin-bottom:7px}.prompt-result{padding:8px 3px;font-size:9px}.prompt-result small{display:none}.color-title{font-size:52px}.music-title{font-size:31px}.pg-cover-label,.pg-cover-foot{font-size:7px}.work-detail-art .music-title{font-size:40px}}
@media(max-width:640px){.work-grid{grid-template-columns:1fr;gap:42px}.work-cover .pg-cover{aspect-ratio:1.6}.work-detail-art .pg-cover{aspect-ratio:1.6}.work-meta{margin-top:19px}.work-card h2{font-size:25px}.work-description{margin-bottom:19px}.work-actions{gap:19px}.work-primary{padding:10px 16px}.work-detail-art{margin-bottom:28px}.pg-cover-label{left:18px;top:14px}.pg-cover-foot{right:18px;bottom:14px}.prompt-window{width:77%;max-width:360px;padding:14px}.music-title,.work-detail-art .music-title{font-size:clamp(26px,8.9vw,43px);left:20px;bottom:54px}.music-prompt{left:20px;bottom:22px;font-size:9px}.color-title,.work-detail-art .color-title{font-size:64px}.works-page>.quiet-note{margin-top:44px}}

.detail-launch{margin:-20px 0 32px}
@media(max-width:360px){.prompt-window{width:84%;transform:rotate(-3deg) scale(.88);padding:10px}.prompt-top{font-size:15px;margin-bottom:6px}.prompt-search{padding:6px;margin-bottom:5px}.prompt-result{font-size:8px;padding:6px 3px}.pg-cover-foot{font-size:6px}}

/* Pop-art edition: the four colors and lettering from the selected app. */
.cover-date { background:#fff5dc; color:#211b38; }
.date-pop { font:900 clamp(25px,4.5vw,54px)/1 Arial,sans-serif; position:absolute; inset:18% 18% 16%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; border:2px solid #211b38; box-shadow:7px 7px 0 #211b38; transform:rotate(-4deg); overflow:hidden; }
.date-pop span { display:flex; align-items:center; justify-content:center; font:inherit; letter-spacing:-2px; }
.date-pop span:nth-child(1) { font-size:.8em; background:#fa5c3b; transform:rotate(-5deg) scale(1.1); }
.date-pop span:nth-child(2) { background:#ffd43b; transform:rotate(5deg) scale(1.1); }
.date-pop span:nth-child(3) { background:#68c9e7; transform:rotate(5deg) scale(1.1); }
.date-pop span:nth-child(4) { background:#b7d955; transform:rotate(-5deg) scale(1.1); }
/* A small local notebook, with words and an original sound. */
.cover-recoding { background:#e4e9df; color:#3f4d3e; }
.recoding-orbit { position:absolute; width:65%; aspect-ratio:1; border:1px solid #b6c3ad; border-radius:50%; right:-9%; top:16%; }
.recoding-note { width:72%; background:#faf9f4; padding:20px 23px; border:1px solid #d3d8cb; border-radius:3px; box-shadow:8px 12px 0 #c8d1bf; transform:rotate(3deg); }
.recoding-top { display:flex; justify-content:space-between; font-size:19px; font-weight:500; margin-bottom:14px; }
.recoding-top span { color:#87947e; font:10px/2.5 monospace; letter-spacing:3px; }
.recoding-words { font-size:11px; line-height:1.9; }
.recoding-words>span { color:#879080; }
.recoding-audio { margin:16px 0; display:flex; align-items:center; gap:4px; width:86%; padding:8px 10px; background:#edf0e7; border-radius:4px; color:#75856a; }
.recoding-audio>span { font-size:10px; margin-right:8px; }
.recoding-audio i { height:10px; width:2px; background:currentColor; }
.recoding-audio i:nth-of-type(3n) { height:20px; }
.recoding-audio i:nth-of-type(3n+1) { height:15px; }
.recoding-audio small { font:8px monospace; margin-left:auto; }
.recoding-saved { font-size:8px; color:#8b9484; }
@media(min-width:641px) { .work-detail-art .recoding-note { max-width:390px; padding:26px 30px; }.work-detail-art .recoding-words { font-size:13px; } }
@media(max-width:900px) and (min-width:641px) { .recoding-note { padding:12px 16px; }.recoding-top { margin-bottom:8px; font-size:16px; }.recoding-words { font-size:9px; }.recoding-audio { margin:9px 0; padding:5px 8px; }.recoding-saved { font-size:7px; } }
@media(max-width:640px) { .date-pop { font-size:clamp(28px,10vw,52px); }.recoding-note { padding:17px 19px; }.recoding-top { margin-bottom:10px; }.recoding-words { font-size:10px; }.recoding-audio { margin:12px 0; } }
@media(max-width:360px) { .recoding-note { padding:12px 15px; }.recoding-top { font-size:16px; margin-bottom:8px; }.recoding-words { font-size:9px; }.recoding-audio { margin:8px 0; padding:6px; }.recoding-saved { font-size:7px; } }