:root {font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#eee7db;background:#191a1d;font-synthesis:none;-webkit-font-smoothing:antialiased;--panel:#232427;--border:#414039;--muted:#9a9690;--accent:#ddba8a;--ink:#eee6d7;--ui:#28292d}
*{box-sizing:border-box}html{min-width:320px}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit}
.app-shell{min-height:100vh;min-height:100dvh;max-width:1920px;margin:0 auto}.app-header{height:94px;border-bottom:1px solid #353533;display:flex;align-items:center;justify-content:space-between;padding:0 3.05%;gap:16px}.brand-lockup{display:flex;gap:15px;align-items:center}.brand-mark{height:46px;width:46px;border-radius:13px;display:grid;place-items:center;background:#cba576;color:#2c2721;font-size:25px;box-shadow:0 3px 17px #0005;transform:rotate(-7deg)}.brand-name{font-weight:740;letter-spacing:.065em;font-size:18px;white-space:nowrap}.brand-name span{font-weight:600;letter-spacing:.22em;margin-left:12px;color:#a8a39a;font-size:11px}.brand-lockup p{color:#a19b90;font-size:11px;letter-spacing:.18em;margin:7px 0 0}.header-actions{display:flex;align-items:center;gap:12px}.header-note{font-size:10px;letter-spacing:.22em;color:#77746f;margin-right:16px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:8px;border:1px solid transparent;min-height:43px;padding:10px 15px;transition:background .16s,border-color .16s,color .16s,transform .16s;text-decoration:none;font-size:13px;font-weight:670}.button:active:not(:disabled){transform:translateY(1px)}.button-sm{min-height:36px;padding:8px 13px;font-size:12px}.button-primary{background:#d9b486;color:#28231f;border-color:#e2c29d;box-shadow:inset 0 1px #ffffff42}.button-primary:hover:not(:disabled){background:#f0c99b}.button-ghost{color:#d4cec4;background:#27282b;border-color:#51504b}.button-ghost:hover{background:#38383a}.button-muted{color:#d0c8bb;background:#3a3733;border-color:#575046}.button-quiet{background:transparent;color:#e1a79e;border-color:#644b45}.button-outline{border-color:#62574b;color:#ead8c0;background:transparent}.button-outline:hover{background:#34312d}.button-wide{width:100%;min-height:47px}.button-arrow{margin-left:auto;font-size:18px;font-weight:400}
.workspace{display:grid;grid-template-columns:minmax(300px,340px) minmax(430px,1fr) minmax(280px,302px);gap:0;min-height:calc(100vh - 146px)}.panel{background:var(--panel)}.source-panel{border-right:1px solid #393936}.design-panel{border-left:1px solid #393936}.panel-header{padding:32px 26px 24px;border-bottom:1px solid #393936}.eyebrow{font-size:10px;letter-spacing:.2em;color:#b69e7b;font-weight:700}.panel-header h1,.panel-header h2{font-size:22px;font-weight:650;letter-spacing:.025em;line-height:1.34;margin:14px 0 10px}.panel-header p{color:#a7a19a;font-size:12px;margin:0;line-height:1.7}.heading-star{font-size:19px;color:#d0a979;padding-left:5px}.panel-body{padding:25px 24px}.field-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#ddd7cc;font-weight:650;letter-spacing:.04em;margin:0 0 12px}.field-label span,.control-heading span:last-child{font-size:9px;letter-spacing:.16em;color:#8f8981;font-weight:650}.field-input,.select-mini{border:1px solid #525049;background:#2e2f30;color:#e7dfd2;border-radius:7px;width:100%;padding:11px 12px;min-height:43px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='m3 5 4 4 4-4' stroke='%23cabdab' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;font-size:13px}.field-input:focus,.source-textarea:focus{border-color:#b79c77;outline:none}.input-meta{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.input-meta .field-label{margin:0 0 12px}.counter{font-size:10px;color:#aaa196;font-variant-numeric:tabular-nums}.source-textarea{width:100%;resize:vertical;min-height:295px;max-height:640px;line-height:1.9;letter-spacing:.018em;border:1px solid #525049;background:#2e2f31;color:#eee5d7;border-radius:9px;padding:15px 16px;font-size:13px}.source-textarea::placeholder{color:#8f8c87}.source-toolbar{display:flex;align-items:center;justify-content:space-between;margin:12px 0 21px}.source-toolbar label{font-size:11px;color:#a8a19a}.select-mini{width:auto;min-height:32px;padding:6px 29px 6px 9px;font-size:11px;background-position:right 8px center}.source-alt{display:flex;justify-content:center;align-items:center;gap:11px;margin:17px 0 22px;color:#706f6b;font-size:11px}.link-button{padding:4px 0;border:0;background:transparent;color:#c7b398;font-size:11px;text-decoration:underline;text-decoration-color:#7b6957;text-underline-offset:4px}.link-button:hover{color:#f5d8ad}.privacy-note{display:flex;gap:11px;background:#2b2d2b;border:1px solid #42473e;border-radius:8px;padding:12px;color:#b3b4a8;font-size:10px;line-height:1.8}.privacy-icon{color:#98b195;font-size:18px;line-height:1.25}
.studio-panel{background:#191a1d;display:flex;flex-direction:column;min-width:0}.studio-top{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:30px 31px 18px}.studio-top h2{font-size:20px;font-weight:600;margin:9px 0 0}.hand-scribble{color:#c6a77e;font-weight:400}.preview-state{white-space:nowrap;display:flex;align-items:center;gap:8px;font-size:10px;color:#bcb5a6;background:#2b2b2c;border:1px solid #42423b;border-radius:24px;padding:8px 12px}.status-dot{width:6px;height:6px;background:#b0b98b;border-radius:50%}.canvas-stage{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:6px 35px 30px;overflow:hidden}.paper-wrap{width:min(100%,680px);border-radius:2px;position:relative;box-shadow:0 22px 57px #0008,8px 5px 0 #ffffff08,0 0 0 1px #fff2}.paper-wrap::after{position:absolute;content:"";inset:0;pointer-events:none;box-shadow:inset 0 0 14px #9e6b2615}.paper-wrap canvas{width:100%;height:auto;aspect-ratio:820/1160;display:block;border-radius:2px;touch-action:pan-y;cursor:default}.paper-wrap canvas.sticker-hover{cursor:grab}.paper-wrap canvas.sticker-drag{cursor:grabbing}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 32px 18px;color:#96918b;border-top:1px solid #323230;gap:10px}.page-controls{display:flex;align-items:center;gap:14px}.page-count{font-size:12px;letter-spacing:.12em;color:#d3c2aa;font-variant-numeric:tabular-nums}.icon-button{border:1px solid #565149;border-radius:7px;background:#2d2c2c;color:#e6d9c4;width:32px;height:32px;font-size:25px;line-height:22px}.icon-button:disabled{opacity:.28}.toolbar-hint,.zoom-group{font-size:10px;letter-spacing:.09em}.zoom-group{color:#b2aaa0}
.design-panel .panel-header{padding:32px 22px 23px}.design-panel .panel-header h2{font-size:19px}.design-content{padding:0 22px 25px}.controls-section{padding:21px 0 20px;border-bottom:1px solid #3e3b37}.control-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px;font-size:12px;color:#e5ded2;font-weight:650}.paper-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.paper-choice{border:1px solid transparent;border-radius:5px;padding:2px;background:transparent;color:#b9b0a5;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:9px;white-space:nowrap}.paper-swatch{display:block;width:100%;aspect-ratio:1;border-radius:4px;border:2px solid #fff2;box-shadow:0 2px 5px #0003}.paper-choice[aria-pressed="true"] .paper-swatch{outline:2px solid #d6b082;outline-offset:2px}.paper-choice[aria-pressed="true"]{color:#f3d6b0}.ink-options{display:flex;gap:13px;flex-wrap:wrap}.ink-choice{border:2px solid transparent;border-radius:50%;padding:3px;background:transparent;display:block}.ink-choice span{display:block;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 1px #ffffff14}.ink-choice[aria-pressed="true"]{border-color:#e0bc90}.range-control{margin:18px 0 0}.range-control label{display:flex;justify-content:space-between;color:#bcb4a9;font-size:11px;align-items:center}.range-control output{font-size:11px;font-variant-numeric:tabular-nums;color:#dac09b}.range-control input{width:100%;accent-color:#d0ad7f;margin:11px 0 0;cursor:pointer}.sticker-options{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.sticker-choice{border:1px solid #575044;background:#302f2b;color:#e6caaa;font-size:20px;border-radius:7px;min-height:42px}.sticker-choice:hover{background:#4b4034}.microcopy{font-size:10px;line-height:1.75;color:#a29b91;margin:10px 0 0}.sticker-tools{padding:14px;margin-top:13px;background:#2b2b29;border:1px solid #565046;border-radius:9px}.selected-caption{font-size:11px;color:#e0c7a3}.selected-caption span{font-weight:650}.sticker-actions{display:flex;gap:6px;margin-top:15px}.sticker-actions .button{flex:1;font-size:11px;padding:7px}.text-editor{border-bottom:1px solid #3e3b37;padding:23px 0}.text-editor summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#e5ded2;font-size:12px;font-weight:650}.text-editor summary::-webkit-details-marker{display:none}.text-editor summary span{font-size:9px;letter-spacing:.18em;color:#8f8981}.text-editor[open] summary{margin-bottom:15px}.editor-fields{display:grid;gap:11px}.edit-field{display:grid;gap:7px}.edit-field label{font-size:10px;color:#b8b0a4}.edit-field input,.edit-field textarea{background:#2d2d2d;border:1px solid #555047;border-radius:6px;width:100%;min-width:0;color:#eee4d5;font-size:12px;line-height:1.55;padding:9px;resize:vertical}.edit-field textarea{min-height:70px}.export-section{padding-top:23px}.export-options{display:flex;gap:12px;justify-content:space-between;margin-bottom:15px}.export-options label{display:flex;gap:6px;align-items:center;color:#bdb5ab;font-size:11px}.export-options select{flex:1}.export-section .button+.button{margin-top:9px}
.app-footer{height:52px;border-top:1px solid #353533;padding:0 3.05%;display:flex;align-items:center;justify-content:space-between;color:#797671;font-size:9px;letter-spacing:.16em;gap:16px}.toast{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,18px);background:#f0dfc3;color:#382e23;border-radius:10px;padding:12px 18px;max-width:min(480px,90vw);box-shadow:0 12px 35px #0007;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:9;font-size:12px;line-height:1.6}.toast.visible{opacity:1;transform:translate(-50%,0)}.toast.error{background:#f3d7d1;color:#6a2923}
@media(max-width:1310px){.workspace{grid-template-columns:minmax(275px,315px) minmax(400px,1fr) minmax(265px,286px)}.panel-header{padding:27px 20px}.panel-body{padding:22px 19px}.design-panel .panel-header{padding:27px 17px}.design-content{padding:0 17px 20px}.canvas-stage{padding:10px 25px 25px}}
@media(max-width:1050px){.workspace{grid-template-columns: minmax(280px,340px) minmax(370px,1fr);align-items:stretch}.source-panel{grid-column:1;grid-row:1;border-right:1px solid #393936}.studio-panel{grid-column:2;grid-row:1/3}.design-panel{grid-column:1;grid-row:2;border-left:0;border-right:1px solid #393936;border-top:1px solid #393936}.paper-options{gap:9px}}
@media(max-width:715px){.app-header{height:73px;padding:0 17px}.brand-mark{width:37px;height:37px;border-radius:11px}.brand-lockup{gap:10px}.brand-name{font-size:16px}.brand-name span{font-size:9px;letter-spacing:.1em;margin-left:5px}.brand-lockup p{font-size:10px;margin-top:4px}.header-note{display:none}.header-actions{gap:7px}.header-actions .button{padding:7px 9px;min-height:34px}.workspace{display:flex;flex-direction:column}.source-panel{border-right:0}.panel-header{padding:25px 20px 20px}.panel-body{padding:21px 20px}.source-textarea{min-height:210px}.studio-panel{border-top:1px solid #3e3e3a}.studio-top{padding:25px 20px 16px}.studio-top h2{font-size:19px}.canvas-stage{padding:5px 19px 23px}.paper-wrap{width:min(100%,525px)}.canvas-toolbar{padding:13px 20px}.toolbar-hint{display:none}.design-panel{border-right:0;border-top:1px solid #3e3e3a}.design-panel .panel-header{padding:25px 20px 20px}.design-content{padding:0 20px 27px}.controls-section{padding:22px 0}.paper-options{gap:12px}.paper-choice{font-size:10px}.ink-choice span{width:30px;height:30px}.sticker-choice{min-height:45px}.app-footer{height:auto;min-height:69px;padding:18px 20px;justify-content:center;flex-wrap:wrap;text-align:center;gap:10px}.app-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

@media(max-width:715px){.source-textarea,.field-input,.select-mini,.edit-field input,.edit-field textarea{font-size:16px}}