:root{--bg:#f4ede1;--panel:#fffbf5d6;--panel-strong:#fffcf7f5;--line:#2b1d1217;--line-strong:#df7d3757;--text:#21170f;--muted:#705848;--accent:#e67a3f;--accent-soft:#e67a3f26;--mint:#2d8d80;--shadow:0 18px 44px #5d3f231a;--sans:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--display:"Noto Serif SC", "STSong", "Songti SC", serif;--metric:"Space Grotesk", "Noto Sans SC", "Segoe UI Variable", sans-serif;font-family:var(--sans);color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:radial-gradient(circle at 0 0,#f8c07057,#0000 26%),radial-gradient(circle at 100% 0,#56b3a42e,#0000 22%),linear-gradient(#f7f1e7 0%,#efe4d2 100%);font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}@keyframes driftGlow{0%{transform:translate(0,0)scale(1)}50%{transform:translate(12px,-10px)scale(1.04)}to{transform:translate(-8px,8px)scale(.98)}}@keyframes fadeLift{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translate(0,0)}}@keyframes shimmerSweep{0%{transform:translate(-120%)}to{transform:translate(120%)}}@keyframes gradientFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes softPulse{0%{box-shadow:0 18px 44px #5d3f231a}to{box-shadow:0 20px 48px #e1803b24}}@keyframes statusDotPulse{0%{box-shadow:0 0 #e77a3f38}to{box-shadow:0 0 0 10px #e77a3f00}}body{min-width:320px;min-height:100vh;font-family:var(--sans);letter-spacing:.01em;margin:0}body:before{content:"";pointer-events:none;opacity:.45;background-image:radial-gradient(#1f17120a 1px,#0000 1px);background-size:20px 20px;position:fixed;inset:0}button,input,select{font:inherit;font-family:var(--sans)}button{cursor:pointer}#root{min-height:100vh}.app-shell{width:min(1480px,100vw - 32px);margin:28px auto 42px;position:relative}.page-glow{z-index:0;filter:blur(80px);pointer-events:none;opacity:.45;border-radius:50%;width:360px;height:360px;animation:18s ease-in-out infinite alternate driftGlow;position:fixed}.page-glow-left{background:#f6b55f6b;top:-100px;left:-80px}.page-glow-right{background:#3aa09133;top:140px;right:-120px}.shell-header,.workspace{z-index:1;gap:24px;display:grid;position:relative}.shell-header{grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);align-items:stretch;margin-bottom:24px}.hero-copy,.hero-preview-card,.controls-panel,.output-panel{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);will-change:transform, box-shadow, opacity;isolation:isolate;border-radius:34px;position:relative}.hero-copy:before,.hero-preview-card:before,.controls-panel:before,.output-panel:before{content:"";border-radius:inherit;opacity:.7;pointer-events:none;z-index:-1;background:linear-gradient(135deg,#ffffff6b,#fff0 26% 72%,#ffffff2e);position:absolute;inset:0}.hero-copy,.hero-preview-card,.controls-panel,.output-panel,.result-card{overflow:hidden}.hero-copy{background:linear-gradient(#fffcf7d1,#fff8efc2),linear-gradient(135deg,#f4ad5914,#2d8d8014);padding:38px 38px 34px;animation:.52s cubic-bezier(.2,.8,.2,1) both fadeLift}.hero-copy:after{content:"";filter:blur(8px);pointer-events:none;opacity:.9;background:radial-gradient(circle,#ffd0783d,#0000 70%);border-radius:999px;width:180px;height:180px;position:absolute;top:28px;right:28px}.hero-preview-card,.controls-panel,.output-panel{padding:24px;animation:.62s cubic-bezier(.2,.8,.2,1) both fadeLift}.hero-preview-card{animation-delay:80ms}.hero-preview-card.has-source{box-shadow:0 18px 44px #5d3f231a,0 0 0 1px #df7d3714}.controls-panel{animation-delay:.12s}.output-panel{animation-delay:.17s}.eyebrow,.panel-kicker,.stat-label{font-family:var(--metric);text-transform:uppercase;letter-spacing:.14em;color:#8a6d59;align-items:center;gap:8px;font-size:.78rem;font-weight:600;display:inline-flex}.eyebrow:before,.panel-kicker:before{content:"";background:linear-gradient(135deg,#ee8f52,#efc05b);border-radius:999px;width:8px;height:8px;box-shadow:0 0 0 4px #ee8f521f}h1,h2,h3,strong{color:var(--text)}h1,h2,h3{font-family:var(--display);letter-spacing:-.04em;font-feature-settings:"palt" 1;margin:0;font-weight:700}h1{text-wrap:balance;max-width:11ch;margin-top:20px;font-size:clamp(2.9rem,5.2vw,4.95rem);line-height:1.03}h3{font-size:1.18rem;line-height:1.26}.shell-text,.hero-text,.control-help,.control-group small,.select-group small,.preset-chip span,.legend-copy span,.section-head p,.compare-label,.placeholder,.tip-list,.notes-list{color:var(--muted)}.shell-text{color:#6a5241;max-width:42em;margin:22px 0 0;font-size:1.04rem;font-weight:500;line-height:1.82}.hero-highlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;display:grid}.hero-highlight-card{will-change:transform, box-shadow;background:linear-gradient(#ffffffdb,#fff7edd1),linear-gradient(135deg,#f3bb5a14,#2d8d8014);border:1px solid #2b1d120f;border-radius:20px;gap:6px;padding:14px 16px;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;display:grid}.hero-highlight-card:hover{border-color:#df7d3729;transform:translateY(-4px);box-shadow:0 16px 30px #6c4c2c17}.hero-highlight-card span{color:#8a6d59;font-family:var(--metric);letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;font-weight:700}.hero-highlight-card strong{color:#4d3b2f;font-family:var(--sans);font-size:.98rem;font-weight:700;line-height:1.52}.hero-actions{flex-wrap:wrap;gap:12px;margin:28px 0 0;display:flex}.upload-button,.secondary-button{min-height:52px;font-family:var(--sans);letter-spacing:.01em;will-change:transform, box-shadow;border:0;border-radius:999px;justify-content:center;align-items:center;padding:0 22px;font-weight:700;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background-color .18s,border-color .18s,opacity .18s;display:inline-flex}.upload-button{color:#fffaf3;background:linear-gradient(135deg,#ea7f45,#efb257,#e67a3f) 0 0/180% 180%;animation:7s infinite gradientFlow;box-shadow:0 14px 32px #ea7f4538}.secondary-button{color:#17353d;background:#ffffffb8;border:1px solid #17353d17;box-shadow:inset 0 1px #ffffffc2}.upload-button:hover,.secondary-button:hover,.preset-chip:hover,.legend-button:hover,.mode-toggle button:hover{transform:translateY(-2px)}.upload-button:active,.secondary-button:active,.preset-chip:active,.legend-button:active,.mode-toggle button:active,.ghost-button:active{transform:translate(0,0)scale(.985)}.tip-list,.notes-list{margin:24px 0 0;padding-left:1.15rem}.tip-list li,.notes-list li{margin-top:.55rem;line-height:1.7}.preview-card-header,.workspace-topbar,.section-head{justify-content:space-between;align-items:start;gap:16px;display:flex}.section-head{flex-direction:column;align-items:flex-start}.section-head.compact{gap:4px}.section-head p{margin:0;font-size:.96rem;line-height:1.68}.status-pill{color:#6d5541;font-family:var(--metric);font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap;background:#ffffffb8;border:1px solid #2b1d1214;border-radius:999px;align-items:center;gap:8px;padding:.48rem .82rem;font-size:.84rem;font-weight:700;display:inline-flex}.status-pill:before{content:"";background:#79604d57;border-radius:999px;width:8px;height:8px}.status-pill.is-live:before{background:linear-gradient(135deg,#e67a3f,#f1c15b);animation:1.6s ease-out infinite statusDotPulse}.hidden-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.preview-frame{cursor:pointer;background:linear-gradient(135deg,#ffcd842e,#55b5a51f),repeating-linear-gradient(45deg,#18130f08 0 14px,#0000 14px 28px);border:1px dashed #2b1d121f;border-radius:26px;place-items:center;min-height:360px;margin-top:18px;transition:border-color .18s,transform .18s,box-shadow .18s;display:grid;position:relative;overflow:hidden}.preview-frame:before{content:"";border-radius:inherit;opacity:.72;pointer-events:none;background:linear-gradient(110deg,#0000 0%,#ffffff14 34%,#ffffff47 50%,#ffffff14 66%,#0000 100%);position:absolute;inset:0;transform:translate(-120%)}.preview-frame:hover:before,.preview-frame.drag-active:before{animation:1.1s shimmerSweep}.preview-frame.drag-active{border-color:var(--line-strong);transform:scale(1.005);box-shadow:inset 0 0 0 1px #df7d3729,0 20px 34px #df7d371f}.preview-frame.is-populated{box-shadow:inset 0 1px #ffffff8a,0 16px 28px #5f412814}.preview-image{object-fit:contain;width:100%;height:360px}.placeholder{text-align:center;gap:10px;max-width:320px;padding:0 22px;line-height:1.72;display:grid}.metric-grid,.summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.metric-grid{margin-top:18px}.metric-card,.summary-grid article{will-change:transform, box-shadow;background:#ffffffb3;border:1px solid #2b1d120d;border-radius:20px;gap:4px;padding:14px 16px;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;display:grid;position:relative}.metric-card:after,.summary-grid article:after{content:"";opacity:.72;background:linear-gradient(90deg,#e77a3f00,#e77a3f6b,#2d8d803d,#2d8d8000);height:1px;position:absolute;top:0;left:16px;right:16px}.metric-card:hover,.summary-grid article:hover{border-color:#df7d3724;transform:translateY(-3px);box-shadow:0 14px 24px #65462914}.metric-card span,.summary-grid article span{color:#856a56;font-size:.84rem;font-weight:500;line-height:1.4}.metric-card strong,.summary-grid article strong{font-family:var(--metric);font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:1.34rem;font-weight:700;line-height:1}.workspace{grid-template-columns:minmax(300px,360px) minmax(0,1fr);align-items:start}.controls-panel{align-self:start;position:sticky;top:18px}.panel-sticky{gap:16px;display:grid}.panel-section{will-change:transform, box-shadow;background:linear-gradient(#ffffffc7,#fffbf694),#ffffff8a;border:1px solid #2b1d120d;border-radius:24px;padding:18px;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;position:relative}.panel-section:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff3d,#fff0 36%);position:absolute;inset:0}.panel-section:hover{border-color:#df7d371f;transform:translateY(-3px);box-shadow:0 16px 28px #63452814}.recommendation-card{background:radial-gradient(circle at 100% 0,#ffc26e33,#0000 34%),linear-gradient(#fffcf7e6,#fff5e9d6);border-color:#df7d3724}.recommendation-metrics{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.recommendation-metrics span{color:#6f5544;min-height:34px;font-family:var(--metric);letter-spacing:.03em;background:#ffffffd1;border:1px solid #df7d371f;border-radius:999px;align-items:center;padding:0 12px;font-size:.8rem;font-weight:700;display:inline-flex}.recommendation-list{color:#6a5241;gap:8px;margin:16px 0 0;padding-left:1.1rem;display:grid}.recommendation-list li{line-height:1.64}.recommendation-button{background:linear-gradient(135deg,#ed894c1f,#ffffffe0);border-color:#df7d3729;width:100%;margin-top:18px}.mode-toggle{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}.mode-toggle button{color:#5f4b3d;min-height:48px;font-family:var(--sans);letter-spacing:.01em;will-change:transform, box-shadow;background:#ffffffa8;border:1px solid #2b1d1214;border-radius:18px;padding:0 14px;font-weight:700;transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s,background-color .16s,box-shadow .16s}.mode-toggle button.active{color:var(--text);background:linear-gradient(135deg,#ee8f522e,#f3bb5a38);border-color:#df7d375c;box-shadow:0 10px 22px #df7d3714}.control-group,.select-group{gap:10px;display:grid}.control-group+.control-group{margin-top:16px}.control-group{--range-progress:50%;will-change:transform, box-shadow;background:linear-gradient(#ffffffd6,#fff9f1b8),#ffffffa3;border:1px solid #2b1d120d;border-radius:18px;padding:14px 14px 12px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background-color .18s;position:relative;overflow:hidden}.control-group:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#ffffff70,#fff0 42%);position:absolute;inset:0}.control-group:after{content:"";opacity:0;transform-origin:50%;background:linear-gradient(90deg,#e77a3f00,#e77a3f99,#2d8d8061,#2d8d8000);border-radius:999px;height:2px;transition:opacity .18s,transform .18s;position:absolute;top:0;left:14px;right:14px;transform:scaleX(.7)}.control-group:hover,.control-group:focus-within,.control-group.is-live{border-color:#df7d3729;transform:translateY(-3px);box-shadow:0 16px 30px #6546291a,0 0 0 1px #df7d370a}.control-group:hover:after,.control-group:focus-within:after,.control-group.is-live:after{opacity:1;transform:scaleX(1)}.control-copy{justify-content:space-between;gap:12px;display:flex}.control-copy span{font-weight:600}.control-copy strong{min-width:56px;min-height:36px;font-family:var(--metric);font-variant-numeric:tabular-nums;letter-spacing:-.02em;background:#ffffffe0;border:1px solid #df7d371a;border-radius:999px;justify-content:center;align-items:center;padding:0 12px;font-size:1rem;font-weight:700;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,box-shadow .18s,color .18s;display:inline-flex;box-shadow:inset 0 1px #ffffffd6,0 8px 14px #5f41280f}.control-group:hover .control-copy strong,.control-group:focus-within .control-copy strong,.control-group.is-live .control-copy strong{color:#b45d2e;border-color:#df7d372e;transform:translateY(-1px)scale(1.03);box-shadow:inset 0 1px #ffffffeb,0 12px 18px #e67a3f1f}.control-group input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;filter:saturate(1.04);margin:4px 0}.control-group input[type=range]:disabled{opacity:.45}.control-group input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, #e77a3ffa 0%, #f1aa58f5 var(--range-progress), #54656042 var(--range-progress), #54656085 100%);border-radius:999px;height:8px;box-shadow:inset 0 1px #ffffff3d,0 0 0 1px #2b1d120a}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(#fffefb,#fff1e2);border:2px solid #e67a3f;border-radius:999px;width:20px;height:20px;margin-top:-5px;transition:transform .14s,box-shadow .14s;box-shadow:0 8px 16px #e67a3f3d,0 0 0 4px #e67a3f14}.control-group input[type=range]::-moz-range-track{background:linear-gradient(90deg, #e77a3ffa 0%, #f1aa58f5 var(--range-progress), #54656042 var(--range-progress), #54656085 100%);border-radius:999px;height:8px;box-shadow:inset 0 1px #ffffff3d,0 0 0 1px #2b1d120a}.control-group input[type=range]::-moz-range-thumb{background:linear-gradient(#fffefb,#fff1e2);border:2px solid #e67a3f;border-radius:999px;width:20px;height:20px;transition:transform .14s,box-shadow .14s;box-shadow:0 8px 16px #e67a3f3d,0 0 0 4px #e67a3f14}.control-group input[type=range]:focus-visible{outline:none}.control-group input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 10px 18px #e67a3f47,0 0 0 6px #e67a3f1f}.control-group input[type=range]:active::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 10px 18px #e67a3f47,0 0 0 6px #e67a3f1f}.control-group input[type=range]:focus-visible::-moz-range-thumb{transform:scale(1.08);box-shadow:0 10px 18px #e67a3f47,0 0 0 6px #e67a3f1f}.control-group input[type=range]:active::-moz-range-thumb{transform:scale(1.08);box-shadow:0 10px 18px #e67a3f47,0 0 0 6px #e67a3f1f}.select-group select{background:#ffffffc2;border:1px solid #2b1d1214;border-radius:16px;min-height:48px;padding:0 14px}.control-help,.control-group small,.select-group small{margin:0;font-size:.92rem;line-height:1.68}.preset-list{gap:10px;display:grid}.preset-chip{text-align:left;will-change:transform, box-shadow;background:#ffffffbd;border:1px solid #2b1d1214;border-radius:18px;gap:4px;width:100%;padding:14px 16px;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .16s,box-shadow .16s,background-color .16s;display:grid}.preset-chip:hover{border-color:#df7d3747;box-shadow:0 12px 28px #df7d3714}.preset-chip strong{letter-spacing:-.01em;font-size:1.02rem;font-weight:700}.preset-chip span{font-size:.92rem;line-height:1.68}.checkbox-row{color:#4e3e31;font-family:var(--sans);align-items:center;gap:10px;margin-top:18px;font-weight:600;display:flex}.notes-card{background:linear-gradient(160deg,#1a424c0f,#f2b34f29),#fffcf7c2}.output-panel{padding:24px}.workspace-topbar{margin-bottom:18px}.topbar-pills{flex-wrap:wrap;gap:10px;display:flex}.feedback{color:#684f3c;background:#fff4e6eb;border-radius:18px;padding:14px 16px;transition:transform .18s,opacity .18s,box-shadow .18s}.feedback.is-processing{animation:1.4s ease-in-out infinite alternate softPulse;position:relative;overflow:hidden}.feedback.is-processing:after{content:"";pointer-events:none;background:linear-gradient(100deg,#0000 0%,#ffffff26 30%,#ffffff85 50%,#ffffff26 70%,#0000 100%);animation:1.35s linear infinite shimmerSweep;position:absolute;inset:0}.feedback+.feedback{margin-top:12px}.feedback.error{color:#7f1d1d;background:#931c1c1f}.summary-grid{margin:18px 0 20px}.compare-panel{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:20px;display:grid}.compare-card,.result-card{background:var(--panel-strong);will-change:transform, box-shadow;border:1px solid #2b1d120f;border-radius:28px;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s;position:relative;box-shadow:0 14px 30px #523a220f}.compare-card:before,.result-card:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff42,#fff0 34%);position:absolute;inset:0}.compare-card:hover,.result-card:hover{border-color:#df7d3724;transform:translateY(-4px);box-shadow:0 18px 32px #5d3f231a}.compare-card{gap:10px;padding:16px;display:grid}.compare-label{font-family:var(--metric);letter-spacing:.08em;font-size:.84rem;font-weight:700}.compare-image{object-fit:contain;background:#f8f3e9eb;border-radius:18px;width:100%;height:248px}.zoom-card{align-content:start}.zoom-grid{background:#18130f14;border-radius:18px;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;padding:8px;display:grid}.zoom-cell{min-height:28px;font-family:var(--metric);font-variant-numeric:tabular-nums;border-radius:10px;place-items:center;font-size:.6rem;font-weight:700;line-height:1;display:grid;box-shadow:inset 0 1px 1px #ffffff47,inset 0 -1px 1px #0000001a}.zoom-cell.is-empty{box-shadow:none;background:#ffffffa8}.zoom-cell.is-center{outline-offset:1px;outline:2px solid #e77a3fb8;transform:scale(1.04)}.zoom-copy{gap:4px;display:grid}.zoom-copy strong{font-size:.98rem;line-height:1.45}.zoom-copy span{color:var(--muted);font-size:.92rem;line-height:1.58}.mini-template-grid{aspect-ratio:1;background:#18130f14;border-radius:18px;align-content:start;gap:1px;width:100%;padding:6px;display:grid}.mini-template-cell{aspect-ratio:1;border-radius:38%;width:100%;transition:opacity .16s,transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s;position:relative;overflow:hidden}.mini-template-cell.is-muted,.template-cell.is-muted{opacity:.2}.mini-template-cell.is-highlighted,.template-cell.is-highlighted{z-index:1;transform:scale(1.04);box-shadow:inset 0 0 0 1px #fffaf2eb}.result-card{padding:18px}.result-card+.result-card{margin-top:18px}.result-card-head{justify-content:space-between;align-items:start;gap:14px;margin-bottom:14px;display:flex}.result-toolbar{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.template-wrap{background:radial-gradient(circle at 20% 18%,#ffffffe0,#0000 30%),linear-gradient(#fffffff5,#f8f3e9f5),linear-gradient(#ffffffb3,#f8f3e9cc);border:1px solid #2b1d120f;border-radius:24px;padding:16px;position:relative;overflow:auto;box-shadow:inset 0 1px #ffffffd9}.template-wrap:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff6b,#fff0 22%);position:absolute;inset:0}.template-stage{background:radial-gradient(circle at 16% 16%,#ffffff6b,#0000 25%),linear-gradient(#efe6d5 0%,#e4d6bf 100%);border-radius:26px;grid-template-rows:28px max-content;grid-template-columns:28px max-content;width:max-content;padding:10px;display:grid;box-shadow:inset 0 1px #ffffffbf,inset 0 -1px #65482814}.template-corner,.axis-cell{color:#755b46;font-family:var(--metric);font-variant-numeric:tabular-nums;background:#ffffff57;border:1px solid #2b1d120d;place-items:center;font-size:.72rem;font-weight:700;display:grid}.column-ruler{grid-auto-flow:column;grid-auto-columns:var(--cell-size);display:grid}.row-ruler{grid-auto-rows:var(--cell-size);display:grid}.column-ruler .axis-cell,.row-ruler .axis-cell{width:var(--cell-size);height:var(--cell-size)}.template-grid{background:radial-gradient(circle at center, #4636282e 0 18%, transparent 19%) 0 0 / calc(var(--cell-size) + 1px) calc(var(--cell-size) + 1px), linear-gradient(180deg, #70573a14, #3626181f);border-radius:18px;gap:1px;width:max-content;padding:6px;display:grid}.template-cell{width:var(--cell-size);height:var(--cell-size);font-family:var(--metric);font-size:var(--code-font-size,7px);font-variant-numeric:tabular-nums;letter-spacing:-.02em;border-radius:38%;place-items:center;font-weight:700;line-height:1;transition:opacity .16s,transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px #ffffff52,inset 0 -1px 1px #0000001f,0 1px #42302114}.template-cell:before,.mini-template-cell:before{content:"";pointer-events:none;background:linear-gradient(#ffffff80,#fff0);border-radius:999px;position:absolute;inset:10% 12% 48%}.legend-header{justify-content:space-between;align-items:start;gap:14px;margin-bottom:14px;display:flex}.legend-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.legend-select{gap:6px;display:grid}.legend-select span{color:#856a56;font-size:.8rem;font-weight:600}.legend-select select{background:#ffffffc7;border:1px solid #2b1d1214;border-radius:14px;min-width:112px;min-height:42px;padding:0 12px}.legend-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.legend-card{will-change:transform, box-shadow;background:linear-gradient(#ffffffe0,#fff9f1d1),#ffffffc7;border:1px solid #18130f0f;border-radius:20px;align-items:center;gap:14px;width:100%;padding:14px;display:flex;position:relative}.legend-card:after{content:"";background:linear-gradient(90deg,#e77a3f00,#e77a3f57,#2d8d8033,#2d8d8000);height:1px;position:absolute;top:0;left:14px;right:14px}.legend-button{text-align:left;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .16s,box-shadow .16s,background-color .16s}.legend-button:hover{border-color:#df7d3747}.legend-button.is-active{background:#fff6ecf5;border-color:#df7d376b;box-shadow:0 14px 28px #df7d371c}.legend-swatch{width:62px;min-width:62px;height:62px;font-family:var(--metric);letter-spacing:.02em;border-radius:18px;place-items:center;font-size:.98rem;font-weight:700;display:grid}.legend-copy{gap:4px;display:grid}.legend-copy strong{letter-spacing:-.01em;flex-wrap:wrap;align-items:center;gap:8px;font-size:1.02rem;font-weight:700;line-height:1.3;display:flex}.legend-rank{color:#b05b2a;min-height:24px;font-family:var(--metric);letter-spacing:.03em;background:#e77a3f1f;border-radius:999px;align-items:center;padding:0 8px;font-size:.74rem;font-weight:700;display:inline-flex}.legend-copy span{font-size:.92rem;line-height:1.56}.legend-meta{flex-wrap:wrap;gap:10px 14px;display:flex}.ghost-button{color:#5e493a;min-height:42px;font-family:var(--sans);letter-spacing:.01em;will-change:transform, box-shadow;background:#ffffffbd;border:1px solid #2b1d1214;border-radius:999px;justify-content:center;align-items:center;padding:0 16px;font-weight:700;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background-color .18s;display:inline-flex;box-shadow:inset 0 1px #ffffffc2}.ghost-button.is-active{background:linear-gradient(135deg,#e77a3f24,#ffffffe6);border-color:#df7d3729}.output-panel.is-processing .result-card,.output-panel.is-processing .compare-card{opacity:.94}.output-panel.has-template .summary-grid article{animation:.42s cubic-bezier(.2,.8,.2,1) both fadeLift}.output-panel.has-template .summary-grid article:nth-child(2){animation-delay:40ms}.output-panel.has-template .summary-grid article:nth-child(3){animation-delay:80ms}.output-panel.has-template .summary-grid article:nth-child(4){animation-delay:.12s}.output-panel.has-template .compare-card,.output-panel.has-template .result-card{animation:.5s cubic-bezier(.2,.8,.2,1) both fadeLift}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}}@media (width<=1160px){.shell-header,.workspace{grid-template-columns:1fr}.controls-panel{position:static}.app-shell{width:min(100vw - 20px,1480px);margin-top:12px}}@media (width<=820px){h1{max-width:8.4ch;font-size:clamp(2.45rem,13vw,3.8rem);line-height:1.04}.hero-copy,.hero-preview-card,.controls-panel,.output-panel{border-radius:26px;padding:18px}.preview-frame,.preview-image{height:260px;min-height:260px}.metric-grid,.summary-grid,.mode-toggle,.hero-highlights{grid-template-columns:1fr}.workspace-topbar,.preview-card-header,.result-card-head,.legend-header{flex-direction:column}.legend-actions{flex-direction:column;width:100%}.legend-select,.legend-select select,.legend-actions .ghost-button,.topbar-pills{width:100%}}:root{--bg:#eef2f0;--panel:#fffffce6;--panel-strong:#fffffcfa;--line:#132a2c1a;--line-strong:#0f766e47;--text:#132023;--muted:#627071;--accent:#f05f3d;--accent-soft:#f05f3d1f;--mint:#0f766e;--shadow:0 18px 50px #182d311c;background:linear-gradient(135deg,#0f766e14 0%,#0000 28%),linear-gradient(225deg,#f05f3d14 0%,#0000 30%),linear-gradient(#f7faf8 0%,#e7efec 52%,#f1ece4 100%)}html{background:var(--bg)}body{letter-spacing:0;background-color:#0000;background-image:linear-gradient(#13202309 1px,#0000 1px),linear-gradient(90deg,#13202309 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:26px 26px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box}body:before{opacity:0}.page-glow{display:none}.app-shell{width:min(1540px,100vw - 36px);margin:22px auto 36px}.shell-header{grid-template-columns:minmax(520px,.95fr) minmax(420px,.78fr);gap:18px;margin-bottom:18px}.workspace{grid-template-columns:minmax(300px,338px) minmax(0,1fr);gap:18px}.shell-copy,.hero-preview-card,.controls-panel,.output-panel{background:linear-gradient(180deg, #fffffcf0, #f7faf8e0), var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);isolation:isolate;border:1px solid #132a2c1a;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 20px 54px #182d311a,inset 0 1px #ffffffc7}.shell-copy:before,.hero-preview-card:before,.controls-panel:before,.output-panel:before,.compare-card:before,.result-card:before{content:"";border-radius:inherit;pointer-events:none;opacity:.82;z-index:-1;background:linear-gradient(#ffffffb8,#0000 24%),linear-gradient(110deg,#0f766e14,#0000 38%),linear-gradient(250deg,#f05f3d14,#0000 42%);position:absolute;inset:0}.shell-copy{padding:34px 36px 28px;animation:.52s cubic-bezier(.2,.8,.2,1) both fadeLift}.hero-copy{border-radius:14px}.hero-preview-card,.controls-panel,.output-panel{border-radius:14px;padding:18px}.eyebrow,.panel-kicker,.stat-label{color:#315257;letter-spacing:.09em;font-size:.74rem}.eyebrow:before,.panel-kicker:before{background:linear-gradient(135deg,#0f766e,#f05f3d);border-radius:3px;width:9px;height:9px;box-shadow:0 0 0 4px #0f766e17}h1,h2,h3{letter-spacing:0}h1{max-width:10.6ch;margin-top:18px;font-size:4.45rem;line-height:1.02}h2{font-size:1.86rem;line-height:1.12}h3{font-size:1.08rem}.shell-text{color:#4d5c5e;max-width:48em;font-size:1rem;line-height:1.78}.hero-actions{gap:10px;margin-top:24px}.upload-button,.secondary-button,.ghost-button,.mode-toggle button,.preset-chip{border-radius:10px}.upload-button,.secondary-button{min-height:48px;padding:0 18px}.upload-button{background:linear-gradient(135deg,#0f766e 0%,#159985 42%,#f05f3d 100%);box-shadow:0 14px 30px #0f766e2e,inset 0 1px #ffffff42}.secondary-button,.ghost-button{color:#173b40;background:#fffffcc2;border:1px solid #132a2c1a;box-shadow:0 10px 24px #182d310f,inset 0 1px #ffffffe6}.hero-highlights{gap:10px;margin-top:20px}.hero-highlight-card,.metric-card,.summary-grid article,.panel-section,.compare-card,.result-card,.legend-card{background:linear-gradient(#fffffce6,#f7faf8c7),#ffffffbd;border-color:#132a2c17;border-radius:10px;box-shadow:0 12px 28px #182d310e,inset 0 1px #ffffffd6}.hero-highlight-card span{color:#0f766e;letter-spacing:.05em}.hero-highlight-card strong{color:#213b3f}.tip-list{display:none}.preview-card-header,.workspace-topbar,.result-card-head,.legend-header{align-items:center}.status-pill{color:#315257;background:#fffffcc7;border-color:#132a2c1a;border-radius:999px}.status-pill.is-live:before{background:linear-gradient(135deg,#0f766e,#22c7ad)}.preview-frame{background:linear-gradient(135deg,#0f766e14,#f05f3d12),linear-gradient(#132a2c0b 1px,#0000 1px) 0 0/18px 18px,linear-gradient(90deg,#132a2c0b 1px,#0000 1px) 0 0/18px 18px,#fffffcb8;border:1px dashed #0f766e42;border-radius:12px;min-height:334px}.preview-image{height:334px}.metric-grid,.summary-grid{gap:10px}.metric-card,.summary-grid article{padding:13px 14px}.metric-card strong,.summary-grid article strong{color:#173b40;font-size:1.22rem}.panel-sticky{gap:12px}.panel-section{padding:14px}.panel-section:hover,.control-group:hover,.control-group:focus-within,.control-group.is-live,.compare-card:hover,.result-card:hover,.legend-button:hover,.preset-chip:hover{border-color:#0f766e38;transform:translateY(-2px);box-shadow:0 16px 32px #182d3117,inset 0 1px #ffffffe6}.mode-toggle{gap:8px}.mode-toggle button{color:#41585b;min-height:44px}.mode-toggle button.active{color:#0e2f32;background:linear-gradient(135deg,#0f766e24,#f05f3d1a);border-color:#0f766e47}.control-group{background:linear-gradient(#fffffce6,#f7faf8b8),#ffffffb8;border-radius:10px;padding:13px}.control-copy strong{color:#0f766e;min-width:52px;min-height:32px;box-shadow:none;background:#0f766e14;border-color:#0f766e29;border-radius:8px}.control-group input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, #0f766e 0%, #22a493 var(--range-progress), #3046482e var(--range-progress), #30464857 100%);height:7px}.control-group input[type=range]::-moz-range-track{background:linear-gradient(90deg, #0f766e 0%, #22a493 var(--range-progress), #3046482e var(--range-progress), #30464857 100%);height:7px}.control-group input[type=range]::-webkit-slider-thumb{border-color:#0f766e;box-shadow:0 8px 16px #0f766e3d,0 0 0 4px #0f766e14}.control-group input[type=range]::-moz-range-thumb{border-color:#0f766e;box-shadow:0 8px 16px #0f766e3d,0 0 0 4px #0f766e14}.preset-list{gap:8px}.preset-chip{padding:12px 14px}.recommendation-card{background:linear-gradient(135deg,#0f766e1c,#0000 44%),linear-gradient(225deg,#f05f3d1c,#0000 46%),#fffffce0}.recommendation-metrics span,.legend-rank{color:#0f766e;background:#0f766e1a;border-color:#0f766e26;border-radius:999px}.select-group select,.legend-select select{background:#fffffcdb;border-radius:8px}.feedback{color:#23484c;background:#0f766e17;border:1px solid #0f766e1a;border-radius:10px}.compare-panel{gap:12px}.compare-image,.mini-template-grid,.zoom-grid,.template-wrap{border-radius:10px}.compare-image{background-color:#f8faf8;background-image:linear-gradient(#132a2c09 1px,#0000 1px),linear-gradient(90deg,#132a2c09 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:18px 18px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box}.mini-template-grid{background:#132a2c1a}.zoom-cell{border-radius:4px}.zoom-cell.is-center{outline-color:#f05f3de6}.template-wrap{background:linear-gradient(#132a2c09 1px,#0000 1px) 0 0/22px 22px,linear-gradient(90deg,#132a2c09 1px,#0000 1px) 0 0/22px 22px,linear-gradient(#fffffcfa,#eff5f2fa)}.template-stage{background:linear-gradient(#dce6e3 0%,#cfdcd8 100%);border-radius:12px;box-shadow:0 18px 36px #182d311f,inset 0 1px #ffffffc7}.template-grid{background:radial-gradient(circle at center, #132a2c38 0 18%, transparent 19%) 0 0 / calc(var(--cell-size) + 1px) calc(var(--cell-size) + 1px), linear-gradient(180deg, #132a2c14, #132a2c21);border-radius:8px}.template-cell,.mini-template-cell{border-radius:32%}.axis-cell,.template-corner{color:#3b595d;background:#fffffc73}.legend-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.legend-card{padding:12px}.legend-swatch{border-radius:10px;width:56px;min-width:56px;height:56px}.legend-button.is-active{background:linear-gradient(135deg,#f05f3d17,#fffffceb);border-color:#f05f3d6b}@media (width<=1160px){.shell-header,.workspace{grid-template-columns:1fr}h1{font-size:3.7rem}}@media (width<=820px){.app-shell{width:min(100vw - 18px,1540px);margin-top:10px}h1{max-width:9ch;font-size:2.78rem}.shell-copy,.hero-preview-card,.controls-panel,.output-panel{border-radius:12px;padding:16px}.preview-frame,.preview-image{height:250px;min-height:250px}}