*,*:before,*:after{box-sizing:border-box}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-color: #2c3e50;--secondary-color: #3498db;--background-color: #ffffff;--container-bg: #ffffff;--text-color: #ffffff;--border-radius: 10px;--spacing: 16px;--primary-bg: #121316;--secondary-bg: #1e1f23;--card-bg: #27282d;--text-secondary: #a8b3cf;--accent-color: #5f9eff;--border-color: #3f4147}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--primary-bg);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.dark-select option:hover{background-color:var(--card-bg)}input.dark-select{margin:0;-moz-appearance:textfield}input.dark-select::-webkit-outer-spin-button,input.dark-select::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.source-container{text-align:center;margin-top:60px;padding-top:var(--spacing);border-top:1px solid #3f4147;display:flex;flex-direction:column;align-items:center;gap:15px}.source-container select,.source-container input{padding:12px 16px;border-radius:var(--border-radius);border:1px solid #3f4147;font-size:14px;width:300px;background-color:var(--secondary-bg);color:var(--text-color)}.source-description{margin:5px 0;color:var(--text-secondary);font-size:14px;max-width:500px;line-height:1.4}.source-container a{color:var(--accent-color);text-decoration:none;font-size:14px;font-weight:500}.source-container a:hover{text-decoration:underline}@media (max-width: 768px){.mode-toggles{flex-direction:column;align-items:center}.mode-toggles select{width:100%;max-width:300px}.side{width:100%;max-width:200px;margin:0 auto}.source-container select,.source-container input{width:100%;max-width:300px}}.percentage{font-size:14px;color:var(--text-secondary);margin-top:8px;opacity:.8}.dark-select.disabled{opacity:.6;cursor:not-allowed}.dark-select.disabled:hover{border-color:#3f4147}.converter-container{max-width:600px;margin:20px auto;padding:2rem;background-color:var(--secondary-bg);border-radius:16px;border:1px solid var(--border-color)}.converter-title{font-size:2em;font-weight:600;color:var(--text-color);text-align:center;margin:0;line-height:1.2em}.converter-subtitle{font-size:14px;color:var(--text-secondary);text-align:center;margin:8px 0 16px;opacity:.8}.controls-section{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 15px;padding:16px}.measurement-toggles{display:flex;justify-content:center;align-items:center;gap:12px;position:relative;width:fit-content;margin:0 auto;padding:0 48px}.measurement-toggles .emoji-nav-arrow{position:absolute;top:50%;transform:translateY(-50%)}.measurement-toggles .emoji-nav-arrow.left{left:0}.measurement-toggles .emoji-nav-arrow.right{right:0}.mode-status{text-align:center;color:var(--text-secondary);font-size:13px;font-family:monospace;opacity:.8;padding:4px 12px;border-radius:8px}.converter-body{display:flex;justify-content:center;align-items:flex-start;gap:5px}.emoji-box-container{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:220px;margin:0 auto}.side .emoji-box-container .emoji-nav-arrow.left{left:-8px}.side .emoji-box-container .emoji-nav-arrow.right{right:-8px}.emoji-box{font-size:80px;line-height:1;background-color:var(--card-bg);width:140px;height:140px;display:flex;align-items:center;justify-content:center;border-radius:20px;border:1px solid var(--border-color);cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0000004d;margin:0}.emoji-box:hover{background-color:var(--secondary-bg);transform:translateY(-2px);box-shadow:0 8px 16px #0006;border-color:var(--accent-color)}.emoji-box:active{transform:translateY(1px);box-shadow:0 2px 6px #0003}.emoji-box.active{background-color:var(--secondary-bg);border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color),0 4px 12px #0000004d}.quantity{font-size:24px;font-weight:400;margin:8px 0;color:var(--text-color);opacity:.95;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:nowrap;width:100%}.quantity .unit-text{color:var(--text-secondary);font-weight:400;font-size:inherit;font-family:inherit;margin:0;white-space:nowrap}.equals-sign{font-size:36px;font-weight:600;color:var(--text-color);opacity:1;margin-top:100px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.emoji-button{font-size:24px;cursor:pointer;padding:12px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:12px;transition:all .2s ease;background-color:var(--card-bg);box-shadow:0 2px 8px #0000004d;position:relative;z-index:99}.emoji-button:hover{background-color:var(--secondary-bg);transform:translateY(-2px);box-shadow:0 4px 12px #0006;border-color:var(--accent-color)}.emoji-button:active{transform:translateY(1px);box-shadow:0 1px 4px #0003}.emoji-button.active{background-color:var(--secondary-bg);box-shadow:0 0 0 2px var(--accent-color);border-color:var(--accent-color)}.info-button{margin:0 8px}.estimate-toggles{display:flex;gap:8px}.unit-text{font-size:.8em;color:var(--text-secondary);opacity:.8;font-family:monospace}.percentage-footer{margin-top:20px;padding-top:20px;color:var(--text-secondary);font-size:13px;line-height:1.5}.percentage-footer p{margin:0 0 4px}.percentage-footer p:last-child{margin-bottom:0}.selector-container{display:flex;flex-direction:column;gap:10px;width:140px}.dark-select{padding:8px;border-radius:var(--border-radius);border:1px solid #3f4147;font-size:14px;text-align:center;width:140px;background-color:var(--secondary-bg);color:var(--text-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.side{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;width:300px;position:relative}.equivalent-options{position:absolute;top:calc(100% - 60px);left:50%;transform:translate(-50%);padding:12px;background-color:var(--card-bg);border:1px solid #3f4147;border-radius:12px;box-shadow:0 4px 12px #0000004d;z-index:98;animation:fadeIn .2s ease;display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;max-width:240px}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}.coming-soon-popup{position:absolute;top:calc(100% - 60px);left:50%;transform:translate(-50%);padding:12px 16px;background-color:var(--card-bg);border:1px solid #3f4147;border-radius:12px;box-shadow:0 4px 12px #0000004d;z-index:98;animation:fadeIn .2s ease;min-width:140px;max-width:160px;text-align:center;color:var(--text-secondary);font-size:14px;line-height:1.4;white-space:normal;word-break:normal;display:block}.equivalent-options:before,.coming-soon-popup:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%) rotate(45deg);width:16px;height:16px;background-color:var(--card-bg);border-left:1px solid #3f4147;border-top:1px solid #3f4147;z-index:-1}.equivalent-options .emoji-button{width:48px;height:48px;padding:0;font-size:24px;display:flex;align-items:center;justify-content:center;background-color:var(--secondary-bg);border:1px solid #3f4147;border-radius:12px;cursor:pointer;transition:all .2s ease}.equivalent-options .emoji-button:hover{background-color:var(--card-bg);transform:translateY(-1px);box-shadow:0 4px 8px #0003;border-color:#5f5f6f}.equivalent-options .emoji-button:active{transform:translateY(1px);box-shadow:0 1px 2px #0003}.equivalent-options .emoji-button.active{background-color:var(--card-bg);border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color)}@media (max-width: 768px){.converter-container{padding:1.5rem 1rem}.converter-title{font-size:1.5em}.converter-subtitle{font-size:13px;margin:6px 0 12px}.converter-body{flex-direction:column;align-items:center;gap:20px}.equals-sign{transform:rotate(90deg);margin:0;font-size:28px;height:28px;line-height:28px}.side{width:100%;max-width:230px;margin:0 auto}.emoji-box{width:120px;height:120px;font-size:60px}.side .emoji-box-container .emoji-nav-arrow.left{left:-4px}.side .emoji-box-container .emoji-nav-arrow.right{right:-4px}.quantity{font-size:20px}.selector-container,.dark-select{width:120px}.equivalent-options{max-width:200px;gap:6px;padding:8px}.equivalent-options .emoji-button{width:42px;height:42px;font-size:20px}}@media (max-height: 700px){.converter-container{margin:10px auto}.measurement-toggles{gap:8px}.emoji-box{width:100px;height:100px;font-size:50px}.quantity{font-size:18px;margin:6px 0}.unit-text{font-size:12px;margin-top:2px}.selector-container,.dark-select{width:100px}}@media (max-width: 480px){.converter-container{margin:10px auto}.converter-body{gap:15px}.controls-section{margin-bottom:20px}.side{max-width:200px}.selector-container{max-width:260px}.emoji-box{width:100px;height:100px;font-size:52px}.side .emoji-box-container .emoji-nav-arrow.left{left:0}.side .emoji-box-container .emoji-nav-arrow.right{right:0}.equals-sign{margin:5px 0;font-size:24px;height:24px;line-height:24px}.quantity{font-size:20px}.dark-select{padding:6px;font-size:13px}.selector-container,.dark-select{width:120px}.measurement-toggles{gap:8px}.unit-text{font-size:12px;margin-top:2px}.emoji-nav-arrow{width:32px;height:32px;font-size:20px}}.editable-text{cursor:ew-resize;border-bottom:1px dashed var(--text-secondary);padding:2px 4px;-webkit-user-select:none;user-select:none;position:relative;font-weight:700;color:var(--accent-color);transition:all .2s ease}.editable-text:hover{background-color:var(--secondary-bg);border-bottom-color:var(--accent-color);transform:translateY(-1px)}.editable-text.dragging{background-color:var(--accent-color);opacity:.8;color:#fff}.editable-text.dragging:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;cursor:ew-resize}.editable-number{background:transparent;border:none;border-bottom:2px solid var(--accent-color);color:var(--accent-color);font-size:inherit;font-weight:700;width:100px;text-align:center;padding:2px 4px}.editable-number:focus{outline:none;background-color:var(--secondary-bg)}.emoji-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);background:var(--card-bg);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;color:var(--text-color);opacity:.5;transition:all .2s ease;z-index:1;padding:0;line-height:1}.emoji-nav-arrow:hover{opacity:.8;background:var(--card-bg);transform:translateY(-50%) scale(1.1)}.emoji-nav-arrow.left{left:0}.emoji-nav-arrow.right{right:0}.emoji-nav-arrow:before{content:"‹";display:block;margin-top:-4px}.emoji-nav-arrow.right:before{content:"›"}.number-control-container{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:nowrap}.number-control-container .unit-text{white-space:nowrap;padding-right:3px;margin:0 0 0 -3px}.number-control-button{background:var(--card-bg);border:1px solid var(--border-color);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--text-color);opacity:.8;transition:all .2s ease;padding:0;line-height:1}.number-control-button:hover{opacity:1;background:var(--secondary-bg);border-color:var(--accent-color)}.number-control-button span{display:block;margin-top:-2px}@media (max-width: 480px){.emoji-nav-arrow{width:32px;height:32px;font-size:20px}.number-control-button{width:22px;height:22px;font-size:14px}}.info-section{max-width:600px;margin:0 auto;padding:2rem;background-color:var(--secondary-bg);border-radius:16px;border:1px solid var(--border-color);color:var(--text-color);text-align:left}.info-section section{margin-bottom:2rem}.info-section section:last-child{margin-bottom:0}.info-section h2{font-size:2em;font-weight:600;color:var(--text-color);text-align:center;margin:0 0 1rem;line-height:1.2em}.info-section h3{font-size:20px;text-align:left;margin-bottom:1rem;color:var(--text-color);font-weight:600}.info-section p{margin-bottom:1rem;line-height:1.6}.info-section a{color:var(--accent-color);text-decoration:none;transition:opacity .2s ease;display:inline-block}.info-section a:hover{opacity:.8}.info-section strong{color:var(--text-color);font-weight:600}.resource-list{list-style:disc;padding-left:1.5rem;margin:0}.resource-list li{margin-bottom:.75rem;color:var(--text-color);padding-left:.5rem}.resource-list a{color:#3b82f6;text-decoration:none;transition:color .2s ease;line-height:1.4;display:inline}.resource-list a:hover{color:#2563eb}.key-points-list{list-style:none;padding:0;margin:1.5rem 0;counter-reset:key-points}.key-points-list li{position:relative;padding:1rem 1rem 1rem 3rem;margin-bottom:1rem;background:var(--card-bg);border-radius:12px;counter-increment:key-points}.key-points-list li:last-child{margin-bottom:0}.key-points-list li:before{content:counter(key-points);position:absolute;left:1rem;color:var(--accent-color);font-weight:600;font-size:1.1em}.key-points-list p{margin:0}@media screen and (max-width: 768px){.info-section{padding:1.5rem 1rem;margin:20px auto}.info-section h2{font-size:1.5em}.info-section h3{font-size:18px}.info-section .resource-list{padding-left:1.25rem}.info-section .key-points-list li{padding:.75rem .75rem .75rem 2.5rem}}@media screen and (max-width: 480px){.info-section{padding:1.5rem;margin:15px auto}.info-section h2{font-size:1.5em}.info-section h3{font-size:16px}.info-section .key-points-list li{padding:.75rem .75rem .75rem 2.25rem}.info-section .key-points-list li:before{font-size:1em}}@media screen and (max-height: 700px){.info-section{margin:10px auto}.info-section .key-points-list{margin:1rem 0}.info-section .key-points-list li{margin-bottom:.75rem}}.site-footer{margin-top:20px;padding:20px;text-align:center;color:var(--text-secondary);font-size:14px;line-height:1.5;opacity:.8}.site-footer p{margin:0 0 8px}.site-footer p:last-child{margin-bottom:0}.site-footer a{color:var(--accent-color);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:all .2s ease}.site-footer a:hover{opacity:.8;text-decoration-thickness:2px}.scroll-indicator{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;cursor:pointer;animation:fadeIn .3s ease-in;opacity:.9;transition:all .2s ease;background-color:var(--card-bg);padding:8px 16px;border-radius:20px;border:1px solid var(--border-color);box-shadow:0 2px 8px #0000004d}.scroll-indicator:hover{opacity:1;transform:translate(-50%,-2px);box-shadow:0 4px 12px #0006;border-color:var(--accent-color)}.scroll-arrow{font-size:24px;color:var(--accent-color);animation:bounce 2s infinite;font-weight:700}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:.9;transform:translate(-50%)}}@media (max-width: 768px){.scroll-indicator{bottom:15px;padding:6px 12px}.scroll-arrow{font-size:20px}}#root{max-width:1280px;margin:0 auto;padding:1rem;text-align:center;min-height:100vh;box-sizing:border-box}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center}.app-header{text-align:center;margin:2rem 0}.site-title{font-size:24px;font-weight:600;margin:0;color:var(--text-color)}.site-tagline{font-size:14px;color:var(--text-secondary);margin:4px 0 0;opacity:.8}.converter-container{margin-bottom:48px}@media (max-width: 768px){#root{padding:1rem}.app{padding:10px}.site-title{font-size:20px}.site-tagline{font-size:13px}}@media (max-width: 480px){#root{padding:.5rem}.app{padding:8px}.site-title{font-size:32px}.site-tagline{font-size:13px;margin-top:4px}}