:root{--paper:#f8f7f3;--ink:#1a302c;--muted:#64716a;--line:#dce1d9;--soft:#eef0e9;--accent:#789061}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:focus-visible,label:focus-within,input:focus-visible{outline:2px solid #6d8854;outline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shell{max-width:1280px;margin:auto;padding:0 34px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:baseline;gap:13px;white-space:nowrap}.brand-mark{font-family:Georgia,"Songti SC","STSong",serif;font-size:29px;font-weight:600;letter-spacing:.015em}.brand-dot{color:#879962}.brand-en{font-size:9px;font-weight:600;letter-spacing:.25em;color:var(--muted)}.top-note{font-size:11px;color:var(--muted);letter-spacing:.1em}.intro{padding:47px 0 35px}.eyebrow{margin:0;color:#748376;font-size:10px;font-weight:600;letter-spacing:.19em}.intro h1{font-family:"Songti SC","STSong",Georgia,serif;font-weight:400;font-size:clamp(42px,5.4vw,70px);letter-spacing:-.055em;line-height:1.18;margin:11px 0 12px}.intro h1 span{color:#647b66}.intro>p:last-child{font-size:14px;line-height:1.8;color:var(--muted);margin:0;max-width:510px}.workspace{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(330px,.83fr);gap:64px;align-items:start}.stage-wrap{position:sticky;top:22px;background:#e9ede7;padding:18px 18px 14px;box-shadow:0 1px 0 #d9dfd7}.stage-wrap canvas{display:block;width:100%;height:auto;background:#e9ede7;aspect-ratio:8/9}.stage-caption{display:flex;justify-content:space-between;gap:20px;padding:11px 3px 0;color:#667369;font-size:10px;letter-spacing:.06em}.editor{padding-top:0}.editor-heading h2{font-family:"Songti SC","STSong",Georgia,serif;font-weight:400;font-size:25px;letter-spacing:-.035em;margin:8px 0 18px}.upload{min-height:72px;display:flex;align-items:center;gap:16px;border:1px solid #cad4ca;background:#f1f3ed;padding:12px 17px;cursor:pointer}.upload:hover{background:#e9eee7}.upload-icon{font-size:25px;line-height:1;font-weight:300;color:#477052;width:27px;text-align:center}.upload span:nth-child(2){display:flex;flex-direction:column;gap:3px}.upload strong{font-size:13px;font-weight:500}.upload small{font-size:11px;color:var(--muted)}.upload .arrow{margin-left:auto;font-size:16px}.control-group{min-width:0;margin:27px 0 0;padding:0;border:0;border-top:1px solid var(--line)}.control-group legend{width:100%;padding:22px 0 14px;display:flex;align-items:center;justify-content:space-between}.legend-note{font-size:11px;color:var(--muted)}.frame-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.frame-option{border:1px solid var(--line);background:#f3f4ee;padding:8px;text-align:left;color:var(--ink);min-width:0}.frame-option[aria-pressed=true]{border-color:#506e57;box-shadow:inset 0 0 0 1px #506e57}.frame-option canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#e9ede7}.frame-option strong{display:block;font-size:11px;white-space:nowrap;font-weight:500;padding:7px 2px 1px}.wall-group{margin-top:26px}.wall-options{display:flex;gap:18px;flex-wrap:wrap}.wall-option{padding:0;border:0;background:none;color:var(--muted);font-size:11px;display:flex;align-items:center;gap:8px;min-height:34px}.wall-option .swatch{width:20px;height:20px;border:1px solid #cbd1c8;border-radius:50%;display:block}.wall-option[aria-pressed=true]{color:var(--ink)}.wall-option[aria-pressed=true] .swatch{box-shadow:0 0 0 2px var(--paper),0 0 0 3px #59715e}.spacing-group{margin-top:24px}.spacing-group label{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-top:20px}.spacing-group label span:last-child{font-size:11px;color:var(--muted)}input[type=range]{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#859982,#ccd4c9);height:2px;width:100%;margin:25px 0 10px;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#355b43;border:3px solid var(--paper);box-shadow:0 0 0 1px #355b43}input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#355b43;border:3px solid var(--paper);box-shadow:0 0 0 1px #355b43}.range-labels{display:flex;justify-content:space-between;color:#8a958b;font-size:10px}.save{width:100%;min-height:51px;margin-top:26px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border:1px solid #234331;background:#234331;color:#fff;font-size:13px}.save:hover{background:#31553e}.save:disabled{opacity:.55;cursor:wait}.save span{font-size:16px}.footnote{margin:12px 0 0;font-size:10px;line-height:1.7;color:#849087}.status{min-height:18px;color:#52745b;font-size:11px;margin:6px 0 0}footer{margin:70px 0 0;padding:25px 0 35px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#879087;font-size:11px;letter-spacing:.02em}
@media(max-width:850px){.shell{max-width:540px;padding:0 20px}.topbar{height:69px}.brand-mark{font-size:26px}.intro{padding:35px 0 27px}.intro h1{font-size:48px}.workspace{display:block}.stage-wrap{position:static;padding:10px 10px 11px}.stage-caption{padding-top:9px}.editor{padding-top:28px}.control-group{margin-top:25px}.save{min-height:53px}footer{margin-top:45px;padding-bottom:max(28px,env(safe-area-inset-bottom))}}
@media(max-width:390px){.shell{padding:0 16px}.intro h1{font-size:43px}.brand-en{font-size:8px}.stage-caption{font-size:9px}.wall-options{gap:12px}.frame-option{padding:6px}.frame-option strong{font-size:10px}}
.result-dialog{border:0;padding:20px;background:var(--paper);color:var(--ink);width:min(420px,calc(100vw - 28px));max-height:calc(100vh - 28px);box-shadow:0 25px 75px #13291e33}.result-dialog::backdrop{background:#17251fc2}.result-header{display:flex;align-items:start;justify-content:space-between;gap:15px;margin-bottom:15px}.result-header h2{font-family:"Songti SC","STSong",Georgia,serif;font-weight:400;font-size:28px;margin:8px 0 0}.close-result{border:0;background:none;color:var(--ink);font-size:26px;line-height:1;padding:0 3px}.result-dialog img{display:block;width:100%;max-height:55vh;object-fit:contain;background:#e7ebe4}.result-dialog>p{font-size:11px;color:var(--muted);line-height:1.5;margin:14px 0}.result-download{min-height:46px;display:flex;justify-content:space-between;align-items:center;background:#234331;color:#fff;text-decoration:none;padding:0 15px;font-size:12px}

/* The extra controls stay quiet so the artwork remains the primary surface. */
.frame-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.frame-option{background:#f5f5f0}
.frame-option canvas{background:#e9ede7}
.frame-option strong{overflow:hidden;text-overflow:ellipsis}
.choice-tabs{display:flex;width:100%;border-bottom:1px solid var(--line);margin-bottom:14px}
.choice-tabs button{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:0 8px 10px;font-size:12px}
.choice-tabs button[aria-pressed=true]{color:var(--ink);border-bottom-color:#43694c}
.palette-options{display:flex;flex-wrap:wrap;align-items:center;gap:9px 17px}
.palette-option{display:inline-flex;align-items:center;gap:7px;min-height:33px;padding:0 1px;border:0;background:transparent;color:var(--muted);font-size:11px;white-space:nowrap}
.palette-option .swatch{display:block;width:22px;height:22px;flex:none;border-radius:50%;border:1px solid #c5ccc2}
.palette-option[aria-pressed=true]{color:var(--ink)}
.palette-option[aria-pressed=true] .swatch{box-shadow:0 0 0 2px var(--paper),0 0 0 3px #59715e}
.color-fields{display:flex;gap:10px;margin-top:15px}
.color-field{min-width:0;min-height:42px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#f4f5ef;padding:5px 8px 5px 12px;color:var(--ink);font-size:11px;cursor:pointer;flex:1}
.color-field-value{margin-left:auto;color:var(--muted);font-size:10px;white-space:nowrap}
.color-field input[type=color]{width:29px;height:29px;flex:none;padding:0;border:0;background:transparent;cursor:pointer}
.color-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-field input[type=color]::-webkit-color-swatch{border:1px solid #cbd1c8;border-radius:3px}
.angle-control{margin-top:14px}
.angle-control label,.slider-heading{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
.angle-control input[type=range],.mat-group input[type=range]{margin:20px 0 10px}
.mat-group legend{padding-bottom:17px}
.mat-options{margin-top:17px}
.mat-custom{margin-top:13px}
.mat-group .palette-options[aria-disabled=true]{opacity:.45}
.mat-group .color-field[aria-disabled=true]{opacity:.45}
.gradient-only[hidden]{display:none!important}
@media(max-width:390px){.palette-options{gap:7px 12px}.palette-option{font-size:10px}.color-field{font-size:10px;padding-left:8px}.color-field-value{font-size:9px}.frame-option strong{font-size:10px}}