:root{--ctg-primary:var(--main-primary);--ctg-primary-light:#eef2ff;--ctg-text:#1e293b;--ctg-text-muted:#64748b;--ctg-bg:#fff;--ctg-bg-hover:#f8fafc;--ctg-bg-active:#eef2ff;--ctg-border:#e2e8f0;--ctg-border-hover:#cbd5e1;--ctg-shadow:0 1px 3px #00000014;--ctg-shadow-lg:0 4px 12px #0000001f;--ctg-bg-code:#f8fafc;--ctg-bg-preview:#f1f5f9;--ctg-radius:.5rem;--ctg-radius-lg:.75rem}._ctg-container{gap:var(--main-space-8);grid-template-columns:1fr 1fr;align-items:start;max-width:1100px;margin:0 auto;display:grid}._ctg-column{gap:var(--main-space-5);flex-direction:column;display:flex}._ctg-column-right{top:var(--main-space-4);position:sticky}._ctg-section{gap:var(--main-space-3);flex-direction:column;display:flex}._ctg-section-label{font-size:var(--main-text-xs);color:var(--ctg-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}@media (max-width:900px){._ctg-container{gap:var(--main-space-6);grid-template-columns:1fr;max-width:600px}._ctg-column-left{order:2}._ctg-column-right{order:1;position:static}}@media (max-width:640px){._ctg-container{padding-left:var(--main-space-3);padding-right:var(--main-space-3);gap:var(--main-space-5)}}._ctg-direction-grid{background:var(--ctg-bg);border-radius:var(--ctg-radius-lg);padding:var(--main-space-3);box-shadow:var(--ctg-shadow);border-style:solid;border-width:1px;border-color:var(--ctg-border);grid-template-columns:repeat(3,1fr);gap:4px;display:grid}._ctg-dir-btn{aspect-ratio:1;background:var(--ctg-bg-hover);border-radius:var(--ctg-radius);cursor:pointer;border:2px solid #0000;justify-content:center;align-items:center;width:100%;max-width:52px;margin:0 auto;transition:border-color .15s,background .15s;display:flex}._ctg-dir-btn:hover{border-color:var(--ctg-border-hover)}._ctg-dir-btn--active{background:var(--ctg-primary-light);border-color:var(--ctg-primary)}._ctg-dir-center{aspect-ratio:1;border-radius:var(--ctg-radius);background:var(--ctg-border);opacity:.3;width:100%;max-width:52px;margin:0 auto}._ctg-dir-arrow{width:0;height:0;display:block}._ctg-dir-arrow--top{border-left:8px solid #0000;border-right:8px solid #0000;border-bottom:10px solid var(--ctg-text-muted)}._ctg-dir-arrow--bottom{border-left:8px solid #0000;border-right:8px solid #0000;border-top:10px solid var(--ctg-text-muted)}._ctg-dir-arrow--left{border-top:8px solid #0000;border-bottom:8px solid #0000;border-right:10px solid var(--ctg-text-muted)}._ctg-dir-arrow--right{border-top:8px solid #0000;border-bottom:8px solid #0000;border-left:10px solid var(--ctg-text-muted)}._ctg-dir-arrow--top-left{border-right:12px solid #0000;border-bottom:12px solid var(--ctg-text-muted)}._ctg-dir-arrow--top-right{border-left:12px solid #0000;border-bottom:12px solid var(--ctg-text-muted)}._ctg-dir-arrow--bottom-left{border-right:12px solid #0000;border-top:12px solid var(--ctg-text-muted)}._ctg-dir-arrow--bottom-right{border-left:12px solid #0000;border-top:12px solid var(--ctg-text-muted)}._ctg-dir-btn--active ._ctg-dir-arrow--top{border-bottom-color:var(--ctg-primary)}._ctg-dir-btn--active ._ctg-dir-arrow--bottom{border-top-color:var(--ctg-primary)}._ctg-dir-btn--active ._ctg-dir-arrow--left{border-right-color:var(--ctg-primary)}._ctg-dir-btn--active ._ctg-dir-arrow--right{border-left-color:var(--ctg-primary)}._ctg-dir-btn--active ._ctg-dir-arrow--top-left,._ctg-dir-btn--active ._ctg-dir-arrow--top-right{border-bottom-color:var(--ctg-primary)}._ctg-dir-btn--active ._ctg-dir-arrow--bottom-left,._ctg-dir-btn--active ._ctg-dir-arrow--bottom-right{border-top-color:var(--ctg-primary)}._ctg-size-header{justify-content:space-between;align-items:center;display:flex}._ctg-lock-btn{background:var(--ctg-bg);width:32px;height:32px;color:var(--ctg-text-muted);border-radius:var(--ctg-radius);cursor:pointer;border-style:solid;border-width:1px;border-color:var(--ctg-border);justify-content:center;align-items:center;transition:color .15s,border-color .15s,background .15s;display:flex}._ctg-lock-btn:hover{color:var(--ctg-text);border-color:var(--ctg-border-hover)}._ctg-lock-btn--active{background:var(--ctg-primary-light);color:var(--ctg-primary);border-color:var(--ctg-primary)}._ctg-size-controls{gap:var(--main-space-3);flex-direction:column;display:flex}._ctg-size-group{background:var(--ctg-bg);border-radius:var(--ctg-radius-lg);padding:var(--main-space-4);box-shadow:var(--ctg-shadow);border-style:solid;border-width:1px;border-color:var(--ctg-border)}._ctg-size-label{font-size:var(--main-text-xs);color:var(--ctg-text);margin-bottom:var(--main-space-2);font-weight:600;display:block}._ctg-size-input-row{align-items:center;gap:var(--main-space-3);display:flex}._ctg-slider{-webkit-appearance:none;appearance:none;background:var(--ctg-border);cursor:pointer;border-radius:3px;outline:none;flex:1;height:6px}._ctg-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--ctg-primary);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #6366f14d}._ctg-slider::-moz-range-thumb{background:var(--ctg-primary);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #6366f14d}._ctg-value-wrapper{flex-shrink:0;align-items:center;gap:2px;display:flex}._ctg-number-input{border-style:solid;border-width:1.5px;border-color:var(--ctg-border);border-radius:var(--ctg-radius);width:56px;font-size:var(--main-text-sm);color:var(--ctg-text);text-align:center;background:var(--ctg-bg);outline:none;padding:.3rem .5rem;font-weight:500;transition:border-color .15s}._ctg-number-input:focus{border-color:var(--ctg-primary);box-shadow:0 0 0 3px #6366f11a}._ctg-unit{font-size:var(--main-text-xs);color:var(--ctg-text-muted);font-weight:500}._ctg-color-row{align-items:center;gap:var(--main-space-3);background:var(--ctg-bg);border-radius:var(--ctg-radius-lg);padding:var(--main-space-3);box-shadow:var(--ctg-shadow);border-style:solid;border-width:1px;border-color:var(--ctg-border);display:flex}._ctg-color-input{border-style:solid;border-width:2px;border-color:var(--ctg-border);border-radius:var(--ctg-radius);cursor:pointer;background:var(--ctg-bg);flex-shrink:0;width:40px;height:40px;padding:2px}._ctg-color-swatches{flex-wrap:wrap;gap:6px;display:flex}._ctg-swatch{border-radius:var(--ctg-radius);border-style:solid;border-width:2px;border-color:var(--ctg-border);cursor:pointer;width:28px;height:28px;transition:border-color .15s}._ctg-swatch:hover{border-color:var(--ctg-border-hover)}._ctg-swatch--active{border-color:var(--ctg-primary);box-shadow:0 0 0 2px #6366f133}._ctg-method-tabs{background:var(--ctg-bg);border-radius:var(--ctg-radius);box-shadow:var(--ctg-shadow);border-style:solid;border-width:1px;border-color:var(--ctg-border);padding:3px;display:flex}._ctg-method-tab{color:var(--ctg-text-muted);font-size:var(--main-text-sm);cursor:pointer;border-radius:calc(var(--ctg-radius) - 2px);text-align:center;background:0 0;border:0 solid #0000;flex:1;padding:.4rem 1rem;font-weight:500;transition:color .15s,background .15s}._ctg-method-tab:hover{color:var(--ctg-text)}._ctg-method-tab--active{background:var(--ctg-primary);color:#fff}._ctg-method-tab--active:hover{color:#fff}._ctg-reset-row{justify-content:flex-start;display:flex}._ctg-reset-btn{background:var(--ctg-bg);color:var(--ctg-text-muted);border-style:solid;border-width:1px;border-color:var(--ctg-border);border-radius:var(--ctg-radius);font-size:var(--main-text-sm);cursor:pointer;align-items:center;gap:.375rem;padding:.4rem .875rem;font-weight:500;transition:color .15s,border-color .15s;display:inline-flex}._ctg-reset-btn:hover{color:var(--ctg-text);border-color:var(--ctg-border-hover)}@media (max-width:640px){._ctg-number-input{width:48px}._ctg-dir-btn{max-width:44px}}._ctg-preview-card{background:var(--ctg-bg);border-radius:var(--ctg-radius-lg);padding:var(--main-space-4);box-shadow:var(--ctg-shadow);border-style:solid;border-width:1px;border-color:var(--ctg-border)}._ctg-preview-area{min-height:280px;padding:var(--main-space-6);background:var(--ctg-bg-preview);border-radius:var(--ctg-radius);background-image:linear-gradient(45deg,#00000008 25%,#0000 25%),linear-gradient(-45deg,#00000008 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#00000008 75%),linear-gradient(-45deg,#0000 75%,#00000008 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}._ctg-preview-triangle{flex-shrink:0;transition:transform .15s}._ctg-preview-info{justify-content:center;align-items:center;gap:var(--main-space-3);padding-top:var(--main-space-3);font-size:var(--main-text-xs);color:var(--ctg-text-muted);font-weight:500;font-family:var(--main-font-mono);display:flex}._ctg-presets-grid{gap:var(--main-space-2);grid-template-columns:repeat(auto-fill,minmax(100px,1fr));min-height:80px;display:grid}._ctg-preset-item{align-items:center;gap:var(--main-space-2);padding:var(--main-space-3);background:var(--ctg-bg);border-radius:var(--ctg-radius);cursor:pointer;border-style:solid;border-width:1.5px;border-color:var(--ctg-border);flex-direction:column;transition:border-color .15s,box-shadow .15s;display:flex}._ctg-preset-item:hover{border-color:var(--ctg-primary);box-shadow:0 0 0 2px #6366f11a}._ctg-preset-preview{justify-content:center;align-items:center;width:100%;height:36px;display:flex}._ctg-preset-shape{width:0;height:0;display:block}._ctg-preset-name{color:var(--ctg-text-muted);text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.6875rem;font-weight:500;overflow:hidden}@media (max-width:640px){._ctg-presets-grid{grid-template-columns:repeat(3,1fr)}}._ctg-output-card{background:var(--ctg-bg);border-radius:var(--ctg-radius-lg);padding:var(--main-space-4);box-shadow:var(--ctg-shadow);border-style:solid;border-width:1px;border-color:var(--ctg-border)}._ctg-output-header{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._ctg-output-tabs{background:var(--ctg-bg-hover);border-radius:calc(var(--ctg-radius) - 2px);padding:2px;display:flex}._ctg-output-tab{color:var(--ctg-text-muted);font-size:var(--main-text-xs);cursor:pointer;border-radius:calc(var(--ctg-radius) - 3px);background:0 0;border:0 solid #0000;padding:.25rem .625rem;font-weight:600;transition:color .15s,background .15s}._ctg-output-tab:hover{color:var(--ctg-text)}._ctg-output-tab--active{background:var(--ctg-bg);color:var(--ctg-text);box-shadow:var(--ctg-shadow)}._ctg-copy-btn{background:var(--ctg-primary);color:#fff;border-radius:var(--ctg-radius);font-size:var(--main-text-xs);cursor:pointer;border:0 solid #0000;align-items:center;gap:.375rem;padding:.35rem .75rem;font-weight:600;transition:opacity .15s;display:inline-flex}._ctg-copy-btn:hover{opacity:.9}._ctg-copy-btn--copied{background:var(--main-success)}._ctg-code{padding:var(--main-space-3);background:var(--ctg-bg-code);border-radius:var(--ctg-radius);font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--ctg-text);white-space:pre-wrap;word-break:break-all;min-height:80px;margin:0;line-height:1.6;overflow-x:auto}@media (max-width:640px){._ctg-output-header{gap:var(--main-space-2);flex-wrap:wrap}}