@font-face{font-family:Barlow;src:url('/assets/BarlowCondensed-Bold.ttf')}*{box-sizing:border-box}#attached-passage{height:210svh}.attached-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#18191b}.attached-instrument{position:absolute;width:100%;height:66.666vw;top:calc(50% - 33.333vw);left:0;opacity:var(--photo-opacity,1)}.attached-instrument img{width:100%;height:100%;display:block}#attached-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.study-label{position:absolute;z-index:2;top:25px;left:4%;font-size:10px;letter-spacing:1.8px;mix-blend-mode:difference;color:white}.controls{position:absolute;z-index:2;right:4%;bottom:5%;width:310px;background:#18191b;padding:22px 25px;color:#eee8dd}.controls label{display:block;font:700 25px/1 Barlow,sans-serif;margin-bottom:18px}.controls input{width:100%;border:0;border-bottom:1px solid #a89f90;background:transparent;font:22px/1.4 Arial;color:inherit;border-radius:0;padding:8px 0}.controls p{font-size:11px;line-height:1.6;margin:18px 0}.controls a{color:inherit;text-decoration:none;display:block;border-top:1px solid #756f65;padding-top:13px;font-size:12px}.controls small{display:block;font-size:9px;color:#bfb6a8;margin-top:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#attached-canvas[hidden]{display:none}@media(max-width:760px){.controls{right:18px;left:18px;bottom:20px;width:auto;padding:17px 20px}.controls label{font-size:22px;margin-bottom:8px}.controls p{margin:10px 0}.controls small{margin-top:10px}.study-label{left:20px;top:20px}.attached-instrument{width:1260px;height:840px;left:calc(50% - 790px);top:calc(50% - 420px)}}@media(prefers-reduced-motion:reduce){#attached-passage{height:100svh}}
.study-label{mix-blend-mode:normal;background:#18191b;color:#eee8dd;padding:6px 10px}.controls{left:0;right:0;bottom:0;width:auto;padding:18px 4%;display:grid;grid-template-columns:minmax(250px,340px) minmax(230px,1fr) 230px;gap:0 5vw;align-items:center}.controls label{grid-column:1;grid-row:1;font-size:22px;margin:0}.controls input{grid-column:1;grid-row:2;font-size:19px;padding:7px 0}.controls p{grid-column:2;grid-row:1/3;max-width:340px;font-size:12px;margin:0}.controls a{grid-column:3;grid-row:1/3;border:0;padding:0;font:700 25px/1.1 Barlow}.controls #preview-status{grid-column:1;grid-row:3;margin-top:10px}.controls small:last-child{grid-column:2/4;grid-row:3;margin-top:10px}@media(max-width:760px){.controls{padding:14px 20px;grid-template-columns:minmax(0,1fr) 100px;gap:0 20px}.controls label{font-size:21px}.controls input{font-size:18px}.controls a{grid-column:2;grid-row:1/3;font-size:22px}.controls p{grid-column:1/-1;grid-row:3;font-size:11px;margin-top:9px;max-width:none}.controls #preview-status{grid-column:1/-1;grid-row:4;margin-top:8px}.controls small:last-child{grid-column:1/-1;grid-row:5;margin-top:5px}.study-label{left:15px;top:15px;font-size:9px}}
/* Intermediate viewports need a real two-column reading/action layout. */
.controls>*{min-width:0}
@media(min-width:761px) and (max-width:1050px){.controls{padding:16px 4%;grid-template-columns:minmax(0,1fr) 180px;gap:0 24px}.controls a{grid-column:2;grid-row:1/3;font-size:24px}.controls p{grid-column:1/-1;grid-row:3;max-width:none;margin-top:10px}.controls #preview-status{grid-column:1/-1;grid-row:4;margin-top:8px}.controls small:last-child{grid-column:1/-1;grid-row:5;margin-top:5px}}