.mood-stage{background:#101311;color:#eee;min-height:395px;position:relative;padding:28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.mood-hud{font:9px monospace;letter-spacing:.1em;color:#a5b5a5;display:flex;justify-content:space-between;gap:20px}.mood-comparison{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:26px;margin:35px 0}.mood-preview{text-align:center;min-width:0}.mood-preview>p{font:10px monospace;color:#b2c0b2;margin:0 0 18px}.mood-demo{display:block;margin:auto;width:180px;height:108px;border:0;background:transparent;color:#172318;position:relative;perspective:500px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mood-demo:focus-visible{outline:2px solid #c4e1ad!important;outline-offset:0;border-radius:14px}.mood-float,.mood-surface{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;margin:auto;pointer-events:none;transform-style:preserve-3d}.mood-float{width:130px;height:54px;transition:transform 140ms ease-out}.mood-surface{width:100%;height:100%;border-radius:40px;background:radial-gradient(ellipse at var(--px,35%) var(--py,15%),#ffffff80,transparent 65%),linear-gradient(115deg,var(--c1,#81e0ef),var(--c2,#e9a9eb));box-shadow:inset 0 1px 1px #ffffff90,0 10px 28px #0005;font:600 12px/1 Arial,sans-serif;letter-spacing:.04em;white-space:pre}.mood-surface i{display:inline-block;font-style:normal}.mood-demo[data-mood=charming] .mood-surface{box-shadow:inset 0 1px 1px #fff8,0 0 22px #b4b6ff22}.mood-demo[data-mood=charming]:is(:hover,:focus-visible) .mood-surface{box-shadow:inset 0 1px 1px #fff8,0 0 35px #b4b6ff65}.mood-stage-note{font:10px/1.8 monospace;color:#9aa999;max-width:450px;margin:0}.mood-field{display:block;font-size:11px;margin:18px 0}.mood-field select,.mood-field input{display:block;width:100%;margin-top:9px;padding:10px;border:1px solid #cdd4c9;background:#f6f7f0;color:#263e2e;font:12px Archivo,Arial,sans-serif;border-radius:3px;min-height:40px}.mood-switch{display:flex;gap:9px;align-items:center;font-size:11px;margin:20px 0;min-height:30px}.mood-switch input{accent-color:#344c37;width:16px;height:16px}.mood-editor h3{font-size:27px}.mood-editor .water-range{margin:18px 0}.mood-editor .mood-action{font:11px Archivo,Arial,sans-serif;background:#233929;color:#f2f4e8;border:0;padding:13px;width:100%;min-height:44px}.mood-gallery-title{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:40px 0 22px}.mood-gallery-title h3{font-size:22px;font-weight:400;letter-spacing:-.04em;margin:0}.mood-gallery-title span{font:9px monospace;color:#62745f}.mood-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #2b342c;border-left:1px solid #2b342c;background:#101311}.mood-card{padding:22px 14px 14px;border-right:1px solid #2b342c;border-bottom:1px solid #2b342c;color:#e7eee3;min-width:0;position:relative}.mood-card[data-selected=true]{background:#1d281e;box-shadow:inset 0 0 0 1px #8faa79}.mood-card header{display:flex;justify-content:space-between;align-items:center;font:9px monospace;color:#a4b7a0;gap:10px}.mood-card h4{font-size:16px;font-weight:400;margin:12px 0 3px;letter-spacing:-.02em}.mood-card .mood-demo{max-width:100%;height:100px}.mood-card p{font:9px/1.6 monospace;color:#a2b19d;min-height:28px;margin:0}.mood-edit{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-top:1px solid #354036;background:none;color:#bed0b5;font:10px monospace;min-height:44px;margin-top:10px;padding:10px 0}.mood-diagram{display:block;width:100%;margin:24px 0;background:#e8ecdf;border:1px solid #d2dacb;border-radius:3px}.mood-challenge-steps{padding-left:18px;font-size:13px;line-height:2;color:#62685e}.mood-download{display:block;margin:20px 0;font-size:12px}.mood-lesson .water-heading h1{font-size:clamp(62px,7.7vw,116px)}.mood-lesson .water-workbench{grid-template-columns:minmax(0,1fr) 310px}.mood-lesson .water-observation{grid-template-columns:110px 1fr 230px}.mood-lesson [hidden]{display:none!important}.mood-feedback{color:#ddf4c9;font:10px/1.7 monospace;margin:14px 0 0;min-height:34px}.mood-lesson[data-reduced=true] .mood-float{transition:none}.mood-lesson[data-reduced=true] .mood-demo[data-mood=charming] .mood-surface{box-shadow:inset 0 1px 1px #fff8,0 0 22px #b4b6ff22}
@media(max-width:1000px){.mood-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.mood-stage{padding:22px}.mood-comparison{gap:0}.mood-demo{width:150px}.mood-lesson .water-observation{grid-template-columns:100px 1fr}.mood-lesson .water-observation code{grid-column:2}.mood-lesson .water-workbench{grid-template-columns:minmax(0,1fr) 270px}.mood-hud{font-size:8px}}
@media(max-width:700px){.mood-lesson .water-workbench{display:block}.mood-stage{min-height:335px;padding:20px}.mood-comparison{gap:4px;margin:24px 0}.mood-demo{width:136px}.mood-float{width:118px;height:51px}.mood-preview>p{font-size:9px}.mood-editor{display:block}.mood-editor .water-range{margin:22px 0}.mood-editor h3{margin:20px 0}.mood-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.mood-card{padding:16px 10px 10px}.mood-card h4{font-size:15px}.mood-card header{font-size:8px}.mood-card .mood-demo{width:100%;height:95px}.mood-card p{font-size:8px;min-height:26px}.mood-gallery-title span{display:none}.mood-gallery-title h3{font-size:21px}.mood-lesson .water-observation{display:block}.mood-hud{font-size:7px}.mood-lesson .water-heading h1{font-size:clamp(56px,14.4vw,89px)}}
@media(prefers-reduced-motion:reduce){.mood-float{transition:none}}
.mood-stage{flex:1}.mood-stage .mood-demo{width:240px;height:160px}.mood-stage .mood-float{width:176px;height:74px}.mood-stage .mood-surface{font-size:15px}.mood-stage .mood-preview>p{margin-bottom:12px}.mood-stage .mood-feedback{max-width:100%}
@media(max-width:1000px){.mood-stage .mood-demo{width:170px;height:130px}.mood-stage .mood-float{width:140px;height:60px}.mood-stage .mood-surface{font-size:13px}}
@media(max-width:700px){.mood-stage .mood-demo{width:136px;height:108px}.mood-stage .mood-float{width:118px;height:51px}.mood-stage .mood-surface{font-size:12px}}

.mood-card .mood-demo{height:84px}.mood-card p{min-height:16px}.mood-edit{margin-top:6px}