.shower-tile-preview{background:#d9d6cf;width:100%;height:100%;min-height:360px;position:relative}.shower-tile-preview canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.preview-hint{color:#f5f3edcc;background:#16191cb8;padding:6px 9px;font:10px IBM Plex Mono,monospace;position:absolute;bottom:12px;right:12px}.unit-button.is-active{color:#f5f3ed;background:#16191c;border-color:#16191c}select{cursor:pointer;background:#eae7de80;border:1px solid #16191c4d;border-radius:12px;width:100%;padding:12px}.preview-key{color:#2a2f33;background:#f5f3edd9;border-radius:10px;align-items:start;gap:4px;max-width:min(230px,100% - 24px);padding:9px 11px;font:11px/1.45 IBM Plex Mono,monospace;display:grid;position:absolute;top:12px;left:12px}.preview-key li{align-items:flex-start;gap:7px;min-width:0;display:flex}.preview-key li>span:first-child{border-radius:3px;flex:none;width:12px;height:12px;margin-top:2px}.mode-seg{border:1px solid #16191c4d;border-radius:9999px;padding:2px;font:12px IBM Plex Mono,monospace;display:inline-flex}.mode-seg label{cursor:pointer;position:relative}.mode-seg input{opacity:0;pointer-events:none;position:absolute}.mode-seg span{white-space:nowrap;border-radius:9999px;padding:10px 22px;display:block}.mode-seg input:checked+span{color:#f5f3ed;background:#16191c}.mode-seg input:focus-visible+span{outline-offset:1px;outline:2px solid #f5a200}