.reel-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); align-items:center; gap:72px; padding:48px 64px 56px 0; border-block:1px solid var(--line); }
.reel-story { max-width:530px; }
.reel-story>.eyebrow { display:flex; align-items:center; gap:10px; }
.reel-story>.eyebrow svg { width:20px; height:20px; flex:none; }
.reel-story h3 { font-size:38px; line-height:1.18; margin:0 0 24px; }
.reel-story h3 span { color:var(--accent-ink); }
.reel-story>p:not(.eyebrow) { max-width:440px; color:var(--muted); font-size:17px; line-height:1.75; }
.reel-project { display:flex; align-items:center; gap:26px; margin-top:36px; padding-top:32px; border-top:1px solid var(--line); }
.reel-project>img { width:104px; height:auto; aspect-ratio:1164/1600; object-fit:contain; flex:none; box-shadow:0 8px 20px #0002; }
.reel-project-label { display:block; font-size:11px; font-weight:800; color:var(--accent-ink); margin-bottom:10px; }
.reel-project strong { display:block; max-width:240px; font-size:18px; line-height:1.4; }
.reel-location { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-top:12px; }
.reel-location svg { width:15px; height:15px; flex:none; }
.reel-player { width:100%; max-width:360px; min-width:0; justify-self:center; border:1px solid var(--line); border-top:3px solid #20bae8; border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:0 20px 44px #0002; }
.reel-profile { display:flex; align-items:center; gap:10px; padding:14px 12px; }
.reel-avatar { width:42px; height:42px; flex:none; display:grid; place-items:center; background:#25235f; border:2px solid #58d2f0; border-radius:50%; }
.reel-avatar img { width:28px; height:27px; object-fit:contain; }
.reel-profile>div { min-width:0; }
.reel-profile strong { display:block; font-size:14px; line-height:1.5; }
.reel-profile>div>span { display:block; font-size:11px; color:var(--muted); }
.reel-format { margin-left:auto; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:700; color:var(--muted); }
.reel-format svg { width:19px; height:19px; }
.reel-stage { position:relative; width:100%; aspect-ratio:480/848; background:#080a0e; }
.reel-stage video { display:block; width:100%; height:100%; object-fit:contain; }
.reel-stage video.enhanced { cursor:pointer; }
.reel-start { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:76px; height:76px; padding:0; border:1px solid #ffffffa0; border-radius:50%; background:#25235fe8; color:#fff; box-shadow:0 8px 28px #0005; cursor:pointer; transition:background .2s; }
.reel-start:hover { background:#06718f; }
.reel-start svg { width:29px; height:29px; margin-left:4px; fill:currentColor; stroke-width:1.4; }
.reel-loading { position:absolute; left:12px; right:12px; top:12px; padding:8px; background:#080a0ee8; color:#fff; text-align:center; font-size:13px; border-radius:4px; }
.reel-controls { padding:8px 10px 6px; background:#101216; color:#fff; }
#reel-seek { display:block; width:100%; height:22px; margin:0; accent-color:#39c9ed; cursor:pointer; }
#reel-seek:disabled { cursor:default; }
.reel-actions { display:flex; align-items:center; gap:3px; min-height:44px; }
.reel-icon { display:grid; place-items:center; width:42px; height:44px; flex:none; padding:0; background:transparent; color:#fff; border:0; border-radius:4px; cursor:pointer; }
.reel-icon:hover { background:#ffffff20; }
.reel-icon svg { width:21px; height:21px; }
.reel-time { margin-right:auto; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.reel-caption { font-size:13px; line-height:1.65; padding:15px 16px 17px; overflow-wrap:anywhere; }
.reel-caption strong { font-weight:800; }
.reel-caption>span { display:block; margin-top:8px; font-size:11px; color:var(--muted); }
.reel-message,.reel-error { margin:0; padding:0 16px 16px; font-size:13px; }
.reel-error a { text-decoration:underline; text-underline-offset:3px; }
.reel-share-link { display:block; font-size:13px; padding:0 16px 16px; }
.reel-share-link input { display:block; width:100%; margin-top:6px; padding:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.reel-player [hidden],.reel-player:not(.is-playing) .reel-when-playing,.reel-player.is-playing .reel-when-paused,.reel-player:not(.is-muted) .reel-when-muted,.reel-player.is-muted .reel-when-audible { display:none; }
.reel-player input:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.reel-player:fullscreen { display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:none; width:100%; height:100%; padding:16px; border:0; border-radius:0; background:#080a0e; color:#fff; overflow:auto; }
.reel-player:fullscreen .reel-profile,.reel-player:fullscreen .reel-controls { width:min(100%,480px); }
.reel-player:fullscreen .reel-profile>div>span,.reel-player:fullscreen .reel-format { color:#bbc1c9; }
.reel-player:fullscreen .reel-stage { width:auto; max-width:100%; height:calc(100dvh - 180px); }
.reel-player:fullscreen .reel-caption { display:none; }
@media(max-width:1000px) { .reel-feature { gap:36px; padding-right:0; grid-template-columns:minmax(0,1fr) minmax(280px,340px); } .reel-story h3 { font-size:32px; } .reel-project { gap:16px; } .reel-project>img { width:80px; } .reel-project strong { font-size:16px; } }
@media(max-width:760px) { .reel-feature { grid-template-columns:minmax(0,1fr); gap:30px; padding-block:30px 40px; } .reel-story { max-width:540px; } .reel-story h3 { font-size:30px; margin-bottom:18px; } .reel-story>p:not(.eyebrow) { font-size:16px; margin-bottom:0; } .reel-project { margin-top:24px; padding-top:22px; } .reel-player { max-width:360px; } }
@media(max-width:370px) { .reel-profile { gap:8px; padding:12px 10px; } .reel-avatar { width:36px; height:36px; } .reel-profile strong { font-size:13px; } .reel-profile>div>span { font-size:10px; } .reel-icon { width:38px; } .reel-actions { gap:0; } .reel-controls { padding-inline:8px; } .reel-time { font-size:11px; } .reel-story h3 { font-size:27px; } }