/* The signature belongs to the painting. Its irregularity lives in the ink. */
.exhibition-title{left:480px;right:245px;top:184px;height:35px}
.exhibition-tabs{top:223px;left:235px}
.exhibition-art #exhibit-seal{position:absolute;right:17px;bottom:14px;width:126px;height:126px;pointer-events:none;z-index:4}
.signature-preview canvas{width:138px;height:138px;right:18px;bottom:14px;pointer-events:none}
.exhibition-art{top:313px;width:1065px;height:599.0625px}
.exhibition-author{min-height:68px}
.exhibition-inscription{height:625px}
.exhibition-pager{left:235px;right:185px;top:906px;width:auto;height:50px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;font-size:24px}
.exhibition-pager button{display:inline-flex;align-items:center;gap:18px;min-width:0;width:fit-content;max-width:100%;min-height:50px;justify-self:start;padding:7px 18px;text-align:left;transition:background-color .2s,color .2s}
.exhibition-pager button:last-child{justify-self:end;justify-content:flex-end;text-align:right}
.exhibition-pager button span{font-size:24px;letter-spacing:2px;white-space:nowrap;color:inherit}
.exhibition-pager strong{min-width:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:2px;color:inherit}
.exhibition-pager button:disabled{opacity:.32}
.exhibition-pager .primary:focus-visible:not(:disabled){background:#803825;color:#fff2d6}
.exhibition-count{display:flex;align-items:center;justify-content:center;min-width:126px;padding:6px 18px;font-size:25px;font-variant-numeric:tabular-nums;letter-spacing:3px;color:var(--red)}
.exhibition-film-tab{display:inline-flex;align-items:center;gap:7px}
.exhibition-film-download{display:grid;place-items:center;width:29px;height:29px;border-radius:2px;color:#95836b;transition:background .2s,color .2s}
.exhibition-film-download:is(:hover,:focus-visible){background:#98453019;color:var(--red)}
.exhibition-film-download svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* One wide movie takes over the scroll's picture AND inscription. */
.exhibition-film-screen .inside-heading,.film-screen .inside-heading{pointer-events:none}
.exhibition-film-screen .inside-heading>*,.film-screen .inside-heading>*{pointer-events:auto}
.exhibition-projection{position:absolute;left:205px;top:260px;width:1500px;height:675px}
.exhibition-projection video{display:block;width:100%;height:100%;object-fit:contain;background:transparent;mix-blend-mode:multiply}
.exhibition-film-transport{position:absolute;left:990px;right:185px;top:225px;height:30px;display:flex;align-items:center;gap:22px;font-size:18px;color:#82765e}
.exhibition-film-transport .film-play-toggle,.film-transport .film-play-toggle{display:grid;place-items:center;flex:0 0 32px;min-width:32px;width:32px;height:30px;padding:4px;border-radius:2px;transition:background .2s,color .2s}
.film-play-toggle:is(:hover,:focus-visible):not(:disabled){background:#98453019;color:var(--red)}
.exhibition-film-transport .film-play-toggle svg,.film-transport .film-play-toggle svg{width:20px;height:20px;fill:currentColor;stroke:none}
.exhibition-film-transport input{flex:1;min-width:0;accent-color:#974832;height:3px}
.exhibition-film-transport span{font-variant-numeric:tabular-nums;min-width:49px}
/* Recording previews use the same full-scroll composition as playback. */
.film-view{left:205px;top:260px;width:1500px;height:710px}
.film-view canvas{left:0;top:0;width:1500px;height:675px;mix-blend-mode:multiply}
.film-heading{position:absolute;left:10px;top:-38px;width:660px;height:30px;font-size:17px}
.film-transport{left:auto;right:0;top:-37px;width:715px;gap:18px;height:28px}
.film-actions{left:0;right:0;top:681px;width:auto;flex-direction:row;justify-content:flex-end;align-items:center;gap:28px;height:35px}
.film-actions>button,.film-actions a,.film-actions>button:not(.primary):not(.secondary){font-size:18px;min-height:32px;line-height:1.4;margin:0;padding:3px 12px;letter-spacing:2px}
.film-actions .primary{font-size:18px;margin:0;padding:3px 14px;min-height:32px}
.film-actions .primary svg{width:21px}
#film-status{left:10px;right:auto;top:684px;width:590px;font-size:17px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The film leaves its lower edge quiet; the next road sits in the right margin. */
.film-title{display:flex;align-items:center;gap:15px;min-width:0}
.film-title>.eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-download-control{display:grid;place-items:center;flex:none;width:30px;height:30px;color:#8c7b60;border-radius:2px;transition:background .2s,color .2s}
.film-download-control svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.film-download-control:is(:hover,:focus-visible){background:#98453019;color:var(--red)}
.film-retry{flex:none;font-size:17px;letter-spacing:2px;color:var(--red);border-bottom:1px solid #98453066}
/* Match the framed cinnabar buttons used for 落笔成真 throughout the scroll. */
.film-next-button{position:absolute;left:1518px;top:225px;width:82px;min-height:230px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#7c7862;border:1px solid #b1aa9180;background:transparent;transition:background-color .4s,color .35s,border-color .35s,box-shadow .35s}
.film-next-button::before{content:'';position:absolute;inset:4px;border:1px solid #b1aa912e;pointer-events:none;transition:border-color .35s}
.film-next-button:disabled{opacity:.55}
.film-next-label{writing-mode:vertical-rl;text-orientation:upright;font-size:23px;line-height:1.5;letter-spacing:6px}
.film-next-arrow{display:grid;place-items:center;width:32px;height:32px;transition:transform .3s}
.film-next-arrow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.film-next-button:is(:hover,:focus-visible):not(:disabled){color:#555d4b;background:#91896d12;border-color:#a59b7d}
.film-next-button:is(:hover,:focus-visible):not(:disabled)::before{border-color:#a89b765c}
.film-next-button:is(:hover,:focus-visible):not(:disabled) .film-next-arrow{transform:translateX(3px)}
.film-next-button:focus-visible{outline:2px solid #80795f;outline-offset:4px}
/* Completion stays red. Hover enriches this state instead of creating it early. */
.film-next-button.is-invited:not(:disabled){color:#f7ecd5;background:var(--red);border-color:var(--red);animation:film-next-ready 1.2s ease-out 1}
.film-next-button.is-invited:not(:disabled)::before{border-color:#d2a28266}
.film-next-button.is-invited:is(:hover,:focus-visible):not(:disabled){color:#fff2d6;background:#803825;border-color:#803825}
.film-next-button.is-invited:is(:hover,:focus-visible):not(:disabled)::before{border-color:#e8ba977d}
.film-next-button.is-invited:focus-visible{outline-color:var(--red)}
@keyframes film-next-ready{0%,100%{box-shadow:none}40%{box-shadow:0 0 15px #b4894240}}
@media(prefers-reduced-motion:reduce){.film-next-button,.film-next-button::before,.film-next-arrow{transition:none}.film-next-button.is-invited:not(:disabled){animation:none}}