@import"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap";:root{color-scheme:light;font-family:Noto Sans SC,Inter,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color:#343b43;background:#f5efe6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg: #f5efe6;--surface: rgba(252, 248, 242, .82);--surface-strong: #ffffff;--ink: #343b43;--muted: #6a6866;--line: rgba(115, 108, 99, .22);--line-strong: rgba(82, 77, 71, .28);--accent: #2b6f89;--accent-soft: rgba(43, 111, 137, .12);--shadow: 0 18px 48px -26px rgba(36, 44, 52, .24), 0 10px 20px -16px rgba(36, 44, 52, .14);--shadow-hover: 0 20px 46px -18px rgba(36, 44, 52, .22), 0 12px 24px -18px rgba(36, 44, 52, .14);--radius-lg: 1rem;--radius-xl: 1.25rem;--radius-2xl: 1.5rem}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100vh;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{border:none;background:none;cursor:pointer}img{display:block;max-width:100%}.app-shell{min-height:100vh;padding:max(18px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom))}.screen{width:min(1200px,100%);margin:0 auto}.home-screen,.editor-screen{display:grid;gap:18px;padding:18px 0 32px}.editor-screen{width:100%;max-width:none;gap:16px}.editor-reference-screen{gap:0}.hero-card,.image-strip-card,.preview-frame,.panel-card,.export-sheet,.editor-header{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.hero-card,.editor-header,.image-strip-card,.panel-card,.preview-frame,.export-sheet{border-radius:var(--radius-2xl)}.hero-card{display:grid;gap:28px;padding:clamp(40px,6vw,80px) clamp(28px,4vw,56px);min-height:260px;align-content:center}.hero-copy h1,.editor-header h1,.export-sheet h2{margin:8px 0 10px;font-family:Noto Sans SC,Inter,sans-serif;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.03em}.hero-text,.editor-subcopy,.section-head p,.panel-note,.sheet-head p,.image-chip-meta,.sample-caption,.control-card strong,.canvas-meta{color:var(--muted)}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--accent)}.hero-actions,.editor-header-actions,.sheet-actions,.toggle-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.toolbar-group{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.primary-button,.secondary-button,.icon-chip,.toggle-pill,.choice-card,.image-chip,.add-chip{border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.primary-button{padding:14px 20px;min-height:44px;background:#366b7d;color:#fff;font-weight:600}.primary-button.compact,.secondary-button.compact{padding:11px 16px}.secondary-button,.icon-chip,.toggle-pill{padding:11px 16px;background:#ffffffd6;border:1px solid var(--line);color:var(--ink)}.icon-chip span,.primary-button span,.secondary-button span{line-height:1}.primary-button:hover,.secondary-button:hover,.icon-chip:hover,.choice-card:hover,.swatch-card:hover,.image-chip:hover,.add-chip:hover,.toggle-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)}.primary-button:disabled,.secondary-button:disabled,.toggle-pill:disabled{cursor:not-allowed;opacity:.58;transform:none}.sample-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.reference-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.sample-card{position:relative;overflow:hidden;min-height:332px;border-radius:var(--radius-2xl);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;padding:0;text-align:left}.sample-card:hover{box-shadow:var(--shadow-hover)}.reference-sample-card{min-height:auto}.reference-sample-visual{display:flex;height:208px;overflow:hidden}.reference-sample-main{flex:1;overflow:hidden}.reference-sample-side{width:35%;overflow:hidden;border-left:1px solid var(--line)}.reference-sample-main img,.reference-sample-side img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.reference-sample-card:hover .reference-sample-main img,.reference-sample-card:hover .reference-sample-side img{transform:scale(1.05)}.sample-layout{position:absolute;top:0;right:0;bottom:72px;left:0;display:grid;gap:8px;padding:12px}.sample-layout.horizontal{grid-template-columns:minmax(0,.76fr) minmax(0,.24fr)}.sample-layout.split{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-photo-pane,.sample-fill-pane{border-radius:18px}.sample-photo-a{background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 20%),linear-gradient(180deg,#678ec9,#8eb6ea 28%,#d9e4ee 52%,#718699 62%,#39434d)}.sample-photo-b{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 18%),linear-gradient(180deg,#f2a27a,#f6d2a5 38%,#906565 64%,#473840)}.sample-photo-c{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 20%),linear-gradient(180deg,#5f7db4,#9fc9db 42%,#e7ddd0 62%,#544a47)}.sample-fill-a{background:repeating-linear-gradient(180deg,#2b6f89 0,#2b6f89 18px,#f7f0e1 18px,#f7f0e1 32px)}.sample-info{position:absolute;inset:auto 0 0;display:grid;gap:4px;padding:14px 16px 16px;background:var(--surface)}.sample-title{font-size:.95rem;font-weight:600;color:var(--ink)}.sample-info p{margin:0;font-size:.78rem;color:var(--muted)}.reference-sample-info{position:static}.editor-header{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 16px}.editor-topbar{background:#fcf8f2f0}.editor-reference-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-radius:24px;border:1px solid rgba(115,108,99,.18);background:#fcf8f2bd;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.reference-action,.reference-primary-action{min-height:48px;padding-inline:18px}.editor-header-left{display:flex;align-items:center}.editor-header-actions{justify-content:flex-end}.editor-subcopy{margin:0}.reference-brand{font-size:1.6rem;line-height:1;font-weight:800;letter-spacing:.14em;color:var(--ink)}.reference-brand-mark{display:block;width:auto;height:42px;-webkit-user-select:none;user-select:none}.inline-select{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#ffffffe0;border:1px solid var(--line)}.inline-select select,.control-card select,.control-card input[type=color]{border:none;background:transparent;color:var(--ink);outline:none}.panel-section-head{display:grid;gap:4px}.panel-section-head h2{margin:0;font-size:1rem}.panel-kicker{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.image-strip-card{padding:12px 16px}.editor-imagebar{background:#fcf8f2f0}.editor-reference-strip{border-radius:0;border-left:none;border-right:none;box-shadow:none;min-height:228px}.reference-strip-head h2{color:#4d7d93}.reference-image-row{align-items:flex-start}.reference-image-chip,.reference-add-chip{flex-basis:116px;min-height:112px;border-radius:18px;background:#ffffffa6}.reference-add-chip{border-style:dashed;border-color:#736c6347}.section-head{display:grid;gap:4px;margin-bottom:10px}.section-head h2{margin:0;font-size:1rem}.image-chip-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px}.image-chip,.add-chip{position:relative;flex:0 0 148px;min-height:100px;padding:0;background:#ffffffe0;border:1px solid var(--line);overflow:hidden}.image-chip.active{border-color:#2b6f898c;box-shadow:0 0 0 3px #2b6f8914}.image-chip-select{width:100%;text-align:left;display:grid;gap:8px;padding:10px}.image-chip-select img{width:100%;height:58px;object-fit:cover;border-radius:14px}.image-chip-select span:first-of-type{font-weight:700;color:var(--ink)}.image-chip-close{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#343b43d1;color:#fff;font-size:1rem;padding:0}.add-chip{display:grid;align-content:center;justify-items:center;gap:6px;border-style:dashed}.add-chip-plus{color:var(--accent);line-height:1}.editor-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,30%,380px);gap:0;align-items:stretch;min-height:auto;overflow:hidden;border-radius:30px;border:1px solid rgba(115,108,99,.18);background:#fcf8f2b8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow)}.editor-reference-main{min-height:calc(100vh - 330px)}.canvas-column{display:grid;gap:12px;padding:18px 20px;background:linear-gradient(180deg,#ffffff57,#ffffff1a),#f3eee757}.reference-canvas-pane{grid-template-rows:auto 1fr auto;background:radial-gradient(circle at top left,rgba(43,111,137,.08),transparent 30%),linear-gradient(180deg,#f4ede4f0,#e8e0d6f5);border-right:1px solid var(--line)}.reference-preview-status-row{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.reference-status-cluster{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.reference-status-cluster-end{justify-content:flex-end;margin-left:auto}.reference-status-pill{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border-radius:999px;background:#ffffffb8;border:1px solid rgba(115,108,99,.16);color:var(--muted);font-size:.78rem;font-weight:600;box-shadow:0 10px 22px -20px #242c3447}.reference-status-pill-primary{color:var(--ink);background:#ffffffe6}.reference-stage-area{display:grid;place-items:center;min-height:min(76vh,980px);background:linear-gradient(180deg,#ffffff42,#ffffff14),repeating-linear-gradient(45deg,#ffffff2e 0,#ffffff2e 12px,#f7f0e82e 12px,#f7f0e82e 24px);border:1px solid rgba(115,108,99,.12);border-radius:26px;overflow:hidden;position:relative}.reference-stage-center{width:100%;height:100%;display:grid;place-items:center;padding:clamp(18px,2.6vw,32px)}.reference-preview-card{padding:0;background:transparent;border:none;box-shadow:none;width:100%;height:100%;display:grid;place-items:center}.reference-preview-shell{width:min(100%,calc((100vh - 310px) * var(--poster-ratio, .78125)),920px);max-width:100%;max-height:calc(100vh - 310px);border-radius:28px;background:transparent;border:none;box-shadow:none}.reference-results-viewport{touch-action:none;cursor:grab}.reference-results-viewport:active{cursor:grabbing}.reference-results-transform{width:100%;height:100%;display:grid;place-items:center;transform-origin:center center;will-change:transform}.reference-results-shell{position:relative;overflow:hidden;background:transparent}.preview-panel{position:absolute;overflow:hidden;background:transparent}.preview-panel-primary,.preview-panel-secondary{z-index:1}.preview-panel-canvas{position:relative;z-index:1;width:100%;height:100%;display:block;background:transparent;pointer-events:none}.reference-empty-poster{width:min(560px,100%);aspect-ratio:5 / 6.4;border-radius:32px;border:1px solid rgba(115,108,99,.14);background:linear-gradient(180deg,#fffffff5,#faf6eff5);box-shadow:0 26px 50px -28px #242c343d;display:flex;align-items:center;justify-content:center;padding:18px}.reference-empty-photo{width:100%;height:100%;border-radius:24px;border:1px dashed rgba(115,108,99,.22);background:radial-gradient(circle at top,rgba(43,111,137,.09),transparent 42%),linear-gradient(180deg,#faf6ef,#f5efe7);color:#5e7481;display:grid;place-items:center;align-content:center;justify-content:center;gap:14px;font-size:1rem;font-weight:600;text-align:center}.reference-empty-icon{width:84px;height:84px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#ffffffb8;color:var(--accent);box-shadow:inset 0 0 0 1px #2b6f8914}.reference-stage-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.78rem}.reference-stage-foot span{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border-radius:999px;background:#ffffff94;border:1px solid rgba(115,108,99,.14)}.canvas-header-card{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-xl);background:#ffffff73}.canvas-header-card h2{margin:4px 0 0;font-size:1.2rem;color:var(--ink)}.canvas-header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.status-pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(43,111,137,.18);background:#2b6f8914;color:var(--ink);font-size:.78rem;font-weight:600}.status-pill.subtle{background:#ffffffd6;border-color:var(--line);color:var(--muted);font-weight:500}.canvas-meta{display:flex;justify-content:space-between;gap:12px;padding:0 4px;font-size:.82rem}.canvas-helper-row{display:flex;justify-content:space-between;gap:12px;padding:0 4px;font-size:.76rem;color:var(--muted)}.preview-frame{padding:10px;background:#ffffff7a}.preview-shell{position:relative;width:100%;overflow:hidden;border-radius:18px;background:#ebe5dc}.preview-canvas{display:block;width:100%;height:100%}.preview-hit-region{position:absolute;border-radius:18px;border:1px solid transparent;background:transparent;touch-action:none;z-index:2}.preview-hit-region.active{border-color:transparent;box-shadow:none}.preview-hit-region.dot-editable{cursor:crosshair}.preview-dot-hit{background:transparent}.editor-sidebar{display:grid;gap:14px;align-content:start;padding:18px;background:#ffffff7a;border-left:1px solid var(--line);overflow:auto}.reference-sidebar{width:auto;background:linear-gradient(180deg,#ffffffd6,#fbf7f1f0);padding:18px 18px 24px;grid-template-columns:1fr}.sidebar-header{display:grid;gap:6px;padding:2px 2px 8px}.sidebar-header h2{margin:0;font-size:1.15rem;color:var(--ink)}.sidebar-header-note{margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}.mobile-panel-switch{display:none}.sidebar-panel-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;background:#e4ded494;border:1px solid rgba(115,108,99,.1);border-radius:18px;margin-bottom:4px}.sidebar-tab{min-height:42px;padding:9px 8px;border-radius:14px;color:var(--muted);font-size:.875rem;font-weight:600;cursor:pointer;transition:background .14s ease,color .14s ease,box-shadow .14s ease}.sidebar-tab.active{background:var(--surface-strong);color:var(--ink);box-shadow:0 14px 24px -20px #242c3447}.editor-sidebar .panel-card{display:none}.editor-sidebar .panel-card.active-mobile-panel{display:block}.panel-card{padding:18px;border-radius:22px}.sidebar-panel{background:#ffffffad;box-shadow:0 18px 32px -28px #242c343d}.reference-panel{background:#ffffffdb;border-radius:24px}.reference-panel-layout{grid-column:auto}.panel-grid{display:grid;gap:14px}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choice-card{padding:14px;border-radius:14px;border:1px solid var(--line);background:#ffffffd1;text-align:left;display:grid;gap:4px}.reference-panel .choice-card{min-height:94px;align-content:start;border-radius:18px}.choice-grid.compact-two{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-card.active{border-color:var(--accent);border-width:2px;background:var(--accent-soft);box-shadow:none}.choice-card span{font-weight:700;color:var(--ink)}.choice-card small{color:var(--muted)}.segmented-control{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;border-radius:999px;border:1px solid var(--line);background:#e8e2d9b8}.segmented-control button{padding:10px 14px;border-radius:999px;color:var(--muted)}.segmented-control button.active{background:#fffffff0;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}.toggle-pill.active{border-color:var(--accent);background:#2b6f8914}.swatch-section{display:grid;gap:12px}.swatch-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px}.swatch-card{flex:0 0 82px;display:grid;justify-items:center;gap:8px;padding:0}.swatch-circle{width:64px;height:64px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #ffffff2e}.swatch-card.active .swatch-circle{box-shadow:0 0 0 4px #2b6f891a;border-color:#2b6f897a}.swatch-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#12263a}.swatch-label{font-size:.82rem;text-align:center;color:var(--ink)}.shape-swatch-svg{width:24px;height:24px}.shape-swatch-fill{fill:currentColor}.shape-swatch-stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.control-card{display:grid;gap:10px;padding:14px;border-radius:18px;background:#ffffffe6;border:1px solid rgba(115,108,99,.16)}.reference-panel .control-card{border-radius:18px}.reference-sidebar-columns .reference-panel{height:100%}.control-card:focus-within,.choice-card:focus-visible,.swatch-card:focus-visible,.image-chip-select:focus-visible,.toggle-pill:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.icon-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.control-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.control-card input[type=range]{width:100%;accent-color:var(--accent)}.control-group{display:grid;gap:8px;padding:14px;border-radius:18px;background:#ffffffe6;border:1px solid rgba(115,108,99,.16)}.control-label{font-size:.9rem;font-weight:600;color:var(--ink)}.control-input{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fffffff5;color:var(--ink)}.brush-tools-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.control-checkbox{display:flex;align-items:center;gap:10px}.control-checkbox input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}.control-checkbox span{color:var(--ink);font-size:.9rem;font-weight:500}.panel-note{margin:0;font-size:.9rem}.export-sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:20px;background:#343b4347}.export-sheet{width:min(720px,100%);padding:22px}.sheet-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.sheet-preview{margin:18px 0;overflow:hidden;border-radius:24px;background:#f1eadf}.sheet-preview img{width:100%;height:auto}@media (max-width: 980px){.editor-reference-toolbar{align-items:stretch;flex-direction:column}.reference-toolbar-copy{text-align:left}.reference-gallery{grid-template-columns:1fr}.reference-preview-shell{width:min(100%,calc((100vh - 360px) * var(--poster-ratio, .78125)));max-height:min(72vh,860px)}}@media (max-width: 720px){.app-shell{padding-inline:8px}.hero-card,.editor-header,.image-strip-card,.preview-frame,.panel-card,.export-sheet{border-radius:18px}.sample-showcase{grid-template-columns:1fr}.editor-main{grid-template-columns:1fr;border-radius:22px}.editor-sidebar{border-left:none;border-top:1px solid var(--line)}.editor-header{display:grid;gap:10px;padding:10px 12px}.editor-reference-strip{min-height:auto}.image-strip-card{padding:10px 12px}.image-chip,.add-chip{flex-basis:108px;min-height:90px}.image-chip-select img{height:50px}.editor-header-left,.editor-header-actions{flex-direction:column;align-items:stretch}.reference-status-cluster-end{margin-left:0;justify-content:flex-start}.toolbar-group,.canvas-helper-row,.canvas-header-card,.canvas-header-actions{flex-direction:column;align-items:stretch}.canvas-meta{font-size:.76rem}.choice-grid{grid-template-columns:1fr}.canvas-column{padding:12px 12px 14px}.reference-stage-area{min-height:auto}.reference-empty-poster{width:100%;padding:12px}.canvas-header-card{padding:8px 10px}.preview-frame{padding:6px}.reference-stage-center{padding:10px 0 12px}.reference-preview-shell{width:min(100%,calc((100vh - 300px) * var(--poster-ratio, .78125)));max-height:min(62vh,680px)}}