/* Opaque washes keep paper texture and coloured artwork away from text. */
:root[data-theme=crayon]{color-scheme:light;--bg:#fffdf8;--surface:#fffdf8;--wash:#fffdf8;--ink:#302638;--muted:#63576a;--line:#80628e;--tint:#fffdf8;--danger:#9b263e;--warning:#74500a;--good:#23604e;--shadow:none}
.crayon-only,.crayon-caption,.brand-art,.detail-hero>.icon-button>.crayon-icon,.detail-hero>.icon-button>svg{display:none}
#splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;background:#fffdf8 url('./art/crayon/paper.webp');visibility:hidden;animation:crayon-splash .5s step-end}
#splash img{width:min(240px,70vw);height:auto}
#splash[hidden]{display:none}
@keyframes crayon-splash{from{visibility:visible}to{visibility:hidden}}
html:not([data-theme=crayon]) #splash{display:none}
/* Keep the paper fixed while the notebook scrolls. */
:root[data-theme=crayon] body{position:relative;isolation:isolate;min-height:100dvh;background:var(--wash)}
:root[data-theme=crayon] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url('./art/crayon/paper.webp');background-repeat:repeat;background-size:512px 512px}
:root[data-theme=crayon] :is(.brand,.page-head,.section-title,.hero-note,.date-heading,.detail-hero,.detail-tools,.empty,.toolbar:has(>small),#content>label,#search-box>label){background:var(--wash);border-radius:12px}
:root[data-theme=crayon] :is(.panel,.membership-card,.application-card,.reminder,.notice,.filters,.stat-hero,dialog){background:var(--wash);border:12px solid transparent;border-image:url('./art/crayon/card.webp') 48 / 12px / 0 stretch;box-shadow:none}
:root[data-theme=crayon] .panel{padding:12px}
:root[data-theme=crayon] .swatches{gap:4px}
:root[data-theme=crayon] .swatches button{width:32px;height:32px}
:root[data-theme=crayon] .membership-card{padding:10px 8px;gap:10px}
:root[data-theme=crayon] .application-card{padding:10px}
:root[data-theme=crayon] .reminder{padding:4px 8px;border-width:6px;border-image-width:6px}
:root[data-theme=crayon] .notice{padding:10px 12px}
:root[data-theme=crayon] .filters{padding:10px}
:root[data-theme=crayon] .brand-letter{display:none}
:root[data-theme=crayon] .brand-art{display:block;object-fit:contain}
:root[data-theme=crayon] .brand-mark{background:var(--wash)}
:root[data-theme=crayon] .icon-button{width:52px;height:58px;flex-direction:column;gap:1px;padding:3px;border-color:var(--line);background:var(--wash);color:var(--ink)}
:root[data-theme=crayon] .section-title .icon-button{width:48px;height:50px;padding:1px;gap:0}
:root[data-theme=crayon] .section-title .crayon-icon{width:28px;height:28px}
:root[data-theme=crayon] .crayon-icon{width:32px;height:32px;object-fit:contain;flex-shrink:0}
:root[data-theme=crayon] .crayon-caption{display:block;font-size:10px;line-height:16px;white-space:nowrap;color:var(--ink)}
:root[data-theme=crayon] .classic-caption{display:none}
:root[data-theme=crayon] .crayon-only{display:inline-flex}
:root[data-theme=crayon] :is(.crayon-submit,.icon-label){display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;min-height:58px;padding:3px 10px;gap:1px}
:root[data-theme=crayon] .text-action.decision-action{min-height:48px;padding:10px 20px;border:3px solid var(--accent-ink);background:var(--wash);color:var(--ink)}
:root[data-theme=crayon] .text-action.decision-action.danger-action{border-color:var(--danger);color:var(--danger)}
/* Account for the crayon frame so the footer stays inside the dialog. */
:root[data-theme=crayon] dialog form{max-height:calc(var(--viewport-height,100dvh) - 54px)}
:root[data-theme=crayon] .memo-footer{height:80px;top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh) - 172px - env(safe-area-inset-bottom))}
:root[data-theme=crayon] .danger-action .crayon-caption{color:var(--danger)}
:root[data-theme=crayon] .icon-button.danger .crayon-caption{color:var(--danger)}
:root[data-theme=crayon] .detail-hero>.icon-button{width:112px;height:auto;min-height:132px}
:root[data-theme=crayon] .detail-hero>.icon-button>.crayon-icon{display:block;width:28px;height:28px;position:absolute;margin-top:56px;margin-left:70px;background:var(--wash);border-radius:8px}
:root[data-theme=crayon] .avatar{position:relative;isolation:isolate;background:var(--item-colour,var(--accent));color:var(--item-text,#fff);border:1px solid var(--line)}
:root[data-theme=crayon] .avatar::before{content:"";position:absolute;inset:0;z-index:-1;background:url('./art/crayon/paper.webp');mix-blend-mode:multiply;pointer-events:none}
:root[data-theme=crayon] .fab{width:64px;height:64px;background:transparent url('./art/crayon/fab.webp') center / contain no-repeat;box-shadow:none;display:flex;flex-direction:column;justify-content:center;gap:0}
:root[data-theme=crayon] .fab .crayon-icon{filter:drop-shadow(2px 0 0 var(--wash)) drop-shadow(-2px 0 0 var(--wash)) drop-shadow(0 2px 0 var(--wash)) drop-shadow(0 -2px 0 var(--wash))}
:root[data-theme=crayon] .fab .crayon-caption{display:none}
:root[data-theme=crayon] .tabs{background:var(--wash) url('./art/crayon/paper.webp');border:0;padding-top:14px}
:root[data-theme=crayon] .tabs::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:url('./art/crayon/tabbar.webp') center / 100% 12px no-repeat}
:root[data-theme=crayon] .tabs a{background:var(--wash);border-radius:12px;gap:1px;min-height:53px}
:root[data-theme=crayon] .tabs .crayon-icon{width:36px;height:36px}
:root[data-theme=crayon] .tab-count{background:var(--danger);color:var(--wash)}
:root[data-theme=crayon] .result{display:inline-flex;align-items:center;gap:3px;background:var(--wash)}
:root[data-theme=crayon] .result::before{content:"";width:28px;height:28px;background:center / contain no-repeat;flex-shrink:0}
:root[data-theme=crayon] .result[data-result=当選]::before{background-image:url('./art/crayon/win.webp')}
:root[data-theme=crayon] .result[data-result=落選]::before{background-image:url('./art/crayon/lose.webp')}
:root[data-theme=crayon] .result[data-result=待ち]::before{background-image:url('./art/crayon/wait.webp')}
:root[data-theme=crayon] .result:not([data-result=当選],[data-result=落選],[data-result=待ち])::before{display:none}
:root[data-theme=crayon] .empty::before{content:"";display:block;width:min(200px,100%);height:150px;margin:0 auto 10px;background:url('./art/crayon/empty.webp') center / contain no-repeat}
:root[data-theme=crayon] .text-action{background:var(--wash);color:var(--ink);border:1px solid var(--line)}
:root[data-theme=crayon] .text-action.danger-action{color:var(--danger);border-color:var(--danger)}
:root[data-theme=crayon] .memo-caption-button{color:var(--ink)}
:root[data-theme=crayon] :is(.memo-card-actions input[type=checkbox],input[type=checkbox]){accent-color:var(--ink)}
:root[data-theme=crayon] :is(.bar span,.mini-rule,.filter-active::after){background:var(--ink)}
:root[data-theme=crayon] .archived{opacity:1}
:root[data-theme=crayon] button:disabled{opacity:1;color:var(--muted);cursor:wait;border-style:dashed}
:root[data-theme=crayon] #toast{background:var(--wash);color:var(--ink);border:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){#splash{animation:none;visibility:hidden}#splash.splash-static{visibility:visible}}