/* Device-showcase polish only. Uses the approved activity artwork as a static homepage illustration. */

/* Premium launch treatment for the contained homepage device preview. */
.device-section{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(230px,.68fr) minmax(560px,1.5fr) minmax(116px,.24fr);gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(32px,4vw,62px)!important;border:1px solid rgba(61,89,177,.14);border-radius:28px;background:radial-gradient(circle at 76% 25%,rgba(203,241,255,.95),transparent 31%),radial-gradient(circle at 16% 80%,rgba(245,222,255,.72),transparent 34%),linear-gradient(135deg,#fbfdff 0%,#f2f9ff 54%,#fffaff 100%);box-shadow:0 22px 52px rgba(29,70,137,.11)}
.device-section::before,.device-section::after{content:"";position:absolute;z-index:-1;border-radius:999px;pointer-events:none}.device-section::before{width:260px;height:260px;right:-115px;top:-145px;background:rgba(129,211,255,.25);filter:blur(2px)}.device-section::after{width:180px;height:180px;left:30%;bottom:-130px;background:rgba(255,196,225,.23)}
.device-copy{position:relative;z-index:1}.device-copy h2{margin:0;max-width:8ch;font-size:clamp(2rem,3.3vw,3.4rem);letter-spacing:-.05em;line-height:.98;color:#113d80}.device-copy h2 em{color:#6b31d4;font-style:normal}.device-copy p{max-width:24ch;margin:18px 0 0;font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.5;color:#35629b}
.device-showcase-group{position:relative;padding:22px 20px 17px;border:1px solid rgba(95,136,201,.14);border-radius:23px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(242,250,255,.7));box-shadow:0 18px 36px rgba(39,92,159,.1);backdrop-filter:blur(8px)}
.device-group-label{margin-bottom:12px;font-size:10px;letter-spacing:.16em}.polished-devices{height:224px;gap:clamp(12px,1.5vw,25px)}.polished-devices .device-item{gap:8px}.device-label{font-size:9px;letter-spacing:.14em}.polished-devices .device-frame{border-width:5px;box-shadow:0 18px 27px rgba(13,64,128,.24),inset 0 0 0 1px rgba(255,255,255,.3);transform:perspective(850px) rotateY(-2deg) rotateX(1deg)}
.polished-devices .phone{width:96px;height:184px;border-radius:23px}.polished-devices .tablet{width:244px;height:165px;border-radius:19px}.polished-devices .laptop{width:310px;height:173px;border-radius:14px 14px 5px 5px}.polished-devices .phone::after{top:8px;width:31px;height:5px}.polished-devices .laptop::after{bottom:-8px;height:9px}
.mini-library-hero{margin:6px 0;padding:7px 8px;border-radius:9px;font-size:10px;line-height:1.03}.mini-activity-grid{gap:5px}.mini-activity{min-height:78px;padding:6px;border-radius:8px}.mini-activity span{font-size:22px}.mini-activity strong{font-size:7px}.mini-activity small{font-size:5px}.mini-more{background:linear-gradient(135deg,#dfe2ff,#f9def7)}.mini-more span{color:#6c35d5}.device-compatibility{margin-top:14px;font-weight:800;font-size:10px;letter-spacing:.02em}.device-input-support{gap:8px 12px;margin-top:9px;font-size:9px}.device-input-support span{padding:4px 6px;border-radius:999px;background:rgba(231,244,255,.8)}.device-input-support b{font-size:11px}.device-note{position:relative;margin:0;color:#6d34d6;font-size:clamp(.8rem,1.2vw,1rem);font-weight:900;line-height:1.13;text-align:left;transform:rotate(-4deg)}
@media(max-width:1180px){.device-section{grid-template-columns:minmax(210px,.72fr) minmax(500px,1.4fr);gap:25px}.device-note{grid-column:2;justify-self:end;margin-right:20px}.polished-devices .tablet{width:222px;height:151px}.polished-devices .laptop{width:275px;height:154px}}
@media(max-width:900px){.device-section{grid-template-columns:1fr;padding:clamp(26px,5vw,44px)!important;text-align:center}.device-copy h2,.device-copy p{margin-left:auto;margin-right:auto}.device-showcase-group{width:min(100%,720px);margin:auto}.device-note{grid-column:auto;justify-self:center;margin:0;text-align:center;transform:none}.polished-devices{height:242px;flex-wrap:nowrap}.polished-devices .phone{width:96px;height:184px}.polished-devices .tablet{width:235px;height:160px}.polished-devices .laptop{width:285px;height:160px}}
@media(max-width:700px){.device-section{border-radius:22px}.device-showcase-group{padding:18px 12px 15px}.device-section .polished-devices{display:grid;height:auto;grid-template-columns:1fr;justify-items:center;gap:20px;padding:10px 0 14px}.polished-devices .device-item{width:100%}.polished-devices .phone{width:132px;height:252px}.polished-devices .tablet{width:min(100%,360px);height:238px}.polished-devices .laptop{width:min(100%,360px);height:202px}.device-input-support{justify-content:center;gap:7px;font-size:9px}.device-compatibility{font-size:10px;line-height:1.5}}
.device-showcase-group{min-width:0;text-align:center}
.device-group-label{margin:0 0 7px;color:#6c23db;font-size:10px;font-weight:900;letter-spacing:.09em}
.polished-devices{height:190px;gap:18px;align-items:flex-end}
.polished-devices .device-item{height:100%;display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px}
.device-label{margin:0;color:#0757c7;font-size:9px;font-weight:900;letter-spacing:.09em;line-height:1}
.polished-devices .device-frame{position:relative;flex:0 0 auto;overflow:hidden;background:#15243a;border:4px solid #15243a;box-shadow:0 13px 23px rgba(8,57,125,.22),inset 0 0 0 1px rgba(255,255,255,.2)}
.polished-devices .phone{width:84px;height:160px;padding:4px;border-radius:19px}
.polished-devices .tablet{width:200px;height:135px;padding:4px;border-radius:15px}
.polished-devices .laptop{width:250px;height:140px;padding:6px;border-radius:12px 12px 4px 4px}
.polished-devices .phone::after{content:"";position:absolute;z-index:5;top:7px;left:50%;width:26px;height:4px;border-radius:999px;background:#142235;transform:translateX(-50%)}
.polished-devices .laptop::after{content:"";position:absolute;bottom:-6px;left:-10%;width:120%;height:7px;border-radius:0 0 15px 15px;background:linear-gradient(#dbe6f0,#8c9daf);box-shadow:0 3px 4px rgba(8,49,100,.16)}
.match-phone-screen,.color-tablet-screen,.v2-library-screen{position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;background:#dff8ff}
.mini-app-bar{position:relative;z-index:4;height:19px;padding:4px 6px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#6931da,#0c74df);color:#fff;font-size:6px;line-height:1}
.mini-app-bar span{font-size:11px;font-weight:900}.mini-app-bar strong{font-size:6px}.mini-sound{display:grid;place-items:center;width:11px;height:11px;border-radius:50%;background:#fff3a4;color:#6433b9;font-size:7px!important}
.match-sky{position:absolute!important;z-index:0;inset:19px 0 0!important;width:100%!important;height:calc(100% - 19px)!important;object-fit:cover!important;object-position:center!important;opacity:.9}
.match-playfield{position:absolute;z-index:1;left:5px;right:5px;top:36px;bottom:15px;padding:3px;border-radius:6px;background:rgba(255,255,255,.86);box-shadow:0 2px 7px rgba(5,59,132,.22)}
.polished-devices .phone-board{display:block!important;width:100%!important;height:64%!important;object-fit:cover!important;object-position:center!important;border-radius:4px}
.phone-piece{position:absolute!important;z-index:2;width:20%!important;height:auto!important;object-fit:contain!important;filter:drop-shadow(0 1px 1px rgba(0,43,93,.28))}
.circle-piece{left:9%;bottom:4%}.square-piece{left:40%;bottom:4%}.triangle-piece{right:7%;bottom:3%}
.match-phone-screen p{position:absolute;z-index:3;bottom:0;left:0;right:0;margin:0;padding:3px 0;background:rgba(255,255,255,.88);color:#0757c7;text-align:center;font-size:5px;line-height:1}
.color-tablet-screen{background:linear-gradient(135deg,#c7f5fb,#fff8d7)}
.color-bar{height:19px;background:linear-gradient(90deg,#ff3d92,#ff8fba)}
.color-canvas{position:absolute;left:7%;right:7%;top:24px;bottom:23px;display:grid;place-items:center;border-radius:6px;background:#fff;box-shadow:0 2px 7px rgba(1,80,147,.17);overflow:hidden}
.polished-devices .color-canvas img{width:78%!important;height:96%!important;object-fit:contain!important;mix-blend-mode:multiply}
.color-controls{position:absolute;z-index:3;bottom:4px;left:7%;right:7%;height:15px;display:flex;align-items:center;justify-content:center;gap:5px;padding:2px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(1,80,147,.17)}
.color-controls span{width:9px;height:9px;border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(6,80,174,.16)}
.color-controls .pink{background:#ff3e93}.color-controls .yellow{background:#ffd54d}.color-controls .aqua{background:#17cfe0}.color-controls .purple{background:#7436db}.color-controls .green{background:#41c968}.color-controls b{margin-left:3px;color:#0a62c9;font-size:9px}
.v2-library-screen{padding:6px 8px;background:linear-gradient(135deg,#f6fcff,#e0f8fb 60%,#fff0f6);text-align:left;color:#0757c7}
.mini-library-bar{display:flex;align-items:center;justify-content:space-between;font-size:6px}.mini-library-bar strong{font-size:8px;color:#6c23db}.mini-library-bar span{font-size:5px;color:#3c77ba}
.mini-library-hero{margin:5px 0;padding:5px 7px;border-radius:7px;background:linear-gradient(100deg,#bdf2ff,#e8dcff);font-size:9px;line-height:1;color:#1660c8}.mini-library-hero b{color:#ff3a91}
.mini-activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.mini-activity{min-height:67px;padding:5px;border-radius:7px;display:flex;flex-direction:column;justify-content:end;overflow:hidden;color:#0757c7;box-shadow:0 2px 4px rgba(13,72,157,.12)}
.mini-activity span{display:block;margin:auto auto 3px;font-size:18px;line-height:1}.mini-activity strong{font-size:6px}.mini-activity small{font-size:4px}.mini-match{background:linear-gradient(135deg,#ffe66d,#ffb6d8)}.mini-match span{color:#ff3a91}.mini-color{background:linear-gradient(135deg,#7feaf0,#d9fbff)}.mini-color span{color:#7133db}.mini-print{background:linear-gradient(135deg,#dcff70,#ffe4aa)}.mini-print span{color:#f58d21}
.device-compatibility{margin:7px 0 0;color:#0757c7;font-size:10px;line-height:1.2}.device-input-support{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:10px;color:#0757c7}.device-input-support span{white-space:nowrap}.device-input-support b{margin-right:3px;color:#6c23db;font-size:12px}.device-input-support span:first-child b{color:#ff3a91}.device-input-support span:last-child b{color:#0877ef}
@media(max-width:900px){.polished-devices{height:auto;min-height:210px;flex-wrap:wrap;align-content:end;justify-content:center}.polished-devices .device-item{height:auto}.polished-devices .phone{width:102px;height:190px}.polished-devices .tablet{width:280px;height:190px}.polished-devices .laptop{width:300px;height:170px}}
@media(max-width:620px){.device-group-label{margin-bottom:11px}.device-section .polished-devices{display:grid;height:auto;grid-template-columns:1fr;justify-items:center;gap:16px;padding:8px 0 12px}.polished-devices .device-item{gap:7px}.device-label{font-size:10px}.polished-devices .phone{width:122px;height:230px}.polished-devices .tablet{width:min(100%,320px);height:215px}.polished-devices .laptop{width:min(100%,320px);height:180px}.device-compatibility{margin-top:8px;font-size:11px}.device-input-support{gap:7px 11px;font-size:10px}.mini-app-bar{height:23px;font-size:7px}.match-sky{inset:23px 0 0!important;height:calc(100% - 23px)!important}.match-playfield{top:43px;bottom:18px}.match-phone-screen p{font-size:6px}.color-bar{height:23px}.color-canvas{top:29px;bottom:29px}.color-controls{height:20px;gap:7px}.color-controls span{width:12px;height:12px}.mini-library-bar{font-size:8px}.mini-library-bar strong{font-size:10px}.mini-library-hero{font-size:12px}.mini-activity{min-height:80px}.mini-activity span{font-size:24px}.mini-activity strong{font-size:8px}.mini-activity small{font-size:6px}}