*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:#f5ebe0;color:#1a1a1a;font-family:Work Sans,system-ui,sans-serif;font-weight:400}.app{display:flex;flex-direction:column;height:100dvh;max-width:1100px;margin:0 auto;padding:1.5rem 1.5rem 0}header{padding-bottom:1.5rem;flex-shrink:0}.top{padding-bottom:1.5rem}.output{margin-bottom:auto}.site-footer{margin-top:auto;padding:.75rem 0}header{display:flex;flex-direction:column}.header-top{display:flex;align-items:center;justify-content:space-between}.header-left{display:flex;flex-direction:column;gap:.1rem}.back-link{font-size:.78rem;font-weight:800;color:#b09a84;text-decoration:none;letter-spacing:-.01em;transition:color .15s}.back-link:hover{color:#e8913a}h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.03em;line-height:1}.preset-row{display:flex;align-items:center;gap:.5rem}.preset-row--mobile{display:none}select{font-family:Work Sans,system-ui,sans-serif;font-size:.9rem;font-weight:800;line-height:1;color:#3a3028;background:#fdf8f3;border:2px solid #e8d9c8;border-radius:10px;padding:.45rem 2rem .45rem .75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b09a84' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center}select:hover{border-color:#e8913a}.reset-btn{font-family:Work Sans,system-ui,sans-serif;font-size:.9rem;font-weight:800;color:#9a8575;background:#fdf8f3;border:2px solid #e8d9c8;border-radius:10px;padding:.45rem .75rem;line-height:1;cursor:pointer;display:flex;align-items:center;gap:.35rem;transition:color .15s,border-color .15s;white-space:nowrap}.reset-btn:hover{color:#e8913a;border-color:#e8913a}.top{display:flex;flex-direction:column;gap:1.25rem;flex-shrink:0}.preview-area{background:transparent;border:none;border-radius:20px;display:flex;align-items:center;justify-content:center;min-height:300px;width:100%}.big-button{font-family:Work Sans,system-ui,sans-serif;font-size:clamp(1.3rem,2.5vw,2rem);font-weight:900;padding:1.4rem 3.5rem;border:none;border-radius:9999px;background:#e8913a;color:#fdf4eb;cursor:pointer;box-shadow:0 6px #c47328,0 8px 20px #c473284d;letter-spacing:-.01em}.big-button.bounce{animation:bounce-hover .6s forwards}.controls{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}fieldset{border:2px solid #e8d9c8;border-radius:16px;padding:.75rem 1rem .85rem;background:#fdf8f3}legend{font-weight:900;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:#b09a84;padding:0 .4rem}label{display:grid;grid-template-columns:5.5rem 1fr 2.2rem;align-items:center;gap:.5rem;font-size:.88rem;font-weight:800;color:#3a3028;margin-top:.55rem}label span{font-size:.78rem;color:#b09a84;font-variant-numeric:tabular-nums;text-align:right;font-weight:700}.label-name{display:inline-flex;align-items:center;gap:.3rem}.info-wrap{position:relative;display:inline-flex;align-items:center}.info-btn{background:none;border:1.5px solid #c8b5a3;border-radius:50%;width:13px;height:13px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,border-color .15s}.info-wrap:hover .info-btn,.info-btn:focus-visible{color:#e8913a;border-color:#e8913a}.info-btn:focus-visible{outline:2px solid #e8913a;outline-offset:1px}.info-icon{font-size:.55rem;font-weight:900;color:#b09a84;line-height:1;pointer-events:none;font-family:Work Sans,system-ui,sans-serif}.info-wrap:hover .info-icon,.info-btn:focus-visible .info-icon{color:#e8913a}.tooltip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translate(-50%);background:#1e1610;color:#d4b896;font-size:.72rem;font-weight:400;padding:.35rem .6rem;border-radius:8px;width:160px;white-space:normal;text-align:center;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .15s;z-index:20;font-family:Work Sans,system-ui,sans-serif}.tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#1e1610}.info-wrap:hover .tooltip,.info-btn:focus-visible~.tooltip{visibility:visible;opacity:1}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:#e8d9c8;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#e8913a;box-shadow:0 2px 5px #e8913a73;cursor:pointer}input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#e8913a;border:none;box-shadow:0 2px 5px #e8913a73;cursor:pointer}.output{flex:1;min-height:0;display:flex;flex-direction:column;background:#1e1610;border-radius:16px;overflow:hidden}.output-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .6rem .5rem .75rem;background:#2a1f14;flex-shrink:0}.tabs{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tabs::-webkit-scrollbar{display:none}.tab{font-family:Work Sans,system-ui,sans-serif;font-size:.82rem;font-weight:800;padding:.3rem .8rem;border:none;border-radius:7px;color:#7a6555;cursor:pointer;transition:background .15s,color .15s}.tab.active{background:#e8913a;color:#fdf4eb}.tab:not(.active):hover{color:#c8a882}.copy-btn{font-family:Work Sans,system-ui,sans-serif;font-size:.82rem;font-weight:900;padding:.3rem .9rem;border:none;border-radius:7px;background:#fdf4eb;color:#1e1610;cursor:pointer;transition:opacity .15s;display:flex;align-items:center;gap:.35rem}.copy-btn:hover{opacity:.85}.copy-confirm,.copy-btn.copied .copy-icon,.copy-btn.copied .copy-label{display:none}.copy-btn.copied .copy-confirm{display:inline}.code-output{flex:1;min-height:0;overflow-y:auto;padding:.9rem 1rem;font-family:SF Mono,Fira Code,monospace;font-size:.72rem;line-height:1.6;color:#d4b896;white-space:pre}.site-footer{flex-shrink:0;text-align:center;font-size:.85rem;font-weight:700;color:#9a8575;border-top:2px solid #e8d9c8}.site-footer a{color:#9a8575;text-decoration:none}.site-footer a:hover{color:#e8913a}@media(max-width:640px){.app{padding:1rem;gap:.75rem}.controls{grid-template-columns:1fr}.top{gap:.75rem}h1{font-size:2.4rem}.header-top{padding-bottom:.5rem}header{padding-bottom:0}.preview-area{min-height:220px;padding:1.5rem 0}label{grid-template-columns:4.5rem 1fr 2rem}.preset-row--desktop{display:none}.preset-row--mobile{display:flex;width:100%;margin-top:0}.preset-row--mobile select{flex:1}.copy-btn .copy-label{display:none}.copy-btn{padding:0;width:28px;height:28px;justify-content:center;flex-shrink:0}.copy-btn.copied .copy-confirm-text{display:none}.tab{padding:.3rem .4rem;font-size:.72rem;white-space:nowrap}.output{flex:none;height:300px}.code-output{min-height:0}}