[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:10001;padding:10px 14px;background:#ffffcc;color:#32124f;border:3px outset #eee;transform:translateY(-200%)}
.skip-link:focus{transform:none}
/* Keep fragment navigation visible without outlining the whole page. */
#main-content:focus{outline:none}
.admin-content{padding:20px;overflow-wrap:anywhere}
.admin-account{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#admin-activity{padding-left:24px;line-height:1.6}
#admin-activity time{text-transform:none}
/* Prevent long-press text selection inside the drawing workspace. */
.studio,.drawing-focus,.color-menu{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.prompt-date,.focus-date-value,.display-date{text-transform:none}
.history-button-text{padding:0}
.brush-select-label{display:flex;flex-direction:column;gap:9px;font-size:16px;font-weight:700;color:#32124f}
/* Shared dropdown surface; each presentation only sets its own geometry. */
.brush-select-label select,.focus-tools select,.focus-color-menu{
  min-width:0;width:100%;border:3px inset #eee;border-radius:0;
  background:#f8f4fc;color:#271438;font:inherit;font-size:16px;font-weight:400
}
.brush-select-label select{height:46px;padding:5px}
.brush-select-label select:focus-visible{outline:2px dotted #32124f;outline-offset:2px}
html{scrollbar-gutter:auto}
.site-header nav a{display:inline-flex;align-items:center;min-height:32px;padding:4px 0;line-height:1.3;color:#4a147b;text-decoration:none;text-underline-offset:3px}
.site-header nav{display:flex;align-items:center;gap:12px}
@media(max-width:440px){.site-header{height:auto;min-height:60px;flex-wrap:wrap;gap:0 12px;padding:6px 12px}.site-header nav{margin-left:auto}}
.nav-profile-photo{display:block;width:32px;height:32px;flex-shrink:0;object-fit:cover;border:2px inset #eee}
.name-nav{border:0;background:none;padding:4px 0;min-height:32px;line-height:1.3;color:#4a147b;text-decoration:none;text-underline-offset:3px}
.site-header nav a[aria-current="page"],body:has(dialog[aria-labelledby="name-heading"][open]) .name-nav{color:#32124f;font-weight:700}
@media(hover:hover){
  .site-header a:hover,.site-header .name-nav:hover{text-decoration:underline;text-decoration-thickness:2px}
  .site-header nav a:hover,.site-header .name-nav:hover{color:#32124f}
}
.site-header a:focus-visible,.site-header .name-nav:focus-visible{outline:2px dotted #32124f;outline-offset:3px}
.site-header nav a:active,.site-header .name-nav:active{color:#a43f68;transform:none}
.name-field{display:flex;flex-direction:column;gap:6px;text-align:left;font-size:14px}
.name-field input{width:100%;min-width:0;min-height:44px;padding:8px;border:3px inset #eee;background:#f8f4fc;font:inherit;font-size:16px;text-transform:none}
.name-field small{font-size:12px;color:#594a64}
.profile-photo{margin-bottom:18px}
.profile-details .profile-photo img{width:96px;height:96px;object-fit:cover;margin:8px 0 12px}
.profile-details{border-top:3px double #827294}
.profile-details .name-field{display:grid;gap:6px}
.profile-details input{max-width:100%;min-width:0;font:inherit}
.profile-drawings{margin-top:24px;padding-top:16px;border-top:2px groove #eee;min-width:0}
.profile-drawings h3{margin:0;font-size:20px}
.profile-drawing-list{display:grid;gap:10px}
.profile-drawing-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:2px outset #eee;background:#ded9e4;color:#32124f;text-decoration:none;min-width:0}
.submission-dialog .profile-drawing-card img{width:72px;height:72px;margin:0;background:#fff;object-fit:contain}
.profile-drawing-card>span{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.profile-drawing-card time,.profile-drawing-card small{font-size:13px}
.profile-drawing-card:hover{background:#e7d9f5}
.profile-drawing-card:hover strong{text-decoration:underline}
.profile-drawing-status{font-size:14px;overflow-wrap:anywhere}
.submission-dialog .profile-photo img{width:96px;height:96px;object-fit:cover;margin:8px auto 12px}
.profile-photo input[type="file"]{font-size:12px;padding:6px}
.profile-photo .web-button{margin-top:8px;font-size:13px}
#profile-photo-status{font-size:12px}
.drawing-author,.archive-card .drawing-author{display:block;font-size:13px;overflow-wrap:anywhere;margin:4px 0 10px;text-transform:none}
.submission-dialog{max-height:calc(100dvh - 24px);overflow-y:auto}
.mobile-sketch-info .focus-brand{display:none}
.web-button.focus-launch{font-size:12px;min-height:36px;padding:4px 6px}
.history-actions button{padding-inline:6px}
/* Preserve the header geometry so hiding the control cannot change the fit. */
.focus-launch.page-fits{visibility:hidden;pointer-events:none}
.studio-top:has(.focus-launch){height:auto;min-height:43px}
.studio-top>.focus-launch{margin-block:8px}
.studio-top>div{min-width:0}
.studio-title{overflow-wrap:anywhere}
body:has(.studio:not([hidden])) .intro h1{display:none}
body:has(.flow-panel:not([hidden]) .archive-grid) .intro{display:none}
.gallery-actions{display:flex;justify-content:center;padding:16px 16px 0}
.panel-navigation{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
html.drawing-focused{min-width:320px;overflow:hidden;overscroll-behavior:none}
.drawing-focused body{position:fixed;width:100%;min-width:320px;overflow:hidden;overscroll-behavior:none}
.drawing-focus{position:fixed;inset:auto;margin:0;max-width:none;max-height:none;box-sizing:border-box;border:0;padding:8px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));background:#d5d0d9;color:#271438;font:inherit;text-transform:lowercase;overflow:hidden;overscroll-behavior:none;touch-action:none}
.drawing-focus[open]{display:grid;min-width:320px;grid-template-rows:auto minmax(44px,1fr) auto minmax(min-content,1fr);gap:8px}
.focus-info{min-width:0;padding:8px;border:2px inset #eee;background:#e7d9f5;overflow-wrap:anywhere}
.focus-info p{margin:0;font-size:12px;line-height:1.3}
.focus-info-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.focus-info-top .focus-date{flex-shrink:0;text-align:left}
.focus-info h2{margin:2px 0;font-size:20px;line-height:1.2;color:#4a147b;text-align:center}
.drawing-focus .focus-prompt{text-align:right;font-weight:400}
.drawing-focus .focus-brand{font-weight:700}
@media(max-width:760px){.focus-info h2{font-size:14px}}
@media(max-width:760px), (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .focus-info{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:2px}
  .focus-info-top{flex:0 0 auto;max-width:100%}
  .focus-info h2{flex:1 1 auto;min-width:0;max-width:100%;margin:0}
}
.drawing-focus::backdrop{background:#d5d0d9}
.focus-actions{display:flex;justify-content:center;align-self:center;gap:12px;min-width:0}
.focus-history{flex:1;max-width:300px;min-width:0}
.drawing-focus .history-actions{display:flex;margin:0;padding:0;border:0;gap:6px;height:44px}
.drawing-focus .history-label{display:none}
.drawing-focus .history-actions button{height:44px;min-width:0}
.web-button.close-button{display:grid;place-items:center;box-sizing:border-box;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;max-height:44px;padding:0 6px;overflow:hidden}
.close-button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.focus-canvas{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden}
.drawing-focus .canvas-frame{flex:none;max-width:100%;max-height:100%}
.focus-tools{display:grid;align-self:center;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;min-width:0}
.focus-tools label{grid-column:span 2;display:flex;flex-direction:column;gap:3px;min-width:0;font-size:12px}
.focus-tools label:nth-last-child(-n+2){grid-column:span 2}
.focus-tools select,.focus-color-menu{height:44px;touch-action:manipulation}
.focus-tools select{padding:3px}
.focus-tools select[data-focus="color"],.focus-tools select[data-focus="background"]{border-left-width:12px}
.focus-tools select:focus-visible{outline:2px dotted #32124f;outline-offset:1px}
.focus-color-menu{display:flex;align-items:center;gap:6px;padding:3px 6px}
.color-menu-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.color-menu-swatch{display:block;flex:0 0 7px;width:7px;height:26px;border:1px solid #74657f}
.color-menu{box-sizing:border-box;width:min(340px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);padding:12px;border:3px outset #eee;border-radius:0;background:#d5d0d9;color:#271438;font:inherit;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.color-menu[open]{display:flex;flex-direction:column;overflow:hidden}
.color-menu::backdrop{background:#21113066}
.color-menu-heading{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.color-menu-heading h2{margin:0;font-size:20px}
.color-menu-heading button{min-width:44px;min-height:44px}
.color-menu-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:2px}
.color-menu-option{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;padding:6px;background:#f8f4fc;color:#271438;border:2px outset #eee;border-radius:0;font:inherit;font-size:16px;text-align:left;overflow-wrap:anywhere}
.color-menu-option[aria-pressed="true"]{background:#e7d9f5;border-style:inset;outline:1px solid #663399}
@media(max-width:380px){.focus-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-tools label,.focus-tools label:nth-last-child(-n+2){grid-column:auto}}
@media(orientation:landscape) and (max-height:600px){
  .drawing-focus .focus-tools label{line-height:1.2}
  .drawing-focus .history-button-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .drawing-focus[open]{grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:auto 44px minmax(0,1fr)}
  .drawing-focus .focus-actions{grid-column:2;grid-row:2}
  .drawing-focus .focus-info{grid-column:2;grid-row:1}
  .drawing-focus .focus-canvas{grid-column:1;grid-row:1 / 4}
  .drawing-focus .focus-tools{grid-column:2;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;row-gap:3px}
  .drawing-focus .focus-tools label,.drawing-focus .focus-tools label:nth-last-child(-n+2){grid-column:auto}
  .drawing-focus .focus-tools label:last-child{grid-column:auto}
}
.mobile-sketch-info,.mobile-sketch-actions,.mobile-sketch-tools{display:none}
/* Phones and portrait tablets share the drawing-first organization. */
@media(max-width:760px), (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  main{padding-left:8px;padding-right:8px}
  .studio .studio-top,.studio .toolbox{display:none}
  .studio .studio-body{display:flex;flex-direction:column;gap:16px;padding:10px}
  .studio .canvas-column{width:100%;max-width:none}
  .mobile-sketch-info,.mobile-sketch-tools{display:block;width:100%;min-width:0}
  .mobile-sketch-actions{display:flex;width:100%;align-items:center;gap:8px}
  .mobile-sketch-actions .history-actions{display:flex;flex:1;max-width:300px;min-width:0;margin:0;padding:0;border:0;gap:5px}
  .mobile-sketch-actions .history-label{display:none}
  .mobile-sketch-actions .history-actions button{height:44px;min-width:0}
  .mobile-sketch-actions .focus-launch{min-height:44px;flex-shrink:0;padding:4px 6px;font-size:12px}
  body:has(.studio:not([hidden])) .intro .daily-heading>div{display:none}
  body:has(.studio:not([hidden])) .intro .daily-heading{justify-content:flex-end}
  body:has(.studio:not([hidden])) .intro{display:none}
}
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .mobile-sketch-actions .history-actions{gap:8px}
  .mobile-sketch-actions .focus-launch{padding:6px;font-size:14px}
  .mobile-sketch-tools .focus-tools,.drawing-focus .focus-tools{gap:10px}
  .mobile-sketch-tools label,.drawing-focus .focus-tools label{font-size:14px}
}
@media(min-width:700px) and (max-width:760px), (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .studio .studio-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center}
  .mobile-sketch-info{grid-column:1;grid-row:1}
  .mobile-sketch-actions{grid-column:2;grid-row:1}
  .studio .canvas-column,.mobile-sketch-tools{grid-column:1 / -1}
}
@media(min-width:700px) and (min-height:601px){
  .drawing-focus[open]{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(min-content,1fr) auto minmax(min-content,1fr)}
  .drawing-focus .focus-info{grid-column:1;grid-row:1;align-self:center}
  .drawing-focus .focus-actions{grid-column:2;grid-row:1}
  .drawing-focus .focus-canvas{grid-column:1 / -1;grid-row:2}
  .drawing-focus .focus-tools{grid-column:1 / -1;grid-row:3}
}
.archive-grid .prompt-card{display:block}
.archive-grid .prompt-card img{object-fit:contain;background:#fff}
/* Freeze the layout below 320px, allowing only the actual scrollbar width. */
html,body{min-width:calc(320px - var(--page-scrollbar-width, 0px))}
main,.studio-body,.canvas-column,.toolbox,.tool-section,.daily-heading>*,.submission-layout>*,.panel-title>*{min-width:0}
.daily-heading h1,.panel-title :is(h1,h2),.submission-info h2{overflow-wrap:anywhere}
.panel-title{flex-wrap:wrap}
.dialog-actions{flex-wrap:wrap}
.dialog-actions .web-button{flex:1;min-width:0}
@media(max-width:760px){
  .studio-body{grid-template-columns:minmax(0,1fr)}
  .toolbox{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-switch .tool-button,.sizes button{flex:1;min-width:0;width:auto}
  .tool-switch,.sizes{gap:5px}
  .color-picker summary{min-width:0;gap:4px;padding:6px 5px;font-size:11px}
  .selected-color-chip{width:18px;height:22px}
  .selected-color-name{min-width:0;overflow-wrap:anywhere}
  .picker-arrow{flex-shrink:0;padding:0 3px;line-height:18px}
  .studio-top{height:auto;min-height:43px;flex-wrap:wrap;gap:4px;padding:8px 10px}
  .studio-top>div{min-width:0}
  .save-status{overflow-wrap:anywhere}
  .color-picker .palette{width:248px;max-width:calc(max(320px,100vw) - 72px)}
  .daily-heading{gap:10px}
  .daily-heading>.web-button{flex-shrink:0;padding:8px 10px}
  .dialog-actions .web-button{padding:8px;font-size:13px}
  .panel-title>.web-button{padding:6px 8px}
  .star-picker{gap:5px}
  .star-picker label{font-size:34px;min-width:0}
  .rating-actions .web-button{min-width:0;padding:8px}
  .archive-grid{padding:12px}
  .archive-card{min-width:0;grid-template-columns:72px minmax(0,1fr)}
  .archive-card span,.archive-card small{overflow-wrap:anywhere}
}
.preview-notice{font-size:12px;color:#493655;padding:7px 10px;background:#ffffcc;border:1px solid #847094;margin-bottom:18px}
.daily-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.prompt-date,.prompt-caption{font-size:13px!important;color:#493655!important;margin:0 0 7px!important}
.prompt-caption{margin-top:8px!important}
.web-button{font:inherit;text-transform:lowercase;min-height:44px;padding:8px 16px;background:#ded9e4;color:#271438;border:3px solid;border-color:#fff #74657f #74657f #fff;border-radius:0;box-shadow:1px 1px #403249;cursor:pointer}
.web-button.primary{background:#c8e5b5;color:#244019;font-weight:bold}
.web-button:active{border-color:#74657f #fff #fff #74657f}
.web-button:disabled{opacity:.5;cursor:default}
.submit-bar{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px;font-size:13px;text-align:center}
.submit-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;width:100%;max-width:520px;align-self:center}
.save-buttons{display:flex;justify-content:center;gap:8px;max-width:100%;min-width:0}
.save-buttons .web-button{flex:0 1 auto;min-width:0;max-width:100%;padding:8px;font-size:16px}
.site-footer{width:100%;margin-top:16px;padding:12px 8px;background:#e7d9f5;border-block:3px double #847094;color:#493655;text-align:center;font-size:13px;line-height:1.6}
.drawing-focused .site-footer{display:none}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-bottom:4px}
.site-footer nav a{color:inherit;text-decoration:none;padding-block:6px}
.site-footer nav a:hover,.site-footer nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.information-copy{max-width:72ch;margin-inline:auto;padding:20px clamp(12px,4vw,32px);font-size:18px;line-height:1.6;overflow-wrap:anywhere}
.information-copy h2{font-size:1.25em;line-height:1.3;margin-top:1.5em}
.information-copy a{color:#523a80;text-underline-offset:3px}
.draft-notice{padding:12px;background:#fff3d2;border:1px solid #847094;font-size:16px}
.contact-form{display:grid;gap:8px;min-width:0}
.contact-form[hidden],#contact-success[hidden],#contact-hosted[hidden]{display:none}
.contact-form label{margin-top:12px;font-weight:700}
.contact-form input,.contact-form select,.contact-form textarea{box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:10px;font:inherit;color:#343044;background:#fff;border:2px solid;border-color:#847094 #fff #fff #847094;border-radius:0}
.contact-form textarea{resize:vertical;min-height:150px}
.contact-form :is(input,select,textarea):focus-visible{outline:3px solid #7962bc;outline-offset:2px}
.contact-form small,.contact-form p{font-size:16px;line-height:1.5}
.contact-form button{justify-self:start;min-height:44px}
.contact-form .contact-honeypot{display:none}
.submit-actions .save-status{flex:0 1 auto;max-width:40%;color:#493655;font-size:12px;text-align:left;overflow-wrap:anywhere}
.flow-panel,.submission-dialog{background:#d5d0d9;border:3px solid;border-color:#fff #675c72 #675c72 #fff;border-radius:0;box-shadow:2px 2px #362740}
.panel-title{background:#663399;color:white;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-title :is(h1,h2){font-size:20px;margin:0}.panel-title>span{font-size:12px}.panel-title .web-button{font-size:12px}
.submission-layout{padding:24px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.finished-drawing,.rating-drawing{width:100%;aspect-ratio:1;object-fit:contain;border:3px solid;border-color:#74657f #fff #fff #74657f;background:white}
.submission-info h2{font-size:24px;margin:0 0 14px}.submission-info .web-button{display:block;width:100%;margin-top:15px}.muted{font-size:13px;color:#594a64;line-height:1.5}
.drawing-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.submission-info .drawing-actions .web-button{width:auto;flex:1 1 auto;min-width:0;margin:0;padding:8px;font-size:16px}
.share-status{margin:8px 0 0;overflow-wrap:anywhere}
.share-status:empty{display:none}
.share-card-dialog{width:min(780px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:16px;border:3px outset #eee;border-radius:0;background:#d5d0d9;color:#32124f;font:inherit}
.share-card-dialog::backdrop{background:#21113099}
.share-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.share-card-heading h2{margin:0;font-size:24px}
.share-card-preview{display:block;width:100%;height:auto;border:2px inset #eee}
.share-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.share-card-actions .web-button{flex:1;text-align:center;text-decoration:none;font-size:16px;padding:8px}
.share-card-status{font-size:16px;overflow-wrap:anywhere}
@media(max-width:440px){.drawing-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.drawing-actions #start-rating:last-child{grid-column:1 / -1}.share-card-dialog{padding:10px}}
.rating-total{font-size:18px}.streak-box{display:flex;flex-direction:column;gap:4px;border:2px inset #eee;padding:16px;margin-top:22px}.streak-box strong{font-size:24px}.streak-box span{font-size:13px}
.submission-dialog{font-family:inherit;text-transform:lowercase;max-width:460px;width:calc(100% - 32px);padding:22px;color:#271438}.submission-dialog::backdrop{background:#21113099}.submission-dialog h2{margin-top:0;font-size:23px}.submission-dialog img{display:block;width:180px;aspect-ratio:1;object-fit:contain;margin:16px auto;border:2px inset #eee}.dialog-actions{display:flex;gap:12px;justify-content:space-between}.dialog-actions button{font-size:14px}
.rating-layout{max-width:460px;margin:auto;padding:20px}.star-picker{border:0;padding:12px 0 0;display:flex;justify-content:center;gap:9px;margin-top:16px}.star-picker legend{text-align:center}.star-picker label{position:relative;cursor:pointer;font-size:38px;line-height:1.4;color:#6d4211}.star-picker input{position:absolute;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.star-picker label:has(input:focus-visible){outline:2px dotted #32124f}.rating-layout #rating-status{text-align:center;min-height:20px}.rating-actions{display:flex;gap:14px}.rating-actions button{flex:1}.empty-state{padding:35px;text-align:center}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px}.archive-card{font:inherit;background:#ded9e4;border:3px outset #eee;padding:10px;text-align:left}.archive-card img{width:100%;aspect-ratio:1;display:block;border:2px inset #eee}.archive-card span{display:block;font-size:20px;margin:8px 0}.archive-card small{font-size:11px}
@media(max-width:760px){.submission-layout{grid-template-columns:1fr;padding:16px;gap:18px}.panel-title{padding:10px}.panel-title :is(h1,h2){font-size:18px}.panel-title>span{font-size:10px}.submit-bar{align-items:stretch;flex-direction:column;gap:10px}.archive-grid{grid-template-columns:1fr;gap:16px}.archive-card{display:grid;grid-template-columns:90px 1fr;gap:8px 15px}.archive-card img{grid-row:1 / 3}.archive-card span{margin:0;align-self:end}.preview-notice{font-size:11px}.daily-heading h1{font-size:32px}}
/* The new-day introduction shares the site's existing panel and button styles. */
.drawing-welcome { max-width: 38rem; margin: auto; padding: 20px; text-align: center; }
.drawing-welcome h2 { margin: 12px 0 20px; font-size:1.17em; }
.drawing-welcome ul { text-align: left; padding-left: 24px; margin: 20px 0; }
.drawing-welcome li { margin: 8px 0; }
.drawing-welcome #begin-status:empty { display: none; }

/* Reclaim vertical space at the existing minimum-width layout without reducing
   the 44px tool targets or changing the scrollbar allowance. */
@media (max-width:380px), (max-width:760px) and (max-height:700px) {
  body:has(.studio:not([hidden])) .site-header { height:44px; min-height:44px; padding-block:0; }
  body:has(.studio:not([hidden])) main { padding-top:6px; padding-bottom:6px; }
  .studio .studio-body { gap:4px; padding-block:4px; }
  .mobile-sketch-info .focus-info,
  .drawing-focus .focus-info { padding-block:4px; }
  .mobile-sketch-actions,
  .drawing-focus .focus-actions { gap:4px; }
  .mobile-sketch-tools .focus-tools,
  .drawing-focus .focus-tools { row-gap:4px; column-gap:6px; }
  .mobile-sketch-tools .focus-tools label,
  .drawing-focus .focus-tools label { gap:1px; line-height:1.1; }
  .drawing-focus {
    padding-top:max(4px,env(safe-area-inset-top));
    padding-bottom:max(4px,env(safe-area-inset-bottom));
  }
  .drawing-focus[open] {
    grid-template-rows:auto 44px auto auto;
    align-content:start;
    gap:4px;
  }
  .submit-bar { margin-top:6px; gap:4px; }
  .submit-actions { row-gap:4px; }
  .site-footer { margin-top:6px; padding-block:6px; line-height:1.3; }
}

.drawing-surface { width:100%; min-width:0; box-sizing:border-box; padding:var(--drawing-margin,10px); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.drawing-surface .canvas-frame { width:100%; aspect-ratio:1; }
.drawing-surface canvas { cursor:none; }
.touch-drawing-strip { display:none; }
@media (any-pointer:coarse) {
  .touch-drawing-strip { display:block; height:var(--touch-offset); background:#c7bdd2; border-bottom:1px solid #847094; box-sizing:border-box; }
}
.drawing-focus .drawing-surface { flex:none; max-width:100%; max-height:100%; }
/* Cursor appearance lives here; tool color applies to every shape and halo. */
.eraser-cursor {
  --cursor-color:#343044;
  display:none; position:absolute; pointer-events:none; z-index:2;
  border-radius:50%; border:1px solid var(--cursor-color);
  background:transparent; box-shadow:0 0 0 1px #fff;
  transform:translate(-50%,-50%); box-sizing:content-box;
}
.eraser-cursor.visible { display:block; }
.eraser-cursor[data-tool="eraser"] { --cursor-color:#c52e42; }
.eraser-cursor[data-shape="square"] { border-radius:0; }
.eraser-cursor>svg { display:none; }
.eraser-cursor[data-shape="rough"] { border:0; border-radius:0; box-shadow:none; }
.eraser-cursor[data-shape="rough"]>svg {
  display:block; width:100%; height:100%; overflow:visible;
  fill:none; stroke:var(--cursor-color);
}
.eraser-cursor polygon { vector-effect:non-scaling-stroke; stroke-width:1px; }
.eraser-cursor .cursor-outline { fill:none; stroke:white; stroke-width:3px; }
/* A separate touch target remains legible when the actual brush is only a few
   screen pixels wide. The inner outline still represents the brush footprint. */
.eraser-cursor[data-input="touch"]::after {
  content:""; position:absolute; left:50%; top:50%;
  width:20px; height:20px; transform:translate(-50%,-50%);
  border:1px solid var(--cursor-color); border-radius:50%;
  box-shadow:0 0 0 2px #fff; background:transparent;
}

/* Shared page edges: main's padding keeps the drawing panel slightly inset. */
:root { --page-shell-width:1096px; --page-gutter:28px; }
.site-header, .site-footer { max-width:var(--page-shell-width); margin-inline:auto; }
.site-header { width:100%; }
main { max-width:var(--page-shell-width); }
@media(max-width:760px), (min-width:761px) and (max-width:1100px) and (orientation:portrait) {
  :root { --page-gutter:8px; }
}
body:has(.submit-bar:not([hidden])) main { padding-bottom:0; }

.archive-grid.prompt-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:700px) {
  .archive-grid.prompt-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:1101px) {
  .archive-grid.prompt-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.prompt-grid .prompt-card { display:flex; flex-direction:column; min-width:0; gap:0; }
.prompt-grid .prompt-card img { flex:none; height:auto; }
.prompt-grid .prompt-card span { align-self:stretch; margin:8px 0; overflow-wrap:anywhere; }
.prompt-grid .prompt-card small { display:block; margin-top:auto; overflow-wrap:anywhere; }
.prompt-grid .prompt-card .display-date { display:block; }
.prompt-grid > p { grid-column:1 / -1; }
.account-notice { padding:14px 16px; border:3px double #827294; background:#eee9f2; overflow-wrap:anywhere; }
.account-notice[data-state="success"] { border-color:#426442; background:#edf5e9; color:#284228; font-weight:bold; }
.account-notice[data-state="error"] { border-color:#8a3547; }
#guest-review { margin-block:24px; border-top:3px double #827294; padding-top:12px; }
#guest-review-list { padding-left:22px; overflow-wrap:anywhere; }
#guest-review-list li { margin-block:8px; }
@media(max-width:760px) {
  .archive-grid.prompt-grid { padding:12px; gap:10px; }
  .prompt-grid .prompt-card { padding:7px; }
  .prompt-grid .prompt-card span { font-size:16px; line-height:1.2; }
}
.admin-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.admin-content, .admin-review-dialog {
  font-family:Consolas, 'Liberation Mono', Menlo, monospace;
  font-size:14px; line-height:1.55;
}
.admin-content :is(h2,h3), .admin-review-dialog h2 { font-family:'Unkempt',cursive; }
.admin-content :is(select,button), .admin-review-dialog :is(select,textarea,button) { font-family:inherit; }
.admin-decision { margin-block:8px 20px; }
.admin-decision summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.admin-decision-target { font-size:12px; overflow-wrap:anywhere; }
.admin-decision-changes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:12px; margin-block:12px; }
.admin-decision-state { min-width:0; padding:12px; background:#eee9f2; border:2px inset #eee; }
.admin-decision-label { display:block; border-bottom:1px solid #827294; padding-bottom:6px; }
.admin-decision-state dl { margin:10px 0 0; }
.admin-decision-state dt { font-size:12px; color:#594a64; margin-top:10px; }
.admin-decision-state dd { margin:2px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-state-value { font-weight:bold; }
.admin-decision-note { border-left:3px solid #827294; padding:8px 12px; background:#eee9f2; }
.admin-decision-note p { white-space:pre-wrap; overflow-wrap:anywhere; margin:4px 0 0; }
.admin-filters label { display:grid; gap:4px; }
.admin-review-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:16px; margin-block:16px; }
.admin-review-card { border:2px groove; padding:12px; min-width:0; overflow-wrap:anywhere; }
.admin-review-card img { width:100%; height:auto; max-width:200px; aspect-ratio:1; object-fit:contain; }
.submission-dialog .admin-review-image { width:100%; max-width:420px; height:auto; }
.report-explanation,.review-explanation { white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-content section + section { margin-top:24px; border-top:3px double; padding-top:16px; }
.name-field textarea,.name-field select { width:100%; max-width:100%; min-width:0; min-height:44px; font:inherit; font-size:16px; }
.rating-actions { flex-wrap:wrap; }
.rating-actions button { min-width:90px; }
.admin-review-dialog .name-field { margin-block:12px; }
.save-buttons { position:relative; }
.submit-actions .save-status {
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  width:140px; max-width:none; margin:0; pointer-events:none;
  opacity:1; visibility:visible; transition:opacity 220ms ease, visibility 220ms;
}
.submit-actions .save-status.status-expired { opacity:0; visibility:hidden; }
@media(max-width:600px) {
  .submit-actions { padding-bottom:32px; }
  .submit-actions .save-status { left:auto; right:0; top:calc(100% + 4px); transform:none; width:100%; justify-content:flex-end; text-align:right; }
}
@media(prefers-reduced-motion:reduce) {
  .submit-actions .save-status { transition:none; }
}