.cw-page { --workshop-accent:#b968ff; background:#080b16; letter-spacing:0; }
.cw-layout { width:min(1160px,100%); }
.clock-workshop-page .cw-page { background:transparent; }
.clock-workshop-page .game-audio-button { display:none; }
.clock-workshop-page.game-mode-active .ninabella-game-content { overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:52px 4px 12px; }
.clock-workshop-page.game-mode-active .game-close-button { display:grid; }
.clock-workshop-page.game-mode-active .game-mode-toggle { display:none; }
.cw-heading { margin:0 0 24px; }
.cw-heading p { margin:0 0 6px; color:#25d7ff; font-size:14px; font-weight:800; }
.cw-heading h1 { margin:0; font-size:38px; line-height:1.15; }
.cw-page button,.cw-page select,.cw-page input { font:inherit; }
.cw-page button { min-height:46px; padding:10px 16px; border:1px solid #566178; border-radius:8px; background:#111526; color:#f6f7ff; font-weight:750; cursor:pointer; }
.cw-page button:hover { border-color:#b968ff; background:#1c2030; }
.cw-page button:focus-visible,.cw-page input:focus-visible,.cw-page select:focus-visible,.cw-clock:focus-visible { outline:3px solid #ffe66d; outline-offset:4px; }
.cw-page button:disabled { cursor:default; opacity:.55; }
.cw-page [hidden] { display:none!important; }
.cw-modes { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.cw-modes button[aria-pressed="true"] { color:#080b16; background:#ffe66d; border-color:#ffe66d; }
.cw-explain { margin-bottom:20px; }
.cw-lesson { max-width:420px; border:1px solid #b968ff; border-radius:8px; padding:20px; background:#111526; }
.cw-lesson-heading,.cw-lesson-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.cw-lesson-heading { margin-bottom:8px; color:#cbd4ed; }
.cw-lesson-heading button { width:44px; height:44px; padding:0; font-size:26px; }
.cw-lesson-clock { width:min(240px,100%); aspect-ratio:1; margin:12px auto; }
.cw-lesson-clock svg { display:block; width:100%; height:100%; }
.cw-lesson-clock .cw-hour-mark { fill:#f6f7ff; }
.cw-lesson-copy { min-height:190px; }
.cw-lesson-copy p { line-height:1.6; margin:0 0 14px; }
.cw-lesson-example { color:#ffe66d; font-weight:800; font-size:20px; }
.cw-page[data-lesson="true"] .cw-clock-area,.cw-page[data-lesson="true"] .cw-toolbar { display:none; }
.cw-page[data-lesson="true"] .cw-workspace { grid-template-columns:minmax(0,1fr); padding-top:0; }
.cw-page[data-lesson="true"] .cw-activity { width:100%; max-width:420px; margin-inline:auto; padding-top:0; }
.cw-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid #35415a; }
.cw-toolbar-field { display:flex; align-items:center; gap:12px; min-width:0; max-width:100%; }
.cw-toolbar label { color:#bfc9df; font-weight:700; }
.cw-toolbar select { min-width:0; max-width:100%; min-height:44px; padding:8px 34px 8px 12px; border:1px solid #566178; border-radius:6px; background:#111526; color:#f6f7ff; }
.cw-toolbar select:disabled { opacity:.5; color:#9aa4b8; background:#0c101c; border-color:#303647; border-style:dashed; box-shadow:none; cursor:not-allowed; }
.cw-toolbar select:enabled { border-color:#25d7ff; box-shadow:0 0 0 1px rgb(37 215 255 / 25%),0 0 12px rgb(37 215 255 / 20%); cursor:pointer; }
#cwProgress { margin-left:auto; color:#54d68d; font-weight:750; font-variant-numeric:tabular-nums; }
.cw-workspace { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:40px; padding-top:28px; align-items:start; }
.cw-clock-area,.cw-activity { min-width:0; }
.cw-face-picker { display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
.cw-face-picker button[aria-pressed="true"],.cw-period button[aria-pressed="true"] { background:#b968ff; border-color:#b968ff; color:#080b16; }
.cw-clock[data-face="hours"] .cw-minute-mark,.cw-clock[data-face="minutes"] .cw-hour-mark,.cw-clock[data-face="minutes"] .cw-afternoon-mark { display:none; }
.cw-clock[data-ring="hands"] .cw-afternoon-mark,.cw-clock[data-ring="am"] .cw-afternoon-mark,.cw-clock[data-ring="pm"] .cw-hour-mark { display:none; }
.cw-day-context { display:flex; align-items:center; gap:18px; margin:0 0 20px; }
.cw-day-context img { display:block; flex:0 0 100px; width:100px; height:100px; object-fit:contain; border-radius:6px; }
.cw-day-context>div { min-width:0; }
.cw-day-context p { margin:0 0 5px; color:#ffe66d; font-size:23px; font-weight:800; line-height:1.25; }
.cw-day-context span { color:#cbd4ed; line-height:1.4; }
.cw-period { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
.cw-period button { font-size:15px; }
.cw-period button span { white-space:nowrap; }
.cw-day { border-top:1px solid #35415a; margin-top:36px; padding-top:24px; }
.cw-day h2 { margin:0 0 12px; font-size:23px; color:#25d7ff; }
.cw-day p { max-width:80ch; margin:0; color:#cbd4ed; line-height:1.7; }
.cw-clock { width:100%; aspect-ratio:1; position:relative; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.cw-clock svg { display:block; width:100%; height:100%; overflow:visible; }
.cw-clock[data-interactive="true"] { cursor:grab; }
.cw-clock[data-dragging="true"] { cursor:grabbing; }
.cw-clock text { pointer-events:none; }
.cw-clock .cw-hour-mark { fill:#f6f7ff; }
.cw-hand-picker { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:16px; }
.cw-hand-picker span { display:flex; align-items:center; gap:7px; min-height:44px; }
.cw-hand-picker i { width:10px; height:22px; border-radius:2px; }
.cw-red { background:#f20d0d; }
.cw-blue { background:#0d79f2; }
.cw-activity { padding-top:12px; }
.cw-activity h2 { font-size:25px; margin:0 0 14px; color:#25d7ff; }
.cw-prompt { margin:0 0 20px; min-height:3em; font-size:20px; line-height:1.5; }
.cw-time { margin:0 0 24px; padding:16px 0; border-block:1px solid #35415a; }
.cw-time output { display:block; font-size:48px; line-height:1.15; font-weight:800; color:#ffe66d; font-variant-numeric:tabular-nums; }
.cw-time p { margin:8px 0 0; color:#f6f7ff; font-size:23px; font-weight:700; }
.cw-adjust,.cw-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.cw-presets button { color:#b968ff; border-color:#b968ff; }
.cw-page .cw-primary { background:#25d7ff; color:#080b16; border-color:#25d7ff; }
.cw-page .cw-primary:hover { background:#8aebff; }
.cw-answer { display:flex; align-items:end; gap:10px; margin-bottom:16px; }
.cw-answer label { display:grid; gap:8px; color:#bfc9df; font-weight:700; }
.cw-answer input { width:100px; max-width:100%; min-height:58px; border:2px solid #566178; border-radius:6px; background:#111526; color:#fff; text-align:center; font-size:28px; font-variant-numeric:tabular-nums; }
.cw-answer>span { font-size:32px; line-height:58px; }
.cw-feedback { min-height:3em; line-height:1.5; margin:20px 0 8px; color:#ffe66d; }
.cw-feedback.success { color:#54d68d; }
.cw-actions { display:flex; flex-wrap:wrap; gap:10px; }
.cw-help { border-left:3px solid #b968ff; padding:8px 0 8px 16px; color:#cbd4ed; line-height:1.6; }
@media(max-width:760px) {
  .cw-workspace { grid-template-columns:1fr; gap:20px; }
  .cw-clock-area { width:min(460px,100%); margin-inline:auto; }
  .cw-activity { padding-top:0; }
  .cw-heading h1 { font-size:32px; }
  .cw-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cw-modes button { padding:8px; font-size:15px; }
  .cw-prompt { min-height:0; }
}

/* Activities share one horizontally scrollable row on narrow screens. */
.cw-page .cw-modes { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding:4px 4px 10px; }
.cw-modes > button,.cw-modes > a { flex:0 0 auto; white-space:nowrap; margin:0; }
.cw-modes > a { display:inline-flex; align-items:center; min-height:46px; box-sizing:border-box; padding:10px 16px; border:1px solid #566178; border-radius:8px; background:#111526; color:#f6f7ff; font-weight:750; text-decoration:none; }
.cw-modes > a:hover { border-color:#b968ff; background:#1c2030; }
.cw-modes > a:focus-visible { outline:3px solid #ffe66d; outline-offset:2px; }