*{box-sizing:border-box}
:root{font-family:"Segoe UI",Tahoma,Arial,sans-serif;color:#f5f5f5;background:#111}
html,body{margin:0;min-height:100%;width:100%;overflow:hidden}
body{min-height:100vh;display:grid;place-items:center;background:#141719}
button{font:inherit}
.dashboard{position:relative;width:min(100vw,177.78vh);height:min(100vh,56.25vw);min-height:540px;overflow:hidden;background:radial-gradient(ellipse at 68% 48%,#b8babe 0,#999da2 37%,#777b81 70%,#565a60 100%);color:#eee}
.dashboard:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,#fff2,transparent 38%),linear-gradient(0deg,#00000012,transparent 24%)}
.topbar{position:absolute;top:6.3%;left:5.2%;right:5.1%;height:54px;display:flex;align-items:center;justify-content:space-between;z-index:5}
.tabs{display:flex;align-items:center;gap:31px}
.tab{border:0;background:none;padding:0;color:#d1d3d5;font-size:clamp(20px,2.05vw,31px);font-weight:300;letter-spacing:-.8px;cursor:pointer;text-transform:lowercase;text-shadow:0 1px 2px #3335}
.tab.active{color:#fff;font-weight:400}
.profile-chip{display:flex;align-items:center;gap:10px;background:none;border:0;color:#eee;cursor:pointer}
.gamertag{font-size:13px;text-shadow:0 1px 2px #222}
.gamerpic{width:31px;height:31px;border:1px solid #d9d9d9;background:linear-gradient(135deg,#c7d4a8,#6b8994 55%,#343d4b);display:grid;place-items:center;box-shadow:0 1px 4px #3338}
.gamerpic span{font-size:22px;color:#273c42}
.page{position:absolute;inset:0;display:none}
.page.active{display:block}
.home-grid{position:absolute;left:34.4%;top:29.2%;width:48.4%;height:43.5%;display:grid;grid-template-columns:.72fr 1fr 1fr;grid-template-rows:1.22fr .82fr;gap:3px}
.tile{position:relative;border:0;border-radius:0;min-width:0;min-height:0;padding:0;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;color:#fff;transition:filter .12s,transform .12s}
.tile:focus-visible,.tab:focus-visible,.profile-chip:focus-visible{outline:3px solid #fff;outline-offset:-4px;z-index:4}
.tile:hover{filter:brightness(1.08)}
.tile.selected{outline:3px solid #fff;outline-offset:-4px}
.green{background:#078b16}
.green:after{content:"";position:absolute;inset:0;border:1px solid #ffffff22;pointer-events:none}
.green .glyph{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:clamp(28px,3.1vw,46px);font-weight:300;color:#fff}
.green>span:last-child{position:relative;margin:0 0 10px 11px;font-size:clamp(13px,1.18vw,17px);font-weight:300}
.tile-apps{grid-column:1;grid-row:2}
.tile-profile{grid-column:2;grid-row:2}
.tile-account{grid-column:3;grid-row:2}
.console-ad{grid-column:1;grid-row:1;background:linear-gradient(140deg,#1c2b35,#090e13 70%);padding:12px 10px}
.console-art{position:absolute;inset:0 0 34px;display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at 50% 60%,#526777 0,#1c2b36 45%,#0c1118 100%)}
.console-x{width:32px;height:83px;background:linear-gradient(90deg,#050708,#303b42 40%,#0a0e12);border-radius:3px;box-shadow:0 4px 9px #000;position:relative}
.console-x:after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#111;box-shadow:0 0 0 1px #66747c}
.console-s{width:55px;height:29px;border-radius:5px;background:linear-gradient(135deg,#e6e7e5,#92999d 55%,#e9e9e8);box-shadow:0 4px 9px #000;position:relative}
.console-s:after{content:"";position:absolute;left:7px;top:7px;width:15px;height:15px;border-radius:50%;background:#171c20}
.tile-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px}
.tile-copy strong{font-size:clamp(10px,.9vw,13px);font-weight:400}
.tile-copy small{font-size:9px;color:#d1d6da}
.qr-ad{grid-column:2/4;grid-row:1;background:#08090c;align-items:flex-start;justify-content:center;padding:16px 18px 16px 34%;gap:12px}
.qr-copy{font-size:clamp(14px,1.35vw,20px);line-height:1.25;font-weight:300;color:#f3f3f3}
.qr-code{position:absolute;left:9%;top:13%;height:73%;aspect-ratio:1;background:#fff;padding:5px;display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);gap:1px}
.qr-code:before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0/8px 8px;opacity:.95}
.qr-code i{position:absolute;inset:5px;background:repeating-linear-gradient(90deg,transparent 0 5px,#111 5px 9px),repeating-linear-gradient(0deg,#fff 0 4px,transparent 4px 8px);mix-blend-mode:multiply}
.social-layout{position:absolute;left:7%;right:7%;top:23%;height:56%;display:grid;grid-template-columns:25% 1fr;gap:5%}
.social-tiles{display:grid;grid-template-rows:repeat(3,1fr);gap:3px}
.avatar-stage{position:relative;overflow:hidden}
.speech{position:absolute;right:3%;top:5%;width:34%;display:flex;flex-direction:column;gap:9px;color:#eee;text-shadow:0 1px 2px #333}
.speech strong{font-size:clamp(17px,2vw,27px);font-weight:400}
.speech span{font-size:clamp(15px,1.7vw,23px);line-height:1.3;font-weight:300}
.speech small{font-size:14px}
.avatar{position:absolute;bottom:0;width:120px;height:85%;filter:drop-shadow(0 4px 3px #3335)}
.avatar-one{left:19%}.avatar-two{left:43%;transform:scale(.92)}
.avatar .face{position:absolute;top:7%;left:32%;width:39%;height:27%;border-radius:42% 42% 48% 48%;background:linear-gradient(90deg,#8b5439,#d39a70 55%,#71432e)}
.avatar .hair{position:absolute;top:3%;left:30%;width:43%;height:17%;border-radius:50% 50% 20% 20%;background:#29221f;z-index:1}
.avatar .body{position:absolute;top:34%;left:18%;width:68%;height:43%;border-radius:22px 22px 8px 8px;background:linear-gradient(90deg,#d8dce0,#f4f4f2 50%,#aeb5bc)}
.avatar .legs{position:absolute;top:72%;left:28%;width:48%;height:28%;background:linear-gradient(90deg,#252b35 0 42%,transparent 42% 55%,#252b35 55%);border-radius:5px}
.avatar-two .body{background:linear-gradient(90deg,#303c4c,#263e5a 55%,#17283c)}
.avatar-two .hair{background:#3d241b}
.settings-grid{position:absolute;left:24%;top:27%;width:51%;height:51%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:3px}
.settings-grid .tile{min-height:0}
.settings-grid .glyph{top:42%}
.controller-hint{position:absolute;left:4%;right:4%;bottom:4.5%;display:flex;align-items:center;justify-content:space-between;color:#f1f1f1;font-size:13px;text-shadow:0 1px 2px #333;z-index:4}
.controller-hint>span:first-child{display:flex;align-items:center;gap:8px}
.a-button{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#69b744;color:#fff;font-size:12px;font-weight:600;text-shadow:none}
.hint-right{opacity:.0}
.selection-toast{position:absolute;left:50%;bottom:10%;transform:translate(-50%,10px);padding:9px 17px;background:#202326e8;color:#fff;font-size:13px;opacity:0;transition:.18s;pointer-events:none}
.selection-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){.dashboard{min-height:0;height:100vh;width:100vw}.topbar{left:5%;right:5%;top:4%}.tabs{gap:17px}.tab{font-size:22px}.home-grid{left:12%;top:28%;width:76%;height:46%}.social-layout{left:6%;right:6%;top:23%;height:55%;grid-template-columns:30% 1fr}.settings-grid{left:10%;width:80%;top:28%;height:48%}.controller-hint{bottom:3%}}
@media(max-width:520px){.tab{font-size:18px}.tabs{gap:13px}.gamertag{font-size:11px}.gamerpic{width:25px;height:25px}.home-grid{left:4%;width:92%;top:28%;height:43%;grid-template-columns:.7fr 1fr 1fr}.qr-ad{padding-left:32%;padding-right:8px}.qr-copy{font-size:12px}.qr-code{left:7%;height:65%;top:17%}.tile-copy small{display:none}.social-layout{left:4%;right:4%;grid-template-columns:34% 1fr}.speech{width:45%;right:0}.avatar{width:90px}.settings-grid{left:4%;width:92%;height:43%;top:30%}.settings-grid .green>span:last-child{font-size:11px;margin-left:6px}.controller-hint{font-size:11px}}