.css-trig-functions-generator{min-height:auto;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);padding:2rem;color:#fff}.generator-header{text-align:center;margin-bottom:2rem}.generator-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#00d9ff,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.generator-header p{color:#a0a0a0;font-size:1.1rem}.generator-content{display:grid;grid-template-columns:var(--tool-controls-width, 420px) 1fr;gap:var(--tool-content-gap, 2rem);max-width:var(--tool-container-max-width, 1600px);margin:0 auto}.config-panel{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.config-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.config-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.config-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.preset-btn{padding:.6rem .5rem;border:1px solid rgba(0,217,255,.3);border-radius:8px;cursor:pointer;font-size:.8rem;color:#fff;background:#00d9ff1a;transition:all .2s}.preset-btn:hover{background:#00d9ff40;border-color:#00d9ff80;transform:translateY(-2px)}.function-select,.property-select,.transform-select{width:100%;padding:.75rem;border:2px solid rgba(255,255,255,.35);border-radius:8px;background:#ffffff26;color:#fff;font-size:.875rem;cursor:pointer;margin-bottom:.5rem}.function-select option,.property-select option,.transform-select option,.unit-select option{background:#1a1a2e;color:#fff}.input-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.input-row label{min-width:70px;color:#ccc;font-size:.85rem}.value-input{flex:1;padding:.5rem;border:2px solid rgba(255,255,255,.35);border-radius:6px;background:#ffffff26;color:#fff;font-family:monospace}.value-input.small{width:80px;flex:none}.unit-select{padding:.5rem;border:2px solid rgba(255,255,255,.35);border-radius:6px;background:#ffffff26;color:#fff;cursor:pointer}.angle-slider{width:100%;margin-top:.5rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--gray-900)}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.animation-settings{margin-top:1rem;padding:1rem;background:#0003;border-radius:8px}.animation-settings .input-row span{color:#888;font-size:.85rem}.save-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#00d9ff,#ff6b6b);border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;transition:transform .2s}.save-btn:hover{transform:translateY(-2px)}.saved-configs{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.saved-config-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:#ffffff26;border-radius:6px}.saved-config-name{cursor:pointer;color:#00d9ff}.saved-config-name:hover{text-decoration:underline}.delete-btn{background:none;border:none;color:#ff6b6b;font-size:1.2rem;cursor:pointer;padding:0 .25rem}.preview-panel{display:flex;flex-direction:column;gap:1.5rem}.visual-preview,.graph-preview,.syntax-preview,.code-output{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.visual-preview h3,.graph-preview h3,.syntax-preview h3{font-size:1rem;color:#00d9ff;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.5px}.preview-container{height:200px;background:#f9fafb;border:2px solid #d1d5db;border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.preview-element{width:50px;height:50px;background:#f9fafb;border:2px solid #d1d5db;border-radius:8px;position:relative;z-index:2;transition:opacity .1s}.preview-baseline{position:absolute;left:0;right:0;top:50%;height:1px;background:#fff3}.preview-info{display:flex;justify-content:space-around;margin-top:1rem;padding:.75rem;background:#0003;border:2px solid #d1d5db;border-radius:8px;box-shadow:0 1px 3px #0000001a}.preview-info span{font-family:monospace;font-size:.85rem;color:#aaa}.graph-container{background:#0000004d;border-radius:12px;padding:1rem}.trig-graph{width:100%;height:auto}.syntax-box{display:flex;align-items:center;gap:1rem;padding:1rem;background:#0000004d;border-radius:8px}.syntax-box code{flex:1;font-family:Fira Code,monospace;font-size:.875rem;color:#00d9ff;word-break:break-all}.copy-inline-btn{padding:.5rem 1rem;background:#00d9ff33;border:1px solid rgba(0,217,255,.4);border-radius:6px;color:#fff;font-size:.8rem;cursor:pointer;transition:all .2s}.copy-inline-btn:hover{background:#00d9ff4d}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.output-header h3{font-size:1rem;color:#00d9ff;text-transform:uppercase;letter-spacing:.5px;margin:0}.copy-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#00d9ff,#ff6b6b);border:none;border-radius:6px;color:#fff;font-weight:500;cursor:pointer;transition:transform .2s}.copy-btn:hover{transform:translateY(-2px)}.css-code{background:#0000004d;padding:1rem;border-radius:8px;overflow-x:auto;font-family:Fira Code,monospace;font-size:.85rem;line-height:1.6;max-height:400px;overflow-y:auto}.reference-section{max-width:var(--tool-container-max-width, 1600px);margin:3rem auto 0}.reference-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:#00d9ff}.reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.reference-card{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.reference-card h3{font-size:1rem;color:#ff6b6b;margin-bottom:1rem}.reference-card pre{background:#0000004d;padding:1rem;border-radius:8px;overflow-x:auto;font-family:Fira Code,monospace;font-size:.8rem;line-height:1.6}.reference-card ul{list-style:none;padding:0;margin:0}.reference-card li{padding:.4rem 0;color:#ccc;border-bottom:1px solid rgba(255,255,255,.05)}.reference-card li:last-child{border-bottom:none}.reference-card li strong{color:#00d9ff}.support-note{font-size:.8rem;color:#27ae60;margin-top:.5rem}@media (max-width: 1023px){.generator-content{grid-template-columns:1fr}}@media (max-width: 640px){.css-trig-functions-generator{padding:1rem}.generator-header h1{font-size:1.75rem}.presets-grid{grid-template-columns:1fr}.preview-info{flex-direction:column;gap:.5rem}.preview-info span{text-align:center}.reference-grid{grid-template-columns:1fr}}