@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;transition:background-color .3s,color .3s}a{color:inherit}a,a:hover{text-decoration:none}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes flow{0%{background-position:0 50%}to{background-position:100% 50%}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes loading-dots1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes loading-dots2{0%{transform:translate(0)}to{transform:translate(24px)}}@keyframes loading-dots3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes slide-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}.app{background-color:#f9fafb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#374151;min-height:100vh;display:flex;flex-direction:column}.app.dark-mode{background-color:#1f2937;color:#d1d5db}.top-bar{background-color:#fff;box-shadow:0 2px 4px #0000001a;position:-webkit-sticky;position:sticky;top:0;z-index:100;transition:background-color .3s,box-shadow .3s}.app.dark-mode .top-bar{background-color:#2d2d2d;box-shadow:0 2px 4px #0000004d}.top-bar-container{max-width:1200px;margin:0 auto;padding:0 20px}.top-bar-content{display:flex;justify-content:space-between;align-items:center;height:60px}.top-bar-logo{flex:1 1}.top-bar-title-link{color:inherit}.top-bar-title-link,.top-bar-title-link:hover{text-decoration:none}.top-bar-title{font-size:1.5rem;font-weight:700;color:#333;margin:0;cursor:pointer;display:flex;align-items:center;transition:color .3s}.app.dark-mode .top-bar-title{color:#f5f5f5}.top-bar-icon{margin-right:10px;color:orange}.top-bar-encouragement{flex:1 1;text-align:center;padding:0 16px}.encouragement-text{margin:0;font-size:16px;color:#666;font-weight:500;transition:all .3s ease}.app.dark-mode .encouragement-text{color:#9ca3af}.encouragement-text.slide-in{animation:slide-in .3s ease forwards}.encouragement-text.slide-out{animation:slide-out .3s ease forwards}.top-bar-controls{display:flex;align-items:center;gap:16px}.search-wrapper{position:relative}.search-input{padding:8px 16px 8px 40px;border-radius:9999px;border:1px solid #e5e7eb;width:256px;outline:none;background-color:#fff;color:#374151}.app.dark-mode .search-input{border:1px solid #374151;background-color:#1f2937;color:#d1d5db}.app.dark-mode .search-input:focus,.search-input:focus{border-color:#fdba74;box-shadow:0 0 0 3px #ffb86c4d}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af}.dark-mode-toggle{background-color:#ff7a45;color:#fff;border:none;font-size:18px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}.dark-mode-toggle:hover{background-color:#ff6327}.sidebar-placeholder{display:flex;align-items:flex-start;padding-top:24px;position:-webkit-sticky;position:sticky;top:20px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.sidebar-toggle-button{background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;cursor:pointer;box-shadow:0 1px 2px #0000000d;color:#6b7280;display:flex;align-items:center;justify-content:center}.app.dark-mode .sidebar-toggle-button{background-color:#1f2937;border:1px solid #374151;box-shadow:0 1px 2px #00000080;color:#9ca3af}.sidebar-toggle-button:hover{background-color:#f9fafb}.app.dark-mode .sidebar-toggle-button:hover{background-color:#374151}.countdown-banner{padding:16px 0;background:linear-gradient(90deg,#ff7a45,#ff9f6b);animation:pulse 5s ease-in-out infinite}.app.dark-mode .countdown-banner{background:linear-gradient(90deg,#4c1d95,#7e22ce)}.countdown-container{max-width:1200px;margin:0 auto;padding:0 16px}.countdown-content{display:flex}.countdown-items{display:flex;align-items:center;justify-content:space-between;width:100%;flex-wrap:wrap;gap:16px}.countdown-item{display:flex;align-items:center;gap:12px}.countdown-icon-container{width:48px;height:48px;border-radius:50%;background-color:#fff3;display:flex;align-items:center;justify-content:center}.countdown-icon{font-size:20px;color:#fff}.countdown-text{display:flex;flex-direction:column}.countdown-label{color:#fff;font-size:14px;margin-bottom:4px}.countdown-number{color:#fff;font-size:24px;font-weight:700}.progress-wrapper{flex:1 1;min-width:120px;margin-left:12px}.progress-container{width:100%;height:12px;background-color:#fff3;border-radius:6px;margin-top:8px;overflow:hidden}.app.dark-mode .progress-container{background-color:#0003}.progress-bar{height:100%;background-color:#fff;border-radius:6px}.progress-flow{background:linear-gradient(90deg,#fff3,#ffffff80 50%,#fff3);background-size:200% 100%;animation:flow 2s linear infinite;width:72%}.app.dark-mode .progress-flow{background:linear-gradient(90deg,#0003,#00000080 50%,#0003)}.detail-link{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;cursor:pointer;animation:pulse 2s infinite;white-space:nowrap}.detail-link-arrow{animation:float 2s ease-in-out infinite}.main-container{flex:1 1;display:flex;flex-direction:column}.main-content{max-width:1200px;margin:0 auto;padding:24px 16px;display:flex;gap:24px;width:100%;flex:1 1}.sidebar{background-color:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;padding:16px;width:250px;position:-webkit-sticky;position:sticky;top:20px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-height:calc(100vh - 150px);overflow-y:auto}.app.dark-mode .sidebar{background-color:#111827;box-shadow:0 1px 2px #00000080}.sidebar-content{height:100%;display:flex;flex-direction:column}.sidebar-header{justify-content:space-between;margin-bottom:16px}.sidebar-header,.sidebar-title{display:flex;align-items:center}.sidebar-title{font-size:18px;font-weight:600;color:#333;margin:0;gap:8px}.app.dark-mode .sidebar-title{color:#f9fafb}.sidebar-icon{color:#ff7a45}.app.dark-mode .sidebar-icon{color:#fb923c}.sidebar-close{background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:4px;border-radius:4px}.sidebar-close:hover{background-color:#f0f0f0;color:#333}.app.dark-mode .sidebar-close:hover{background-color:#374151;color:#f9fafb}.tool-categories{display:flex;flex-direction:column;gap:8px;flex:1 1}.category-group{border-radius:8px}.category-summary{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:500;color:#333;list-style:none}.app.dark-mode .category-summary{color:#f9fafb}.category-summary:hover{background-color:#fff5f0}.app.dark-mode .category-summary:hover{background-color:#1f2937}.category-text{display:flex;align-items:center;gap:8px}.category-icon{color:#ff9f6b}.app.dark-mode .category-icon{color:#fdba74}.category-arrow{font-size:12px;color:#999;transition:transform .2s}.app.dark-mode .category-arrow{color:#6b7280}.category-group[open] .category-arrow{transform:rotate(180deg)}.category-items{display:flex;flex-direction:column;gap:4px;margin-top:8px;margin-left:28px}.category-item{display:block;padding:6px 12px;border-radius:6px;color:#666;font-size:14px;text-decoration:none}.app.dark-mode .category-item{color:#d1d5db}.category-item:hover{background-color:#fff5f0;color:#ff7a45}.app.dark-mode .category-item:hover{background-color:#1f2937;color:#fb923c}.main{flex:1 1;display:flex;flex-direction:column;gap:24px;position:relative}.tools-section{background-color:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;padding:24px}.app.dark-mode .tools-section{background-color:#111827;box-shadow:0 1px 2px #00000080}.tools-title{font-size:20px;font-weight:600;color:#333;margin-top:0;margin-bottom:20px}.app.dark-mode .tools-title{color:#f9fafb}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:20px;gap:20px}.tool-card{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:20px;transition:all .3s;cursor:pointer;text-align:center}.app.dark-mode .tool-card{background-color:#1f2937;border:1px solid #374151}.tool-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.app.dark-mode .tool-card:hover{box-shadow:0 10px 15px -3px #00000080,0 4px 6px -2px #0003}.tool-icon{font-size:32px;color:#ff7a45;margin-bottom:16px}.tool-card-title{font-size:18px;font-weight:600;color:#333;margin:0 0 8px}.app.dark-mode .tool-card-title{color:#f9fafb}.tool-card-description{font-size:14px;color:#666;margin:0}.app.dark-mode .tool-card-description{color:#9ca3af}.tool-page{max-width:1200px;margin:0 auto;padding:24px 16px;width:100%}.tool-page-header{margin-bottom:24px}.back-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background-color:#fff;color:#ff7a45;border:1px solid #ff7a45;border-radius:6px;text-decoration:none;font-weight:500;transition:all .2s}.app.dark-mode .back-button{background-color:#1f2937;border:1px solid #fb923c;color:#fb923c}.back-button:hover{background-color:#fff5f0}.app.dark-mode .back-button:hover{background-color:#111827}.json-tool{background-color:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;padding:24px}.app.dark-mode .json-tool{background-color:#111827;box-shadow:0 1px 2px #00000080}.tool-header{margin-bottom:24px;text-align:center}.tool-title{font-size:24px;font-weight:700;color:#333;margin:0 0 8px}.app.dark-mode .tool-title{color:#f9fafb}.tool-description{font-size:16px;color:#666;margin:0}.app.dark-mode .tool-description{color:#9ca3af}.tool-content{display:flex;flex-direction:column;gap:24px}.tool-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.format-buttons{display:flex;gap:8px}.format-button{padding:8px 16px;background-color:#f3f4f6;color:#374151;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s}.app.dark-mode .format-button{background-color:#1f2937;color:#d1d5db;border:1px solid #374151}.format-button:hover{background-color:#e5e7eb}.app.dark-mode .format-button:hover{background-color:#374151}.format-button.active{background-color:#ff7a45;color:#fff;border-color:#ff7a45}.app.dark-mode .format-button.active{background-color:#fb923c;color:#fff;border-color:#fb923c}.action-buttons{display:flex;gap:8px}.action-button{padding:8px 16px;background-color:#fff;color:#ff7a45;border:1px solid #ff7a45;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s}.app.dark-mode .action-button{background-color:#1f2937;color:#fb923c;border:1px solid #fb923c}.action-button:hover:not(:disabled){background-color:#fff5f0}.app.dark-mode .action-button:hover:not(:disabled){background-color:#111827}.action-button:disabled{opacity:.5;cursor:not-allowed}.editor-container{display:flex;gap:20px;flex:1 1;min-height:400px}.input-section,.output-section{flex:1 1;display:flex;flex-direction:column}.section-title{font-size:18px;font-weight:600;color:#333;margin:0 0 12px}.app.dark-mode .section-title{color:#f9fafb}.json-editor{flex:1 1;border:1px solid #e5e7eb;border-radius:6px;padding:12px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;resize:none;background-color:#fff;color:#374151}.app.dark-mode .json-editor{border:1px solid #374151;background-color:#1f2937;color:#d1d5db}.json-editor:focus{outline:none}.app.dark-mode .json-editor:focus,.json-editor:focus{border-color:#fdba74;box-shadow:0 0 0 3px #ffb86c4d}.error-message{flex:1 1;display:flex;align-items:center;gap:12px;padding:12px;background-color:#fef2f2;border:1px solid #fecaca;border-radius:6px;color:#b91c1c}.app.dark-mode .error-message{background-color:#450a0a;border:1px solid #7f1d1d;color:#fecaca}.error-icon{font-size:20px}.draggable-countdown{position:fixed;z-index:1000;background:linear-gradient(135deg,#ff7a45,#ff9f6b);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;-webkit-user-select:none;user-select:none;transition:transform .2s}.draggable-countdown:hover{transform:scale(1.05)}.countdown-display{color:#fff;font-weight:700;text-align:center;font-size:12px}.countdown-display i{display:block;margin-bottom:4px;font-size:20px}.countdown-tooltip{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);background-color:#1f2937;color:#fff;padding:8px 12px;border-radius:4px;font-size:14px;white-space:nowrap;box-shadow:0 4px 6px #0000001a;z-index:1001}.countdown-tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid #0000;border-top-color:#1f2937}.app.dark-mode .countdown-tooltip{background-color:#374151}.app.dark-mode .countdown-tooltip:after{border-color:#374151 #0000 #0000}.celebration{pointer-events:none}.celebration,.loading-indicator{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}.loading-indicator{background-color:#00000080;display:flex;align-items:center;justify-content:center}.loading-content{background-color:#fff;padding:24px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:16px}.app.dark-mode .loading-content{background-color:#1f2937}.loading-dots{display:flex;gap:4px}.loading-dots div{width:12px;height:12px;background-color:#ff7a45;border-radius:50%;animation:loading-dots1 1s infinite}.app.dark-mode .loading-dots div{background-color:#fb923c}.loading-dots div:nth-child(2){animation:loading-dots2 1s infinite;animation-delay:.2s}.loading-dots div:nth-child(3){animation:loading-dots3 1s infinite;animation-delay:.4s}.loading-text{margin:0;color:#333;font-size:16px}.app.dark-mode .loading-text{color:#f9fafb}.hidden{display:none}.footer{background-color:#fff;border-top:1px solid #e5e7eb;padding:20px 0;margin-top:auto}.app.dark-mode .footer{background-color:#111827;border-top:1px solid #374151}.footer-content{max-width:1200px;margin:0 auto;padding:0 16px;text-align:center}.footer-text{margin:0 0 8px;color:#666;font-size:14px}.app.dark-mode .footer-text{color:#d1d5db}.footer-link{color:#ff7a45;text-decoration:none}.app.dark-mode .footer-link{color:#fb923c}