:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #f1f3f4;--text-primary: #1d1d1d;--text-secondary: #5f6368;--text-muted: #9aa0a6;--border-color: #dadce0;--border-light: #e8eaed;--accent-primary: #FF8B8B;--accent-secondary: #FF6B6B;--accent-glow: rgba(255, 139, 139, .15);--accent-rgb: 255, 139, 139;--error: #FF8B8B;--error-bg: rgba(255, 139, 139, .1);--warning: #FFD93D;--warning-bg: rgba(255, 217, 61, .1);--success: #88D8B0;--success-bg: rgba(136, 216, 176, .1);--info: #87CEEB;--info-bg: rgba(135, 206, 235, .1);--font-display: "Space Grotesk", sans-serif;--font-mono: "JetBrains Mono", monospace;--container-max-width: 720px;--container-padding: 3rem 1.5rem;--section-gap: 1.5rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-medium: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--stack-gap: 1.5rem;--grid-gap: 1rem;--cluster-gap: .75rem;--sidebar-width: 280px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-display);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;position:relative;overflow-x:hidden}::selection{background:var(--accent-primary);color:var(--bg-primary)}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--bg-primary);background-image:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(var(--accent-rgb),.15) 19px,rgba(var(--accent-rgb),.15) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(var(--accent-rgb),.15) 19px,rgba(var(--accent-rgb),.15) 20px),repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(var(--accent-rgb),.08) 9px,rgba(var(--accent-rgb),.08) 10px),repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(var(--accent-rgb),.08) 9px,rgba(var(--accent-rgb),.08) 10px);background-size:40px 40px;opacity:.8;pointer-events:none;z-index:0}.l-container{position:relative;z-index:2;max-width:var(--container-max-width);margin:0 auto;padding:var(--container-padding);min-height:100vh;display:flex;flex-direction:column}.l-container--narrow{--container-max-width: 680px}.l-container--wide{--container-max-width: 1200px}.l-container--full{--container-max-width: 100%}.l-stack{display:flex;flex-direction:column;gap:var(--stack-gap)}.l-stack--tight{--stack-gap: .75rem}.l-stack--loose{--stack-gap: 2rem}.l-stack--extra-loose{--stack-gap: 3rem}.l-grid{display:grid;gap:var(--grid-gap)}.l-grid--2col{grid-template-columns:repeat(2,1fr)}.l-grid--3col{grid-template-columns:repeat(3,1fr)}.l-grid--4col{grid-template-columns:repeat(4,1fr)}.l-grid--sidebar{grid-template-columns:1fr var(--sidebar-width)}.l-grid--sidebar-reverse{grid-template-columns:var(--sidebar-width) 1fr}.l-grid--golden{grid-template-columns:1.618fr 1fr}.l-grid--golden-reverse{grid-template-columns:1fr 1.618fr}.l-cluster{display:flex;flex-wrap:wrap;gap:var(--cluster-gap);align-items:center}.l-cluster--between{justify-content:space-between}.l-cluster--center{justify-content:center}.l-center{display:flex;align-items:center;justify-content:center}.l-center--axis-x{display:flex;justify-content:center}.l-center--axis-y{display:flex;align-items:center}.l-with-sidebar{display:grid;grid-template-columns:1fr var(--sidebar-width);gap:2rem}.l-with-sidebar--left{grid-template-columns:var(--sidebar-width) 1fr}@media (max-width: 768px){.l-grid--2col,.l-grid--3col,.l-grid--4col,.l-grid--sidebar,.l-grid--sidebar-reverse,.l-grid--golden,.l-grid--golden-reverse,.l-with-sidebar,.l-with-sidebar--left{grid-template-columns:1fr}.l-container{padding:2rem 1rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}:root{--accent-primary: #0d7377;--accent-secondary: #14919a;--accent-glow: rgba(13, 115, 119, .2);--accent-rgb: 13, 115, 119;--grid-line: rgba(13, 115, 119, .25);--bg-white: var(--bg-primary);--bg-canvas: var(--bg-secondary);--bg-element: var(--bg-tertiary);--ink-primary: var(--text-primary);--ink-secondary: var(--text-secondary);--ink-tertiary: var(--text-muted);--accent-cyan: var(--accent-primary);--accent-cyan-light: rgba(13, 115, 119, .1);--accent-hover: var(--accent-secondary);--sketch-gray: var(--border-color);--shadow-soft: rgba(0, 0, 0, .06);--section-gap: 1.5rem;--inner-gap: 1rem}.container{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:2rem 1.5rem;min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;margin-bottom:2.5rem}.header-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.15em;color:var(--ink-secondary);text-transform:uppercase;padding:.5rem 1rem;border:1px solid var(--sketch-gray);border-radius:2px;margin-bottom:1.25rem}.header-badge a{color:var(--accent-cyan);text-decoration:none;transition:color .15s ease}.header-badge a:hover{color:var(--accent-hover);text-decoration:underline}.badge-dot{width:6px;height:6px;background:var(--accent-cyan);border-radius:50%}.title{font-family:var(--font-display);font-size:clamp(2rem,6vw,3rem);font-weight:700;line-height:.95;letter-spacing:-.03em;margin-bottom:.875rem;color:var(--ink-primary)}.title-line{display:block}.title-line--accent{color:var(--accent-cyan)}.subtitle{font-family:var(--font-mono);font-size:.875rem;color:var(--ink-secondary);max-width:600px;margin:0 auto;line-height:1.7}.main{flex:1;display:flex;flex-direction:column;gap:var(--section-gap)}.section{background:var(--bg-white);border:1px solid var(--ink-primary);border-radius:4px;padding:1.25rem;position:relative;box-shadow:1px 2px 0 var(--sketch-gray)}.section:nth-child(odd){border-radius:4px 5px 3px 6px}.section:nth-child(2n){border-radius:5px 4px 6px 3px}.section-header{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem}.section-icon{font-size:1.1rem;color:var(--accent-cyan)}.section-title{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--ink-primary);text-transform:uppercase;letter-spacing:.03em}.pattern-selector{display:flex;gap:.875rem;flex-wrap:wrap}.selector-group{flex:1;min-width:140px}.selector-group--wide{flex:2;min-width:220px}.pattern-info{margin-top:.875rem;padding:.625rem .875rem;background:var(--bg-canvas);border-left:3px solid var(--accent-cyan);border-radius:0 3px 3px 0;font-size:.9rem;color:var(--ink-secondary)}.pattern-info strong{color:var(--accent-cyan);font-weight:600}.form-label{display:block;font-family:var(--font-display);font-size:.8rem;font-weight:600;color:var(--ink-secondary);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.375rem}.form-select{width:100%;padding:.625rem 2.5rem .625rem .875rem;background:var(--bg-white);border:1px solid var(--ink-tertiary);border-radius:4px;color:var(--ink-primary);font-family:var(--font-display);font-size:.95rem;cursor:pointer;transition:border-color .15s ease;-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='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center}.form-select:hover{border-color:var(--accent-cyan)}.form-select:focus{outline:none;border-color:var(--accent-cyan)}.form-select optgroup{background:var(--bg-canvas);color:var(--ink-secondary);font-weight:600}.form-select option{background:var(--bg-white);color:var(--ink-primary)}.preview-container{position:relative;border-radius:4px;overflow:hidden}.preview-box{width:100%;height:240px;background:var(--bg-white);border:2px solid var(--ink-primary);border-radius:4px;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px var(--shadow-soft);transition:border-color .15s ease}.preview-box:hover{border-color:var(--accent-cyan)}.fullscreen-btn{position:absolute;bottom:.75rem;right:.75rem;display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:var(--bg-white);border:1px solid var(--ink-tertiary);border-radius:4px;color:var(--ink-secondary);font-family:var(--font-display);font-size:.75rem;font-weight:600;text-transform:uppercase;cursor:pointer;transition:all .1s ease;box-shadow:1px 2px 0 var(--sketch-gray)}.fullscreen-btn svg{width:14px;height:14px}.fullscreen-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);transform:translateY(-1px);box-shadow:1px 3px 0 var(--sketch-gray)}.fullscreen-btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--sketch-gray)}.customize-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.25rem}.color-control{display:flex;flex-direction:column}.color-input-group{display:flex;gap:.625rem;align-items:center}.color-picker{width:44px;height:44px;padding:2px;border:1px solid var(--ink-tertiary);border-radius:4px;background:var(--bg-white);cursor:pointer;transition:border-color .15s ease;box-shadow:1px 2px 0 var(--sketch-gray)}.color-picker:hover{border-color:var(--accent-cyan)}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:2px}.color-text{flex:1;padding:.625rem;background:var(--bg-white);border:1px solid var(--ink-tertiary);border-radius:4px;color:var(--ink-primary);font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;transition:border-color .15s ease;box-shadow:1px 2px 0 var(--sketch-gray)}.color-text:hover{border-color:var(--accent-cyan)}.color-text:focus{outline:none;border-color:var(--accent-cyan)}.size-control{display:flex;flex-direction:column}.size-unit{font-size:.75rem;color:var(--ink-tertiary);margin-left:.375rem;font-weight:400}.size-input-group{display:flex;align-items:center;gap:.875rem}.size-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--sketch-gray);border-radius:2px;outline:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-cyan);border-radius:50%;cursor:pointer;border:2px solid var(--bg-white);box-shadow:0 1px 3px #0003;transition:transform .1s ease}.size-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--accent-cyan);border-radius:50%;cursor:pointer;border:2px solid var(--bg-white);box-shadow:0 1px 3px #0003}.size-input{width:60px;padding:.5rem;background:var(--bg-white);border:1px solid var(--ink-tertiary);border-radius:4px;color:var(--ink-primary);font-family:var(--font-mono);font-size:.85rem;text-align:center;transition:border-color .15s ease;box-shadow:1px 2px 0 var(--sketch-gray)}.size-input:hover,.size-input:focus{border-color:var(--accent-cyan);outline:none}.output-container{display:flex;flex-direction:column;gap:.875rem}.css-output{width:100%;min-height:160px;padding:1rem;background:var(--bg-canvas);border:1px solid var(--sketch-gray);border-radius:4px;color:var(--ink-primary);font-family:var(--font-mono);font-size:.78rem;line-height:1.5;resize:vertical;transition:border-color .15s ease}.css-output:hover{border-color:var(--ink-tertiary)}.css-output:focus{outline:none;border-color:var(--accent-cyan)}.css-output::selection{background:var(--accent-cyan-light);color:var(--accent-cyan)}.output-actions{display:flex;gap:.75rem;flex-wrap:wrap}.action-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.125rem;border:1px solid var(--ink-primary);border-radius:4px;font-family:var(--font-display);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:all .1s ease;box-shadow:1px 2px 0 var(--sketch-gray)}.action-btn svg{width:16px;height:16px}.action-btn--primary{background:var(--accent-cyan-light);color:var(--accent-cyan);border-color:var(--accent-cyan)}.action-btn--primary:hover{background:var(--accent-cyan);color:#fff;transform:translateY(-1px);box-shadow:1px 3px 0 var(--sketch-gray)}.action-btn--secondary{background:var(--bg-white);color:var(--ink-secondary);border-color:var(--ink-tertiary)}.action-btn--secondary:hover{color:var(--ink-primary);border-color:var(--ink-primary);transform:translateY(-1px);box-shadow:1px 3px 0 var(--sketch-gray)}.action-btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--sketch-gray)}.copy-btn--copied{background:var(--accent-cyan)!important;border-color:var(--accent-cyan)!important;color:#fff!important}.fullscreen-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease;background:#fffffffa}.fullscreen-modal.active{opacity:1;visibility:visible}.fullscreen-backdrop{display:none}.fullscreen-content{position:relative;width:92vw;height:88vh;z-index:1001;transform:scale(.96);transition:transform .2s ease}.fullscreen-modal.active .fullscreen-content{transform:scale(1)}.fullscreen-close{position:absolute;top:-2.5rem;right:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-white);border:1px solid var(--ink-tertiary);border-radius:4px;color:var(--ink-secondary);cursor:pointer;transition:all .1s ease;box-shadow:1px 2px 0 var(--sketch-gray);z-index:1002}.fullscreen-close svg{width:18px;height:18px}.fullscreen-close:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);transform:translateY(-1px);box-shadow:1px 3px 0 var(--sketch-gray)}.fullscreen-close:active{transform:translateY(1px);box-shadow:0 1px 0 var(--sketch-gray)}.fullscreen-preview{width:100%;height:100%;background:var(--bg-white);border:2px solid var(--ink-primary);border-radius:4px;box-shadow:0 4px 20px var(--shadow-soft);image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;background-repeat:repeat!important;background-position:0 0!important}.footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--sketch-gray);text-align:center}.footer p{font-size:.8rem;color:var(--ink-tertiary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-canvas)}::-webkit-scrollbar-thumb{background:var(--sketch-gray);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--ink-tertiary)}::selection{background:var(--accent-cyan-light);color:var(--accent-cyan)}@media (max-width: 640px){.container{padding:1.25rem 1rem}.header{margin-bottom:1.75rem}.section{padding:1rem}.pattern-selector{flex-direction:column}.selector-group,.selector-group--wide{min-width:100%}.customize-grid{grid-template-columns:1fr}.color-input-group,.size-input-group{flex-wrap:wrap}.output-actions{flex-direction:column}.action-btn{width:100%;justify-content:center}.preview-box{height:200px}.fullscreen-close{top:1rem;right:1rem;background:var(--bg-white)}.fullscreen-content{width:95vw;height:90vh}}