/* Hallmark · macrostructure: Workbench · tone: tactile chromatic laboratory · anchor: cobalt.
 * Existing LumHub shell/fonts; real glass vessels and the original LUM360 coin mark.
 * Pre-emit critique: P5 H4 E4 S5 R4 V4. */
.water-sort{--ws-paper:oklch(96% .022 240);--ws-surface:oklch(99% .009 230);--ws-ink:oklch(25% .055 250);--ws-muted:oklch(46% .04 250);--ws-line:oklch(80% .035 240);--ws-accent:oklch(47% .19 257);--ws-accent-ink:oklch(98% .01 250);--ws-glass:oklch(99% .01 240 / .5);--ws-glass-edge:oklch(52% .055 240 / .65);--ws-shadow:oklch(22% .04 250 / .15);--ws-gold:oklch(86% .13 85);--ws-radius:24px;--ws-floor:oklch(88% .035 230);padding-block:32px 64px}
.ws-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.ws-heading h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.06em}.ws-heading h1 span{color:var(--color-accent)}.ws-heading p{color:var(--color-muted);margin-top:12px;font-size:.925rem}.ws-wallet{display:grid;grid-template-columns:auto auto;gap:0 10px;align-items:center;white-space:nowrap}.ws-wallet>span:last-child{grid-column:2;font-size:.7rem;color:var(--color-muted)}.ws-wallet strong{font-family:var(--font-display);font-size:1.7rem;line-height:1.1}.ws-coin{display:inline-grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--ws-gold);border:2px solid oklch(66% .12 75);box-shadow:inset 0 0 0 3px oklch(96% .08 85),0 3px 0 oklch(56% .1 75);grid-row:span 2}.ws-coin img{width:24px;height:24px;object-fit:contain}.ws-studio{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px;align-items:start}.ws-table{background:var(--ws-paper);color:var(--ws-ink);border:1px solid var(--ws-line);border-radius:var(--ws-radius);overflow:hidden;min-width:0;position:relative;isolation:isolate;box-shadow:0 16px 40px var(--ws-shadow)}.ws-table-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px;border-bottom:1px solid var(--ws-line);background:var(--ws-surface)}.ws-table-top span{font-size:.75rem;color:var(--ws-muted)}.ws-table-top h2{font-size:1.5rem;letter-spacing:-.04em;margin-top:2px}.water-sort button{font-family:var(--font-body);cursor:pointer}.water-sort button:disabled{cursor:default;opacity:.45}.water-sort button:focus-visible,.water-sort input:focus-visible{outline:3px solid var(--ws-accent);outline-offset:4px}.ws-primary,.ws-secondary,.ws-icon-button{border:1px solid var(--ws-line);border-radius:10px;min-height:44px;padding:10px 16px;font-size:.825rem;font-weight:600;line-height:1.35;background:var(--ws-surface);color:var(--ws-ink);transition:background 150ms linear}.ws-primary{background:var(--ws-accent);color:var(--ws-accent-ink);border-color:var(--ws-accent)}.ws-text-button{border:0;background:transparent;color:var(--color-accent);text-decoration:underline;text-underline-offset:4px;padding-block:10px;min-height:44px;font-size:.8rem}.ws-chooser{padding:28px;text-align:center}.ws-chooser h3{font:600 clamp(1.3rem,2.2vw,1.8rem)/1.2 var(--font-display);letter-spacing:-.04em;max-width:27ch;margin:12px auto}.ws-chooser>p{font-size:.875rem;color:var(--ws-muted);max-width:45ch;margin:16px auto}.ws-choose-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}.ws-preview{display:flex;justify-content:center;gap:28px;min-height:200px;align-items:end;pointer-events:none}.ws-preview .ws-vessel{width:66px;height:175px}.ws-preview .ws-tube{padding:0;min-width:0}.ws-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;padding:18px 16px 8px;font-size:.75rem;color:var(--ws-muted)}.ws-stats strong{font-family:var(--font-display);font-size:1.05rem;color:var(--ws-ink);margin-left:5px}.ws-board{display:grid;grid-template-columns:repeat(var(--ws-columns,5),minmax(0,100px));justify-content:center;align-items:end;gap:32px 20px;padding:34px 24px 24px;position:relative;min-height:250px;background-image:radial-gradient(var(--ws-line) .6px,transparent .6px);background-size:18px 18px}.ws-tube{position:relative;border:0;background:transparent;color:var(--ws-ink);display:flex;align-items:center;flex-direction:column;gap:12px;padding:12px 5px 0;min-width:44px;min-height:44px;isolation:isolate;touch-action:manipulation}.ws-vessel{position:relative;width:64px;height:176px;border:2px solid var(--ws-glass-edge);border-top:0;border-radius:7px 7px 25px 25px;background:var(--ws-glass);padding:5px;box-shadow:inset 7px 0 8px oklch(98% .01 250 / .14),inset -4px 0 4px var(--ws-shadow),2px 5px 6px var(--ws-shadow);transform-origin:50% 90%;transition:transform 180ms ease-out}.ws-vessel:before{content:'';position:absolute;left:-4px;right:-4px;top:-4px;height:7px;border:2px solid var(--ws-glass-edge);border-radius:5px;background:var(--ws-surface);z-index:3}.ws-vessel:after{content:'';position:absolute;left:9px;top:12px;bottom:24px;width:4px;border-radius:4px;background:oklch(99% .005 250 / .45);pointer-events:none;z-index:3}.ws-liquid{height:100%;display:flex;flex-direction:column-reverse;border-radius:0 0 19px 19px;overflow:hidden;position:relative}.ws-unit{flex:0 0 25%;width:100%;position:relative;display:grid;place-items:center;background:var(--liquid);color:var(--liquid-ink);border-top:1px solid oklch(99% .01 250 / .35);background-image:repeating-linear-gradient(var(--stripe,45deg),transparent 0 9px,oklch(99% .01 250 / .13) 9px 11px);font-family:var(--font-display);font-size:12px;font-weight:700;line-height:1}.ws-unit:last-child:before{content:'';position:absolute;top:0;left:0;right:0;height:5px;border-radius:50%;background:oklch(98% .01 250 / .25)}.ws-number{font:500 .7rem var(--font-display);min-width:24px;min-height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--ws-line);background:var(--ws-surface)}.ws-tube[aria-pressed=true] .ws-vessel{transform:translateY(-14px)}.ws-tube[aria-pressed=true] .ws-number,.ws-tube.ws-hint .ws-number{background:var(--ws-accent);color:var(--ws-accent-ink);border-color:var(--ws-accent)}.ws-tube.ws-hint .ws-vessel{outline:3px solid var(--ws-accent);outline-offset:5px}.ws-tube.ws-done:after{content:'✓';position:absolute;top:-8px;right:4px;background:var(--ws-accent);color:var(--ws-accent-ink);width:22px;height:22px;border-radius:50%;font-size:12px;display:grid;place-items:center;z-index:5}.water-sort[data-symbols=off] .ws-unit span{visibility:hidden}
.ws-unit[data-color="0"]{--liquid:#bd3836;--liquid-ink:#fff3e9}.ws-unit[data-color="1"]{--liquid:#2c68aa;--liquid-ink:#f3f8ff;--stripe:0deg}.ws-unit[data-color="2"]{--liquid:#207351;--liquid-ink:#edfff5;--stripe:90deg}.ws-unit[data-color="3"]{--liquid:#e8b548;--liquid-ink:#382908;--stripe:-45deg}.ws-unit[data-color="4"]{--liquid:#8050a5;--liquid-ink:#fff3ff;--stripe:30deg}.ws-unit[data-color="5"]{--liquid:#59c8ca;--liquid-ink:#133637;--stripe:60deg}.ws-unit[data-color="6"]{--liquid:#df8bb5;--liquid-ink:#3f1930;--stripe:120deg}.ws-unit[data-color="7"]{--liquid:#4b4b9d;--liquid-ink:#f7f1ff;--stripe:150deg}.ws-unit[data-color="8"]{--liquid:#b6ce52;--liquid-ink:#2a3214;--stripe:15deg}.ws-unit[data-color="9"]{--liquid:#98461f;--liquid-ink:#fff4e8;--stripe:75deg}
.ws-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px 16px 20px}.ws-message{font-size:.8rem;line-height:1.5;text-align:center;padding:16px 24px;background:var(--ws-surface);border-top:1px solid var(--ws-line);min-height:68px;color:var(--ws-muted);margin:0;max-width:none}.ws-tutorial-note{margin:12px 20px 0;padding:14px 18px;background:var(--ws-surface);border:1px solid var(--ws-line);border-radius:10px;font-size:.875rem}.ws-paused{position:absolute;inset:88px 0 68px;background:var(--ws-paper);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;z-index:10}.ws-paused h3{font:600 2rem var(--font-display)}.ws-sidebar section{padding:20px 0;border-bottom:1px solid var(--color-rule)}.ws-sidebar section:first-child{padding-top:4px}.ws-sidebar h2{font-size:1.1rem;letter-spacing:-.03em;margin-bottom:14px}.ws-sidebar p{font-size:.8rem;color:var(--color-muted)}.ws-rank{display:flex;gap:10px;justify-content:space-between;font-size:.75rem}.ws-rank strong{white-space:nowrap}.ws-sidebar progress{width:100%;height:7px;margin:14px 0;accent-color:var(--color-accent)}.ws-local{font-size:.7rem!important;margin-top:5px}.ws-daily button{width:100%;margin-top:14px;color:var(--color-ink);background:var(--color-surface);border-color:var(--color-rule)}.ws-daily small{display:block;margin-top:8px;font-size:.7rem;color:var(--color-muted)}.ws-settings{display:grid;gap:12px}.ws-settings label{font-size:.8rem;display:flex;gap:10px;align-items:center;min-height:32px}.ws-settings input{width:18px;height:18px;accent-color:var(--color-accent)}.ws-tools{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}.ws-storage{font-size:.75rem;color:var(--color-muted);margin-top:18px}.ws-explain{display:grid;grid-template-columns:1.1fr 1fr;gap:28px 48px;margin-top:40px;border-top:1px solid var(--color-rule);padding-top:28px}.ws-explain h2{font-size:1.3rem;margin-bottom:12px}.ws-explain p{color:var(--color-muted);font-size:.825rem;line-height:1.65}.ws-explain p+p{margin-top:14px}.ws-explain section:last-child{grid-column:1/-1;max-width:72ch}
@media(hover:hover){.ws-secondary:hover,.ws-icon-button:hover{background:var(--ws-floor)}.ws-primary:hover{filter:brightness(1.08)}.ws-tube:hover .ws-number{border-color:var(--ws-accent)}}
@media(max-width:1000px){.ws-studio{grid-template-columns:minmax(0,1fr) 190px;gap:20px}.ws-board{gap:30px 12px;padding-inline:16px;grid-template-columns:repeat(4,minmax(0,100px))}.ws-vessel{width:60px;height:164px}.water-sort[data-tube-style=flask] .ws-vessel{width:70px}}
@media(max-width:760px){.ws-heading{align-items:flex-start}.ws-heading h1 span{display:block}.ws-heading p{max-width:26ch}.ws-wallet{gap:0 7px}.ws-wallet strong{font-size:1.35rem}.ws-wallet>span:last-child{font-size:.6rem}.ws-coin{width:32px;height:32px}.ws-coin img{width:20px;height:20px}.ws-studio{grid-template-columns:minmax(0,1fr)}.ws-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.ws-sidebar section:first-child{padding-top:20px}.ws-sidebar section:last-child{grid-column:1/-1}.ws-settings{display:flex;flex-wrap:wrap;gap:12px 22px}.ws-board{grid-template-columns:repeat(5,minmax(0,90px));gap:28px 10px}.ws-table-top{padding:20px}.ws-explain{grid-template-columns:1fr}.ws-explain section:last-child{grid-column:auto}.ws-heading{margin-bottom:22px}.ws-chooser{padding:24px 18px}.ws-preview{gap:20px}}
@media(max-width:480px){.water-sort{padding-top:24px}.ws-heading{gap:12px}.ws-heading h1{font-size:2rem}.ws-heading p{font-size:.8rem}.ws-board{grid-template-columns:repeat(4,minmax(0,72px));gap:26px 8px;padding:30px 10px 18px}.ws-vessel{width:48px;height:142px;padding:4px}.water-sort[data-tube-style=round] .ws-vessel{width:54px}.water-sort[data-tube-style=flask] .ws-vessel{width:58px}.ws-unit{font-size:10px}.ws-tube{padding-inline:2px}.ws-table-top{padding:16px}.ws-table-top h2{font-size:1.25rem}.ws-icon-button{font-size:.75rem;padding-inline:12px}.ws-stats{gap:8px 14px;font-size:.65rem}.ws-stats span:last-child{flex-basis:100%;text-align:center}.ws-actions{gap:6px}.ws-actions button{font-size:.72rem;padding:10px 12px}.ws-preview .ws-vessel{width:54px;height:150px}.ws-preview{min-height:170px}.ws-choose-actions{flex-direction:column}.ws-sidebar{gap:0 18px}.ws-sidebar h2{font-size:1rem}.ws-rank{flex-wrap:wrap;gap:5px}.ws-shop-grid{grid-template-columns:1fr}.water-sort dialog{padding:22px}.ws-shop-preview{gap:20px}.ws-product>div{justify-content:flex-start;gap:12px}.ws-message{padding:14px 16px}.ws-table{border-radius:18px}.ws-tutorial-note{font-size:.8rem;margin-inline:12px;padding:12px}}
@media(prefers-reduced-motion:reduce){.water-sort *,.water-sort *:before,.water-sort *:after{transition:none!important;animation:none!important}}.water-sort[data-reduced=true] *,.water-sort[data-reduced=true] *:before,.water-sort[data-reduced=true] *:after{transition:none!important;animation:none!important}

.ws-unit>span{background:var(--liquid);padding:3px;border-radius:3px}

.water-sort .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.ws-preview .ws-tube:disabled,.ws-shop-preview .ws-tube:disabled{opacity:1}.ws-table:fullscreen{overflow-y:auto;border-radius:0;padding-bottom:16px}.ws-product>.ws-swatch{justify-content:flex-start}

@media(max-width:360px){.ws-board{grid-template-columns:repeat(3,minmax(0,72px))}}
@media(pointer:coarse){.ws-settings label{min-height:44px}}