html,body{margin:0;min-height:100%;background:#0b0f14;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{min-height:100%}.toolbar{position:fixed;top:12px;left:12px;z-index:100;display:flex;gap:8px;align-items:center;background:#0000008c;padding:10px 12px;border-radius:14px;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.page{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;gap:16px;padding:110px 12px 24px;box-sizing:border-box}.leftPane{width:min(32vw,360px);min-width:260px;color:#fff}.rightPane{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;height:100%}.panelTitle{font-weight:700;margin:0 0 8px;opacity:.9}.noteArea{width:100%;height:min(70vh,700px);resize:vertical;border-radius:14px;padding:12px;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);background:#00000059;color:#fff;outline:none;line-height:1.5}.noteArea:focus{border-color:#b478ff8c;box-shadow:0 0 0 3px #b478ff2e}@media (max-width: 900px){.page{flex-direction:column;align-items:center}.leftPane{width:min(96vw,900px);min-width:0}.noteArea{height:240px}}.canvasBox{position:relative;width:min(96vw,900px);aspect-ratio:1 / 1;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px #0000008c;background:#111}.mapImage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.labelLayer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;object-fit:contain;pointer-events:none}.iconLayer{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:20}.mapIcon{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;touch-action:none;width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important}.drawCanvas{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;-webkit-user-select:none;user-select:none;z-index:10}.cursorCircle{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:20;mix-blend-mode:difference}.voiceOverlay{position:fixed;left:50%;bottom:18px;transform:translate(-50%);background:#000000b8;color:#fff;padding:10px 16px;border-radius:14px;font-size:22px;font-weight:700;z-index:500;max-width:min(900px,92vw);text-align:center;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.6)}.rightPane{align-items:stretch}.rightRow{display:flex;gap:14px;align-items:stretch;width:100%}.mapWrap{flex:1 1 auto;min-width:520px;display:flex;flex-direction:column;align-items:center;gap:12px}.mapWrap .canvasBox{width:min(64vw,900px)}.voicePane{width:340px;max-height:min(70vh,700px);background:#00000059;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;color:#fff;overflow:hidden;display:flex;flex-direction:column}.voiceLogList{flex:1;margin-top:8px;overflow:auto;max-height:calc(min(70vh,700px) - 70px);padding-right:6px}.voiceItem{padding:10px;border-radius:12px;margin-bottom:8px;border:1px solid rgba(255,255,255,.1);background:#00000059}.voiceItem.me{background:#ffffff14;border-color:#ffffff2e}.voiceMeta{font-size:12px;opacity:.75;margin-bottom:4px}.voiceMsg{font-size:15px;line-height:1.35;word-break:break-word}.voiceEmpty{opacity:.7;padding:12px 8px}.voiceActions{margin-top:10px;display:flex;gap:8px}@media (max-width: 1100px){.rightRow{flex-direction:column;align-items:center}.mapWrap{min-width:0;width:100%;align-self:flex-start}.mapWrap .canvasBox{width:min(96vw,900px)}.voicePane{width:min(96vw,900px);position:sticky;top:110px}}.rightRow{height:calc(100vh - 134px);align-items:stretch}.voicePane{height:100%;display:flex;flex-direction:column}.voiceLogList{flex:1;overflow-y:auto}.page{height:100vh}.rightPane{height:100%}.rightRow{height:100%;align-items:stretch}.voicePane{height:100%;max-height:none}.voiceLogList{max-height:none;flex:1;overflow-y:auto}