/* Small phrases live in the open spaces of the continuous drawing. */
body[data-home="perspective"]{--paper:#f7f6f3;--page-inset:clamp(24px,4.45vw,72px);background:var(--paper)}
[data-home] .study-header{padding:28px var(--page-inset);background:none}
.identity{display:flex;align-items:baseline;gap:12px}.identity .name{font-size:26px}
.role{font-size:12px;letter-spacing:.035em;color:var(--muted)}
[data-home] .back{font-size:12px;letter-spacing:.045em}[data-home] .back span{margin-left:8px}
.statement-label{position:absolute;z-index:2;top:108px;left:var(--page-inset);margin:0;font-size:11px;line-height:1.5;letter-spacing:.09em;color:#726b6d;pointer-events:none}
.statement{position:absolute;inset:0;z-index:2;pointer-events:none}
#scene-message{margin:0;font-size:clamp(16px,1.5vw,23px);font-weight:400;line-height:1.65;letter-spacing:.035em}
.message-phrase{position:absolute;display:block;left:18%;top:40%;max-width:calc(100% - 32px);text-align:center;line-break:strict;overflow-wrap:normal}
.message-phrase+.message-phrase{left:57%;top:62%}
.message-ink{display:block;text-shadow:0 0 3px var(--paper),0 0 6px var(--paper)}
.messages-enabled .statement:not(.is-positioned){visibility:hidden}
.messages-enabled .message-ink{opacity:0}
/* A hairline of paper around the glyphs opens the coils without adding a card. */
[data-message-scene="3"] .message-ink{-webkit-text-stroke:5px var(--paper);paint-order:stroke fill;text-shadow:0 0 3px var(--paper)}
.closing{position:fixed;z-index:3;left:var(--page-inset);right:var(--page-inset);bottom:84px;text-align:center}
.works-link{position:relative;display:inline-flex;align-items:center;gap:20px;min-height:44px;padding:8px 0;font-size:12px;letter-spacing:.035em}
.works-link span{font-size:16px;transition:transform .2s}.works-link:hover span{transform:translate(2px,-2px)}
.works-link::after{content:"";position:absolute;left:0;right:0;top:calc(50% + .5em + 6px);height:1px;background:currentColor;opacity:0;pointer-events:none}
.works-link:hover{text-decoration:none}
.works-link:active::after{opacity:1}
@media(hover:hover){.works-link:hover::after{opacity:1}}
.messages-enabled .closing{opacity:0;visibility:hidden;pointer-events:none;filter:blur(3px);transition:opacity .6s,filter .6s,visibility .6s}
.messages-enabled .closing.is-visible{opacity:1;visibility:visible;pointer-events:auto;filter:none}
[data-home] .hint{bottom:101px;font-size:11px;letter-spacing:.04em;transition:opacity .18s}
.messages-enabled [data-home] .hint.has-progressed{opacity:0}.touch-hint{display:none}
[data-home] .controls{left:var(--page-inset);right:var(--page-inset);bottom:16px;gap:0}
[data-home] .scene-controls{gap:0}[data-home] .scene-selector{gap:20px}
[data-home] .scene-selector button{position:relative;min-width:44px;min-height:44px;font-family:inherit;font-size:12px}
[data-home] .scene-steps{gap:2px}
[data-home] .scene-steps button[aria-current="step"]{background:transparent}
[data-home] .scene-steps button::after{content:"";position:absolute;bottom:5px;left:15px;right:15px;height:1px;background:currentColor;opacity:0;transition:opacity .3s}
[data-home] .scene-steps button[aria-current="step"]::after{opacity:1}
[data-home] [aria-disabled="true"]{cursor:default}
[data-home] .previous[aria-disabled="true"],[data-home] .next[aria-disabled="true"]{opacity:.3}
@media(hover:none) and (pointer:coarse){.desktop-hint{display:none}.touch-hint{display:inline}}
@media(max-width:760px){
  [data-home] .study-header{padding-top:24px;padding-bottom:20px}
  .identity{gap:9px}.identity .name{font-size:23px}.role{font-size:10px}
  .statement-label{top:95px;font-size:10px;letter-spacing:.07em}
  #scene-message{line-height:1.7;letter-spacing:.025em}
  .message-phrase{white-space:nowrap;font-size:clamp(14px,3.8vw,17px)}
  [data-message-scene="3"] .message-ink{-webkit-text-stroke-width:3px}
  .closing{bottom:76px}.works-link{font-size:12px}
  .works-link:focus{outline:none}
  [data-home] .controls{bottom:14px}[data-home] .scene-selector{gap:4px}[data-home] .scene-steps{gap:0}
  [data-home] .hint{bottom:95px;font-size:10px}
}
@media(max-width:350px){[data-home] .scene-selector button{min-width:38px;padding:6px}.role{font-size:9px}}
@media(max-height:650px){.statement-label{top:80px}.closing{bottom:64px}[data-home] .controls{bottom:8px}[data-home] .hint{bottom:76px}}
@media(max-height:500px){
  [data-home] .study-header{padding-top:14px}.statement-label{top:56px;font-size:9px}
  .closing{bottom:54px}.works-link{font-size:11px;min-height:32px;padding:4px 0;gap:12px}
  [data-home] .hint{bottom:55px;margin:0}
}
@media(prefers-reduced-motion:reduce){.closing,.hint,.works-link span,.scene-steps button::after{transition:none!important}.message-ink{filter:none!important}}

/* A readable first statement remains available if the drawing cannot load. */
.drawing-unavailable .statement{inset:145px 24px auto;text-align:center}
.drawing-unavailable .message-phrase{position:static;width:auto;max-width:none;display:block}
.drawing-unavailable .scene-controls{display:none}