body{background:radial-gradient(ellipse at 3% 92%,#dbcee7,transparent 58%),radial-gradient(ellipse at 97% 4%,#ead6e7,transparent 62%),#efebf1}main{position:relative}.connection-hub{display:contents}.mobile-ready{display:none}.pairing{grid-area:qr;align-self:center;min-width:0;display:grid;justify-items:center;gap:12px}
.pairing .qr-card,.library{background:linear-gradient(140deg,#ffffff92,#dfd2e33d);box-shadow:inset 0 1px 0 #ffffffb8,0 15px 36px #6848790e}
.device-chip{display:inline-flex;align-items:center;max-width:100%;gap:2px}.device-chip>button:first-child{min-width:0}.device-chip .remove-device{flex:none;padding:5px 8px!important;font-size:17px!important;background:transparent!important}
/* Override mobile's generic white button background without changing sizing. */
main .intro #devices button.connected{background:#ece2f2;color:#68457c}
main .intro #devices button.selected{background:#dfcce9;color:#533362;outline:1px solid #a889ba}
main .intro #devices button.selected:not(.connected){background:#e7e2ea;color:#817587;outline-color:#bcb2c3}
button,#file-label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#file-label{-webkit-user-select:none;user-select:none}
#file-label:not(.disabled):active{background:linear-gradient(100deg,#a785b5,#60406f)}
button:focus-visible,#file-label:focus-visible{outline:2px solid #8c659f;outline-offset:3px}
#pair-dialog{background:linear-gradient(135deg,#e9d9f1f5,#cdb7e4f5);border:1px solid #ffffffb0;box-shadow:0 24px 90px #40285860;backdrop-filter:blur(24px)}#pair-dialog .qr-card{margin:16px auto;width:220px;background:#ffffff45}#pair-dialog #qr{width:184px}#pair-dialog #qr-caption{display:block;font-size:12px}#pair-dialog>button{font-size:14px}
.pairing .qr-card{grid-area:auto;width:min(260px,100%);padding:12px}
.pairing .small-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:310px;gap:8px;margin:0}
.pairing .small-actions button{min-height:40px;padding:8px;font-size:12px;border-radius:12px}
.pairing #copy-link{grid-column:1/-1}
.pairing #qr{width:min(200px,100%)}
.brand-mascot{position:absolute;z-index:0;left:calc(17.5% + 80px);top:13%;display:block;width:min(185px,19vw);max-height:235px;object-fit:contain;filter:drop-shadow(0 18px 24px #65447b24);pointer-events:none}.mobile-brand-mascot{display:none}.intro,.pairing{position:relative;z-index:1}
.pairing #new-pair{min-width:180px}
body.file-drag-over main{outline:3px dashed #9b79b6;outline-offset:-8px}
#device-browser{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;grid-column:1/-1}
#device-browser>button{flex:none;padding:6px 8px;min-height:32px;font-size:12px}
#device-status-row{display:flex;align-items:center;gap:8px;min-width:0;grid-column:1/-1;margin:8px 0}
#device-status-row #status{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#device-status-row>button{flex:none;font-size:12px;padding:6px 10px;white-space:nowrap}
#device-browser #devices{padding:3px 5px;scroll-padding-inline:5px}
#device-browser #devices{flex:1;min-width:0;flex-wrap:nowrap;max-height:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden}
#device-browser #devices::-webkit-scrollbar{display:none}
#device-browser .device-chip,#device-browser .nearby-device{flex:none}
#device-list-dialog{background:linear-gradient(135deg,#f4edf8,#e1d3ed);width:min(470px,92vw)}
.device-list{display:grid;gap:8px;margin-top:14px;min-height:50px}.device-list .device-chip{width:100%;justify-content:space-between}.device-list button{font-size:14px;padding:10px;overflow-wrap:anywhere}.device-list .selected{background:#dfcce9;outline:1px solid #a889ba}.device-list .connected{color:#68457c}.device-list .device-chip>button:first-child{flex:1;text-align:left}.device-list .remove-device{flex:none}
#device-list-dialog .dialog-actions{align-items:center}#device-list-dialog .dialog-actions button{font-size:13px;padding:8px}
#devices .nearby-device{border:1px dashed #a586b7;background:#e7d9ee70}.discovery-setting{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13px}.discovery-setting input[type=checkbox]{width:18px;height:18px;margin:0}
@media(min-width:601px){
 .brand-mascot{width:min(265px,27vw);max-height:335px}
 .intro #devices{max-width:100%;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;padding:2px}
 .intro #devices .device-chip{flex:none}
 .intro #devices .device-chip>button:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .intro #devices .nearby-device{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
 body:not(.native) .brand-mascot{transform:scale(1.18);transform-origin:center;animation:mascot-float 5s ease-in-out infinite}
}
@keyframes mascot-float{0%,100%{transform:translateY(0) scale(1.18)}50%{transform:translateY(-7px) scale(1.18)}}
@media(min-width:601px) and (max-height:550px){body:not(.native) .brand-mascot{max-height:27vh}}
@media(prefers-reduced-motion:reduce){body:not(.native) .brand-mascot{animation:none}}
.file-menu{position:fixed;z-index:9999;width:172px;padding:6px;background:#f3edf7;border:1px solid #d4bfdf;border-radius:12px;box-shadow:0 8px 24px #193f4933}
.file-menu button{display:block;width:100%;padding:12px;text-align:left;border:0;background:transparent;border-radius:8px;color:#694776;font:inherit;box-shadow:none;cursor:pointer}.file-menu button:hover{background:#e5d5ed}
@media(min-width:601px){body.native #items .item-actions{display:none}}
@media(max-width:600px){
 .brand-mascot{display:none}main>header{gap:8px}.mobile-brand-mascot{display:block;width:clamp(36px,10vw,46px);height:clamp(36px,10vw,46px);object-fit:contain;flex:0 0 auto;margin-left:0;filter:drop-shadow(0 5px 8px #65447b30)}main>header>button{margin-left:auto;flex:0 0 auto}
 body{background:radial-gradient(circle at 8% 5%,#e6d1e8 0,transparent 38%),radial-gradient(circle at 94% 38%,#d8cce8 0,transparent 46%),#eee9f1}
 main{width:100%;padding:12px 14px 10px;grid-template-columns:1fr;grid-template-rows:54px auto 104px minmax(190px,1fr) 26px;gap:10px;grid-template-areas:'header' 'hub' 'actions' 'library' 'footer'}
 main>header{padding:0 4px;gap:10px}header img{width:42px;height:42px}h1{font-size:23px;line-height:1}.brand-tagline{display:none}.mobile-ready{display:block!important;margin-top:6px;font-size:11px!important;color:#806d8b}main>header .subtle{font-size:10px;padding:7px 11px}
 .connection-hub{grid-area:hub;display:grid;grid-template-columns:1fr;grid-template-areas:'intro' 'pair';gap:8px;padding:13px 14px;border:1px solid #fff;border-radius:26px;background:linear-gradient(135deg,#ffffff8c,#ffffff38);box-shadow:inset 0 1px 0 #fff,0 10px 30px #6a4e7a12;min-height:0}
 .intro{grid-area:intro;align-self:stretch;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;min-width:0;padding:0 2px}.intro .eyebrow{margin:0;font-size:10px;letter-spacing:.4px}.intro h2{display:none}.intro>p#status{margin:0;text-align:right;font-size:11px;font-weight:650;color:#644b72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.intro #devices{grid-column:1/-1;max-height:34px;overflow:auto;align-content:flex-start}.intro #devices button{max-width:100%;font-size:10px;padding:5px 8px;background:#ffffff75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .pairing{grid-area:pair;align-self:stretch;display:grid;grid-template-columns:88px 1fr;align-items:center;justify-items:stretch;gap:9px;padding:8px;border:1px solid #fff;border-radius:20px;background:#ffffff4d}
 .pairing .qr-card{width:88px;padding:4px;border-radius:14px;background:#ffffffa3}.pairing #qr{width:78px;border-radius:9px}.pairing #qr-caption{display:none}
 .pairing .small-actions{max-width:none;grid-template-columns:1fr 1fr;gap:6px}.pairing .small-actions button{width:100%;height:33px;min-height:33px;padding:4px 6px;font-size:10px;white-space:nowrap;border-radius:9px 16px 9px 16px;box-shadow:2px 2px 0 #ccb5d433}.pairing #copy-link{grid-column:1/-1}
 .actions{grid-template-rows:48px 48px;gap:8px;padding:0 4px}.actions>*{width:100%!important;height:auto;padding:8px;font-size:17px;border-radius:11px 25px 11px 25px}.actions>*:last-child{width:94%!important;justify-self:end;font-size:15px}
 .library{padding:11px 13px;border-radius:24px;min-height:190px;background:#ffffff70}.library>header{min-height:30px}.library h3{font-size:18px}#library-note{font-size:10px}#items{display:grid;grid-template-columns:1fr;align-content:start;overflow:auto}#items article{width:100%;min-width:0;padding:9px}.item-actions{display:flex;flex-wrap:wrap}
 footer{font-size:9px;line-height:1.25}footer span{font-size:8px}
}
@media(max-width:600px){
 body{background:radial-gradient(ellipse at 100% 5%,#dec6e3,transparent 57%),radial-gradient(ellipse at 0 82%,#baa8d7,transparent 66%),linear-gradient(155deg,#eee7ef,#dfd5e9 72%,#d1c2df)}
 main{grid-template-rows:54px auto 104px minmax(150px,1fr) 26px;gap:16px;padding:16px}
 .connection-hub{grid-template-areas:'intro' 'pair';padding:12px 10px;background:linear-gradient(135deg,#f7f2f758,#c8b4d123);border:1px solid #ffffff7d;box-shadow:inset 0 1px 0 #ffffff7d,0 14px 34px #68487910;backdrop-filter:blur(18px);gap:12px}
 .pairing{display:block;padding:0;background:transparent;border:0;box-shadow:none}.pairing #new-pair{width:100%;height:44px;font-size:14px;background:linear-gradient(110deg,#d3c2dc52,#b69fc34c);color:#513961;border:1px solid #ffffffaa;border-radius:16px;box-shadow:inset 0 1px 0 #fff9,0 6px 18px #6c487e12}
 .library{min-height:150px;background:linear-gradient(140deg,#fcf8fa8c,#c3b2ce36);border:1px solid #ffffffa0;box-shadow:inset 0 1px 0 #ffffff8a,0 16px 42px #68487910;backdrop-filter:blur(20px)}
 .actions #compose{background:linear-gradient(120deg,#ffffff9f,#dfd2e45c)}
 .intro #devices{max-height:64px}.intro>p#status{font-size:11px}.actions>*:last-child{font-size:17px}
}
@media(max-width:600px) and (max-height:650px){main{padding:8px 12px;gap:8px;grid-template-rows:44px auto 84px minmax(126px,1fr) 18px}.connection-hub{padding:4px 0;gap:6px}.pairing #new-pair{height:38px}.library{min-height:126px}.actions>*:last-child{font-size:14px}}
@media(max-height:550px){
 .intro .eyebrow{display:none}.intro{grid-template-columns:1fr}.intro>p#status{text-align:left;font-size:10px;margin:0}#devices{max-height:27px}#devices button{padding:3px 6px;font-size:9px}
 .pairing{gap:4px}.pairing #qr{width:52px}.pairing .qr-card{width:60px;padding:4px}
 .pairing .small-actions{gap:3px}.pairing .small-actions button{min-height:24px;height:24px;padding:3px;font-size:8px}
}
@media(min-width:601px) and (max-height:550px){.brand-mascot{left:calc(17.5% + 80px)}}
@media(max-width:600px) and (max-height:650px){
 main{padding:7px 10px;gap:8px;grid-template-rows:42px auto 84px minmax(150px,1fr) 18px}
 main>header img{width:34px;height:34px}h1{font-size:20px}.mobile-ready{font-size:9px!important;margin-top:3px}main>header .subtle{padding:5px 8px}
 .connection-hub{padding:7px 8px;gap:5px;border-radius:19px}.intro{padding:0;display:grid;grid-template-columns:auto 1fr;gap:5px}.intro #status{text-align:left;font-size:10px!important}.intro #devices{grid-column:auto;max-height:28px;white-space:nowrap;overflow:auto}
 .pairing{grid-template-columns:56px 1fr;padding:5px;gap:5px}.pairing .qr-card{width:56px;padding:3px}.pairing #qr{width:48px}.pairing .small-actions{grid-template-columns:1fr 1fr}.pairing #copy-link{grid-column:1/-1}.pairing .small-actions button{height:24px;min-height:24px;padding:2px;font-size:8px}
 .actions{grid-template-rows:39px 39px;gap:6px}.actions>*{font-size:14px;padding:5px}.actions>*:last-child{font-size:13px}
 #library-note{display:none}.library{padding:7px 9px;gap:3px;min-height:150px}
}