*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#5033a0,#081737 70%);color:white;font:17px/1.5 system-ui}main{max-width:1100px;margin:auto;padding:20px}h1{color:#8cf1ff}a{color:#83edff}section{background:#14265c;border:1px solid #69ddff;border-radius:18px;padding:18px;margin:18px 0}.notice{background:#59401c;border-radius:12px;padding:12px}label{display:inline-block;margin:8px;min-width:165px}input,select{display:block;padding:10px;background:#071534;color:white;border:1px solid #7ddfff;border-radius:10px;max-width:100%}button{margin:5px;padding:11px;border:1px solid #7eeaff;border-radius:12px;background:#2258aa;color:white;min-height:44px;cursor:pointer}button:focus-visible{outline:3px solid gold}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.widget{padding:16px;border-radius:15px;background:linear-gradient(125deg,#24509c,#492b89);border:1px solid #83dfff}canvas{background:white;width:100%;height:auto;touch-action:none;border-radius:12px}#result{font-size:clamp(24px,5vw,48px);font-weight:800;color:#a8f8ff;min-height:60px}body[data-theme=Clean]{background:#12253d}body[data-theme=Easy]{background:#17475a}body[data-theme=Easy] button{min-height:56px;font-size:19px}body[data-theme=Orbit]{background:#060d22}body[data-theme=Garden]{background:#0d3c40}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* dev.27 original grade-3 artwork, visual only; app controls remain live */
body[data-grade-art="3"]{background:#071735 url('/assets/holo/world-adventure-bg-1920.webp') center top / cover fixed no-repeat;}
body[data-grade-art="3"] main{background:linear-gradient(90deg,rgba(4,14,39,.93),rgba(4,14,39,.72));min-height:100vh;}
body[data-grade-art="3"] section,body[data-grade-art="3"] .widget{background:rgba(8,32,79,.88);backdrop-filter:blur(9px);border-color:#00dfff;}
@media(max-width:700px){body[data-grade-art="3"]{background-attachment:scroll;background-position:65% top;}}
/* R41: every control on My dashboard is at least 44px on touch screens */
@media (pointer:coarse),(max-width:720px){.widget button{min-width:44px;min-height:44px}#tf-grade-select{min-height:44px}main>a[href]{display:inline-flex;align-items:center;min-height:44px}}
@media (pointer:coarse),(max-width:720px){#grade-art-toggle{min-height:44px}}