@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,dl,dd,ol,ul,figure{margin:0;padding:0}body{font:400 16px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#111;background-color:#fdfdfd;-webkit-text-size-adjust:100%;-webkit-font-feature-settings:"kern" 1;-moz-font-feature-settings:"kern" 1;-o-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1;font-kerning:normal}h1,h2,h3,h4,h5,h6,p,blockquote,pre,ul,ol,dl,figure,.highlight{margin-bottom:15px}img{max-width:100%;vertical-align:middle}figure>img{display:block}figcaption{font-size:14px}ul,ol{margin-left:30px}li>ul,li>ol{margin-bottom:0}h1,h2,h3,h4,h5,h6{font-weight:400}a{color:#2a7ae2;text-decoration:none}a:visited{color:#1756a9}a:hover{color:#111;text-decoration:underline}blockquote{color:#828282;border-left:4px solid #e8e8e8;padding-left:15px;font-size:18px;letter-spacing:-1px;font-style:italic}blockquote>:last-child{margin-bottom:0}pre,code{font-size:15px;border:1px solid #e8e8e8;border-radius:3px;background-color:#eef}code{padding:1px 5px}pre{padding:8px 12px;overflow-x:auto}pre>code{border:0;padding-right:0;padding-left:0}.wrapper{max-width:-webkit-calc(800px - (30px * 2));max-width:calc(800px - (30px * 2));margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}@media screen and (max-width: 800px){.wrapper{max-width:-webkit-calc(800px - (30px));max-width:calc(800px - (30px));padding-right:15px;padding-left:15px}}.wrapper:after{content:"";display:table;clear:both}.icon>svg{display:inline-block;width:16px;height:16px;vertical-align:middle}.icon>svg path{fill:#828282}.highlight{background:#fff}.highlighter-rouge .highlight{background:#eef}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .na{color:teal}.highlight .nb{color:#0086B3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}:root{--card-radius: 16px;--card-spacing: 1.5rem;--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);--body-bg: #f0f0f2;--text-color: #1d1d1f;--body-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}*,*::before,*::after{box-sizing:border-box}html,body{height:100%}body,h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}html,body{height:100%}body{display:flex;flex-direction:column;font-family:var(--body-font);background:var(--body-bg);min-height:100vh;color:var(--text-color);padding:1rem 1rem}header.header-card{background:white;border-radius:var(--card-radius);padding:1rem 1.5rem;margin-bottom:var(--card-spacing);box-shadow:var(--card-shadow);display:flex;justify-content:space-between;align-items:center}header.header-card .header-left a{color:inherit}header.header-card h1{font-size:1.25rem;font-weight:700;margin:0}header .header-nav{display:flex;gap:0.5rem}header .nav-item{font-size:1rem;color:#656d76;text-decoration:none;font-weight:500;transition:all 0.2s ease;cursor:pointer;padding:0.25rem 1rem;border-radius:10px}header .nav-item:hover{color:#1d1d1f;background-color:rgba(0,0,0,0.05)}header .divider{width:1px;border-radius:100000px;background-color:#e1e1e1}.container{flex:1 1 auto;display:flex;flex-direction:column}.main-grid{display:grid;grid-template-columns:32rem 1fr;gap:var(--card-spacing);align-items:start;flex:1 1 auto;min-height:0}.main-grid>.container{display:grid;grid-template-columns:32rem 1fr;gap:var(--card-spacing);align-items:start;min-height:0}.controls-card,.controls-panel{background:white;border-radius:var(--card-radius);padding:1.5rem;box-shadow:var(--card-shadow);height:100%;max-height:none;overflow-y:auto}.controls-card .card-header,.controls-panel .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #e1e4e8}.controls-card .card-header .card-title,.controls-panel .card-header .card-title{font-size:1rem;font-weight:700;color:#1d1d1f}.controls-card .card-header .mdn-link,.controls-panel .card-header .mdn-link{font-size:0.75rem;color:#0969da;text-decoration:none;font-style:italic}.controls-card .card-header .mdn-link:hover,.controls-panel .card-header .mdn-link:hover{text-decoration:underline}.about-btn{padding:0.5rem 0.75rem;position:absolute;bottom:1rem;right:1rem;border-radius:6px;border:1px solid #ccc;background:#fafafa;cursor:pointer}.about-dialog{border:none;border-radius:8px;padding:1rem;width:min(600px, 90%);box-shadow:0 10px 30px rgba(0,0,0,0.15)}.about-dialog::backdrop{background:rgba(0,0,0,0.45)}.dialog-content p{margin:0 0 0.75rem;color:var(--text-color, #222)}.dialog-actions{display:flex;justify-content:flex-end;gap:0.5rem;border:none;padding:0;margin-top:1rem}.btn{background:#eee;border:1px solid #ccc;padding:0.45rem 0.7rem;border-radius:4px;cursor:pointer}dialog[open]{position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1000}.about-dialog[open]{max-width:95%}.about-card{background:white;border-radius:var(--card-radius);padding:1.5rem;box-shadow:var(--card-shadow);grid-column:1 / 3;height:100%;display:flex;flex-direction:column}.copy-container{max-width:40rem;margin-block-start:3rem;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}.copy-container h1{font-size:2em;font-weight:700;margin-block-end:0.5em}.copy-container p{font-size:1.25em;margin-block-end:1em}.copy-container a{text-decoration:underline;color:inherit;font-weight:600}@media screen and (max-width: 600px){.copy-container{padding-left:10px;padding-right:10px}}:root{--bs-primary: #0969da;--bs-muted: #656d76;--bs-border: #e1e4e8;--bs-muted-bg: #f6f8fa;--bs-focus-ring: rgba(9, 105, 218, 0.1);--bs-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);--bs-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace}.preset-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.preset-btn{background:var(--bs-muted-bg);color:var(--text-color);border:1px solid var(--bs-border);padding:7px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.2s ease}.preset-btn:hover{background:#e8eaed}.section-header{font-size:15px;font-weight:600;margin-bottom:20px;margin-top:28px;color:var(--text-color)}.section-header:first-of-type{margin-top:0}.control-group{margin-bottom:20px}.control-group label{display:block;margin-bottom:0.5rem;font-weight:500;color:var(--text-color);font-size:0.875rem}.control-group select{width:100%;height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--bs-border);background:white;color:var(--text-color);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s ease}.control-group select:focus{outline:none;border-color:var(--bs-primary);box-shadow:0 0 0 3px var(--bs-focus-ring)}.slider-container{display:flex;align-items:center;gap:12px}.slider-wrapper{flex:1}input[type="range"]{width:100%;height:4px;border-radius:2px;background:#e1e4e8;outline:none;-webkit-appearance:none;appearance:none}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#0969da;cursor:pointer;border:2px solid white;box-shadow:var(--bs-thumb-shadow);transition:all 0.2s ease}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.1)}.value-input{width:70px;height:36px;border:1px solid #e1e4e8;border-radius:6px;padding:0 10px;font-size:13px;font-weight:500;text-align:center;background:white;color:var(--text-color);transition:all 0.2s ease}.value-input:focus{outline:none;border-color:var(--bs-primary);box-shadow:0 0 0 3px var(--bs-focus-ring)}.color-container{display:flex;gap:12px;align-items:center}.color-picker-wrapper{flex-shrink:0}.hex-input{flex:1;height:44px;border:1px solid #e1e4e8;border-radius:6px;padding:0 12px;font-size:13px;font-weight:500;background:white;color:var(--text-color);font-family:var(--bs-mono);transition:all 0.2s ease}.hex-input:focus{outline:none;border-color:var(--bs-primary);box-shadow:0 0 0 3px var(--bs-focus-ring)}input[type="color"]{width:70px;height:44px;border:1px solid #e1e4e8;border-radius:8px;cursor:pointer;background:white}.checkbox-group{display:flex;align-items:center;gap:8px;margin-top:16px}input[type="checkbox"]{width:18px;height:18px;accent-color:var(--bs-primary);cursor:pointer}.preview-card{position:relative;background:white;border-radius:var(--card-radius);padding:60px 40px;box-shadow:var(--card-shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.preview-box{width:280px;height:200px;background:white;border:1px solid var(--bs-border);border-radius:var(--card-radius);margin-bottom:60px;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--preview-text, var(--bs-muted));font-size:18px}.css-output-container{width:100%;max-width:600px}.css-output{background:var(--bs-muted-bg);color:var(--text-color);padding:24px;border-radius:12px 12px 0 0;font-family:var(--bs-mono);font-size:14px;line-height:1.6;border:1px solid var(--bs-border)}.copy-btn{width:100%;background:var(--bs-primary);color:white;border:none;padding:14px 20px;border-radius:0 0 12px 12px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.2s ease}.copy-btn:hover{background:#0860ca}.copy-btn.copied{background:#1a7f37}@media (max-width: 1200px){.main-grid{grid-template-columns:1fr;gap:24px}.controls-card{max-height:none}}@media (max-width: 768px){body{padding:20px 12px}.header-card{flex-direction:column;gap:20px;padding:24px;text-align:center}.header-card h1{font-size:24px}.header-nav{gap:20px}.controls-card,.preview-card{padding:24px}.slider-container{flex-direction:column;gap:8px;align-items:stretch}.value-input{width:100%}}