.container[data-v-5e052d6b]{margin-top:120px;height:120px}.vertical-center[data-v-5e052d6b]{margin:4px;position:absolute;top:50%;transform:translateY(-50%)}.highlight[data-v-5e052d6b]{font-family:Outfit,sans-serif;font-style:normal;font-weight:700;font-size:48px;color:#2f2e41}.normal[data-v-5e052d6b]{font-family:Outfit,sans-serif;font-style:normal;font-weight:400;font-size:24px;color:#8c8a8a}.modal[data-v-5e052d6b]{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content[data-v-5e052d6b]{position:relative;background-color:#fefefe;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);-webkit-animation-name:animatetop-5e052d6b;-webkit-animation-duration:.4s;animation-name:animatetop-5e052d6b;animation-duration:.4s}@keyframes animatetop-5e052d6b{0%{top:-300px;opacity:0}to{top:0;opacity:1}}.close[data-v-5e052d6b]{color:#fff;float:right;font-size:28px;font-weight:700}.close[data-v-5e052d6b]:focus,.close[data-v-5e052d6b]:hover{color:#000;text-decoration:none;cursor:pointer}.modal-header[data-v-5e052d6b]{padding:2px 16px;background-color:#5cb85c;color:#fff}.modal-body[data-v-5e052d6b]{padding:2px 16px}.modal-footer[data-v-5e052d6b]{padding:2px 16px;background-color:#5cb85c;color:#fff}.container[data-v-5f5809a1]{height:60px;position:relative}.vertical-center[data-v-5f5809a1]{margin:4px;position:absolute;top:50%;transform:translateY(-50%);width:100%}.header-element[data-v-5f5809a1]{cursor:pointer;margin-right:20px;display:inline-block}.workspace[data-v-14d6f346]{height:100%;display:flex;flex-direction:column}.leftMargin[data-v-14d6f346]{margin-left:0}.workspaceContainer[data-v-14d6f346]{width:100%;flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.optionsBar.floatingOptions[data-v-14d6f346]{position:absolute;top:20px;left:20px;right:20px;height:auto;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);margin-bottom:0}.optionsGroup[data-v-14d6f346]{display:flex;align-items:center;gap:12px}.bottomOptionsTextItem[data-v-14d6f346]{font-size:small;font-weight:700}.bottomOptionsCircleItem[data-v-14d6f346]{width:28px}.leftAlign[data-v-0d937eb2]{float:left}.colorItem[data-v-0d937eb2]{display:inline-block;margin:4px 2px 0 2px;border-radius:4px;border-style:solid;border-color:var(--border-color);border-width:1px}.inset[data-v-0ee6e39e]{padding:12px}.leftAlign[data-v-0ee6e39e]{float:left}.fullWidth[data-v-0ee6e39e]{width:100%;display:inline}.colorItem[data-v-0ee6e39e]{display:inline-block;margin:4px}.hue-slider[data-v-0f12d5be]{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;outline:none;position:relative;flex:1;height:10px;width:200px;margin-left:2vmin;border-radius:5px;transition:all .3s;background:linear-gradient(90deg,#eb4747 0,#eb9947 8.3%,#ebeb47 16.6%,#99eb47 25%,#47eb47 33.3%,#47eb99 41.6%,#47ebeb 50%,#4799eb 58.3%,#4747eb 66.6%,#9947eb 75%,#eb47eb 83.3%,#eb4799 91.6%,#eb4747)}.hue-preview[data-v-0f12d5be]{height:30px;width:30px;border-radius:15px;display:inline-block;vertical-align:middle}.leftAlign[data-v-0f12d5be]{float:left}.colorItem[data-v-0f12d5be]{display:inline-block;margin:4px 2px 0 2px;border-radius:4px}input[type=range][data-v-0f12d5be]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid silver;height:16px;width:16px;border-radius:8px;background:#fff;cursor:pointer}input[type=range][data-v-0f12d5be]::-moz-range-thumb{border:1px solid silver;height:16px;width:16px;border-radius:8px;background:#fff;cursor:pointer}input[type=range][data-v-0f12d5be]::-ms-thumb{border:1px solid silver;height:16px;width:16px;border-radius:8px;background:#fff;cursor:pointer}.leftAlign[data-v-eb42a3ce]{float:left}.colorItem[data-v-eb42a3ce]{display:inline-block;margin:4px 2px 0 2px;border-radius:4px}.tabs-header{display:flex;background-color:var(--bg-color);border-bottom:1px solid var(--border-color);margin:-12px -12px 20px -12px;border-radius:12px 12px 0 0}.tab-item{flex:1;padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--text-dark);opacity:.5;transition:all .2s ease}.tab-item:hover{opacity:1;background-color:rgba(0,0,0,.02)}html.dark-theme .tab-item:hover{background-color:hsla(0,0%,100%,.05)}.tab-item.active{opacity:1;color:var(--primary-color);border-bottom:2px solid var(--primary-color)}.tab-content{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.property-list{text-align:left;display:flex;flex-direction:column;gap:16px;width:100%}.property-list.no-separator .property-item{border-bottom:none}.property-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;width:100%}.property-item.vertical{flex-direction:column;align-items:flex-start;gap:8px}.dimension-group{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}.property-item.no-border{border:none;padding:4px 0;width:100%}.property-item .label{font-weight:700;color:var(--text-dark)}.empty-state{padding:40px 20px;opacity:.7}.elevatedStage.colorspace:hover{transform:none;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.max30{width:100%}.mainHeading{font-size:large;font-weight:700}.inset{padding:12px;height:100%;overflow-y:auto;box-sizing:border-box}@media screen and (max-width:800px){.inset{padding:12px;position:relative;z-index:0;top:0;height:auto}}.leftAlign{float:left}.fullWidth{width:100%;display:inline-block}.holder{padding:4px;border-radius:4px;cursor:pointer;border:0 solid #f5f5f5;margin-bottom:4px}.holder:hover{background-color:var(--border-color)}.bottomOptionsRightItem{float:right;margin-right:16px}.tip-box{margin-top:30px;padding:10px;background-color:var(--bg-color);border:1px solid var(--primary-color);border-radius:4px;font-size:medium;text-align:left;display:flex;align-items:center}.custom-input{width:100%;padding:8px 12px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--text-light);color:var(--text-dark);font-family:inherit;font-size:14px;box-sizing:border-box;transition:border-color .2s}.custom-input:focus{outline:none;border-color:var(--primary-color)}html.dark-theme .custom-input{background-color:#1e293b;border-color:var(--border-color)}.clickable[data-v-8f0dad2e]{cursor:pointer;display:inline-block;padding:12px;margin:2px;border:2px solid #fff}.clickable[data-v-8f0dad2e]:hover{border:2px solid #f5f5f5}.scrollbar-flex-content[data-v-bde5645c]{display:flex}.scrollbar-item[data-v-bde5645c]{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:500px;height:500px;margin:40px;text-align:center;border-radius:4px}.container[data-v-bde5645c]{margin-top:0;margin-bottom:40px}.vertical-center[data-v-bde5645c]{margin:4px;position:absolute;top:50%;transform:translateY(-50%)}.paircontainer[data-v-bde5645c]{margin-top:80px}.tp[data-v-bde5645c]{max-width:30%;transform:translateY(-20%)}@media screen and (max-width:800px){.tp[data-v-bde5645c]{max-width:100%;transform:translateY(0)}.paircontainer[data-v-bde5645c]{margin-top:40px}}.ip[data-v-bde5645c]{border-radius:12px;width:260px;border:1px solid var(--border-color);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.pair[data-v-bde5645c]{display:inline-block;padding:12px;margin:2px}.highlight[data-v-bde5645c]{font-weight:300;font-size:36px}.highlight[data-v-bde5645c],.normal[data-v-bde5645c]{font-family:Outfit,sans-serif;font-style:normal;color:var(--text-dark)}.normal[data-v-bde5645c]{font-weight:200;font-size:24px;opacity:.8}.block[data-v-218779b4]{text-align:left;padding-top:10%;padding-left:10%;float:left}.small[data-v-218779b4]{font-size:28px;font-weight:300}.medium[data-v-218779b4]{font-size:32px}.big[data-v-218779b4]{font-size:56px;margin-bottom:20px}.is-inline[data-v-218779b4]{display:inline-block}a[data-v-218779b4]{color:#f8932c;cursor:pointer}.is-button[data-v-218779b4]{padding:10px;cursor:pointer;height:40px;margin-top:20px;width:150px;text-align:center;font-weight:700;border-radius:5px;background:#f8932c;color:#fff}.dim[data-v-218779b4]{width:200px;margin-top:50px}.illus[data-v-218779b4]{padding-top:8%;padding-right:30%;float:right}.monster[data-v-218779b4]{width:190px;height:240px;margin:40px auto;background:url(https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png) 0;animation:play-218779b4 .8s steps(10) infinite}@keyframes play-218779b4{to{background-position:-1900px}}.main[data-v-fd6dd54e]{width:100%}.workspace-layout[data-v-fd6dd54e]{display:flex;flex-direction:row;height:100%}.readyLeftCol[data-v-fd6dd54e]{flex:0 0 25%;min-width:380px;height:100%;padding:20px;box-sizing:border-box}.readyRightCol[data-v-fd6dd54e]{flex:1;height:100%;overflow-y:auto;padding:20px;box-sizing:border-box}@media screen and (max-width:800px){.workspace-layout[data-v-fd6dd54e]{flex-direction:column}.readyLeftCol[data-v-fd6dd54e],.readyRightCol[data-v-fd6dd54e]{flex:0 0 100%;width:100%}}.howToContainer[data-v-5dec08ee]{max-width:1000px;margin:0 auto;padding:60px 20px;text-align:center}.header-section[data-v-5dec08ee]{margin-bottom:60px}.section-divider[data-v-5dec08ee]{display:flex;align-items:center;margin:40px 0 30px;color:var(--text-dark);opacity:.6;font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.section-divider[data-v-5dec08ee]:after,.section-divider[data-v-5dec08ee]:before{content:"";flex:1;height:1px;background:var(--border-color)}.section-divider span[data-v-5dec08ee]{padding:0 20px;display:flex;align-items:center;gap:10px}.feature-grid[data-v-5dec08ee]{display:grid;gap:24px;margin-bottom:40px}.editing-grid[data-v-5dec08ee],.feature-grid[data-v-5dec08ee]{grid-template-columns:repeat(2,1fr)}.feature-card[data-v-5dec08ee]{background:var(--text-light);border:1px solid var(--border-color);border-radius:16px;padding:32px;text-align:left;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:12px}.feature-card[data-v-5dec08ee]:hover{transform:translateY(-5px);border-color:var(--primary-color);box-shadow:0 20px 25px -5px rgba(0,0,0,.05),0 10px 10px -5px rgba(0,0,0,.02)}.icon-box[data-v-5dec08ee]{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:8px}.icon-box.primary[data-v-5dec08ee]{background:#e0f2fe;color:#0369a1}.icon-box.secondary[data-v-5dec08ee]{background:#f0fdf4;color:#15803d}.icon-box.accent[data-v-5dec08ee]{background:#faf5ff;color:#7e22ce}.icon-box.success[data-v-5dec08ee]{background:#fefce8;color:#a16207}.feature-card h3[data-v-5dec08ee]{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-dark)}.feature-card p[data-v-5dec08ee]{margin:0;line-height:1.6;color:var(--text-dark);opacity:.8;font-size:1rem}kbd[data-v-5dec08ee]{background-color:#eee;border-radius:3px;border:1px solid #b4b4b4;box-shadow:0 1px 1px rgba(0,0,0,.2),inset 0 2px 0 0 hsla(0,0%,100%,.7);color:#333;display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px 4px;white-space:nowrap}.footer-actions[data-v-5dec08ee]{margin-top:60px;padding-top:40px;border-top:1px solid var(--border-color)}@media (max-width:768px){.editing-grid[data-v-5dec08ee],.feature-grid[data-v-5dec08ee]{grid-template-columns:1fr}.howToPage[data-v-5dec08ee]{padding:40px 15px}}html.dark-theme .feature-card[data-v-5dec08ee]{background:var(--text-light)}html.dark-theme .icon-box.primary[data-v-5dec08ee]{background:#0c4a6e;color:#38bdf8}html.dark-theme .icon-box.secondary[data-v-5dec08ee]{background:#064e3b;color:#34d399}html.dark-theme .icon-box.accent[data-v-5dec08ee]{background:#4c1d95;color:#c084fc}html.dark-theme .icon-box.success[data-v-5dec08ee]{background:#422006;color:#fbbf24}html.dark-theme kbd[data-v-5dec08ee]{background-color:#334155;color:#f8fafc;border-color:#475569}.normal[data-v-0f323059]{font-family:Outfit,sans-serif;font-style:normal;font-weight:400;font-size:12px;color:#f5f5f5}.footer[data-v-0f323059]{left:0;bottom:0;width:100%;color:#fff;text-align:center}.nolink[data-v-0f323059]{text-decoration:none;color:#f5f5f5}.dimen[data-v-0f323059]{height:40px;width:100%}:root{--primary-color:#3d85c6;--secondary-color:#3b82f6;--accent-color:#8b5cf6;--bg-color:#f8fafc;--text-dark:#334155;--text-light:#fff;--border-color:#e2e8f0}#app{font-family:Outfit,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--text-dark);background-color:var(--bg-color);height:100vh;display:flex;flex-direction:column}.el-container{height:100%}.el-main{padding:0!important}.el-main,body{overflow-y:auto}body{height:100vh;margin:0;font-weight:300}.el-button.is-circle,body{background-color:var(--bg-color)}.el-button.is-circle{color:var(--text-dark);border:1px solid var(--border-color)}.el-button.is-circle:focus,.el-button.is-circle:hover{color:var(--primary-color);border-color:var(--primary-color);background-color:var(--bg-color)}.btn{color:var(--text-dark)!important;border:1px solid var(--border-color)!important;border-radius:8px!important;font-family:Outfit,sans-serif!important;font-weight:300!important;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)!important;transition:all .2s ease-in-out!important}.btn,.btn:hover{background-color:var(--text-light)!important}.btn:hover{transform:translateY(-1px)!important;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important;color:var(--primary-color)!important;border-color:var(--primary-color)!important}.btn:active{transform:translateY(0)!important;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)!important}.btn-dark:hover,.btn-highlight{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)!important}.btn-dark:hover,.btn-highlight,.btn-highlight:hover{background-color:var(--primary-color)!important;color:var(--text-light)!important;border-color:var(--primary-color)!important}.btn-highlight:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important}.brand-dark{background-color:var(--text-dark)!important}.brand-light{background-color:var(--secondary-color)!important}.btntxt{color:var(--text-dark)!important;font-weight:300!important;font-family:Outfit,sans-serif;text-transform:uppercase;letter-spacing:.5px;transition:color .2s ease}.btntxt:hover{color:var(--primary-color)!important}.txt{color:var(--text-dark)}.bottomShade{border-bottom:1px solid var(--border-color);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.mainHeading{font-size:3rem;font-weight:300;line-height:1.2;letter-spacing:-.5px;color:var(--text-dark)}.heading{font-size:2rem;font-weight:300;letter-spacing:0}.subheading{font-size:1.25rem;font-weight:200;opacity:.8}.elevatedStage{border-radius:12px;border:1px solid var(--border-color);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);background-color:var(--text-light);color:var(--text-dark);transition:transform .2s ease,box-shadow .2s ease}.elevatedStage:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.brand{background:var(--bg-color);border-bottom:1px solid var(--border-color)}.bg,.brand2{background-color:var(--bg-color)}.brand2{border:1px solid var(--border-color);border-radius:8px}.el-upload-dragger{border:1px dashed var(--border-color)!important;border-radius:8px!important;background-color:var(--bg-color)!important;transition:all .3s ease!important}.el-upload-dragger:hover{border-color:var(--primary-color)!important;background-color:#ecfdf5!important}html.dark-theme body{--bg-color:#0f172a;--text-dark:#f8fafc;--text-light:#1e293b;--border-color:#334155;--primary-color:#9fc5e8}html.dark-theme .elevatedStage{background-color:#1e293b;box-shadow:0 4px 6px -1px rgba(0,0,0,.5),0 2px 4px -1px rgba(0,0,0,.3)}html.dark-theme .brand{background:var(--bg-color)}html.dark-theme .brand-dark{background-color:var(--text-light)!important}html.dark-theme .el-upload-dragger{background-color:#1e293b!important}html.dark-theme .el-upload-dragger:hover{background-color:#064e3b!important}html.dark-theme .el-dialog{background-color:var(--text-light)!important;border:1px solid var(--border-color)!important;box-shadow:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -2px rgba(0,0,0,.2)!important}html.dark-theme .el-dialog__body,html.dark-theme .el-dialog__headerbtn .el-dialog__close,html.dark-theme .el-dialog__title{color:var(--text-dark)!important}html.dark-theme .el-dialog__footer{border-top:1px solid var(--border-color)!important}html.dark-theme .el-button-group{border:1px solid var(--border-color)!important;border-radius:8px!important}html.dark-theme .el-button-group .el-button{background-color:var(--text-light)!important;color:var(--text-dark)!important;border:none!important}html.dark-theme .el-button-group .el-button:focus,html.dark-theme .el-button-group .el-button:hover{color:var(--primary-color)!important;background-color:var(--bg-color)!important}html.dark-theme .el-button-group .el-button--primary,html.dark-theme .el-button-group .el-button--primary:focus,html.dark-theme .el-button-group .el-button--primary:hover{background-color:var(--primary-color)!important;color:var(--text-light)!important}html.dark-theme .el-input__inner{background-color:var(--text-light)!important;color:var(--text-dark)!important;border-color:var(--border-color)!important}html.dark-theme .el-input-number__decrease,html.dark-theme .el-input-number__increase{background-color:var(--bg-color)!important;color:var(--text-dark)!important;border-color:var(--border-color)!important}html.dark-theme .el-input-number__decrease:hover,html.dark-theme .el-input-number__increase:hover{color:var(--primary-color)!important}html.dark-theme .el-button:not(.el-button--primary):not(.el-button--text):not(.btn){background-color:var(--text-light)!important;color:var(--text-dark)!important;border-color:var(--border-color)!important}html.dark-theme .el-button:not(.el-button--primary):not(.el-button--text):not(.btn):hover{color:var(--primary-color)!important;border-color:var(--primary-color)!important}html.dark-theme .el-color-picker__trigger{border-color:var(--border-color)!important}