:root{--bg-color:beige;--line-color:#87ceeb;--text-color:#1a1a1a;--accent-color:#2e8b57;--panel-bg:#fff;--border-color:#ccc}*{box-sizing:border-box;margin:0;padding:0}body{background:#e8e8e8;flex-direction:column;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}.controls{background:var(--panel-bg);border-bottom:2px solid var(--border-color);z-index:100;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:10px 16px;display:flex;position:sticky;top:0;box-shadow:0 2px 8px #0000001a}.control-group{align-items:center;gap:5px;display:flex}.control-group label{color:#444;white-space:nowrap;font-size:12px;font-weight:600}.control-group input[type=range]{cursor:pointer;width:80px}.control-group input[type=number]{border:1px solid var(--border-color);text-align:center;border-radius:4px;width:50px;padding:3px;font-size:12px}.control-group select{border:1px solid var(--border-color);cursor:pointer;border-radius:4px;padding:3px 6px;font-size:12px}.control-group button{background:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:600;transition:background .2s}.control-group button:hover{background:#236b43}.control-group button.secondary{background:#6c757d}.control-group button.secondary:hover{background:#545b62}.control-group button.danger{background:#dc3545}.control-group button.danger:hover{background:#b02a37}.control-group button.active{background:#1e6f3e;box-shadow:inset 0 2px 4px #0003}.value-display{color:#666;text-align:center;min-width:28px;font-size:11px;font-weight:600}.mode-toggle{background:#4a90d9!important}.mode-toggle:hover{background:#357abd!important}.mode-toggle.active{background:#2a5a8a!important}.templates-bar{border-bottom:1px solid var(--border-color);background:#fff;flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 16px;display:flex}.template-btn{border:1px solid var(--accent-color);color:var(--accent-color);cursor:pointer;background:#e8f5e9;border-radius:12px;padding:4px 10px;font-size:11px;font-weight:600;transition:all .2s}.template-btn:hover{background:var(--accent-color);color:#fff}.sheet-container{flex:1;justify-content:center;padding:25px 15px;display:flex;overflow-y:auto}.sheet{background:var(--bg-color);width:210mm;min-height:297mm;padding:20mm 18mm;position:relative;box-shadow:0 4px 20px #00000026}.sheet.normal-mode{background-image:repeating-linear-gradient(transparent, transparent calc(var(--line-height) - 1px), var(--line-color) calc(var(--line-height) - 1px), var(--line-color) var(--line-height));background-size:100% var(--line-height);background-position:0 20mm}.sheet-title{text-align:center;color:var(--text-color);letter-spacing:1px;margin-bottom:12px;font-size:20px;font-weight:700}.sheet-content{font-family:var(--font-family,"Comic Sans MS", "Chalkboard SE", cursive);font-size:var(--font-size,28px);line-height:var(--line-height,40px);color:var(--text-color);letter-spacing:var(--letter-spacing,2px);word-spacing:var(--word-spacing,4px);resize:none;width:100%;min-height:240mm;text-align:var(--text-align,left);background:0 0;border:none;outline:none;padding:0 5px;overflow:hidden}.sheet-content::placeholder{color:#999;font-style:italic}.trace-area{flex-direction:column;gap:4px;margin-top:8px;display:none}.trace-row{border-bottom:1px solid var(--line-color);flex-wrap:wrap;align-items:flex-end;gap:6px;padding-top:2px;padding-bottom:2px;display:flex}.trace-cell{flex-direction:column;align-items:center;display:flex}.trace-canvas{display:block}.trace-label{color:#888;text-align:center;margin-top:1px;font-size:10px;font-weight:600}.trace-practice-cell{flex-direction:column;align-items:center;display:flex}.trace-practice-label{color:#aaa;margin-top:1px;font-size:9px;font-style:italic}body.high-contrast{--bg-color:#000;--line-color:#ff0;--text-color:#0f0;--panel-bg:#1a1a1a;--border-color:#444}body.high-contrast .sheet{box-shadow:0 4px 20px #ffffff1a}@media print{body{background:#fff}.controls,.templates-bar{display:none!important}.sheet-container{padding:0}.sheet{box-shadow:none;page-break-after:always;width:100%;min-height:auto;padding:12mm}.sheet-content{min-height:auto}}@media (width<=600px){.sheet{width:100%;min-height:auto;padding:12mm 8mm}.controls{gap:6px;padding:6px}.control-group label{font-size:10px}}