.workspace{grid-template-columns:300px minmax(0,1fr);gap:2rem}.setup{padding-right:1.5rem}.setup label{margin:1rem 0 .3rem}.setup select{margin-top:.35rem;padding-right:2.6rem;appearance:none;background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='m1 1 7 7 7-7' fill='none' stroke='%23171819' stroke-width='2'/%3E%3C/svg%3E") right 16px center/14px no-repeat}.modes{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.modes button[aria-pressed=true]{background:#276354;color:#fff;border-color:#276354}.hint{margin:.5rem 0}details{margin-top:1.3rem;border-top:1px solid var(--rule);padding-top:1rem}summary{cursor:pointer;font-weight:600}output{float:right;font-family:var(--mono)}input[type=range]{padding:0;border:0;accent-color:#276354;cursor:pointer}#screen{background:#f5f5f0;border:1px solid #c7ccc5;padding:1.2rem 1.5rem 1.5rem;min-height:490px;text-align:center;--tone:#276354}.screen-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}#source{font:500 .7rem var(--mono);color:var(--muted)}#activity{font:400 1.6rem var(--reading);margin:1.5rem 0 .8rem}.art{height:165px;display:flex;align-items:center;justify-content:center;margin:1rem auto 1.5rem;max-width:640px;width:100%;position:relative}#meter-art{width:100%}.meter-track{height:74px;border:1px solid #a8b6ac;background:#e1e7e1;position:relative;border-radius:5px}#fill{height:100%;width:0;background:var(--tone);border-radius:4px;transition:width .12s linear}#limit-mark{position:absolute;top:-12px;bottom:-12px;border-left:3px solid #171819;left:35%}#limit-mark:before{content:'LIMIT';position:absolute;top:-22px;left:-17px;font:500 .65rem var(--mono)}.scale{display:flex;justify-content:space-between;color:var(--muted);margin-top:1rem;font-size:.9rem}#message{font-size:clamp(1.6rem,3vw,2.7rem);margin:.8rem 0}#reading{color:var(--muted);min-height:1.5em}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.3rem 0 .5rem}#notice{font-size:1rem;margin-top:.8rem}#notice:empty{display:none}.privacy{color:var(--muted);font-size:.9rem;margin:1rem 0}.help p{margin:.8rem 0;max-width:70ch}.alert{--tone:#b52d27!important;background:#fff0ed!important;box-shadow:inset 0 0 0 3px #b52d27}#demo-controls{max-width:350px;margin:1rem auto}#bubbles-art,#garden-art{display:none;width:100%;height:100%;align-items:end;justify-content:center;gap:3%;overflow:hidden;padding:8px}#bubbles-art i{display:block;width:13%;aspect-ratio:1;border-radius:50%;background:var(--tone);opacity:.75;transform:translateY(calc(var(--rise,0) * -1px));transition:transform .2s}#garden-art i{display:block;width:13%;height:80%;position:relative;transform-origin:bottom;transform:scaleY(calc(.4 + var(--growth,0) * .6));transition:transform .2s}#garden-art i:before{content:'';position:absolute;background:#276354;width:5px;height:80%;bottom:0;left:50%}#garden-art i:after{content:'';position:absolute;width:80%;aspect-ratio:1;background:var(--tone);border-radius:50% 50% 10% 50%;left:10%;top:0;transform:rotate(45deg)}#screen[data-visual=bubbles] #meter-art,#screen[data-visual=garden] #meter-art{display:none}#screen[data-visual=bubbles] #bubbles-art,#screen[data-visual=garden] #garden-art{display:flex}#results{padding-left:1.5rem;font-size:1rem}#results li{padding:.35rem 0}body.presenting{overflow:hidden}.presenting #screen{position:fixed;inset:0;z-index:100;min-height:100dvh;overflow:auto;display:flex;flex-direction:column;justify-content:center;padding:1.5rem max(1rem,calc((100vw - 1000px)/2))}.presenting .screen-top{margin-bottom:auto}.presenting #activity{font-size:2rem}.presenting .controls{margin-bottom:auto}.presenting .art{height:25vh}.presenting #message{font-size:clamp(2rem,5vw,4rem)}button:focus-visible,summary:focus-visible{outline:3px solid #1261a0;outline-offset:3px}@media(max-width:800px){main{padding:1.5rem 1rem}.workspace{display:block}.setup{border:0;padding:0;margin-bottom:1.5rem}.setup h2{margin-bottom:.7rem}.modes{grid-template-columns:repeat(4,1fr)}.site-header{padding:1rem;gap:1rem}.draft-label{display:none}#screen{padding:1rem;min-height:460px}}@media(max-width:450px){.modes{grid-template-columns:1fr 1fr}.site-header{font-size:.9rem}.brand{font-size:.9rem}.art{height:130px}.controls button{flex:1}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-height:500px) and (orientation:landscape){.presenting #screen{padding:.5rem 2rem}.presenting #activity{margin:.3rem}.presenting .art{height:60px;margin:.5rem auto}.presenting .meter-track{height:30px}.presenting #message{font-size:1.6rem;margin:.3rem}.presenting .controls{margin:.4rem}.presenting .scale{display:none}.presenting #reading{font-size:.9rem}}
#screen-results{list-style:none;padding:0;max-height:150px;overflow:auto;font-size:1.1rem;margin:.8rem auto;min-width:50%}#screen-results li{border-bottom:1px solid var(--rule);padding:.35rem}.presenting #screen-results{font-size:1.5rem}
#garden-art{border-bottom:2px solid #b5c5ae}#garden-art i:nth-child(2n){height:95%}#garden-art i:nth-child(3n){height:65%}#garden-art i:after{border-radius:50% 10% 50% 10%;width:65%;left:20%;box-shadow:8px 8px 0 -4px #91ac77}#garden-art i:nth-child(2n):after{transform:rotate(-45deg)}
@media(max-height:500px) and (orientation:landscape){.presenting #garden-art i:after{width:18px;height:18px;left:calc(50% - 7px);top:0;box-shadow:none}.presenting #garden-art{padding:3px}.presenting #bubbles-art i{max-width:35px}.presenting #bubbles-art{overflow:visible}}
.presenting .art{flex-shrink:0}
@media(max-height:500px) and (orientation:landscape){.presenting #notice{font-size:.8rem;margin:.2rem}.presenting #demo-controls{margin:.15rem auto}.presenting #demo-controls label{font-size:.8rem}.presenting #demo-controls input{min-height:24px}.presenting .screen-top button,.presenting .controls button{min-height:36px;padding:.3rem .65rem}.presenting #garden-art{height:60px}}
/* Small, numerous bubbles; the former garden is now a sound-bar display. */
#bubbles-art{position:relative;display:none;gap:0;overflow:hidden}
#bubbles-art i{position:absolute;width:clamp(12px,3%,23px);bottom:calc(4px + mod(var(--i),3)*5px);left:calc(var(--i)*2.65%);opacity:.7;background:var(--tone);border:1px solid #fff9}
#garden-art{border:0;gap:1%;align-items:center;padding:6px}
#garden-art i,#garden-art i:nth-child(2n),#garden-art i:nth-child(3n){height:90%;width:3%;border-radius:10px;background:var(--tone);transform:scaleY(max(.035,calc(var(--growth,0)*.9)));transform-origin:center}
#garden-art i:nth-child(3n){height:65%}#garden-art i:nth-child(4n){height:80%}
#garden-art i:before,#garden-art i:after{display:none}
.notches{display:none;justify-content:space-between;font:500 .75rem var(--mono);margin-top:.6rem}
#screen[data-mode=applause] .notches{display:flex}#screen[data-mode=applause] .scale{display:none}
#screen[data-mode=applause] .meter-track:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(20% - 1px),#17181977 calc(20% - 1px),#17181977 20%);pointer-events:none}
.no-text #activity,.no-text #reading{visibility:hidden}.no-text:not([data-measuring=true]) #message{visibility:hidden}
.setup input[type=checkbox]{width:auto;min-height:0;accent-color:#276354}
/* ECQ palette: white, charcoal, brick red; amber is a level warning. */
#screen{background:#fff;border-color:#c7cbd0;--tone:#555c65}
.modes button[aria-pressed=true]{background:#171819;border-color:#171819}
input[type=range],.setup input[type=checkbox]{accent-color:#b52d27}
.meter-track{background:#eef0f2;border-color:#bcc1c7}
#screen.near{--tone:#a76208;background:#fffaf2}
#screen.alert{--tone:#b52d27;background:#fff7f6!important;box-shadow:inset 0 0 0 2px #b52d27}
.screen-top{flex-wrap:wrap}.screen-top #source{margin-left:auto}.controls:has(>button[hidden]:only-child){display:none}
.no-scale #limit-mark:before,.no-scale .scale{display:none}
.no-scale #reading{visibility:hidden}
#ripples-art,#halo-art{display:none;position:relative;width:100%;height:100%;align-items:center;justify-content:center}
#screen[data-visual=ripples] #meter-art,#screen[data-visual=halo] #meter-art{display:none}
#screen[data-visual=ripples] #ripples-art,#screen[data-visual=halo] #halo-art{display:flex}
#ripples-art i{position:absolute;border:2px solid var(--tone);border-radius:50%;width:calc(26px + var(--i)*19px + var(--level,0)*60px);height:calc(26px + var(--i)*12px + var(--level,0)*40px);opacity:calc(.85 - var(--i)*.09);transition:width .15s,height .15s,border-color .15s}
#halo-art i{position:absolute;left:50%;top:50%;width:4px;height:calc(7px + var(--level,0)*38px);border-radius:3px;background:var(--tone);transform:translate(-50%,-50%) rotate(calc(var(--i)*7.5deg)) translateY(-60px);transform-origin:center;transition:height .1s}
#bubbles-art i{background:radial-gradient(circle at 30% 25%,#fff 0%,#ffffff33 40%,var(--tone) 100%);border:1px solid var(--tone);opacity:.8;bottom:calc(5px + mod(var(--i),4)*9px);width:calc(10px + mod(var(--i),5)*3px)}
@media(max-width:800px){.display-side{display:flex;flex-direction:column}.workspace{display:flex;flex-direction:column}.display-side{order:-1;width:100%}.setup{width:100%}#screen{min-height:410px}.screen-top #start{order:-1}}
@media(max-height:500px) and (orientation:landscape){.presenting #halo-art{transform:scale(.45)}.presenting #ripples-art{transform:scale(.45)}}
#halo-art{transform:scale(1.3)}.presenting #halo-art{transform:scale(1.5)}
@media(max-height:500px) and (orientation:landscape){.presenting #halo-art{transform:scale(.45)}}
#confetti-art{display:none;position:relative;width:100%;height:100%;overflow:hidden;border-bottom:2px solid #e4e6ea}
#screen[data-visual=confetti] #meter-art{display:none}#screen[data-visual=confetti] #confetti-art{display:block}
#confetti-art i{position:absolute;bottom:var(--ground);left:var(--left);width:var(--size);height:var(--size);border-radius:0;background:hsl(var(--hue) 75% 48%);will-change:transform}

#screen.near #confetti-art{border-bottom:4px solid #a76208}#screen.alert #confetti-art{border-bottom:4px solid #b52d27}
#screen.near #confetti-art i{background:#bc780e}#screen.alert #confetti-art i{background:#b52d27}