.graphics-viewport{--split:50%}
.graphics-showcase{margin-top:64px;padding-top:36px;border-top:1px solid #90aeb329;scroll-margin-top:110px}.graphics-showcase h3{font-size:clamp(25px,3vw,38px);margin:10px 0 16px}.graphics-intro,.graphics-honesty{color:#b5c6cb;line-height:1.8;max-width:850px}.graphics-controls{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:24px 0 18px}.graphics-presets,.graphics-time{display:flex;gap:8px;flex-wrap:wrap}.graphics-showcase button{font:inherit;font-weight:650;border:1px solid #8a9da440;background:#172932;color:#c8d3db;border-radius:12px;padding:12px 16px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.graphics-showcase button:hover{background:#273944;border-color:#ae91d3}.graphics-showcase button[aria-pressed=true]{background:#aa88cf29;border-color:#b395dc;color:#e7d4ff}.graphics-showcase button:focus-visible,.graphics-split:focus-visible{outline:3px solid #edbc77;outline-offset:4px}.graphics-viewport{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:20px;border:1px solid #8da4b039;background:#10232c}.graphics-frame{position:absolute;inset:0}.graphics-frame img{width:100%;height:100%;object-fit:cover}.graphics-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);background:#152b33}.graphics-after{background:#182a38}.graphics-placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;box-sizing:border-box;background:radial-gradient(ellipse at 65% 20%,#9e83c319,transparent 65%),linear-gradient(145deg,#20343c66,#101f28);color:#c2cdd1}.graphics-placeholder[hidden],.graphics-frame img[hidden]{display:none}.graphics-placeholder>span{font-size:50px;color:#bca0dc;margin-bottom:12px}.graphics-placeholder strong{font-size:clamp(14px,2vw,23px)}.graphics-placeholder p{font-size:clamp(11px,1.3vw,15px);margin:8px 0;max-width:80%;line-height:1.5}.graphics-viewport[data-time=night]{background:#0e1522}.graphics-viewport[data-time=night] .graphics-placeholder{background:linear-gradient(145deg,#172333,#0b1320);color:#bdc0d8}.graphics-badge{position:absolute;top:18px;left:18px;padding:8px 12px;border:1px solid #b8a18d66;border-radius:9px;background:#0c1926e8;font-size:clamp(10px,1.2vw,14px);color:#f4e7d1}.graphics-after .graphics-badge{left:auto;right:18px}.graphics-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#ebc487;pointer-events:none}.graphics-divider b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#e6bc7e;color:#12242c;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;box-shadow:0 2px 18px #0007}.graphics-range-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#e3d4bd;margin:18px 0 10px}.graphics-range-label span{color:#9eb1bb;font-size:13px}.graphics-split{display:block;width:100%;height:28px;appearance:none;background:transparent;cursor:ew-resize;accent-color:#c3a0de}.graphics-split::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,#e5b979,#ad85cd);border-radius:6px}.graphics-split::-webkit-slider-thumb{appearance:none;width:22px;height:22px;margin-top:-8px;background:#d6b4ec;border:3px solid #edddf8;border-radius:50%;box-shadow:0 0 0 4px #b397cc20;transition:box-shadow .2s}.graphics-split:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px #b397cc30}.graphics-split::-moz-range-track{height:6px;background:#b69acb;border-radius:6px}.graphics-split::-moz-range-thumb{width:18px;height:18px;background:#d6b4ec;border:2px solid #edddf8;border-radius:50%}.graphics-description{padding:18px 22px;margin-top:15px;border:1px solid #95a9b02e;border-radius:14px;background:#152731b3;min-height:92px;box-sizing:border-box}.graphics-description strong{color:#e2c394}.graphics-description p{margin:8px 0 0;color:#b7c8cd;line-height:1.6}.graphics-honesty{font-size:13px;margin-top:16px}@media(max-width:600px){.graphics-showcase{margin-top:38px}.graphics-controls{gap:12px}.graphics-presets button{padding:10px 12px;font-size:12px}.graphics-range-label{display:block}.graphics-range-label span{display:block;margin-top:6px}.graphics-viewport{aspect-ratio:4/3;border-radius:14px}.graphics-badge{top:9px;left:8px;padding:6px}.graphics-after .graphics-badge{right:8px}.graphics-placeholder{padding:12px}.graphics-placeholder>span{font-size:30px}.graphics-description{min-height:120px}}@media(prefers-reduced-motion:reduce){.graphics-showcase *{transition:none!important;animation:none!important}}