/* Screens remain real screenshots. Depth and light belong to the surrounding UI. */
.gallery-composition{position:relative;isolation:isolate}.screen-reflection{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,#ffffff08,transparent 34%,transparent 70%,#d9eecb04),radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,0%),#ffffff09,transparent 60%);mix-blend-mode:screen}.gallery-screen:after{content:'';position:absolute;inset:0;z-index:4;border:1px solid #ffffff07;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 #ffffff12}.interface-gallery.has-board .gallery-composition{padding-bottom:40px}.has-board .gallery-screen{width:93%;transform:perspective(1300px) rotateX(var(--tilt-x,1deg)) rotateY(var(--tilt-y,-6deg)) translateX(-12px)}.stage-board{position:absolute;z-index:5;right:-25px;bottom:0;width:36%;pointer-events:none;filter:drop-shadow(0 18px 22px #0009);transform:rotate(-8deg);transition:rotate .8s var(--ease-out),translate .8s var(--ease-out)}.stage-board img{width:100%;height:auto;transform:perspective(900px) rotateY(calc(var(--tilt-y,0deg) * -1)) rotateX(calc(var(--tilt-x,0deg) * -.6));transition:transform .8s var(--ease-out)}.stage-board>span{font-size:7px;letter-spacing:.13em;display:block;text-align:center;color:var(--gallery-accent);margin-top:10px}.has-board:hover .stage-board{translate:0 -4px;rotate:-1deg}.has-board .gallery-controls{position:relative;z-index:6;margin-top:10px}.has-board .gallery-hint{max-width:100%}.interface-card .card-art .card-screen{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(calc(var(--tilt-y,-5deg) * .8)) rotateZ(-2deg);transition:transform .9s var(--ease-out),filter .9s}.interface-card.edition-makcu .card-art .card-screen{width:91%;height:94%;transform:perspective(1000px) rotateY(calc(var(--tilt-y,6deg) * 1.3)) rotateZ(-4deg) translate(-7%,0)}.interface-card .card-art .card-board{position:absolute;right:3%;bottom:3px;width:37%;height:auto;max-height:90%;object-fit:contain;object-position:center;z-index:2;filter:drop-shadow(0 14px 13px #000b);border-radius:0;transform:rotate(9deg) translateY(5px);transition:transform .8s var(--ease-out)}.interface-card.edition-makcu:hover .card-art .card-board{transform:rotate(3deg) translateY(-2px)}.interface-card .card-art .card-number{z-index:3;font-size:32px;opacity:.6}.catalog-grid .card-art .card-board{width:35%;right:4%;bottom:5px}.hardware-section{background:radial-gradient(ellipse at 22% 50%,color-mix(in srgb,var(--green) 6%,transparent),transparent 60%),#0c100d;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.hardware-layout{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.hardware-object{position:relative;isolation:isolate;min-height:440px;display:grid;place-items:center}.hardware-orbit{position:absolute;width:300px;height:300px;border:1px solid color-mix(in srgb,var(--green) 23%,transparent);border-radius:50%;transform:rotateX(60deg) rotate(-20deg);bottom:40px;box-shadow:0 0 0 25px color-mix(in srgb,var(--green) 3%,transparent),0 0 0 50px color-mix(in srgb,var(--green) 2%,transparent);z-index:-1}.hardware-zoom{width:74%;padding:0;border:0;background:none;cursor:zoom-in;filter:drop-shadow(0 25px 24px #0009);transform:perspective(1300px) rotateX(var(--tilt-x,2deg)) rotateY(var(--tilt-y,-8deg)) rotate(-5deg);transition:transform .9s var(--ease-out)}.hardware-zoom img{width:100%;height:auto}.hardware-object-label{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.17em;color:var(--muted)}.hardware-copy h2{margin-bottom:23px}.hardware-copy>p{font-size:14px;color:var(--muted);line-height:1.9;max-width:470px}.hardware-spec{display:grid;grid-template-columns:25px 1fr;gap:13px;padding:20px 0;border-bottom:1px solid var(--line)}.hardware-spec>span{font:10px Consolas,monospace;color:var(--green);padding-top:4px}.hardware-spec h3{font-size:15px;font-weight:500;margin:0 0 8px}.hardware-spec p{font-size:12px;color:var(--muted);margin:0;max-width:420px;line-height:1.85}.hardware-copy .button{margin-top:27px}.hardware-copy p.hardware-caption{font-size:10px;margin-top:18px}.dialog.is-image-viewer{width:min(1060px,94vw);max-width:1060px;padding:47px 18px 15px;overflow:hidden}.image-viewer{width:100%}.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 3px 15px}.viewer-caption{color:var(--muted);font-size:11px;line-height:1.5;max-width:65%;margin:0}.viewer-controls{display:flex;gap:5px;align-items:center;flex-shrink:0}.viewer-controls button{background:#1b241a;border:1px solid #394732;border-radius:4px;min-width:34px;height:34px;padding:0 10px;color:var(--ink);font-size:13px}.viewer-controls button:disabled{opacity:.35;cursor:default}.viewer-controls .viewer-reset{min-width:58px;font-size:10px;font-variant-numeric:tabular-nums}.viewer-viewport{width:100%;height:min(66vh,740px);overflow:auto;overscroll-behavior:contain;border:1px solid #293728;border-radius:5px;background:radial-gradient(ellipse,#20291f,#10160f);touch-action:pan-x pan-y pinch-zoom;scrollbar-width:thin;scrollbar-color:#57674c #10160f}.viewer-canvas{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.viewer-viewport .viewer-canvas img{display:block;width:100%;height:100%;object-fit:contain;max-width:none;max-height:none;pointer-events:none;user-select:none;-webkit-user-drag:none}.viewer-viewport.is-zoomed{cursor:grab}.viewer-viewport.is-dragging{cursor:grabbing}.viewer-hint{margin:10px 0 0;font-size:10px;color:var(--muted);text-align:center;line-height:1.6}
@media(max-width:1050px){.stage-board{right:-10px;width:36%}.hardware-layout{gap:45px}.hardware-object{min-height:370px}.hardware-zoom{width:80%}.hardware-orbit{width:250px;height:250px}}
@media(max-width:740px){.has-board .gallery-screen{transform:none;width:95%}.interface-gallery.has-board .gallery-composition{padding-bottom:42px}.stage-board{right:-8px;width:32%;bottom:0}.stage-board>span{font-size:6px;letter-spacing:.05em;margin-top:5px}.hardware-layout{grid-template-columns:1fr;gap:38px}.hardware-object{min-height:340px}.hardware-zoom{width:min(70%,290px);transform:rotate(-5deg)}.hardware-orbit{width:230px;height:230px;bottom:25px}.hardware-copy>p{font-size:13px}.hardware-copy h2{font-size:33px}.hardware-object-label{font-size:7px}.hardware-spec h3{font-size:14px}.hardware-spec p{font-size:11px}.dialog.is-image-viewer{padding:44px 10px 12px;max-width:94vw}.viewer-toolbar{align-items:start;gap:10px;padding-bottom:12px}.viewer-caption{font-size:9px;max-width:60%}.viewer-controls{gap:3px}.viewer-controls button{min-width:28px;height:30px;padding:0 7px}.viewer-controls .viewer-reset{min-width:45px;font-size:9px}.viewer-viewport{height:60vh}.viewer-hint{font-size:9px}.interface-card .card-art .card-board{width:33%;right:6%}}
html[data-motion=off] .stage-board,html[data-motion=off] .stage-board img,html[data-motion=off] .hardware-zoom,html[data-motion=off] .has-board .gallery-screen,html[data-motion=off] .interface-card .card-art .card-screen,html[data-motion=off] .interface-card .card-art .card-board{transform:none!important;translate:none;rotate:none}
@media(prefers-reduced-motion:reduce){.stage-board,.stage-board img,.hardware-zoom,.has-board .gallery-screen,.interface-card .card-art .card-screen,.interface-card .card-art .card-board{transform:none!important;translate:none;rotate:none}}

/* Match the board to the surrounding scene; feather the cutout into its background. */
.interface-card .card-art .card-board{
  filter:saturate(.36) brightness(.65) contrast(.92) drop-shadow(0 12px 17px #0008);
  opacity:.9;
  border-radius:14%;
  -webkit-mask-image:radial-gradient(ellipse 76% 74% at 50% 46%,#000 50%,#000 64%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 74% at 50% 46%,#000 50%,#000 64%,transparent 100%);
}
.stage-board{
  filter:drop-shadow(0 18px 25px #0007);
}
.stage-board img{
  filter:saturate(.4) brightness(.7) contrast(.92);
  opacity:.92;
  border-radius:12%;
  -webkit-mask-image:radial-gradient(ellipse 78% 77% at 50% 46%,#000 55%,#000 68%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 77% at 50% 46%,#000 55%,#000 68%,transparent 100%);
}
.hardware-zoom img{
  filter:saturate(.48) brightness(.78) contrast(.94);
  border-radius:10%;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 46%,#000 58%,#000 72%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 46%,#000 58%,#000 72%,transparent 100%);
}

/* Native video layers over a persistent fallback poster. */
.demo-screen{background:#1c1c1c;aspect-ratio:var(--demo-aspect,5/3)}
.demo-gallery .gallery-screen{transform:none;}
.demo-gallery .screen-reflection{opacity:.25;}
.hero-demo-video,.hero-settings-video,.demo-menu-frame{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:#1c1c1c;}
.hero-demo-video{display:block;object-fit:contain;opacity:0;pointer-events:none;z-index:2;filter:brightness(.64) saturate(.54) contrast(.94);transition:opacity .32s ease;}
.demo-gallery.is-video .hero-demo-video{opacity:1;}
.hero-settings-video{display:block;object-fit:contain;opacity:0;pointer-events:none;z-index:3;transition:opacity .32s ease;}
.demo-gallery.is-settings-video .hero-settings-video{opacity:1;}
.demo-menu-frame{opacity:1;visibility:visible;cursor:zoom-in;z-index:1;}
.demo-menu-frame[aria-hidden=true]{pointer-events:none;}
.demo-menu-frame img{width:100%;height:100%;object-fit:contain;}
.demo-tabs{gap:6px;}
.demo-gallery .gallery-tab{font-size:10px;padding:10px 4px;}
.demo-gallery .gallery-count{min-width:44px;text-align:right;}
@media(max-width:740px){.demo-gallery .gallery-tab{font-size:9px;padding:11px 2px;}.demo-tabs{gap:4px;}}

/* Keep the hardware cue below the readable UI, and fade it during gameplay. */
.demo-gallery.has-board .gallery-composition{padding-bottom:64px;}
.demo-gallery.has-board .gallery-screen{width:100%;transform:none;}
.demo-gallery.has-board .stage-board{width:21%;right:10px;bottom:0;transition:opacity .32s ease,translate .8s var(--ease-out);}
.demo-gallery.has-board.is-video .stage-board{opacity:0;}
@media(max-width:740px){.demo-gallery.has-board .gallery-composition{padding-bottom:46px;}.demo-gallery.has-board .stage-board{width:20%;right:7px;}}

/* Each recording keeps its own shape; the surrounding layout stays stable. */
.interface-gallery.demo-gallery .gallery-screen{
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
  transform:none;
}
.demo-gallery .gallery-screen:after{display:none;}
.demo-gallery .screen-reflection,.demo-gallery .stage-orbit{display:none;}
.demo-gallery .hero-demo-video{
  top:50%;
  bottom:auto;
  height:auto;
  aspect-ratio:16/9;
  translate:0 -50%;
  object-fit:contain;
  background:transparent;
  border-radius:8px;
}
/* PUBG's indoor recording needs gentler grading to keep the action readable. */
.demo-gallery.theme-gold .hero-demo-video{filter:brightness(.86) saturate(.64) contrast(.98);}
.demo-gallery .hero-settings-video,.demo-gallery .demo-menu-frame{
  background:transparent;
  border-radius:8px;
}
.demo-gallery .demo-menu-frame{transition:opacity .32s ease;}
.demo-gallery .demo-menu-frame img{border-radius:inherit;}
.demo-gallery.is-video .demo-menu-frame{opacity:0;}
.demo-gallery .hero-demo-video,.demo-gallery .hero-settings-video,.demo-gallery .demo-menu-frame{
  box-shadow:none;
  transition:opacity .32s ease,box-shadow .25s ease;
}
@media(hover:hover) and (pointer:fine){
  .demo-gallery:hover .hero-demo-video,.demo-gallery:hover .hero-settings-video,.demo-gallery:hover .demo-menu-frame{
    box-shadow:0 0 0 1px color-mix(in srgb,var(--gallery-accent) 22%,transparent),0 12px 32px #0003;
  }
}

/* A small hardware accent stays over both recordings on Makcu Triggerbot. */
.demo-gallery.demo-board-overlay .gallery-composition{padding-bottom:0;}
.demo-gallery.demo-board-overlay .stage-board{
  width:18%;
  max-width:112px;
  right:1.5%;
  bottom:5%;
  transform:rotate(-6deg);
  filter:drop-shadow(0 8px 12px #0006);
}
.demo-gallery.demo-board-overlay.is-video .stage-board{opacity:1;}
.demo-gallery.demo-board-overlay .stage-board>span{display:none;}

/* A borderless sequence of the real settings recordings on the home page. */
.interface-gallery.settings-reel{
  --gallery-accent:#b4ed85;
  --reel-view:perspective(1200px) rotateX(13deg) rotateY(-5deg) rotateZ(1.5deg);
  perspective:none;
  padding:6px 0;
}
.settings-reel[data-reel-game=cs2]{--gallery-accent:#e9b76b;}
.settings-reel[data-reel-game=rust]{--gallery-accent:#e7a27a;}
.settings-reel[data-reel-game=pubg]{--gallery-accent:#d9d08c;}
.settings-reel .gallery-heading{margin:0 2px 20px;}
.reel-count{margin-left:auto;font:9px Consolas,monospace;letter-spacing:.1em;color:var(--muted);}
.interface-gallery.settings-reel .gallery-screen{
  aspect-ratio:1274/816;
  width:100%;
  overflow:visible;
  border:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  transform:var(--reel-view);
  transform-origin:center bottom;
  transform-style:flat;
  transition:transform .4s var(--ease-out);
}
.settings-reel .gallery-screen:after{display:none;}
.reel-video,.reel-poster,.reel-zoom{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:transparent;}
.reel-video,.reel-poster{display:block;height:auto;max-height:100%;object-fit:contain;object-position:center top;border-radius:7px;pointer-events:none;}
.reel-poster{opacity:1;transition:opacity .36s ease;}
.reel-video{opacity:0;z-index:1;transition:opacity .36s ease;}
.reel-video.is-visible{opacity:1;}
.has-reel-video .reel-poster{opacity:0;}
.reel-zoom{z-index:2;cursor:zoom-in;border-radius:7px;}
.reel-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px;}
.reel-captions{display:grid;min-width:0;}
.reel-caption{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .36s ease,transform .36s ease,visibility .36s;}
.reel-caption[aria-hidden=false]{opacity:1;visibility:visible;transform:none;}
.settings-reel .reel-title{margin:0;font-family:var(--font);font-size:clamp(28px,2.7vw,38px);font-weight:500;line-height:1.12;letter-spacing:-.055em;}
.settings-reel .reel-subtitle{margin:8px 0 0;font-size:10px;letter-spacing:.1em;color:var(--muted);line-height:1.5;}
.reel-nav{display:flex;gap:22px;margin-top:22px;}
.reel-tab{flex:1;min-width:0;position:relative;padding:9px 0 13px;border:0;background:transparent;text-align:left;color:var(--muted);font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.01em;transition:color .25s;}
.reel-tab[aria-pressed=true]{color:var(--gallery-accent);}
.reel-tab:hover{color:var(--ink);}
.reel-track{position:absolute;left:0;right:0;bottom:0;height:1px;overflow:hidden;background:#ffffff14;}
.reel-track i{display:block;width:100%;height:100%;background:var(--gallery-accent);transform:scaleX(0);transform-origin:left;}
.reel-tab[aria-pressed=true] .reel-track i{transform:scaleX(var(--reel-progress,0));transition:transform .2s linear;}
.reel-tab:focus-visible,.reel-zoom:focus-visible{outline:2px solid var(--gallery-accent);outline-offset:5px;}
/* The composition stays tilted even when decorative animation is paused. */
html[data-motion=off] .settings-reel .gallery-screen{transform:var(--reel-view);}
@media(max-width:740px){
  .interface-gallery.settings-reel{--reel-view:perspective(900px) rotateX(9deg) rotateY(-3deg) rotateZ(1deg);}
  .settings-reel .gallery-heading{margin-bottom:15px;}
  .reel-footer{margin-top:20px;}
  .settings-reel .reel-title{font-size:30px;}
  .settings-reel .reel-subtitle{font-size:9px;}
  .reel-nav{gap:16px;margin-top:17px;}
  .reel-tab{font-size:10px;padding:12px 0 14px;}
}
@media(prefers-reduced-motion:reduce){
  .interface-gallery.settings-reel .gallery-screen{transform:var(--reel-view);}
  .reel-video,.reel-poster,.reel-caption,.reel-tab .reel-track i{transition:none!important;}
}

/* Native dark screenshots keep their original colors and readable desktop size. */
.review-book{position:relative;width:min(100%,640px);justify-self:center;--book-delay:3000ms;}
.book-scene{position:relative;aspect-ratio:640/400;perspective:1700px;isolation:isolate;touch-action:pan-y;}
.book-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:22px 16px 20px;border:0;border-radius:16px;background:#181a1b;color:#e2e8de;text-align:left;cursor:zoom-in;opacity:0;visibility:hidden;pointer-events:none;transform-origin:left center;transform:none;backface-visibility:hidden;box-shadow:none;}
.book-page.is-active,.book-page.is-staged{opacity:1;visibility:visible;}
.book-page.is-active{z-index:2;pointer-events:auto;}
.book-page.is-staged{z-index:1;}
.review-book[data-turn=next] .book-page.is-active,.review-book[data-turn=previous] .book-page.is-staged{z-index:3;}
.book-page-top,.book-page-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--font);line-height:1.4;}
.book-page-top{font-size:9px;letter-spacing:.12em;color:#a0aaa3;font-weight:600;padding-inline:6px;}
.book-page-top>span:last-child{font-family:Consolas,monospace;letter-spacing:.08em;}
.book-shot{display:block;align-self:center;width:100%;max-width:608px;height:auto;margin:auto 0;flex-shrink:0;clip-path:inset(0 1px 0 0);user-select:none;-webkit-user-drag:none;}
.book-quotes{display:none;flex-direction:column;gap:20px;margin:auto 0;}
.book-quote{display:block;padding-bottom:18px;border-bottom:1px solid #ffffff0b;}
.book-quote:last-child{border-bottom:0;padding-bottom:0;}
.book-quote-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;line-height:1.5;color:#a1aba3;}
.book-quote-stars{flex-shrink:0;color:#e8dc44;letter-spacing:1px;font-size:12px;}
.book-quote-body{display:block;margin-top:8px;font-size:14px;line-height:1.6;color:#e2e8de;}
.book-page.is-image-error .book-shot{display:none;}
.book-page.is-image-error .book-quotes{display:flex;}
.book-page-bottom{font-size:11px;color:#a0aaa3;letter-spacing:.015em;padding-inline:6px;}
.book-page-bottom>span:last-child{font-size:16px;line-height:1;}
.book-controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:20px;}
.book-nav{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:22px;line-height:1;transition:color .2s,background .2s;}
.book-nav:hover:not(:disabled){color:var(--green);background:#ffffff06;}
.book-nav:disabled{opacity:.3;cursor:default;}
.book-counter{min-width:58px;text-align:center;font:11px Consolas,monospace;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums;}
.book-counter-wrap{display:grid;gap:8px;}
.book-auto-progress{display:block;height:1px;overflow:hidden;background:#ffffff12;}
.book-auto-progress i{display:block;height:100%;background:#9abd7a;transform-origin:left;transform:scaleX(0);}
.review-book.is-auto-playing .book-auto-progress i{animation:book-autofill var(--book-delay) linear forwards;}
.book-hint{margin:10px 0 0;text-align:center;font-size:10px;line-height:1.6;color:var(--muted);}
.book-hint small{display:block;margin-top:4px;font-size:9px;letter-spacing:.04em;opacity:.7;}
.book-nav:focus-visible,.book-page:focus-visible{outline:2px solid var(--green);outline-offset:5px;}
.book-status,.book-transcript{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
@keyframes book-autofill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1050px){
  .book-scene{aspect-ratio:1;}
  .book-shot{display:none;}
  .book-quotes{display:flex;}
}
@media(max-width:740px){
  .review-book{width:calc(100% + 24px);max-width:640px;margin-inline:-12px;}
  .book-scene{aspect-ratio:360/550;}
  .book-page{padding:20px 18px;gap:10px;border-radius:14px;}
  .book-controls{margin-top:24px;gap:20px;}
  .book-hint{font-size:9px;}
}