.reefPainter.painter{display:grid;grid-template-columns:244px minmax(0,1fr);grid-gap:0;gap:0;align-items:stretch;overflow:hidden;border:1px solid #d6e2dc;border-radius:24px;background:#fffefa}.reefPainter .canvasFrame{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:0;min-height:550px;overflow:hidden;border:0;border-radius:0;box-shadow:none;padding:58px 28px 30px;background-color:#eaf0e9;background-image:radial-gradient(#69908320 .7px,transparent 0);background-size:18px 18px}.reefPainter .canvasFrame canvas{display:block;width:auto;height:auto;max-width:100%;max-height:450px;object-fit:contain;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;filter:drop-shadow(0 12px 14px #46665b0c)}.reefPainter .canvasLabel{position:absolute;top:23px;left:25px;right:25px;display:flex;justify-content:space-between;gap:12px;font-size:8px;color:#79948a;letter-spacing:.12em;pointer-events:none}.reefPainter .canvasLabel>span+span{font-size:10px;letter-spacing:0;color:#82978e}.reefPainter .canvasLoading{position:absolute;inset:0;display:grid;place-items:center;background:#eef4edec;z-index:2;padding:28px;text-align:center;font-size:13px;color:#648477}.reefPainter .toolbox{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:19px;padding:23px 20px;border:0;border-right:1px solid #d6e2dc;border-radius:0;box-shadow:none;background:#fffefa;min-width:0}.reefPainter .paintPanelTitle{font:400 26px/1.2 Georgia,serif;letter-spacing:-.035em;color:#234f5c}.reefPainter .paintPanelTitle>span{display:block;margin-bottom:8px;font:600 7px/1.5 Segoe UI,sans-serif;letter-spacing:.1em;color:#8b9b89}.reefPainter .toolRow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-gap:6px;gap:6px}.reefPainter .tool{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:56px;padding:6px 3px;border:1px solid #dbe5dc;border-radius:11px;background:transparent;color:#628075;font-size:10px;font-weight:500;text-transform:capitalize;cursor:pointer}.reefPainter .tool>span{font-size:21px;line-height:1}.reefPainter .tool.active{background:#234f5c;border-color:#234f5c;color:#fffdf3}.reefPainter .tool:hover:not(:disabled):not(.active){background:#edf3ec;border-color:#9ab9ab}.reefPainter .tool.compact{grid-column:span 3;min-height:39px;flex-direction:row;gap:8px;border-color:transparent;color:#617e76;font-size:10px}.reefPainter .tool.compact>span{font-size:19px}.reefPainter .tool:disabled{opacity:.32;cursor:not-allowed}.reefPainter .paintToolIcon{width:21px;height:21px}.reefPainter .brushChoices{display:grid;grid-gap:7px;gap:7px}.reefPainter .brushChoices button{display:flex;align-items:center;gap:14px;min-height:42px;padding:9px 13px;border:1px solid #dee7dd;border-radius:10px;background:transparent;color:#658074;cursor:pointer;text-align:left;font-size:11px}.reefPainter .brushChoices button[aria-pressed=true]{background:#edf3e9;border-color:#9bb5a1;color:#365f51}.reefPainter .brushSample{display:block;flex-shrink:0;width:32px;height:7px;border-radius:10px;background:#608d7e;transform:rotate(-8deg)}.reefPainter .brushSample.soft{height:10px;filter:blur(3px);opacity:.7}.reefPainter .brushSample.marker{height:11px;border-radius:1px;transform:skew(-22deg) rotate(-8deg);opacity:.8}.reefPainter .paintLabel{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;font-weight:600;color:#486b62;margin-bottom:12px}.reefPainter .paintCustom{display:flex;align-items:center;gap:8px;font-weight:400;cursor:pointer}.reefPainter .paintCustom>span:first-child{font-size:9px;color:#799086}.reefPainter .customColorTile{position:relative;display:grid;place-items:center;width:32px;height:32px;background:white;border:1px solid #b6ccbf;border-radius:50%}.reefPainter .customColorTile>span{font-size:20px;color:#70917e}.reefPainter .customColorTile input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.reefPainter .customColorTile:focus-within{outline:3px solid #b44f38;outline-offset:3px}.reefPainter .palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-gap:10px 7px;gap:10px 7px;margin:0;padding:3px;overflow:visible}.reefPainter .swatch{width:100%;height:auto;aspect-ratio:1;border:2px solid #fffefa;border-radius:50%;box-shadow:0 0 0 1px #8ca08e30;cursor:pointer;min-height:0}.reefPainter .swatch.selected{outline:2px solid #466e62;outline-offset:2px;transform:none}.reefPainter .sizeRow{display:flex;flex-direction:column;align-items:stretch;gap:8px;border:0;border-top:1px solid #e2e9dd;padding:17px 0 0;margin:0}.reefPainter .sizeRow label{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:550;color:#5b7b6e}.reefPainter .sizeRow label span{font-weight:400;color:#8a9e91}.reefPainter .sizeRow input{width:100%;min-width:0;min-height:24px;margin:0;accent-color:#648d79}.reefPainter .paintTip{margin:4px 0 0;color:#81958a;font-size:10px;line-height:1.7}.reefPainter .clearPainting{align-self:start;min-height:36px;margin-top:auto;padding:4px 0;border:0;background:transparent;color:#9b806b;font-size:10px;font-weight:400;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.reefPainter button:focus-visible{outline:3px solid #b44f38;outline-offset:3px}@media(max-width:800px){.reefPainter.painter{grid-template-columns:1fr;border-radius:20px}.reefPainter .canvasFrame{grid-column:1;grid-row:1;min-height:280px;padding:48px 20px 22px}.reefPainter .canvasFrame canvas{max-height:42svh}.reefPainter .canvasLabel{top:19px;left:20px;right:20px}.reefPainter .toolbox{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;grid-gap:19px 24px;gap:19px 24px;border-right:0;border-top:1px solid #d6e2dc;padding:20px}.reefPainter .paintPanelTitle{display:none}.reefPainter .toolRow{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.reefPainter .tool,.reefPainter .tool.compact{grid-column:auto;min-height:48px;flex-direction:row;gap:7px}.reefPainter .tool.compact{border-color:#dbe5dc}.reefPainter .tool>span{font-size:19px}.reefPainter .paintToolIcon{width:18px;height:18px}.reefPainter .brushChoices{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.reefPainter .brushChoices button{min-height:48px;justify-content:center;font-size:11px;gap:10px}.reefPainter .brushSample{width:25px}.reefPainter .sizeRow{border:0;padding:0}.reefPainter .clearPainting{margin:0;grid-column:1/-1}.reefPainter .palette{gap:13px}.reefPainter .swatch{max-width:34px}}@media(max-width:480px){.reefPainter .toolbox{gap:18px;padding:16px}.reefPainter .tool,.reefPainter .tool.compact{flex-direction:column;gap:4px;font-size:9px}.reefPainter .tool.compact>span{font-size:19px}.reefPainter .brushChoices button{flex-direction:column;gap:10px;font-size:10px;min-height:57px;padding:10px 3px}.reefPainter .paintColors{grid-column:1/-1}.reefPainter .palette{grid-template-columns:repeat(9,minmax(0,1fr));gap:12px 8px}.reefPainter .swatch{max-width:32px}.reefPainter .sizeRow{grid-column:1/-1;border-top:1px solid #e2e9dd;padding-top:16px}.reefPainter .sizeRow input{min-height:28px}.reefPainter .canvasLabel{font-size:7px}.reefPainter .canvasLabel>span+span{font-size:8px}.reefPainter .paintCustom>span:first-child{font-size:10px}.reefPainter .canvasFrame{padding-inline:13px}.reefPainter .paintTip{font-size:11px}}@media(min-width:801px){.reefPainter .toolbox{gap:13px;padding:20px}.reefPainter .paintPanelTitle{font-size:24px;line-height:1.1}.reefPainter .paintPanelTitle>span{margin-bottom:6px;font-size:6px}.reefPainter .tool{min-height:50px}.reefPainter .tool.compact{min-height:32px}.reefPainter .brushChoices{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.reefPainter .brushChoices button{flex-direction:column;justify-content:center;gap:10px;min-height:64px;padding:9px 3px;font-size:9px;text-align:center}.reefPainter .brushSample{width:26px}.reefPainter .palette{gap:8px}.reefPainter .paintLabel{margin-bottom:8px}.reefPainter .sizeRow{padding-top:12px;gap:7px}.reefPainter .sizeRow input{min-height:21px}.reefPainter .clearPainting{min-height:27px}}