*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;min-height:100dvh;margin:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#000;color:#e8e8e8}button{font:inherit;cursor:pointer}input,select{font:inherit}.paintRoot{display:flex;flex-direction:column;height:100%;min-height:100dvh;padding:0;padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px));background:#000;color:#e0e0e0}.paintViewport{flex:1;display:flex;flex-direction:column;min-height:0;width:100%}.paintWorkspace{flex:1;display:flex;flex-direction:row;align-items:stretch;min-height:0;min-width:0}.paintRail{flex-shrink:0;width:48px;display:flex;flex-direction:column;align-items:center;background:#0c0c0cfa}.paintRailLeft{width:76px;border-right:1px solid #2a2a2a}.paintRailRight{border-left:1px solid #2a2a2a}.paintRailScroll{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.paintRailScroll::-webkit-scrollbar{display:none}.paintRailScrollBrush{gap:10px;padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:10px}.paintRailScrollColors{display:grid;grid-template-columns:1fr 1fr;gap:6px 6px;align-content:start;justify-items:center;padding:8px 5px}.swatchRail{width:28px;height:28px;border-radius:8px;border:2px solid rgba(255,255,255,.12);padding:0;flex-shrink:0;box-shadow:inset 0 1px #ffffff14}.swatchRail:active{transform:scale(.94)}.swatchRail.active{outline:2px solid #4a8fd4;outline-offset:1px}.brushRailBtn{width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #333;background:linear-gradient(180deg,#222,#141414);flex-shrink:0}.brushRailBtn.active{border-color:#4a8fd4;box-shadow:0 0 0 1px #4a8fd473;background:#1a2430}.brushRailBtn:active{transform:scale(.96)}.brushRailDot{display:block;border-radius:50%;box-shadow:0 0 0 1px #00000073,0 1px 2px #00000080}.paintCanvasColumn{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;background:#000}.paintConnDot{position:absolute;top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));z-index:2;width:11px;height:11px;border-radius:50%;flex-shrink:0;pointer-events:none;box-sizing:border-box}.paintConnDot.on{background:#2a9d8f;box-shadow:0 0 0 2px #2a9d8f59,0 0 12px #2a9d8f8c}.paintConnDot.off{background:#444;box-shadow:inset 0 0 0 1px #00000080}.paintActionBar{flex-shrink:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px;padding:2px 8px;padding-bottom:max(3px,env(safe-area-inset-bottom,0px));border-top:1px solid #2a2a2a;background:#0a0a0af5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.paintActionBtn{padding:4px 10px;border-radius:6px;border:1px solid #3a3a3a;background:linear-gradient(180deg,#2c2c2c,#1a1a1a);color:#eee;font-size:.75rem;font-weight:500;line-height:1.2}.paintActionBtn:active:not(:disabled){transform:scale(.98)}.paintActionPrimary{border-color:#2a5580;background:linear-gradient(180deg,#2d5a8a,#1e3f63);color:#fff}.paintActionPrimary:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.35)}.paintActionStatus{flex:1 1 auto;min-width:0;margin-left:2px;text-align:right;font-size:.65rem;font-weight:500;line-height:1.2;color:#7ee8d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.paintErrBanner{flex-shrink:0;margin:0;padding:8px 12px;text-align:center;font-size:.82rem;border-bottom:1px solid #2a2020;background:#1a0f0f}.paintConn{font-size:.75rem;font-weight:500;padding:6px 11px;border-radius:999px;border:1px solid #333;background:#141414}.paintConn.on{border-color:#1f6b5c;color:#7ee8d3;background:#2a9d8f1f}.paintConn.off{opacity:.65;color:#888}.paintErr,.displayErr{margin:0;color:#f72585;font-size:.9rem}.canvasWrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:none;background:#000}.canvasWrap canvas{max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:16 / 9;background:#1a1a1a;border-radius:6px;box-shadow:0 0 0 1px #ffffff0f,0 8px 28px #00000073}.prototypeNoticeRoot{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#000000b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.prototypeNoticeCard{width:100%;max-width:22rem;padding:1.25rem 1.35rem;border-radius:14px;border:1px solid #3a3a3a;background:#141414;box-shadow:0 16px 48px #0000008c;text-align:center}.prototypeNoticeTitle{margin:0 0 .85rem;font-size:1.05rem;font-weight:600;color:#f2f2f2}.prototypeNoticeBody{margin:0 0 .75rem;font-size:.9rem;line-height:1.45;color:#d8d8d8;text-wrap:balance}.prototypeNoticeBody:last-of-type{margin-bottom:1rem}.prototypeNoticeMuted{color:#a8a8a8;font-size:.84rem}.prototypeNoticeBtn{width:100%;margin-top:.25rem;padding:.65rem 1rem;border-radius:10px;border:1px solid #2a5580;background:linear-gradient(180deg,#2d5a8a,#1e3f63);color:#fff;font-size:.92rem;font-weight:600}.prototypeNoticeBtn:active{transform:scale(.99)}.displayRoot{height:100%;display:flex;flex-direction:column;background:#000;min-height:0}.displayStage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px}.displayImg{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}.displayWait{margin:0;color:#888;font-size:clamp(1rem,3vw,1.4rem)}.displayBar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0));background:#0a0a0a;border-top:1px solid #222}.displayBar button{padding:8px 12px;border-radius:6px;border:1px solid #444;background:#1e1e1e;color:#eee}.displayBar button:disabled{opacity:.4;cursor:not-allowed}.displayPick{display:flex;align-items:center;gap:6px;font-size:.85rem;margin-left:auto}.displayPick select{padding:6px 8px;border-radius:6px;border:1px solid #333;background:#141414;color:#eee;max-width:160px}