/* A quiet, local practice journal. Soft frosted panels, one chrome ramp throughout. */
.ballet-practice{padding:65px 0 95px;color:#575956;position:relative}
.ballet-mast{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.04em;color:#858782}
.ballet-layout{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:770px;gap:5vw}
.ballet-figure{position:relative;height:690px;isolation:isolate}
.ballet-halo{position:absolute;inset:12% -5% 7%;background:radial-gradient(ellipse at 50% 55%,#e8e6e8a6,#f3f2f18a 35%,#fff0 68%);filter:blur(28px);z-index:-1}
.ballet-figure:after{content:'';position:absolute;width:45%;height:22px;left:28%;bottom:72px;background:#b9b6b826;filter:blur(17px);border-radius:50%;z-index:-1}
#ballet-model{position:absolute;inset:0 0 45px;mask-image:linear-gradient(#000 83%,#0009 95%,transparent)}
#ballet-model canvas{width:100%;height:100%;display:block;opacity:.96}
#ballet-loading{position:absolute;top:48%;width:100%;text-align:center;font-size:11px;color:#767873}
#ballet-loading[hidden]{display:none}
#ballet-rotation{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);background:none;border:0;border-bottom:1px solid #ddd;padding:4px 0;font:10px var(--sans);color:#777;cursor:pointer}
#ballet-rotation:disabled{visibility:hidden}
.ballet-caption{position:absolute;left:0;bottom:15px;font:italic 13px var(--serif);color:#92938e}
.ballet-journal{max-width:400px;width:100%;min-width:0;padding:55px 0 20px}
.ballet-eyebrow{text-transform:uppercase;font-size:9px;letter-spacing:.16em;color:#777b76}
.ballet-journal h2{font:400 clamp(45px,5vw,72px)/1.03 var(--serif);letter-spacing:-.04em;margin:22px 0;color:#666a65}
.ballet-journal h2 em{font-weight:400}
.ballet-intro{font-size:12px;line-height:2.1;color:#787c76;margin:0 0 30px}

/* ---------- frosted panels ---------- */
.practice-shell{position:relative;width:min(344px,100%);border-radius:30px;padding:22px 20px 20px;
  background:linear-gradient(176deg,#fdfdfcf2,#f2f2f1f2);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px #7a7e8514,0 22px 44px -30px #5b5f6659;
  backdrop-filter:blur(14px);overflow:hidden}
.practice-shell>*{position:relative;z-index:1}
.practice-shell:before{content:'';position:absolute;z-index:0;inset:-28% -18% auto -18%;height:86%;
  background:radial-gradient(56% 64% at 72% 34%,#e4e6ea,transparent 72%);filter:blur(26px);pointer-events:none}
.practice-ask{margin:0 0 4px;font-size:11px;text-align:center;color:#7b7f86}
.practice-ask #practice-ask-day{color:#4c5057}
.practice-back{margin-left:8px;font:inherit;font-size:10px;color:#8e929a;background:none;border:0;border-bottom:1px solid #b9bcc2;padding:0 0 1px;cursor:pointer}
.practice-back:hover{color:#4c5057;border-color:#4c5057}
.practice-back[hidden]{display:none}
.practice-totals i{font-style:normal}

/* ---------- the dial: pivot on top, the scale hanging below ---------- */
.practice-dial{position:relative;width:100%;touch-action:none;cursor:grab}
.practice-dial:active{cursor:grabbing}
.practice-dial svg{display:block;width:100%;height:auto;overflow:visible}
.dial-bloom{fill:url(#dialBloom)}
.dial-arc{fill:none;stroke:url(#dialSheen);stroke-width:.9;stroke-dasharray:1 5}
#dial-ticks line{stroke:url(#dialSheen);stroke-width:.8}
#dial-ticks line.major{stroke-width:1.2}
#dial-labels{font:400 8.5px var(--sans);fill:#a4a7ad;letter-spacing:.02em}
#dial-labels text{text-anchor:middle}
.dial-needle{stroke:#b3b6bb;stroke-width:.9}
.dial-bead{fill:url(#beadSheen);filter:drop-shadow(0 1px 2px #6e727a4d)}
.dial-range{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;pointer-events:none;margin:0}
.practice-add{position:absolute;left:50%;top:calc(24 / 198 * 100%);transform:translate(-50%,-50%);
  width:34px;height:34px;border:0;border-radius:50%;background:#15161a;color:#fff;cursor:pointer;
  box-shadow:0 4px 12px -2px #15161a4d;transition:transform .25s,background .25s}
.practice-add span{font:300 21px/1 var(--sans)}
.practice-add:hover{background:#000;transform:translate(-50%,-50%) scale(1.08)}
.practice-add:disabled{opacity:.45;cursor:default}
.dial-range:focus-visible~.practice-add{outline:1px solid #15161a;outline-offset:4px}
.dial-readout{display:flex;flex-direction:column;align-items:center;margin-top:2px;pointer-events:none}
.dial-readout output{font:400 40px/1 var(--serif);font-variant-numeric:tabular-nums;
  background:linear-gradient(168deg,#43474e 6%,#767b83 44%,#aeb2b9 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dial-readout>span{font-size:9px;letter-spacing:.03em;margin-top:8px;color:#83878e}
.practice-add-label{display:block;text-align:center;font-size:9px;color:#9498a0;margin-top:12px}

.practice-totals{display:flex;gap:20px;flex-wrap:wrap;font-size:10px;margin:26px 0 0;color:#7e8378}
.practice-totals b{font-weight:400;color:#555d50;font-variant-numeric:tabular-nums}
.practice-feedback{min-height:30px;display:flex;align-items:baseline;gap:15px;font-size:9px;color:#85897f}
.practice-feedback p{margin:8px 0}
.practice-feedback button{font:inherit;color:#676f61;background:none;border:0;border-bottom:1px solid #c9cdc4;padding:0;cursor:pointer}

/* ---------- the calendar: pick any day, colour carries the practice ---------- */
.practice-calendar{margin-top:14px;--cell:#D4DFF0;--bead:#A85433;--ink-ring:#1b1c20}
.practice-calendar header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.cal-nav{display:flex;align-items:center;gap:4px}
.cal-nav button{width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:50%;background:#7a7e8514;color:#5f636a;font-size:13px;line-height:1;cursor:pointer;transition:background .2s}
.cal-nav button:hover:not(:disabled){background:#7a7e8526}
.cal-nav button:disabled{opacity:.3;cursor:default}
.cal-pickers{display:flex;align-items:center;gap:3px;border-radius:999px;background:#ffffffa6;box-shadow:inset 0 0 0 1px #7a7e851f;padding:3px 4px}
.cal-pickers select{appearance:none;border:0;background:none;font:inherit;font-size:11px;color:#4f545b;padding:1px 4px;border-radius:999px;cursor:pointer}
.cal-pickers select:focus-visible{outline:1px solid #7a7e85;outline-offset:1px}
.practice-streak{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#9498a0;white-space:nowrap}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-head{font:italic 400 10px/1 var(--serif);text-align:center;color:#9aa1ad;padding-bottom:7px}
.cal-pad{aspect-ratio:1}
.cal-day{appearance:none;border:0;padding:0;font:inherit;cursor:pointer;position:relative;aspect-ratio:1;border-radius:7px;
  background:var(--cell);display:grid;place-items:center;transition:background .2s,box-shadow .2s,transform .2s}
.cal-day:hover:not(:disabled){background:#C6D4EA;transform:translateY(-1px)}
.cal-day.future{background:none;box-shadow:inset 0 0 0 1px #aab4c61f;cursor:default}
.cal-day.today{box-shadow:inset 0 0 0 1.5px #92A6C4}
.cal-day.chosen{box-shadow:inset 0 0 0 2px var(--ink-ring);transform:translateY(-1px)}
.cal-day.chosen:hover{transform:translateY(-1px)}
.cal-day:focus-visible{outline:2px solid var(--ink-ring);outline-offset:2px}
.cal-day i,.calendar-legend i{display:block;width:var(--d,0);height:var(--d,0);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#C4744B 0,var(--bead) 58%,#8E4026 100%)}
.cal-day i{transition:width .4s cubic-bezier(.2,.7,.2,1),height .4s cubic-bezier(.2,.7,.2,1)}
.practice-calendar footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.practice-summary{margin:0;font:italic 400 12.5px/1.5 var(--serif);color:#6d7076}
.practice-summary b{font-weight:400;font-style:normal;color:#4c5057;font-variant-numeric:tabular-nums}
.calendar-legend{display:flex;align-items:center;gap:5px}
.calendar-legend i{opacity:.85}

/* Work covers that are video rather than still. */
.work .fig video{width:100%;height:100%;object-fit:cover;display:block}
.dialog-figure video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dialog-figure:has(video){background:#f5edd9}

@media(max-width:760px){
 .ballet-practice{padding:35px 0 60px}
 .ballet-mast{font-size:9px}.ballet-mast>span:last-child{font-size:8px}
 .ballet-layout{grid-template-columns:1fr;gap:0;min-height:0}
 .ballet-figure{height:470px;max-width:450px;width:100%;margin:auto}
 .ballet-journal{padding:30px 0 0;margin:auto;max-width:344px}
 .ballet-journal h2{font-size:52px}.ballet-journal h2 br{display:none}.ballet-journal h2 em:before{content:' '}
 .ballet-intro{margin-bottom:24px}
 .ballet-figure:after{bottom:55px}
 .ballet-caption{left:8px}
 #ballet-model{inset:0 0 36px}
 .practice-shell{border-radius:26px;padding:20px 16px 18px}
 .practice-totals{gap:17px}
 .practice-calendar header{flex-wrap:wrap;gap:8px}
 .practice-calendar footer{flex-wrap:wrap;gap:8px}
 .cal-day{border-radius:6px}
}
@media(prefers-reduced-motion:reduce){.practice-add,.cal-day,.cal-day i,.cal-nav button{transition:none}}

/* The running total, set large: the number that makes the next practice worth doing. */
.practice-hero{margin:0 0 30px}
.practice-hero-label{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#777b76}
.practice-hero-time{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:12px 0 8px;font-variant-numeric:tabular-nums}
.practice-hero-time b{font:400 clamp(72px,8vw,112px)/.86 var(--serif);letter-spacing:-.045em;
  background:linear-gradient(168deg,#2c2f35 6%,#6e727a 50%,#aeb2b9 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.practice-hero-time b.minutes{font-size:clamp(40px,4.2vw,58px)}
.practice-hero-time i{font-style:normal;font-size:13px;letter-spacing:.04em;color:#6d7076;margin-right:6px}
.practice-hero-since{font:italic 400 14px/1.4 var(--serif);color:#80848b}
@media(max-width:760px){.practice-hero{margin-bottom:26px}.practice-hero-time b{font-size:84px}.practice-hero-time b.minutes{font-size:44px}}