.studio-showcase{color:var(--ink)}
.studio-heading{display:grid;grid-template-columns:1fr 1.35fr;gap:60px;align-items:start;margin:0 0 32px;padding-inline:4px}
.studio-heading #hueman-title{font:500 var(--section-title)/1.18 var(--body);letter-spacing:-.04em;margin:0}
.studio-heading>p{font-size:clamp(21px,2vw,27px);line-height:1.45;margin:0;letter-spacing:-.025em;text-wrap:pretty}
.studio-player{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffff25;border-radius:24px;background:#161816;color:#f4f5ee;aspect-ratio:16/9}
.studio-player [hidden]{display:none!important}
.studio-player button,.studio-player a{font:500 14px/1.2 var(--body);text-decoration:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 18px;border:1px solid #ffffff40;border-radius:99px;background:#ffffff10;cursor:pointer;transition:background-color 160ms ease-out,border-color 160ms ease-out}
.studio-player button[aria-pressed=true],.studio-actions>a{background:#ffcc00;color:#151b12;border-color:#ffcc00}
.studio-player button:focus-visible,.studio-player a:focus-visible,.studio-seek:focus-visible{outline:2px solid #ffcc00;outline-offset:4px}
.studio-screen{position:absolute;inset:0;display:grid;align-items:center}
.studio-screen video,.studio-screen img{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;display:block}
.studio-screen .studio-stage-film,.studio-screen .studio-test{padding:48px 0}
.studio-screen .studio-show-film{background:#050605}
.studio-topbar{position:absolute;inset:20px 20px auto;z-index:2}
.studio-looks{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}

.studio-video-controls{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #ffffff2b;border-radius:18px;background:#111711e8}
.studio-seek{flex:1;min-width:40px;accent-color:#ffcc00;height:32px;cursor:pointer}
.studio-time{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:76px;text-align:right;padding-right:6px}
.studio-bottom{position:absolute;inset:auto 16px 16px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 16px;border:1px solid #ffffff50;border-radius:18px;background:#232822ed}
.studio-project{display:grid;gap:5px}.studio-project strong{font-size:16px;line-height:1.3;font-weight:600}.studio-project>span{font-size:13px;color:#c6cdc1}
.studio-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.studio-message{position:absolute;inset:40% 24px auto;margin:0 auto;padding:18px;max-width:520px;background:#182018ed;border:1px solid #ffffff40;border-radius:14px;z-index:3;text-align:center;font-size:16px}
@media(hover:hover) and (pointer:fine){.studio-player button:hover,.studio-player a:hover{border-color:#ffcc00}.studio-actions>a:hover{background:#ffda45}}
@media(max-width:1000px){.studio-heading{gap:30px}.studio-bottom{flex-direction:column;align-items:stretch;gap:12px}.studio-project{display:flex;justify-content:space-between;align-items:center}.studio-actions{justify-content:flex-start}.studio-player{aspect-ratio:4/3}.studio-screen .studio-stage-film,.studio-screen .studio-test{padding:64px 0 100px}.studio-player button,.studio-player a{padding:11px 14px}}
@media(max-width:700px){.studio-heading{grid-template-columns:1fr;gap:20px;margin-bottom:24px}.studio-heading>p{font-size:21px;line-height:1.45}.studio-player{aspect-ratio:auto;border-radius:18px;display:flex;flex-direction:column}.studio-topbar{position:relative;inset:auto;order:0;padding:14px 12px 0}.studio-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.studio-player button,.studio-player a{font-size:12px;padding:10px 8px;min-height:44px}.studio-screen{position:relative;inset:auto;order:1;height:auto;aspect-ratio:16/9;margin:8px 0}.studio-screen .studio-stage-film,.studio-screen .studio-test{padding:0}.studio-bottom{position:relative;inset:auto;order:2;margin:0 10px 10px;padding:14px 10px;gap:14px;border-radius:14px}.studio-project{display:grid;gap:4px}.studio-project strong{font-size:14px}.studio-project>span{font-size:12px}.studio-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.studio-actions>a{grid-column:1/-1;font-size:14px}.studio-video-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}.studio-seek{grid-column:1;grid-row:2;width:100%}.studio-time{grid-column:2;grid-row:2;min-width:0;text-align:center}.studio-message{inset:36% 16px auto;font-size:14px}}
@media(prefers-reduced-motion:reduce){.studio-player button,.studio-player a{transition:none}}
/* Contained Hueman masthead: the reference composition on a black slate. */
.studio-showcase{padding:48px;border:1px solid #ffffff24;border-radius:24px;background-color:#101710;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:32px 32px;color:#f8faf3}
.studio-heading{display:block;padding:0;margin-bottom:32px}
.studio-heading #hueman-title{margin-bottom:28px}
.studio-heading .studio-masthead{font-size:clamp(28px,2.8vw,40px);line-height:1.2;font-weight:400;letter-spacing:-.035em;text-wrap:pretty}
.studio-masthead strong{font-weight:650}
.studio-heading .studio-description{font-size:18px;line-height:1.5;color:#bcc5b7;letter-spacing:-.015em;margin-top:22px}
.studio-description strong{color:#f5f7ef;font-weight:550}
.studio-comparison{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:3/1;isolation:isolate}
.studio-screen .studio-comparison .studio-stage-film,.studio-screen .studio-comparison .studio-test{padding:0;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.studio-comparison .studio-test{clip-path:inset(0 calc(100% - var(--compare)) 0 0);pointer-events:none}
.studio-divider{position:absolute;inset:0 auto 0 var(--compare);width:2px;background:#ffcc00;transform:translateX(-50%);pointer-events:none}
.studio-comparison-control{position:absolute;inset:0;display:block;cursor:ew-resize}
.studio-compare{appearance:none;-webkit-appearance:none;width:calc(100% + 44px);height:44px;position:absolute;left:-22px;top:50%;transform:translateY(-50%);margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
.studio-compare::-webkit-slider-runnable-track{height:2px;background:transparent}
.studio-compare::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:44px;height:44px;margin-top:-21px;border-radius:50%;border:2px solid #fff9;background:#ffcc00;box-shadow:0 2px 12px #0005}
.studio-compare::-moz-range-thumb{width:40px;height:40px;border-radius:50%;border:2px solid #fff9;background:#ffcc00}
.studio-comparison-control:after{content:'↔';position:absolute;left:var(--compare);top:50%;transform:translate(-50%,-50%);font-size:24px;line-height:1;color:#101710;pointer-events:none}
.studio-compare:focus-visible{outline:2px solid #fff;outline-offset:4px}
.studio-compare-hint{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);font-size:12px;line-height:1.3;white-space:nowrap;border:1px solid #ffffff35;border-radius:99px;padding:5px 12px;color:#fff;background:#ffffff10;pointer-events:none}
.studio-comparison.compared .studio-compare-hint{visibility:hidden}
@media(min-width:1001px){.studio-player button,.studio-player a{font-size:13px;padding-inline:14px}.studio-bottom{gap:12px;padding-inline:14px}.studio-project strong{font-size:14px}}
@media(max-width:1100px){.studio-showcase{padding:36px}.studio-heading .studio-masthead{font-size:30px}}
@media(max-width:700px){.studio-showcase{padding:26px 18px;border-radius:20px}.studio-heading #hueman-title{margin-bottom:22px}.studio-heading .studio-masthead{font-size:25px;line-height:1.25}.studio-desktop-break{display:none}.studio-heading .studio-description{font-size:15px;line-height:1.5;margin-top:18px}.studio-heading{margin-bottom:24px}.studio-looks{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.studio-looks button{font-size:10px;padding:6px 2px;border-radius:12px}.studio-topbar{padding:8px 6px 0}.studio-player{margin-inline:-6px}.studio-comparison{aspect-ratio:3/1}.studio-compare-hint{font-size:10px;top:calc(100% + 8px);padding:3px 8px}.studio-project strong{font-size:13px}.studio-actions button{font-size:11px}}
/* Keep the phone's top band the same height in both viewing modes. */
@media(max-width:700px){.studio-topbar{min-height:60px;display:flex;align-items:center;padding:8px 6px}.studio-looks{width:100%}.studio-video-controls{display:flex;flex-wrap:nowrap;width:100%;padding:0;border:0;background:none;gap:6px}.studio-video-controls button{flex:none;font-size:10px;padding:6px;white-space:nowrap}.studio-video-controls .studio-seek{flex:1;width:0;min-width:20px}.studio-time{flex:none;font-size:10px;min-width:60px;padding:0}.studio-screen{margin-top:0}}
/* Keep the comparison hint clear of the project dock at compact desktop widths. */
.studio-compare-hint{top:auto;bottom:8px}
@media(max-width:700px){.studio-compare-hint{top:auto;bottom:-22px}}

/* Studio is a heading followed by body copy, matching the one-on-one introduction. */
.studio-heading .studio-masthead{font-size:20px;line-height:1.55;letter-spacing:0;font-weight:400;max-width:none}
.studio-heading .studio-description{font-size:17px;line-height:1.6;letter-spacing:0;margin-top:16px}
.studio-comparison.compared .studio-compare-hint{visibility:visible}
@media(max-width:700px){.studio-heading .studio-masthead{font-size:17px;line-height:1.55}.studio-heading .studio-description{font-size:15px;line-height:1.6}}
@media(max-width:700px){.studio-heading .studio-masthead{font-size:18px}}

/* Five readable controls; the test-pattern choice remains available at any position. */
@media(max-width:700px){.studio-looks{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.studio-looks button{font-size:12px;padding:8px 5px}.studio-topbar{min-height:110px}}