.app{display:flex;width:100vw;height:100vh;position:relative}.dev-link{position:fixed;top:10px;right:10px;padding:8px 16px;background:#ff6b6b;color:#fff;text-decoration:none;border-radius:4px;font-weight:700;font-size:12px;z-index:1000;box-shadow:0 2px 4px #0003;transition:background .2s}.dev-link:hover{background:#ff5252}.left-pane{flex:1;display:flex;align-items:flex-start;justify-content:center;background-color:#e0e0e0;padding:40px;overflow:auto}.right-pane{width:350px;background-color:#fff;border-left:1px solid #ccc;padding:20px;overflow-y:auto}@media print{.dev-link,.right-pane{display:none}.left-pane{padding:0;background-color:#fff;overflow:visible}.app{display:block;height:auto;width:auto}}.sheets-container{display:flex;flex-direction:column;gap:30px}.sheet{width:21cm;height:29.7cm;background:#fff;box-shadow:0 2px 10px #0000001a;padding:2cm;display:flex;flex-direction:column;position:relative}.sheet-header{margin-bottom:30px;border-bottom:2px solid #333;padding-bottom:15px}.sheet-title{font-size:28px;font-weight:700;margin-bottom:10px;outline:none}.sheet-title:focus{background-color:#f0f8ff}.sheet-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.sheet-name{font-size:16px;color:#333;outline:none;padding:4px 8px;border-radius:3px}.sheet-name:focus{background-color:#f0f8ff}.sheet-date{font-size:14px;color:#666;outline:none;padding:4px 8px;border-radius:3px}.sheet-date:focus{background-color:#f0f8ff}.sheet-content{flex:1;overflow:hidden}.page-number{position:absolute;bottom:1cm;right:1cm;font-size:10px;color:#999}.blocks-container{display:flex;flex-wrap:wrap;gap:20px}.block{border:2px solid black;padding:15px;border-radius:8px;background-color:#fafafa;cursor:pointer;transition:all .2s ease;min-height:100px;display:flex;flex-direction:column;align-items:stretch}.block:hover{border-color:#4caf50;background-color:#f0f8f0;transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.block.selected{border-color:#2196f3;background-color:#e3f2fd;box-shadow:0 0 0 3px #2196f333}.block-full{width:100%}.block-half{width:calc(50% - 10px)}.block-header{display:flex;align-items:baseline;gap:5px;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.block-header-prefix,.block-header-suffix{outline:none;min-width:20px;padding:2px 4px;border-radius:2px;cursor:text}.block-header-prefix:empty:before{content:" ";color:#999}.block-header-suffix:empty:before{content:attr(data-placeholder);color:#999}.block-header-prefix:focus,.block-header-suffix:focus{background-color:#f0f8ff}.block-header-number{font-weight:700;color:#666}.block-content{display:flex;flex-wrap:wrap;gap:10px;width:100%;align-items:flex-start}.block-placeholder{color:#999;font-style:italic;text-align:center;width:100%}.sum-item{font-size:18px;font-family:Courier New,monospace;padding:8px;background-color:#fff;border:1px solid #e0e0e0;border-radius:3px;text-align:left;width:fit-content}.sum-item img{zoom:var(--viz-scale, 1);max-width:100%;height:auto;display:block;margin-bottom:8px}.viz-wrapper{display:block;width:100%}.viz-wrapper img{max-width:100%;height:auto;display:block;margin-bottom:0}.placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:18px}@media print{body{margin:0;padding:0}.sheets-container{gap:0}.sheet{box-shadow:none;margin:0;padding:2cm;height:auto;min-height:0;page-break-after:always;page-break-inside:avoid}.sheet:last-child{page-break-after:avoid}.page-number{display:none}.block{page-break-inside:avoid}.block.selected{border-color:#000;background-color:#fafafa;box-shadow:none}}.config-pane{display:flex;flex-direction:column;gap:20px}.config-pane h2{font-size:24px;margin-bottom:10px;color:#333}.config-section{border:1px solid #e0e0e0;padding:15px;border-radius:4px;background-color:#fafafa}.config-section h3{font-size:16px;margin-bottom:15px;color:#555}.config-field{margin-bottom:15px}.config-field.inline{display:inline-block;margin-right:15px;margin-bottom:10px}.config-field label{display:block;margin-bottom:5px;font-size:14px;color:#555}.config-field input[type=number]{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}.config-field.inline input[type=number]{width:80px}.config-field input[type=checkbox]{margin-right:8px}.config-field input[type=range]{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,#2196f3,#2196f3 6.25%,#d3d3d3 6.25%,#d3d3d3 12.5%,#2196f3 12.5%,#2196f3 18.75%,#d3d3d3 18.75%,#d3d3d3 25%,#2196f3 25%,#2196f3 31.25%,#d3d3d3 31.25%,#d3d3d3 37.5%,#2196f3 37.5%,#2196f3 43.75%,#d3d3d3 43.75%,#d3d3d3 50%,#2196f3 50%,#2196f3 56.25%,#d3d3d3 56.25%,#d3d3d3 62.5%,#2196f3 62.5%,#2196f3 68.75%,#d3d3d3 68.75%,#d3d3d3 75%,#2196f3 75%,#2196f3 81.25%,#d3d3d3 81.25%,#d3d3d3 87.5%,#2196f3 87.5%,#2196f3 93.75%,#d3d3d3 93.75%,#d3d3d3);outline:none;-webkit-appearance:none;margin-top:8px}.config-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#2196f3;cursor:pointer;box-shadow:0 2px 4px #0003}.config-field input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#2196f3;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.config-field select{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px;background-color:#fff}.config-hint{font-size:12px;color:#666;font-style:italic;margin:-5px 0 10px}.block-config{background-color:#e3f2fd;border-color:#2196f3}.config-divider{border:none;border-top:1px solid #2196F3;margin:15px 0;opacity:.5}.toggle-field{display:flex;align-items:center;gap:10px;margin-top:8px}.toggle-field span{font-size:13px;color:#666;transition:all .2s}.toggle-field span.active{color:#2196f3;font-weight:700}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:#2196f3}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.toggle-switch input:focus+.toggle-slider{box-shadow:0 0 1px #2196f3}.generate-btn{width:100%;padding:12px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px}.generate-btn:hover{background-color:#45a049}.generate-btn:active{background-color:#3d8b40}.print-btn{width:100%;padding:12px;background-color:#2196f3;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px}.print-btn:hover{background-color:#0b7dda}.print-btn:active{background-color:#0868b8}.instructions{list-style:none;padding:0;font-size:13px;color:#666;line-height:1.6}.instructions li{margin-bottom:8px;padding-left:20px;position:relative}.instructions li:before{content:"•";position:absolute;left:5px;color:#4caf50}.viz-field{display:flex;flex-direction:column}.viz-preview-img{margin-top:10px;padding:10px;background:#fff;border:1px solid #ddd;border-radius:4px;text-align:center}.viz-preview-img img{max-width:100%;height:auto}.button-group{display:flex;gap:10px;margin-top:10px}.button-group button{flex:1;padding:10px;border:none;border-radius:4px;font-size:14px;font-weight:700;cursor:pointer}.save-btn{background-color:#4caf50;color:#fff}.save-btn:hover{background-color:#45a049}.cancel-btn{background-color:#f44336;color:#fff}.cancel-btn:hover{background-color:#da190b}.randomize-btn{background-color:#ff9800;color:#fff}.randomize-btn:hover{background-color:#e68900}.text-style-buttons{display:flex;gap:5px;margin-top:5px}.style-button{width:36px;height:36px;border:2px solid #ccc;background-color:#fff;border-radius:4px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.style-button:hover{border-color:#888;background-color:#f5f5f5}.style-button.active{border-color:#2196f3;background-color:#e3f2fd;color:#2196f3}.feedback-note{background-color:#f5f5f5;border:1px solid #ddd;text-align:center}.feedback-note p{margin:0;font-size:13px;color:#666}.feedback-note a{color:#2196f3;text-decoration:none;font-weight:700}.feedback-note a:hover{text-decoration:underline}.viz-preview{padding:20px;background-color:#f5f5f5;min-height:100vh;position:relative}.back-link{position:fixed;top:10px;left:10px;padding:8px 16px;background:#2196f3;color:#fff;text-decoration:none;border-radius:4px;font-weight:700;font-size:12px;z-index:1000;box-shadow:0 2px 4px #0003;transition:background .2s}.back-link:hover{background:#0b7dda}.viz-header{background:#fff;padding:20px;margin-bottom:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.viz-header h1{margin:0 0 10px;color:#333}.viz-header p{margin:0;color:#666}.viz-content{display:flex;flex-direction:column;gap:30px}.operation-section{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.operation-section h2{margin:0 0 20px;color:#2196f3;font-size:24px}.color-section{margin-bottom:30px;padding:15px;background:#fafafa;border-radius:4px}.color-section h3{margin:0 0 15px;color:#555;font-size:18px}.viz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}.viz-item{background:#fff;padding:15px;border:1px solid #ddd;border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:10px}.viz-label{font-weight:700;font-size:16px;color:#333}.viz-svg{max-width:100%;height:auto;border:1px solid #eee;border-radius:2px;background:#fff}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#f0f0f0}#root{width:100vw;height:100vh}@media print{body{background-color:#fff}#root{height:auto}.dev-link{display:none}}