/* The second edition: a playable, personal animator's desk. */
:root{--board:#e9ecf4;--sheet:#fffdf7;--accent:#bf3e65;scroll-padding-bottom:110px}
:root[data-ink=cherry]{--paper:#fff6e9;--ink:#942c43;--body:#4f343b;--muted:#775b60;--pink:#f1c4ad;--line:#942c4333;--yellow:#f4d276;--board:#f5e7df;--sheet:#fffaf1;--accent:#942c43}
:root[data-ink=forest]{--paper:#f0f3e7;--ink:#215b4d;--body:#30473e;--muted:#5b6a5d;--pink:#d3df9d;--line:#215b4d33;--yellow:#e9d37a;--board:#dfe9e0;--sheet:#fcfdf5;--accent:#876025}
body{background-image:radial-gradient(var(--line) .5px,transparent .5px)}
.work{background-color:var(--board);background-image:linear-gradient(var(--line) .5px,transparent .5px),linear-gradient(90deg,var(--line) .5px,transparent .5px);background-size:40px 40px}
.examples,.work-card,.character-study,.tidy-button{background:var(--sheet)}
.work-card,.work-footer{border-color:var(--line)}
.study-stage{background-color:var(--board);background-image:linear-gradient(var(--line) .5px,transparent .5px),linear-gradient(90deg,var(--line) .5px,transparent .5px)}
.wordmark-dot,.mascot-spark{color:var(--accent)}
.desk-edition{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;color:var(--ink)}
.desk-edition>.mono{font-size:.65rem;display:flex;align-items:center;gap:14px}
.edition-star{font-size:1.5rem;display:inline-block;animation:ink-spin 24s linear infinite}
.ink-picker{display:flex;align-items:center;gap:6px}.ink-picker>.handwritten{font-size:1.35rem;transform:rotate(-5deg);margin-right:10px}
.ink-picker button{display:flex;align-items:center;gap:6px;border:1px solid transparent;background:transparent;border-radius:30px;min-height:44px;padding:6px 10px;font-size:.7rem}
.ink-picker button[aria-pressed=true]{border-color:var(--ink);background:var(--sheet)}
.ink-picker button i{display:block;width:13px;height:13px;border-radius:50%;background:#2734a4}.ink-picker [data-ink=cherry] i{background:#942c43}.ink-picker [data-ink=forest] i{background:#215b4d}
.masthead{padding-top:4px}.masthead h1{position:relative}.masthead h1:after{content:'DRAWN TO MOTION.';font:400 .55rem 'DM Mono',monospace;letter-spacing:.22em;position:absolute;bottom:-12px;left:5px}
.desk-toolbar{padding-bottom:14px}.project-tabs{display:flex;align-items:center;gap:8px;margin-bottom:45px;flex-wrap:wrap}.project-tabs button{border:1px solid var(--line);border-radius:2px 12px 0 0;background:var(--sheet);padding:12px 15px;color:var(--ink);font-size:.8rem;min-height:44px;transition:background .2s,translate .2s}.project-tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:0 4px 0 var(--pink)}.project-tabs button:hover{translate:0 -3px}.project-tabs sup{font:400 .6rem 'DM Mono',monospace;margin-left:8px}.project-tabs>.handwritten{font-size:1.5rem;margin-left:auto;color:var(--ink);transform:rotate(-4deg)}
.work-card[hidden]{display:none!important}.work-grid.is-filtered{grid-template-columns:repeat(2,minmax(0,1fr))}.work-grid.is-filtered .work-card{grid-column:auto;margin:0;transform:rotate(-1deg)}
.card-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .3s}.work-card.is-previewing .card-motion{opacity:1}.work-card.is-previewing .play-icon{opacity:0}.preview-toggle{display:flex;align-items:center;gap:7px;margin:12px 6px 0;padding:5px 10px;min-height:36px;border:1px dashed var(--ink);border-radius:20px;color:var(--ink);background:transparent;font:400 .65rem 'DM Mono',monospace}.preview-toggle[aria-pressed=true]{background:var(--ink);color:var(--paper);border-style:solid}.preview-toggle:disabled{opacity:.7;cursor:default}.work-card.is-previewing .card-index:after{content:' / PREVIEW'}
.lab-note{position:absolute;bottom:8px;left:12px;font-size:.5rem;color:var(--ink);z-index:3}.motion-recipes{display:flex;gap:7px;margin-top:12px}.motion-recipes button{flex:1;min-width:0;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--ink);padding:9px 3px;font-size:.75rem;min-height:44px}.motion-recipes button span{display:block;font-size:1.5rem;line-height:1;margin-bottom:8px}.motion-recipes [aria-pressed=true]{background:var(--pink);border-color:var(--ink)}.motion-recipes button:disabled{opacity:.55;cursor:default}.study-stage.is-alive[data-recipe=sway] .study-portrait{animation:lab-sway 3s ease-in-out infinite}.study-stage.is-alive[data-recipe=pop] .study-portrait{animation:lab-pop 2.4s ease-in-out infinite}.study-caption{min-height:2.2em}.character-study:after{content:'a tiny experiment in personality';display:block;font:500 1.2rem 'Caveat',cursive;color:var(--ink);text-align:center;border-top:1px dashed var(--line);padding-top:12px;margin-top:5px}
.page-bookmark{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:6;width:min(420px,calc(100% - 32px));display:flex;align-items:center;gap:18px;padding:10px 16px;background:var(--sheet);color:var(--ink);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--pink);border-radius:3px 3px 14px 3px}.page-bookmark[hidden]{display:none}.bookmark-brand{font-weight:700;font-size:1.35rem;letter-spacing:-.1em;display:flex;gap:6px;align-items:center;min-height:44px}.bookmark-brand span{font-size:1.3rem;letter-spacing:0}.bookmark-track{flex:1;min-width:0}.bookmark-track>.mono{font-size:.6rem;white-space:nowrap}.bookmark-ruler{position:relative;height:12px;margin-top:4px;border-block:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0,transparent 8px,var(--line) 8px,var(--line) 9px)}.bookmark-ruler i{display:block;height:100%;width:0;background:var(--ink);opacity:.5}.bookmark-contact{font-size:.8rem;min-height:44px;display:flex;gap:8px;align-items:center;white-space:nowrap;border-left:1px solid var(--line);padding-left:15px}.bookmark-contact:hover{text-decoration:underline}.footer{padding-bottom:115px}.chapter-rail a{min-height:44px;min-width:44px;justify-content:flex-end}.chapter-rail{gap:12px;right:8px}.chapter-rail:before{border-color:var(--line)}
.playback button,.motion-toggle{min-height:44px}.paused *, .paused *:before,.paused *:after{transition:none!important}
@keyframes ink-spin{to{transform:rotate(360deg)}}
@keyframes lab-sway{0%,100%{transform:rotate(-8deg) translateX(-6px)}50%{transform:rotate(8deg) translateX(6px)}}
@keyframes lab-pop{0%,55%,100%{transform:translateY(6px) scale(1.02,.98)}70%{transform:translateY(-22px) scale(.98,1.02)}85%{transform:translateY(6px) scale(1.04,.96)}92%{transform:translateY(-3px) scale(1)}}
@media(max-width:1000px){.project-tabs>.handwritten{display:none}.desk-edition>.mono{font-size:.55rem;gap:8px}}
@media(max-width:760px){.desk-edition{flex-wrap:wrap;gap:6px}.desk-edition>.mono{font-size:.6rem}.ink-picker{margin-left:auto}.ink-picker>.handwritten{font-size:1.2rem}.masthead{padding-top:20px}.page-bookmark{bottom:max(14px,env(safe-area-inset-bottom));gap:12px}.project-tabs{margin-bottom:35px}.project-tabs button{padding:10px;font-size:.75rem}.project-tabs sup{margin-left:4px}.preview-toggle{font-size:.6rem;margin-inline:2px}.character-study{padding:13px}}
@media(max-width:480px){.desk-edition{padding-top:12px;gap:0}.ink-picker{width:100%;justify-content:flex-end}.ink-picker>.handwritten{margin-right:auto}.ink-picker button{padding:5px 8px}.desk-edition>.mono{font-size:.55rem}.masthead{padding-top:8px}.project-tabs{gap:5px}.project-tabs button{padding:9px 8px;font-size:.7rem}.project-tabs sup{font-size:.5rem}.work-grid.is-filtered{grid-template-columns:1fr}.bookmark-brand{font-size:1.2rem}.bookmark-brand span{display:none}.bookmark-contact{font-size:.75rem;padding-left:10px}.bookmark-track>.mono{font-size:.55rem}.page-bookmark{padding:6px 12px}.chapter-rail{display:none}.study-stage{aspect-ratio:1.05}}
@media(prefers-reduced-motion:reduce){.edition-star,.study-stage.is-alive .study-portrait{animation:none!important}}
@media(max-width:480px){.project-tabs{display:grid;grid-template-columns:1.1fr 1.4fr .8fr .8fr}.project-tabs button{padding:8px 4px;font-size:.68rem}.project-tabs sup{display:none}.preview-toggle{min-height:44px}}
/* Clear contribution credits, like signed notes attached to each piece. */
.credit-strip{display:flex;align-items:center;gap:30px;border-block:1px solid var(--ink);padding:24px 0;margin:0 0 35px;color:var(--ink)}
.credit-strip>.handwritten{flex:0 0 160px;transform:rotate(-5deg);font-size:1.65rem}
.credit-strip>div{flex:1}.credit-strip strong{font-size:1.2rem;font-weight:500}.credit-strip p{font-size:1rem;line-height:1.65;max-width:720px;color:var(--body);margin-top:7px}
.video-stage .example-transition{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#151523;pointer-events:none}
.video-stage .example-transition[hidden]{display:none}
.video-state,.video-error{z-index:1}
.project-credit{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:baseline;border-top:1px dashed var(--line);margin:17px 6px 0;padding-top:12px;color:var(--ink)}
.project-credit>span{font:400 .75rem 'DM Mono',monospace;letter-spacing:.05em}.project-credit strong{font-size:.875rem;font-weight:500;line-height:1.5}
.project-source{display:inline-flex;align-items:center;gap:20px;min-height:44px;margin:4px 6px 0;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}.project-source:hover{color:var(--ink)}
.card-7{grid-column:span 5;transform:rotate(-2deg);margin-top:25px}.card-8{grid-column:span 7;transform:rotate(2deg);margin-top:45px}.card-9{grid-column:span 7;transform:rotate(-1deg)}.card-10{grid-column:span 5;transform:rotate(2deg);margin-top:60px}
.project-tabs button{font-size:.875rem}.project-tabs>.handwritten{display:none}.work-grid.is-tidy .work-card,.work-grid.is-filtered .work-card{margin-top:0}
.dialog-bottom>span{max-width:65%;font-size:.875rem;line-height:1.6}.dialog-bottom>a{flex-shrink:0}
@media(max-width:760px){.credit-strip{gap:18px;flex-wrap:wrap}.credit-strip>.handwritten{flex-basis:100%;font-size:1.5rem}.credit-strip p{font-size:1rem}.card-7,.card-8,.card-9,.card-10{grid-column:span 6;margin-top:0}.card-8,.card-10{margin-top:35px}.project-tabs{display:grid;grid-template-columns:1fr 1.8fr 1fr 1.3fr;align-items:stretch}.project-tabs button{font-size:.875rem;padding:10px 8px;line-height:1.4}.project-tabs sup{display:none}.dialog-bottom>span{max-width:100%}.dialog-bottom{flex-wrap:wrap}}
@media(max-width:480px){.project-tabs{grid-template-columns:1fr 1fr;gap:8px}.project-tabs button{font-size:.875rem;padding:12px 8px}.card-7,.card-8,.card-9,.card-10{grid-column:auto;margin-top:0}.project-credit{gap:4px 8px}.project-credit>span{flex-basis:100%}.credit-strip{padding-block:20px}.credit-strip strong{font-size:1.15rem}.project-source{font-size:.875rem}}