/* Film notes share the gallery's type and central scrolling column. */
.hs-notes{max-width:550px;margin:48px auto 30px;font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink)}
.hs-notes h2,.hs-notes h3{font-family:var(--display);font-size:16px;font-weight:400;line-height:1.4;margin:0 0 14px}
.hs-notes h2>span{font:300 11px var(--index);display:inline-block;margin-right:12px;color:#77766f}
.hs-notes p{margin:0 0 16px}
.hs-intro{max-width:500px}
.hs-notes .hs-methods,.hs-notes .hs-end-credit{font:300 10px/1.8 var(--index);color:#67665f}
.hs-toolkit{margin:0 0 40px}
.hs-notes h3{font-size:13px;margin-bottom:10px}
.hs-tool-list{display:flex;flex-wrap:wrap;gap:3px 16px}
.hs-tool-list button{font:300 10px/1.5 var(--index);padding:4px 0;color:#77766f;text-align:left;min-height:28px}
.hs-tool-list button[aria-pressed=true],.hs-tool-list button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hs-notes .hs-tool-detail{font-size:13px;line-height:1.45;color:#77766f;min-height:40px;margin:10px 0 0}
.hs-note{margin:0 0 62px;scroll-margin-top:12px;outline-offset:5px}
.hs-note>p,.hs-note-copy{max-width:500px}
.hs-note-copy p{margin:0}
.hs-note-copy p+p{margin-top:16px}
.hs-tabs{display:flex;gap:22px;margin:20px 0 12px;border-bottom:1px solid #e8e7e2}
.hs-tabs button{font:300 10px/1.4 var(--index);padding:8px 0 10px;color:#77766f;border-bottom:1px solid transparent;min-height:32px}
.hs-tabs button[aria-pressed=true]{color:#262620;border-bottom-color:#262620}
.hs-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#08090b}
.hs-notes .hs-hint{font:300 9px/1.65 var(--index);color:#77766f;margin:10px 0 0}
.hs-film .hs-hint{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.hs-controls{display:flex;align-items:center;justify-content:flex-start;gap:8px 16px;flex-wrap:wrap;margin-top:12px}
.hs-controls button{font:300 10px/1.5 var(--index);min-height:32px;padding:5px 0;color:#67665f}
.hs-controls button:hover,.hs-controls button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hs-notes canvas{display:block;max-width:100%;width:100%;height:auto;aspect-ratio:16/9}
.hs-comparison{position:relative;aspect-ratio:16/9;overflow:hidden;background:#eee}
.hs-comparison img{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover!important}
.hs-comparison .hs-after{clip-path:inset(0 0 0 var(--reveal))}
.hs-comparison-rule{position:absolute;top:0;bottom:0;left:var(--reveal);width:1px;background:white;box-shadow:0 0 2px #555}
.hs-before-label,.hs-after-label{position:absolute;bottom:10px;font:300 9px var(--index);color:white;background:#242420b3;padding:5px 7px}
.hs-before-label{left:10px}.hs-after-label{right:10px}
.hs-range-label{display:block;font:300 10px/1.5 var(--index);margin:16px 0 0;color:#67665f}
.hs-range-label>span{display:flex;justify-content:space-between}
.hs-range-label input{display:block;width:100%;accent-color:#55554f;margin:8px 0 0;min-height:26px;cursor:ew-resize}
.hs-phone-stage{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f4f3f0;perspective:1100px}
.hs-layer-stack{position:absolute;top:8%;left:35%;height:84%;aspect-ratio:9/16;transform-style:preserve-3d;transform:rotateX(calc(var(--spread)*9deg)) rotateY(calc(var(--spread)*-25deg + var(--turn)))}
#preview .hs-phone-layer{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;transform-origin:center;backface-visibility:hidden;outline:calc(var(--spread)*1px) solid #9998;box-shadow:calc(var(--spread)*7px) calc(var(--spread)*9px) calc(var(--spread)*20px) #2221}
.hs-layer-0{transform:translateX(calc(var(--spread)*-80%)) translateZ(calc(var(--spread)*-35px))}
.hs-layer-1{transform:translateX(calc(var(--spread)*5%)) translateZ(calc(var(--spread)*25px))}
.hs-layer-2{transform:translateX(calc(var(--spread)*90%)) translateZ(calc(var(--spread)*85px))}
.hs-layer-key{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;list-style-position:inside;font:300 9px/1.5 var(--index);color:#77766f;margin:16px 0 0}
.hs-turn-label{margin-top:8px}
.hs-studio-link{font:300 11px var(--index);display:inline-block;margin-top:8px;padding:6px 0}
.hs-end-credit{border-top:1px solid #eeede9;padding-top:20px}
.gallery.is-home #hyperscale-notes-slot{display:none}
@media(max-width:760px){.hs-notes{font-size:14px;margin-top:30px}.hs-notes h2{font-size:15px}.hs-note{margin-bottom:44px}.hs-tabs{gap:18px}.hs-tool-list{gap:3px 12px}.hs-controls button,.hs-tabs button{min-height:40px}.hs-film .hs-hint span{display:none}.hs-layer-key{gap:6px 12px}.hs-layer-stack{left:35%}}

/* A visible cycle, with reading order preserved in the ordered list. */
.hs-loop{position:relative;margin:28px 0 30px;height:220px}
.hs-loop svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#a3b29e;stroke-width:1;vector-effect:non-scaling-stroke}
.hs-loop .hs-loop-arrows{stroke:#64775b;stroke-width:1.3}
.hs-loop ol{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:80px 80px;gap:60px 0;list-style:none;padding:0;margin:0;height:100%}
.hs-loop li{display:flex;align-items:center;justify-content:center;text-align:center;font:400 19px/1.2 var(--sans,var(--serif));letter-spacing:-.02em;min-width:0}
.hs-loop li span{background:var(--paper,#fff);padding:6px 12px;max-width:150px}
.hs-loop .hs-loop-step-4{grid-column:3;grid-row:2}.hs-loop .hs-loop-step-5{grid-column:2;grid-row:2}.hs-loop .hs-loop-step-6{grid-column:1;grid-row:2}
.hs-loop figcaption{position:absolute;left:15%;right:15%;top:50%;transform:translateY(-50%);text-align:center;font:300 11px/1.4 var(--mono,var(--index));color:#687461}
.hs-route-demo .hs-controls button:first-child{border:1px solid #a5b69e;padding:6px 12px;color:#32442d}
.hs-route-demo .hs-controls button:disabled{opacity:.4;cursor:default;text-decoration:none}
.hs-route-demo .hs-route-scrub{margin-top:10px}
.hs-route-demo .hs-route-scrub input{accent-color:#6d8d60}
@media(max-width:600px){
 .hs-loop{height:200px;margin:20px 0 24px}
 .hs-loop ol{grid-template-rows:73px 73px;gap:54px 0}
 .hs-loop li{font-size:15px;line-height:1.2}
 .hs-loop li span{padding:5px 6px;max-width:100px}
 .hs-loop figcaption{font-size:9px;left:15%;right:15%}
 .hs-route-demo .hs-controls{gap:4px 16px}
 .hs-route-demo canvas{aspect-ratio:4/3!important}
}

.hs-galaxy-stage{position:relative;isolation:isolate;background:#05060a;overflow:hidden}
.hs-galaxy-stage .hs-galaxy-webgl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hs-galaxy-stage .hs-canvas{position:relative;z-index:1}

/* Keep the longer first-person notes in short, readable paragraphs. */
.hs-working{margin:40px 0 56px}
.hs-finish{border-top:1px solid var(--line,#eeede9);padding-top:32px}

/* Keep the full Studio readable within the film page. */
.hs-studio{width:100%;min-width:0;container-type:inline-size}
.hs-studio iframe{display:block;width:100%;height:940px;border:1px solid #333;background:#181818}
.hs-notes .hs-studio-invitation{font:300 12px/1.6 var(--mono,var(--index));color:var(--muted,#77766f);margin:0 0 14px}
@container(max-width:760px){.hs-studio iframe{height:1120px}}