:root{--bg-color:#f6f5f0;--text-main:#2b2b2b;--text-muted:#6b6b6b;--accent:#d8c8b8;--panel-bg:#fff9;--panel-border:#fff6;--panel-width:380px}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--body-font,sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;line-height:1.6}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-family:var(--title-font,serif);font-weight:var(--title-weight,400);margin:0 0 1rem}.logo-text{font-family:var(--logo-font,"DM Serif Display", serif);font-weight:var(--logo-weight,400)}.title-text{font-family:var(--title-font,"DM Serif Text", serif);font-weight:var(--title-weight,400)}.body-text{font-family:var(--body-font,"Noto Sans TC", sans-serif);font-weight:var(--body-weight,400)}.app-container{min-height:100vh;display:flex;position:relative}.control-panel{width:var(--panel-width);background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--panel-border);z-index:10;height:100vh;padding:2rem;position:sticky;top:0;overflow-y:auto;box-shadow:2px 0 12px #00000005}.control-group{border-bottom:1px solid #0000000d;margin-bottom:2rem;padding-bottom:2rem}.control-group:last-child{border-bottom:none}.control-group h3{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1.5rem;font-family:sans-serif;font-size:.85rem}.control-item{margin-bottom:1.5rem}.control-item label{color:var(--text-main);justify-content:space-between;margin-bottom:.5rem;font-family:sans-serif;font-size:.85rem;font-weight:500;display:flex}.val-display{color:var(--text-muted);font-weight:400}input[type=range]{-webkit-appearance:none;background:0 0;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-main);cursor:pointer;border-radius:50%;width:16px;height:16px;margin-top:-6px}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#0000001a;border-radius:2px;width:100%;height:4px}select,input[type=text]{width:100%;color:var(--text-main);background:#fff;border:1px solid #0000001a;border-radius:6px;padding:.75rem;font-family:sans-serif;font-size:.9rem;transition:all .2s}select:focus,input[type=text]:focus{border-color:var(--text-main);outline:none;box-shadow:0 0 0 2px #0000000d}.preview-area{background-color:var(--bg-color);flex:1;padding:6rem 8%}.landing-header{text-align:center;margin-bottom:4rem}.landing-logo{margin-bottom:1rem;font-size:4rem;line-height:1.1}.landing-subtitle{color:var(--text-muted);max-width:600px;margin:0 auto;font-size:1.25rem}.content-block{background:#fff;border-radius:2px;max-width:800px;margin:0 auto 5rem;padding:4rem;box-shadow:0 20px 40px #00000008}.content-block h2{margin-bottom:1.5rem;font-size:2.5rem;line-height:1.3}.content-block p{color:#4a4a4a;margin-bottom:1.5rem;font-size:1.125rem}.content-block hr{background:#0000001a;border:0;height:1px;margin:3rem 0}.blockquote{border-left:4px solid var(--accent);color:var(--text-main);margin:3rem 0;padding-left:2rem;font-size:1.5rem;font-style:italic}