:root{--orange:#f29f1f;--orange-dark:#ee8d00;--black:#050505;--line:#e8e8e8;--text:#111;--muted:#777;--bg:#f6f6f6;--panel:#fff;--shadow:0 10px 32px rgba(0,0,0,.10)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.topbar{height:74px;background:#050505;display:flex;align-items:center;justify-content:space-between;padding:0 28px;box-shadow:0 2px 10px rgba(0,0,0,.28);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;text-decoration:none}.brand img{display:block;height:46px;width:auto;max-width:310px;object-fit:contain}.topnav{display:flex;align-items:center;gap:10px}.topnav a{color:#fff;text-decoration:none;font-weight:800;font-size:14px;padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px}.topnav a:hover{border-color:var(--orange);color:var(--orange)}
.app-shell{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100vh - 74px)}.panel{background:var(--panel);border-right:1px solid var(--line);padding:22px 28px 30px;overflow:auto}.intro{padding-bottom:20px;border-bottom:1px solid var(--line)}.crumb{font-size:12px;color:#666;margin-bottom:14px}.crumb a{color:#666;text-decoration:none}.crumb strong{color:var(--orange-dark)}h1{margin:0 0 10px;text-transform:uppercase;font-size:28px;letter-spacing:-.02em}p{line-height:1.5;margin:0;color:#222}.control-group{padding:21px 0;border-bottom:1px solid var(--line)}.control-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px}label,.control-head label{font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.02em}#rowsValue,#scaleValue{font-weight:800;font-size:16px}.stepper{display:grid;grid-template-columns:48px 1fr 48px;gap:0;border:1px solid #ddd;border-radius:7px;overflow:hidden;background:#fff}.stepper button,.mini-stepper button{border:0;background:#fff;font-size:28px;min-height:46px;cursor:pointer}.stepper button:first-child{border-right:1px solid #ddd}.stepper button:last-child{border-left:1px solid #ddd}input[type=range]{width:100%;accent-color:var(--orange);cursor:pointer}.stepper input{padding:0 12px}.hint-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:10px}.segmented{display:grid;border:1px solid #ddd;border-radius:7px;overflow:hidden;background:#fff}.grid3{grid-template-columns:repeat(3,1fr)}.grid2{grid-template-columns:repeat(2,1fr)}.segmented button{border:0;border-right:1px solid #ddd;background:#fff;padding:15px 8px;font-size:14px;cursor:pointer}.segmented button:last-child{border-right:0}.segmented button.active,.wide-option.active{outline:1.5px solid var(--orange);outline-offset:-1.5px;color:var(--orange-dark);font-weight:800;background:#fffaf3}.wide-option{width:100%;margin-top:10px;border:1px solid #ddd;background:#fff;border-radius:7px;padding:14px 8px;font-size:14px;cursor:pointer}.custom-wrap{margin-top:10px}.hidden{display:none}.mini-stepper{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border:1px solid #ddd;border-radius:7px;overflow:hidden;background:#fff}.mini-stepper span{text-align:center;font-weight:800}.mini-stepper button:first-child{border-right:1px solid #ddd}.mini-stepper button:last-child{border-left:1px solid #ddd}.inline-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px}.switch{width:48px;height:28px;border:0;border-radius:999px;background:#cfcfcf;padding:3px;cursor:pointer;transition:.2s}.switch span{display:block;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}.switch.on{background:var(--orange)}.switch.on span{transform:translateX(20px)}.icon-option{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}.icon-option span{font-size:27px;line-height:1;color:#999}.a4-only{border:1px solid var(--orange);color:var(--orange-dark);font-weight:800;border-radius:7px;padding:15px;text-align:center;background:#fffaf3}.download{width:100%;margin-top:24px;background:#050505;color:#fff;border:0;border-radius:7px;padding:19px 16px;font-weight:900;text-transform:uppercase;font-size:18px;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.16)}.download:hover{filter:brightness(1.1)}
.preview-area{padding:28px 44px 46px;min-width:0}.preview-area h2{text-transform:uppercase;font-size:16px;margin:0 0 18px;color:#333}.paper-wrap{display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:0 0 22px}.paper{background:#fff;width:min(78vw,794px);height:auto;box-shadow:var(--shadow);display:block}.preview-note{max-width:794px;margin:0 auto;padding:14px 16px;border:1px solid #ddd;border-radius:6px;color:#666;background:#fff;font-size:14px}
@media (max-width:900px){.topbar{height:auto;min-height:66px;padding:10px 16px;gap:12px}.brand img{height:38px;max-width:250px}.topnav{gap:7px}.topnav a{font-size:13px;padding:8px 10px}.app-shell{display:block}.panel{border-right:0;border-bottom:1px solid var(--line);padding:18px}.intro{padding-bottom:16px}h1{font-size:25px}.preview-area{padding:20px 12px 36px}.paper-wrap{padding-bottom:14px}.paper{width:100%;max-width:520px}.control-group{padding:18px 0}.download{position:sticky;bottom:12px;z-index:5}.segmented button{padding:14px 4px;font-size:13px}}
@media (max-width:520px){.topbar{align-items:flex-start;flex-direction:column}.brand img{height:34px;max-width:260px}.topnav{width:100%;display:grid;grid-template-columns:1fr 1fr}.topnav a{text-align:center}.panel{padding:16px}.stepper{grid-template-columns:44px 1fr 44px}.preview-note{font-size:12px}.paper{max-width:100%}}
@media (max-width:360px){.brand img{height:30px;max-width:230px}}
@media print{.topbar,.panel,.preview-area h2,.preview-note{display:none}.app-shell{display:block}.preview-area{padding:0}.paper{width:100%;box-shadow:none}}