
/* Warning Emoji light redesign */
:root{
  --bg:#fffdf8;--panel:#ffffff;--panel2:#fff8e8;--panel3:#fff1cc;
  --text:#172033;--muted:#5d6676;--accent:#fbbf24;--cyan:#f97316;
  --danger:#dc2626;--success:#16a34a;--line:#e8dfcf;
  --shadow:0 18px 50px rgba(68,47,13,.10);--shadow-soft:0 10px 30px rgba(68,47,13,.07)
}
html,body,button,input,select,option,textarea,code,pre,table,th,td,label,a,p,span,strong,small,h1,h2,h3,h4,h5,h6,legend,fieldset{
  font-family:Poppins,Arial,sans-serif!important
}
body{background:var(--bg);color:var(--text)}
body:before{background-image:radial-gradient(circle at 8% 12%,rgba(251,191,36,.13),transparent 24%),radial-gradient(circle at 92% 22%,rgba(249,115,22,.08),transparent 22%);background-size:auto;z-index:-1}
.site-header{background:rgba(255,253,248,.94);border-bottom-color:rgba(232,223,207,.9);box-shadow:0 5px 20px rgba(68,47,13,.04)}
.brand{color:var(--text)}
.brand-mark{border-color:#f4b317;background:linear-gradient(145deg,#fff7d6,#ffe991);box-shadow:0 8px 20px rgba(251,191,36,.22)}
.site-nav a{color:#5b6473}.site-nav a:hover,.site-nav a:focus-visible{color:var(--text);background:#fff3cf}
.btn,.icon-btn{border-color:#ded4c2;background:#fff;color:var(--text);box-shadow:0 4px 12px rgba(68,47,13,.04)}
.btn:hover,.btn:focus-visible,.icon-btn:hover,.icon-btn:focus-visible{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.14),0 7px 18px rgba(68,47,13,.08);transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-color:#f0a60d;color:#172033}
.btn-cyan{background:linear-gradient(135deg,#fb923c,#f97316);border-color:#f97316;color:#fff}
.btn-ghost{background:transparent}.eyebrow{color:#c95e0b}.section-alt{background:#fff8ea;border-block-color:#eee1cb}
.section h2,.content-page h1{text-align:center}.content-header{max-width:850px;margin-inline:auto;text-align:center}.section-head{max-width:850px}

/* New homepage hero */
.warning-hero{padding:72px 0 52px;position:relative;overflow:hidden}
.warning-hero:after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-190px;border:70px solid rgba(251,191,36,.10);border-radius:50%;pointer-events:none}
.warning-hero-shell{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:54px;align-items:center}
.warning-hero-copy{position:relative;z-index:2}
.warning-hero h1{font-size:clamp(2.55rem,5.4vw,5.25rem);line-height:1.02;letter-spacing:-.055em;margin:12px 0 22px;max-width:760px}
.warning-hero h1 span{display:block;color:#d9650d}
.warning-hero-copy>.hero-description{font-size:1.08rem;color:var(--muted);max-width:650px;margin:0}
.hero-actions-new{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}
.hero-actions-new .btn{min-height:48px;padding-inline:19px}
.hero-trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:999px;color:#626b78;font-size:.78rem;box-shadow:var(--shadow-soft)}
.warning-visual{position:relative;min-height:480px;display:grid;place-items:center}
.warning-visual:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,#fff4c7 0 52%,transparent 53%);border:1px dashed #efc45b;animation:warningPulse 5s ease-in-out infinite}
.warning-core{position:relative;z-index:3;width:224px;height:224px;border-radius:50px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#fff1b8);border:1px solid #f3ce68;box-shadow:0 28px 70px rgba(185,123,12,.18);font-size:8.4rem;transform:rotate(-4deg)}
.warning-symbol{position:absolute;z-index:4;width:80px;height:80px;border:1px solid #eadfc9;background:rgba(255,255,255,.96);border-radius:22px;display:grid;place-items:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;font-size:2.4rem;box-shadow:0 14px 32px rgba(68,47,13,.12);transition:.2s ease}
.warning-symbol:hover,.warning-symbol:focus-visible{transform:translateY(-5px) scale(1.04);border-color:#f3b72c}
.warning-symbol:nth-child(2){top:18px;left:48px}.warning-symbol:nth-child(3){top:20px;right:42px}.warning-symbol:nth-child(4){top:142px;right:0}.warning-symbol:nth-child(5){bottom:72px;right:36px}.warning-symbol:nth-child(6){bottom:5px;left:185px}.warning-symbol:nth-child(7){bottom:64px;left:25px}.warning-symbol:nth-child(8){top:150px;left:0}.warning-symbol:nth-child(9){top:78px;left:185px;width:64px;height:64px;border-radius:18px;font-size:1.9rem}
@keyframes warningPulse{50%{transform:scale(1.035);opacity:.78}}
.emoji-browser-section{padding-top:34px}.emoji-browser-section .section-head{margin-bottom:26px}

.workspace{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.workspace-bar{background:linear-gradient(90deg,#fff8dd,#fff);border-bottom-color:var(--line);color:#6b665b}
.status-dot{background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.45)}
.toolbar,.result-line{border-color:var(--line)}
.field,.select{background:#fff;color:var(--text);border-color:#ddd3c1}.field:focus,.select:focus{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.13)}
.filter-label,.result-line{color:#6b7280}.chip{background:#fff;color:#626b78;border-color:#ddd3c1}.chip[aria-pressed="true"],.chip:hover,.chip:focus-visible{border-color:#f59e0b;color:#9a4d0a;background:#fff5d8}
.emoji-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.emoji-card{background:linear-gradient(180deg,#fff,#fffaf0);border-color:#e7dece;border-radius:16px;padding:14px;box-shadow:0 7px 20px rgba(68,47,13,.045)}
.emoji-card:hover{border-color:#efb42c;box-shadow:0 14px 30px rgba(68,47,13,.09)}
.emoji-art{background:#fffdfa;border:1px solid #f0e7d8;min-height:84px}
.emoji-name{color:#2d3543;font-weight:600}
.emoji-actions{grid-template-columns:1fr 1fr;grid-template-areas:"copy info" "download download";gap:7px}
.emoji-actions [data-action="copy"]{grid-area:copy}.emoji-actions [data-action="info"]{grid-area:info}.emoji-actions [data-action="download"]{grid-area:download;width:100%;white-space:normal;line-height:1.25}
.style-neon .emoji-art{background:#162033;filter:none;text-shadow:0 0 13px #ffd84d,0 0 24px #ff8a25}
.style-outline .emoji-art{background:#fff;border:2px dashed #c68c18;-webkit-text-stroke:0}
.style-circle .emoji-art{background:radial-gradient(circle,#fff0a3 0 50%,#fff 51%);border-color:#f0cf65}
.style-sticker .emoji-art{background:#fff;border:4px solid #fff;box-shadow:inset 0 0 0 2px #172033;transform:rotate(-1.5deg)}
.style-metallic .emoji-art{background:linear-gradient(145deg,#f8fafc,#cbd5e1 48%,#94a3b8);border-color:#94a3b8}
.style-pixel .emoji-art{background:#fff5cf;box-shadow:inset 0 0 0 3px #f6c941}
.style-soft .emoji-art{background:#fff3e6;border-color:#ffddbd}

.panel,.info-card,.use-card,.meaning-card,.category-card,.combination-card,.conversation,.code-card,.support-card,.faq-item,.blog-card,.related-links a,.comparison{background:#fff;border-color:var(--line);box-shadow:var(--shadow-soft)}
.panel p,.info-card p,.use-card p,.meaning-card p,.category-card p,.support-card p,.combination-card p,.conversation p,.prose p,.prose li,.comparison td,.faq-answer,.blog-body p,.footer-about p,.footer-col a{color:var(--muted)}
.canvas-wrap{background:#fff9ed;border-color:var(--line)}
.canvas-wrap canvas{border-color:#d7c9b0;max-width:560px;background-image:linear-gradient(45deg,#efe7d9 25%,transparent 25%),linear-gradient(-45deg,#efe7d9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#efe7d9 75%),linear-gradient(-45deg,transparent 75%,#efe7d9 75%)}
.code-card small,.blog-body time,.breadcrumbs a,.prose a{color:#d25f0a}.comparison th{color:#9b520f}.comparison td:first-child{color:var(--text)}
.blog-cover{background:#fff8e9;border-color:var(--line)}.blog-card:hover{border-color:#efb42c}.faq-question{color:var(--text)}
.article-cover{background:#fff8e9;border-color:var(--line)}
.notice{background:#fff4cf;color:#5c6471;border-left-color:#f59e0b}.stat{background:#fff;border-color:var(--line)}.stat strong{color:#c8610c}
.site-footer{background:#fff8e9;border-top-color:#eadfc9}.footer-bottom{border-top-color:#e5d9c5}.footer-bottom a{color:#a84e08}
.toast{background:#172033;color:#fff;border-color:#fbbf24}.scroll-top{background:#fff;color:var(--text);border-color:var(--line)}
.contact-email{color:#c85b0a}

/* Accessible emoji info modal */
.emoji-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(23,32,51,.48);backdrop-filter:blur(5px)}
.emoji-modal.open{display:flex}.emoji-modal-card{width:min(100%,520px);max-height:min(90vh,700px);overflow:auto;background:#fff;border:1px solid #eadfc9;border-radius:24px;box-shadow:0 30px 90px rgba(23,32,51,.25);padding:24px;position:relative}
.emoji-modal-close{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;padding:0}
.emoji-modal-preview{width:116px;height:116px;margin:6px auto 16px;display:grid;place-items:center;background:#fff7d7;border:1px solid #f0d477;border-radius:28px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;font-size:4.5rem}
.emoji-modal h2{text-align:center;margin:0 40px 6px;font-size:1.45rem}.emoji-modal-sub{text-align:center;color:var(--muted);margin:0 0 20px}
.emoji-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.emoji-meta-item{background:#fff9ed;border:1px solid #eee1ca;border-radius:12px;padding:11px}.emoji-meta-item small{display:block;color:#8a8172;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.emoji-meta-item strong{display:block;margin-top:3px;word-break:break-word}
.emoji-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.emoji-modal-actions .btn-primary{grid-column:1/-1}
body.modal-open{overflow:hidden}

@media(max-width:1100px){.site-nav{background:#fff}.warning-hero-shell{grid-template-columns:1fr;gap:28px}.warning-hero-copy{text-align:center}.warning-hero h1,.warning-hero-copy>.hero-description{margin-inline:auto}.hero-actions-new,.hero-trust{justify-content:center}.warning-visual{min-height:430px;max-width:560px;margin-inline:auto;width:100%}}
@media(max-width:820px){.emoji-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.warning-hero{padding-top:52px}}
@media(max-width:560px){.warning-hero{padding:40px 0 28px}.warning-hero h1{font-size:2.48rem}.warning-hero-shell{gap:18px}.warning-visual{min-height:355px;transform:scale(.9);margin-top:-10px;margin-bottom:-15px}.warning-visual:before{width:305px;height:305px}.warning-core{width:166px;height:166px;border-radius:38px;font-size:6.2rem}.warning-symbol{width:61px;height:61px;border-radius:17px;font-size:1.8rem}.warning-symbol:nth-child(2){top:12px;left:26px}.warning-symbol:nth-child(3){top:14px;right:24px}.warning-symbol:nth-child(4){top:113px;right:0}.warning-symbol:nth-child(5){bottom:55px;right:18px}.warning-symbol:nth-child(6){bottom:0;left:142px}.warning-symbol:nth-child(7){bottom:49px;left:10px}.warning-symbol:nth-child(8){top:117px;left:0}.warning-symbol:nth-child(9){top:61px;left:143px;width:53px;height:53px;font-size:1.55rem}.emoji-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:11px}.emoji-actions{grid-template-columns:1fr 1fr!important}.emoji-actions .btn{min-width:0;padding:8px 4px;font-size:.7rem}.emoji-meta-grid{grid-template-columns:1fr}.emoji-modal-card{padding:20px 16px}.hero-actions-new .btn{width:100%;justify-content:center}.hero-trust{gap:7px}.hero-trust span{font-size:.72rem}}
