@import "https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap";:root{--ink:#14261e;--paper:#fff8e8;--paper-deep:#f6ead1;--mint:#78d9c5;--leaf:#1f766d;--butter:#ffd166;--coral:#f26d5b;--sky:#92d8f2;--violet:#9b8cf2;--shadow-ink:#14261e38;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Kalam,PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:radial-gradient(circle at 18px 18px,#1f766d24 0 2px,#0000 2px) 0 0/42px 42px,linear-gradient(135deg,#f26d5b17 0 12%,#0000 12% 50%) 0 0/30px 30px,linear-gradient(#fffaf0 0%,#eef8ef 100%)}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed}img{display:block}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.story-app{min-height:100dvh}.story-app.is-editing{height:100dvh;color:var(--ink);background:radial-gradient(circle at 16px 16px,#1f766d2e 0 2px,#0000 2px) 0 0/42px 42px,linear-gradient(135deg,#ffd16638 0 16%,#0000 16% 50%) 0 0/34px 34px,linear-gradient(#fff8e8 0%,#f5f0de 100%);grid-template-rows:auto minmax(0,1fr) auto;display:grid;overflow:hidden}.story-topbar{z-index:30;padding:max(10px, env(safe-area-inset-top)) clamp(12px, 3vw, 24px) 10px;justify-content:space-between;align-items:center;gap:12px;display:flex}.brand-block{align-items:center;gap:10px;min-width:0;display:flex}.brand-mark{border:3px solid var(--ink);background:var(--mint);width:38px;height:38px;color:var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:8px;flex:none;justify-content:center;align-items:center;display:inline-flex}.brand-block div{gap:2px;min-width:0;display:grid}.brand-block span:not(.brand-mark){color:#14261e9e;font-size:.68rem;font-weight:900}.story-app.is-empty .brand-block span:not(.brand-mark){color:#68766e}.brand-block h1{overflow-wrap:anywhere;color:inherit;margin:0;font-size:clamp(1.08rem,2.8vw,1.35rem);line-height:1.12}.topbar-actions{justify-content:flex-end;align-items:center;gap:8px;min-width:0;display:flex}.topbar-actions button{border:2px solid var(--ink);min-height:38px;color:var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fffdf7;border-radius:999px;justify-content:center;align-items:center;gap:7px;padding:9px 12px;font-weight:900;transition:transform .16s,box-shadow .16s,background .16s;display:inline-flex}.topbar-actions button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.topbar-actions .icon-action{width:42px;min-width:42px;padding:0;position:relative}.count-badge{background:var(--butter);min-width:18px;height:18px;color:var(--ink);border:2px solid #12231b;border-radius:999px;place-items:center;font-size:.66rem;line-height:1;display:grid;position:absolute;top:-4px;right:-3px}.topbar-actions button:disabled{opacity:.4}.topbar-actions .primary-action{border-color:var(--ink);background:var(--butter);color:var(--ink)}.story-main{min-height:0;display:grid}.welcome-screen{align-content:center;gap:28px;width:100%;min-width:0;max-width:1180px;min-height:calc(100dvh - 68px);margin:0 auto;padding:22px clamp(18px,5vw,54px) 44px;display:grid;overflow-x:hidden}.welcome-copy{gap:14px;min-width:0;max-width:760px;display:grid}.welcome-copy>span{color:var(--leaf);font-size:.82rem;font-weight:950}.welcome-copy h2{max-width:760px;color:var(--ink);overflow-wrap:anywhere;word-break:break-word;margin:0;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1}.welcome-copy p{color:#14261eb8;overflow-wrap:anywhere;word-break:break-word;max-width:560px;margin:0;font-size:clamp(1rem,2.4vw,1.18rem);line-height:1.55}.welcome-upload-card{border:3px solid var(--ink);width:min(100%,560px);min-height:146px;color:var(--ink);text-align:left;box-shadow:7px 7px 0 var(--ink);background:radial-gradient(circle at 88% 18%,#ffd1666b 0 24px,#0000 25px),linear-gradient(135deg,#92d8f257,#0000 42%),linear-gradient(#fff8e8 0%,#87decc 100%);border-radius:8px;grid-template-columns:124px minmax(0,1fr);align-items:center;gap:18px;padding:18px;transition:transform .18s,box-shadow .18s;display:grid;position:relative;overflow:hidden;transform:rotate(-.4deg)}.welcome-upload-card:active{box-shadow:3px 3px 0 var(--ink);transform:rotate(-.4deg)translate(3px,3px)}.welcome-upload-card:after{content:"";pointer-events:none;border:2px dashed #14261e5c;border-radius:8px;position:absolute;inset:10px}.upload-card-art{place-items:center;min-height:106px;display:grid;position:relative}.upload-photo-frame{border:3px solid var(--ink);background:#fffdf7bd;border-radius:8px;place-items:center;width:96px;height:96px;display:grid;box-shadow:inset 0 0 0 8px #1f766d1f}.upload-peek-stickers{align-items:flex-end;display:flex;position:absolute;inset:auto -2px -8px auto}.upload-peek-stickers img{object-fit:contain;filter:drop-shadow(0 6px 10px #00000040);width:44px;height:44px;margin-left:-14px}.upload-card-copy{z-index:1;gap:6px;min-width:0;display:grid;position:relative}.upload-card-copy strong{font-size:clamp(1.35rem,4vw,1.85rem);line-height:1.1}.upload-card-copy small{color:#14261eb8;font-size:.9rem;font-weight:800;line-height:1.35}.upload-card-action{z-index:1;border:2px solid var(--ink);width:fit-content;color:var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fffdf7;border-radius:999px;align-items:center;padding:8px 12px;font-size:.82rem;font-weight:950;display:inline-flex;position:relative}.welcome-preview{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;min-width:0;max-width:680px;display:grid}.preview-sticker{background:#fffdf7c7;border:2px solid #14261e2e;border-radius:8px;place-items:center;gap:4px;min-height:132px;padding:10px;display:grid;box-shadow:3px 3px #14261e29}.preview-sticker img{object-fit:contain;width:86px;height:86px}.preview-sticker span{color:#14261eb8;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.76rem;font-weight:850;overflow:hidden}.editor-shell{place-items:center;height:100%;min-height:0;padding:4px clamp(8px,2vw,22px) 8px;display:grid;overflow:hidden}.editor-stage{border:3px solid var(--ink);width:min(100%,920px);max-width:100%;max-height:100%;box-shadow:7px 7px 0 var(--ink);touch-action:none;background:linear-gradient(45deg,#ffffff0a 25%,#0000 25%) 0 0/22px 22px,linear-gradient(45deg,#0000 75%,#ffffff0a 75%) 0 0/22px 22px,#27322d;border-radius:8px;position:relative;overflow:hidden}.editor-stage.has-photo{background:#fffdf7}.photo-layer{object-fit:cover;-webkit-user-select:none;user-select:none;width:100%;height:100%}.stage-upload-button{color:#fffdf7;background:0 0;border:0;place-content:center;gap:10px;display:grid;position:absolute;inset:0}.stage-upload-button span{font-size:1rem;font-weight:950}.placed-sticker{--hit-inset:-14px;--selection-inset:-8px;aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:12px;padding:0;display:block;position:absolute}.placed-sticker:before{inset:var(--hit-inset);content:"";border-radius:18px;position:absolute}.placed-sticker.is-small-sticker{--hit-inset:-34px;--selection-inset:-18px}.placed-sticker img{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%}.placed-sticker.selected{outline:0}.sticker-selection-ring{inset:var(--selection-inset);border:3px dashed var(--butter);filter:drop-shadow(0 2px 6px #00000047);pointer-events:none;border-radius:8px;position:absolute}.sticker-floating-tools{z-index:22;border:3px solid var(--ink);touch-action:manipulation;background:#fffdf7f2;border-radius:999px;justify-content:center;align-items:center;gap:8px;width:120px;min-height:52px;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:5px 5px #14261e33}.sticker-corner-action,.sticker-transform-grip{background:var(--ink);color:#fffdf7;touch-action:none;border:3px solid #fffdf7;border-radius:999px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:inline-flex;box-shadow:0 8px 18px #00000042}.sticker-delete-action{background:var(--coral)}.sticker-copy-action{background:var(--ink)}.sticker-transform-grip{z-index:21;cursor:nwse-resize;position:absolute;transform:translate(-50%,-50%)}.story-bottom-sheet{border-top:3px solid var(--ink);color:var(--ink);padding:8px clamp(10px, 2vw, 18px) max(10px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:radial-gradient(circle at 16px 16px,#f26d5b1a 0 2px,#0000 2px) 0 0/32px 32px,#fff8e8f5;gap:8px;display:grid;box-shadow:0 -8px #14261e1f}.editor-panel{min-width:0;min-height:0;display:grid}.sticker-choice span{gap:2px;min-width:0;padding-right:18px;display:grid}.sticker-choice strong{text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;overflow:hidden}.sticker-choice small{color:#14261ea3;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.sticker-tray{min-width:0}.pack-tabs{scrollbar-width:none;gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.pack-tabs::-webkit-scrollbar{display:none}.sticker-row::-webkit-scrollbar{display:none}.pack-tabs button{color:var(--ink);background:#fffdf7;border:2px solid #14261e2e;border-radius:999px;flex:none;padding:8px 12px;font-size:.82rem;font-weight:950;box-shadow:2px 2px #14261e29}.pack-tabs button.active{border-color:var(--ink);background:var(--butter);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}.tray-heading{justify-content:space-between;align-items:baseline;gap:10px;margin:8px 2px 7px;display:flex}.tray-heading strong{font-size:.9rem}.tray-heading span{color:#14261ea3;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:750;overflow:hidden}.sticker-row{scrollbar-width:none;gap:10px;padding:1px 2px 4px;display:flex;overflow-x:auto}.sticker-choice{border:2px solid #14261e2e;border-bottom:5px solid var(--accent-color);width:112px;min-width:112px;color:var(--ink);text-align:left;background:#fffdf7;border-radius:8px;grid-template-rows:82px auto;gap:6px;padding:8px;transition:transform .15s,box-shadow .15s;display:grid;position:relative;box-shadow:3px 3px #14261e29}.sticker-choice:active{transform:translate(2px,2px)rotate(-.4deg);box-shadow:1px 1px #14261e33}.sticker-choice:disabled{opacity:.45}.sticker-choice img{object-fit:contain;width:100%;height:82px}.sticker-choice.text,.sticker-choice.mark{width:144px;min-width:144px}.sticker-choice svg{color:var(--leaf);position:absolute;bottom:8px;right:8px}.saved-creations-panel{gap:10px;min-width:0;display:grid}.saved-panel-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.saved-panel-heading span{gap:2px;display:grid}.saved-panel-heading strong{font-size:.96rem}.saved-panel-heading small{color:#14261ea3;font-size:.76rem;font-weight:800}.saved-panel-heading button,.saved-card-actions button{border:2px solid var(--ink);background:var(--ink);color:#fffdf7;border-radius:999px;justify-content:center;align-items:center;width:38px;min-height:38px;padding:0;display:inline-flex}.saved-creations-row{scrollbar-width:none;gap:10px;padding:1px 2px 4px;display:flex;overflow-x:auto}.saved-creations-row::-webkit-scrollbar{display:none}.saved-creation-card{background:#fffdf7;border:2px solid #14261e2e;border-radius:8px;grid-template-rows:104px auto auto;gap:7px;width:142px;min-width:142px;padding:8px;display:grid;box-shadow:3px 3px #14261e29}.saved-creation-card img{object-fit:cover;background:#eaf1ec;border-radius:6px;width:100%;height:104px}.saved-creation-card div:not(.saved-card-actions){gap:2px;min-width:0;display:grid}.saved-creation-card span{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:900;overflow:hidden}.saved-creation-card small{color:#14261ea3;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;font-weight:800;overflow:hidden}.saved-card-actions{gap:6px;display:flex}.saved-card-actions button{width:34px;min-height:34px}.empty-saved-panel{color:#14261ea3;border:2px dashed #14261e38;border-radius:8px;place-items:center;min-height:96px;font-size:.84rem;font-weight:850;display:grid}.save-feedback{z-index:80;right:clamp(12px,4vw,28px);bottom:calc(env(safe-area-inset-bottom) + 18px);border:3px solid var(--ink);background:var(--butter);max-width:min(340px,100vw - 24px);color:var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:8px;padding:11px 14px;font-size:.92rem;font-weight:950;position:fixed}@media (width>=900px){.story-app.is-empty{grid-template-rows:auto 1fr;display:grid}.story-app.is-editing{grid-template:"canvas sidebarTop""canvas sidebarPanel"minmax(0,1fr)/minmax(0,1fr) minmax(320px,360px)}.story-app.is-editing .story-topbar{border-left:3px solid var(--ink);color:var(--ink);background:linear-gradient(135deg,#78d9c529 0 18%,#0000 18% 50%) 0 0/28px 28px,#fffdf7;flex-direction:column;grid-area:sidebarTop;align-items:stretch;padding:16px 16px 12px;box-shadow:-8px 0 #14261e1f}.story-app.is-editing .brand-mark{width:34px;height:34px}.story-app.is-editing .brand-block span:not(.brand-mark){color:#14261e9e}.story-app.is-editing .brand-block h1{font-size:1rem}.story-app.is-editing .topbar-actions{flex-wrap:wrap;justify-content:flex-start}.story-app.is-editing .topbar-actions button{border-color:var(--ink);min-height:36px;color:var(--ink);background:#f4f7e9}.story-app.is-editing .topbar-actions .icon-action{width:38px;min-width:38px}.story-app.is-editing .topbar-actions .primary-action{border-color:var(--ink);background:var(--butter);color:var(--ink);flex:116px}.story-app.is-editing .story-main{grid-area:canvas}.story-app.is-editing .editor-shell{padding:18px}.story-app.is-editing .story-bottom-sheet{border-top:0;border-left:3px solid var(--ink);min-height:0;box-shadow:none;background:radial-gradient(circle at 16px 16px,#f26d5b1a 0 2px,#0000 2px) 0 0/32px 32px,#fffdf7;grid-area:sidebarPanel;padding:4px 16px 16px;overflow:hidden}.story-app.is-editing .editor-panel,.story-app.is-editing .sticker-tray{height:100%}.story-app.is-editing .sticker-tray{grid-template-rows:auto auto minmax(0,1fr);display:grid}.story-app.is-editing .pack-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid;overflow:visible}.story-app.is-editing .pack-tabs button{text-align:center;padding:8px 10px}.story-app.is-editing .tray-heading{margin:12px 2px 8px}.story-app.is-editing .sticker-row{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;padding:2px 2px 8px;display:grid;overflow:hidden auto}.story-app.is-editing .sticker-choice{grid-template-rows:92px auto;width:100%;min-width:0}.story-app.is-editing .sticker-choice img{height:92px}.story-app.is-editing .sticker-choice.text,.story-app.is-editing .sticker-choice.mark{width:100%;min-width:0}.welcome-screen{grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center}.welcome-preview{justify-self:end}}@media (width<=760px){.story-topbar{align-items:center;gap:8px;padding-bottom:8px}.brand-mark{width:34px;height:34px}.story-app.is-editing .brand-block span:not(.brand-mark){display:none}.story-app.is-editing .brand-block h1{font-size:1.08rem}.topbar-actions{gap:6px}.topbar-actions button{gap:5px;min-height:34px;padding:8px 9px;font-size:.78rem}.topbar-actions .icon-action{width:36px;min-width:36px;padding:0}.topbar-actions .primary-action{min-width:76px;padding-inline:11px}.welcome-screen{align-content:start;padding-top:20px}.welcome-copy,.welcome-preview{max-width:340px}.welcome-upload-card{grid-template-columns:92px minmax(0,1fr);gap:12px;min-height:128px;padding:14px}.upload-photo-frame{width:74px;height:74px}.upload-peek-stickers img{width:34px;height:34px;margin-left:-12px}.welcome-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-sticker{min-height:118px}.editor-shell{place-items:start center;padding:2px 0 6px}.editor-stage{border-radius:12px}.story-bottom-sheet{max-height:158px;padding-top:7px;overflow:hidden}.story-app.is-editing .save-feedback{right:12px;bottom:calc(env(safe-area-inset-bottom) + 172px);left:12px}.tray-heading{display:none}.sticker-choice{grid-template-rows:50px auto;gap:5px;width:80px;min-width:80px;padding:7px}.sticker-choice img{height:50px}.sticker-choice.text,.sticker-choice.mark{width:108px;min-width:108px}.sticker-choice strong{font-size:.8rem}.sticker-choice small{font-size:.68rem}}@media (width<=430px){.story-topbar{padding-inline:10px}.brand-block h1{font-size:.98rem}.welcome-copy h2{font-size:2.05rem;line-height:1.02}.welcome-copy p{font-size:.96rem}}