:root{--paper:#fbf8f2;--ink:#3a2a18;--muted:#8a6a45;--gold:#c8a05a;--line:#d9c39a;--stage:#1a120c}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);background:#f3ead8;margin:0;font:16px/1.5 Songti SC,Noto Serif TC,Noto Serif SC,serif}body.color-page{flex-direction:column;min-height:100%;display:flex}.topbar{color:#f5e8d0;background:#2a1c12;flex:none;align-items:center;gap:12px;padding:10px 16px;display:flex}.topbar a{color:#d9c39a;text-decoration:none}.topbar .seal{border:1px solid var(--gold);width:28px;height:28px;color:var(--gold);border-radius:50%;place-items:center;font-size:14px;display:grid}.char-tabs{flex-wrap:wrap;gap:6px;margin-left:auto;display:flex}.char-tabs button{color:#d9c39a;font:inherit;cursor:pointer;background:0 0;border:1px solid #c8a05a55;border-radius:999px;padding:4px 12px}.char-tabs button[aria-pressed=true]{color:#1a120c;background:#c8a05a}.whole-intro{color:var(--muted);margin:8px 16px 0;font-size:14px}.design-brief{border:1px solid var(--line);background:#fff9eb;border-radius:10px;grid-template-columns:180px 150px 1fr 1fr auto;align-items:end;gap:10px;max-width:1180px;margin:10px auto 0;padding:12px 16px;display:grid}.design-brief>div:first-child span,.design-brief>div:first-child strong{display:block}.design-brief>div:first-child span{color:var(--muted);letter-spacing:.08em;font-size:11px}.design-brief label{color:var(--muted);font-size:12px}.design-brief input,.design-brief select{border:1px solid var(--line);width:100%;min-height:40px;color:var(--ink);background:#fff;border-radius:7px;margin-top:3px;padding:7px 9px;font:14px inherit;display:block}.draft-actions{gap:5px;display:flex}.draft-actions button{border:1px solid var(--line);min-height:40px;color:var(--ink);white-space:nowrap;background:#fff;border-radius:7px;font:13px inherit}.student-mode .whole-intro{color:#79512d;font-weight:600}.whole-workspace{flex:1;gap:18px;width:100%;max-width:1180px;min-height:0;margin:8px auto 0;padding:0 16px;display:flex}.art-reference{text-align:center;width:22%;min-width:120px;max-width:240px}.part-navigator,.canvas-caption{display:none}.art-reference h2{color:#8a5a2a;margin:6px 0;font-size:16px}.art-reference p{color:var(--muted);font-size:13px}.art-reference img{border:1px solid var(--line);background:#2a1c12;border-radius:8px;width:100%}.whole-paper{background:var(--paper);border:1px solid var(--line);border-radius:12px;flex:1;justify-content:center;align-items:center;min-width:0;min-height:280px;padding:12px;display:flex;position:relative;overflow:auto}.sheet-stack{display:block;position:relative}.sheet-stack canvas{touch-action:none;display:block}#guideCanvas{pointer-events:none;position:absolute;top:0;left:0}.status{color:var(--muted);min-height:1.4em;margin:6px 16px;font-size:13px}.status.is-error{color:#b33}.whole-tools{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:10px 12px 16px;display:flex}.tool-row{align-items:center;gap:6px;display:flex}.tool-view{display:none}.whole-tools button,.whole-tools a.btn{font:inherit;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:8px;align-items:center;min-height:40px;padding:6px 12px;text-decoration:none;display:inline-flex}#stamp{display:none}.student-mode #stamp{display:inline-flex}.whole-tools button[aria-pressed=true]{background:#c8a05a;border-color:#a67c3a}.tool-label{color:var(--muted);white-space:nowrap;font-size:14px}.stamp-tools{background:#f7efdf;border:1px solid #e1cfaa;border-radius:10px;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 8px;display:none}.student-mode .stamp-tools{display:flex}.stamp-tools button{border-radius:999px;min-height:34px;padding:4px 9px}.palette{flex-wrap:wrap;gap:6px;max-width:280px;display:flex}.swatch{border:2px solid #fff;border-radius:50%;width:32px;height:32px;min-height:0;padding:0;box-shadow:0 0 0 1px #c8a05a88}.swatch.active{box-shadow:0 0 0 2px #3a2a18}a.primary-done{color:#f5e8d0;background:#2a1c12;border-color:#c8a05a}.credit{text-align:center;color:var(--muted);letter-spacing:.06em;flex:none;margin:0 0 10px;font-size:12px}.credit a{color:#8a5a2a}@media (width<=800px){.design-brief{grid-template-columns:1fr 1fr;margin-inline:16px}.design-brief>div:first-child,.design-brief label:nth-of-type(2),.design-brief label:nth-of-type(3){grid-column:1/-1}.whole-workspace{flex-direction:column}.art-reference{text-align:left;align-items:center;gap:12px;width:100%;max-width:none;display:flex}.art-reference img{width:88px}}@media (width>=768px) and (width<=1366px) and (orientation:landscape){html,body{overflow:hidden}body.color-page{height:100dvh;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.topbar{gap:10px;min-height:58px;padding:8px 14px}.topbar>strong{white-space:nowrap;font-size:17px}.topbar>a{align-items:center;min-height:44px;padding:0 6px;display:inline-flex}.topbar .seal{flex:none;width:36px;height:36px}.char-tabs{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}.char-tabs::-webkit-scrollbar{display:none}.char-tabs button{white-space:nowrap;min-height:44px;padding:7px 10px}.whole-intro{display:none}.design-brief{grid-template-columns:150px 130px 1fr 1fr auto;max-width:none;margin:7px 12px 0;padding:7px 10px}.design-brief input,.design-brief select,.draft-actions button{min-height:36px}.whole-workspace{flex:1;grid-template-columns:176px minmax(0,1fr);gap:12px;max-width:none;min-height:0;margin:10px 0 0;padding:0 12px;display:grid}.art-reference{text-align:left;flex-direction:column;gap:10px;width:auto;min-width:0;max-width:none;min-height:0;display:flex}.reference-card{border-bottom:1px solid #d9c39a;grid-template-columns:68px 1fr;align-items:center;gap:8px;padding-bottom:10px;display:grid}.reference-card h2{grid-column:1/-1;margin:0;font-size:14px}.art-reference .reference-card img{border-radius:6px;width:68px}.art-reference .reference-card p{margin:0;font-size:11px;line-height:1.45}.part-navigator{flex-direction:column;flex:1;min-height:0;display:flex}.part-nav-heading{color:#79512d;justify-content:space-between;align-items:baseline;margin-bottom:6px;display:flex}.part-nav-heading span{color:var(--muted);font-size:11px}.part-buttons{flex-direction:column;gap:6px;min-height:0;padding:2px 4px 10px 0;display:flex;overflow-y:auto}.part-buttons button{color:#5b4025;text-align:left;background:#fbf8f2;border:1px solid #d9c39a;border-radius:8px;min-height:44px;padding:8px 12px;font:15px/1.2 inherit}.part-buttons button[aria-pressed=true]{color:#f5e8d0;background:#3a2a18;border-color:#3a2a18}.whole-paper{overscroll-behavior:contain;scroll-behavior:smooth;border-radius:10px;justify-content:flex-start;align-items:flex-start;min-height:0;padding:0}.canvas-caption{z-index:3;color:#f5e8d0;pointer-events:none;background:#2a1c12e0;border-radius:999px;width:max-content;padding:5px 10px;font-size:13px;display:block;position:sticky;top:12px;left:14px}.sheet-stack{flex:none}.status{left:196px;bottom:calc(126px + env(safe-area-inset-bottom));z-index:5;pointer-events:none;background:#fbf8f2e6;border-radius:999px;max-width:48vw;margin:0;padding:4px 10px;font-size:12px;position:fixed}.whole-tools{min-height:96px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#eadfc9;border-top:1px solid #d0b77f;flex:none;grid-template:"primary palette view actions"46px"size palette stamp actions"46px/250px minmax(230px,1fr) 160px 130px;justify-content:stretch;gap:6px 10px;display:grid;box-shadow:0 -5px 16px #3a2a181a}.tool-primary{grid-area:primary}.tool-size{grid-area:size}.palette{grid-area:palette;align-content:center;max-width:none}.stamp-tools{background:0 0;border:0;flex-wrap:nowrap;grid-area:stamp;height:46px;min-height:0;padding:0;overflow:auto hidden}.tool-view{grid-area:view;display:flex}.tool-actions{grid-area:actions;grid-template-columns:1fr 1fr;align-items:stretch;display:grid}.tool-actions .primary-done{grid-column:1/-1}.whole-tools button,.whole-tools a.btn{justify-content:center;min-width:48px;min-height:46px;padding:7px 12px;font-size:15px}.swatch{width:42px;min-width:42px;height:42px;min-height:42px}.stamp-tools button{white-space:nowrap;min-height:42px}.tool-actions .primary-done{white-space:nowrap;min-height:50px}.credit{display:none}}@media (width>=768px) and (width<=1100px) and (orientation:portrait){body.color-page:before{content:"請將 iPad 打橫，先可以完整使用畫布同全部工具。";text-align:center;color:#fff9eb;background:#a52a24;flex:none;padding:9px 16px;font-size:14px;font-weight:800;display:block}}