.device-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 20px;flex-wrap:wrap}
.device-switcher{display:flex;gap:4px;padding:5px;border-radius:100px;border:1px solid #ffffff22;background:linear-gradient(135deg,#ffffff0c,#ffffff03);box-shadow:inset 0 1px #ffffff15}
.device-switcher button,#rotate-device{min-height:44px;padding:11px 19px;color:#c2c2cb;font:500 12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:none;border:0;border-radius:100px;cursor:pointer;transition:background .2s,color .2s}
.device-switcher button[aria-pressed=true]{color:#19191e;background:#f1f0ee;box-shadow:0 2px 10px #0003}
.device-switcher button:focus-visible,#rotate-device:focus-visible{outline:3px solid #fff;outline-offset:4px}
#rotate-device{border:1px solid #ffffff25;background:#ffffff04;font-size:11px}
#rotate-device[hidden]{display:none}
.device-stage{position:relative}
.hint{top:126px}
.preview-fullscreen{display:none;align-items:center;justify-content:center;min-height:44px;font-size:12px;margin-top:10px;text-decoration:underline;text-underline-offset:4px}
body[data-device=tablet] .phone,body[data-device=tv] .phone{margin:auto;position:relative;min-height:0;max-width:none;box-sizing:content-box;padding:0;width:var(--device-width);height:var(--device-height);border:10px solid #3a3c41;overflow:hidden;border-radius:28px;background:#08090b;box-shadow:0 22px 70px #0008,inset 0 0 0 1px #ffffff30}
body[data-device=tablet] .phone:before,body[data-device=tv] .phone:before{display:none}
body[data-device=tablet] .phone iframe,body[data-device=tv] .phone iframe{position:absolute;inset:0;max-width:none;border:0;border-radius:0;width:var(--viewport-width);height:var(--viewport-height);transform-origin:top left;transform:scale(var(--device-scale))}
body[data-device=tv] .phone{border-width:7px;border-radius:16px;box-shadow:0 20px 90px #a1000017,0 30px 60px #0009}
body[data-device=tv] .device-stage:after{content:"";display:block;width:34%;height:10px;border-radius:50%;background:linear-gradient(#56585d,#18191c);margin:17px auto 0;box-shadow:0 8px 18px #0009}
body[data-device=tablet] .hint,body[data-device=tv] .hint{display:none}
body[data-device=tablet] .device-caption,body[data-device=tv] .device-caption{line-height:1.7;letter-spacing:.015em;max-width:650px;margin-inline:auto}
@media(min-width:951px){body[data-device=mobile] .phone{height:min(820px,calc(100dvh - 215px));min-height:580px}body:not([data-device=mobile]) .layout{grid-template-columns:310px minmax(0,1fr);max-width:1600px;gap:55px;padding-inline:42px}body:not([data-device=mobile]) .copy h1{font-size:48px}body:not([data-device=mobile]) .principles{display:none}body:not([data-device=mobile]) .copy .lead{font-size:14px}.device-controls{min-height:56px}}
@media(max-width:950px){.phone-area{width:100%;min-width:0}.device-stage{width:100%}body:not([data-device=mobile]) .copy{margin-top:15px}.preview-fullscreen{display:inline-flex}}
@media(max-width:440px){.device-controls{position:relative;z-index:3;margin:0;padding:8px;gap:6px;background:#131417;min-height:65px}.device-switcher{padding:3px}.device-switcher button{padding:10px 17px}.hint{display:none}body[data-device=mobile] .phone,body[data-device=mobile] .phone iframe{height:calc(100dvh - 70px)}body:not([data-device=mobile]) .device-stage{padding:22px 0 0}body:not([data-device=mobile]) .device-caption{display:block;padding-inline:16px;font-size:11px}body:not([data-device=mobile]) .preview-fullscreen{display:inline-flex}body[data-device=mobile] .preview-fullscreen{display:none}}
@media(prefers-reduced-motion:reduce){.device-switcher button,#rotate-device{transition:none}}

.bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;line-height:1.6}
.bottom .copyright{text-align:center;color:#a2a3ac;font-size:11px}
.bottom>a{justify-self:end;text-align:end}
@media(max-width:950px){.bottom{grid-template-columns:minmax(0,1fr);text-align:center;gap:12px}.bottom>a{justify-self:center;text-align:center}}