:root{color-scheme:dark;--showcase-ink:#eceaf2;--showcase-muted:#9998a4;--frame-bezel:23px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#08090b}body{font-family:Geologica,sans-serif;color:var(--showcase-ink);-webkit-font-smoothing:antialiased}a,button{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #cec0e7;outline-offset:6px}svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.showcase{height:100dvh;min-height:360px;display:grid;grid-template-rows:44px minmax(0,1fr) 28px;padding:14px 30px 13px;gap:10px;overflow:hidden}.showcase-header{display:flex;align-items:center;justify-content:space-between;gap:25px}.studio-brand{display:flex;align-items:center;gap:19px;font-size:17px;font-weight:500;letter-spacing:-.03em}.studio-brand span{font-size:10px;font-weight:400;color:#a8a6b1;letter-spacing:0;padding-left:19px;border-left:1px solid #38383f}.showcase-tools{display:flex;align-items:center;gap:27px}.showcase-tools a,.showcase-tools button{display:flex;align-items:center;gap:9px;font-size:10px;min-height:38px}.showcase-tools button{border:1px solid #3e3e46;border-radius:5px;background:#17171d;padding:0 12px}.showcase-tools a:hover{color:#ddd0f1}.showcase-tools button:hover{background:#292631}.device-stage{min-width:0;min-height:0;display:flex;justify-content:center;align-items:center;position:relative;padding:8px 10px 14px}.ipad{position:relative;background:#111214;border-radius:44px;padding:var(--frame-bezel);border:2px solid #858589;box-shadow:inset 0 0 0 1px #d0d0d280,inset 0 0 0 4px #292a2d,0 15px 35px #000b,0 35px 75px #0005;flex-shrink:0;isolation:isolate}.ipad:before{content:"";position:absolute;inset:4px;border:1px solid #ffffff0c;border-radius:39px;pointer-events:none}.ipad:after{content:"";position:absolute;inset:0;border-radius:42px;pointer-events:none;background:linear-gradient(135deg,#fff2,transparent 13%,transparent 80%,#ffffff0d);z-index:3;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px}.ipad-screen{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:19px;background:#faf9f6;box-shadow:0 0 0 1px #000;isolation:isolate}.ipad-screen iframe{display:block;position:absolute;top:0;left:0;width:1376px;height:1032px;border:0;transform-origin:top left;transform:scale(var(--presentation-scale,1));background:#faf9f6}.device-lens{position:absolute;left:7px;top:50%;transform:translateY(-50%);height:64px;width:9px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px}.device-lens i{width:8px;height:8px;border-radius:50%;background:#030407;box-shadow:inset 0 0 0 1px #1e2632}.device-lens i:after{content:"";display:block;width:3px;height:3px;border-radius:50%;background:#162b43;margin:2px}.device-lens span{width:4px;height:4px;border-radius:50%;background:#030407}.device-power{position:absolute;width:42px;height:3px;border-radius:2px 2px 0 0;background:linear-gradient(#c3c4c9,#68696d);top:-4px;left:65px}.device-volume{position:absolute;height:26px;width:3px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#77787c,#c4c5c8);left:-4px}.volume-one{top:68px}.volume-two{top:103px}.showcase-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4px;color:#aaa8b3;font-size:9px}.showcase-footer p{margin:0;display:flex;align-items:center;gap:10px}.showcase-footer p>span{color:#93909e}.showcase-footer b{font-size:8px;font-weight:400;letter-spacing:.04em;padding-left:11px;margin-left:2px;border-left:1px solid #3a3942}.showcase-hint{color:#8d8a99}.showcase-status{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);background:#ddd3f1;color:#20283f;padding:12px 18px;border-radius:6px;font-size:12px;max-width:90%;text-align:center}html:fullscreen .showcase{padding-top:8px;padding-bottom:8px}html:fullscreen .studio-brand span{display:none}html:fullscreen .showcase-footer{opacity:.7}@media(max-width:700px){.showcase{padding:12px 12px 10px;grid-template-rows:40px minmax(0,1fr) 36px;gap:5px}.studio-brand{font-size:14px}.studio-brand span{display:none}.showcase-tools{gap:12px}.showcase-tools a{font-size:9px}.showcase-tools button{padding:0 10px;min-height:34px}.showcase-tools button span{display:none}.device-stage{padding:7px 5px 12px}.ipad{border-radius:28px;box-shadow:inset 0 0 0 1px #d0d0d280,inset 0 0 0 3px #292a2d,0 15px 35px #000b}.ipad:before{border-radius:24px}.ipad:after{border-radius:27px}.ipad-screen{border-radius:12px}.device-lens{left:4px;width:7px}.device-lens i{width:6px;height:6px}.device-lens i:after{width:2px;height:2px}.device-lens span{width:3px;height:3px}.showcase-footer{font-size:8px;justify-content:center;text-align:center}.showcase-footer p{flex-wrap:wrap;justify-content:center;gap:6px}.showcase-footer p span{font-size:7px}.showcase-footer b{font-size:7px}.showcase-hint{display:none}.device-power{width:30px;left:45px}.device-volume{height:19px}.volume-one{top:50px}.volume-two{top:77px}}@media(max-height:520px){.showcase{padding:6px 20px;grid-template-rows:30px minmax(0,1fr) 18px;gap:3px}.studio-brand{font-size:13px}.showcase-tools a,.showcase-tools button{font-size:9px;min-height:28px}.showcase-footer{font-size:8px}.device-stage{padding:4px 8px}.ipad{border-radius:25px}.ipad:before{border-radius:21px}.ipad-screen{border-radius:11px}.device-lens{left:4px}.device-lens i{width:6px;height:6px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}