/* KANALI window, copied from prototypes/capcom/page.css (the display preview's
   live window) so the campaign shows the same simulation, not a custom UI. */
.kanali-window{position:relative;width:100%;aspect-ratio:3/2;container-type:inline-size;background:#17191a center/100% 100% no-repeat;border-radius:1.6cqw;overflow:clip;box-shadow:0 2cqw 6cqw rgba(0,0,0,.5);font-family:var(--font-edition-title);color:#f2f2f0}
.kanali-window.is-dropping{outline:2px dashed #b0261d;outline-offset:-1cqw}
.kanali-window button{position:absolute;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.kanali-window button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kanali-carousel{position:absolute;perspective:110cqw}
.kanali-cards{position:absolute;left:21.93%;top:5.69%;width:54.87%;height:88.97%;transform-style:preserve-3d}
.kanali-window .kanali-card{inset:0;width:100%;height:100%;border-radius:1.1cqw;overflow:hidden;background:#000;box-shadow:0 1.5cqw 4cqw rgba(0,0,0,.6);transition:transform .6s cubic-bezier(.22,.8,.24,1),opacity .35s,filter .45s;filter:brightness(var(--light,1));touch-action:pan-y;user-select:none}
.kanali-card video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.kanali-card span{position:absolute;left:4.3%;top:4%;display:flex;align-items:center;gap:1.1cqw;font-size:1.25cqw;text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:0;transition:opacity .3s}
.kanali-card span::before{content:"";width:1.7cqw;height:1.7cqw;border-radius:50%;background:radial-gradient(circle,#0c1213 34%,#9e120d 38%)}
.kanali-window .kanali-card.is-active{filter:none;box-shadow:0 0 0 .08cqw #6a2a27,0 1.5cqw 4cqw rgba(0,0,0,.6)}
.kanali-card.is-active span{opacity:1;transition-delay:.25s}
.kanali-window .kanali-card:not(.is-active):hover{filter:brightness(calc(var(--light,1) + .15))}
.kanali-card.is-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%) 0 0/250% 100%;animation:kanali-loading 1.2s linear infinite}
@keyframes kanali-loading{to{background-position:-250% 0}}
.kanali-window .kanali-arrow{z-index:20;border-radius:50%;background:rgba(150,150,150,.82)}
.kanali-arrow::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;border:solid #1b1b1b;border-width:0 0 .16cqw .16cqw;transform:translate(-30%,-50%) rotate(45deg)}
.kanali-arrow[data-step="1"]::after{transform:translate(-70%,-50%) rotate(-135deg)}
.kanali-arrow:hover{background:rgba(190,190,190,.9)}
.kanali-window .kanali-power{display:flex;align-items:center;justify-content:space-between;padding:0 .35cqw 0 .55cqw;border-radius:.3cqw;background:#77140f;font-family:var(--font-body);font-weight:800;font-size:.95cqw;letter-spacing:.02em;transition:background .2s}
.kanali-power i{width:1.35cqw;height:1.35cqw;border-radius:.2cqw;background:#121617;position:relative}
.kanali-power i::before,.kanali-power i::after{content:"";position:absolute;top:28%;width:12%;height:44%;background:#e8e8e8;left:30%}.kanali-power i::after{left:58%}
.kanali-power[aria-pressed="false"]{background:#3a3c3f;color:#b8b8b8}
.kanali-hit{border-radius:3cqw}.kanali-hit:hover{box-shadow:inset 0 0 0 .1cqw rgba(255,255,255,.35)}
.kanali-limit{position:absolute;pointer-events:none;border-radius:.3cqw}
.kanali-limit.is-flashing{animation:kanali-limit 1.1s ease}
@keyframes kanali-limit{0%,60%{background:rgba(176,38,29,.45)}100%{background:transparent}}
.kanali-window .kanali-save{border-radius:2.5cqw;background:#77140f;font-size:1.15cqw;opacity:0;transition:opacity .2s}
.kanali-save:hover,.kanali-save:focus-visible{opacity:1;filter:brightness(1.2)}
.kanali-save:not(:hover):not(:focus-visible){opacity:0}
.kanali-swatch[aria-pressed="true"],.kanali-align[aria-pressed="true"]{box-shadow:inset 0 0 0 .12cqw #b0261d;border-radius:.2cqw}
/* Each checkbox covers the screenshot's own box exactly: 30 x 30 at the button's
   left, 2.5 below its top, in the 1800 x 1200 frame (both editions, measured
   from the pixels). Box and tick are SVG in that 30-unit square, sharing one
   geometry, so they scale with the screenshot and never drift apart; a CSS
   border would snap to device pixels while the screenshot does not. Shapes,
   strokes and colours were fitted to the screenshots' own checkboxes. */
.kanali-window .kanali-check::before,.kanali-window .kanali-check::after{content:"";position:absolute;left:0;top:6.9444%;width:11.5385%;height:83.3333%}
.kanali-window .kanali-check::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='0.75' y='0.75' width='28.5' height='28.5' rx='3.7' fill='%232f3133' stroke='%23fdffff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/100% 100%}
.kanali-window .kanali-check[aria-checked="true"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='0' y='0' width='30' height='30' rx='4.45' fill='%2378150e'/%3E%3C/svg%3E")}
/* CPU Temp is ticked in the screenshot; unticked, a ring of window colour covers that box's 1-pixel glow. */
.kanali-window .kanali-check[data-readout="cpu-temperature"][aria-checked="false"]::before{border-radius:.25cqw;box-shadow:0 0 .03cqw .06cqw #1c1e20}
.kanali-window .kanali-check[aria-checked="true"]::after{background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M9.3 16.1 12.7 19.5 20.7 11.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M9.3 16.1 12.7 19.5 20.7 11.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100%}
.kanali-note{position:absolute;margin:0;font-size:.95cqw;color:rgba(242,242,240,.55)}
/* Sidebar pages: hit areas on the screenshot's own RACCOON CITY and PANORAMA rows. */
.kanali-nav{display:contents}
.kanali-window .kanali-nav button{z-index:5;border-radius:.6cqw}
.kanali-nav button[aria-pressed="false"]:hover{box-shadow:inset 0 0 0 .1cqw rgba(255,255,255,.3)}
.kanali-dashboard{display:none}
.kanali-dashboard-page{display:none;position:absolute;inset:0}
.kanali-window.is-dashboard>:not(.kanali-nav,.kanali-logo,.kanali-dashboard-page){display:none!important}
.kanali-window.is-dashboard>.kanali-dashboard-page{display:block}
/* The tall picture must keep the scroller's exact width to land on the screenshot,
   so the native scrollbar, which takes width on some systems, is replaced by a track. */
.kanali-scroll,.kanali-scroll-track{display:none;position:absolute}
.has-scroll .kanali-scroll{display:block;overflow:hidden auto;scrollbar-width:none}
.has-scroll .kanali-scroll::-webkit-scrollbar{display:none}
.kanali-scroll:focus-visible{outline:2px solid #2ab7fe;outline-offset:-2px}
.kanali-scroll img{display:block;width:100%;height:auto}
.has-scroll .kanali-scroll-track{display:block;pointer-events:none}
.kanali-scroll-track i{display:block;width:100%;border-radius:1cqw;background:rgba(20,35,43,.32)}
/* Font: on the screenshot's own control, with the menu measured from the owner's 2026-10-30 capture. */
.kanali-font[hidden],.kanali-font-menu[hidden]{display:none!important}
.kanali-font[aria-expanded="true"]::before{content:"";position:absolute;right:.5cqw;top:.3cqw;width:2cqw;height:1.44cqw;background:#d9dcdd}
.kanali-font[aria-expanded="true"]::after{content:"";position:absolute;right:1.25cqw;top:.85cqw;width:.55cqw;height:.55cqw;border:solid #14232b;border-width:.1cqw 0 0 .1cqw;transform:rotate(45deg)}
.kanali-font-menu{position:absolute;z-index:3;display:grid;align-content:center;padding:0 .67cqw;border-radius:.8cqw;background:#c8cacb;box-shadow:0 .4cqw 1.4cqw rgba(20,35,43,.16)}
.kanali-window .kanali-font-menu button{position:relative;display:flex;align-items:center;height:2.83cqw;padding:0 .7cqw;border-radius:.4cqw;font-size:.81cqw;color:#1b2429}
.kanali-font-menu button::after{content:"";position:absolute;right:.7cqw;top:calc(50% - .72cqw);width:1.44cqw;height:1.44cqw;border:.06cqw solid #1b2429;border-radius:50%;box-sizing:border-box}
.kanali-window .kanali-font-menu button[aria-checked="true"]{background:#bcbfbe}
.kanali-font-menu button[aria-checked="true"]::after{background:#7eb1e2;border-color:#7eb1e2}
/* The tick takes the circle's own box, so it is centred in it at every size. */
.kanali-font-menu button[aria-checked="true"]::before{content:"";position:absolute;z-index:1;right:.7cqw;top:calc(50% - .72cqw);width:1.44cqw;height:1.44cqw;background:#001c41;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M9.3 16.1 12.7 19.5 20.7 11.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M9.3 16.1 12.7 19.5 20.7 11.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100%}
@media(max-width:1080px){.display-experience.is-live{grid-template-columns:minmax(0,1fr)}.display-experience.is-live>.section-heading,.display-experience.is-live>.section-intro{grid-column:1}.kanali-live{grid-column:1;grid-row:4;margin-top:24px}}
@media(prefers-reduced-motion:reduce){.kanali-window .kanali-card{transition:none}.kanali-card.is-loading::after{animation:none}}
/* KANALI window: text that the screenshot already shows stays for assistive tech only */
.kanali-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kanali-phone-only{display:none}.kanali-tools,.kanali-checks{display:contents}
/* Phones: the same controls, stacked and tappable, with their text shown */
@media(max-width:560px){
  .kanali-live{margin-top:20px}
  .kanali-window{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 12px;aspect-ratio:auto;padding:18px 16px 16px;border-radius:14px;background-image:none!important;background:linear-gradient(180deg,#1e2023,#141517);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.5)}
  .kanali-window .kanali-carousel,.kanali-window .kanali-power,.kanali-window .kanali-hit,.kanali-window .kanali-limit,.kanali-window .kanali-save,.kanali-window .kanali-swatch,.kanali-window .kanali-align,.kanali-window .kanali-check,.kanali-window .kanali-note{position:relative!important;inset:auto!important;width:auto!important;height:auto!important}
  .kanali-text{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
  .kanali-phone-only{display:block}
  /* The screenshot's sidebar header, whole and at its own ratio, as a band. */
  .kanali-logo{grid-column:1/-1;grid-row:1;margin:-18px -16px 0;aspect-ratio:420/165;background-repeat:no-repeat;background-size:428.57% auto;background-position:0 0}
  .kanali-title,.kanali-heading{font-family:var(--font-edition-title);font-weight:400}
  .kanali-title{grid-column:1/-1;grid-row:3;margin:0;font-size:24px;line-height:1;white-space:nowrap}.kanali-title span{margin-left:12px;font-size:14px;border-bottom:2px solid #b0261d;padding-bottom:3px}
  .kanali-window .kanali-carousel{grid-column:1/-1;grid-row:4;width:100%!important;aspect-ratio:16/10;margin-inline:-4px}
  .kanali-cards{left:13%;width:74%;top:4%;height:92%}
  .kanali-window .kanali-arrow{width:36px!important;height:36px!important;top:calc(50% - 18px)!important}
  .kanali-window .kanali-arrow[data-step="-1"]{left:0!important}.kanali-window .kanali-arrow[data-step="1"]{left:auto!important;right:0}
  .kanali-arrow::after{border-width:0 0 2px 2px}
  .kanali-card span{font-size:11px;gap:6px}.kanali-card span::before{width:10px;height:10px}
  .kanali-window .kanali-power{min-height:32px;min-width:64px;padding:0 6px 0 10px;border-radius:6px;font-size:13px;grid-column:1/-1;grid-row:5;justify-self:end}
  .kanali-power::before{content:"Screen";position:absolute;right:calc(100% + 10px);font-family:var(--font-edition-title);font-weight:400;font-size:15px;color:#f2f2f0}
  .kanali-power i{width:18px;height:18px;border-radius:3px}
  .kanali-window .kanali-hit{grid-column:1/-1;grid-row:6;min-height:44px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-size:15px}
  .kanali-heading{grid-column:1/-1;margin:6px 0 -6px;font-size:19px}
  .kanali-window .kanali-limit{grid-column:1/-1;justify-self:start;padding:2px 6px;margin-left:-6px;font-size:13px;color:rgba(242,242,240,.7)}
  .kanali-tools{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
  .kanali-window .kanali-swatch,.kanali-window .kanali-align{min-height:40px;min-width:40px;padding:0 10px;border-radius:6px;background:#2c2e2f;font-size:13px}
  .kanali-swatch .kanali-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .kanali-swatch::after{content:"";position:absolute;inset:11px;border-radius:2px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.3)}.kanali-swatch[data-colour="white"]::after{background:#fff}
  .kanali-swatch[aria-pressed="true"],.kanali-align[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #b0261d;border-radius:6px}
  .kanali-checks{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
  .kanali-window .kanali-check{min-height:44px;padding-left:30px;text-align:left;font-size:13.5px;line-height:1.2}
  .kanali-window .kanali-check::before,.kanali-window .kanali-check::after{top:calc(50% - 10px);width:20px;height:20px}
  .kanali-window .kanali-check::before{box-shadow:none!important}
  .kanali-window .kanali-save{grid-column:1/-1;min-height:44px;border-radius:999px;font-size:16px;opacity:1!important}
  .kanali-window .kanali-note{grid-column:1/-1;font-size:12px;text-align:center}
  /* The sidebar's two pages become a tab row under the header. */
  .kanali-nav{grid-column:1/-1;grid-row:2;display:flex;gap:8px}
  .kanali-window .kanali-nav button{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;flex:1;min-height:44px;border-radius:6px;background:#2c2e2f;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
  .kanali-window .kanali-nav button[aria-pressed="true"]{background:#efece6;color:#9e120d}
  .kanali-window.is-dashboard>.kanali-dashboard-page{position:relative;grid-column:1/-1;grid-row:3;overflow:hidden;border-radius:8px}
  .kanali-window.is-dashboard .kanali-dashboard{display:block;width:100%;height:auto}
  .kanali-window .kanali-font,.kanali-window .kanali-font-menu{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;flex:1 0 100%}
  .kanali-window .kanali-font{min-height:44px;padding:0 12px;border-radius:6px;background:#dfe4e6;font-size:14px;text-align:left}
  .kanali-font[aria-expanded="true"]::before{display:none}
  .kanali-font::after,.kanali-font[aria-expanded="true"]::after{content:"";position:absolute;right:16px;top:17px;width:8px;height:8px;border:solid #14232b;border-width:1.5px 0 0 1.5px;transform:rotate(225deg)}
  .kanali-font[aria-expanded="true"]::after{top:20px;transform:rotate(45deg)}
  .kanali-font-menu{padding:6px;border-radius:8px}
  .kanali-window .kanali-font-menu button{height:44px;padding:0 10px;border-radius:6px;font-size:14px}
  .kanali-font-menu button::after{right:10px;top:12px;width:20px;height:20px;border-width:1px}
  .kanali-font-menu button[aria-checked="true"]::before{right:10px;top:12px;width:20px;height:20px}
}

/* GIPHY search (Try PANORAMA): over the preset area. */
.giphy-panel{position:absolute;z-index:25;left:24.72%;top:13.5%;width:74.2%;height:54%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:.8cqw;padding:1.2cqw;border-radius:1.2cqw;background:rgba(237,241,242,.97);color:#14232b;box-shadow:0 1.2cqw 4cqw rgba(20,35,43,.28),0 0 0 .08cqw rgba(20,35,43,.12);backdrop-filter:blur(8px)}
.giphy-panel[hidden]{display:none}
.giphy-head{display:flex;gap:.8cqw}
.giphy-search{flex:1;min-width:0;height:2.8cqw;padding:0 1.1cqw;border:.08cqw solid #c9d0d3;border-radius:2cqw;background:#fff;color:inherit;font:inherit;font-size:1.05cqw;outline:none}
.giphy-search:focus{border-color:#2ab7fe;box-shadow:0 0 0 .15cqw rgba(42,183,254,.25)}
.kanali-window .giphy-close{position:relative;width:2.8cqw;height:2.8cqw;border-radius:50%;background:#dfe4e6;font-size:1.6cqw;line-height:1}
.giphy-status{margin:0;font-size:.95cqw;color:#4c5a61}
.giphy-status:empty{display:none}
.giphy-error{color:#b0261d;font-weight:700}
.giphy-results{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:6.2cqw;gap:.6cqw;overflow:auto;scrollbar-width:thin;align-content:start}
.kanali-window .giphy-result{position:relative;border-radius:.6cqw;overflow:hidden;background:#d5dbde}
.giphy-result img{width:100%;height:100%;object-fit:cover}
.giphy-result:hover{box-shadow:0 0 0 .18cqw #2ab7fe}
.giphy-foot{display:flex;align-items:center;justify-content:space-between}
.kanali-window .giphy-own{position:relative;padding:.5cqw 1.1cqw;border-radius:2cqw;background:#2ab7fe;color:#fff;font-size:.95cqw}
.giphy-credit{font-size:.8cqw;font-weight:700;letter-spacing:.06em;color:#4c5a61}
@media(max-width:560px){
  .giphy-panel{position:relative;grid-column:1/-1;grid-row:7;left:auto;top:auto;width:100%;min-width:0;height:auto;max-height:70vh;gap:10px;padding:12px;border-radius:12px}
  .giphy-search{height:40px;padding:0 14px;font-size:16px;border-width:1px;border-radius:20px}
  .kanali-window .giphy-close{width:40px;height:40px;font-size:22px}
  .giphy-status{font-size:13px}
  .giphy-results{grid-template-columns:repeat(3,1fr);grid-auto-rows:84px;gap:6px;max-height:50vh}
  .kanali-window .giphy-result{border-radius:8px}
  .kanali-window .giphy-own{padding:10px 14px;font-size:14px;border-radius:20px}
  .giphy-credit{font-size:11px}
  .giphy-head .giphy-search{width:0}
  .giphy-foot{flex-wrap:wrap;gap:8px}
}
/* HD results: GIPHY has a sharp (usually 1080 px) version of these. */
.giphy-hd{position:absolute;right:.4cqw;bottom:.4cqw;padding:.1cqw .4cqw;border-radius:.3cqw;background:rgba(13,26,32,.78);color:#fff;font-size:.7cqw;font-weight:800;letter-spacing:.06em;pointer-events:none}
@media(max-width:560px){.giphy-hd{right:4px;bottom:4px;padding:1px 5px;border-radius:4px;font-size:10px}}
/* The narrowest phones (320px): the phone title keeps inside the window. */
@media (max-width:360px){.kanali-title{font-size:20px}.kanali-title span{margin-left:8px;font-size:13px}}