: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 rgba(200,160,90,.333);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}.studio-mode{max-width:1180px;color:var(--muted);align-items:center;gap:8px;margin:10px auto 0;padding:0 16px;font-size:13px;display:flex}.studio-mode button{border:1px solid var(--line);min-height:38px;color:var(--ink);font:inherit;cursor:pointer;background:#fff9eb;border-radius:999px;padding:6px 14px}.studio-mode button[aria-pressed=true]{color:#f5e8d0;background:#2a1c12;border-color:#2a1c12}.studio-mode button:disabled{opacity:.5;cursor:not-allowed}#digitalStudio{flex-direction:column;flex:1;min-height:0;display:flex}#digitalStudio[hidden],#paperStudio[hidden],#paperPhotoPanel[hidden],#paperPreviewPanel[hidden],#paperStageLink[hidden]{display:none!important}.paper-studio{flex:1;width:100%;max-width:1180px;min-height:0;margin:10px auto 0;padding:0 16px 20px;overflow:auto}.paper-studio-heading{justify-content:space-between;align-items:end;gap:14px;display:flex}.paper-studio-heading span{color:var(--muted);letter-spacing:.08em;font-size:12px}.paper-studio-heading h2{margin:2px 0 0;font-size:24px}.paper-studio-heading .status{text-align:right;margin:0}.paper-steps{flex-wrap:wrap;gap:7px;margin:10px 0;display:flex}.paper-steps span{color:#79512d;background:#efe2c9;border-radius:999px;padding:5px 10px;font-size:12px}.paper-card{border:1px solid var(--line);background:#fff9eb;border-radius:12px;margin:10px 0;padding:14px}.paper-card h3{margin:0;font-size:18px}.paper-card p{color:var(--muted);margin:3px 0 10px;font-size:13px}.paper-print-card,.paper-capture-card{grid-template-columns:minmax(180px,1fr) minmax(220px,360px) auto;align-items:center;gap:14px;display:grid}.paper-capture-card{grid-template-columns:1fr auto}.paper-card canvas{background:#fffaf0;border:1px solid #d9c39a;max-width:100%;max-height:390px;margin:0 auto;display:block}.paper-actions{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.paper-actions button,.paper-actions a{color:#f5e8d0;min-height:42px;font:inherit;cursor:pointer;background:#2a1c12;border:1px solid #a67c3a;border-radius:8px;padding:7px 13px;text-decoration:none}.paper-actions .paper-secondary,.paper-secondary{color:var(--ink);border-color:var(--line);background:#fff}.paper-actions .paper-primary{background:#a52b20;border-color:#a52b20}.paper-photo-card,.paper-preview-card{grid-template-columns:minmax(180px,.6fr) minmax(280px,1fr) auto;align-items:center;gap:14px;display:grid}.paper-photo-frame{background:#2a1c12;border-radius:8px;min-width:0;max-height:520px;position:relative;overflow:auto}.paper-photo-frame canvas{touch-action:none;max-height:520px;margin:0 auto}.paper-corners{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.paper-corner-button{color:#24170e;pointer-events:none;background:#f0b94d;border:3px solid #f0b94d;border-radius:50%;width:42px;height:42px;font:700 16px sans-serif;position:absolute;transform:translate(-50%,-50%)}.paper-stage-link{align-self:center}.design-brief{border:1px solid var(--line);background:#fff9eb;border-radius:10px;grid-template-columns:170px 145px minmax(180px,1fr) minmax(180px,1fr) 260px;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-switcher{min-width:0}.draft-switcher>span{color:var(--muted);margin-bottom:3px;font-size:12px;display:block}.draft-actions{grid-template-columns:1fr 1fr;gap:6px;display:grid}.draft-actions button{border:1px solid var(--line);min-height:48px;color:var(--ink);text-align:left;white-space:nowrap;background:#fff;border-radius:9px;align-items:center;gap:7px;padding:5px 8px;font:13px inherit;transition:background .15s,border-color .15s,box-shadow .15s;display:flex}.draft-actions button>strong{color:#79512d;background:#efe2c9;border-radius:50%;flex:0 0 29px;place-items:center;width:29px;height:29px;font:700 15px/1 inherit;display:grid}.draft-actions button>span,.draft-actions button small{display:block}.draft-actions button small{color:var(--muted);margin-top:2px;font-size:10px}.draft-actions button[aria-pressed=true]{background:#fff2d7;border-color:#a52b20;box-shadow:0 0 0 2px rgba(165,43,32,.1)}.draft-actions button[aria-pressed=true]>strong{color:#fff;background:#a52b20}.draft-actions button[aria-pressed=true] small{color:#8e2b20;font-weight:700}.draft-actions button:disabled{cursor:wait;opacity:.65}.draft-hint{color:var(--muted);margin-top:3px;font-size:10px;display:block}.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:radial-gradient(circle at 50% 45%,#71345e 0,#4a2149 42%,#26152f 100%);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 rgba(200,160,90,.533)}.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 (max-width:800px){.studio-mode{overflow-x:auto}.paper-studio-heading{flex-direction:column;align-items:start}.paper-studio-heading .status{text-align:left;margin:0}.paper-print-card,.paper-capture-card,.paper-photo-card,.paper-preview-card{flex-direction:column;align-items:stretch;display:flex}.paper-card canvas{max-height:480px}.design-brief{grid-template-columns:1fr 1fr;margin-left:16px;margin-right:16px}.design-brief>div:first-child,.design-brief label:nth-of-type(2),.design-brief label:nth-of-type(3),.design-brief .draft-switcher{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 (min-width:768px) and (max-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}.studio-mode{margin:4px 12px 0;padding:0}.studio-mode button{min-height:40px}.paper-studio{max-width:none;padding:0 12px calc(12px + env(safe-area-inset-bottom));margin:5px 0 0}.paper-card{margin:7px 0;padding:10px}.paper-card canvas{max-height:270px}.paper-print-card,.paper-capture-card{grid-template-columns:minmax(180px,1fr) minmax(220px,300px) auto;gap:8px}.paper-photo-card,.paper-preview-card{grid-template-columns:minmax(160px,.6fr) minmax(280px,1fr) auto;gap:8px}.paper-photo-frame,.paper-photo-frame canvas{max-height:330px}.paper-actions{justify-content:center}.design-brief{grid-template-columns:130px 120px minmax(150px,1fr) minmax(150px,1fr) 220px;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:rgba(42,28,18,.88);border-radius:999px;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:5px 10px;font-size:13px;display:block;position:-webkit-sticky;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:rgba(251,248,242,.9);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 rgba(58,42,24,.1)}.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-x:auto;overflow-y: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 (min-width:768px) and (max-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}}body.paper-mode{height:auto;overflow:auto}html:has(body.paper-mode){height:auto;overflow:auto}.paper-mode .design-brief,.paper-mode .whole-intro{display:none}.paper-mode #paperStatus{border-radius:0;max-width:none;position:static}.paper-mode .paper-card{flex-wrap:wrap;align-items:center;display:flex}.paper-mode .paper-card>div:first-child{flex:260px}.paper-mode .paper-card canvas{object-fit:contain;max-width:100%;height:auto}.paper-mode .paper-photo-frame{max-height:none;overflow:visible}.paper-mode .paper-photo-frame canvas{width:auto;max-width:100%;max-height:520px}.paper-mode .paper-corners{display:none}.paper-mode select{max-width:100%;min-height:44px}.paper-mode .paper-preview-card details{width:100%}@media print{@page{size:A4 portrait;margin:0}html,body.paper-mode{background:#fff;width:210mm;height:auto;margin:0;padding:0;overflow:visible}body.paper-mode *{visibility:hidden}body.paper-mode #paperWorksheetCanvas{visibility:visible;position:absolute;top:0;left:0;width:210mm!important;max-width:none!important;height:280mm!important;max-height:none!important}body.paper-mode>:not(#paperStudio),body.paper-mode #paperStudio>:not(.paper-print-card),body.paper-mode .paper-print-card>:not(#paperWorksheetCanvas){display:none!important}body.paper-mode #paperStudio,body.paper-mode .paper-print-card{border:0;width:210mm;height:280mm;margin:0;padding:0;display:block}}