.screen-renewal{--sr-ink:#17354a;--sr-teal:#125565;--sr-line:#c6d9df;color:var(--sr-ink);max-width:1160px;width:calc(100% - 40px);margin:65px auto;scroll-margin-top:100px} .screen-renewal *{box-sizing:border-box} .screen-renewal h2,.screen-renewal h3,.screen-renewal p,.screen-renewal figure{margin:0} .screen-renewal .screen-eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:#287080;display:block;margin-bottom:12px} .screen-renewal .screen-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:24px} .screen-renewal h2{font-size:clamp(26px,3.2vw,40px);line-height:1.25;letter-spacing:-1.3px;color:var(--sr-ink)} .screen-renewal .screen-heading p{max-width:350px;color:#466273;line-height:1.8;font-size:15px} .screen-renewal .screen-release{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff7e5;border:1px solid #e5d3a7;border-radius:14px;padding:13px 18px;margin-bottom:20px;font-size:13px;color:#5b4a2b} .screen-renewal .screen-release b{margin-right:auto} .screen-renewal .screen-release a{color:#365b71;text-decoration:underline;text-underline-offset:3px} .screen-renewal .screen-shell{border:1px solid var(--sr-line);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 15px 40px #2245560c} .screen-renewal .screen-toolbar{padding:22px 24px 17px;background:linear-gradient(110deg,#f6fbff,#fff8e9);border-bottom:1px solid var(--sr-line)} .screen-renewal .screen-platforms{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px} .screen-renewal .screen-platforms>span{font-size:13px;font-weight:700;margin-right:6px} .screen-renewal button{font:inherit;cursor:pointer;min-height:44px;box-shadow:none;text-transform:none;letter-spacing:normal} .screen-renewal .screen-platforms button{border:1px solid #9dbbc6;background:#fff;border-radius:11px;padding:9px 22px;color:#34586a;font-size:14px;font-weight:750} .screen-renewal .screen-platforms button[aria-pressed=true]{background:var(--sr-teal);border-color:var(--sr-teal);color:white} .screen-renewal .screen-topics{display:flex;flex-wrap:wrap;gap:7px} .screen-renewal .screen-topics button{padding:9px 13px;border-radius:10px;border:1px solid #d2dce4;background:#ffffffc9;font-size:13px;font-weight:700;color:#3f596b} .screen-renewal .screen-topics button[aria-pressed=true]{background:#ffe9ad;border-color:#bf9446;color:#523d16} .screen-renewal .screen-content{padding:24px;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr);gap:26px;align-items:start} .screen-renewal .screen-figure{min-width:0} .screen-renewal .screen-image-button{padding:0;width:100%;display:block;border:1px solid #c8d6df;border-radius:14px;background:#173448;overflow:hidden;position:relative;line-height:0} .screen-renewal .screen-image-button img{display:block;width:100%;height:auto} .screen-renewal .screen-zoom-label{position:absolute;right:10px;bottom:10px;border-radius:8px;background:#102e43ef;color:white;padding:8px 10px;font-size:12px;line-height:1.3} .screen-renewal figcaption{font-size:12px;line-height:1.8;color:#5a7082;margin:10px 0} .screen-renewal .screen-example{font-size:12px;line-height:1.7;color:#5a7082;margin-top:10px} .screen-renewal h3{font-size:23px;line-height:1.45;letter-spacing:-.6px;margin-bottom:10px} .screen-renewal .screen-summary{font-size:14px;color:#466273;line-height:1.8;margin-bottom:18px} .screen-renewal .screen-steps{list-style:none;padding:0;margin:0;display:grid;gap:15px} .screen-renewal .screen-steps li{display:grid;grid-template-columns:29px 1fr;column-gap:10px} .screen-renewal .screen-step-number{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#e9f3f5;color:#1c6673;font-size:12px;font-weight:800} .screen-renewal .screen-steps strong{font-size:14px;line-height:29px} .screen-renewal .screen-steps p{font-size:13px;line-height:1.75;color:#4b6374} .screen-renewal .screen-hint{font-size:13px;line-height:1.8;color:#466273;border-top:1px solid #dbe5e9;margin-top:18px;padding-top:15px} .screen-renewal .screen-footer{padding:16px 24px;border-top:1px solid #dbe5e9;background:#f7fbfe;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;font-size:13px;line-height:1.7} .screen-renewal .screen-footer a{color:#175a73;font-weight:750;text-decoration:underline;text-underline-offset:4px} .screen-renewal button:focus-visible,.screen-renewal a:focus-visible{outline:3px solid #7d52c3;outline-offset:3px} .screen-dialog{padding:0;background:#f3f7fc;color:#17354a;border:1px solid #b3c7d4;border-radius:16px;max-width:min(1450px,96vw);width:max-content;max-height:94dvh;overflow:auto;box-shadow:0 25px 100px #0009} .screen-dialog::backdrop{background:#0c203bce} .screen-dialog .screen-dialog-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px;background:#f3f7fc} .screen-dialog .screen-dialog-bar p{margin:0;font-size:14px;font-weight:750} .screen-dialog button{font:inherit;padding:10px 16px;min-height:44px;border:1px solid #8fabbf;border-radius:9px;background:white;color:#1c415a;cursor:pointer} .screen-dialog img{display:block;max-width:100%;max-height:calc(94dvh - 78px);width:auto;height:auto;object-fit:contain} body.screen-dialog-open{overflow:hidden} .screen-renewal .screen-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .wrap>.screen-renewal{width:100%;max-width:none} @media(max-width:900px){.screen-renewal .screen-content{grid-template-columns:1fr}.screen-renewal .screen-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.screen-renewal .screen-steps li{display:block}.screen-renewal .screen-step-number{margin-bottom:7px}.screen-renewal .screen-steps strong{display:block;line-height:1.6;margin-bottom:5px}} @media(max-width:600px){.screen-renewal{width:calc(100% - 24px);margin:40px auto}.screen-renewal .screen-heading{display:block}.screen-renewal .screen-heading p{margin-top:15px}.screen-renewal .screen-toolbar{padding:17px 14px}.screen-renewal .screen-content{padding:14px;gap:20px}.screen-renewal .screen-release{padding:12px 14px}.screen-renewal .screen-release b{flex-basis:100%}.screen-renewal .screen-shell{border-radius:18px}.screen-renewal .screen-topics{gap:6px}.screen-renewal .screen-topics button{padding:8px 10px;font-size:12px}.screen-renewal .screen-steps{grid-template-columns:1fr;gap:15px}.screen-renewal .screen-steps li{display:grid;grid-template-columns:29px 1fr}.screen-renewal .screen-step-number{margin:0}.screen-renewal .screen-steps strong{line-height:29px;margin:0}.screen-renewal .screen-footer{padding:15px}.screen-renewal .screen-zoom-label{font-size:11px;right:7px;bottom:7px;padding:6px 8px}}