:root{--cssconv-primary:#00d2c8;--cssconv-bg:rgba(0, 0, 0, .03);--cssconv-border:#e0e0e0;--cssconv-text:var(--untitled-ui-gray900, #2D3748);--cssconv-font-size:18px}.cssconv-wrapper{border-width:0 1px 1px 5px;border-style:solid;border-color:var(--cssconv-border);border-left-color:var(--cssconv-primary);color:var(--cssconv-text);background-color:var(--cssconv-bg);border-radius:9px;margin:40px -50px;padding:25px 5%;font-size:var(--cssconv-font-size);font-style:normal;box-shadow:0 2px 4px rgb(0 0 0 / .05)}.cssconv-input-group,.cssconv-output-group{margin:15px 0;position:relative}.cssconv-wrapper input[type="number"]{width:100%;max-width:300px;padding:12px;margin:8px 0 20px;border-radius:6px;border:1px solid var(--cssconv-border);font-size:var(--cssconv-font-size);transition:border-color 0.3s ease,box-shadow 0.3s ease}.cssconv-wrapper input[type="number"]:focus{outline:none;border-color:var(--cssconv-primary);box-shadow:0 0 0 3px rgb(0 210 200 / .1)}.cssconv-wrapper input[type="number"]::-webkit-inner-spin-button,.cssconv-wrapper input[type="number"]::-webkit-outer-spin-button{opacity:1;height:30px}.cssconv-output{background-color:#f8f9fa;font-weight:700}.cssconv-label{display:block;color:var(--cssconv-text);font-size:16px;font-weight:500;margin-bottom:5px}.cssconv-result{font-weight:700;font-size:var(--cssconv-font-size);color:var(--cssconv-text)}.cssconv-unit{position:absolute;right:calc(100% - 290px);top:45px;color:#666;font-size:14px}@media (max-width:768px){.cssconv-wrapper{margin:20px 0;padding:20px 15px}.cssconv-unit{right:15px}}@keyframes cssconv-highlight{0%{background-color:rgb(0 210 200 / .1)}100%{background-color:#fff0}}.cssconv-value-changed{animation:cssconv-highlight 1s ease}