#root{min-height:100vh}body{margin:0}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#e8e8e8;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{align-items:flex-start;gap:32px;max-width:1400px;margin:0 auto;padding:24px;display:flex}.controls{background:#fff;border-radius:12px;flex-direction:column;flex:0 0 300px;gap:16px;max-height:calc(100vh - 48px);padding:20px;display:flex;position:sticky;top:24px;overflow-y:auto;box-shadow:0 2px 16px #0000000f}.controls::-webkit-scrollbar{width:4px}.controls::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:4px}.controls-header{text-align:center;border-bottom:1px solid #f0f0f0;padding-bottom:8px}.controls-header h1{text-align:center;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);-webkit-text-fill-color:transparent;letter-spacing:.5px;-webkit-background-clip:text;background-clip:text;margin-bottom:0;font-size:22px;font-weight:700}.subtitle{color:#999;margin-top:2px;font-size:12px}.control-section{flex-direction:column;gap:10px;display:flex}.section-title{color:#888;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #f0f0f0;align-items:center;gap:6px;padding-bottom:6px;font-size:12px;font-weight:600;display:flex}.control-row{flex-direction:column;gap:4px;display:flex}.control-label{color:#888;font-size:12px;font-weight:500}.controls-footer{border-top:1px solid #f0f0f0;flex-direction:column;gap:8px;margin-top:4px;padding-top:12px;display:flex}.canvas-area{background:#c8c8c8;border-radius:8px;flex:1;justify-content:center;min-height:400px;padding:32px 24px;display:flex;position:relative}.canvas-wrap{flex-direction:column;gap:16px;width:100%;max-width:794px;display:flex}.canvas-page{aspect-ratio:210/297;box-sizing:border-box;background:#fff;border-radius:2px;width:100%;padding:38px;overflow:hidden;box-shadow:0 4px 24px #00000038}.paper{border-top:1px solid var(--gc,#888);border-left:1px solid var(--gc,#888);gap:0;width:100%;display:grid;container-type:inline-size}.cell{aspect-ratio:1;border-right:1px solid var(--gc,#888);border-bottom:1px solid var(--gc,#888);justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.cell .grid-lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.cell .char{z-index:1;font-size:calc(70cqi / var(--cols,12));color:#222;-webkit-user-select:none;user-select:none;line-height:1;position:relative}.paper{display:grid}.page-break{border-top:2px dashed #ccc;border-bottom:2px dashed #ccc;height:12px;margin:8px 0}.page-header{color:#555;border-bottom:1px solid #ccc;gap:16px;margin-top:15px;margin-bottom:12px;padding-bottom:10px;font-size:13px;display:flex}.header-field{flex:1;align-items:flex-end;gap:4px;display:flex}.header-line{border-bottom:1px solid #999;flex:1;min-width:40px;height:1.2em}.loading-overlay{color:#666;background:#ffffffb3;border-radius:4px;justify-content:center;align-items:center;font-size:18px;display:flex;position:absolute;inset:0}@media (width<=900px){.app{flex-direction:column}.controls{flex:none;width:100%;position:static}.canvas-area{padding:16px}.canvas-wrap{max-width:100%;padding:16px}}