/* The fan shares the school studio's warm paper, ink and cinnabar palette. */
.custom-color-label{display:flex;align-items:center;flex-direction:column;gap:4px;font-size:.7rem;color:#6e7567;min-width:44px;cursor:pointer}.custom-color-label input{width:44px;height:36px;border:0;padding:3px;background:transparent;cursor:pointer}.stage[data-stir="true"] .brush-cursor{width:5px;height:64px;border:1px solid #735c36;border-radius:3px;background:linear-gradient(90deg,#b89760,#eddbab,#a2834f);transform:translate(-2px,-60px) rotate(24deg);transform-origin:bottom;opacity:0;box-shadow:3px 3px 5px #28352244}.stage[data-stir="true"]:hover .brush-cursor,.stage[data-stir="true"]:focus .brush-cursor{opacity:1}.color-dock{gap:12px}.header-actions{gap:8px}
.fan-app{max-width:1480px;min-height:100svh;margin:auto;padding:18px 32px 10px;display:flex;flex-direction:column;color:#34443b}.fan-header{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding-bottom:12px;border-bottom:1px solid #d8d0c269;gap:16px}.fan-header>img{width:180px;height:auto}.fan-brand{font-family:"DFKai-SB","KaiTi",serif;font-size:1.45rem;letter-spacing:.12em}.fan-brand small{font-family:inherit;color:#8c7864;font-size:.8rem;letter-spacing:.15em;margin-left:12px}.fan-heading{text-align:center;margin:24px 0 10px}.fan-heading .step-caption{margin:0 0 9px}.fan-heading h1{font-family:"DFKai-SB","KaiTi",serif;font-weight:400;font-size:1.65rem;letter-spacing:.12em;margin:0 0 9px;outline:none}.fan-heading>p:last-child{font-size:.85rem;color:#86806e;margin:0;line-height:1.6}.fan-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px;color:#8d826e;font-size:.72rem;min-height:40px}.fan-footer p{margin:0;max-width:65%;line-height:1.6}.fan-note{font-size:.85rem;color:#827761;line-height:1.8}.fan-app button{touch-action:manipulation}.fan-app label{display:block;font-size:.85rem;color:#736e5c;margin:12px 0 7px}.fan-app input:not([type=range]){border:1px solid #cfc2ad;background:#fffaf26b;border-radius:5px;padding:10px 12px;min-height:46px;width:100%;color:#394537}.fan-app input[type=range]{display:block;width:100%;min-height:36px;accent-color:#9e5742;cursor:pointer}.fan-app output{float:right;color:#a34a36}.fan-app progress{display:block;width:100%;accent-color:#a54736;height:7px;margin:12px 0 24px}
#fan-select{flex:1;text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:4px 0 22px}.fan-choices{display:flex;justify-content:center;gap:60px;width:100%;max-width:820px}.fan-choices button{width:45%;border:1px solid transparent;background:transparent;border-radius:20px;padding:0 14px 18px;color:#6c604d;transition:background .2s,border-color .2s}.fan-choices button:hover,.fan-choices button:focus-visible{background:#fff9eb66}.fan-choices button[aria-pressed=true]{border-color:#ae755e;background:#fff9ee80}.fan-choices canvas{display:block;width:100%;height:auto;max-height:36svh;object-fit:contain}.fan-choices strong{display:block;font-family:"DFKai-SB","KaiTi",serif;letter-spacing:.2em;font-size:1.3rem;font-weight:400}.fan-choices span{display:block;font-size:.8rem;line-height:1.6;margin-top:10px;color:#8c816f}.fan-choices button span{opacity:.75}.fan-choices button:hover span,.fan-choices button:focus span,.fan-choices button[aria-pressed=true] span{opacity:1}#fan-choice-note{margin:22px 0 16px}
#dip-section{flex:1;display:flex;flex-direction:column;justify-content:center}.dip-layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:30px;align-items:center;width:100%;max-width:1240px;margin:auto}.dip-visual{min-width:0;text-align:center}.dip-visual canvas{display:block;width:100%;height:auto;touch-action:none;max-height:calc(100svh - 235px);object-fit:contain;outline-offset:-3px}.dip-visual canvas:focus-visible{outline:2px solid #aa6449}.dip-visual p{font-size:.8rem;color:#8b806d;line-height:1.5;margin:0 0 10px}.control-caption{color:#8f7a60;font-size:.8rem;letter-spacing:.13em;margin-bottom:20px}.mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 8px}.mode-options button{border:0;background:transparent;color:#80745f;font-family:"DFKai-SB","KaiTi",serif;font-size:.85rem;min-height:80px;padding:0}.mode-options button>span{display:grid;place-items:center;font-family:serif;width:52px;height:52px;border:1px solid #bcb3a2;border-radius:50%;font-size:1.9rem;margin:0 auto 9px;font-weight:300}.mode-options button[aria-pressed=true]{color:#a04030}.mode-options button[aria-pressed=true]>span{background:#fffbf1;border-color:#aa6350;box-shadow:0 3px 12px #a4643520}.dip-actions{display:flex;flex-direction:column;gap:10px;margin:20px 0 0}.dip-controls{padding:12px 0}.dip-controls .fan-note{font-size:.8rem}.dip-controls #free-controls label{margin:8px 0 0}.dip-controls #free-controls input{min-height:32px}#gesture-help{margin-bottom:12px}
#decorate-section{flex:1;display:flex;align-items:center}.decorate-layout{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:6%;max-width:1150px;width:100%;margin:auto}.fan-decoration-preview{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.fan-decoration-preview canvas{width:min(100%,570px);height:auto;max-height:calc(100svh - 240px);object-fit:contain;touch-action:none;cursor:crosshair}.fan-decoration-preview p{font-size:.8rem;color:#887c68;text-align:center;line-height:1.7;margin:6px 0 0;max-width:460px}.decoration-controls{padding:10px 0 20px}.decoration-controls .decorate-tabs{margin-bottom:14px}.decoration-controls h2{font-size:1.35rem}.phrase-options{display:flex;gap:6px;margin-top:6px}.phrase-options button{background:transparent;border:0;color:#8d765d;font-size:.8rem;min-height:44px;padding:5px 8px}.decoration-actions{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.decoration-actions button{font-size:.8rem;padding:8px 10px;min-height:44px}.decoration-controls .primary-button{width:100%;margin-top:16px}.decoration-controls .text-button{font-size:.8rem}#fan-seal-preview{width:105px;height:105px;display:block;margin:0 auto 8px}.stamp-styles button[aria-pressed=true]{border-color:#a34a36;background:#a34a3610;color:#a34a36}.fan-app input[aria-invalid=true]:not(:placeholder-shown){border-color:#b7543b}
#result-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:12px;gap:14px}#fan-result{width:auto;height:calc(100svh - 305px);max-width:90%;min-height:260px;object-fit:contain;box-shadow:0 14px 38px #6c513529}.result-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}#collection-status{font-size:.8rem;color:#85775e;margin:0}#open-png{color:#9d4e38;font-size:.85rem}.fan-app[data-state=RESULT] .fan-heading{margin-top:14px}
#fan-gallery{width:min(960px,calc(100% - 28px));max-height:88svh;border:1px solid #c9bca3;border-radius:12px;padding:26px;background:#f8f1e5;color:#405040;box-shadow:0 25px 100px #45341f44}#fan-gallery::backdrop{background:#22352973}#fan-gallery header{display:flex;align-items:center;justify-content:space-between}#fan-gallery h2{margin:0;font-size:1.6rem}#gallery-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}#gallery-list button{border:1px solid #d7c7a8;border-radius:7px;background:#fff9ed;padding:10px;color:#6c614d}#gallery-list img{width:100%;height:220px;object-fit:contain}#gallery-list span{display:block;padding:9px 0 0;font-size:.875rem}#gallery-detail{text-align:center}#gallery-image{display:block;max-height:60svh;max-width:100%;margin:12px auto 20px}#gallery-status{font-size:.8rem;color:#8a7c62;line-height:1.6}
@media(min-width:900px) and (orientation:landscape){.fan-app{height:100svh;min-height:640px}.fan-heading{margin:16px 0 4px}.dip-controls .mode-options{gap:10px}.dip-layout{gap:20px}.decoration-controls{padding:0}.fan-app input[type=range]{min-height:30px}.fan-app[data-state=STAMP_EDITOR] .fan-heading{margin-top:10px}.fan-app[data-state=STAMP_EDITOR] #fan-seal-preview{width:85px;height:85px}.fan-app[data-state=STAMP_EDITOR] .fan-note{margin:8px 0}.fan-app[data-state=STAMP_EDITOR] .decoration-controls .primary-button{margin-top:8px}.fan-app[data-state=STAMP_EDITOR] .decoration-controls h2{margin-bottom:12px}}
@media(max-width:1100px){.fan-app{padding:14px 22px 10px}.fan-header>img{width:160px}.fan-heading h1{font-size:1.4rem}.dip-layout{grid-template-columns:minmax(0,1fr) 238px;gap:10px}.decorate-layout{grid-template-columns:minmax(0,1fr) 275px;gap:3%}.fan-app .primary-button{font-size:.875rem;padding:12px 15px}.color-dock{gap:5px}.palette{gap:0}}
@media(max-width:899px){.fan-app{padding:16px 22px}.dip-layout{grid-template-columns:1fr;gap:6px}.dip-visual canvas{max-height:45svh}.dip-controls{width:100%;max-width:590px;justify-self:center;padding:0}.mode-options{grid-template-columns:repeat(5,1fr);gap:8px}.mode-options button{font-size:.8rem}.mode-options button>span{width:48px;height:48px}.dip-actions{flex-direction:row;align-items:center;justify-content:center}.dip-controls .control-caption{text-align:center;margin-bottom:12px}.dip-controls #mode-note{text-align:center}.dip-controls #free-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.dip-controls #gesture-help{grid-column:1/-1}.fan-footer{padding-top:24px}.fan-choices{gap:22px}.decorate-layout{grid-template-columns:1fr 270px;gap:3%}.fan-decoration-preview canvas{max-height:55svh}.fan-heading{margin-top:24px}#fan-result{height:calc(100svh - 330px);max-height:65svh}.result-actions{gap:8px}}
@media(max-width:620px){.fan-app{padding:12px 16px}.fan-header{gap:8px}.fan-header>img{width:145px}.fan-brand{display:none}.fan-header .text-button{font-size:.8rem;padding:7px 4px}.fan-heading{margin:22px 0 4px}.fan-heading h1{font-size:1.25rem;letter-spacing:.035em;line-height:1.6}.fan-heading>p:last-child{font-size:.75rem}.fan-choices{gap:10px;margin:25px 0 0}.fan-choices button{width:50%;padding:4px 8px 18px}.fan-choices canvas{max-height:35svh}.fan-choices span{font-size:.75rem}.fan-choices strong{font-size:1.1rem}.fan-note{font-size:.8rem}#fan-select{padding-bottom:22px}.dip-visual canvas{max-height:42svh;width:100%;min-height:210px}.dip-visual p{font-size:.75rem}.mode-options{gap:0}.mode-options button{font-size:.7rem;min-height:85px}.mode-options button>span{width:44px;height:44px;font-size:1.6rem}.dip-actions{flex-direction:column;margin-top:10px}.dip-actions .primary-button{width:100%;max-width:330px}.dip-controls #free-controls{column-gap:14px}.fan-app input[type=range]{min-height:44px}.dip-controls #free-controls input{min-height:44px}.fan-app label{font-size:.8rem}.decorate-layout{grid-template-columns:1fr;gap:18px}.fan-decoration-preview canvas{width:100%;max-height:42svh}.decoration-controls{width:100%;max-width:370px;margin:auto;padding-bottom:12px}.fan-decoration-preview p{font-size:.75rem}.fan-footer{flex-direction:column;text-align:center;gap:6px;padding:20px 0 4px}.fan-footer p{max-width:100%;font-size:.7rem}#fan-result{height:55svh;min-height:300px;max-width:92%}.result-actions{flex-direction:column;width:100%}.result-actions button{width:100%;max-width:340px}#collection-status{font-size:.75rem;text-align:center}#fan-gallery{padding:18px}#gallery-list{grid-template-columns:1fr 1fr;gap:10px}#gallery-list img{height:190px}.custom-color-label{order:3;flex-direction:row;font-size:.75rem}.ink-settings{order:4}.color-dock{gap:8px}.header-actions{gap:0}.header-actions .text-button{font-size:.75rem;padding:5px}.school-wordmark{width:135px}.swatch{min-width:42px}}
@media(prefers-reduced-motion:reduce){.fan-choices button{transition:none}}
.fan-decoration-preview canvas{width:min(100%,570px,calc(100svh - 240px));max-height:none;aspect-ratio:1;height:auto}
@media(max-width:620px){.fan-decoration-preview canvas{width:min(100%,42svh);max-height:none}}

#png-preview{font-size:.8rem;color:#886b4c;text-align:center;width:100%}#png-preview summary{cursor:pointer;min-height:44px;padding:10px}#export-image{display:block;max-width:100%;max-height:75svh;margin:12px auto;height:auto}

.custom-color-label.selected{color:#a34a36}.custom-color-label.selected input{outline:1px solid #a34a36;border-radius:4px}

/* In-page views: no backdrop, modal or separate window. */
.inline-page,#fan-gallery.inline-page{position:static;inset:auto;width:min(960px,100%);max-height:none;min-height:100svh;margin:0 auto;padding:28px;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.inline-page[hidden]{display:none!important}.inline-page header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.inline-page button{min-height:48px}.guide-page{max-width:650px}.inline-page h2{margin:24px 0}.inline-page label{display:block;margin-top:22px}.inline-page input{max-width:100%;min-height:44px}.inline-page input[type=range]{width:100%;display:block}#color-preview{height:100px;border-radius:12px;background:#8c69a6}#custom-color{font:inherit;padding:8px;border:1px solid #b7b1a3;border-radius:6px}#open-color.selected{color:var(--red);outline:1px solid currentColor}.amount-popover{position:static;box-shadow:none;margin-top:8px}.ink-settings[open]{flex-basis:210px}