:root {
--ink: #0f172a;
--ink-soft: #1e293b;
--canvas: #f8fafc;
--canvas-2: #f1f5f9;
--surface: #ffffff;
--line: #e2e8f0;
--muted: #64748b;
--text: #0f172a;
--indigo: #4f46e5;
--indigo-deep: #4338ca;
--purple: #7c3aed;
--pink: #ec4899;
--indigo-soft: #eef2ff;
--pink-soft: #fdf2f8;
--shadow: 0 12px 40px rgba(15, 23, 42, .08);
--shadow-card: 0 8px 28px rgba(15, 23, 42, .07);
--radius: 16px;
--radius-sm: 12px;
--font-ui: "Plus Jakarta Sans", system-ui, sans-serif;
--font-display: "Outfit", "Plus Jakarta Sans", sans-serif;
--wrap: 1120px;
--sticky-h: 72px;
--space-section: 2.25rem;
--space-block: 1rem;
--text-body: .95rem;
--text-small: .82rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-ui);
color: var(--text);
background:
radial-gradient(1200px 500px at 10% -10%, rgba(79, 70, 229, .12), transparent 55%),
radial-gradient(900px 420px at 100% 0%, rgba(236, 72, 153, .10), transparent 50%),
linear-gradient(180deg, #f7fafc 0%, var(--canvas) 40%, var(--canvas-2) 100%);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }
button, input, textarea { font: inherit; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.skip-link {
position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
.wrap {
width: min(100% - 2rem, var(--wrap));
margin-inline: auto;
overflow-x: visible;
} .btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
border: 0; border-radius: 999px; padding: .7rem 1.15rem; font-weight: 700;
cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
}
.btn-primary:hover { color: #fff; }
.btn-ghost {
background: var(--surface); color: var(--text); border: 1px solid var(--line);
}
.btn-ghost.is-on {
border-color: var(--indigo); background: var(--indigo-soft); color: var(--indigo-deep);
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { color: #fff; background: var(--ink-soft); }
.icon-btn {
width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface); cursor: pointer; color: var(--text);
}
.icon-btn:hover { border-color: var(--indigo); color: var(--indigo-deep); }
.linkish {
background: none; border: 0; color: var(--indigo-deep); font-weight: 600; cursor: pointer; padding: 0;
} .tool-hero { padding: 1.25rem 0 .85rem; }
.tool-hero-head { text-align: center; max-width: 34rem; margin: 0 auto 1rem; }
.brand-kicker {
display: inline-flex; margin: 0 0 .45rem; padding: .28rem .7rem; border-radius: 999px;
background: var(--indigo-soft); color: var(--indigo-deep); border: 1px solid #c7d2fe;
font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.tool-hero-head h1 {
font-family: var(--font-display); font-size: clamp(1.85rem, 4.5vw, 2.6rem); line-height: 1.08;
letter-spacing: -.03em; margin: 0 0 .4rem; color: var(--ink);
}
.tool-hero-head .hero-sub { margin: 0; color: var(--muted); font-size: clamp(.9rem, 2vw, 1rem); }
#sticky-sentinel { height: 1px; width: 100%; pointer-events: none; }
.sticky-dock {
position: sticky; top: 0; z-index: 50;
margin: 0 0 .85rem;
}
.sticky-dock.is-stuck .tool-panel {
box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
border-color: #c7d2fe;
}
body.has-stuck-dock { }
.tool-panel {
background: rgba(255,255,255,.94);
backdrop-filter: blur(12px);
border: 1px solid var(--line);
border-radius: 16px;
padding: .75rem .8rem .7rem;
box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
transition: box-shadow .2s ease, border-color .2s ease;
}
@media (min-width: 640px) {
.tool-panel { padding: .85rem 1rem .8rem; }
}
.input-block { margin-bottom: .65rem; }
.input-row { position: relative; }
#text-input {
width: 100%;
border: 2px solid #1e293b;
border-radius: 12px;
padding: .7rem 2.6rem .7rem 2.4rem;
font-size: .95rem;
font-weight: 500;
background: #fff;
color: var(--text);
outline: none;
min-height: 2.75rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
#text-input:focus {
border-color: var(--indigo);
box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.input-pencil {
position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
color: #94a3b8; pointer-events: none; display: inline-flex;
}
#clear-btn {
position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem;
}
.tabs {
display: flex; flex-wrap: nowrap; gap: .4rem; align-items: center;
overflow-x: auto; padding-bottom: .15rem; margin: 0; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
border: 1px solid var(--line); background: #fff; border-radius: 999px;
padding: .4rem .75rem; font-size: .76rem; font-weight: 700; cursor: pointer; white-space: nowrap; min-height: 2.1rem;
color: var(--ink); transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tabs button:hover { border-color: var(--indigo); color: var(--indigo-deep); background: var(--indigo-soft); }
.tabs button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.style-list { display: flex; flex-direction: column; gap: .5rem; }
.style-row {
position: relative;
display: block;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: .55rem 5.6rem .55rem .7rem;
min-height: 3.35rem;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.style-row:hover { border-color: #94a3b8; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.style-row.is-fav-row { border-color: #f9a8d4; }
.style-row.is-copied { border-color: var(--indigo); background: #f8faff; }
.style-row-text {
margin: 0; border: 0; background: transparent; cursor: pointer;
font-size: clamp(.98rem, 2.4vw, 1.15rem); font-weight: 700; color: var(--ink);
line-height: 1.35; word-break: break-word; text-align: center; width: 100%;
padding: .35rem .2rem; font-family: inherit;
display: block;
}
.style-row-text:hover { color: var(--indigo-deep); }
.style-row-actions {
position: absolute;
right: .4rem;
top: 50%;
transform: translateY(-50%);
display: flex; align-items: center; gap: .15rem;
}
.row-btn {
width: 2.05rem; height: 2.05rem; border-radius: 999px; border: 1px solid transparent; background: transparent;
color: #94a3b8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.row-btn:hover { color: var(--indigo-deep); background: var(--indigo-soft); border-color: #c7d2fe; }
.row-btn.fav-btn.is-fav { color: #e11d48; }
.row-btn.copy-btn.is-on,
.style-row.is-copied .copy-btn { color: #059669; }
@media (max-width: 520px) {
.style-row {
padding: .55rem 5.2rem .55rem .5rem;
min-height: 3.1rem;
}
.style-row-text { font-size: 1rem; padding: .25rem .1rem; }
.row-btn { width: 1.85rem; height: 1.85rem; }
.style-row-actions { right: .25rem; gap: .05rem; }
#text-input {
padding: .62rem 2.4rem .62rem 2.2rem;
font-size: .9rem;
min-height: 2.55rem;
}
.tool-panel { padding: .65rem .65rem .6rem; border-radius: 14px; }
}
.load-more-wrap { text-align: center; margin: 1rem 0 .2rem; }
.load-more-wrap .btn { min-width: 11rem; }
.empty-state {
text-align: center; padding: 2rem 1rem; border: 1px dashed var(--line);
border-radius: var(--radius); background: var(--surface);
}
.badge {
display: inline-flex; align-items: center; font-size: .62rem; font-weight: 800; letter-spacing: .03em;
text-transform: uppercase; background: var(--pink-soft); color: var(--pink); border-radius: 999px; padding: .12rem .42rem;
} .sticky-bar { display: none !important; } .article-flow { padding: 1.75rem 0 3.5rem; }
.content-section { margin: 0 0 var(--space-section); }
.closing-note {
text-align: left;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 1.75rem 0 0;
margin-top: .25rem;
}
.closing-note h2 { color: var(--ink); }
.closing-note p {
color: var(--muted);
max-width: 42rem;
margin: 0;
font-size: var(--text-body);
line-height: 1.65;
}
.content-section h2 {
font-family: var(--font-display);
font-size: clamp(1.28rem, 2.4vw, 1.7rem);
margin: 0 0 .65rem; letter-spacing: -.015em; color: var(--ink); line-height: 1.2;
}
.content-section h3 {
font-family: var(--font-display);
font-size: 1.05rem;
letter-spacing: -.015em;
line-height: 1.3;
color: var(--ink);
}
.section-intro { margin: 0 0 var(--space-block); color: var(--muted); font-size: var(--text-body); line-height: 1.65; }
.intro-block h2 { margin-bottom: .85rem; }
.intro-block p { color: var(--muted); margin: 0 0 .85rem; font-size: var(--text-body); line-height: 1.65; }
.steps { display: grid; gap: .65rem; }
.step {
display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1rem;
}
.step-num {
width: 2rem; height: 2rem; border-radius: 8px;
display: grid; place-items: center; font-weight: 800; font-size: .85rem;
background: linear-gradient(135deg, var(--indigo), var(--indigo-deep)); color: #fff;
}
.step h3 { margin: 0 0 .25rem; font-size: 1rem; }
.step p { margin: 0; font-size: var(--text-small); color: var(--muted); line-height: 1.55; }
.about-grid, .popular-grid, .types-grid, .pillars, .problems, .tips-grid {
display: grid; gap: 1.15rem;
padding: 18px;
margin: -18px;
}
.platform-grid { display: flex; flex-direction: column; gap: 1.15rem; }
@media (min-width: 700px) {
.about-grid, .popular-grid, .types-grid, .tips-grid, .pillars, .problems {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 980px) {
.popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
padding: 1.35rem 1.2rem 1.25rem;
box-shadow: none;
transition: box-shadow .2s ease, border-color .2s ease;
}
.popular-grid .card,
.types-grid .card {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
}
.popular-grid .card > .example,
.types-grid .card > .example,
.popular-grid .card > .sample-row,
.types-grid .card > .sample-row {
margin-top: auto;
}
.card:hover {
z-index: 3;
border-color: #c7d2fe;
box-shadow:
0 0 0 1px rgba(79, 70, 229, .12),
0 0 14px rgba(79, 70, 229, .14);
}
.panel-dark .card {
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.12);
color: #e8eef4;
}
.panel-dark .card:hover {
z-index: 3;
background: rgba(255,255,255,.1);
border-color: rgba(165, 180, 252, .35);
box-shadow:
0 0 0 1px rgba(165, 180, 252, .14),
0 0 14px rgba(99, 102, 241, .2);
}
.panel-dark .card h3 { color: #fff; }
.panel-dark .card p { color: #c5d0dc; }
.card-icon {
width: auto; height: auto; border-radius: 0;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: .75rem;
background: transparent; color: var(--indigo);
box-shadow: none;
transition: transform .28s ease;
}
.card-icon svg {
width: 2rem; height: 2rem; display: block;
stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .12));
}
.card:hover .card-icon {
transform: none;
box-shadow: none;
} .card-icon.tone-a,
.card-icon.tone-spark,
.card-icon.tone-box,
.card-icon.tone-mono,
.card-icon.tone-pin,
.card-icon.tone-caps { background: transparent; color: #f59e0b; }
.card-icon.tone-b,
.card-icon.tone-copy,
.card-icon.tone-gem,
.card-icon.tone-moon,
.card-icon.tone-bold,
.card-icon.tone-math,
.card-icon.tone-ig { background: transparent; color: #4f46e5; }
.card-icon.tone-c,
.card-icon.tone-bubble,
.card-icon.tone-wa,
.card-icon.tone-small,
.card-icon.tone-script,
.card-icon.tone-italic { background: transparent; color: #0d9488; }
.card-icon.tone-d,
.card-icon.tone-cute,
.card-icon.tone-pen,
.card-icon.tone-gothic,
.card-icon.tone-game,
.card-icon.tone-fire,
.card-icon.tone-ff,
.card-icon.tone-fancy { background: transparent; color: #e11d48; }
.panel-dark .card-icon {
box-shadow: none;
filter: none;
}
.panel-dark .card-icon svg {
filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.card h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-family: var(--font-display); letter-spacing: -.02em; }
.card p { margin: 0; font-size: var(--text-small); color: var(--muted); line-height: 1.6; }
.example {
margin-top: .85rem; display: flex; gap: .5rem; align-items: center;
background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .6rem;
}
.panel-dark .example { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.08); }
.example code {
flex: 1; font-family: inherit; font-size: .95rem; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ink);
}
.panel-dark .example code { color: #fff; }
.example button, .sample-row button {
border: 1px solid var(--line); background: #fff; border-radius: 999px;
padding: .4rem .8rem; font-size: .75rem; font-weight: 800; cursor: pointer; color: var(--indigo-deep);
min-height: 2.1rem; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.example button:hover, .sample-row button:hover {
background: var(--indigo); color: #fff; border-color: var(--indigo);
}
.panel-dark .example button { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.sample-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.noscript-box {
margin: .75rem 0; padding: 1rem 1.1rem; border: 1px dashed #c7d2fe; border-radius: var(--radius-sm);
background: var(--indigo-soft); color: var(--ink-soft); font-size: var(--text-small);
}
.noscript-box p { margin: 0 0 .45rem; }
.noscript-box p:last-child { margin: 0; color: var(--muted); }
.platform-card {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 1.15rem;
overflow: hidden;
}
.platform-copy { min-width: 0; }
.platform-visual {
display: flex; justify-content: center; align-items: center;
perspective: 800px;
}
.platform-visual img {
width: min(100%, 280px);
border-radius: 22px;
filter: drop-shadow(0 22px 36px rgba(15, 23, 42, .22));
transition: transform .4s ease, filter .4s ease;
}
.platform-card:hover .platform-visual img {
transform: translateY(-10px) rotate(-2.5deg);
filter: drop-shadow(0 28px 42px rgba(79, 70, 229, .28));
}
.platform-card.is-flip:hover .platform-visual img {
transform: translateY(-10px) rotate(2.5deg);
}
@media (min-width: 700px) {
.platform-card {
grid-template-columns: 1.08fr .92fr;
gap: 1.6rem 2rem;
padding: 1.5rem 1.5rem 1.4rem;
}
.platform-card.is-flip .platform-copy { order: 2; }
.platform-card.is-flip .platform-visual { order: 1; }
.platform-visual img { width: min(100%, 300px); }
}
.platform-extra { margin-top: 0; }
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal, .card, .card-icon, .platform-visual img {
opacity: 1 !important; transform: none !important; transition: none !important;
}
}
.unicode-list { display: grid; gap: .75rem; }
.unicode-list article {
display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
}
.unicode-list p { margin: 0; }
.faq details {
border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: .9rem 1.05rem; margin-bottom: .55rem; background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.faq details[open] { border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(79, 70, 229, .06); }
.faq summary {
cursor: pointer; font-weight: 700; color: var(--ink);
font-family: var(--font-display); font-size: 1rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: .65rem 0 0; color: var(--muted); font-size: var(--text-body); line-height: 1.6; } .social-sim { padding: 0; background: transparent; border: 0; box-shadow: none; }
.social-sim-head { margin: 0 0 1rem; max-width: 40rem; }
.social-sim-eyebrow {
display: inline-flex; margin: 0 0 .55rem; padding: .28rem .7rem; border-radius: 999px;
background: var(--indigo-soft); border: 1px solid #c7d2fe;
color: var(--indigo-deep); font-size: .72rem; font-weight: 800;
}
.social-sim h2 { color: var(--ink); margin: 0 0 .45rem; }
.social-sim-head > p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.social-tabs {
display: flex; gap: .4rem; justify-content: center; flex-wrap: nowrap; overflow-x: auto;
margin: 0 0 1.25rem; padding-bottom: .2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.social-tabs::-webkit-scrollbar { display: none; }
.social-tab {
flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--ink);
border-radius: 999px; padding: .5rem .95rem; font-size: .78rem; font-weight: 700; cursor: pointer;
min-height: 2.4rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.social-tab.is-active { color: #fff; }
.social-tab.is-active.is-ig {
background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4); border-color: transparent;
box-shadow: 0 8px 18px rgba(221, 42, 123, .22);
}
.social-tab.is-active.is-fb { background: #1877f2; border-color: transparent; box-shadow: 0 8px 18px rgba(24, 119, 242, .22); }
.social-tab.is-active.is-wa { background: #25d366; color: #053d22; border-color: transparent; box-shadow: 0 8px 18px rgba(37, 211, 102, .22); }
.social-tab.is-active.is-ff { background: #ff9f1a; color: #1a0b00; border-color: transparent; box-shadow: 0 8px 18px rgba(255, 159, 26, .22); }
.phone-wrap {
display: flex; justify-content: center; width: 100%;
padding: .35rem 12px 1rem;
}
.phone-chassis {
width: min(100%, 340px);
height: min(82vh, 720px);
background: linear-gradient(160deg, #d7d7de 0%, #6a6a72 12%, #2c2c30 40%, #0c0c0e 100%);
border-radius: 48px;
padding: 12px;
border: 1px solid #8e8e96;
position: relative;
overflow: visible;
display: flex;
flex-direction: column;
box-shadow:
0 0 0 1.5px rgba(255,255,255,.22),
inset 0 1px 1px rgba(255,255,255,.35),
inset 0 -4px 10px rgba(0,0,0,.5),
0 28px 56px rgba(15, 23, 42, .32);
}
@media (min-width: 700px) {
.phone-chassis {
width: min(100%, 360px);
height: min(84vh, 760px);
border-radius: 52px;
padding: 13px;
}
}
.phone-btn {
position: absolute; background: linear-gradient(90deg, #7a7a82, #4a4a50); z-index: 2;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-silent { left: -3px; top: 100px; width: 3px; height: 22px; border-radius: 2px 0 0 2px; }
.btn-vol-up { left: -3px; top: 140px; width: 3px; height: 36px; border-radius: 2px 0 0 2px; }
.btn-vol-down { left: -3px; top: 184px; width: 3px; height: 36px; border-radius: 2px 0 0 2px; }
.btn-power { right: -3px; top: 168px; width: 3px; height: 64px; border-radius: 0 2px 2px 0; }
.phone-island {
position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
width: 108px; height: 28px; background: #000; border-radius: 18px;
display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
}
.phone-lens {
width: 10px; height: 10px; border-radius: 999px;
background: radial-gradient(circle at 35% 35%, #3b82f6, #0f172a 60%);
box-shadow: 0 0 0 2px #111;
}
.phone-screen {
background: #000; border-radius: 38px; overflow: hidden; min-height: 0; flex: 1;
color: #0f172a; padding-top: 1.7rem; display: flex; flex-direction: column; position: relative;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone-status {
display: flex; justify-content: space-between; align-items: center;
padding: .15rem 1.15rem .2rem; font-size: .68rem; font-weight: 700; color: #0f172a; background: #fff;
flex: 0 0 auto; z-index: 2;
}
.phone-status-right { display: inline-flex; align-items: center; gap: .28rem; }
.phone-status-right i { display: block; background: #0f172a; }
.phone-status-right .sig {
width: 13px; height: 10px;
background:
linear-gradient(#0f172a,#0f172a) 0 100%/2px 30%,
linear-gradient(#0f172a,#0f172a) 3.5px 100%/2px 50%,
linear-gradient(#0f172a,#0f172a) 7px 100%/2px 70%,
linear-gradient(#0f172a,#0f172a) 10.5px 100%/2px 100%;
background-repeat: no-repeat;
}
.phone-status-right .wifi {
width: 12px; height: 10px; border: 2px solid #0f172a; border-top: 0; border-radius: 0 0 12px 12px;
background: transparent; transform: rotate(180deg) translateY(-1px);
}
.phone-status-right .bat {
width: 18px; height: 9px; border: 1.5px solid #0f172a; border-radius: 2px; background: transparent; position: relative;
}
.phone-status-right .bat::after {
content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; background: #0f172a; border-radius: 0 1px 1px 0;
}
.phone-status-right .bat b {
display: block; position: absolute; inset: 1.5px; width: 70%; background: #0f172a; border-radius: 1px;
}
.phone-app-area { flex: 1; display: flex; flex-direction: column; background: #fff; min-height: 0; overflow: hidden; }
.phone-homebar {
width: 6.2rem; height: 4px; background: #cbd5e1; border-radius: 999px;
margin: .25rem auto .45rem; flex: 0 0 auto; position: relative; z-index: 3;
}
.wa-panel ~ .phone-homebar,
.phone-screen:has(.wa-panel.is-active) .phone-homebar,
.phone-screen:has(.ff-panel.is-active) .phone-homebar { background: rgba(255,255,255,.35); }
.sim-panel { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.sim-panel.is-active { display: flex; }
.sim-panel[hidden] { display: none !important; } .ig-topbar {
display: flex; align-items: center; justify-content: space-between;
padding: .45rem .75rem; border-bottom: 1px solid #efefef; flex: 0 0 auto; background: #fff;
}
.ig-back { font-size: 1.35rem; line-height: 1; color: #0f172a; width: 1.2rem; }
.ig-user { display: flex; align-items: center; gap: .28rem; font-size: .92rem; }
.ig-user strong { font-weight: 800; color: #0f172a; }
.ig-user em {
width: 14px; height: 14px; border-radius: 999px; background: #3897f0; color: #fff;
font-style: normal; font-size: .55rem; display: grid; place-items: center; font-weight: 900;
}
.ig-icons { display: flex; gap: .85rem; color: #0f172a; font-size: 1.05rem; font-weight: 700; }
.ig-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .85rem .85rem 0; }
.ig-profile-row { display: flex; align-items: center; gap: .9rem; margin-bottom: .85rem; }
.ig-ring {
width: 5.35rem; height: 5.35rem; border-radius: 999px; padding: 2.5px; flex: 0 0 auto;
background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}
.ig-avatar-img {
width: 100%; height: 100%; object-fit: cover; border-radius: 999px; border: 2.5px solid #fff; display: block;
}
.ig-stats { display: flex; flex: 1; justify-content: space-around; text-align: center; }
.ig-stats b { display: block; font-size: .92rem; color: #0f172a; font-weight: 800; }
.ig-stats span { font-size: .62rem; color: #737373; }
.ig-identity { margin-bottom: .75rem; }
.ig-displayname { margin: 0; font-weight: 800; font-size: .82rem; color: #0f172a; }
.ig-category { margin: .1rem 0 .35rem; font-size: .72rem; color: #737373; }
.ig-bio-line {
margin: 0 0 .3rem; font-size: .8rem; line-height: 1.4; color: #0f172a; font-weight: 600;
word-break: break-word;
}
.ig-bio-extra { margin: 0; font-size: .74rem; color: #0f172a; line-height: 1.45; }
.ig-link { display: inline-block; margin-top: .3rem; color: #00376b; font-size: .74rem; font-weight: 700; text-decoration: none; }
.ig-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; margin: .15rem 0 .9rem; }
.ig-actions button {
border: 0; background: #efefef; border-radius: .55rem; padding: .48rem .4rem;
font-size: .72rem; font-weight: 700; color: #0f172a; cursor: default;
}
.ig-actions .ig-more { width: 2rem; padding: 0; }
.ig-highlights {
display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .55rem; margin-bottom: .35rem;
scrollbar-width: none;
}
.ig-highlights::-webkit-scrollbar { display: none; }
.hl { flex: 0 0 auto; text-align: center; width: 4rem; }
.hl-ring {
width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center;
border: 1.5px solid #dbdbdb; margin: 0 auto .28rem; overflow: hidden; background: #fafafa;
font-size: 1.1rem; color: #0f172a;
}
.hl-ring img { width: 100%; height: 100%; object-fit: cover; }
.hl-ring.add { border-style: dashed; color: #0f172a; font-weight: 700; }
.hl-ring.tone-a { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.hl-ring.tone-b { background: linear-gradient(135deg, #fbcfe8, #ec4899); }
.hl-ring.tone-c { background: linear-gradient(135deg, #c7d2fe, #6366f1); }
.hl span:last-child { font-size: .62rem; color: #0f172a; }
.ig-feed-tabs {
display: flex; border-top: 1px solid #efefef; color: #8e8e8e; margin: 0 -.85rem;
}
.ig-feed-tabs span { flex: 1; text-align: center; padding: .55rem 0; font-size: .95rem; }
.ig-feed-tabs .on { color: #0f172a; border-bottom: 1.5px solid #0f172a; }
.ig-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -.85rem;
}
.ig-grid > div { aspect-ratio: 1; }
.ig-grid .g1 { background: linear-gradient(145deg, #fecdd3, #fb7185); }
.ig-grid .g2 { background: linear-gradient(145deg, #c7d2fe, #818cf8); }
.ig-grid .g3 { background: linear-gradient(145deg, #fde68a, #f59e0b); }
.ig-grid .g4 { background: linear-gradient(145deg, #bbf7d0, #34d399); }
.ig-grid .g5 { background: linear-gradient(145deg, #e9d5ff, #a855f7); }
.ig-grid .g6 { background: linear-gradient(145deg, #bae6fd, #0ea5e9); }
.ig-tabbar {
display: flex; justify-content: space-around; align-items: center;
border-top: 1px solid #efefef; padding: .4rem 0 .15rem; background: #fff; flex: 0 0 auto;
font-size: 1.15rem; color: #0f172a;
}
.ig-tabbar .create {
width: 1.55rem; height: 1.55rem; border: 1.5px solid #0f172a; border-radius: .4rem;
display: grid; place-items: center; font-size: .95rem; font-weight: 700;
}
.ig-tabbar .me img {
width: 1.45rem; height: 1.45rem; border-radius: 999px; object-fit: cover; display: block;
box-shadow: 0 0 0 1.5px #0f172a;
} .fb-top {
display: flex; align-items: center; justify-content: space-between;
padding: .55rem .85rem; background: #fff; border-bottom: 1px solid #e4e6eb; flex: 0 0 auto;
}
.fb-top strong {
font-family: var(--font-display); font-size: 1.35rem; color: #1877f2; letter-spacing: -.03em;
}
.fb-top-icons { display: flex; gap: .45rem; }
.fb-top-icons i {
width: 2rem; height: 2rem; border-radius: 999px; background: #e4e6eb; display: block; position: relative;
}
.fb-top-icons i:first-child::before { content: "⌕"; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; }
.fb-top-icons i:last-child::before { content: "💬"; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: .85rem; }
.fb-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #f0f2f5; }
.fb-cover {
height: 8.5rem; position: relative;
background:
linear-gradient(120deg, rgba(24,119,242,.35), rgba(99,102,241,.45)),
linear-gradient(160deg, #1e3a8a, #312e81 55%, #0f172a);
}
.fb-avatar-wrap { position: absolute; left: 50%; bottom: -2.6rem; transform: translateX(-50%); }
.fb-avatar {
width: 5.5rem; height: 5.5rem; border-radius: 999px; border: 4px solid #fff; background: #e2e8f0;
overflow: hidden; box-shadow: 0 6px 16px rgba(15, 23, 42, .2);
}
.fb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-cam {
position: absolute; right: 2px; bottom: 4px; width: 1.45rem; height: 1.45rem; border-radius: 999px;
background: #e4e6eb; border: 1px solid #fff; display: grid; place-items: center; font-size: .65rem;
}
.fb-pad { padding: 3.1rem .9rem 1rem; text-align: center; background: #fff; }
.fb-displayname { margin: 0; font-size: 1.2rem; font-weight: 800; color: #050505; }
.fb-friends { margin: .2rem 0 .55rem; font-size: .74rem; color: #65676b; }
.fb-friends span { color: #65676b; }
.fb-about {
margin: 0 0 .85rem; font-size: .86rem; font-weight: 700; color: #050505;
line-height: 1.4; word-break: break-word;
}
.fb-actions { display: flex; gap: .35rem; margin-bottom: .85rem; }
.fb-actions button {
border: 0; background: #e4e6eb; border-radius: .45rem; padding: .55rem .4rem;
font-size: .7rem; font-weight: 700; color: #050505; cursor: default; flex: 1;
}
.fb-actions .primary { background: #1877f2; color: #fff; flex: 1.2; }
.fb-actions .more { flex: 0 0 2.2rem; }
.fb-pills {
display: flex; gap: .15rem; border-top: 1px solid #e4e6eb; margin: 0 -.9rem; padding: 0 .4rem;
}
.fb-pills span {
flex: 1; text-align: center; padding: .7rem .2rem; font-size: .72rem; font-weight: 700; color: #65676b;
}
.fb-pills .on { color: #1877f2; box-shadow: inset 0 -3px 0 #1877f2; }
.fb-intro {
list-style: none; margin: .75rem 0 0; padding: .75rem 0 0; border-top: 1px solid #e4e6eb; text-align: left;
}
.fb-intro li {
display: flex; gap: .55rem; align-items: flex-start; font-size: .74rem; color: #050505; margin: 0 0 .55rem;
}
.fb-intro i { font-style: normal; width: 1.1rem; text-align: center; }
.fb-intro b { font-weight: 700; } .wa-panel { background: #0b141a !important; color: #e9edef; }
.phone-screen:has(.wa-panel.is-active) .phone-status {
background: #1f2c34; color: #e9edef;
}
.phone-screen:has(.wa-panel.is-active) .phone-status-right .sig,
.phone-screen:has(.wa-panel.is-active) .phone-status-right .bat,
.phone-screen:has(.wa-panel.is-active) .phone-status-right .bat::after,
.phone-screen:has(.wa-panel.is-active) .phone-status-right .bat b {
background: #e9edef;
border-color: #e9edef;
}
.phone-screen:has(.wa-panel.is-active) .phone-status-right .wifi { border-color: #e9edef; }
.phone-screen:has(.wa-panel.is-active) .phone-status-right .sig {
background:
linear-gradient(#e9edef,#e9edef) 0 100%/2px 30%,
linear-gradient(#e9edef,#e9edef) 3.5px 100%/2px 50%,
linear-gradient(#e9edef,#e9edef) 7px 100%/2px 70%,
linear-gradient(#e9edef,#e9edef) 10.5px 100%/2px 100%;
background-repeat: no-repeat;
}
.wa-header {
background: #1f2c34; padding: .45rem .65rem .5rem; display: flex; justify-content: space-between; align-items: center;
flex: 0 0 auto;
}
.wa-peer { display: flex; gap: .45rem; align-items: center; min-width: 0; }
.wa-back { font-size: 1.35rem; color: #00a884; width: 1rem; line-height: 1; }
.wa-avatar {
width: 2.25rem; height: 2.25rem; border-radius: 999px; overflow: hidden; background: #025144; flex: 0 0 auto;
}
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-peer strong { display: block; font-size: .82rem; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-peer span { font-size: .62rem; color: #8696a0; font-weight: 500; }
.wa-tools { display: flex; gap: .7rem; align-items: center; }
.wa-tools span {
width: 1.05rem; height: 1.05rem; display: block; position: relative;
}
.wa-tools span:nth-child(1)::before { content: "📹"; font-size: .85rem; }
.wa-tools span:nth-child(2)::before { content: "📞"; font-size: .85rem; }
.wa-tools span:nth-child(3)::before { content: "⋮"; color: #e9edef; font-size: 1rem; font-weight: 700; }
.wa-body {
flex: 1; min-height: 0; overflow-y: auto; padding: .75rem .7rem 1rem; display: flex; flex-direction: column; gap: .45rem;
background-color: #0b141a;
background-image:
radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(180deg, rgba(7, 94, 84, .12), transparent 40%);
background-size: 14px 14px, auto;
}
.wa-day {
align-self: center; background: #182229; color: #8696a0; font-size: .58rem; font-weight: 700;
letter-spacing: .06em; padding: .28rem .55rem; border-radius: .45rem; margin-bottom: .25rem;
}
.wa-msg {
max-width: 82%; padding: .45rem .55rem .28rem; border-radius: .55rem; font-size: .78rem; line-height: 1.35;
position: relative;
}
.wa-msg.in {
background: #202c33; align-self: flex-start; border-top-left-radius: .15rem; color: #e9edef;
}
.wa-msg.out {
background: #005c4b; align-self: flex-end; border-top-right-radius: .15rem; color: #e9edef;
}
.wa-fancy { margin: 0 .1rem .15rem 0; font-weight: 700; color: #fff; word-break: break-word; font-size: .86rem; }
.wa-time { display: block; text-align: right; font-size: .58rem; color: rgba(233,237,239,.7); margin-top: .15rem; }
.wa-time b { color: #53bdeb; font-weight: 700; }
.wa-composer {
display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem .55rem; background: #1f2c34; flex: 0 0 auto;
}
.wa-emoji { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; color: #8696a0; font-size: 1.2rem; }
.wa-field {
flex: 1; background: #2a3942; color: #8696a0; border-radius: 1.4rem; padding: .55rem .85rem; font-size: .78rem;
}
.wa-cam, .wa-mic {
width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center; color: #8696a0;
}
.wa-cam::before { content: "📎"; font-size: .95rem; }
.wa-mic {
background: #00a884; color: #fff;
}
.wa-mic::before { content: "🎤"; font-size: .85rem; } .ff-panel {
background: linear-gradient(180deg, #1a0a00 0%, #0a1628 42%, #020617 100%) !important;
color: #fde68a; padding: 0; gap: 0;
}
.phone-screen:has(.ff-panel.is-active) .phone-status {
background: #120800; color: #fde68a;
}
.phone-screen:has(.ff-panel.is-active) .phone-status-right .sig,
.phone-screen:has(.ff-panel.is-active) .phone-status-right .bat,
.phone-screen:has(.ff-panel.is-active) .phone-status-right .bat::after,
.phone-screen:has(.ff-panel.is-active) .phone-status-right .bat b { background: #fde68a; border-color: #fde68a; }
.phone-screen:has(.ff-panel.is-active) .phone-status-right .wifi { border-color: #fde68a; }
.phone-screen:has(.ff-panel.is-active) .phone-status-right .sig {
background:
linear-gradient(#fde68a,#fde68a) 0 100%/2px 30%,
linear-gradient(#fde68a,#fde68a) 3.5px 100%/2px 50%,
linear-gradient(#fde68a,#fde68a) 7px 100%/2px 70%,
linear-gradient(#fde68a,#fde68a) 10.5px 100%/2px 100%;
background-repeat: no-repeat;
}
.ff-top {
display: flex; align-items: center; justify-content: space-between;
padding: .55rem .85rem; background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(251,191,36,.25);
flex: 0 0 auto;
}
.ff-top strong { font-size: .78rem; letter-spacing: .14em; color: #fbbf24; }
.ff-back, .ff-gear { color: #fbbf24; font-size: 1.1rem; }
.ff-hero {
position: relative; text-align: center; padding: 1rem .9rem 1.1rem; margin: .75rem .75rem 0;
border-radius: 1rem; overflow: hidden;
background: linear-gradient(160deg, rgba(245,158,11,.18), rgba(2,6,23,.92));
border: 1px solid rgba(251,191,36,.45);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.35);
}
.ff-banner {
position: absolute; inset: 0 0 45% 0;
background:
linear-gradient(90deg, transparent, rgba(251,191,36,.15), transparent),
linear-gradient(180deg, #7c2d12, transparent);
opacity: .85; pointer-events: none;
}
.ff-avatar-frame {
position: relative; width: 4.75rem; height: 4.75rem; margin: .35rem auto .65rem;
border-radius: 1rem; padding: 3px;
background: linear-gradient(145deg, #fbbf24, #b45309, #f59e0b);
box-shadow: 0 8px 18px rgba(245,158,11,.35);
}
.ff-avatar-frame img {
width: 100%; height: 100%; object-fit: cover; border-radius: .8rem; display: block; background: #111;
}
.ff-lvl {
position: absolute; right: -.35rem; bottom: -.35rem;
min-width: 1.6rem; height: 1.6rem; padding: 0 .28rem; border-radius: .4rem;
background: #f59e0b; color: #111; font-size: .68rem; font-weight: 900;
display: grid; place-items: center; border: 2px solid #111;
}
.ff-nick {
position: relative; margin: .2rem 0 .35rem; font-weight: 900; font-size: 1.05rem; color: #fff;
word-break: break-word; text-shadow: 0 2px 8px rgba(245,158,11,.45); line-height: 1.25;
}
.ff-id { position: relative; font-size: .65rem; color: rgba(253,230,138,.7); margin-bottom: .55rem; }
.ff-rank {
position: relative; display: inline-flex; align-items: center; gap: .25rem;
font-size: .68rem; font-weight: 900; padding: .28rem .65rem; border-radius: 999px;
background: rgba(245,158,11,.16); border: 1px solid rgba(251,191,36,.45); color: #fcd34d;
}
.ff-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem;
margin: .85rem .75rem 0; padding: 0;
}
.ff-stats > div {
background: rgba(15,23,42,.75); border: 1px solid rgba(251,191,36,.22); border-radius: .65rem;
padding: .55rem .35rem; text-align: center;
}
.ff-stats span { display: block; font-size: .55rem; letter-spacing: .08em; color: #94a3b8; margin-bottom: .2rem; }
.ff-stats b { color: #fcd34d; font-size: .85rem; }
.ff-guild {
display: flex; align-items: center; gap: .65rem; margin: .85rem .75rem 1rem;
padding: .7rem .8rem; border-radius: .75rem;
background: rgba(2,6,23,.7); border: 1px solid rgba(251,191,36,.28);
}
.ff-guild-ico { font-size: 1.25rem; }
.ff-guild strong { display: block; color: #fde68a; font-size: .82rem; }
.ff-guild em { font-style: normal; font-size: .65rem; color: #94a3b8; }
.sim-external-actions {
display: flex; justify-content: center; margin: .15rem 0 0; padding: 0 1rem;
}
.sim-copy {
width: min(100%, 360px); border: 0; cursor: pointer; font-weight: 800; font-size: .82rem;
padding: .85rem 1.1rem; color: #fff; border-radius: .95rem;
background: linear-gradient(90deg, #db2777, #7c3aed);
box-shadow: 0 10px 22px rgba(124, 58, 237, .25);
}
.sim-copy[hidden] { display: none !important; }
.sim-copy.fb { background: #1877f2; box-shadow: 0 10px 22px rgba(24, 119, 242, .25); }
.sim-copy.wa { background: #25d366; color: #053d22; box-shadow: 0 10px 22px rgba(37, 211, 102, .25); }
.sim-copy.ff {
background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #1a0b00;
text-transform: uppercase; letter-spacing: .04em;
box-shadow: 0 10px 22px rgba(245, 158, 11, .25);
}
.social-sim-cta { text-align: center; margin: 1rem 0 0; }
.btn-sim-cta {
display: inline-flex; align-items: center; gap: .45rem; padding: .65rem 1.1rem; border-radius: 999px;
background: var(--indigo-soft); border: 1px solid #c7d2fe; color: var(--indigo-deep);
font-weight: 800; font-size: .82rem; text-decoration: none;
}
.btn-sim-cta:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }
@media (max-width: 520px) {
.phone-chassis {
width: min(100%, 318px);
height: min(78vh, 680px);
}
.ig-grid .g4, .ig-grid .g5, .ig-grid .g6 { display: none; }
} .preview-modal {
position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .8);
backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.preview-modal[hidden] { display: none !important; }
.preview-modal-card {
background: #fff; border-radius: 1.5rem; width: min(100%, 920px); max-height: 92vh;
overflow: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem;
box-shadow: 0 30px 60px rgba(0,0,0,.35); position: relative; border: 1px solid #e2e8f0;
}
.preview-modal-side { order: 2; }
.preview-modal-meta { order: 1; }
@media (min-width: 860px) {
.preview-modal-card {
display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding: 1.75rem;
}
.preview-modal-side { order: 0; }
.preview-modal-meta { order: 0; }
}
.preview-modal-close {
position: absolute; top: .85rem; right: .85rem; width: 2.4rem; height: 2.4rem;
border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; z-index: 2;
}
.preview-modal-meta .badge-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .55rem; }
.preview-modal-meta .badge-row .badge { background: #e0e7ff; color: #4338ca; }
.preview-modal-meta .cat { font-size: .75rem; color: #64748b; font-weight: 700; }
.preview-modal-meta h3 { margin: 0 0 .4rem; font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.preview-modal-meta > p { margin: 0 0 1.1rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.modal-tab-label {
display: block; font-size: .72rem; font-weight: 800; color: #64748b;
text-transform: uppercase; letter-spacing: .06em; margin-bottom: .45rem;
}
.modal-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .35rem; }
.modal-tab {
border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: .85rem;
padding: .55rem .8rem; font-size: .75rem; font-weight: 800; cursor: pointer;
}
.modal-tab.is-active.is-ig {
background: linear-gradient(90deg, #ec4899, #4f46e5); color: #fff; border-color: transparent;
box-shadow: 0 8px 16px rgba(79, 70, 229, .22);
}
.modal-tab.is-active.is-wa { background: #059669; color: #fff; border-color: transparent; }
.modal-tab.is-active.is-fb { background: #2563eb; color: #fff; border-color: transparent; }
.modal-tab.is-active.is-ff { background: #f59e0b; color: #0f172a; border-color: transparent; }
.preview-modal-actions {
display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1.15rem;
padding-top: 1.15rem; border-top: 1px solid #f1f5f9;
}
.preview-modal-actions .btn-block { grid-column: 1 / -1; }
#modal-fav.is-fav {
background: #fffbeb; color: #b45309; border-color: #fde68a;
}
.modal-phone .phone-chassis {
width: min(100%, 300px);
height: min(72vh, 640px);
margin-inline: auto;
}
.modal-phone .phone-screen { min-height: 0; }
.modal-app-area .sim-panel { min-height: 0; }
.modal-phone .ig-grid,
.modal-phone .ig-highlights { display: none; }
.modal-phone .ff-panel { padding-bottom: .75rem; } .toast {
position: fixed; right: 1rem; bottom: calc(1rem + var(--sticky-h)); z-index: 70;
background: var(--ink); color: #fff; border-radius: 12px; padding: .85rem 1rem;
max-width: min(92vw, 320px); box-shadow: var(--shadow);
}
.toast strong { display: block; font-size: .85rem; margin-bottom: .2rem; }
.toast span {
display: block; font-size: .75rem; color: #cbd5e1; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.to-top {
position: fixed; right: 1rem; bottom: calc(1rem + var(--sticky-h)); z-index: 55;
width: 2.6rem; height: 2.6rem; border-radius: 999px; border: 0;
background: var(--ink); color: #fff; cursor: pointer; box-shadow: var(--shadow);
}
body:not(.has-sticky-bar) .toast,
body:not(.has-sticky-bar) .to-top { bottom: 1rem; }
@media (max-width: 640px) {
.tools-row { flex-direction: column; align-items: stretch; }
.tool-actions { justify-content: stretch; }
.tool-actions .btn { flex: 1; }
.preview-text.size-lg { font-size: 1.2rem; }
} .ld-wp-home{max-width:100%;width:100%;margin:0 auto;overflow-x:clip;box-sizing:border-box;-webkit-text-size-adjust:100%}
.ld-wp-home *,.ld-wp-home *::before,.ld-wp-home *::after{box-sizing:border-box}
.ld-wp-home img,.ld-wp-home svg,.ld-wp-home video{max-width:100%;height:auto}
.ld-wp-home .wrap{max-width:min(1120px,100%);margin-inline:auto;padding-inline:12px}
html:has(.ld-wp-home),body:has(.ld-wp-home){overflow-x:clip}