:root{--color-black:#292929;--color-deep-black:#131313;--color-white:#ffffff;--color-foreground:#fefefe;--color-panel:#ececec;--color-background:#F4F1F0;--color-border-light:rgba(41, 41, 41, 0.25);--color-border-strong:rgba(41, 41, 41, 0.5);--color-border-subtle:rgba(41, 41, 41, 0.1);--color-label-blue:#709cff;--color-label-red:#e1657a;--color-label-purple:#8e65e1;--color-primary:#EEC356;--color-accent:#95DCA5;--color-accent-dark:#7BEF96;--color-error:#FF594E;--gradient-yellow-base:#FFE39F;--gradient-yellow-light:linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.6) 100%
  ), linear-gradient(90deg, #FFE39F 0%, #FFE39F 100%);--gradient-yellow-hover:linear-gradient(
    180deg,
    rgba(255, 194, 45, 0.2) 0%,
    rgb(255, 220, 133) 52%
  ), linear-gradient(90deg, #fff 0%, #fff 100%);--gradient-button-dark:linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 100%
  ), #131313;--gradient-green:linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.6) 100%
  ), linear-gradient(90deg, #7BEF96 0%, #7BEF96 100%);--color-text-primary:var(--color-deep-black);--color-text-secondary:rgba(41, 41, 41, 0.6);--color-text-tertiary:rgba(41, 41, 41, 0.5);--color-text-muted:rgba(41, 41, 41, 0.4);--font-primary:'Red Hat Display', sans-serif;--font-mono:'Inconsolata', monospace;--text-h1:40px;--text-h2:32px;--text-h3:20px;--text-body:16px;--text-subtext:14px;--text-small:12px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--leading-tight:1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.6;--space-xxs:3px;--space-xs:7px;--space-step:10px;--space-s:14px;--space-m:20px;--space-l:34px;--space-xl:54px;--radius-xs:4px;--radius-s:6px;--radius-m:8px;--radius-l:10px;--radius-xl:12px;--radius-pill:16px;--shadow-button:0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 0px 0px 1px rgba(0, 0, 0, 0.07);--shadow-card:0px 2px 8px rgba(0, 0, 0, 0.06);--shadow-card-hover:0px 4px 16px rgba(0, 0, 0, 0.1);--blur-glass:12.5px;--transition-fast:0.2s ease;--transition-normal:0.3s ease;--max-width-content:800px;--max-width-wide:1200px}html{overflow-y:scroll}body{font-family:var(--font-primary);font-size:var(--text-body);font-weight:var(--weight-regular);line-height:var(--leading-relaxed);color:var(--color-text-primary);background-color:var(--color-background);margin:0;padding:var(--space-m);padding-bottom:var(--space-l)}h1{font-size:var(--text-h1);font-weight:var(--weight-bold);line-height:var(--leading-snug);color:var(--color-deep-black);margin:0 0 var(--space-m)}h2{font-size:var(--text-h2);font-weight:var(--weight-semibold);line-height:var(--leading-snug);color:var(--color-deep-black)}h3{font-size:var(--text-h3);font-weight:var(--weight-bold);line-height:var(--leading-snug);color:var(--color-deep-black)}p{margin:0 0 var(--space-s)}a{color:var(--color-deep-black);text-decoration:underline;text-decoration-color:var(--color-border-light);text-underline-offset:2px;transition:text-decoration-color var(--transition-fast)}a:hover{text-decoration-color:var(--color-deep-black)}code,pre{font-family:var(--font-mono);font-size:var(--text-subtext);font-weight:var(--weight-medium);background:var(--color-deep-black);color:var(--color-foreground);border:1px solid var(--color-border-light);border-radius:var(--radius-l);padding:var(--space-s);white-space:pre-wrap!important;word-break:break-word!important;overflow-wrap:anywhere!important}code{padding:var(--space-xxs)var(--space-xs);border-radius:var(--radius-s)}pre code{background:0 0;border:none;padding:0;border-radius:0}.container{max-width:var(--max-width-wide);margin:0 auto;padding:0 var(--space-s)}nav{padding:var(--space-s)0;margin-bottom:var(--space-m);border-bottom:1px solid var(--color-border-light)}nav ul{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:var(--space-l)}nav a{text-decoration:none;color:var(--color-text-primary);font-weight:var(--weight-medium);font-size:var(--text-subtext);transition:color var(--transition-fast)}nav a:hover{color:var(--color-text-secondary)}.logo{font-size:2em;text-decoration:none;color:inherit}.main-button{display:inline-flex;padding:var(--space-step)var(--space-s);justify-content:center;align-items:center;gap:var(--space-xxs);border-radius:var(--radius-l);background:var(--gradient-button-dark);box-shadow:var(--shadow-button);color:var(--color-white);font-family:var(--font-primary);font-size:var(--text-subtext);font-weight:var(--weight-semibold);text-decoration:none;border:none;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass))}.main-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}.download-button{display:block;width:100%;box-sizing:border-box;text-align:center;background:var(--gradient-yellow-light);box-shadow:var(--shadow-button);color:var(--color-deep-black);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass))}.download-button:hover{background:var(--gradient-yellow-hover)}.card{background:var(--color-panel);border:1px solid var(--color-border-light);border-radius:var(--radius-l);overflow:hidden}.card-interactive{transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}.card-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--color-border-strong)}details.toggle{margin:var(--space-m)0}details.toggle summary{display:block;cursor:pointer;list-style:none;font-family:var(--font-mono);font-weight:var(--weight-medium);font-size:var(--text-subtext);position:relative;padding:var(--space-s)var(--space-s)var(--space-s)var(--space-l);background:var(--color-panel);border:1px solid var(--color-border-light);border-radius:var(--radius-l);color:var(--color-text-primary);transition:border-color var(--transition-fast)}details.toggle summary:hover{border-color:var(--color-border-strong)}details.toggle summary::-webkit-details-marker{display:none}details.toggle summary::before{content:'>';position:absolute;left:var(--space-s);top:50%;font-size:var(--text-subtext);line-height:1;transform:translateY(-50%)rotate(0);transition:transform var(--transition-fast);color:var(--color-text-tertiary)}details.toggle[open] summary{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}details.toggle[open] summary::before{transform:translateY(-50%)rotate(90deg)}details.toggle pre{margin:0;background:var(--color-deep-black);color:var(--color-foreground);border:1px solid var(--color-border-light);border-top:none;border-radius:0 0 var(--radius-l)var(--radius-l);padding:var(--space-s);overflow:auto}.tags{display:flex;gap:var(--space-xs);flex-wrap:wrap}.tag{background:var(--gradient-yellow-light);padding:var(--space-xxs)var(--space-step);border-radius:var(--radius-pill);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--color-deep-black);border:1px solid rgba(0,0,0,5%)}.header-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-m);align-items:start}.header-poster{background:var(--color-background);padding:var(--space-s);border-radius:var(--radius-m);border:1px solid var(--color-border-subtle)}.header-poster img{width:100%;height:auto;display:block;border-radius:var(--radius-xs)}.author{color:var(--color-text-secondary);font-size:var(--text-subtext);margin:0}@media(max-width:768px){.header-grid{grid-template-columns:1fr}.header-poster{order:-1}}.content-block{font-size:var(--text-body);line-height:var(--leading-relaxed);background:var(--color-panel);border:1px solid var(--color-border-light);padding:var(--space-m);border-radius:var(--radius-l)}.content-block h2{margin-top:var(--space-l);margin-bottom:var(--space-s)}.content-block h2:first-child{margin-top:0}.style-single{max-width:var(--max-width-content);margin:0 auto;padding:var(--space-m)0}.style-header{background:var(--color-panel);border:1px solid var(--color-border-light);padding:var(--space-m);border-radius:var(--radius-l);margin-bottom:var(--space-m)}.style-meta{display:flex;align-items:center;gap:var(--space-s);margin:var(--space-xs)0 var(--space-m)}.style-description{font-size:var(--text-body);color:var(--color-text-secondary);margin:var(--space-s)0}.style-content{font-size:var(--text-body);line-height:var(--leading-relaxed);background:var(--color-panel);border:1px solid var(--color-border-light);padding:var(--space-m);border-radius:var(--radius-l)}.style-content h2{margin-top:var(--space-l);margin-bottom:var(--space-s)}.style-content h2:first-child{margin-top:0}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-step);margin-bottom:var(--space-m)}.info-item{padding:var(--space-step);background:var(--color-background);border:1px solid var(--color-border-subtle);border-radius:var(--radius-m);font-size:var(--text-subtext)}.info-item strong{display:block;font-size:var(--text-small);color:var(--color-text-tertiary);font-weight:var(--weight-medium);margin-bottom:var(--space-xxs)}.styles-header{margin-bottom:var(--space-m)}.search-container{margin:var(--space-s)0}#styleSearch{width:100%;box-sizing:border-box;padding:var(--space-s);font-family:var(--font-mono);font-size:var(--text-subtext);font-weight:var(--weight-medium);background:var(--color-panel);border:1px solid var(--color-border-light);border-radius:var(--radius-l);color:var(--color-text-primary);transition:border-color var(--transition-fast)}#styleSearch::placeholder{color:var(--color-text-tertiary)}#styleSearch:focus{outline:none;border-color:var(--color-border-strong)}.styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-m);align-items:start}.style-card{background:var(--color-panel);border:1px solid var(--color-border-light);border-radius:var(--radius-l);overflow:hidden;height:fit-content;display:flex;flex-direction:column;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}.style-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--color-border-strong)}.style-poster{padding:var(--space-s);background:var(--color-background)}.style-poster img{width:100%;height:auto;display:block;border-radius:var(--radius-m)}.style-info{padding:var(--space-s)var(--space-m)var(--space-m)}.style-info h3{margin:0 0 var(--space-xxs)}.style-info .author{margin:0 0 var(--space-s)}.blog-single{max-width:var(--max-width-content);margin:0 auto;padding:var(--space-m)0}.blog-header{background:var(--color-panel);border:1px solid var(--color-border-light);padding:var(--space-m);border-radius:var(--radius-l);margin-bottom:var(--space-m)}.blog-description{font-size:var(--text-body);color:var(--color-text-secondary);margin:var(--space-s)0}.blog-meta{display:flex;gap:var(--space-s);font-size:var(--text-subtext);margin-top:var(--space-s)}.blog-meta .author{font-weight:var(--weight-medium)}.blog-meta .date{color:var(--color-text-tertiary)}.blog-content{font-size:var(--text-body);line-height:var(--leading-relaxed);background:var(--color-panel);border:1px solid var(--color-border-light);padding:var(--space-m);border-radius:var(--radius-l)}.blog-content h2{margin-top:var(--space-l);margin-bottom:var(--space-s)}.blog-content h2:first-child{margin-top:0}@media(max-width:768px){.blog-header,.blog-content{padding:var(--space-s)}}.blog-list{max-width:var(--max-width-wide);margin:0 auto;padding:var(--space-m)0}.blog-grid{display:flex;flex-direction:column;gap:var(--space-m);margin-top:var(--space-m)}.blog-card{background:var(--color-panel);border:1px solid var(--color-border-light);border-radius:var(--radius-l);overflow:hidden;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}.blog-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--color-border-strong)}.blog-link{text-decoration:none;color:inherit;display:block}.blog-card-content{display:flex;gap:var(--space-m)}.blog-poster{width:280px;flex-shrink:0;background:var(--color-background)}.blog-poster-img{width:100%;height:180px;object-fit:cover}.blog-info{padding:var(--space-m);flex-grow:1}.blog-info h2{margin:0 0 var(--space-xs);font-size:var(--text-h3);color:var(--color-text-primary)}.blog-info .blog-description{color:var(--color-text-secondary);margin-bottom:var(--space-s);font-size:var(--text-subtext);line-height:var(--leading-normal)}.blog-date{color:var(--color-text-tertiary);font-size:var(--text-small)}@media(max-width:768px){.blog-card-content{flex-direction:column;gap:0}.blog-poster{width:100%}.blog-info{padding:var(--space-s)}}.concept-single{max-width:var(--max-width-content);margin:0 auto;padding:var(--space-m)0}.concept-header{background:var(--color-panel);border:1px solid var(--color-border-light);padding:var(--space-m);border-radius:var(--radius-l);margin-bottom:var(--space-m)}.concept-description{font-size:var(--text-body);color:var(--color-text-secondary);margin:var(--space-s)0}.concept-content{font-size:var(--text-body);line-height:var(--leading-relaxed);background:var(--color-panel);border:1px solid var(--color-border-light);padding:var(--space-m);border-radius:var(--radius-l)}.concept-content h2{margin-top:var(--space-l);margin-bottom:var(--space-s)}.concept-content h2:first-child{margin-top:0}.concept-content iframe{margin:var(--space-m)0;width:100%;border:none;border-radius:var(--radius-m)}.concepts-list{max-width:var(--max-width-wide);margin:0 auto}.concepts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-m);margin-top:var(--space-m)}.concept-card{background:var(--color-panel);border:1px solid var(--color-border-light);border-radius:var(--radius-l);overflow:hidden;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}.concept-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--color-border-strong)}.concept-link{text-decoration:none;color:inherit;display:block;padding:var(--space-s)}.concept-poster{width:100%;height:180px;object-fit:cover;border-radius:var(--radius-m);background:var(--color-background)}.concept-link h2{font-size:var(--text-h3);margin:var(--space-s)0 var(--space-xs)}.concepts-grid .concept-description{color:var(--color-text-secondary);margin:0;font-size:var(--text-subtext)}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;margin:var(--space-m)0;background:var(--color-background);border:1px solid var(--color-border-subtle);border-radius:var(--radius-m)}.video-container iframe,.video-container video{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius-m)}input[type=text],input[type=email],input[type=search],textarea{font-family:var(--font-mono);font-size:var(--text-subtext);font-weight:var(--weight-medium);padding:var(--space-s);background:var(--color-panel);border:1px solid var(--color-border-light);border-radius:var(--radius-l);color:var(--color-text-primary);transition:border-color var(--transition-fast)}input::placeholder,textarea::placeholder{color:var(--color-text-tertiary)}input[type=text]:focus,input[type=email]:focus,input[type=search]:focus,textarea:focus{outline:none;border-color:var(--color-border-strong)}.text-mono{font-family:var(--font-mono)}.text-muted{color:var(--color-text-tertiary)}.bg-highlight{background:var(--gradient-yellow-light)}