.bw-studio { margin: 1rem 0; border: 1px solid #67b9c6; border-radius: 12px; background: #f0fbfc; color: #164e63; }
.bw-studio summary { padding: .75rem; min-height: 44px; cursor: pointer; font-weight: 700; }
.bw-studio-body { padding: 0 .75rem .75rem; }
.bw-studio p { font-size: .82rem; line-height: 1.5; }
.bw-studio-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: .75rem 0; }
.bw-studio button { min-width: 44px; min-height: 44px; border: 1px solid #0e7490; border-radius: 8px; padding: .5rem .65rem; color: #164e63; background: #fff; font: 700 .8rem 'Plus Jakarta Sans', system-ui, sans-serif; touch-action: manipulation; cursor: pointer; }
.bw-studio-grid { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 5px; max-width: 300px; margin: .75rem auto; }
.bw-studio .bw-studio-dot { aspect-ratio: 1; padding: 0; border-radius: 50%; font-size: 1.35rem; background: radial-gradient(circle at 35% 35%, #e0f2fe, #0ea5e9); color: #164e63; box-shadow: inset 0 -2px 4px #0003; }
.bw-studio .bw-studio-dot.is-popped { background: #e2e8f0; box-shadow: inset 0 1px 3px #0002; }
.bw-studio-label { display: block; font-size: .8rem; font-weight: 700; }
.bw-studio textarea { display: block; width: 100%; margin: .35rem 0 .5rem; padding: .5rem; border: 1px solid #67b9c6; border-radius: 6px; color: #164e63; background: #fff; font: 1rem/1.4 ui-monospace, monospace; resize: vertical; }
.bw-studio .bw-studio-copy { width: 100%; }
.bw-studio .bw-studio-status { min-height: 3em; margin: .5rem 0; font-weight: 600; }
.bw-studio .bw-studio-note { font-size: .75rem; color: #475569; }
.bw-studio button:focus-visible, .bw-studio summary:focus-visible, .bw-studio textarea:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }