/* WordWise's paper, ink, and playful color continue beyond the home page. */
.page[data-page-mood]{--scene-accent:#536dac;--scene-soft:color-mix(in srgb,var(--scene-accent) 23%,var(--card))}
.page[data-page-mood=study]{--scene-accent:#477557}.page[data-page-mood=learn]{--scene-accent:#a86544}.page[data-page-mood=progress]{--scene-accent:#7e5e9f}.page[data-page-mood=collection]{--scene-accent:#927029}.page[data-page-mood=social]{--scene-accent:#447983}.page[data-page-mood=profile]{--scene-accent:#547243}.page[data-page-mood=settings]{--scene-accent:#766896}.page[data-page-mood=help]{--scene-accent:#a36356}.page[data-page-mood=admin]{--scene-accent:#5e768a}
.page[data-page-mood]>.page-heading{min-height:172px;margin:0 0 24px;padding:28px 220px 28px 28px;display:flex;align-items:center;border:1px solid color-mix(in srgb,var(--scene-accent) 23%,var(--line));border-radius:24px;background:radial-gradient(ellipse at 85% 50%,color-mix(in srgb,var(--scene-accent) 21%,transparent),transparent 62%),linear-gradient(125deg,color-mix(in srgb,var(--scene-accent) 8%,var(--card)),var(--card));isolation:isolate;box-shadow:0 8px 0 -4px color-mix(in srgb,var(--scene-accent) 15%,transparent);overflow:hidden}
.page[data-page-mood]>.page-heading:after{width:78px;left:28px;bottom:20px;height:4px;background:var(--scene-accent)}
.page[data-page-mood]>.page-heading:before{content:'';position:absolute;right:22px;inset-block:12px;width:200px;background-image:radial-gradient(color-mix(in srgb,var(--scene-accent) 25%,transparent) 1px,transparent 1px);background-size:14px 14px;mask-image:linear-gradient(90deg,transparent,#000);z-index:-1;pointer-events:none}
.page[data-page-mood] .page-heading .eyebrow{color:var(--scene-accent);margin-bottom:10px}.page[data-page-mood] .page-heading h1{font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.13;margin:0 0 10px;letter-spacing:-1.2px}.page[data-page-mood] .page-heading .lede{margin:0;max-width:580px;font-size:.86rem;line-height:1.6}.page-scene{position:absolute;right:26px;top:50%;transform:translateY(-50%) rotate(3deg);width:180px;height:160px;pointer-events:none}.page-scene svg{width:100%;height:100%}
.page[data-page-mood] .panel:not(.planner-calendar-panel):not(.profile-card):not(.practice-card){border-color:color-mix(in srgb,var(--scene-accent) 17%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--scene-accent) 6%,var(--card)),var(--card) 65%)}
.page[data-page-mood] .panel h2{font-family:var(--sans);letter-spacing:-.4px}.page[data-page-mood] :is(.stat-card,.overview-card,.memory-stat,.achievement-card,.task-card,.rank-card,.shop-card,.item-card,.ww-club-card){border-radius:18px;border-color:color-mix(in srgb,var(--scene-accent) 20%,var(--line));background:linear-gradient(155deg,color-mix(in srgb,var(--scene-accent) 10%,var(--card)),var(--card));box-shadow:var(--surface-shadow)}
.page[data-page-mood] :is(.stat-card,.overview-card,.achievement-card,.task-card):nth-child(3n+2){background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 11%,var(--card)),var(--card))}.page[data-page-mood] :is(.stat-card,.overview-card,.achievement-card,.task-card):nth-child(3n+3){background:linear-gradient(150deg,color-mix(in srgb,#8bac88 12%,var(--card)),var(--card))}
.page[data-page-mood] .empty-card,.page[data-page-mood] .empty-state{border:1px dashed color-mix(in srgb,var(--scene-accent) 30%,var(--line));background:color-mix(in srgb,var(--scene-accent) 5%,var(--card))}
/* Menus retain keyboard support and use the browser's top layer to avoid clipping. */
.custom-select{min-width:0}.custom-select .select-trigger{border-radius:11px;padding:0 13px;min-height:42px;border:1px solid color-mix(in srgb,var(--scene-accent,var(--green)) 22%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--scene-accent,var(--green)) 5%,var(--card)),var(--card));box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 4%,transparent);font:600 .78rem/1.3 var(--sans);gap:16px;cursor:pointer}
.custom-select .select-trigger>span:last-child{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:6px;background:color-mix(in srgb,var(--scene-accent,var(--green)) 10%,var(--card));color:var(--scene-accent,var(--green));font-size:16px}
.custom-select.open .select-trigger{border-color:var(--scene-accent,var(--green));box-shadow:0 0 0 3px color-mix(in srgb,var(--scene-accent,var(--green)) 12%,transparent)}.custom-select .select-trigger:disabled{opacity:.5;cursor:not-allowed}
.custom-select .select-options{border-radius:14px;padding:7px;gap:4px;border:1px solid color-mix(in srgb,var(--scene-accent,var(--green)) 25%,var(--line));background:var(--card);box-shadow:0 16px 40px color-mix(in srgb,var(--ink) 17%,transparent),0 4px 10px color-mix(in srgb,var(--ink) 8%,transparent);scrollbar-width:thin;overscroll-behavior:contain}
.custom-select .select-options.select-floating{position:fixed;inset:auto;margin:0;max-width:calc(100vw - 24px);box-sizing:border-box;z-index:1000;transform:none!important;animation:none!important}
.custom-select .select-options [role=option]{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;min-height:40px;padding:10px 12px;color:var(--ink);font:500 .78rem/1.4 var(--sans);cursor:pointer;white-space:normal;text-align:left}
.custom-select .select-options [role=option]:after{content:'';width:16px;flex:none}.custom-select .select-options [aria-selected=true]:after{content:'✓';font-weight:800}.custom-select .select-options [aria-selected=true]{background:color-mix(in srgb,var(--scene-accent,var(--green)) 13%,var(--card));color:var(--scene-accent,var(--green));font-weight:750}.custom-select .select-options [role=option]:hover,.custom-select .select-options [role=option]:focus-visible{background:color-mix(in srgb,var(--scene-accent,var(--green)) 8%,var(--card));outline-offset:-2px}
select:not(.sr-only){appearance:none;background:linear-gradient(45deg,transparent 50%,var(--muted) 50%) calc(100% - 17px) 50%/5px 5px no-repeat,linear-gradient(135deg,var(--muted) 50%,transparent 50%) calc(100% - 12px) 50%/5px 5px no-repeat,var(--card);padding:10px 32px 10px 12px;border:1px solid var(--line);border-radius:11px;color:var(--ink);font:600 .78rem var(--sans);min-height:42px}
/* A colorful time canvas, with proportional event heights and rounded rectangles. */
#page-planner .planner-summary{gap:16px}#page-planner .planner-summary article{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--scene-accent) 22%,var(--line));border-top:4px solid var(--scene-accent);padding:22px;background:linear-gradient(125deg,color-mix(in srgb,var(--scene-accent) 13%,var(--card)),var(--card));box-shadow:var(--surface-shadow)}
#page-planner .planner-summary article:after{content:'✳';position:absolute;right:12px;bottom:-18px;font-size:100px;color:color-mix(in srgb,var(--scene-accent) 12%,transparent);pointer-events:none}#page-planner .planner-summary article:nth-child(2){--scene-accent:#b18b48}#page-planner .planner-summary article:nth-child(3){--scene-accent:#628e72}#page-planner .planner-summary strong{position:relative;z-index:1}
.planner-calendar-shell{grid-template-columns:210px minmax(0,1fr)}.planner-calendar-sidebar{border-top:4px solid var(--scene-accent)!important}.planner-calendar-sidebar>summary{color:var(--scene-accent);font-size:.85rem}.planner-calendar-heading{padding:22px;background:radial-gradient(ellipse at 80% 0%,color-mix(in srgb,var(--scene-accent) 16%,transparent),transparent 75%),var(--card);border-bottom:1px solid var(--line)}.planner-calendar-heading .eyebrow{color:var(--scene-accent)}.planner-calendar-actions{gap:6px}.planner-calendar-actions .custom-select{width:112px}.planner-calendar-actions .select-trigger{min-height:36px;height:36px;font-size:.73rem}
.planner-mini-grid{gap:3px}.planner-mini-grid .text-button{border-radius:7px!important;min-height:26px;padding:4px 0;width:100%;box-sizing:border-box;font-size:.72rem;display:grid;place-items:center;border:1px solid transparent;background:color-mix(in srgb,var(--scene-accent) 4%,var(--card))}.planner-mini-grid .is-today{border-color:var(--scene-accent);box-shadow:none;font-weight:750}.planner-mini-grid .is-selected{background:var(--scene-accent);color:#fff;box-shadow:0 3px 5px color-mix(in srgb,var(--scene-accent) 18%,transparent)}
.planner-time-head{background:color-mix(in srgb,var(--scene-accent) 5%,var(--card))}.planner-time-head .text-button{border-radius:9px!important;min-width:45px;background:var(--card);box-shadow:0 2px 0 color-mix(in srgb,var(--scene-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--scene-accent) 12%,var(--line));padding:6px 10px;margin:2px auto}.planner-time-head strong{color:var(--scene-accent);font-size:1.1rem;line-height:1.4}.planner-time-head .is-today .text-button{background:var(--scene-accent);color:white;border-color:var(--scene-accent)}.planner-time-head .is-today strong{background:none;color:white;border-radius:8px!important;width:auto;height:auto;line-height:1.4;margin:0}.planner-time-body{height:2520px}.planner-time-day{background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--calendar-hour) - 1px),color-mix(in srgb,var(--scene-accent) 11%,var(--line)) calc(var(--calendar-hour) - 1px),color-mix(in srgb,var(--scene-accent) 11%,var(--line)) var(--calendar-hour))}.planner-time-day:nth-child(even){background-color:color-mix(in srgb,var(--scene-accent) 2%,var(--card))}.planner-slot{height:var(--calendar-hour);border-radius:0!important}.planner-hours{z-index:2}.planner-hours time{font-family:var(--sans);font-size:.6rem}.planner-time-scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--scene-accent) 40%,var(--line)) transparent}
.planner-event{--event-accent:#6081b9;border:1px solid color-mix(in srgb,var(--event-accent) 40%,var(--line));border-left:3px solid var(--event-accent);border-radius:7px!important;background:linear-gradient(125deg,color-mix(in srgb,var(--event-accent) 20%,var(--card)),color-mix(in srgb,var(--event-accent) 11%,var(--card)));padding:3px 4px;gap:2px;color:var(--ink);box-shadow:0 2px 3px color-mix(in srgb,var(--event-accent) 8%,transparent)}.planner-event[data-event-color="1"]{--event-accent:#9d78b1}.planner-event[data-event-color="2"]{--event-accent:#b58b48}.planner-event[data-event-color="3"]{--event-accent:#658f70}.planner-event[data-event-color="4"]{--event-accent:#b47868}.planner-event time{font:650 .57rem/1.2 var(--sans);white-space:normal;flex-shrink:0}.planner-event strong{font:750 .69rem/1.25 var(--sans)}.planner-event:hover{filter:brightness(.97);border-color:var(--event-accent)}.planner-time-day>.planner-event[style*="height:14px"] time{display:block}
.planner-event.busy{--event-accent:#85919e;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--event-accent) 11%,var(--card)) 0 5px,color-mix(in srgb,var(--event-accent) 17%,var(--card)) 5px 6px);border-color:var(--line);border-left-color:var(--event-accent)}.planner-event.done{opacity:.72}.planner-event.deadline{--event-accent:#b2755e;border-left-color:var(--event-accent);background:color-mix(in srgb,var(--event-accent) 12%,var(--card))}.planner-deadline-strip time{display:block}.planner-deadline-strip .planner-event{padding:4px}.planner-now{background:#d58358}.planner-now:before{background:#d58358}
.planner-month-day{min-height:145px}.planner-month-day>.text-button:first-child{width:29px;height:29px;display:grid;place-items:center;border-radius:7px!important;border:1px solid color-mix(in srgb,var(--scene-accent) 10%,var(--line));background:var(--card)}.planner-month-day.is-today>.text-button:first-child{background:var(--scene-accent);color:#fff;border-radius:7px!important}.planner-month-day>.planner-event{display:flex;white-space:normal;padding:4px;gap:3px}.planner-month-day .planner-event time{display:block;font-size:.54rem}.planner-month-label{background:color-mix(in srgb,var(--scene-accent) 5%,var(--card));font-weight:650}.planner-month-day:nth-child(even){background-color:color-mix(in srgb,var(--scene-accent) 2%,var(--card))}
.planner-session .planner-event time{font-size:.75rem}.planner-calendar-hint{background:color-mix(in srgb,var(--scene-accent) 6%,var(--card));font-size:.75rem}.planner-assignment{padding:18px!important;margin:14px 0;border:1px solid var(--line)!important;border-left:4px solid var(--scene-accent)!important;border-radius:14px;background:var(--card)}.planner-busy{border-left:4px solid #85919e;border-radius:10px;padding:12px 14px;background:color-mix(in srgb,#85919e 8%,var(--card))}.planner-reminder-card label:has(.custom-select){min-width:0}.planner-reminder-card .custom-select{width:100%;margin:8px 0}.planner-reminder-card [data-reminder-status]:empty{display:none}.planner-reminder-card [data-reminder-status]{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--card);overflow-wrap:anywhere}.planner-reminder-card .reminder-help{font-size:.72rem}.reminder-device-actions{display:flex;gap:8px;flex-wrap:wrap}.reminder-device-actions .button{min-height:36px}
@media(max-width:1100px){.planner-calendar-shell{grid-template-columns:minmax(0,1fr)}.planner-reminder-card .custom-select{max-width:185px}}
@media(max-width:700px){.page[data-page-mood]>.page-heading{padding:24px 105px 28px 20px;min-height:154px;border-radius:20px}.page-scene{width:103px;height:110px;right:6px;opacity:.85}.page[data-page-mood]>.page-heading:before{width:100px;right:0}.page[data-page-mood]>.page-heading:after{left:20px;bottom:16px;width:50px}.page[data-page-mood] .page-heading h1{font-size:1.7rem;letter-spacing:-.7px}.page[data-page-mood] .page-heading .lede{font-size:.76rem}.page[data-page-mood] .page-heading .eyebrow{font-size:.55rem;letter-spacing:1px}#page-planner .planner-summary{gap:8px}#page-planner .planner-summary article{padding:14px}#page-planner .planner-summary article:after{font-size:62px;right:0}.planner-calendar-heading{padding:16px}.planner-month-day{min-height:122px}.planner-month-day .planner-event time{font-size:.52rem}.planner-month-day .planner-event strong{font-size:.6rem}.planner-calendar-sidebar .custom-select .select-trigger{font-size:.7rem;padding:0 9px}.planner-reminder-card{display:block}.planner-reminder-card .custom-select{max-width:100%}.reminder-device-actions .button{width:100%}}
[data-theme=high-contrast] .page[data-page-mood]>.page-heading,[data-theme=high-contrast] .page[data-page-mood] .panel,[data-theme=high-contrast] #page-planner .planner-summary article,[data-theme=high-contrast] .planner-event,[data-theme=high-contrast] .custom-select .select-trigger{background:var(--card);border-color:var(--ink);color:var(--ink)}[data-theme=high-contrast] .page-scene{display:none}[data-theme=high-contrast] .page[data-page-mood]>.page-heading:before{display:none}[data-theme=high-contrast] .select-options [aria-selected=true]{outline:2px solid var(--ink);outline-offset:-2px}

.custom-select{border-radius:11px}.planner-time-day>.planner-event{padding:4px 5px;gap:3px}.planner-time-day>.planner-event time{font-size:.69rem;line-height:1.2}.planner-time-day>.planner-event strong{font-size:.78rem;line-height:1.25}.planner-time-day>.planner-event[data-event-compact=true]{padding:1px 4px;gap:1px}.planner-time-day>.planner-event[data-event-compact=true] time{font-size:.55rem;line-height:10px}.planner-time-day>.planner-event[data-event-compact=true] strong{font-size:.66rem;line-height:11px}

.page[data-page-mood] .page-heading .eyebrow,.planner-calendar-heading .eyebrow,.planner-calendar-sidebar>summary,.custom-select .select-options [aria-selected=true]{color:color-mix(in srgb,var(--scene-accent,var(--green)) 70%,var(--ink))}
.planner-time-day>.planner-event:not([data-event-compact=true]) strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere}
#page-settings .setting-row:has([data-setting=boldText]){align-items:center;gap:16px;flex-wrap:wrap}
@media(max-width:700px){#page-planner[data-calendar-mode=month] #planner-agenda{overflow-x:auto;overscroll-behavior:contain}#page-planner[data-calendar-mode=month] .planner-month{min-width:620px}.planner-month-day .planner-event time{font-size:.58rem}.planner-month-day .planner-event strong{font-size:.68rem}}

.planner-calendar-sidebar{display:block!important}.planner-calendar-sidebar>summary{margin-bottom:14px}.planner-sidebar-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.planner-sidebar-body>label{display:grid;gap:6px}.planner-sidebar-body .planner-layers{grid-column:auto;grid-row:auto}.planner-sidebar-body #planner-reminders{min-width:0}.planner-sidebar-body .planner-layer-note{margin:0}
@media(min-width:601px) and (max-width:1100px){.planner-sidebar-body{grid-template-columns:180px minmax(0,1fr);gap:12px 24px}.planner-sidebar-body>label,.planner-sidebar-body #planner-mini-month{grid-column:1}.planner-sidebar-body .planner-layers{grid-column:2;grid-row:1/3}.planner-sidebar-body .planner-layer-note,.planner-sidebar-body #planner-reminders{grid-column:1/-1}}
@media(max-width:600px){#page-planner .planner-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#page-planner .planner-toolbar .button{width:100%;padding:9px 11px;font-size:.73rem}#page-planner .planner-toolbar .button:first-child{grid-column:1/-1}.planner-sidebar-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.planner-sidebar-body>label,.planner-sidebar-body .planner-layer-note,.planner-sidebar-body #planner-reminders{grid-column:1/-1}.planner-sidebar-body #planner-mini-month{grid-column:1;align-self:start}.planner-sidebar-body .planner-layers{grid-column:2;grid-row:2;margin:10px 0}.planner-mini-grid{gap:2px}.planner-mini-grid .text-button{font-size:.66rem;min-height:25px}.planner-reminder-card .reminder-device-actions{display:grid;grid-template-columns:1fr}.planner-reminder-card .reminder-help{font-size:.75rem}}