:root{font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif;color:#17212a;background:#000;--grid-gap-x: 2px;--grid-gap-y: 2px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#000}.app{width:100vw;height:100vh;padding:0;background:#000;position:relative;overflow:hidden}button{border:none;border-radius:6px;padding:6px 8px;background:#0b57d0e6;color:#fff;cursor:pointer;font-size:.75rem}button:hover{background:#0847ac}.actions{display:flex;align-items:center;gap:6px}.setTitleInput{width:min(16vw,170px);height:24px;border:1px solid rgba(255,255,255,.45);border-radius:6px;background:#0f0f0fd1;color:#fff;padding:0 8px;font-size:.72rem}.sideButton{width:20px;height:20px;padding:0;font-size:.8rem;line-height:1}.axisControls{display:flex;gap:4px}.axisControls.vertical{flex-direction:column}.axisControls.horizontal{flex-direction:row;align-items:center}.urlAdder{display:flex;align-items:center;gap:4px}.urlAdder input{width:min(46vw,420px);height:24px;border:1px solid rgba(255,255,255,.45);border-radius:6px;background:#0f0f0fd1;color:#fff;padding:0 8px;font-size:.72rem}.urlAdder input::placeholder{color:#ffffffa8}.sideButton.wide{width:auto;min-width:42px;padding:0 8px}.addUrlError,.setMetaError{margin-top:4px;text-align:center;color:#ffaaaaf2;font-size:.68rem}.grid{display:grid;width:100%;height:100%;column-gap:var(--grid-gap-x);row-gap:var(--grid-gap-y);align-content:start}.card{position:relative;background:#000;overflow:hidden}.emptySlotCard{display:grid;place-items:center;pointer-events:none}.emptySlotLabel{color:#ffffff57;font-size:clamp(.62rem,1.2vw,.9rem);font-weight:600;letter-spacing:.1em;-webkit-user-select:none;user-select:none}.card.dragging{opacity:.55}.isDragging .frameWrap iframe{pointer-events:none}.card.dropTarget{outline:2px solid rgba(180,180,180,.6);outline-offset:-2px}.card.isOverlay{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;z-index:130;width:min(96vw,calc(96vh * 16 / 9));height:min(96vh,54vw);border:1px solid rgba(255,255,255,.18);border-radius:10px;overflow:hidden}.card.isOverlay .dragHandle,.card.isOverlay .deleteStreamButton,.card.isOverlay .reloadStreamButton,.card.isOverlay .openChatButton{display:none}.emptyDropTarget{width:100%;height:100%;border:2px dashed rgba(180,180,180,.6);background:#8c8c8c14;pointer-events:none}.frameWrap{position:relative;width:100%;height:100%;min-height:0;background:#000}.openChatButton{position:absolute;top:38%;left:76%;transform:translate(-50%,-50%);z-index:3;width:30px;height:30px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:#191919b3;color:#fffffff2;padding:0;font-size:.8rem;line-height:1;opacity:0}.card.isTwitch .openChatButton{left:88%}.openChatButton:hover{background:#e72a2ae6}.reloadStreamButton{position:absolute;top:52%;left:76%;transform:translate(-50%,-50%);z-index:3;width:30px;height:30px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:#191919b3;color:#fffffff2;padding:0;font-size:.9rem;line-height:1;opacity:0}.card.isTwitch .reloadStreamButton{left:88%}.reloadStreamButton:hover{background:#0b57d0e6}.dragHandle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:42%;height:42%;min-width:120px;min-height:68px;border-radius:8px;padding:0;font-size:clamp(18px,2vw,28px);font-weight:600;line-height:1;border:0;background:transparent;color:transparent;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.card.isTwitch .dragHandle{left:72%;width:21%}.dragHandle:active{cursor:grabbing}.dragHandle:hover{background:#ffffff3d;color:#fffffff2}.dragHandle:focus-visible{background:#ffffff3d;color:#fffffff2}.deleteStreamButton{position:absolute;top:66%;left:76%;transform:translate(-50%,-50%);z-index:3;width:30px;height:30px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:#191919b3;color:#fffffff2;padding:0;font-size:.88rem;line-height:1;opacity:0}.card.isTwitch .deleteStreamButton{left:88%}.deleteStreamButton:hover{background:#ff5a5ae0}.card:hover .deleteStreamButton,.card:hover .reloadStreamButton,.card:hover .openChatButton{opacity:1}.card:hover .dragHandle{background:#ffffff3d;color:#fffffff2}.frameWrap iframe{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;border:0;z-index:0;backface-visibility:hidden;transform:translateZ(0)}.gridEmpty{visibility:hidden}.edgeZone{position:absolute;z-index:20}.edgeTop{top:0;left:0;width:100%;height:72px}.edgeRight{top:0;right:0;width:10px;height:100%}.edgeBottom{left:0;bottom:0;width:100%;height:10px}.edgePanel{position:absolute;z-index:30;opacity:0;pointer-events:none;transition:opacity .12s ease}.panelTopEditor{top:8px;left:50%;transform:translate(-50%)}.panelTopButtons{top:8px;right:8px}.panelRight{top:50%;right:8px;transform:translateY(-50%)}.panelBottom{left:50%;bottom:8px;transform:translate(-50%)}.edgeTop:hover~.panelTopEditor,.edgeTop:hover~.panelTopButtons,.edgeRight:hover~.panelRight,.edgeBottom:hover~.panelBottom,.panelTopEditor:hover,.panelTopButtons:hover,.panelRight:hover,.panelBottom:hover,.panelTopEditor:focus-within,.panelTopButtons:focus-within,.panelRight:focus-within,.panelBottom:focus-within{opacity:1;pointer-events:auto}.splash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;border:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;color:#fff;background:radial-gradient(1200px 500px at 70% 80%,rgba(26,57,122,.35),transparent 55%),radial-gradient(900px 450px at 15% 20%,rgba(85,20,95,.32),transparent 55%),linear-gradient(180deg,#050505,#0b0b0b 60%,#070707);overflow:hidden}.splash:hover{background:radial-gradient(1200px 500px at 70% 80%,rgba(95,95,95,.22),transparent 55%),radial-gradient(900px 450px at 15% 20%,rgba(70,70,70,.2),transparent 55%),linear-gradient(180deg,#121212,#161616 60%,#101010)}.splash:before{content:"";position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 40px);animation:splashPan 10s linear infinite}.splashInner{position:relative;z-index:1;width:100%;height:100%;display:grid;place-content:center;gap:10px;letter-spacing:.12em;text-align:center}.splashTitle{font-size:clamp(1.8rem,5vw,4rem);font-weight:700;text-shadow:0 0 18px rgba(96,134,255,.55)}.splashHint{font-size:clamp(.75rem,1.6vw,1.05rem);opacity:.88}.splashSetPicker{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:2;display:flex;align-items:center;gap:6px;max-width:min(92vw,980px)}.splashSetPicker select{height:28px;min-width:160px;border:1px solid rgba(255,255,255,.35);border-radius:6px;background:#141414d1;color:#fff;padding:0 8px;font-size:.75rem}.splashReset{position:absolute;right:14px;bottom:14px;z-index:2;background:#ffffff24;color:#fff;border:1px solid rgba(255,255,255,.32)}.splashReset:hover{background:#ffffff3d}.videoOverlayBackdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;background:#000000d1}@keyframes splashPan{0%{transform:translateY(0)}to{transform:translateY(40px)}}@media (orientation: portrait){:root{--grid-gap-x: 1px;--grid-gap-y: 0px}}
