/* Light practice controls: compact portrait composition over the native studio. */
html[data-preview-theme] .ys-class-builder-showcase .ycb{padding:30px;max-width:520px;margin-inline:auto;background-position:center!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel{width:100%;max-width:330px;min-height:470px;margin:0 auto;padding:0}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{align-self:center;padding:24px 0 0;margin-bottom:62px;width:100%;text-align:center}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-control{justify-content:center;gap:15px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls{padding:18px;border:1px solid #ffffffbd;border-radius:24px;background:#f4efeadb;box-shadow:inset 0 1px 0 #fff,0 12px 32px #35433e19;gap:12px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-adjust{width:44px;height:44px;background:#f4efeadb;border:1px solid #ffffffd9;box-shadow:inset 0 1px 1px #fff,0 4px 12px #35433e1f}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-practice-type{padding:8px 0 14px;border-top:0}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-practice-type>span{font-size:12px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-practice-type select{font-size:15px;max-width:62%}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-avatar{width:52px;height:52px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-teacher-options{gap:8px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-teachers{gap:8px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-practice{border-radius:18px;background:#ffffff70!important;border-color:#fff!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-adjust:hover{background:#ffffffbf!important}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html[data-preview-theme] .ys-class-builder-showcase .ycb :is(.ycb-controls,.ycb-adjust){background:linear-gradient(135deg,#ffffff8c,#ffffff42);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
}
@media(max-width:749px){html[data-preview-theme] .ys-class-builder-showcase .ycb{padding:24px 20px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel{min-height:440px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{padding-top:18px;margin-bottom:50px}}
@media(max-width:360px){html[data-preview-theme] .ys-class-builder-showcase .ycb{padding:20px 12px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls{padding:14px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-control{gap:10px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-value{min-width:105px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-value output{font-size:66px}}
@media(prefers-reduced-transparency:reduce){html[data-preview-theme] .ys-class-builder-showcase .ycb :is(.ycb-controls,.ycb-adjust){background:#f4efea;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Both themes share geometry; translucent material carries every time control. */
html[data-preview-theme] .ys-class-builder-showcase .ycb{background:#b8aaa0!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-atmosphere{display:block!important;object-position:50% 50%}
html[data-preview-theme] .ys-class-builder-showcase .ycb::before{display:block;background:linear-gradient(180deg,#faf5ee18,#faf5ee08 45%,#faf5ee22)}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{padding:18px 14px;margin-bottom:40px;border:1px solid #ffffffbd;border-radius:24px;background:#f4efea;box-shadow:inset 0 1px 0 #fff,0 12px 32px #35433e19}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-value output{font-size:68px;letter-spacing:-3px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-value{min-width:105px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-control{gap:12px}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb::before{background:linear-gradient(180deg,#20262d48,#20262d12 45%,#20262d45)}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb :is(.ycb-duration,.ycb-controls){background:#282d33;border-color:#ffffff5c;box-shadow:inset 0 1px 0 #ffffff3d,0 12px 32px #121c1826}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-practice{background:#ffffff16!important;border-color:#ffffff70!important}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-adjust{background:#ffffff20!important;border-color:#ffffff70!important}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html[data-preview-theme] .ys-class-builder-showcase .ycb :is(.ycb-duration,.ycb-controls){background:linear-gradient(135deg,#ffffffc4,#ffffffb3);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb :is(.ycb-duration,.ycb-controls){background:linear-gradient(135deg,#282d33dc,#282d33bf)}
}
@media(max-width:360px){html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{padding:16px 8px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-control{gap:8px}}
@media(prefers-reduced-transparency:reduce){html[data-preview-theme] .ys-class-builder-showcase .ycb :is(.ycb-duration,.ycb-controls,.ycb-adjust){background:#f4efea;-webkit-backdrop-filter:none;backdrop-filter:none}html[data-preview-theme=dark] .ys-class-builder-showcase .ycb :is(.ycb-duration,.ycb-controls,.ycb-adjust){background:#282d33!important}}
/* A tall portrait preview without hardware chrome. */
html[data-preview-theme] .ys-class-builder-showcase .ycb{width:100%;max-width:340px;padding:22px 18px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel{min-height:606px;max-width:302px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{padding:18px 10px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls{padding:16px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-control{gap:10px}
@media(max-width:749px){html[data-preview-theme] .ys-class-builder-showcase .ycb{max-width:320px;padding:20px 16px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel{min-height:568px}}
@media(max-width:360px){html[data-preview-theme] .ys-class-builder-showcase .ycb{padding:18px 12px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel{min-height:548px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls{padding:14px}html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{padding:16px 8px}}

/* Circular duration dial; the arc represents the selected minutes out of 60. */
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{position:relative;flex:none;width:208px;height:208px;max-width:100%;padding:0;margin:8px auto 28px;border:0;border-radius:50%;background:linear-gradient(135deg,#ffffffe0,#ffffffbf);box-shadow:inset 0 0 0 1px #ffffff91,0 8px 28px #22383018;backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke-width:6}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-ring-track{stroke:#4a9b7c26}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-ring-value{stroke:#45b88c;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-ring-handle{fill:#45b88c;stroke:#f3fcf9;stroke-width:3}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-label{position:absolute;top:43px;left:0;right:0;font-size:11px;line-height:1.3;color:#415f54!important;letter-spacing:.02em}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-control{height:100%;padding-top:11px;gap:2px;justify-content:center;align-items:center}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-value{min-width:76px;display:flex;flex-direction:column;align-items:center;gap:0}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-value output{font-size:58px;line-height:1.05;letter-spacing:-2px;color:#234236!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration-value>span{font-size:11px;line-height:1.4;color:#415f54!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-adjust{width:44px;height:44px;flex:0 0 44px;background:transparent!important;border:0;box-shadow:none;color:#347f62!important;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-adjust svg{width:16px;height:16px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-adjust:hover{background:#45b88c18!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-adjust:disabled{opacity:.3;cursor:default}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls{gap:8px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-practice-type{padding:8px 0 12px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-focus{border-top:0;padding:8px 0 12px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-focus select{max-width:70%;font-size:14px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-practice{min-height:50px;border:1px solid #ffffff30!important;border-radius:17px;color:#fff!important;background:linear-gradient(105deg,#30bd87,#51bd94)!important;box-shadow:inset 0 1px 0 #ffffff24,0 5px 14px #318a6824}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-practice :is(span,svg){color:#fff!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-practice:hover{filter:brightness(1.06)}
html[data-preview-theme] .ys-class-builder-showcase .ycb :is(button,select):focus-visible{outline:2px solid #45b88c;outline-offset:3px}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-duration{background:linear-gradient(135deg,#282d33ed,#282d33d9);border:0;box-shadow:inset 0 0 0 1px #ffffff38,0 8px 28px #101f1924}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-ring-track{stroke:#c4f0df38}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-ring-value{stroke:#abead2}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-ring-handle{fill:#abead2;stroke:#282d33}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-duration-value output{color:#fff!important}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb :is(.ycb-duration-label,.ycb-duration-value>span,.ycb-adjust){color:#e5f8f1!important}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-adjust:hover{background:#c4f0df1c!important}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-focus{border-color:#ffffff24}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb :is(button,select):focus-visible{outline-color:#c4f0df}
@media(max-width:360px){html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{margin-top:4px;margin-bottom:22px}}
@media(prefers-reduced-transparency:reduce){html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration{background:#eff7f4;backdrop-filter:none;-webkit-backdrop-filter:none}html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-duration{background:#282d33}}

html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls .ycb-practice{color:#fff!important;background:linear-gradient(105deg,#30bd87,#51bd94)!important;border-color:#ffffff30!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-adjust{background:transparent!important;border:0!important;color:#347f62!important}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-duration .ycb-adjust{color:#e5f8f1!important}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-adjust:hover{background:#45b88c18!important}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-duration .ycb-adjust:hover{background:#c4f0df1c!important}

/* Open duration ring: the native photograph stays visible through its centre. */
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel .ycb-duration{width:250px;height:250px;padding:0;margin:8px auto 24px;border:0;background:transparent!important;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-duration-ring{stroke-width:5;fill:none}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-ring-track{stroke:#e5e5e552;fill:none}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-ring-value{stroke:#fff;fill:none;filter:drop-shadow(0 1px 2px #141d1a30)}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-ring-handle{fill:#60d0a5;stroke:#ffffffd9;stroke-width:2}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-duration-label{top:57px;color:#fff!important;text-shadow:0 1px 4px #141d1a80;font-size:12px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-duration-control{padding-top:12px;gap:4px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-duration-value{min-width:92px}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-duration-value output{font-size:70px;color:#fff!important;text-shadow:0 2px 8px #141d1a66}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-duration-value>span{font-size:12px;color:#fff!important;text-shadow:0 1px 4px #141d1a80}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-adjust{color:#fff!important;filter:drop-shadow(0 1px 3px #141d1a66)}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-duration .ycb-adjust:hover{background:#ffffff18!important}
/* Thin glass keeps the studio visible beneath the lower controls. */
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel .ycb-controls{background:linear-gradient(135deg,#ffffff26,#ffffff0d);border-color:#ffffff52;box-shadow:inset 0 1px 0 #ffffff24,0 8px 24px #141d1a0d;backdrop-filter:blur(5px) saturate(1.05);-webkit-backdrop-filter:blur(5px) saturate(1.05)}
html[data-preview-theme=dark] .ys-class-builder-showcase .ycb .ycb-panel .ycb-controls{background:linear-gradient(135deg,#20242a30,#20242a14);border-color:#ffffff42}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls :is(.ycb-practice-type,.ycb-focus,.ycb-teachers,.ycb-more){color:#fff;text-shadow:0 1px 4px #141d1a80}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls :is(.ycb-practice-type,.ycb-focus)>span,html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls :is(select,summary){color:#fff!important;text-shadow:0 1px 4px #141d1a80}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-controls select option{color:#232f2a;background:#fff;text-shadow:none}
@media(max-width:360px){html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel .ycb-duration{margin-top:4px;margin-bottom:18px}}
@media(prefers-reduced-transparency:reduce){html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel .ycb-controls{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Shared saturated violet glass pill for practice playback actions. */
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel .ycb-controls .ycb-practice{border:1px solid #b9edd980!important;border-radius:999px!important;background:linear-gradient(180deg,#ffffff0d 0%,#ffffff00 46%),linear-gradient(115deg,#4fd3a0f5 0%,#41d099f5 52%,#38cd94f5 100%)!important;color:#fff!important;text-shadow:0 1px 2px #1b6c4d3d;box-shadow:inset 0 1px 0 #ffffff2b,inset 0 -1px 0 #228a623d,0 2px 0 #92e4c54d,0 4px 9px #20805b24;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel .ycb-controls .ycb-practice:hover{filter:brightness(1.04)}
html[data-preview-theme] .ys-class-builder-showcase .ycb .ycb-panel .ycb-controls .ycb-practice:active{filter:brightness(.97);box-shadow:inset 0 1px 3px #1b6c4d40,0 1px 0 #92e4c54d}