/* Local review canvas: existing Osnara art direction, fluid compositions. */
.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;color:#647060;font-size:12px}.canvas-toolbar>div{display:flex;gap:8px}.canvas-toolbar button,.bumper-controls button,.bumper-controls select{font:inherit;border:1px solid #89988655;border-radius:6px;padding:8px 10px;color:inherit;background:transparent}.canvas-toolbar button[aria-pressed=true]{background:#25372e;color:#f3f4ea}.canvas-toolbar button:focus-visible,.tile-order button:focus-visible,.bumper-controls :focus-visible{outline:2px solid #829b68;outline-offset:3px}
#mockup-view{container-name:brandcanvas}.kit-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:14px}
.kit-grid>.kit-tile{grid-column:span 6;grid-row:auto;min-height:0;aspect-ratio:3/2;container-type:inline-size}
.kit-grid>.bumper{grid-column:span 12;aspect-ratio:auto}.kit-grid>.desktop{grid-column:span 8;aspect-ratio:1.5}.kit-grid>.phone{grid-column:span 4;aspect-ratio:3/4}.kit-grid>.cap,.kit-grid>.identity,.kit-grid>.merchandise{grid-column:span 4;aspect-ratio:1}.kit-grid>.stationery{grid-column:span 4;aspect-ratio:1}.kit-grid>.texture{grid-column:span 8;aspect-ratio:2}.kit-grid>.digital-media,.kit-grid>.billboard-media{grid-column:span 6}
.kit-grid .identity .kit-logo{--kit-type:10cqw}.kit-grid .identity p{font-size:3.8cqw}.kit-grid .texture h3{font-size:8cqw}.kit-grid .business-card{max-width:320px;padding:8%}.kit-grid .business-card .kit-logo{--kit-type:7cqw}.kit-grid .stationery{padding:9%}.kit-grid .business-card small{font-size:2cqw}.kit-grid .hoodie-stamp{scale:1}.kit-grid .hoodie-stamp .kit-logo{--kit-type:5.5cqw}.kit-grid .phone-scene{width:140%}
.tile-order{position:absolute;z-index:12;top:8px;right:8px;display:none;gap:3px;background:#f6f7efed;border-radius:7px;padding:4px;color:#24382c;box-shadow:0 2px 10px #0002}.arranging .tile-order{display:flex}.tile-order button{border:0;background:transparent;padding:7px 9px;font-size:12px;color:inherit;min-width:32px}.tile-order .tile-drag{cursor:grab;touch-action:none}.tile-order button:disabled{opacity:.25;cursor:default}.kit-tile.drag-target{outline:3px solid #829b68;outline-offset:-3px}.kit-tile.dragging{opacity:.45}
.conference-display{position:absolute;left:14%;top:12.8%;width:70.7%;height:43%;background:#171918;color:#edf1e7;container-type:inline-size;overflow:hidden}.conference-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;opacity:.45}.conference-copy{position:absolute;left:7%;top:14%}.conference-copy small{display:block;font:1.2cqw ProductGeistMono,monospace;letter-spacing:.08em}.conference-copy h3{font-size:8cqw;line-height:.98;font-weight:400;letter-spacing:-.045em;margin:6% 0 0}.conference-signature{position:absolute;right:7%;bottom:17%}.conference-signature .kit-logo{--kit-type:4cqw}.entrance-vinyl{position:absolute;left:20%;top:35%;width:29%;container-type:inline-size;color:#f1f4e8;filter:drop-shadow(0 1px 1px #0002);opacity:.92}.entrance-vinyl .kit-logo{--kit-type:13cqw}.entrance-vinyl p{font-size:8cqw;line-height:1.12;letter-spacing:-.025em;color:inherit;margin-top:15%}.entrance-vinyl small:not(.brand-beta){display:block;font:3cqw ProductGeistMono,monospace;letter-spacing:.08em;margin-top:23%}
.entrance .product-lockup,.conference .product-lockup,.bumper .product-lockup{gap:calc(var(--kit-type)*.333);line-height:1}.entrance .product-name,.conference .product-name,.bumper .product-name{font-size:var(--kit-type);line-height:1}.entrance .product-tile,.conference .product-tile,.bumper .product-tile{width:calc(var(--kit-type)*1.167);height:calc(var(--kit-type)*1.167)}.bumper .brand-beta{font-size:calc(var(--kit-type)*.24)}
.bumper{background:#171918;color:#eff3e9}.bumper-stage{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;container-type:inline-size;background:#171918}.bumper-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;opacity:.62}.bumper-stage:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#17191835,transparent)}.bumper-human{position:absolute;inset:0;opacity:0;clip-path:inset(12% 14% round 30%);will-change:clip-path,opacity}.bumper-human img{width:100%;height:100%;object-fit:cover}.bumper-human:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#112019a6,transparent 85%)}
.bumper-opening,.bumper-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3}.bumper-opening .kit-logo,.bumper-end .kit-logo{--kit-type:8.5cqw}.bumper-words{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}.bumper-words>span{position:absolute;white-space:nowrap;font-size:11cqw;letter-spacing:-.045em;line-height:1;opacity:0}.bumper-words>.bumper-kept{font-size:9.3cqw}.bumper-end{background:#f1f2e9;color:#20352a;opacity:0}.bumper-end p{font-size:2cqw;color:#5e6e5f;margin-top:5%;display:flex;gap:.45em}.bumper-end p span{white-space:nowrap}.bumper-duration{position:absolute;z-index:5;right:24px;bottom:20px;font:9px ProductGeistMono,monospace;text-transform:uppercase;letter-spacing:.06em;color:#d0d9c7}.bumper-stage[data-beat=resolve] .kit-tile-label,.bumper-stage[data-beat=resolve] .bumper-duration{color:#657360}
.bumper-controls{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#20332a;color:#dce6d6;font-size:11px}.bumper-controls label{display:flex;align-items:center;gap:7px}.bumper-controls select{padding:7px 4px;background:#20332a}.bumper-seek-label{flex:1;min-width:40px}.bumper-seek-label input{width:100%;accent-color:#d2dfbe;cursor:pointer}.bumper-controls output{font:10px ProductGeistMono,monospace;white-space:nowrap}.bumper-reveal-layer{position:absolute;pointer-events:none}
@container brandcanvas (min-width:1500px){.kit-grid{grid-template-columns:repeat(24,minmax(0,1fr))}.kit-grid>.bumper{grid-column:span 16}.kit-grid>.desktop{grid-column:span 8;aspect-ratio:1.35}.kit-grid>.phone{grid-column:span 8;aspect-ratio:3/4}.kit-grid>.cap,.kit-grid>.identity,.kit-grid>.merchandise,.kit-grid>.stationery{grid-column:span 8}.kit-grid>.texture{grid-column:span 16}.kit-grid>.city-media,.kit-grid>.outdoor{grid-column:span 12}}
@container brandcanvas (max-width:760px){.kit-grid>.desktop,.kit-grid>.phone,.kit-grid>.texture,.kit-grid>.bumper{grid-column:span 12}.kit-grid>.desktop{aspect-ratio:1.5}.kit-grid>.phone{aspect-ratio:1.1}.kit-grid .phone-scene{width:105%}.kit-grid>.cap,.kit-grid>.identity,.kit-grid>.merchandise,.kit-grid>.stationery{grid-column:span 6}.kit-grid>.digital-media,.kit-grid>.billboard-media{grid-column:span 6}.kit-grid .city-disclaimer{font-size:7px;bottom:10px;right:10px}.kit-grid .city-media>.kit-tile-label{font-size:7px;left:10px;top:10px}.bumper-controls{gap:7px;padding:12px}.bumper-controls label{gap:4px}}
@container brandcanvas (max-width:480px){.kit-grid>.kit-tile{grid-column:span 12}.kit-grid>.cap,.kit-grid>.identity{grid-column:span 6}.kit-grid>.merchandise,.kit-grid>.stationery{aspect-ratio:1.25}.kit-grid .identity{padding:12px}.kit-grid .identity p{margin-top:12px}.kit-grid .identity-rule{margin-top:12px}.kit-grid .cap .cap-stamp{top:34%}.kit-grid .texture{aspect-ratio:1.6}.kit-grid .phone{aspect-ratio:.85}.kit-grid .phone-scene{width:120%}.canvas-toolbar{align-items:flex-start}.canvas-toolbar>span{max-width:80px}.canvas-toolbar button{padding:8px;font-size:11px}.bumper-controls{flex-wrap:wrap;font-size:10px}.bumper-seek-label{min-width:65%}.bumper-duration{font-size:6px;right:12px;bottom:12px}.bumper .kit-tile-label{font-size:6px;left:12px;top:12px}}
@media(prefers-reduced-motion:reduce){.bumper-human,.kit-tile{will-change:auto;scroll-behavior:auto}}
/* Keep the two city advertising formats on a shared row in the default sequence. */
.kit-grid>.outdoor{grid-column:span 12}
@container brandcanvas (min-width:1500px){.kit-grid>.outdoor{grid-column:span 16}.kit-grid>.desktop,.kit-grid>.stationery{align-self:stretch;aspect-ratio:auto}.kit-grid>.desktop .laptop{top:27%}.kit-grid>.phone{aspect-ratio:1}.kit-grid .phone-scene{width:110%}}
/* Shared motion tools remain accessible in the mockup canvas. */
body.kit-mode #logo-reveal-controls,body.kit-mode #connection-timeline{display:block}
body.kit-mode #texture-controls>label:first-child,body.kit-mode #texture-controls>label[for="morph"]{display:block!important}
body.kit-mode #morph{display:block}
@media(max-width:720px){body.kit-mode .workspace>aside:not(.kit-controls-open)>section#logo-reveal-controls{display:none}body.kit-mode .workspace>aside.kit-controls-open>section#logo-reveal-controls{display:block}}
#kit-gather{margin-left:6px}.film-options{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 18px;background:#20332a;color:#dce6d6;font-size:11px}.film-options label{display:flex;align-items:center;gap:7px}.film-options select,.film-options button{font:inherit;color:inherit;background:#20332a;border:1px solid #89988655;border-radius:5px;padding:7px 9px}.film-options button{margin-left:auto}.film-options :focus-visible{outline:2px solid #c8dfb1;outline-offset:3px}
.bumper-end{background:#f1f2e9;isolation:isolate}.bumper-end.green-end{background:#213d2d;color:#eff3e9}.bumper-end.green-end p{color:#d0dcc8}.film-finish-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;opacity:.32;z-index:-1}.bumper-end>.kit-brand,.bumper-end>p{position:relative;z-index:1}.bumper-stage[data-beat=resolve]:has(.green-end) .kit-tile-label,.bumper-stage[data-beat=resolve]:has(.green-end) .bumper-duration{color:#c4d3bc}
.showcase-scenes{position:absolute;inset:0;z-index:2;pointer-events:none}.showcase-scene{position:absolute;inset:10% 5% 15%;display:grid;gap:2%;opacity:0;visibility:hidden}.showcase-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-all{inset:8% 4% 14%;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:2%}.showcase-scene>.film-mockup{grid-column:auto;grid-row:auto;width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:1.5cqw;container-type:inline-size}.showcase-scene .phone-scene{width:115%}.showcase-scene .laptop{top:25%}.showcase-scene .kit-tile.identity{padding:6%}.showcase-scene .identity .kit-logo{--kit-type:9cqw}.showcase-scene .identity p{font-size:4cqw}.showcase-scene .identity-rule{margin:7% 0 0}.showcase-scene .stationery{padding:9%}.showcase-scene .business-card{padding:8%;max-width:none}.showcase-scene .business-card .kit-logo{--kit-type:8cqw}.showcase-scene .business-card small{font-size:2cqw}.showcase-scene .texture>.kit-brand{top:10%;left:8%}.showcase-scene .texture .kit-logo{--kit-type:8cqw}.showcase-scene .texture h3{font-size:9cqw;left:8%;bottom:12%}.showcase-scene .hoodie-stamp .kit-logo{--kit-type:5.5cqw}.showcase-label{position:absolute;left:5%;bottom:7%;z-index:3;color:#e6eee0;font-size:3cqw;letter-spacing:-.025em}.showcase-all .phone-scene{width:92%}.showcase-all .identity p{margin-top:5%}.showcase-all .identity-rule{display:none}
.bumper:fullscreen,.bumper.film-expanded{background:#111c16;display:flex;flex-direction:column;border-radius:0;width:100vw;height:100dvh;padding:0;container-type:inline-size}.bumper.film-expanded{position:fixed;inset:0;z-index:100}.bumper:fullscreen .bumper-stage,.bumper.film-expanded .bumper-stage{flex:1;min-height:0;width:100%;aspect-ratio:auto}.bumper:fullscreen .film-options,.bumper:fullscreen .bumper-controls,.bumper.film-expanded .film-options,.bumper.film-expanded .bumper-controls{flex-shrink:0}.bumper:fullscreen .tile-order,.bumper.film-expanded .tile-order{display:none}
@container brandcanvas (max-width:480px){.film-options{padding:10px;gap:8px;font-size:10px}.film-options select{max-width:150px;padding:6px}.film-options button{margin-left:0}.showcase-label{font-size:3cqw}}
.showcase-scene .phone-scene,.showcase-all .phone-scene{height:115%;width:auto;aspect-ratio:1}
#film-exit{display:none;position:absolute;z-index:30;right:20px;top:20px;border:1px solid #c9d7bf66;color:#e4eedb;background:#20332ad9;border-radius:99px;padding:9px 14px;font-size:12px}
.bumper:fullscreen #film-exit,.bumper.film-expanded #film-exit{display:block}
.bumper:fullscreen .film-options,.bumper.film-expanded .film-options,.bumper:fullscreen .bumper-stage>.kit-tile-label,.bumper:fullscreen .bumper-duration,.bumper.film-expanded .bumper-stage>.kit-tile-label,.bumper.film-expanded .bumper-duration{display:none}
.bumper:fullscreen .bumper-stage,.bumper.film-expanded .bumper-stage{flex:none;width:min(100vw,177.78dvh);height:auto;aspect-ratio:16/9;max-height:100dvh;margin:auto}
.bumper:fullscreen .bumper-controls,.bumper.film-expanded .bumper-controls{position:absolute;z-index:20;bottom:0;left:0;right:0;opacity:0;transition:opacity .2s;background:#20332aee}
.bumper:fullscreen .bumper-controls:hover,.bumper:fullscreen .bumper-controls:focus-within,.bumper.film-expanded .bumper-controls:hover,.bumper.film-expanded .bumper-controls:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){.bumper-controls{transition:none!important}}
.film-view-dialog{padding:0;border:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#111c16;color:#edf1e7}.film-view-dialog::backdrop{background:#111c16}.film-view-dialog .bumper.film-expanded{position:relative;width:100%;height:100%;inset:auto}

/* Clean presentation lives outside the review pane but retains phrase stacks. */
.film-view-dialog .mockup-line{display:block;white-space:nowrap}
.film-view-dialog h3{text-wrap:balance}.film-view-dialog p{text-wrap:pretty}
@media(max-width:480px){.film-expanded .bumper-controls{flex-wrap:wrap;gap:7px;padding:12px;font-size:10px}.film-expanded .bumper-seek-label{min-width:65%}}
@media(hover:none){.film-expanded .bumper-controls{opacity:1}}

.bumper-end:not(.green-end) .film-finish-art{opacity:.55}

/* One control row for the canvas; the introduction stays editorial. */
#mockup-view .kit-heading{display:block;margin:2px 0 20px}
#mockup-view .kit-heading p{max-width:none;margin:10px 0 0;font-size:12px}
#mockup-view .canvas-toolbar{justify-content:flex-start;align-items:center;gap:16px;padding:12px 0;margin:0 0 20px;border-top:1px solid #89988640;border-bottom:1px solid #89988640;color:#43513d}
#mockup-view .canvas-control-group{display:flex;gap:8px;align-items:center}
#mockup-view .canvas-control-group+.canvas-control-group{border-left:1px solid #89988655;padding-left:16px}
#mockup-view .canvas-toolbar button{min-height:36px;margin:0;padding:8px 12px;font-size:11px;white-space:nowrap}
#mockup-view #kit-reset-order{border-color:transparent;color:#647060}
#mockup-view #kit-reset-order:hover{background:#dce2d7;color:#24382c}
@container brandcanvas (max-width:480px){
 #mockup-view .canvas-toolbar{flex-wrap:wrap;gap:8px;padding:10px 0;margin-bottom:16px}
 #mockup-view .canvas-control-group{width:100%}
 #mockup-view .canvas-control-group+.canvas-control-group{padding:8px 0 0;border-left:0;border-top:1px solid #89988640}
 #mockup-view .canvas-toolbar button{min-height:40px}
}

/* Finish the review grid with three applications, then a wide scene and a mark. */
.kit-grid>.symbol{grid-column:span 4;aspect-ratio:1;background:#213d2d;display:grid;place-items:center}
.symbol>img{width:53%;height:53%;object-fit:contain;filter:brightness(0) invert(1)}
.symbol>.kit-tile-label{color:#bdceb5}
@container brandcanvas (min-width:761px){
 .kit-grid>.digital-media,.kit-grid>.billboard-media,.kit-grid>.conference{grid-column:span 4;aspect-ratio:1.5}
 .kit-grid>.entrance{grid-column:span 8;aspect-ratio:2}
}
@container brandcanvas (min-width:1500px){
 .kit-grid>.digital-media,.kit-grid>.billboard-media,.kit-grid>.conference{grid-column:span 8;aspect-ratio:1.5}
 .kit-grid>.entrance{grid-column:span 16;aspect-ratio:2}
 .kit-grid>.symbol{grid-column:span 8}
}
@container brandcanvas (max-width:760px){.kit-grid>.entrance{grid-column:span 8;aspect-ratio:2}.kit-grid>.symbol{grid-column:span 4}}
@container brandcanvas (max-width:480px){.kit-grid>.entrance,.kit-grid>.symbol{grid-column:span 12}.kit-grid>.entrance{aspect-ratio:1.5}.kit-grid>.symbol{aspect-ratio:1.5}.symbol>img{width:40%;height:60%}}
.application-photo-frame{position:absolute;width:100%;aspect-ratio:3/2;top:50%;translate:0 -50%;container-type:inline-size}

/* Paired film framing stays still; each application reveals independently. */
.showcase-pair>.city-media{height:auto;aspect-ratio:1.5;align-self:center}
.showcase-scene>.symbol{display:grid;place-items:center;background:#213d2d}
.showcase-scene>.symbol>img{width:45%;height:65%}