:root { --black:#0A0A0A; --dark-gray:#151515; --deep-brown:#2A1F18; --orange:#FA551E; --white:#E0E0E0; --phosphor:#39FF14; --search-dot-idle:rgba(255,255,255,.45); --search-char-idle:rgba(220,220,220,.4); }
html[data-itm-theme="light"] { --black:#F3E7D3; --dark-gray:#FFF7E8; --deep-brown:#E9C7A7; --white:#111111; --phosphor:#16A34A; --search-dot-idle:rgba(17,17,17,.58); --search-char-idle:rgba(17,17,17,.58); }
html[data-itm-theme="light"] { --itm-chrome-page-bg:#F3E7D3; --itm-chrome-bg:#F3E7D3; --itm-chrome-surface:#FFF7E8; --itm-chrome-surface-2:#EFE0C8; --itm-chrome-panel:rgba(73,49,26,.045); --itm-chrome-text:#111111; --itm-chrome-heading:#111111; --itm-chrome-muted:rgba(17,17,17,.68); --itm-chrome-faint:rgba(17,17,17,.58); --itm-chrome-line:rgba(73,49,26,.18); --itm-chrome-line-soft:rgba(73,49,26,.11); --itm-chrome-field:#FFF8E8; --itm-chrome-nav-bg:rgba(255,248,232,.82); --itm-chrome-banner-bg:#FFF7E8; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background-color:var(--black); color:var(--white); font-family:'Space Grotesk', sans-serif; min-height:100vh; overflow-x:hidden; background-image:radial-gradient(circle at 50% 50%, rgba(42,31,24,.2), transparent); }
html[data-itm-theme="light"] body { background-image:radial-gradient(circle at 50% 50%, rgba(172,116,58,.18), transparent); }
.container { max-width:1200px; margin:0 auto; padding:80px 40px; position:relative; }
.brand-wrapper { display:inline-flex; align-items:center; gap:clamp(10px,3vw,25px); }
.brand-logo { width:clamp(120px,14vw,175px); height:clamp(120px,14vw,175px); object-fit:contain; }
h1,.brand-title { font-family:'Outfit', sans-serif; text-transform:uppercase; color:var(--white); letter-spacing:-3px; line-height:.9; }
.brand-title { font-size:clamp(54px,14vw,160px); display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
header { margin-bottom:60px; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:40px; position:relative; }
.nav-back { display:inline-flex; color:var(--orange); text-decoration:none; font-size:12px; text-transform:uppercase; letter-spacing:2px; margin-bottom:20px; }
.top-actions { position:absolute; top:0; right:0; z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.top-actions-right,.auth-switcher { display:flex; align-items:center; gap:8px; }
.auth-switcher a { font-size:11px; padding:3px 8px; border:1px solid var(--itm-chrome-line, rgba(255,255,255,.15)); color:var(--white); text-decoration:none; opacity:.55; transition:all .2s; text-transform:uppercase; }
.auth-switcher a:hover,.auth-switcher a.auth-user-link { opacity:1; border-color:var(--orange); color:var(--orange); }
.auth-switcher { padding-left:10px; border-left:1px solid rgba(255,255,255,.12); }
.auth-user-icon { display:inline-flex; align-items:center; justify-content:center; min-width:24px; }
.auth-user-icon svg { width:14px; height:14px; }
.auth-user-link { display:inline-flex; align-items:center; gap:6px; max-width:180px; }
.auth-user-link span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-bar { display:flex; gap:20px; font-size:14px; text-transform:uppercase; border-top:1px solid rgba(255,255,255,.1); padding-top:20px; flex-wrap:wrap; }
.status-item { display:flex; align-items:center; gap:8px; opacity:.75; }
.blink { width:8px; height:8px; border-radius:50%; background:var(--phosphor); animation:blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.panel,.card { background:var(--dark-gray); border:1px solid var(--itm-chrome-line-soft, rgba(255,255,255,.06)); transition:all .25s; }
.panel { padding:40px; }
.catalog-panel { position:relative; isolation:isolate; overflow:visible; }
.catalog-panel-border-runner { position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px); pointer-events:none; z-index:2; }
.catalog-panel > :not(.catalog-panel-border-runner) { position:relative; z-index:1; }
.panel:hover,.card:hover { border-color:var(--orange); }
.panel h2 { font-family:'Outfit', sans-serif; font-size:40px; text-transform:uppercase; margin-bottom:30px; color:var(--orange); }
.tool-list,.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.tool-link,.card-main { text-decoration:none; color:var(--white); }
.tool-link { padding:15px; border:1px solid rgba(255,255,255,.1); font-size:14px; text-transform:uppercase; display:flex; justify-content:space-between; transition:all .2s; }
.tool-link:hover { background:var(--orange); color:var(--black); border-color:var(--orange); font-weight:700; }
.playgrounds-panel { margin-top:24px; }
.card { display:flex; flex-direction:column; min-height:200px; }
.card:hover { transform:translateY(-4px); background:var(--deep-brown); }
.card-main { padding:30px; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.card-emoji { font-size:40px; margin-bottom:20px; }
.card-main h3 { font-family:'Outfit', sans-serif; font-size:24px; text-transform:uppercase; margin-bottom:10px; }
.card-main p { font-size:13px; opacity:.68; line-height:1.5; }
.card-footer { margin-top:20px; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--orange); display:flex; align-items:center; justify-content:space-between; }
.card-reverse { padding:18px 30px; border-top:1px dashed rgba(255,255,255,.15); background:rgba(0,0,0,.28); color:var(--white); font-size:12px; font-weight:700; text-transform:uppercase; text-decoration:none; display:flex; gap:12px; }
.card-reverse:hover { background:var(--orange); color:var(--black); }
.section-label { font-size:10px; letter-spacing:4px; color:var(--orange); margin:40px 0 20px; text-transform:uppercase; border-left:3px solid var(--orange); padding-left:15px; }
.breadcrumb { margin-top:15px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--itm-chrome-muted); font-size:12px; text-transform:uppercase; }
.breadcrumb a { color:inherit; text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--orange); }
.breadcrumb [aria-current="page"] { color:var(--white); font-weight:800; }
.breadcrumb-separator { color:var(--itm-chrome-faint); }
.search-container { position:relative; margin-top:30px; }
#searchInput { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--white); padding:8px 12px; font-size:clamp(16px,3.7vw,30px); font-family:'Outfit',sans-serif; font-weight:900; text-transform:uppercase; outline:none; }
#searchInput:focus { border-color:var(--orange); background:rgba(255,255,255,.08); }
html[data-itm-theme="light"] #searchInput { color:#111; background:rgba(255,248,232,.86); border-color:rgba(73,49,26,.22); }
.fake-placeholder { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-family:'Outfit',sans-serif; font-weight:900; font-size:clamp(16px,3.7vw,30px); text-transform:uppercase; color:rgba(220,220,220,.35); pointer-events:none; transition:opacity .2s ease, visibility .2s; white-space:nowrap; display:flex; align-items:center; gap:1px; }
html[data-itm-theme="light"] .fake-placeholder { color:rgba(17,17,17,.54); }
#searchInput:focus ~ .fake-placeholder,#searchInput:not(:placeholder-shown) ~ .fake-placeholder { opacity:0; visibility:hidden; }
.animated-dot { display:inline-block; color:var(--search-dot-idle); animation:dot-glow 3.554s infinite; }
@keyframes dot-glow { 0%{color:var(--search-dot-idle);} 4%,22%{color:var(--orange);} 28.1%,100%{color:var(--search-dot-idle);} }
.animated-char { display:inline-block; color:var(--search-char-idle); animation:char-glow 3.554s infinite; }
@keyframes char-glow { 0%{color:var(--search-char-idle);} 3%,8%{color:var(--orange);} 11.2%,100%{color:var(--search-char-idle);} }
#searchResults { display:none; margin-top:30px; }
.catalog-header { margin-bottom:24px; padding-bottom:28px; }
.catalog-header + #searchResults + #defaultContent > .section-label:first-child { margin-top:0; }
.seo-panel { margin-top:50px; background:rgba(20,20,20,.55); border:1px solid rgba(255,255,255,.08); overflow:hidden; text-align:left; }
.panel-header { padding:16px 20px; background:rgba(255,255,255,.025); display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid rgba(255,255,255,.06); }
.seo-panel-label { font-size:12px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:0; }
.seo-toggle { border:1px solid rgba(250,85,30,.45); background:rgba(250,85,30,.08); color:var(--orange); padding:8px 12px; font-size:10px; font-weight:800; text-transform:uppercase; cursor:pointer; }
.seo-toggle:hover { background:var(--orange); color:var(--black); }
.seo-content { color:rgba(255,255,255,.72); line-height:1.62; display:grid; gap:24px; padding:30px; border-top:1px solid rgba(255,255,255,.03); }
.seo-panel.is-collapsed .seo-content { display:none; }
.seo-intro h1,.seo-intro h2 { font-family:'Outfit',sans-serif; color:var(--white); font-size:48px; line-height:.95; letter-spacing:0; text-transform:uppercase; margin-bottom:16px; }
.seo-intro h1 { margin-top:0; }
.seo-lead { max-width:920px; color:rgba(255,255,255,.74); font-size:16px; line-height:1.75; }
.seo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.seo-card { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025); padding:18px; }
.seo-card h3 { color:var(--orange); font-size:13px; margin-bottom:10px; text-transform:uppercase; letter-spacing:0; }
.seo-card p { color:rgba(255,255,255,.66); font-size:13px; line-height:1.65; }
.seo-card a { color:var(--white); text-decoration:none; }
.seo-card a:hover { color:var(--orange); }
.seo-link-row { display:flex; flex-wrap:wrap; gap:10px; }
.seo-link-row a { display:inline-flex; padding:9px 12px; border:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.76); text-decoration:none; font-size:12px; font-weight:800; text-transform:uppercase; }
.seo-link-row a:hover { border-color:var(--orange); color:var(--orange); }
.seo-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.seo-stat { border-left:3px solid var(--orange); background:rgba(250,85,30,.055); padding:16px; }
.seo-stat strong { display:block; color:var(--white); font:900 30px/1 'Outfit',sans-serif; margin-bottom:6px; }
.seo-stat span { color:rgba(255,255,255,.55); font-size:11px; text-transform:uppercase; }
.seo-faq { display:grid; gap:12px; }
.seo-faq-item { border-top:1px solid rgba(255,255,255,.1); padding-top:14px; }
.seo-faq-item h3 { color:var(--white); font-size:15px; margin-bottom:8px; }
.seo-faq-item p { color:rgba(255,255,255,.66); font-size:13px; line-height:1.65; }
.seo-section-label { margin:0 0 14px; }
.category-seo-panel { margin-top:56px; background:linear-gradient(180deg, rgba(20,20,20,.58), rgba(20,20,20,.38)); border-color:rgba(255,255,255,.09); }
.category-seo-content { gap:22px; }
.category-seo-intro { display:grid; gap:14px; }
.category-seo-intro h2 { margin:0; }
.category-seo-intro p:not(.seo-lead) { max-width:920px; color:rgba(255,255,255,.66); font-size:14px; line-height:1.75; }
.category-seo-cases { max-width:920px; margin:4px 0 0; padding:0 0 0 18px; display:grid; gap:8px; color:rgba(255,255,255,.66); font-size:14px; line-height:1.6; }
html[data-itm-theme="light"] .category-seo-panel .category-seo-cases { color:rgba(35,25,16,.68); }
.category-seo-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.category-seo-links .seo-link-row a { text-transform:none; letter-spacing:0; }
html[data-itm-theme="light"] .home-seo-panel { background:linear-gradient(180deg, rgba(255,246,228,.78), rgba(238,220,190,.7)); border-color:rgba(102,68,34,.22); box-shadow:0 18px 44px rgba(96,63,30,.1); }
html[data-itm-theme="light"] .home-seo-panel .panel-header { background:rgba(238,218,184,.58); border-bottom-color:rgba(102,68,34,.16); }
html[data-itm-theme="light"] .home-seo-panel .seo-content { color:rgba(35,25,16,.78); border-top-color:rgba(255,255,255,.36); }
html[data-itm-theme="light"] .home-seo-panel .seo-intro h1,html[data-itm-theme="light"] .home-seo-panel .seo-intro h2 { color:#1E1711; }
html[data-itm-theme="light"] .home-seo-panel .seo-lead { color:rgba(35,25,16,.72); }
html[data-itm-theme="light"] .home-seo-panel .seo-card { background:rgba(255,249,237,.62); border-color:rgba(102,68,34,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.52); }
html[data-itm-theme="light"] .home-seo-panel .seo-card h3,
html[data-itm-theme="light"] .home-seo-panel .seo-card h3 a { color:#C2410C; }
html[data-itm-theme="light"] .home-seo-panel .seo-card p { color:rgba(35,25,16,.66); }
html[data-itm-theme="light"] .home-seo-panel .seo-card a:hover { color:var(--orange); }
html[data-itm-theme="light"] .home-seo-panel .seo-link-row a { background:rgba(255,249,237,.48); border-color:rgba(102,68,34,.18); color:rgba(35,25,16,.72); }
html[data-itm-theme="light"] .home-seo-panel .seo-link-row a:hover { background:rgba(250,85,30,.1); border-color:rgba(250,85,30,.55); color:#C2410C; }
html[data-itm-theme="light"] .home-seo-panel .seo-stat { background:rgba(250,85,30,.08); border:1px solid rgba(250,85,30,.18); border-left:3px solid var(--orange); }
html[data-itm-theme="light"] .home-seo-panel .seo-stat strong { color:#1E1711; }
html[data-itm-theme="light"] .home-seo-panel .seo-stat span { color:rgba(35,25,16,.56); }
html[data-itm-theme="light"] .home-seo-panel .seo-faq-item { border-top-color:rgba(102,68,34,.16); }
html[data-itm-theme="light"] .home-seo-panel .seo-faq-item h3 { color:#1E1711; }
html[data-itm-theme="light"] .home-seo-panel .seo-faq-item p { color:rgba(35,25,16,.66); }
html[data-itm-theme="light"] .section-label { color:#C2410C; border-left-color:#C2410C; }
html[data-itm-theme="light"] .seo-panel-label { color:#C2410C; }
html[data-itm-theme="light"] .seo-toggle { color:#9A3412; border-color:rgba(154,52,18,.5); }
html[data-itm-theme="light"] .seo-link-row a { background:rgba(255,249,237,.48); border-color:rgba(102,68,34,.18); color:rgba(35,25,16,.72); }
html[data-itm-theme="light"] .seo-link-row a:hover { background:rgba(250,85,30,.1); border-color:rgba(250,85,30,.55); color:#C2410C; }
html[data-itm-theme="light"] .home-tools-panel > details > summary { opacity:1; }
html[data-itm-theme="light"] .home-tools-panel > details > summary h2 { color:#C2410C; }
html[data-itm-theme="light"] .home-seo-panel .section-label { color:#C2410C; border-left-color:#C2410C; }
html[data-itm-theme="light"] .home-tools-panel .seo-link-row a { background:rgba(255,249,237,.48); border-color:rgba(102,68,34,.18); color:rgba(35,25,16,.72); }
html[data-itm-theme="light"] .home-tools-panel .seo-link-row a:hover { background:rgba(250,85,30,.1); border-color:rgba(250,85,30,.55); color:#C2410C; }
html[data-itm-theme="light"] .home-tools-panel .section-label { color:#C2410C; border-left-color:#C2410C; }
.home-tools-panel .seo-link-row a { text-transform:none; letter-spacing:0; }
html[data-itm-theme="light"] .category-seo-panel { background:linear-gradient(180deg, rgba(255,246,228,.84), rgba(238,220,190,.7)); border-color:rgba(102,68,34,.18); box-shadow:0 18px 42px rgba(96,63,30,.08); }
html[data-itm-theme="light"] .category-seo-panel .seo-content { color:rgba(35,25,16,.78); border-top-color:rgba(255,255,255,.38); }
html[data-itm-theme="light"] .category-seo-panel .seo-intro h2 { color:#1E1711; }
html[data-itm-theme="light"] .category-seo-panel .seo-lead,
html[data-itm-theme="light"] .category-seo-panel .category-seo-intro p:not(.seo-lead) { color:rgba(35,25,16,.68); }
html[data-itm-theme="light"] .category-seo-panel .seo-link-row a { background:rgba(255,249,237,.5); border-color:rgba(102,68,34,.18); color:rgba(35,25,16,.74); }
html[data-itm-theme="light"] .category-seo-panel .seo-link-row a:hover { background:rgba(250,85,30,.1); border-color:rgba(250,85,30,.55); color:#C2410C; }
html[data-itm-theme="light"] .category-seo-panel .seo-stat { background:rgba(250,85,30,.08); border:1px solid rgba(250,85,30,.18); border-left:3px solid var(--orange); }
html[data-itm-theme="light"] .category-seo-panel .seo-stat strong { color:#1E1711; }
html[data-itm-theme="light"] .category-seo-panel .seo-stat span { color:rgba(35,25,16,.56); }
html[data-itm-theme="light"] .category-seo-panel .section-label { color:#C2410C; border-left-color:#C2410C; }
@media (max-width:768px) { .container{padding:40px 18px;} header{padding-top:74px;} .top-actions{left:0;right:0;justify-content:flex-start;} .auth-switcher{padding-left:0;border-left:0;} .brand-title{font-size:clamp(42px,14vw,80px); flex-direction:column; gap:8px; align-items:flex-start;} .tool-list,.grid,.seo-grid,.seo-stats{grid-template-columns:1fr;} .panel{padding:25px;} .panel-header{align-items:flex-start;flex-direction:column;} .seo-content{padding:22px;} .seo-intro h1,.seo-intro h2{font-size:32px;} }
@media (max-width:768px) { html,body{width:100%;max-width:100%;overflow-x:hidden;} .container{width:100%;max-width:100%;padding:32px 16px;overflow-x:hidden;} header{padding-top:0;} .catalog-header{margin-bottom:16px;padding-bottom:20px;} .top-actions{position:relative;top:auto;right:auto;left:auto;width:100%;display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:10px;margin-bottom:52px;} .catalog-header .top-actions{margin-bottom:34px;} .top-actions > .itm-theme-toggle{grid-column:1;justify-self:start;} .top-actions > .top-actions-right{grid-column:2;justify-self:end;align-items:flex-start;gap:8px;min-width:0;} .top-actions-right .auth-switcher{justify-content:flex-end;flex:0 1 auto;padding-left:0;border-left:0;max-width:100%;flex-wrap:wrap;gap:6px;min-width:0;} .auth-switcher a{font-size:10px;padding:3px 7px;white-space:nowrap;} .auth-switcher a[href="/register"]{display:none;} .catalog-header h1{font-size:clamp(40px,15vw,64px);letter-spacing:-2px;} .breadcrumb{font-size:11px;line-height:1.45;gap:6px;} .brand-wrapper{max-width:100%;display:flex;align-items:center;gap:12px;} .brand-logo{width:clamp(92px,26vw,120px);height:clamp(92px,26vw,120px);} .brand-title{font-size:clamp(38px,13vw,66px);letter-spacing:-1px;min-width:0;} .brand-title span{max-width:100%;overflow-wrap:anywhere;} .fake-placeholder{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;} .panel,.seo-panel,header{max-width:100%;} .panel{padding:24px 16px;} .panel h2{font-size:clamp(30px,10vw,42px);line-height:1;letter-spacing:-1px;max-width:100%;overflow-wrap:anywhere;} .category-seo-panel{margin-top:40px;} .category-seo-content{padding:22px 16px;} .category-seo-links{grid-template-columns:1fr;} .category-seo-intro p:not(.seo-lead){font-size:13px;} .tool-link{min-width:0;} }