/* A full-bleed playback window with a separate file inspector. */
#viewer{background:#f5f5f3;color:#252b32;overflow:hidden}#viewer::backdrop{background:#f5f5f3}
#viewer .project-top{position:relative;top:auto;height:36px;min-height:36px;margin:0;padding:0 10px;border:0;border-bottom:1px solid #b8bdc4;background:linear-gradient(#fafafa,#e1e3e6);box-shadow:none;backdrop-filter:none;font:9px Tahoma,Arial,sans-serif;letter-spacing:0}#viewer .close{display:flex;align-items:center;gap:10px;padding:0;font:22px/30px Arial,sans-serif;color:#334153}#viewer .close span{font:9px Tahoma,Arial,sans-serif}#viewer .project-top>div{gap:0}#viewer .project-top>div button{height:27px;min-width:30px;padding:0;font:16px Arial,sans-serif;background:none;border:0;border-left:1px solid #c2c6cd}#viewer #project-number{font:9px 'Courier New',monospace;color:#646e7b}
#viewer .project-content{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,30vw,390px);width:100%;max-width:none;height:calc(100svh - 36px);margin:0;padding:0;gap:0}#viewer .project-media{min-width:0;min-height:0;background:#0b0b0b}#viewer .camcorder{display:grid;grid-template-rows:minmax(0,1fr) 29px;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#0b0b0b;color:#fff;overflow:hidden;--lcd:#fff;--muted-lcd:#7b828b;font:10px 'Courier New',monospace}#viewer .player-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;background:#0b0b0b;border:0}#viewer #film{display:block;width:100%;height:100%;max-height:none;min-height:0;object-fit:contain;border:0;border-radius:0}
.play-hud{position:absolute;inset:auto 0 0;z-index:3;display:flex;align-items:center;gap:15px;height:55px;padding:10px 14px 15px;background:linear-gradient(transparent,#0008);transition:opacity .15s linear}.play-hud button{padding:5px 0;min-height:30px;min-width:40px;color:#fff;font:10px 'Courier New',monospace;text-shadow:0 1px 2px #000;background:none;border:0}.hud-spacer{flex:1}.play-hud #fullscreen{font:10px 'Courier New',monospace;padding:5px 0}.play-hud #mute{font:10px 'Courier New',monospace;min-width:65px}.play-hud #seek{appearance:none;-webkit-appearance:none;position:absolute;bottom:0;left:0;width:100%;height:3px;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;background:linear-gradient(to right,#fff var(--progress,0%),#ffffff35 var(--progress,0%));accent-color:#fff}.play-hud #seek::-webkit-slider-thumb{appearance:none;width:3px;height:9px;background:#fff;border:0}.play-hud #seek::-moz-range-thumb{width:3px;height:9px;background:#fff;border:0;border-radius:0}#viewer .quiet.is-playing .play-hud{opacity:0;pointer-events:none}#viewer .camcorder:has(:focus-visible) .play-hud{opacity:1;pointer-events:auto}
.video-readout{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 11px;height:29px;background:#f5f5f3;border-top:1px solid #b6bcc4;color:#354052;font:10px/1 'Courier New',monospace;font-variant-numeric:tabular-nums}.video-readout>span{font:8px Tahoma,Arial,sans-serif;color:#848c97}.video-readout #timecode{font-weight:bold}.readout-separator,.video-readout #total-time{color:#858c95}#viewer #buffering{top:12px;right:12px;left:auto;transform:none;padding:3px 5px;margin:0;background:#0008;color:#ddd;font:9px 'Courier New',monospace;letter-spacing:0}#viewer #video-error{font:12px Tahoma,Arial,sans-serif}
.project-sidebar{display:flex;flex-direction:column;align-items:stretch;min-width:0;overflow:auto;border-left:1px solid #aeb5bf;background:#f5f5f3;padding:0 23px 18px}.inspector-tab{align-self:flex-start;margin:19px 0 28px;padding:5px 9px;border:1px solid #b2b9c2;border-bottom-color:#f5f5f3;background:linear-gradient(#fff,#e8e9ec);font:8px Tahoma,Arial,sans-serif;color:#5a687a}.project-sidebar .viewer-heading{margin:0 0 28px}.project-sidebar .artist-line{display:block;margin:0 0 12px}.project-sidebar .artist-line p{font:700 clamp(17px,2vw,26px)/1.1 Arial,sans-serif;margin:0 0 9px;color:#37485f;letter-spacing:-.5px}.project-sidebar .artist-line>span{font:8px 'Courier New',monospace;letter-spacing:.05em;color:#858b95}.project-sidebar .viewer-heading h1{font:700 clamp(25px,3.2vw,44px)/.98 Arial,Helvetica,sans-serif;letter-spacing:-1.3px;text-transform:uppercase;overflow-wrap:anywhere;color:#242b35}
#viewer .project-info{display:flex;flex-direction:column;gap:25px;flex-wrap:nowrap;margin:0;padding:0;border:0}#viewer .project-info>div{flex:none;min-width:0}#viewer .project-info p{margin:0;font:12px/1.65 Tahoma,Arial,sans-serif;white-space:pre-line;color:#626b76}#viewer .detail-label{display:block;margin:0 0 10px;font:8px 'Courier New',monospace;color:#8b919a;letter-spacing:.03em}#viewer .role-chips{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}#viewer .role-chips span{font:11px/1.6 Tahoma,Arial,sans-serif;color:#3d4858}#viewer .role-chips span:before{content:none}.file-properties{margin-top:auto;padding-top:32px;overflow-wrap:anywhere}.file-properties .project-summary{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #cdd1d6;padding-top:10px;margin:0 0 8px;font:9px 'Courier New',monospace;color:#8b929c}.file-properties #viewer-file{font:8px/1.5 'Courier New',monospace;color:#9a9fa7}
#viewer .camcorder:fullscreen{display:grid;width:100%;height:100%;padding:0;border:0;border-radius:0;grid-template-rows:minmax(0,1fr) 29px;background:#000}#viewer .camcorder:fullscreen .player-wrap{min-height:0;flex:none}#viewer .camcorder:fullscreen #film{height:100%;width:100%;max-height:none}.play-hud button:focus-visible,.play-hud input:focus-visible{outline:1px dotted #fff;outline-offset:2px}
@media(max-width:640px){#viewer{overflow:auto}#viewer .project-content{display:flex;flex-direction:column;height:auto;min-height:calc(100svh - 36px)}#viewer .project-top{position:sticky;top:0;z-index:6}#viewer .project-media{height:57svh;min-height:240px;flex:none}.project-sidebar{overflow:visible;border-left:0;border-top:1px solid #b9bfc8;padding:0 18px 20px}.inspector-tab{margin:15px 0 20px}.project-sidebar .viewer-heading h1{font-size:36px}.project-sidebar .viewer-heading{margin-bottom:20px}#viewer .project-info{gap:18px}.file-properties{padding-top:25px}.project-sidebar .artist-line p{font-size:22px}}
/* The video defines its own box: no artificial letterbox around the player. */
#viewer .project-media{display:flex;align-items:flex-start;justify-content:flex-start;background:#f5f5f3}#viewer .project-media .camcorder{height:auto;width:min(100%,calc((100svh - 65px)*var(--video-ratio,1.7778)));grid-template-rows:auto 29px}#viewer .project-media .player-wrap{width:100%;aspect-ratio:var(--video-ratio,1.7778)}#viewer .project-media #film{position:absolute;inset:0;width:100%;height:100%}#viewer .camcorder:fullscreen{width:100%;height:100%;grid-template-rows:minmax(0,1fr) 29px}#viewer .camcorder:fullscreen .player-wrap{aspect-ratio:auto}#viewer .camcorder:fullscreen #film{position:absolute;inset:0}@media(max-width:640px){#viewer .project-media{height:auto;min-height:0;display:block}#viewer .project-media .camcorder{width:min(100%,calc((70svh - 29px)*var(--video-ratio,1.7778)));margin:0 auto}#viewer .camcorder:fullscreen{width:100%;height:100%;margin:0}}

/* Project reading order: artist / title, approach, disciplines, collaborators. */
#viewer .project-content{grid-template-columns:minmax(0,1fr) clamp(290px,33vw,440px)}
#viewer .project-sidebar{padding:30px 27px 22px;gap:0}
#viewer .project-sidebar .viewer-heading{margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid #cdd1d6}
#viewer .project-sidebar .artist-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
#viewer .project-sidebar .artist-line p{margin:0;font:700 clamp(17px,1.8vw,23px)/1.2 Arial,sans-serif;letter-spacing:-.3px;color:#45536a}
#viewer .project-sidebar .artist-line>span{font:8px/1.4 Tahoma,Arial,sans-serif;color:#687483;letter-spacing:.02em}
#viewer .project-sidebar .viewer-heading h1{margin:0;font:700 clamp(28px,3.4vw,46px)/1.04 Arial,Helvetica,sans-serif;letter-spacing:-1.2px;overflow-wrap:break-word}
#viewer .project-info{gap:27px}#viewer .project-info>[hidden]{display:none}
#viewer .detail-label{font:9px/1.3 Tahoma,Arial,sans-serif;letter-spacing:.04em;color:#6c7786;margin-bottom:9px}
#viewer #viewer-insight{font:14px/1.65 Tahoma,Arial,sans-serif;color:#303b49;white-space:pre-line}
#viewer #viewer-description{font:12px/1.7 Tahoma,Arial,sans-serif;color:#68717d}
#viewer .role-chips{display:flex;flex-wrap:wrap;gap:6px 13px}#viewer .role-chips span{font:11px/1.5 Tahoma,Arial,sans-serif;color:#4e5b6b}
#viewer #viewer-credits{font:12px/1.6 Tahoma,Arial,sans-serif;color:#4e5b6b}
#viewer .file-properties{margin-top:32px;padding-top:14px;border-top:1px solid #cdd1d6}
#viewer .file-properties summary{font:8px/1.5 Tahoma,Arial,sans-serif;color:#7d8693;cursor:pointer;letter-spacing:.03em}
#viewer .file-properties .project-summary{margin-top:13px;border:0;padding-top:0}
@media(max-width:640px){#viewer .project-sidebar{padding:23px 19px 25px}#viewer .project-sidebar .viewer-heading{margin-bottom:23px;padding-bottom:21px}#viewer .project-sidebar .viewer-heading h1{font-size:34px}#viewer .project-sidebar .artist-line p{font-size:20px}#viewer #viewer-insight{font-size:14px}#viewer .project-info{gap:23px}}
/* Compact file labels and rectangular discipline tags. */
#viewer .project-sidebar .artist-line{align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:7px;margin-bottom:8px}
#viewer .project-sidebar .artist-line p{display:inline-block;margin:0;padding:5px 8px;background:#e1e2e2;border:1px solid #b8bbbf;color:#252525;font:700 15px/1.1 Tahoma,Arial,sans-serif;letter-spacing:0}
#viewer .project-sidebar .artist-line>span{display:inline-block;padding:6px 8px;border:1px solid #171717;background:#171717;color:#fff;font:9px/1.1 Tahoma,Arial,sans-serif;letter-spacing:.02em}
#viewer .role-chips{gap:6px}
#viewer .role-chips span{display:inline-block;padding:5px 8px;border:1px solid #b9bdc2;background:#ececeb;color:#30343a;font:11px/1.2 Tahoma,Arial,sans-serif}
@media(max-width:640px){#viewer .project-sidebar .artist-line p{font-size:14px}#viewer .project-sidebar .artist-line{margin-bottom:8px}}
#viewer .project-sidebar .artist-line p{padding:0;background:none;border:0;color:#222;font:700 19px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.3px}
#viewer .project-sidebar .artist-line>span{order:-1}
#viewer .project-sidebar .artist-line{gap:10px}
#viewer .role-chips span{border-color:#171717;background:#171717;color:#fff}
@media(max-width:640px){#viewer .project-sidebar .artist-line p{font-size:19px}}
#viewer .project-sidebar .artist-line{justify-content:space-between;align-items:center}
#viewer .project-sidebar .artist-line p{font-size:28px;letter-spacing:-.6px}
#viewer .project-sidebar .artist-line>span{order:0}
@media(max-width:640px){#viewer .project-sidebar .artist-line p{font-size:26px}}
/* A compact display title, closer to a music sleeve than a file heading. */
#viewer .project-sidebar .viewer-heading h1{font-family:Impact,'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-stretch:condensed;font-weight:900;font-size:clamp(44px,5.2vw,76px);line-height:.96;letter-spacing:-.025em;color:#171717;text-transform:uppercase;margin:0;overflow-wrap:break-word;text-wrap:balance}
#viewer .project-sidebar .artist-line{margin-bottom:12px}
#viewer .project-sidebar .viewer-heading{padding-bottom:25px}
@media(max-width:640px){#viewer .project-sidebar .viewer-heading h1{font-size:clamp(46px,12vw,68px)}}
#viewer .project-sidebar .artist-line p{font-family:Arial,Helvetica,sans-serif;font-weight:700}
#viewer .project-sidebar .viewer-heading h1{font-family:Arial,Helvetica,sans-serif;font-stretch:normal;font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.8px;text-wrap:initial}
@media(max-width:640px){#viewer .project-sidebar .viewer-heading h1{font-size:34px}}
#viewer .project-sidebar .artist-line{margin-bottom:2px}
#viewer .project-sidebar{background:#fff}
#viewer .project-sidebar .viewer-heading{background:#171717;margin:-30px -27px 28px;padding:30px 27px 25px;border-bottom:0}
#viewer .project-sidebar .artist-line p,#viewer .project-sidebar .viewer-heading h1{color:#fff}
#viewer .project-sidebar .artist-line>span{border-color:#777;background:#171717;color:#fff}
@media(max-width:640px){#viewer .project-sidebar .viewer-heading{margin:-23px -19px 23px;padding:23px 19px 21px}}
#viewer .project-sidebar .viewer-heading{background:#35577f}
#viewer .project-sidebar .artist-line>span{background:#35577f;border-color:#8fa6c0;color:#fff}

#viewer .viewer-heading .role-block{margin-top:13px}
#viewer .viewer-heading .role-chips{display:flex;flex-wrap:wrap;gap:2px 0}
#viewer .viewer-heading .role-chips span{padding:0;border:0;background:none;color:#dce5ef;font:10px/1.6 Tahoma,Arial,sans-serif}
#viewer .viewer-heading .role-chips span+span:before{content:'·';display:inline;margin:0 6px;color:#a9bed5}

#viewer .video-readout{background:#111;border-top:1px solid #333;color:#eee}#viewer .video-readout>span,#viewer .video-readout #total-time,#viewer .readout-separator{color:#9b9b9b}
#viewer .project-story{margin:0;min-width:0}
#viewer .project-story h2{font:700 19px/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.4px;color:#23272d;margin:0 0 17px}
#viewer #viewer-insight p{font:13px/1.8 Tahoma,Arial,sans-serif;color:#414852;margin:0 0 17px;white-space:pre-line}
#viewer #viewer-insight p:first-child{font-size:15px;line-height:1.7;color:#252c35}
#viewer #story-gallery{display:flex;flex-direction:column;gap:21px;margin-top:22px}#viewer #story-gallery:empty{display:none}
#viewer #story-gallery figure{margin:0}#viewer #story-gallery img{display:block;width:100%;height:auto;background:#eee}
#viewer #story-gallery figcaption{font:10px/1.6 Tahoma,Arial,sans-serif;color:#77808c;margin-top:7px}

/* A conversation window beside the screening, with room for images and notes. */
#viewer .project-content{grid-template-columns:minmax(0,1.08fr) minmax(350px,1fr)}
#viewer .project-sidebar{padding-left:25px;padding-right:25px;background:#fafafa}
#viewer .project-sidebar .viewer-heading{margin-left:-25px;margin-right:-25px;padding-left:25px;padding-right:25px}
#viewer .project-story{border:1px solid #b1bac6;background:#fff;box-shadow:1px 1px 0 #d0d4da}
#viewer .chat-toolbar{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid #b6bec9;background:linear-gradient(#f6f7f9,#e0e5eb);font:700 11px/1.2 Tahoma,Arial,sans-serif;color:#334d6e}
#viewer .chat-led{width:6px;height:6px;background:#55789e;border:1px solid #3f6086;box-shadow:inset 1px 1px #a2bad3}
#viewer .chat-status{margin-left:auto;font:9px Tahoma,Arial,sans-serif;color:#7b8796}
#viewer .chat-transcript{padding:17px 14px 12px}
#viewer .chat-message{margin:0 0 20px;padding-left:10px;border-left:2px solid #d5dfec}
#viewer .chat-sender{display:block;margin-bottom:6px;font:700 10px/1.3 Tahoma,Arial,sans-serif;color:#35577f}
#viewer #viewer-insight .chat-message p,#viewer #viewer-insight .chat-message p:first-child{font:13px/1.7 Tahoma,Arial,sans-serif;color:#303946;margin:0;white-space:pre-line}
#viewer #story-gallery{margin-top:7px;gap:17px}
#viewer #story-gallery .chat-attachment{padding:5px;background:#f1f3f6;border:1px solid #c7ced7}
#viewer .attachment-label{padding:3px 3px 8px;font:10px/1.4 Tahoma,Arial,sans-serif;color:#61738c}
#viewer #story-gallery img{border:1px solid #c3c9d1;width:100%;height:auto;box-sizing:border-box}
#viewer #story-gallery figcaption{margin:7px 3px 3px;color:#5e6b7e}
#viewer .chat-end{margin-top:17px;color:#8d9cad;font:11px 'Courier New',monospace}
@media(max-width:640px){#viewer .project-sidebar{padding-left:19px;padding-right:19px}#viewer .project-sidebar .viewer-heading{margin-left:-19px;margin-right:-19px;padding-left:19px;padding-right:19px}#viewer .chat-transcript{padding:14px 11px}#viewer .project-media .camcorder{width:min(100%,calc((56svh - 29px)*var(--video-ratio,1.7778)))}}

#viewer .project-content{grid-template-columns:minmax(0,1fr) clamp(320px,39vw,480px)}
.project-edit-link{display:inline-block;align-self:flex-start;margin-top:20px;color:#687b93;font:9px/1.4 Tahoma,Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}
.project-edit-link[hidden]{display:none}
#viewer .viewer-heading .role-chips{display:flex;flex-wrap:nowrap;gap:0;white-space:nowrap;overflow-x:auto;scrollbar-width:thin}
#viewer .viewer-heading .role-chips span{font-weight:700;font-size:10px;flex:none;color:#fff}
#viewer .project-story{margin-left:-25px;margin-right:-25px;border-left:0;border-right:0;box-shadow:none}
#viewer .project-story .chat-toolbar{padding-left:25px;padding-right:25px}
#viewer .project-story .chat-transcript{padding-left:25px;padding-right:25px}
@media(max-width:640px){#viewer .project-story{margin-left:-19px;margin-right:-19px}#viewer .project-story .chat-toolbar,#viewer .project-story .chat-transcript{padding-left:19px;padding-right:19px}}

/* Keep the first role on the same baseline as roles with a separator. */
#viewer .viewer-heading .role-chips{display:flex;align-items:center;flex-wrap:nowrap;gap:0}
#viewer .viewer-heading .role-chips span{display:inline-flex;align-items:center;line-height:16px;min-height:16px;margin:0;padding:0}
#viewer .viewer-heading .role-chips span+span:before{display:inline-block;position:static;width:auto;height:auto;line-height:16px;vertical-align:baseline;transform:none;background:none;border:0}
#viewer .project-sidebar .viewer-heading{margin-bottom:0}
/* A quiet editing-deck filmstrip under the image, in the unused player space. */
#viewer .project-media{background:#101113;flex-direction:column;align-items:stretch;overflow:auto}
#viewer .project-media .camcorder{flex:none;align-self:center;width:min(100%,calc((100svh - 187px)*var(--video-ratio,1.7778)));background:#101113}
#viewer .film-timeline{flex:none;width:100%;padding:18px 15px 24px;border-top:1px solid #303237;background:#17191c;color:#8b9099}
#viewer .timeline-heading{display:flex;justify-content:space-between;gap:14px;margin-bottom:13px;font:8px/1.4 Tahoma,Arial,sans-serif;letter-spacing:.04em}
#viewer .timeline-heading span:last-child{font-size:7px;color:#626974}
#viewer .timeline-track{position:relative;border-top:1px solid #5c626c;padding-top:8px}
#viewer #timeline-frames{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px}
#viewer #timeline-frames button{position:relative;min-width:0;height:66px;padding:0;border:0;background-color:#24272b;background-size:1000% auto;background-repeat:no-repeat;cursor:pointer;opacity:.68;transition:opacity .15s linear;overflow:hidden}
#viewer #timeline-frames button:hover,#viewer #timeline-frames button.active{opacity:1}
#viewer #timeline-frames button:focus-visible{outline:2px solid #a7bdd6;outline-offset:-2px;opacity:1}
#viewer #timeline-frames button span{position:absolute;bottom:0;left:0;right:0;background:#0009;color:#d8dce1;padding:4px 1px;font:8px/1 'Courier New',monospace;text-align:center}
#viewer #timeline-playhead{position:absolute;pointer-events:none;left:var(--playhead,0%);top:-4px;bottom:0;width:1px;background:#c3d4e7;z-index:2;transform:translateX(-.5px)}
#viewer #timeline-playhead i{position:absolute;top:0;left:-3px;width:7px;height:7px;background:#c3d4e7;clip-path:polygon(0 0,100% 0,100% 50%,50% 100%,0 50%)}
@media(max-width:640px){#viewer .project-media .camcorder{width:min(100%,calc((56svh - 29px)*var(--video-ratio,1.7778)))}#viewer .film-timeline{padding:12px 10px 15px}#viewer #timeline-frames button{height:46px}#viewer .timeline-heading span:last-child{display:none}#viewer #timeline-frames button span{font-size:6px}}
#viewer .project-media .camcorder{width:min(100%,calc((100svh - 215px)*var(--video-ratio,1.7778)))}
#viewer .project-media .camcorder:fullscreen{width:100%;height:100%;align-self:stretch}
@media(max-width:640px){#viewer .project-media .camcorder{width:min(100%,calc((56svh - 29px)*var(--video-ratio,1.7778)))}}

#viewer .timeline-track{cursor:crosshair;touch-action:none;user-select:none}
#viewer .timeline-track.is-scrubbing{cursor:ew-resize}
#viewer .timeline-track:focus-visible{outline:1px solid #a7bdd6;outline-offset:4px}
#viewer .timeline-track:hover:after,#viewer .timeline-track.is-scrubbing:after{content:attr(data-hover-time);position:absolute;left:clamp(22px,var(--hover-x,0%),calc(100% - 22px));top:-24px;transform:translateX(-50%);background:#d8e2ef;color:#1d2939;padding:3px 5px;font:9px/1 'Courier New',monospace;pointer-events:none;z-index:4}
#viewer .timeline-heading span:last-child{font-size:0}#viewer .timeline-heading span:last-child:after{content:'TRASCINA PER SCORRERE IL VIDEO';font-size:7px}
/* Keep the shared site navigation available above both viewing rooms. */
body>header{position:relative;z-index:600}
#viewer,#television{position:fixed;top:var(--header-edge,63px);left:0;width:100%;height:calc(100svh - var(--header-edge,63px));max-height:calc(100svh - var(--header-edge,63px));margin:0;z-index:300}
#viewer .project-content{height:calc(100svh - var(--header-edge,63px) - 36px)}
#viewer .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 215px)*var(--video-ratio,1.7778)))}
#viewer .project-media .camcorder:fullscreen{width:100%;height:100%}
@media(max-width:640px){#viewer .project-content{height:auto;min-height:calc(100svh - var(--header-edge,63px) - 36px)}#viewer .project-media .camcorder{width:min(100%,calc((56svh - 29px)*var(--video-ratio,1.7778)))}}
#viewer .video-comments{width:100%;flex:none;background:#17191c;color:#bcc5d1;border-top:1px solid #3b414b;padding:14px 15px;font:10px Tahoma,Arial,sans-serif}
.comments-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font:9px 'Courier New',monospace}.comments-heading b{color:#7c94b5;margin-left:5px}.video-comments button{font:9px 'Courier New',monospace;color:#c4d7f1;padding:5px 7px;border:1px solid #47556b;background:#28374c}.comment-markers{height:31px;margin:13px 12px 0;position:relative;border-top:2px solid #52627a;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#3c424c calc(10% - 1px),#3c424c 10%)}.video-comments .comment-marker{position:absolute;top:-2px;transform:translateX(-50%);width:23px;height:24px;padding:0;background:#36577f;border:1px solid #7d96b6;color:#fff;font:bold 11px Tahoma}.comment-marker:hover,.comment-marker:focus-visible{z-index:3;outline:2px solid #d9e8fb}.comment-list{max-height:175px;overflow:auto}.video-comment{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;padding:10px 3px;border-bottom:1px dotted #3d4652}.video-comment strong{align-self:center;color:#e2e7ee}.video-comment p{grid-column:2;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.5 Tahoma,Arial,sans-serif}.video-comment.selected{background:#25344b}.comments-status{font:10px/1.5 Tahoma;color:#939faf;margin:8px 0}.comment-compose{padding:12px;margin:5px 0 10px;background:#222a36;border:1px solid #48566b}.comment-compose[hidden]{display:none}.comment-compose label{display:block;font:10px Tahoma;margin:9px 0}.comment-compose input,.comment-compose textarea{display:block;width:100%;margin-top:5px;background:#121820;border:1px solid #536077;color:#fff;padding:8px;font:12px Tahoma}.comment-compose>div:last-child{display:flex;gap:8px}.comment-at{font:10px 'Courier New',monospace;color:#b5ccea}

/* Comments and filmstrip share one track. The player above handles transport. */
#viewer .film-timeline{padding-bottom:12px}
#viewer .timeline-heading{display:block}
#viewer .timeline-heading .comments-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}
#viewer .timeline-heading .comments-heading>span:last-child{display:inline}
#viewer .timeline-heading button{font:9px 'Courier New',monospace;color:#c4d7f1;padding:5px 7px;border:1px solid #47556b;background:#28374c}
#viewer .timeline-track .comment-markers{position:absolute;inset:8px 0 0;margin:0;height:auto;border:0;background:none;pointer-events:none;z-index:5}
#viewer .timeline-track .comment-marker{position:absolute;bottom:0;top:auto;pointer-events:auto;transform:translateX(-50%);width:23px;height:24px;padding:0;background:#36577f;border:1px solid #9cb6d6;color:#fff;font:bold 11px Tahoma;box-shadow:0 -2px 6px #0005;cursor:pointer}
#viewer .timeline-track .comment-marker:hover,#viewer .timeline-track .comment-marker:focus-visible{z-index:6;outline:2px solid #d9e8fb}
#viewer .film-timeline>.video-comments{border:0;padding:9px 0 0;background:transparent}
#viewer .film-timeline .comments-status{margin:4px 0;font-size:9px}
#viewer .film-timeline .comment-compose{margin:5px 0 8px}
#viewer .timeline-heading .comments-heading span{font-size:inherit;color:inherit;display:inline}
#viewer .timeline-heading .comments-heading span:after{content:none}
/* A visible invitation and a short, contextual writing flow. */
#viewer .timeline-heading .comments-heading{font:12px Tahoma,Arial,sans-serif;letter-spacing:0;color:#d4dce7}
#viewer .timeline-heading button{font:11px Tahoma,Arial,sans-serif;padding:7px 10px}
#viewer .film-timeline .comment-hint{font:11px/1.5 Tahoma,Arial,sans-serif;color:#9da9b9;margin:2px 0 12px}
#viewer .comment-prompt{display:flex;align-items:center;gap:11px;width:100%;padding:12px;text-align:left;background:#242c38;border:1px solid #57657a;color:#c6cfdb;font:12px/1.4 Tahoma,Arial,sans-serif;cursor:text}
#viewer .comment-prompt:hover{background:#2b3748;border-color:#8ba9cf}.comment-prompt b{margin-left:auto;color:#8396ae}.comment-avatar{display:grid;place-items:center;flex:none;width:27px;height:27px;background:#344b68;color:#dbe7f6;font:20px Arial}
#viewer .comment-prompt[hidden]{display:none}
#viewer .comment-compose{padding:13px;background:#222b38;border-color:#7892b4}
.comment-context{display:flex;align-items:center;justify-content:space-between;gap:10px}.comment-context .comment-at{font:bold 12px 'Courier New',monospace;background:#35577f;color:white;padding:5px 8px}
#viewer .comment-retime{padding:4px 0;border:0;background:none;color:#a8c1e3;text-decoration:underline;font:10px Tahoma}
.sr-comment-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
#viewer .comment-compose textarea{font:13px/1.6 Tahoma,Arial,sans-serif;min-height:82px;resize:vertical;margin:10px 0 0;padding:10px;background:#161d27;border-color:#56657b}
#viewer .comment-identity{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
#viewer .comment-identity label{flex:1;max-width:240px;color:#aebacb;font-size:11px;margin:0 0 10px}
#viewer .comment-identity input{font-size:12px;padding:8px;margin-top:6px}
.comment-limit{font:10px Tahoma;color:#8d9caf;padding-bottom:20px}
#viewer .comment-compose .comment-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.comment-actions>span{font:10px/1.4 Tahoma;color:#9baabd;flex:1;min-width:100px}
#viewer .comment-actions button{font:11px Tahoma;padding:8px 10px}#viewer .comment-actions button[type=submit]{background:#446a9d;border-color:#7696bf;color:white}#viewer .comment-actions .comment-cancel{background:transparent;border-color:transparent;color:#a9b9cd}
#viewer .video-comment{padding:13px 5px;gap:6px 10px}#viewer .video-comment strong{font:700 12px Tahoma}#viewer .video-comment p{font-size:12px;line-height:1.6}#viewer .comment-list:empty{display:none}#viewer .comment-list:not(:empty){margin-top:14px}
/* Keep the filmstrip and comment invitation inside the first viewport. */
#viewer .film-timeline{padding:10px 15px 8px}
#viewer .timeline-heading{margin-bottom:7px}
#viewer #timeline-frames button{height:39px}
#viewer #timeline-frames button span{padding:2px 1px;font-size:7px}
#viewer .timeline-track{padding-top:5px}
#viewer .timeline-track .comment-markers{top:5px}
#viewer .film-timeline>.video-comments{padding-top:6px}
#viewer .film-timeline .comment-hint{margin:0 0 6px;font-size:10px}
#viewer .comment-prompt{padding:8px 10px;font-size:11px;gap:8px}
#viewer .comment-avatar{width:21px;height:21px;font-size:17px}
#viewer .film-timeline .comments-status:empty{display:none}
@media(min-width:641px){#viewer .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 245px)*var(--video-ratio,1.7778)))}}
@media(max-width:640px){#viewer .film-timeline{padding:9px 10px 8px}#viewer #timeline-frames button{height:31px}}

#viewer .comment-user-icon{display:block;position:relative;width:14px;height:16px;margin:auto;pointer-events:none}
#viewer .comment-user-icon:before{content:'';position:absolute;width:5px;height:5px;border:1px solid currentColor;border-radius:50%;left:4px;top:1px}
#viewer .comment-user-icon:after{content:'';position:absolute;width:11px;height:6px;border:1px solid currentColor;border-radius:6px 6px 1px 1px;left:1px;bottom:1px}
/* Project sheets live in a desktop window over the exploration canvas. */
#viewer{--window-gap:24px;top:calc(var(--header-edge,63px) + var(--window-gap));left:50%;transform:translateX(-50%);width:min(1380px,calc(100% - 64px));height:calc(100svh - var(--header-edge,63px) - 64px);max-height:calc(100svh - var(--header-edge,63px) - 64px);border:1px solid #8b939f;border-top-color:#fff;border-left-color:#fff;padding:4px;box-shadow:inset -1px -1px #8c929a,4px 7px 22px #17243645;background:#dedfe1}
#viewer .project-top{height:31px;min-height:31px;padding:0 6px 0 10px;background:linear-gradient(90deg,#315b9e,#5b80be);border:0;color:#fff}
#viewer .project-top>span{order:0;color:#fff;font:700 10px Tahoma,Arial,sans-serif;letter-spacing:.04em}
#viewer .project-top>div{order:1;margin-left:auto;margin-right:9px;gap:4px}
#viewer .project-top>form{order:2}
#viewer .project-top button{height:22px;min-width:23px;padding:0 5px;display:flex;justify-content:center;align-items:center;background:linear-gradient(#fafafa,#d5d7da);color:#344358;border:1px solid;border-color:#fff #626e7d #626e7d #fff;box-shadow:1px 1px #244374;font:15px Arial}
#viewer .project-top .close{font-size:20px;gap:0}#viewer .project-top .close span{display:none}
#viewer .project-content{height:calc(100% - 31px);min-height:0;background:#f5f5f3}
@media(min-width:641px){#viewer .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 310px)*var(--video-ratio,1.7778)))}}
#viewer .project-media .camcorder:fullscreen{width:100%;height:100%}
@media(max-width:640px){#viewer{--window-gap:10px;width:calc(100% - 18px);height:calc(100svh - var(--header-edge,63px) - 28px);max-height:calc(100svh - var(--header-edge,63px) - 28px);overflow:auto}#viewer .project-top{position:sticky;top:-4px;z-index:20}#viewer .project-content{height:auto;min-height:calc(100% - 31px)}#viewer .project-top>span{display:block;font-size:9px}}

#viewer .project-top>span#project-number{font:700 12px/1.2 Tahoma,Arial,sans-serif;color:#fff;background:none;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin-right:14px;text-shadow:1px 1px #234574;user-select:none}
#viewer .project-top{cursor:grab;touch-action:none;user-select:none}
#viewer .project-top.window-dragging{cursor:grabbing}
#viewer .project-top>div,#viewer .project-top>form{flex-shrink:0}
#viewer .project-top button{cursor:pointer}
@media(max-width:640px){#viewer .project-top{cursor:default}#viewer .project-top>span#project-number{font-size:10px}}
#viewer .project-top{padding-right:10px}
#viewer .project-top>div{gap:7px;margin-right:12px}
#viewer .project-top button{min-width:26px}
#viewer .project-top button{height:17px;min-width:20px;padding:0 3px;font-size:12px;line-height:1}
#viewer .project-top .close{font-size:15px}
#viewer .project-top>div button,#viewer .project-top>form .close{box-sizing:border-box;height:17px;min-height:0;min-width:20px;width:20px;padding:0;line-height:15px;font:12px/15px Arial,sans-serif;background:linear-gradient(#fafafa,#d5d7da);border:1px solid;border-color:#fff #626e7d #626e7d #fff;box-shadow:1px 1px #244374}

/* Portrait films get a tall screen and a separate annotation lane. */
@media(min-width:850px){
 #viewer.portrait-project .project-content{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}
 #viewer.portrait-project .project-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.9fr);align-items:start;gap:0;overflow:hidden}
 #viewer.portrait-project .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 140px)*var(--video-ratio)));align-self:center;justify-self:center}
 #viewer.portrait-project .film-timeline{height:100%;overflow:auto;border-top:0;border-left:1px solid #363b43;padding:16px 12px;background:#1b1e23}
 #viewer.portrait-project .timeline-heading .comments-heading{align-items:flex-start;flex-direction:column;gap:9px}
 #viewer.portrait-project #timeline-frames{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
 #viewer.portrait-project #timeline-frames button{height:60px;background-size:1000% 100%;}
 #viewer.portrait-project .timeline-track{margin-top:5px}
 #viewer.portrait-project .film-timeline>.video-comments{padding-top:13px}
 #viewer.portrait-project .comment-prompt{align-items:flex-start;padding:10px;line-height:1.5}
 #viewer.portrait-project .comment-prompt b{display:none}
 #viewer.portrait-project .comment-list{max-height:none}
 #viewer.portrait-project .comment-compose{padding:9px}
 #viewer.portrait-project .comment-context{align-items:flex-start;flex-direction:column}
 #viewer.portrait-project .comment-actions>span{flex-basis:100%}
 #viewer.portrait-project .project-media .camcorder:fullscreen{width:100%;height:100%}
}
@media(min-width:850px){#viewer.portrait-project #timeline-frames{grid-template-columns:repeat(10,minmax(0,1fr));gap:1px}#viewer.portrait-project #timeline-frames button{height:45px;background-size:1000% auto}#viewer.portrait-project #timeline-frames button span{display:none}}

/* Portrait: keep attention on the film; discussion follows the project notes. */
@media(min-width:850px){
 #viewer.portrait-project .project-content{grid-template-columns:minmax(260px,.85fr) minmax(350px,1fr)}
 #viewer.portrait-project .project-media{display:flex;align-items:center;justify-content:center;padding:0 12px;border-right:1px solid #353b45}
 #viewer.portrait-project .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 140px)*var(--video-ratio)))}
 #viewer.portrait-project .project-sidebar>.film-timeline{height:auto;flex:none;width:100%;margin-top:22px;border:1px solid #3a424e;padding:12px;background:#17191c;overflow:visible}
 #viewer.portrait-project .timeline-heading .comments-heading{flex-direction:row;align-items:center}
 #viewer.portrait-project #timeline-frames button{height:39px}
 #viewer.portrait-project #timeline-frames button span{display:block}
 #viewer.portrait-project .comment-list{max-height:180px}
 #viewer.portrait-project .comment-context{flex-direction:row;align-items:center}
 #viewer.portrait-project .comment-actions>span{flex-basis:auto}
}

#viewer .play-hud button{width:32px;height:32px;min-width:32px;padding:6px;display:flex;align-items:center;justify-content:center;background:#10172066;border:1px solid #ffffff35;color:#fff;text-shadow:none}
#viewer .play-hud button:hover,#viewer .play-hud button:focus-visible{background:#35577fcc;border-color:#b9cbe3}
#viewer .play-hud button svg{display:block;pointer-events:none;flex-shrink:0}
/* Playback takes priority; discussion stays a compact strip until expanded. */
#viewer:not(.portrait-project) .film-timeline{padding:7px 12px 6px}
#viewer:not(.portrait-project) .timeline-heading{margin-bottom:4px}
#viewer:not(.portrait-project) .timeline-heading .comments-heading{font-size:10px}
#viewer:not(.portrait-project) .timeline-heading button{font-size:10px;padding:4px 7px}
#viewer:not(.portrait-project) #timeline-frames button{height:27px}
#viewer:not(.portrait-project) #timeline-frames button span{font-size:6px;padding:1px}
#viewer:not(.portrait-project) .timeline-track{padding-top:3px}
#viewer:not(.portrait-project) .timeline-track .comment-markers{top:3px}
#viewer:not(.portrait-project) .film-timeline>.video-comments{padding-top:5px}
#viewer:not(.portrait-project) .comment-hint{display:none}
#viewer:not(.portrait-project) .comment-prompt{padding:5px 8px;font-size:10px;min-height:28px}
#viewer:not(.portrait-project) .comment-avatar{width:17px;height:17px;font-size:14px}
#viewer:not(.portrait-project) .comment-list{max-height:90px}
@media(min-width:641px){#viewer:not(.portrait-project) .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 245px)*var(--video-ratio,1.7778)))}}
#viewer:not(.portrait-project) .project-media .camcorder:fullscreen{width:100%;height:100%}

/* Comments are a player tool, opened only on request. */
#viewer .film-timeline.comments-collapsed{display:none}
#viewer .play-hud #player-comments[aria-expanded=true]{background:#35577fcc;border-color:#bdd3ed}
@media(min-width:641px){#viewer:not(.portrait-project) .project-media:has(.film-timeline.comments-collapsed) .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 140px)*var(--video-ratio,1.7778)))}}
#viewer .project-media .camcorder:fullscreen{width:100%!important;height:100%}
/* The video fills its pane; comments float without reserving a row. */
@media(min-width:641px){
 #viewer .project-media,#viewer.portrait-project .project-media{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;overflow:hidden}
 #viewer .project-media .camcorder,#viewer:not(.portrait-project) .project-media:has(.film-timeline.comments-collapsed) .camcorder,#viewer.portrait-project .project-media .camcorder{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-self:stretch;flex:1;margin:0}
 #viewer .project-media .player-wrap{flex:1;min-height:0;aspect-ratio:auto}
 #viewer .project-media .video-readout{flex:none}
}
#viewer .project-media{position:relative}
#viewer .project-media>.film-timeline,#viewer.portrait-project .project-media>.film-timeline{position:absolute;z-index:25;left:10px;right:10px;bottom:42px;width:auto;height:auto;max-height:65%;overflow:auto;border:1px solid #53647c;padding:10px 12px;background:#171c24f5;box-shadow:0 6px 25px #0009}
#viewer .project-media>.film-timeline.comments-collapsed{display:none}
/* Natural video proportions, with discussion in the remaining space below. */
#viewer .project-media,#viewer.portrait-project .project-media{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;overflow:auto;padding:0}
#viewer .project-media .camcorder,#viewer:not(.portrait-project) .project-media:has(.film-timeline.comments-collapsed) .camcorder,#viewer.portrait-project .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 245px)*var(--video-ratio,1.7778)));height:auto;flex:none;align-self:center;display:flex;flex-direction:column;margin:0;min-height:0}
#viewer .project-media .player-wrap{flex:none;width:100%;aspect-ratio:var(--video-ratio,1.7778);min-height:0}
#viewer .project-media>.film-timeline,#viewer.portrait-project .project-media>.film-timeline{position:relative;inset:auto;flex:none;display:block;width:100%;height:auto;max-height:none;overflow:visible;border:0;border-top:1px solid #303844;padding:9px 12px;background:#17191c;box-shadow:none}
#viewer .project-media>.film-timeline.comments-collapsed{display:block}
#viewer .project-media .camcorder:fullscreen{width:100%!important;height:100%;flex:1}
#viewer .project-media .camcorder:fullscreen .player-wrap{flex:1;aspect-ratio:auto}
@media(max-width:640px){#viewer .project-media .camcorder{width:min(100%,calc((60svh - 29px)*var(--video-ratio,1.7778)))}}
/* A familiar video discussion layout: heading, composer, then comments. */
#viewer .film-timeline .timeline-track{display:none}
#viewer .project-media>.film-timeline,#viewer.portrait-project .project-media>.film-timeline{background:#111316;padding:17px 19px 20px;border-top:1px solid #30343a}
#viewer .timeline-heading .comments-heading{font:700 14px Tahoma,Arial,sans-serif;color:#f0f2f5;gap:14px}
#viewer .timeline-heading .comments-heading b{font-weight:400;color:#929ba8;margin-left:6px}
#viewer .timeline-heading button{font:11px Tahoma,Arial,sans-serif;border:0;background:none;color:#aab9ce;padding:4px 0}
#viewer .film-timeline>.video-comments{padding-top:11px}
#viewer .film-timeline .comment-hint{display:none}
#viewer .comment-prompt{border:0;background:none;padding:0;gap:12px;font:12px Tahoma,Arial,sans-serif;color:#a4acb8;min-height:40px}
#viewer .comment-prompt:hover{background:none;border:0;color:#e3e9f1}
#viewer .comment-prompt>span:nth-child(2){flex:1;align-self:center;border-bottom:1px solid #58616e;padding:9px 0;text-align:left}
#viewer .comment-prompt>b{display:none}
#viewer .comment-avatar{width:32px;height:32px;border-radius:50%;background:#303b4a;font-size:0;position:relative}
#viewer .comment-avatar:before{content:'';position:absolute;top:7px;left:12px;width:7px;height:7px;border:1px solid #c2ccd9;border-radius:50%}
#viewer .comment-avatar:after{content:'';position:absolute;bottom:6px;left:8px;width:15px;height:8px;border:1px solid #c2ccd9;border-radius:9px 9px 3px 3px}
#viewer .comment-compose{border:0;background:none;padding:0 0 0 44px;margin:0 0 12px}
#viewer .comment-compose textarea{background:none;border:0;border-bottom:1px solid #8594aa;padding:7px 0;min-height:55px;margin:7px 0 12px;font:12px/1.6 Tahoma,Arial,sans-serif;border-radius:0}
#viewer .comment-identity input{background:#191d23;border:1px solid #3e4755;border-radius:3px;padding:7px 8px}
#viewer .comment-context .comment-at{background:none;padding:0;color:#9cbfe9;font:11px Tahoma,Arial,sans-serif}
#viewer .comment-actions button{border-radius:18px;padding:8px 13px}
#viewer .comment-actions button[type=submit]{background:#a8cdfb;color:#13253b;border:0;font-weight:700}
#viewer .comment-list{max-height:240px;margin-top:15px}
#viewer .video-comment{position:relative;grid-template-columns:1fr auto;padding:12px 0 12px 44px;gap:5px 10px;border-bottom:0}
#viewer .video-comment:before{content:'';position:absolute;left:0;top:12px;width:31px;height:31px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#b1bdcb 0 3px,transparent 4px),radial-gradient(ellipse at 50% 90%,#b1bdcb 0 9px,transparent 10px),#303b4a}
#viewer .video-comment>strong{grid-column:1;grid-row:1;font:700 11px Tahoma,Arial,sans-serif;color:#e6eaf0}
#viewer .video-comment>button{grid-column:2;grid-row:1;border:0;padding:0;background:none;color:#94bdec;font:10px Tahoma,Arial,sans-serif}
#viewer .video-comment>p{grid-column:1/-1;font:12px/1.6 Tahoma,Arial,sans-serif;color:#cdd3dd}
#viewer .video-comment.selected{background:none}
#viewer .comments-status{color:#9aa6b6;font-size:10px}
@media(max-width:640px){#viewer .project-media>.film-timeline{padding:14px 13px}#viewer .comment-compose{padding-left:0}}
#viewer:not(.portrait-project) .comment-avatar{width:32px;height:32px;font-size:0}
#viewer:not(.portrait-project) .comment-prompt{font-size:12px;padding:0;gap:12px;min-height:40px}
#viewer:not(.portrait-project) .timeline-heading .comments-heading{font-size:14px}
#viewer:not(.portrait-project) .timeline-heading button{font-size:11px}
/* Filmstrip lives inside the player, just above its seek bar. */
#viewer #camcorder{position:relative}
#viewer #camcorder>.timeline-track{position:absolute;z-index:12;left:12px;right:12px;bottom:48px;display:block;padding:4px;background:#12161df2;border:1px solid #55637a;opacity:0;visibility:hidden;transition:opacity .12s;box-shadow:0 3px 12px #0008}
#viewer #camcorder:has(#seek:hover)>.timeline-track,#viewer #camcorder:has(#seek:focus-visible)>.timeline-track,#viewer #camcorder>.timeline-track:hover,#viewer #camcorder>.timeline-track:focus-within,#viewer #camcorder>.timeline-track.is-scrubbing{opacity:1;visibility:visible}
#viewer #camcorder #timeline-frames button{height:40px}
#viewer #camcorder>.timeline-track:after{top:-22px}
#viewer #camcorder .comment-markers{inset:4px}
/* Compact composer with one obvious action. */
#viewer .comment-compose{display:grid;grid-template-columns:minmax(100px,1fr) auto;gap:6px 10px;padding:0 0 0 44px;margin:0}
#viewer .comment-compose[hidden]{display:none}
#viewer .comment-context{grid-column:1/-1;gap:8px}
#viewer .comment-compose .comment-message{grid-column:1/-1;margin:0}
#viewer .comment-compose textarea{min-height:38px;height:42px;max-height:90px;resize:vertical;padding:4px 0;margin:2px 0 5px;font-size:12px;line-height:1.4}
#viewer .comment-identity{grid-column:1;align-items:center}
#viewer .comment-identity label{font-size:0;margin:0;max-width:170px}
#viewer .comment-identity input{margin:0;font-size:11px;padding:6px 8px}
#viewer .comment-limit{display:none}
#viewer .comment-compose .comment-actions{grid-column:2;grid-row:3;flex-wrap:nowrap;gap:3px}
#viewer .comment-actions>span{display:none}
#viewer .comment-actions button{font-size:10px;padding:7px 9px;white-space:nowrap}
#viewer .comment-context .comment-at,#viewer .comment-retime{font-size:10px}
#viewer .film-timeline>.video-comments{padding-top:8px}
@media(max-width:640px){#viewer .comment-compose{padding-left:0}#viewer #camcorder #timeline-frames button{height:30px}}
#viewer #camcorder>.timeline-track{bottom:88px}
#viewer #camcorder:has(#seek:active)>.timeline-track{opacity:1;visibility:visible}
/* The filmstrip is a permanent continuation of the picture. */
#viewer #camcorder>.timeline-track{position:relative;inset:auto;flex:none;width:100%;display:block;visibility:visible;opacity:1;transition:none;z-index:4;padding:0;margin:0;border:0;border-top:1px solid #495361;background:#101318;box-shadow:none}
#viewer #camcorder>.timeline-track[hidden]{display:none}
#viewer #camcorder #timeline-frames{gap:1px}
#viewer #camcorder #timeline-frames button{height:38px;opacity:.76}
#viewer #camcorder #timeline-frames button.active,#viewer #camcorder #timeline-frames button:hover{opacity:1}
#viewer #camcorder #timeline-frames button span{display:none}
#viewer #camcorder .comment-markers{inset:0}
#viewer #camcorder #timeline-playhead{top:0;bottom:0}
#viewer .play-hud,#viewer .quiet.is-playing .play-hud{opacity:0;pointer-events:none}
#viewer .player-wrap:hover .play-hud,#viewer .player-wrap:focus-within .play-hud,#viewer .camcorder:has(:focus-visible) .play-hud{opacity:1;pointer-events:auto}
#viewer .play-hud #seek{display:none}
@media(hover:none){#viewer .camcorder:not(.quiet) .play-hud{opacity:1;pointer-events:auto}}
@media(min-width:641px){#viewer .project-media .camcorder,#viewer:not(.portrait-project) .project-media:has(.film-timeline.comments-collapsed) .camcorder,#viewer.portrait-project .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 285px)*var(--video-ratio,1.7778)))}}
#viewer .project-media .camcorder:fullscreen{width:100%!important;height:100%}
/* Camcorder time display and readable annotations on the filmstrip. */
#viewer #camcorder>.timeline-track{overflow:visible}
#viewer .timeline-camera-time{position:absolute;right:5px;bottom:4px;z-index:7;pointer-events:none;background:#080c10e8;border:1px solid #9db7bf77;color:#d2e9da;padding:3px 5px;font:11px/1 'Courier New',monospace;letter-spacing:.04em;text-shadow:0 0 3px #9ce8bd66;box-shadow:1px 1px #0008;font-variant-numeric:tabular-nums}
#viewer #camcorder .comment-marker{width:26px;height:28px;bottom:1px;top:auto;border:1px solid #a7c0dd;background:linear-gradient(#456a96,#233e60);border-radius:3px 3px 3px 0;box-shadow:1px 2px 0 #060a11aa;transition:translate .12s,background .12s;cursor:pointer;overflow:visible}
#viewer #camcorder .comment-marker:hover,#viewer #camcorder .comment-marker:focus-visible{translate:0 -3px;background:#577da9;z-index:10;outline:1px solid #e1edfc}
#viewer .comment-marker .comment-user-icon{width:16px;height:17px;color:#e1edfa}
#viewer .comment-marker-preview{display:none;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:210px;padding:10px 11px;background:#e7ecf2;border:1px solid;border-color:#fff #728399 #728399 #fff;box-shadow:2px 3px 0 #0006;color:#24374f;text-align:left;pointer-events:none;font:11px/1.45 Tahoma,Arial,sans-serif;text-shadow:none;grid-template-columns:1fr auto;gap:5px 10px}
#viewer .comment-marker-preview strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
#viewer .comment-marker-preview small{font:10px 'Courier New',monospace;color:#536f91}
#viewer .comment-marker-preview>span{grid-column:1/-1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:#47596e}
#viewer .comment-marker:hover .comment-marker-preview,#viewer .comment-marker:focus-visible .comment-marker-preview{display:grid}
#viewer .comment-marker.preview-right .comment-marker-preview{left:0;transform:none}
#viewer .comment-marker.preview-left .comment-marker-preview{left:auto;right:0;transform:none}
@media(max-width:640px){#viewer .timeline-camera-time{font-size:9px}#viewer .comment-marker-preview{width:175px}}
/* A lightweight hover tooltip, never a selectable panel. */
#viewer .comment-marker-preview{width:170px;padding:6px 8px;gap:3px 7px;user-select:none;-webkit-user-select:none;pointer-events:none;box-shadow:1px 2px 0 #0005;font-size:10px;line-height:1.35}
#viewer .comment-marker-preview strong{font-size:10px}
#viewer .comment-marker-preview small{font-size:9px}
#viewer .comment-marker-preview>span{-webkit-line-clamp:2;font-size:10px}
#viewer .comment-marker:focus-visible:not(:hover) .comment-marker-preview{display:none}
#viewer .comment-marker:hover .comment-marker-preview{display:grid;animation:comment-hover-in .12s ease-out}
#viewer #camcorder .comment-marker{user-select:none;-webkit-user-select:none}
@keyframes comment-hover-in{from{opacity:0;translate:0 3px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#viewer .comment-marker:hover .comment-marker-preview{animation:none}}

/* Clean camcorder readout replaces the ordinary elapsed/duration display. */
#viewer .video-readout #timecode,#viewer .video-readout #total-time,#viewer .video-readout .readout-separator{display:none}
#viewer .video-readout{background:#000;color:#fff;border:0}
#viewer .video-readout .timeline-camera-time{position:static;display:block;background:none;border:0;color:#fff;padding:0;font:12px/1 'Courier New',monospace;letter-spacing:.035em;text-shadow:none;box-shadow:none;pointer-events:none}

/* User identity is a single solid color from the Mac spinning-wheel palette. */
#viewer #camcorder .comment-marker{width:18px;height:18px;bottom:3px;border:0;border-radius:50%;background:var(--user-color,#568be5);box-shadow:0 1px 3px #0007}
#viewer #camcorder .comment-marker:hover,#viewer #camcorder .comment-marker:focus-visible{background:var(--user-color,#568be5);outline:2px solid #fff;outline-offset:2px}
#viewer .comment-marker .comment-user-icon{display:none}
#viewer .video-comment:before{background:var(--user-color,#568be5)}
#viewer .comment-avatar{background:#568be5}
#viewer .comment-avatar:before,#viewer .comment-avatar:after{display:none}
/* Portrait project: size the media pane around the tall film, not a wide canvas. */
@media(min-width:850px){
 #viewer.portrait-project .project-content{grid-template-columns:clamp(300px,36%,440px) minmax(0,1fr)}
 #viewer.portrait-project .project-media{background:#101113;border-right:1px solid #333c49;overflow:auto;align-items:stretch}
 #viewer.portrait-project .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 190px)*var(--video-ratio,.5625)));height:auto;flex:none;align-self:center}
 #viewer.portrait-project #camcorder #timeline-frames button{height:26px}
 #viewer.portrait-project .project-media>.film-timeline{padding:12px 14px}
 #viewer.portrait-project .timeline-heading .comments-heading{font-size:12px;flex-direction:row;align-items:center}
 #viewer.portrait-project .timeline-heading button{font-size:10px}
 #viewer.portrait-project .comment-prompt{font-size:11px;gap:10px;min-height:34px}
 #viewer.portrait-project .comment-avatar{width:27px;height:27px}
 #viewer.portrait-project .comment-compose{padding-left:0}
 #viewer.portrait-project .comment-context{flex-direction:row;align-items:center}
 #viewer.portrait-project .comment-actions>span{display:none}
 #viewer.portrait-project .comment-list{max-height:150px}
 #viewer.portrait-project .project-sidebar .viewer-heading{padding-top:27px;padding-bottom:27px}
 #viewer.portrait-project .project-media .camcorder:fullscreen{width:100%!important;height:100%}
}
@media(min-width:850px){
 #viewer.portrait-project{width:min(1000px,calc(100% - 64px))}
 #viewer.portrait-project .project-content{grid-template-columns:minmax(300px,.85fr) minmax(0,1fr)}
 #viewer.portrait-project .project-media .camcorder{width:min(100%,calc((100svh - var(--header-edge,63px) - 285px)*var(--video-ratio,.5625)))}
 #viewer.portrait-project .project-media>.film-timeline{padding:10px 14px}
}
/* Keep picture geometry independent of the controls and discussion below it. */
#viewer:not(.portrait-project) #camcorder:not(:fullscreen){height:auto;flex:0 0 auto;width:min(100%,calc((100svh - var(--header-edge,63px) - 285px)*var(--video-ratio)));align-self:center}
#viewer:not(.portrait-project) #camcorder:not(:fullscreen)>.player-wrap{height:auto;min-height:0;flex:0 0 auto;aspect-ratio:var(--video-ratio);width:100%}
#viewer #camcorder:not(:fullscreen) #film{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}
@media(max-width:640px){#viewer:not(.portrait-project) #camcorder:not(:fullscreen){width:100%}}
/* Phone portrait: title, player, then project story. */
@media(max-width:850px) and (orientation:portrait){
 #viewer .project-content{display:flex;flex-direction:column;height:calc(100% - 31px);min-height:0;overflow:auto}
 #viewer .project-sidebar{display:contents}
 #viewer .project-sidebar>.viewer-heading{order:0;flex:none;margin:0;padding:19px;width:100%;border:0}
 #viewer .project-media{order:1;flex:none;height:auto;min-height:0;overflow:visible;border:0}
 #viewer .project-sidebar>.project-info{order:2;flex:none;padding:20px 19px;margin:0;display:flex;flex-direction:column;gap:20px;background:#f5f5f3;width:100%}
 #viewer .project-sidebar>.file-properties{order:3;margin:0;padding:15px 19px;width:100%}
 #viewer .project-sidebar>.project-edit-link{order:4;margin:0;padding:10px 19px 22px;width:100%}
}
@media(max-width:850px) and (orientation:portrait){
 #viewer .project-sidebar>.viewer-heading,#viewer.portrait-project .project-sidebar>.viewer-heading{padding:13px 15px}
 #viewer .project-sidebar .artist-line{margin-bottom:3px;gap:7px}
 #viewer .project-sidebar .artist-line p{font-size:17px;line-height:1.1}
 #viewer .project-sidebar .viewer-heading h1{font-size:23px;line-height:1.08;letter-spacing:-.4px}
 #viewer .viewer-heading .role-block{margin-top:9px}
 #viewer .viewer-heading .role-chips span{font-size:9px;line-height:1.4}
 #viewer .project-sidebar .artist-line>span{font-size:7px;padding:4px 6px}
}