.brand #brand-name{font-size:20px;line-height:1.2;display:block;max-width:175px;overflow-wrap:anywhere}.pet-care h3{font-size:17px;margin-top:24px}.hatch-steps{list-style:none;counter-reset:hatch;padding:0;display:grid;gap:13px}.hatch-steps li{counter-increment:hatch;display:grid;grid-template-columns:28px 1fr;column-gap:10px;font-size:12px}.hatch-steps li:before{content:counter(hatch);grid-row:span 2;background:var(--sage);color:var(--green);border-radius:50%;width:26px;height:26px;text-align:center;line-height:26px}.hatch-steps span{font-size:11px;color:var(--muted);margin-top:4px}.species-list{list-style:none;padding:0;display:grid;gap:12px;font-size:12px}.species-list span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
:root{--cream:#f8f6ef;--paper:#fffdf7;--green:#426a51;--dark:#2c4335;--muted:#788175;--line:#e5e7dc;--sage:#e5ecdd;--yellow:#f1dca6;--danger:#a44942;--shadow:0 12px 32px #3a503008;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--dark);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bda56c;outline-offset:3px}button{transition:background-color .15s}button:hover{filter:brightness(.97)}[hidden]{display:none!important}.sidebar{width:254px;position:fixed;inset:0 auto 0 0;background:#fdfcf6;border-right:1px solid var(--line);padding:32px 20px 20px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:10px;margin:0 9px 48px;font-size:27px;letter-spacing:-1.5px;font-weight:750}.brand img{width:43px;height:43px}.brand-light{font-weight:400}.brand small{display:block;font-size:10px;letter-spacing:.05px;font-weight:500;color:var(--muted);margin-top:3px}.nav-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#8b9483;margin:0 13px 14px}nav{display:grid;gap:7px}nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;font-size:13px;font-weight:550;color:#6b7868}nav a.active{background:var(--green);color:white;box-shadow:0 5px 10px #426a511a}nav a:hover:not(.active){background:#edf0e6}.nav-icon{font-size:21px;width:24px;text-align:center;font-weight:400}.sidebar-note{background:#f0f2e6;border:1px solid #e2e7d3;border-radius:13px;padding:18px 16px;margin-top:auto}.little-leaf{font-size:30px;display:block;color:#87a471;margin-bottom:4px}.sidebar-note strong{font-size:12px}.sidebar-note p{color:#839078;font-size:11px;line-height:1.7;margin:8px 0 16px}.status-dot{display:flex;gap:7px;align-items:center;font-size:9px;color:#6d8260}.status-dot i,.connection i{width:6px;height:6px;background:#8ba967;border-radius:50%;display:inline-block}.keeper-button{display:flex;align-items:center;gap:10px;margin:23px 2px 0;padding:12px 5px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;color:var(--dark)}.avatar{height:34px;width:34px;border:1px solid #e3d7bf;background:#efe5d2;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:17px}.keeper-button strong{display:block;font-size:11px}.keeper-button small{display:block;font-size:9px;color:#8a8b7d;margin-top:3px}.keeper-button>span:last-child{margin-left:auto}main{margin-left:254px}.topbar{height:83px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 43px;gap:20px;font-size:9px;letter-spacing:1.4px;color:#84917d}.topbar>div{display:flex;align-items:center;gap:17px}.topbar-dot{margin:0 7px;color:#b4b9a9}.connection{font-size:10px;letter-spacing:0;white-space:nowrap}.connection i{margin-right:4px}.icon-button{border:0;background:none;font-size:23px;color:#788571;padding:3px}.outline-button,.primary-button,.soft-button{border-radius:9px;font-size:11px;font-weight:650;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px}.outline-button{background:transparent;border:1px solid #d4dbca;color:var(--green)}.primary-button{background:var(--green);color:white;border:1px solid var(--green)}.soft-button{background:#edf1e6;border:1px solid #e0e6d7;color:var(--green)}.content{padding:35px 43px 40px;max-width:1560px;margin:auto}.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:#889577}.page-title h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:33px;letter-spacing:-.8px;margin:9px 0 8px}.page-title p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}.hero{border:1px solid #dce4ce;background:#eaf0df;border-radius:16px;padding:29px 31px;position:relative;min-height:217px;overflow:hidden;display:flex;align-items:center;margin-bottom:27px}.hero-copy{width:57%;position:relative;z-index:1}.hero .eyebrow{color:#718664;font-size:8px}.hero h2{font-family:Georgia,serif;font-size:29px;font-weight:400;line-height:1.25;margin:13px 0 11px;letter-spacing:-.3px;max-width:430px}.hero p{font-size:11px;line-height:1.7;color:#78896e;max-width:350px;margin:0 0 17px}.hero img{position:absolute;right:2px;bottom:-1px;width:45%;max-width:470px;height:100%;object-fit:contain}.hero-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid #cedabb;background:#f3f6e9;border-radius:20px;padding:7px 10px;font-size:8px;color:#7b886d}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:27px}.stat{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:17px 18px;display:flex;align-items:center;gap:12px}.stat-icon{background:#f0eee2;color:#8ba070;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;font-size:18px}.stat strong{display:block;font-family:Georgia,serif;font-size:22px;font-weight:400}.stat small{display:block;font-size:10px;color:#8c9383;margin-top:3px}.store-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:27px 0 19px}.tabs{display:flex;gap:5px;flex-wrap:wrap}.tab{border:0;background:none;color:#85907f;font-size:10px;font-weight:600;padding:9px 12px;border-radius:7px;white-space:nowrap}.tab.active{background:#e6eddc;color:var(--green)}.search-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:0 11px;gap:8px;font-size:13px;color:#97a08e}.search-box input{width:150px;padding:9px 0;border:0;background:none;outline:none;font-size:10px}.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.item-card{border:1px solid var(--line);border-radius:13px;background:var(--paper);padding:10px;box-shadow:var(--shadow);min-width:0}.item-art{height:139px;border-radius:8px;background:#eff1e4;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.item-art img{width:105px;height:105px;object-fit:contain;image-rendering:pixelated;mix-blend-mode:multiply}.item-art.food{background:#f6e9dc}.item-art.toy{background:#e9eee1}.item-art.accessory{background:#f5edcf}.item-art.furniture{background:#eee9df}.item-art.background{background:#e4edde}.item-badge{position:absolute;top:9px;left:9px;font-size:7px;letter-spacing:.8px;text-transform:uppercase;background:#fffdf5cf;color:#728367;border:1px solid #fffdf5;padding:5px 7px;border-radius:5px}.disabled-badge{background:#eee4df;color:#a56558}.item-body{padding:14px 8px 6px}.item-category{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#95a186}.item-card h3{font-family:Georgia,serif;font-weight:400;font-size:18px;margin:7px 0}.item-card p{font-size:10px;line-height:1.5;color:#939783;margin:0 0 14px;min-height:29px}.item-bottom{display:flex;justify-content:space-between;align-items:center;gap:5px;border-top:1px solid #edf0e5;padding-top:11px}.price{font-weight:700;font-size:12px;color:#647852;display:flex;gap:5px;align-items:center}.coin{width:16px;height:16px;border-radius:50%;background:#f1dfac;color:#aa8950;border:1px solid #e3ce94;display:inline-grid;place-items:center;font-size:10px;font-family:Georgia,serif}.item-actions{display:flex;gap:5px}.text-button{border:0;background:none;color:var(--green);font-size:10px;padding:6px 7px;font-weight:600}.item-off{opacity:.65}.section-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:25px 0 16px}.section-header h2{font-family:Georgia,serif;font-weight:400;font-size:21px;margin:0}.section-header small{color:#8a947e;font-size:10px}.panel{border:1px solid var(--line);border-radius:13px;background:var(--paper);padding:23px;box-shadow:var(--shadow);margin-bottom:18px}.panel h2{font-family:Georgia,serif;font-size:21px;font-weight:400;margin:0 0 8px}.panel p{font-size:11px;color:var(--muted);line-height:1.75}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.empty{border:1px dashed #d9e1ce;background:#f3f5ea;border-radius:13px;padding:37px 22px;text-align:center;color:#849277;font-size:12px;line-height:1.8}.empty strong{display:block;font-family:Georgia,serif;font-size:21px;color:var(--dark);font-weight:400;margin-bottom:5px}.device-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.device-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px}.device-heading{display:flex;align-items:center;gap:14px;margin-bottom:18px}.device-heading img{width:46px;height:46px;border-radius:13px}.device-heading h2{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:0 0 4px}.device-heading small{font-size:9px;color:var(--muted)}.pill{display:inline-flex;font-size:8px;color:#6e8b5c;background:#e9efdf;padding:5px 8px;border-radius:20px}.pill.neutral{background:#ecebe3;color:#8b8e7d}.device-heading .pill{margin-left:auto}.detail-list{display:grid;gap:10px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px}.detail-row{display:flex;justify-content:space-between;gap:10px}.detail-row>span:first-child{color:#929984}.detail-row>span:last-child{text-align:right;overflow-wrap:anywhere}.device-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.weather-box{background:#eff3e9;border-radius:9px;padding:12px;margin-top:16px;display:flex;gap:12px;align-items:center}.weather-icon{font-size:27px}.weather-box strong{font-size:12px;font-weight:600}.weather-box small{display:block;font-size:9px;color:#8a967c;margin-top:4px}.family-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.family-chip{font-size:9px;border:1px solid #e2e6d8;border-radius:7px;padding:5px 7px;color:#7c8d70}.social-list{display:grid;gap:10px}.social-entry{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.social-entry:last-child{border:0}.social-entry>div{flex:1;min-width:0}.social-entry strong{display:block;font-size:12px;font-weight:600}.social-entry small{font-size:9px;color:#899580}.social-entry p{margin:7px 0 0;font-size:11px;overflow-wrap:anywhere}.social-entry .avatar{flex-shrink:0}.warning-note{font-size:10px;line-height:1.7;color:#8b907b;padding:12px 0}.info-table{width:100%;border-collapse:collapse;font-size:11px}.info-table td{padding:12px 0;border-bottom:1px solid var(--line)}.info-table td:first-child{color:#8d9683;width:38%}.info-table td:last-child{overflow-wrap:anywhere}.last-updated{font-size:9px;color:#9ba18c;display:block;margin-top:14px}footer{padding:23px 43px;border-top:1px solid var(--line);font-size:9px;color:#9da28d;display:flex;justify-content:space-between;gap:10px}.footer-flower{padding:0 7px;color:#adb990}.toast{position:fixed;bottom:28px;right:28px;border:1px solid #c5d2b7;background:#f7f9ef;padding:16px 20px;border-radius:11px;box-shadow:0 9px 28px #3c513b22;font-size:12px;max-width:380px;z-index:50}.toast.error{border-color:#dbb8a8;color:var(--danger);background:#fff5ef}dialog{border:1px solid #d7ddca;border-radius:18px;padding:30px;max-width:560px;width:calc(100% - 32px);color:var(--dark);background:var(--paper);box-shadow:0 30px 100px #2b413433;max-height:90vh}dialog::backdrop{background:#2c433563;backdrop-filter:blur(3px)}dialog h2{font-family:Georgia,serif;font-size:28px;font-weight:400;margin:13px 0 10px}dialog p{font-size:12px;line-height:1.7;color:#829079}dialog form{display:grid;gap:15px}.dialog-close{position:absolute;top:15px;right:17px;background:none;border:0;color:#84927c;font-size:24px;padding:3px 8px}label{display:grid;gap:7px;font-size:11px;font-weight:600;color:#7a8b70}input,select{border:1px solid #dbe2d1;background:#fffefa;border-radius:8px;color:var(--dark);padding:11px 12px;font-size:12px;width:100%;min-width:0}input[type=color]{height:43px;padding:5px}input[type=checkbox]{width:15px;height:15px;accent-color:var(--green)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.checkbox-label{display:flex;align-items:center;font-weight:500}.form-error{color:var(--danger)!important;margin:0;font-size:11px!important}.muted{font-size:10px;color:#94a086;line-height:1.6}.dialog-actions{display:flex;gap:10px;align-items:center}.location-results{display:grid;gap:7px}.location-choice{border:1px solid #dbe3cf;border-radius:9px;background:#f2f5e9;padding:12px;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:500}.location-choice input{width:15px}.location-choice small{display:block;font-size:9px;color:#96a080;margin-top:4px}.error-panel{border:1px solid #e5d4ba;background:#fbf4e6;border-radius:12px;padding:22px;color:#9c8156;font-size:12px;line-height:1.7}.catalogue-count{font-size:10px;color:#99a38d;margin:20px 0 0}.code{font-family:ui-monospace,monospace;font-size:10px}.skeleton{height:180px;background:#eef0e4;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#92a083}.privacy-note{display:flex;gap:13px;padding:20px;border:1px solid #dfe5d4;background:#edf2e5;border-radius:12px;font-size:11px;line-height:1.7;color:#7c8f6e}.privacy-note strong{color:#4b6b40;display:block}.privacy-note>span{font-size:23px}.header-count{margin-left:9px;display:inline-block;padding:4px 8px;background:#eef2e6;border-radius:20px;color:#829473;font:10px ui-sans-serif,system-ui}
@media(min-width:1600px){.store-grid{grid-template-columns:repeat(4,1fr)}.hero img{right:25px}.hero{min-height:240px}}
@media(max-width:1100px){.sidebar{width:220px;padding:28px 15px 20px}.brand{font-size:23px}.brand small{font-size:8px}.sidebar-note{padding:15px 12px}main{margin-left:220px}.topbar{padding:0 27px}.content{padding:30px 27px}.store-grid{grid-template-columns:repeat(2,1fr)}.stat-row{grid-template-columns:repeat(2,1fr)}.hero h2{font-size:26px}.hero img{width:44%}.hero-copy{width:61%}.topbar>span{font-size:8px}.topbar>div{gap:10px}footer{padding:23px 27px}}
@media(max-width:760px){.sidebar{width:auto;position:static;padding:17px 20px 0;border-right:0;border-bottom:1px solid var(--line)}.brand{margin:0 0 15px;font-size:25px}.brand small{font-size:9px}.brand img{width:38px;height:38px}.nav-label,.sidebar-note,.keeper-button{display:none}nav{display:flex;overflow-x:auto;gap:3px;margin:0 -20px;padding:0 14px 10px}nav a{font-size:10px;padding:10px 11px;white-space:nowrap;gap:5px;border-radius:8px}.nav-icon{font-size:15px;width:15px}main{margin-left:0}.topbar{padding:0 20px;height:65px}.topbar>span{font-size:7px;letter-spacing:.9px}.topbar-dot,#date-label{display:none}.topbar>div{gap:9px}.connection{font-size:8px}.outline-button,.primary-button,.soft-button{font-size:10px;padding:10px 12px}.content{padding:25px 20px 30px}.page-title{align-items:flex-start;gap:12px}.page-title h1{font-size:29px}.page-title p{font-size:11px}.page-title .primary-button{margin-top:25px;white-space:nowrap}.hero{min-height:212px;padding:25px 23px;margin-bottom:20px}.hero-copy{width:64%}.hero h2{font-size:23px}.hero p{font-size:10px;max-width:200px}.hero img{width:49%;right:-31px;bottom:-11px;opacity:.9}.hero-badge{font-size:7px}.stat-row{gap:10px;margin-bottom:22px}.stat{padding:13px;gap:9px}.stat-icon{width:30px;height:30px;font-size:15px}.stat strong{font-size:20px}.stat small{font-size:9px}.store-toolbar{flex-wrap:wrap;gap:14px;margin-top:20px}.tabs{gap:0}.tab{padding:8px 9px;font-size:9px}.search-box{width:100%}.search-box input{width:100%;font-size:11px;padding:11px 0}.store-grid{gap:12px}.item-art{height:120px}.item-art img{width:90px;height:90px}.item-body{padding:11px 4px 5px}.item-card h3{font-size:16px}.item-card p{font-size:9px}.item-actions{gap:0}.text-button{font-size:9px;padding:6px 5px}.item-badge{font-size:6px}.device-grid,.two-columns{grid-template-columns:1fr}.device-card,.panel{padding:20px}.toast{bottom:17px;right:17px;left:17px;max-width:none}footer{padding:20px;font-size:8px}dialog{padding:25px}.form-grid{gap:12px}.dialog-actions{flex-wrap:wrap}.info-table td:first-child{width:40%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
textarea{font:inherit;border:1px solid #dbe2d1;background:#fffefa;border-radius:8px;color:var(--dark);padding:11px 12px;font-size:12px;width:100%;resize:vertical}#world-name-form{display:grid;gap:16px;margin-top:18px}.login-options{display:flex;gap:12px;flex-wrap:wrap}.service-control{display:flex;align-items:center;gap:13px;padding:17px 0;border-bottom:1px solid var(--line)}.service-control:last-child{border-bottom:0}.service-control>div{flex:1}.service-control strong{font-size:12px;font-weight:650}.service-control p{margin:6px 0 0;font-size:10px;line-height:1.65;max-width:450px}.service-switch{width:40px;height:23px;border-radius:16px;background:#d6decd;border:1px solid #cdd6c2;position:relative;flex-shrink:0;padding:0}.service-switch span{width:17px;height:17px;background:#fffefa;border-radius:50%;position:absolute;left:2px;top:2px;box-shadow:0 1px 3px #3c543322}.service-switch.enabled{background:var(--green);border-color:var(--green)}.service-switch.enabled span{left:19px}.game-catalogue{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.game-tile{margin-bottom:0;padding:20px}.game-tile h2{font-size:19px;margin-top:12px}.game-tile .detail-row{font-size:9px;color:#97a18b;border-top:1px solid var(--line);padding-top:11px;margin-top:15px}.game-tile .eyebrow{font-size:8px}#recovery-key-value{font-family:ui-monospace,monospace;font-size:12px;overflow-wrap:anywhere}#login-options .text-button{padding-left:0}@media(max-width:1100px){.game-catalogue{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.game-catalogue{grid-template-columns:1fr}.service-control{gap:9px}.service-control .stat-icon{width:30px;height:30px;font-size:15px}.service-control strong{font-size:11px}.service-control p{font-size:9px}.service-control .service-switch{width:38px}.service-switch.enabled span{left:17px}.login-options{gap:4px}}

.mirror-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}.mirror-screen{background:#e7eddf;border-radius:16px;padding:16px}.mirror-screen canvas{display:block;max-width:100%;width:100%;aspect-ratio:3/2;image-rendering:auto;touch-action:none;background:#d9e2ce;border-radius:8px}.mirror-screen p{font-size:11px}.mirror-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.mirror-needs{display:grid;gap:16px}.mirror-need>div:first-child{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.need-track{height:11px;background:#e2e7d9;border-radius:8px;overflow:hidden}.need-track span{height:100%;display:block;background:#719476;width:0}.mirror-panel h3{font-size:17px;margin-top:24px}@media(max-width:760px){.mirror-layout{grid-template-columns:1fr}.mirror-screen{padding:10px}}

/* Stylish Header Logo & Brand */
.brand{display:flex;align-items:center;gap:12px;margin:0 9px 36px;text-decoration:none;transition:opacity .15s}
.brand img{width:42px;height:42px;border-radius:12px;box-shadow:0 4px 12px rgba(45,90,60,0.16);transition:transform .25s cubic-bezier(0.34,1.56,0.64,1)}
.brand:hover img{transform:scale(1.08) rotate(-3deg)}
.brand #brand-name{font-size:20px;line-height:1.2;display:inline-flex;align-items:baseline;letter-spacing:-.4px}

.topbar-left{display:flex;align-items:center;gap:11px;min-width:0}
.topbar-divider{color:#c5cdba;font-size:14px;font-weight:300}
.header-brand-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:rgba(255,255,255,0.7);backdrop-filter:blur(6px);border:1px solid #dbe3cf;padding:4px 12px 4px 6px;border-radius:20px;box-shadow:0 2px 8px rgba(66,106,81,0.06);transition:all .2s ease}
.header-brand-logo:hover{background:#fff;border-color:#b5c9a7;box-shadow:0 4px 12px rgba(66,106,81,0.12);transform:translateY(-1px)}
.header-logo-icon{width:24px;height:24px;border-radius:7px;display:block}
#header-brand-name{font-size:14px;line-height:1;display:inline-flex;align-items:baseline;letter-spacing:-.3px}

.logo-subdomain{color:#234a31;font-weight:800;letter-spacing:-.4px}
.logo-dot{color:#4f8a61;font-weight:900;margin:0 1px}
.logo-domain{color:#6c7a6b;font-weight:600;font-size:.9em}
.mirror-host-badge{display:block;font-size:12px;color:#5a755d;font-weight:600;margin-top:2px;letter-spacing:-.2px}

/* Mirror UI (Zero inline styles, CSP compliant) */
.mirror-methods{display:flex;gap:10px;margin:12px 0 16px;flex-wrap:wrap;align-items:center}
.mirror-modes{margin-left:auto;display:flex;gap:6px;align-items:center}
#mirror-connection-hint{width:100%}
#mirror-game-controls{display:none;margin-bottom:12px;gap:8px;flex-wrap:wrap;align-items:center}
#mirror-game-title{font-weight:600;margin-right:8px;font-size:13px;color:var(--dark)}
.game-exit-btn{margin-left:auto}
.game-play-btn{padding:4px 12px;font-size:11px;font-weight:600}
.game-row{align-items:center;margin-bottom:8px}
.games-header-row{display:flex;align-items:center;justify-content:space-between;margin-top:24px;margin-bottom:8px}
.games-header-row h3{margin:0;font-size:16px}
.game-rotate-btn{padding:4px 10px;font-size:11px}
#mirror-games.highlight{animation:highlightPulse 1.2s ease}
@keyframes highlightPulse{0%{background:rgba(113,148,118,0.25)}100%{background:transparent}}
#mirror-canvas{width:100%;max-width:480px;height:auto;aspect-ratio:240/160;image-rendering:auto;border-radius:8px;background:#09112a;cursor:pointer}
#mirror-canvas.hardware-render{image-rendering:pixelated}
.arcade-tabs{display:flex;gap:6px;margin:10px 0 12px;align-items:center;flex-wrap:wrap}
.arcade-tab{border:1px solid #d4dbca;background:#fff;color:var(--dark);padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600}
.arcade-tab.active{background:var(--green);color:#fff;border-color:var(--green)}
.arcade-grid{display:grid;grid-template-columns:1fr;gap:8px;max-height:360px;overflow-y:auto;padding-right:4px}
.arcade-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:border-color .15s}
.arcade-card:hover{border-color:#b5c9a7}
.arcade-card h4{margin:0 0 2px;font-size:13px;font-weight:650}
.arcade-card p{margin:0;font-size:10px;color:var(--muted)}
.arcade-card-meta{display:flex;align-items:center;gap:6px;margin-top:4px}
.arcade-category{font-size:8px;text-transform:uppercase;letter-spacing:.8px;padding:2px 6px;border-radius:4px;background:#e9efdf;color:var(--green);font-weight:700}
.arcade-playing-banner{background:#e7f3ea;border:1px solid #c2e2cc;border-radius:8px;padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.arcade-playing-banner strong{font-size:12px;color:var(--green)}
.manual-credentials-toggle{margin:12px 0 6px;padding:8px 10px;background:#f6f8f3;border:1px dashed var(--line);border-radius:8px;font-size:12px}
.manual-credentials-toggle summary{cursor:pointer;color:var(--muted);font-weight:600}
.manual-credentials-toggle[open] summary{margin-bottom:8px}
#pair-code-field input{font-family:monospace;font-size:18px;letter-spacing:2px;text-transform:uppercase;text-align:center;font-weight:700}

/* Registered Devices Fleet Table */
.devices-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:14px;font-size:12px;background:#fffefa;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.03)}
.devices-table th{text-align:left;padding:12px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#6b7c67;border-bottom:1px solid var(--line);background:#f7faf3}
.devices-table th:last-child{text-align:right}
.devices-table td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--dark);vertical-align:middle;width:auto!important}
.devices-table tr:last-child td{border-bottom:0}
.devices-table td:last-child{text-align:right}
.devices-table tbody tr{transition:background .15s ease}
.devices-table tbody tr:hover{background:#fafcf7}
.devices-table code{font-family:ui-monospace,monospace;font-size:12px;font-weight:600;background:#edf3e7;color:#285034;padding:4px 8px;border-radius:6px;border:1px solid #d4decb}
.devices-table .pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:12px;display:inline-flex;align-items:center;gap:4px}
.devices-table .pill-paired{background:#e5f4df;color:#276b2a;border:1px solid #c4e5bc}
.devices-table .pill-pending{background:#fdf6dd;color:#8a6500;border:1px solid #f6e4a4}
.devices-table .pill-unclaimed{background:#f2f2ed;color:#606359;border:1px solid #dfdfd7}
.devices-table .pill-revoked{background:#fde8e8;color:#9b2727;border:1px solid #f6c4c4}
.devices-table .owner-tag{font-weight:600;color:#355c3c;background:#edf5ea;padding:3px 8px;border-radius:6px;font-size:11px}
.devices-table .unpair-button{display:inline-flex;align-items:center;padding:6px 14px;font-size:11px;font-weight:650;border-radius:8px;border:1px solid #e2cbcc;background:#fff;color:#963232;cursor:pointer;transition:all .2s ease}
.devices-table .unpair-button:hover{background:#fdf2f2;border-color:#e89f9f;color:#b81e1e;transform:translateY(-1px);box-shadow:0 2px 6px rgba(184,30,30,0.12)}

/* Encyclopedia Wiki Formatting System */
.wiki-container{max-width:1380px;margin:0 auto}
.wiki-masthead{margin-bottom:20px}
.wiki-breadcrumbs{font-size:11px;color:#6b826f;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.wiki-breadcrumbs a{color:#2e593b;text-decoration:none}
.wiki-breadcrumbs a:hover{text-decoration:underline}
.wiki-breadcrumbs span{color:#9fb0a2}
.wiki-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #c8d8c2;padding-bottom:0;flex-wrap:wrap}
.wiki-tabs-bar{display:flex;gap:4px;align-items:flex-end}
.wiki-tab{border:1px solid #d4dbca;border-bottom:0;border-radius:7px 7px 0 0;background:#eef4ea;padding:7px 15px;font-size:11.5px;font-weight:650;color:#45604b;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.wiki-tab:hover{background:#f8fbf5;color:#1e3c27}
.wiki-tab.active{background:#fff;border-color:#b5c9a7;border-bottom:2px solid #fff;margin-bottom:-1px;color:#1a3d23;box-shadow:0 -2px 6px rgba(0,0,0,0.02)}
.wiki-toolbar-right{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.wiki-search-box{display:flex;align-items:center;background:#fff;border:1px solid #d0dec8;border-radius:20px;padding:4px 12px;gap:7px;width:260px;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.wiki-search-box input{border:0;background:none;outline:none;font-size:11px;padding:4px 0;width:100%}
.wiki-badge{font-size:10px;font-weight:650;padding:4px 10px;border-radius:20px;background:#eef4ea;border:1px solid #d4e2cc;color:#2c5437;white-space:nowrap}

.wiki-body{background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;padding:36px 42px;box-shadow:0 4px 18px rgba(0,0,0,0.03)}
.wiki-first-heading{font-family:Georgia,serif;font-size:32px;font-weight:400;color:#1a3522;margin:0 0 4px;border-bottom:1px solid #e1e9dc;padding-bottom:10px;letter-spacing:-.4px}
.wiki-site-sub{font-size:11.5px;color:#708774;margin-bottom:24px;font-style:italic}

/* Right-Floating Wiki Infobox */
.wiki-infobox{float:right;width:340px;margin:0 0 24px 32px;background:#fbfdf9;border:1px solid #c5d7be;border-radius:9px;box-shadow:0 4px 16px rgba(35,65,45,0.06);font-size:11.5px;overflow:hidden}
.wiki-infobox-header{background:#385e45;color:#fff;font-size:13px;font-weight:700;text-align:center;padding:10px 14px;letter-spacing:.4px}
.wiki-infobox-image{padding:12px;text-align:center;background:#f3f7ef;border-bottom:1px solid #d4e2cd}
.wiki-infobox-image img{width:100%;max-width:310px;height:auto;border-radius:6px;border:1px solid #bdd0b8;display:block;margin:0 auto}
.wiki-infobox-caption{font-size:10px;color:#5a725e;margin-top:6px;text-align:center}
.wiki-infobox-table{width:100%;border-collapse:collapse}
.wiki-infobox-table th,.wiki-infobox-table td{padding:7px 11px;border-bottom:1px solid #e2ebd0;text-align:left;vertical-align:top}
.wiki-infobox-table tr:last-child th,.wiki-infobox-table tr:last-child td{border-bottom:0}
.wiki-infobox-table th{width:42%;background:#f4f7f0;color:#2c4b33;font-weight:650;font-size:11px;border-right:1px solid #e2ebd0}
.wiki-infobox-table td{width:58%;color:#37493b;overflow-wrap:anywhere}
.wiki-infobox-table code{background:#edf3e7;color:#1e3c27;padding:1px 5px;border-radius:4px;font-size:11px}

/* Collapsible Table of Contents */
.wiki-toc-box{display:table;border:1px solid #c5d7be;background:#fbfdf9;border-radius:8px;padding:14px 18px;margin:18px 0 28px;min-width:300px;max-width:480px;font-size:12px}
.wiki-toctitle{font-weight:750;font-size:12px;color:#23472c;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e0e9da;padding-bottom:6px;margin-bottom:10px}
.wiki-toctoggle{font-weight:normal;font-size:11px;color:#356743;cursor:pointer;text-decoration:underline;background:none;border:0;padding:0}
.wiki-toc-list{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.wiki-toc-list li a{color:#2a5737;text-decoration:none;display:inline-block}
.wiki-toc-list li a:hover{text-decoration:underline;color:#153d20}
.wiki-toc-num{font-weight:650;color:#5c7863;margin-right:6px}
.wiki-toc-sublist{list-style:none;padding-left:18px;margin:4px 0 2px;display:grid;gap:3px;font-size:11px}
.wiki-toc-sublist a{color:#496d53}

/* Encyclopedic Headings & Sections */
.wiki-section{margin-bottom:38px}
.wiki-section h2{font-family:Georgia,serif;font-size:23px;color:#1b3923;margin:32px 0 14px;border-bottom:1px solid #dce5d5;padding-bottom:7px;display:flex;align-items:baseline;justify-content:space-between}
.wiki-section h3{font-size:16px;color:#244b2f;margin:24px 0 10px;font-weight:700}
.wiki-section p,.wiki-section li{font-size:13px;line-height:1.75;color:#374b3d}
.wiki-editsection{font-family:ui-sans-serif,system-ui;font-size:11px;font-weight:normal;color:#6b8570}
.wiki-editsection a{color:#356843;text-decoration:none}
.wiki-editsection a:hover{text-decoration:underline}

/* Wiki Links */
.wiki-link{color:#245e35;text-decoration:none;border-bottom:1px dotted #8eb297;font-weight:550}
.wiki-link:hover{border-bottom-style:solid;color:#143e20}

/* Media, Tables, Code Blocks, Callouts */
.wiki-media-img{width:100%;border-radius:10px;border:1px solid #d4e2cd;box-shadow:0 4px 16px rgba(0,0,0,0.06);margin:16px 0;display:block}
.wiki-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:12px;background:#fff;border:1px solid #dce4d5;border-radius:8px;overflow:hidden}
.wiki-table th,.wiki-table td{padding:10px 14px;text-align:left;border-bottom:1px solid #e4ecde}
.wiki-table th{background:#f3f7ef;color:#244c2f;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.wiki-table tr:last-child td{border-bottom:0}
.wiki-table tr:hover td{background:#fafdf7}
.wiki-table code{background:#edf3e7;color:#1e3c27;padding:2px 6px;border-radius:4px;font-size:11.5px;font-family:ui-monospace,monospace}

.wiki-code-container{position:relative;margin:14px 0}
.wiki-code-block{background:#18221b;color:#e8f4ec;padding:18px 20px;border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.65;overflow-x:auto;margin:0;border:1px solid #283a2d}
.wiki-copy-btn{position:absolute;top:10px;right:10px;background:#2b3c30;color:#d8ebd9;border:1px solid #435b4a;border-radius:6px;font-size:10px;font-weight:600;padding:4px 10px;cursor:pointer;transition:all .15s}
.wiki-copy-btn:hover{background:#3b5242;color:#fff}

.wiki-callout{padding:15px 18px;border-radius:10px;margin:16px 0;display:flex;gap:13px;align-items:flex-start;font-size:12.5px;line-height:1.65}
.wiki-callout-info{background:#edf5ed;border:1px solid #cbe0ca;color:#234a2c}
.wiki-callout-warning{background:#fdf7eb;border:1px solid #f2deb9;color:#734e12}
.wiki-callout-tip{background:#eef6f9;border:1px solid #cbe3ec;color:#175168}
.wiki-callout-icon{font-size:18px;line-height:1;flex-shrink:0;margin-top:2px}

/* Categories Bar & Page Footer */
.wiki-catlinks{border:1px solid #c5d7be;background:#fbfdf9;border-radius:7px;padding:11px 16px;margin-top:36px;font-size:11.5px;color:#4c6651}
.wiki-catlinks strong{color:#22462b;margin-right:8px}
.wiki-catlinks a{color:#2a5f39;text-decoration:none;margin:0 4px}
.wiki-catlinks a:hover{text-decoration:underline}
.wiki-footer-metadata{margin-top:22px;padding-top:14px;border-top:1px solid #e1e9dc;font-size:11px;color:#788d7c;line-height:1.6}

/* Raw Markdown Source View */
.wiki-source-view{display:none}
.wiki-source-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}
.wiki-source-header h3{margin:0;font-size:15px;color:#244b2f}
.wiki-source-pre{max-height:750px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}

/* Topic Index View */
.wiki-index-view{display:none}
.wiki-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.wiki-index-card{background:#fbfdf9;border:1px solid #d4e0cf;border-radius:10px;padding:16px}
.wiki-index-card h4{margin:0 0 10px;font-size:13px;color:#244c2f;border-bottom:1px solid #e2ebd0;padding-bottom:6px}
.wiki-index-card ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:11.5px}
.wiki-index-card li a{color:#2a5937;text-decoration:none}
.wiki-index-card li a:hover{text-decoration:underline}

@media(max-width:1024px){
  .wiki-infobox{float:none;width:100%;margin:0 0 24px 0}
  .wiki-body{padding:24px 20px}
  .wiki-index-grid{grid-template-columns:1fr}
}

html{scroll-behavior:smooth}
.wiki-section,[id]{scroll-margin-top:28px}

/* ==========================================================================
   HTML5 Interactive Hardware & Protocol Diagrams (Wiki State of the Art)
   ========================================================================== */

/* Shared Interactive Frame */
.cyd-interactive-container {
  background: #0d1410;
  border: 1px solid #283e2e;
  border-radius: 16px;
  padding: 28px;
  margin: 22px 0 32px;
  color: #e2ede4;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.cyd-diagram-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #233728;
  padding-bottom: 16px;
}
.cyd-diagram-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #6eb47d;
  text-transform: uppercase;
}
.cyd-diagram-title {
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: #f2faf3;
  letter-spacing: -0.3px;
}
.cyd-diagram-sub {
  font-size: 13px;
  color: #9cb5a3;
  margin: 0;
  line-height: 1.5;
}

/* 1. Hardware Board Architecture Component */
.cyd-board-grid {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 20px;
  align-items: center;
}
@media (max-width: 1100px) {
  .cyd-board-grid {
    grid-template-columns: 1fr;
  }
}
.cyd-pinout-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cyd-pin-card {
  background: #141f17;
  border: 1px solid #293f30;
  border-radius: 10px;
  padding: 12px 14px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cyd-pin-card:hover {
  transform: translateY(-2px);
  border-color: #558763;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.cyd-pin-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cyd-pin-name {
  font-size: 13px;
  font-weight: 700;
  color: #b0e3be;
}
.cyd-pin-bus {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  background: #1e3324;
  color: #79c58c;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #2c4a34;
}
.cyd-pin-specs {
  font-size: 11px;
  color: #8da493;
  line-height: 1.45;
}
.cyd-pin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.cyd-chip {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  background: #0f1912;
  border: 1px solid #233729;
  padding: 2px 5px;
  border-radius: 4px;
  color: #d1e8d6;
}

/* Center PCB Visual */
.cyd-board-chassis {
  background: linear-gradient(135deg, #e5b03d 0%, #caa030 50%, #b38820 100%);
  border: 4px solid #f0c354;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.4);
  position: relative;
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
}
.cyd-screw {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #555, #111);
  border: 2px solid #8e6d1f;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}
.cyd-screw-tl { top: 10px; left: 10px; }
.cyd-screw-tr { top: 10px; right: 10px; }
.cyd-screw-bl { bottom: 10px; left: 10px; }
.cyd-screw-br { bottom: 10px; right: 10px; }

.cyd-screen-bezel {
  background: #090e0b;
  border: 3px solid #1a291e;
  border-radius: 12px;
  padding: 16px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.8);
}
.cyd-screen-header-badge {
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
.cyd-screen-telemetry-badge {
  font-size: 10.5px;
  font-family: ui-monospace, monospace;
  color: #79c58c;
  margin-bottom: 12px;
}
.cyd-screen-artwork {
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}
.cyd-screen-tft-meta {
  border-top: 1px solid #1a2b20;
  padding-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #c9ded0;
}
.cyd-screen-tft-sub {
  font-size: 10px;
  color: #7d9685;
  margin-top: 2px;
}

/* Flash Memory Strip */
.cyd-flash-strip {
  margin-top: 24px;
  background: #141f17;
  border: 1px solid #283e2e;
  border-radius: 12px;
  padding: 14px 18px;
}
.cyd-flash-hdr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #ffd700;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cyd-partition-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (max-width: 900px) {
  .cyd-partition-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .cyd-partition-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.cyd-partition-box {
  background: #0d1611;
  border: 1px solid #233928;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}
.cyd-partition-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #e0f2e4;
  margin-bottom: 2px;
}
.cyd-partition-addr {
  font-size: 9.5px;
  font-family: ui-monospace, monospace;
  color: #79c58c;
}
.cyd-partition-size {
  font-size: 9px;
  color: #8da493;
  margin-top: 2px;
}

/* 2. Pairing Dual Panel Component */
.cyd-pairing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .cyd-pairing-grid {
    grid-template-columns: 1fr;
  }
}
.cyd-device-panel {
  background: linear-gradient(135deg, #dfa938 0%, #caa030 50%, #b38820 100%);
  border: 4px solid #f0c354;
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  position: relative;
  display: flex;
  flex-direction: column;
}
.cyd-device-lcd {
  background: #0a0f0c;
  border: 3px solid #1a2a1e;
  border-radius: 14px;
  padding: 20px;
  box-shadow: inset 0 3px 12px rgba(0,0,0,0.8);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cyd-lcd-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffd700;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}
.cyd-lcd-sub {
  font-size: 12px;
  color: #c9ded0;
  margin-bottom: 16px;
}
.cyd-qr-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  margin-bottom: 10px;
  display: inline-block;
}
.cyd-qr-card img, .cyd-qr-card svg {
  width: 170px;
  height: 170px;
  display: block;
}
.cyd-lcd-url {
  font-size: 11.5px;
  font-family: ui-monospace, monospace;
  color: #79c58c;
  margin-bottom: 16px;
  font-weight: 600;
}
.cyd-code-box {
  background: #141f17;
  border: 2px solid #caa030;
  border-radius: 10px;
  padding: 12px 20px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 14px;
}
.cyd-code-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffd700;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cyd-code-value {
  font-size: 28px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: 4px;
  color: #ffffff;
}
.cyd-code-meta {
  font-size: 10px;
  color: #8da493;
  margin-top: 4px;
}
.cyd-touch-btn {
  background: #25663b;
  border: 1px solid #3d8e57;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  max-width: 320px;
}
.cyd-touch-btn:hover {
  background: #2c7a46;
  box-shadow: 0 4px 12px rgba(44,122,70,0.35);
}

/* Right Web Companion Frame */
.cyd-web-panel {
  background: #ffffff;
  border: 1px solid #d4dfd4;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  color: #233728;
}
.cyd-browser-chrome {
  background: #edf2eb;
  border-bottom: 1px solid #d7e2d7;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cyd-browser-dots {
  display: flex;
  gap: 6px;
}
.cyd-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cyd-dot-red { background: #e06055; }
.cyd-dot-yellow { background: #e5b33b; }
.cyd-dot-green { background: #5dbb63; }

.cyd-browser-url {
  flex: 1;
  background: #ffffff;
  border: 1px solid #d2ded2;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: #3b5440;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cyd-browser-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cyd-web-portal-hdr {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #558763;
  margin-bottom: 4px;
}
.cyd-web-title {
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: #1a2f20;
  margin: 0 0 8px;
}
.cyd-web-desc {
  font-size: 12px;
  color: #647567;
  margin: 0 0 18px;
  line-height: 1.5;
}
.cyd-web-input-group {
  background: #f7faf6;
  border: 2px solid #b7ccb9;
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cyd-web-code-text {
  font-size: 22px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: 3px;
  color: #1e3623;
}
.cyd-web-verified-badge {
  background: #d8edd9;
  color: #2b6d39;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #bedfbf;
}
.cyd-web-claim-btn {
  background: #25663b;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  margin-bottom: 22px;
  transition: all 0.2s;
}
.cyd-web-claim-btn:hover {
  background: #1c522e;
  box-shadow: 0 4px 12px rgba(37,102,59,0.3);
}

.cyd-protocol-box {
  background: #f4f8f4;
  border: 1px solid #d8e5d8;
  border-radius: 12px;
  padding: 16px;
  margin-top: auto;
}
.cyd-protocol-hdr {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #27482f;
  margin-bottom: 12px;
}
.cyd-protocol-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 11.5px;
}
.cyd-protocol-step:last-child {
  margin-bottom: 0;
}
.cyd-check-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #25663b;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
.cyd-step-content strong {
  color: #19321f;
  display: block;
}
.cyd-step-content span {
  color: #647567;
  font-size: 10.5px;
  line-height: 1.4;
}

/* 3. Care Rituals & 4-Species Component */
.cyd-rituals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
@media (max-width: 1100px) {
  .cyd-rituals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .cyd-rituals-grid {
    grid-template-columns: 1fr;
  }
}
.cyd-ritual-card {
  background: #131c15;
  border: 1px solid #283e2e;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
}
.cyd-ritual-card:hover {
  transform: translateY(-3px);
  border-color: #558763;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.cyd-ritual-badge {
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #0f1611;
}
.cyd-badge-feed { color: #ffd700; border: 1px solid #6b5a14; }
.cyd-badge-clean { color: #6ee2ff; border: 1px solid #1a5666; }
.cyd-badge-play { color: #8ef793; border: 1px solid #1f6124; }
.cyd-badge-sleep { color: #dcb3ff; border: 1px solid #573178; }

.cyd-telem-feed { color: #ffd700; }
.cyd-telem-clean { color: #6ee2ff; }
.cyd-telem-play { color: #8ef793; }
.cyd-telem-sleep { color: #dcb3ff; }

/* Stat Bar Fill Widths (CSP compliant, zero inline styles) */
.w-0 { width: 0%; }
.w-35 { width: 35%; }
.w-48 { width: 48%; }
.w-57 { width: 57%; }
.w-65 { width: 65%; }
.w-78 { width: 78%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-89 { width: 89%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }


.cyd-lcd-frame {
  background: #000000;
  border: 2px solid #233527;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  aspect-ratio: 3/4;
  display: flex;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Simulated 240x320 Bare-Metal CYD LCD Screen */
.cyd-screen-sim {
  width: 100%;
  height: 100%;
  background: #f6eedc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  user-select: none;
}

.cyd-screen-header {
  background: #2a2523;
  color: #ffffff;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #1a1715;
}
.cyd-pet-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.cyd-pet-id {
  font-size: 10px;
  color: #b5aba1;
}
.cyd-pet-stage {
  font-size: 10px;
  font-weight: 700;
  color: #79c58c;
  text-align: right;
  line-height: 1.1;
}
.cyd-pet-stage small {
  display: block;
  font-size: 8px;
  color: #8da493;
}

.cyd-screen-viewport {
  flex: 1;
  position: relative;
  background: #f6eedc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cyd-char-img {
  width: 78%;
  height: auto;
  max-height: 85%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(90, 70, 50, 0.15));
  z-index: 1;
}

.cyd-btn-touch {
  position: absolute;
  width: 60px;
  height: 28px;
  background: #ffffff;
  border: 2px solid #2a2523;
  border-radius: 4px;
  color: #2a2523;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 2px 0 #2a2523;
  z-index: 2;
  letter-spacing: 0.5px;
}
.cyd-btn-touch.top-left { top: 8px; left: 8px; }
.cyd-btn-touch.top-right { top: 8px; right: 8px; }
.cyd-btn-touch.btm-left { bottom: 8px; left: 8px; }
.cyd-btn-touch.btm-right { bottom: 8px; right: 8px; }

.cyd-btn-touch.active-btn {
  background: #ffd700;
  border-color: #8a6d00;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25), 1px 1px 0 #8a6d00;
  transform: translate(1px, 1px);
}

.cyd-screen-vitals {
  background: #2a2523;
  padding: 6px 10px 8px;
  border-top: 2px solid #1a1715;
}
.cyd-vitals-banner {
  background: #e8a286;
  color: #2a2523;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  padding: 2px 4px;
  border-radius: 2px;
  margin-bottom: 6px;
  letter-spacing: 0.8px;
}
.cyd-vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cyd-stat-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cyd-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 700;
  color: #f0e6d2;
}
.cyd-stat-bar {
  height: 6px;
  background: #473e3a;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}
.cyd-stat-bar .fill {
  height: 100%;
}
.cyd-stat-bar .fill.hunger { background: #e8997a; }
.cyd-stat-bar .fill.joy { background: #88c999; }
.cyd-stat-bar .fill.rest { background: #dcb3ff; }
.cyd-stat-bar .fill.bath { background: #7cd5e8; }

.cyd-ritual-info {
  background: #0e1510;
  border: 1px solid #223425;
  border-radius: 8px;
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cyd-ritual-mech {
  font-size: 11.5px;
  font-weight: 700;
  color: #f2faf3;
  margin-bottom: 4px;
}
.cyd-ritual-desc {
  font-size: 11px;
  color: #8da493;
  line-height: 1.45;
  margin: 0 0 10px;
  flex: 1;
}
.cyd-ritual-telemetry {
  font-size: 10.5px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}

/* 4-Species Roster Grid */
.cyd-roster-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffd700;
  text-transform: uppercase;
  margin: 0 0 16px;
  border-top: 1px solid #233728;
  padding-top: 20px;
}
.cyd-species-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .cyd-species-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .cyd-species-grid {
    grid-template-columns: 1fr;
  }
}
.cyd-species-card {
  background: #141f17;
  border: 1px solid #283e2e;
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
}
.cyd-species-card:hover {
  transform: translateY(-3px);
  border-color: #558763;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.cyd-species-tag {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.cyd-tag-yam { background: #3d300d; color: #ffd700; border: 1px solid #6e5818; }
.cyd-tag-berry { background: #3d1420; color: #ffa3b8; border: 1px solid #6e273b; }
.cyd-tag-forest { background: #2f2510; color: #e5b369; border: 1px solid #5a451e; }
.cyd-tag-celestial { background: #1a2538; color: #a8d5ff; border: 1px solid #2c4266; }

.cyd-species-avatar {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}
.cyd-species-name {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #f2faf3;
  margin-bottom: 2px;
}
.cyd-species-trait {
  font-size: 11px;
  font-weight: 700;
  color: #79c58c;
  margin-bottom: 8px;
}
.cyd-species-bio {
  font-size: 11px;
  color: #8da493;
  line-height: 1.45;
  margin: 0;
}

/* Subdomain Portal & Onboarding Experience */
.subdomain-hero {
  border: 1px solid #c8d8b9;
  background: linear-gradient(135deg, #eaf2df 0%, #e1ecd3 100%);
  box-shadow: 0 4px 20px rgba(58, 80, 48, 0.06);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 20px;
  align-items: center;
}
.onboarding-section {
  margin-bottom: 34px;
}
.onboarding-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.onboarding-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.onboarding-card:hover {
  transform: translateY(-2px);
  border-color: #b5cca6;
  box-shadow: 0 8px 24px rgba(45, 75, 55, 0.08);
}
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e2edd7;
  color: var(--green);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #cadbbd;
  box-shadow: 0 2px 6px rgba(66, 106, 81, 0.12);
}
.onboarding-card-body {
  flex: 1;
  min-width: 0;
}
.onboarding-card-body h3 {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--dark);
}
.onboarding-card-body p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 12px;
}
.onboarding-card-body .wiki-link,
.onboarding-card-body .text-button {
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

@media(max-width: 900px) {
  .onboarding-cards {
    grid-template-columns: 1fr;
  }
}

.dialog-tip {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f1f8eb;
  border: 1px solid #c9e0bb;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0 16px;
  font-size: 13px;
  color: #2e533c;
  line-height: 1.45;
}
.dialog-tip a {
  color: var(--green, #234a31);
  font-weight: 600;
  text-decoration: underline;
}
.owner-setup-funnel {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* First-Time Owner Onboarding & Pairing Station */
.owner-onboarding-hub {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
  margin: 10px 0 32px;
}
.onboarding-flow-column {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: var(--shadow);
}
.onboarding-flow-header .eyebrow {
  color: #728a67;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
.onboarding-flow-header h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  color: var(--dark);
  margin: 6px 0 8px;
}
.onboarding-flow-header p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 22px;
}
.onboarding-steps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboarding-step-item {
  display: flex;
  gap: 16px;
  background: #fafcf7;
  border: 1px solid #e1e9d8;
  border-radius: 12px;
  padding: 18px 20px;
  align-items: flex-start;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.onboarding-step-item:hover {
  border-color: #bcd0b4;
}
.onboarding-step-item.highlight-step {
  background: #f4f8ee;
  border: 1.5px solid #a8c79c;
  box-shadow: 0 4px 16px rgba(50, 90, 60, 0.06);
}
.onboarding-step-content {
  flex: 1;
  min-width: 0;
}
.onboarding-step-content h3 {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--dark);
}
.onboarding-step-content p {
  font-size: 11.5px;
  line-height: 1.65;
  color: #556755;
  margin: 0 0 10px;
}
.onboarding-step-content code {
  background: #e8f0e2;
  color: #1e3925;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.cyd-flash-btn {
  font-size: 11.5px;
  font-weight: 700;
  padding: 10px 18px;
  margin-top: 4px;
  display: inline-flex;
}
.inline-pair-form {
  margin-top: 10px;
}
.inline-pair-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 440px;
}
.inline-pair-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 1.5px solid #b5ceab;
  border-radius: 9px;
  background: #ffffff;
  color: #1e3925;
  width: 100%;
}
.inline-pair-input:focus {
  border-color: #3f6f4c;
  box-shadow: 0 0 0 3px rgba(66, 106, 81, 0.18);
  outline: none;
}
.inline-pair-advanced {
  margin-top: 8px;
}
.inline-pair-advanced .text-button {
  padding: 0;
  font-size: 11px;
}

/* Visual Hardware & Screen Showcase Card */
.onboarding-preview-column {
  display: flex;
  flex-direction: column;
}
.onboarding-visual-card {
  background: var(--paper);
  border: 1px solid #dbe5d1;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 8px 30px rgba(45, 75, 55, 0.05);
}
.visual-card-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 1px;
  color: #3c6145;
  background: #e3ebd8;
  border: 1px solid #c8d8b9;
  padding: 4px 9px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.onboarding-guide-preview {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #d4decb;
  box-shadow: 0 4px 16px rgba(40, 70, 50, 0.08);
  display: block;
}
.visual-card-caption {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #4c624e;
}
.visual-card-caption strong {
  display: block;
  color: #24422e;
  margin-bottom: 2px;
}
.visual-card-caption p {
  margin: 0;
}
.visual-card-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e7eedd;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Main Landing Portal Visual Installation Gallery */
.main-portal-hero {
  border: 1px solid #c8d8b9;
  background: linear-gradient(135deg, #eaf2df 0%, #e1ecd3 100%);
  box-shadow: 0 4px 20px rgba(58, 80, 48, 0.06);
}
.installation-visual-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.gallery-card {
  background: var(--paper);
  border: 1px solid #dce4d2;
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.gallery-card-badge {
  align-self: flex-start;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 1px;
  color: #375b40;
  background: #e6eedc;
  border: 1px solid #c9d9bd;
  padding: 4px 8px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.gallery-card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #f4f8ef;
  border-radius: 8px;
  border: 1px solid #d5dfcd;
  display: block;
}
.gallery-card-caption {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #4e6351;
}
.gallery-card-caption code {
  background: #e8f0e2;
  color: #1e3925;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}
.installation-footer-note {
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 20px;
}
.installation-footer-note a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
}

@media(max-width: 960px) {
  .owner-onboarding-hub {
    grid-template-columns: 1fr;
  }
  .installation-visual-gallery {
    grid-template-columns: 1fr;
  }
}







/* ---- Wardrobe & try-on (docs/WARDROBE_STORE.md section 6) ---- */
.sw-0{--sw:#FFF1C9}.sw-1{--sw:#FF6F61}.sw-2{--sw:#F06292}.sw-3{--sw:#AD1457}.sw-4{--sw:#FF9F1C}.sw-5{--sw:#FFE066}.sw-6{--sw:#4CAF50}.sw-7{--sw:#1B5E20}.sw-8{--sw:#7FE0C0}.sw-9{--sw:#4FC3F7}.sw-10{--sw:#3F51B5}.sw-11{--sw:#B388FF}.sw-12{--sw:#6A1B9A}.sw-13{--sw:#8D5524}.sw-14{--sw:#607D8B}.sw-15{--sw:#2E3440}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--sw);border:1px solid #0002;vertical-align:middle}
.item-art.wear{background:#f5edcf;background-image:radial-gradient(ellipse at 50% 85%,#e9dcae 0,#f5edcf 62%)}
.wear-shot{width:120px;height:120px;filter:drop-shadow(0 6px 5px #5a4a2a30);transition:transform .25s ease}
.wear-card:hover .wear-shot{transform:translateY(-3px) rotate(-2deg)}
.wear-fallback{opacity:.85}
.swatch-row{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px;min-height:22px;align-items:center}
.swatch{width:20px;height:20px;padding:0;border-radius:50%;border:2px solid #fffdf7;background:var(--sw);box-shadow:0 0 0 1px #0002;transition:transform .12s}
.swatch:hover{transform:scale(1.18);filter:none}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--green);transform:scale(1.12)}
.swatch-row.large{gap:7px}.swatch-row.large .swatch{width:28px;height:28px}
.wear-status{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:22px;margin:0 0 10px}
.wear-chip{font-size:9px;font-weight:650;border-radius:20px;padding:4px 9px;background:#eef2e6;color:#6d8260;border:1px solid #dfe6d2}
.wear-chip.wearing{background:var(--green);color:#fff;border-color:var(--green)}
.price.born{color:#a56f3c;font-size:11px}
.tryon-button{padding:8px 12px}
.wear-card .item-bottom{flex-wrap:wrap}
dialog.tryon{max-width:820px;overflow:auto}
.tryon-layout{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:26px;align-items:start}
.tryon-stage{position:relative;aspect-ratio:318/420;width:100%;border-radius:18px;overflow:hidden;background:linear-gradient(#fdf7df,#f1e6c0 70%,#e4dcb2);border:1px solid #e6dcb8}
.tryon-stage.sp-0{background:linear-gradient(#fdf6d9,#f3e5b4 70%,#e5d9a3)}.tryon-stage.sp-1{background:linear-gradient(#fff2ee,#f7dcd9 70%,#ecc9c6)}.tryon-stage.sp-2{background:linear-gradient(#f4f7e3,#dfe8c2 70%,#cfdcaa)}.tryon-stage.sp-3{background:linear-gradient(#f1f0ff,#dedcf3 70%,#cfcce6)}
.tryon-floor{position:absolute;left:14%;right:14%;bottom:2.5%;height:6%;border-radius:50%;background:radial-gradient(ellipse,#3a503030,#3a503000 70%)}
#tryon-canvas{position:absolute;inset:0;width:100%;height:100%;animation:tryon-bob 3.2s ease-in-out infinite;transform-origin:50% 95%}
@keyframes tryon-bob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-2.5%) scale(1.01,.995)}}
.tryon-caption{text-align:center;margin:10px 0 0}
.tryon-controls h2{margin:8px 0 6px}.tryon-controls .eyebrow{display:block}
.tryon-desc{margin:0 0 12px}
.tryon-group{border:0;padding:0;margin:0 0 14px}.tryon-group legend{font-size:11px;font-weight:650;color:#7a8b70;padding:0;margin-bottom:8px}
.pet-chips{display:flex;flex-wrap:wrap;gap:6px}
.pet-chip{border:1px solid #d4dbca;background:#fffefa;border-radius:20px;padding:6px 12px;font-size:11px;font-weight:600;color:var(--dark)}
.pet-chip small{color:#94a086;font-weight:500}
.pet-chip[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}.pet-chip[aria-pressed=true] small{color:#dfe9d6}
.tryon-who{margin:0 0 14px!important}
.tryon-status{margin:0 0 8px;color:var(--dark)!important}
.tryon-note{margin:0 0 10px;padding:9px 12px;background:#fbf4e6;border:1px solid #e5d4ba;border-radius:9px;color:#8a6f45!important}
.tryon-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.spark{position:absolute;color:#e3b73f;font-size:18px;pointer-events:none;left:50%;top:48%;animation:spark-pop 1s ease-out forwards}
.spark-0{--dx:-110px;--dy:-120px}.spark-1{--dx:100px;--dy:-130px}.spark-2{--dx:-130px;--dy:-10px}.spark-3{--dx:125px;--dy:0px}.spark-4{--dx:-70px;--dy:-170px}.spark-5{--dx:70px;--dy:-180px}.spark-6{--dx:-90px;--dy:70px}.spark-7{--dx:90px;--dy:80px}
@keyframes spark-pop{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(80deg)}}
@media(prefers-reduced-motion:reduce){#tryon-canvas,.wear-shot{animation:none;transition:none}.spark{display:none}}
.wardrobe-strip{display:flex;gap:14px;align-items:center;margin-top:14px;padding:12px;background:#f5edcf55;border:1px solid #ece3c3;border-radius:12px}
.pet-portrait{width:64px;height:84px;flex:none;border-radius:10px;background:linear-gradient(#fdf7df,#f1e6c0)}
.wardrobe-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1;min-width:0}
.slot-chip{display:grid;gap:2px;text-align:left;border:1px solid #e2e6d8;background:var(--paper);border-radius:8px;padding:6px 9px;color:var(--dark);min-width:0}
.slot-chip small{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#95a186}.slot-chip span{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wear-fields{border:1px solid #dbe2d1;border-radius:10px;padding:14px;display:grid;gap:12px;margin:0}.wear-fields legend{font-size:11px;font-weight:700;color:#7a8b70;padding:0 6px}
.colour-toggles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.colour-toggle{display:flex;align-items:center;gap:6px;font-weight:500;font-size:10px;border:1px solid #e2e6d8;border-radius:8px;padding:5px 7px}.colour-toggle input{width:13px;height:13px}
#item-form.is-wear .legacy-art{display:none}
.shot-summary code{background:#e6eddc;padding:1px 5px;border-radius:4px}
@media(max-width:760px){.tryon-layout{grid-template-columns:1fr;gap:16px}.tryon-stage{max-width:200px;margin:0 auto}dialog.tryon{padding:20px}.wear-shot{width:90px;height:90px}.colour-toggles{grid-template-columns:repeat(2,1fr)}}