:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0f172a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#f97316;text-decoration:inherit}a:hover{color:#fb923c}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}.tubes-background{position:relative;width:100%;height:100%;min-height:100vh;overflow:hidden;background-color:#0f172a}.tubes-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.tubes-content{position:relative;z-index:10;width:100%;height:100%;pointer-events:none}.app-container{width:100%;min-height:100vh}.converter-wrapper{display:flex;flex-direction:column;min-height:100vh;max-width:1000px;margin:0 auto;padding:2rem 1.5rem;pointer-events:none}.converter-header{margin-bottom:2rem;pointer-events:auto}.header-row{display:flex;justify-content:center;align-items:center;gap:1rem}.converter-title{font-size:2.5rem;font-weight:700;color:#fff;margin:0;text-shadow:0 0 20px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.5);letter-spacing:-.02em}.converter-subtitle{font-size:1rem;color:#fffc;margin:.5rem 0 0;text-shadow:0 0 10px rgba(0,0,0,.8)}.converter-author{font-size:.75rem;color:#ffffff80;margin:.25rem 0 0}.converter-author a{color:#ffffffb3;text-decoration:none}.converter-author a:hover{color:#fff;text-decoration:underline}.converter-main{flex:1;display:flex;flex-direction:column;gap:1.5rem;pointer-events:auto}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.section-label{font-size:.875rem;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 0 10px rgba(0,0,0,.8)}.json-input,.csv-output{width:100%;min-height:200px;padding:1rem;font-family:SF Mono,Fira Code,Fira Mono,Roboto Mono,monospace;font-size:.875rem;line-height:1.6;color:#e2e8f0;background:#0f172ad9;border:1px solid rgba(255,255,255,.1);border-radius:12px;resize:vertical;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 24px #0000004d,inset 0 1px #ffffff0d;transition:border-color .2s ease,box-shadow .2s ease}.json-input:focus{outline:none;border-color:#f9731699;box-shadow:0 4px 24px #0000004d,0 0 0 3px #f973161a,inset 0 1px #ffffff0d}.json-input::placeholder{color:#ffffff59}.json-input-error{border-color:#ef444499}.json-input-error:focus{border-color:#ef4444cc;box-shadow:0 4px 24px #0000004d,0 0 0 3px #ef44441a,inset 0 1px #ffffff0d}.csv-output{background:#0f172abf;cursor:default}.csv-output::placeholder{color:#ffffff59}.error-message{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.75rem 1rem;font-size:.875rem;color:#fca5a5;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:8px}.action-section{display:flex;justify-content:center;padding:.5rem 0}.transform-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#f97316,#ea580c);border:none;border-radius:12px;cursor:pointer;box-shadow:0 4px 16px #f9731666,inset 0 1px #fff3;transition:all .2s ease}.transform-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px #f9731680,inset 0 1px #fff3}.transform-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #f9731666,inset 0 1px #fff3}.transform-btn:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#64748b,#475569);box-shadow:none}.copy-btn,.clear-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;font-size:.75rem;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:8px;cursor:pointer;transition:all .2s ease}.copy-btn:hover:not(:disabled),.clear-btn:hover:not(:disabled){background:#ffffff26;border-color:#ffffff40}.copy-btn:disabled{opacity:.5;cursor:not-allowed}.copy-btn:not(:disabled){background:#22c55e33;border-color:#22c55e66;color:#86efac}.copy-btn:not(:disabled):hover{background:#22c55e4d}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.output-section{flex:1}.converter-footer{text-align:center;margin-top:2rem;padding-top:1rem;pointer-events:auto}.footer-hint{font-size:.75rem;color:#ffffff80;margin:0}@media(max-width:640px){.converter-wrapper{padding:1.5rem 1rem}.converter-title{font-size:1.75rem}.converter-subtitle{font-size:.875rem}.json-input,.csv-output{min-height:150px;font-size:.8125rem}.transform-btn{width:100%;justify-content:center}}.help-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;font-size:.75rem;font-weight:500;color:#ffffffe6;background:#6366f14d;border:1px solid rgba(99,102,241,.5);border-radius:8px;cursor:pointer;transition:all .2s ease}.help-btn:hover{background:#6366f166;border-color:#6366f1b3}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:1rem;pointer-events:auto}.help-modal{position:relative;width:100%;max-width:560px;max-height:85vh;overflow-y:auto;padding:2rem;background:#0f172af2;border:1px solid rgba(255,255,255,.15);border-radius:16px;box-shadow:0 25px 50px #00000080;pointer-events:auto}.help-close-btn{position:absolute;top:1rem;right:1rem;padding:.5rem;color:#fff9;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.help-close-btn:hover{color:#fff;background:#ffffff1a}.help-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 1.5rem}.help-section{margin-bottom:1.5rem}.help-section:last-child{margin-bottom:0}.help-section h3{font-size:1rem;font-weight:600;color:#f97316;margin:0 0 .75rem}.help-section ol{margin:0;padding-left:1.25rem;color:#ffffffd9;font-size:.875rem;line-height:1.7}.help-section li{margin-bottom:.25rem}.help-section a{color:#818cf8;text-decoration:none}.help-section a:hover{text-decoration:underline}.help-section strong{color:#fff}@media(max-width:640px){.header-row{flex-direction:column;gap:.75rem}.help-modal{padding:1.5rem}.help-title{font-size:1.25rem;padding-right:2rem}}