:root{color-scheme:dark;--bg:#090b12;--panel:#11141e;--panel2:#151925;--line:#262b3a;--muted:#8e95aa;--text:#f5f6fc;--purple:#9d7bff;--cyan:#69e5df}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;overflow-x:hidden}.ambient{position:absolute;z-index:-1;filter:blur(95px);opacity:.17;border-radius:50%;pointer-events:none}.ambient-a{width:350px;height:350px;background:#6c45e9;top:60px;left:-130px}.ambient-b{width:300px;height:300px;background:#147c96;top:450px;right:-140px}.topbar{height:76px;max-width:1120px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0b}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800;letter-spacing:-.7px;font-size:19px;line-height:1.05}.brand-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#9e7cff,#6d58d9);font-size:23px;position:relative;box-shadow:0 5px 25px #7b5be533}.brand-icon span{font-size:10px;position:absolute;right:5px;top:4px;color:#d9f9ff}.brand-light{font-weight:500;color:#b4b8c9}.brand small{display:block;margin-top:5px;font-size:8px;letter-spacing:1.9px;color:var(--muted);font-weight:700}.topbar nav{display:flex;gap:28px}.topbar nav a,footer>a:last-child{color:#b0b5c7;text-decoration:none;font-size:13px}.topbar nav a:hover,footer a:hover{color:white}.version{font-size:10px;letter-spacing:1.2px;color:#aab0c3;border:1px solid var(--line);padding:7px 10px;border-radius:30px}.version i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6de4b2;margin-right:6px;box-shadow:0 0 10px #6de4b2}main{max-width:1000px;margin:auto;padding:0 24px}.hero{padding:78px 0 54px;max-width:720px;margin:auto}.eyebrow{font-size:10px;letter-spacing:2px;color:#a99aff;font-weight:800}.eyebrow span{color:var(--cyan);font-size:14px;margin-right:7px}h1{font-size:clamp(42px,7vw,70px);line-height:1.02;letter-spacing:-3.5px;margin:17px 0 18px;font-weight:850}h1 span{background:linear-gradient(100deg,#a58aff 10%,#75e3df 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero>p{max-width:560px;color:#a0a6b9;font-size:15px;margin:0 0 30px}.input-panel{border:1px solid #39334f;background:linear-gradient(145deg,#151725ed,#10131ced);border-radius:17px;padding:19px 20px 14px;box-shadow:0 18px 65px #0003}.input-panel label{font-size:9px;letter-spacing:1.7px;color:#a2a8bc;font-weight:800}.input-panel textarea{display:block;width:100%;resize:vertical;min-height:65px;max-height:180px;background:transparent;border:0;outline:0;color:white;font:600 23px/1.5 inherit;letter-spacing:-.5px;padding:12px 0 10px;font-family:inherit}.input-panel textarea::placeholder{color:#656b7d}.input-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff0e;padding-top:12px;color:#737b91;font-size:11px}.input-bottom>div{display:flex;gap:8px;align-items:center}.button,button,select{font:inherit;cursor:pointer}button{transition:transform .15s,border-color .15s,background .15s}button:active{transform:scale(.98)}.text-button{border:0;background:transparent;color:#9ca3b6;font-size:12px;padding:8px}.primary{background:linear-gradient(110deg,#9c7aff,#7d6aeb);border:0;color:#fff;font-weight:750;border-radius:9px;padding:11px 15px;box-shadow:0 5px 18px #8468f32b}.primary:hover{filter:brightness(1.1)}.primary.small{font-size:11px;padding:8px 11px}.quick-tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px}.quick-tags>span{font-size:9px;letter-spacing:1px;color:#687087;font-weight:800}.quick-tags button{background:#121520;border:1px solid #242838;border-radius:30px;padding:7px 11px;color:#aab0c3;font-size:11px}.quick-tags button:hover{border-color:#8f79e8;color:white}.section{padding:36px 0 48px;border-top:1px solid #ffffff0d}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}.section-heading h2{font-size:27px;letter-spacing:-1px;margin:7px 0 4px}.section-heading p{font-size:12px;color:var(--muted);margin:0}.count-pill{font-size:10px;letter-spacing:0;font-weight:600;color:#b8aaff;border:1px solid #4b3d73;background:#201b32;padding:4px 8px;border-radius:30px;vertical-align:middle;white-space:nowrap}.outline{border:1px solid #34394b;background:#141722;color:#d6d9e5;padding:10px 13px;border-radius:9px;font-size:11px;font-weight:700;white-space:nowrap}.outline:hover{border-color:#8e79e7;background:#1b1b2b}.filter-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.filter{border:1px solid #252a39;background:#10131c;color:#9299ad;border-radius:8px;padding:8px 13px;font-size:11px}.filter.active{background:#28213d;border-color:#65529d;color:#d8ccff}.style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.style-card{min-width:0;background:linear-gradient(135deg,#131621,#10131b);border:1px solid #252a39;border-radius:12px;padding:14px 15px;display:flex;align-items:center;gap:12px}.style-card:hover{border-color:#4a426a}.style-copy{min-width:0;flex:1}.style-name{font-size:10px;color:#8e95aa;margin-bottom:6px}.style-result{font-size:17px;line-height:1.4;overflow-wrap:anywhere;word-break:break-word;color:#f2f0ff;min-height:24px}.copy-btn{flex-shrink:0;width:35px;height:35px;border-radius:9px;border:1px solid #30364a;background:#1a1e2a;color:#bdb5ff;font-size:16px}.copy-btn:hover{background:#302747;border-color:#8a75d8}.font-section{padding-top:42px}.font-tools{display:flex;gap:10px;margin-bottom:17px}.search-box{display:flex;align-items:center;gap:9px;background:#11141e;border:1px solid #2a2e3e;border-radius:10px;padding:0 13px;flex:1;min-width:0}.search-box span{font-size:24px;color:#858ba0}.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:white;padding:12px 0;font:12px inherit;font-family:inherit}.search-box input::placeholder{color:#697187}.font-tools select{background:#11141e;border:1px solid #2a2e3e;border-radius:10px;padding:0 12px;color:#c5cada;font-size:11px;max-width:150px}.font-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.font-card{border:1px solid #252a39;background:#11141d;border-radius:12px;padding:14px;min-width:0}.font-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}.font-name{font-size:11px;color:#aab1c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-badge{font-size:8px;color:#7c849b;border:1px solid #2c3244;padding:3px 6px;border-radius:5px;flex-shrink:0}.font-sample{font-size:24px;line-height:1.4;min-height:42px;overflow-wrap:anywhere;word-break:break-word;color:#f7f7ff}.font-card-bottom{display:flex;justify-content:flex-end;margin-top:10px}.font-card-bottom button{font-size:10px;background:transparent;border:0;color:#a89aff;padding:5px}.font-card-bottom button:hover{color:#fff}.load-more{display:block;margin:20px auto 0;min-width:180px}.font-note{font-size:11px;color:#777f95;line-height:1.7;margin-top:19px}.tip-card{display:flex;gap:14px;border:1px solid #2a2941;background:linear-gradient(110deg,#171526,#111720);border-radius:14px;padding:18px;margin:8px 0 60px}.tip-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#29213f;color:#b8a2ff}.tip-card h3{font-size:13px;margin:0 0 5px}.tip-card p{font-size:11px;color:#969db1;margin:0;line-height:1.8}footer{border-top:1px solid #ffffff0c;max-width:1120px;margin:auto;padding:23px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#697187;font-size:10px}.footer-brand{font-size:15px}.footer-brand .brand-icon{width:29px;height:29px;font-size:17px;border-radius:9px}.footer-brand .brand-icon span{font-size:8px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e8e4ff;color:#17132a;padding:11px 17px;border-radius:10px;font-size:12px;font-weight:800;box-shadow:0 10px 35px #0008;transition:.2s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}.hidden{display:none!important}.empty{color:#777f95;text-align:center;padding:30px;font-size:12px}
@media(max-width:650px){.topbar{height:66px;padding:0 17px}.topbar nav{gap:13px}.topbar nav a{font-size:11px}.version{display:none}main{padding:0 17px}.hero{padding:57px 0 40px}h1{letter-spacing:-2.3px}.hero>p{font-size:13px}.input-panel{padding:16px 14px 12px}.input-panel textarea{font-size:20px}.quick-tags{gap:6px}.quick-tags button{padding:6px 9px}.section{padding:30px 0 38px}.section-heading{align-items:flex-start}.section-heading h2{font-size:23px}.section-heading p{max-width:290px;line-height:1.6}.section-heading .outline{padding:9px;font-size:10px}.style-grid,.font-grid{grid-template-columns:1fr}.style-card{padding:12px}.style-result{font-size:16px}.font-tools select{max-width:125px}.font-sample{font-size:22px}.tip-card{margin-bottom:42px}footer{padding:20px 17px;flex-wrap:wrap}footer>span{order:3;width:100%}}@media(max-width:390px){.topbar nav{gap:9px}.topbar nav a{font-size:10px}.brand{font-size:17px}.section-heading{gap:8px}.count-pill{font-size:9px;padding:3px 6px}.input-bottom{align-items:flex-start;gap:8px}.input-bottom>div{gap:3px}.primary.small{padding:8px}.text-button{padding:8px 5px}}

/* FontLab original-font export actions */
.font-actions{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:7px}
.font-actions button{min-width:0;padding:9px 7px;font-size:12px;white-space:nowrap}
.color-control{display:flex;align-items:center;gap:8px;color:var(--muted,#a4a4b5);font-size:12px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;white-space:nowrap}
.color-control input{width:26px;height:26px;padding:0;border:0;background:transparent;cursor:pointer}
@media(max-width:560px){.font-tools{flex-wrap:wrap}.color-control{height:42px}.font-actions{grid-template-columns:1fr 1fr 1fr}.font-actions button{font-size:11px;padding:9px 4px}}

/* Cupz Font Generator — refined professional interface */
:root{color-scheme:dark;--bg:#080a10;--panel:#10141e;--panel2:#151b28;--line:#252d3d;--muted:#929db2;--text:#f6f7fb;--purple:#a78bfa;--cyan:#7ce7db}
body{font-family:Inter,"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 50% -20%,#252044 0,transparent 42%),var(--bg);letter-spacing:-.01em}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.13;background-image:linear-gradient(#a7b4d00b 1px,transparent 1px),linear-gradient(90deg,#a7b4d00b 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 75%)}
.ambient{opacity:.12;filter:blur(110px)}.ambient-a{background:#7c5cff}.ambient-b{background:#27b8b0}
.topbar{max-width:1240px;height:82px;border-bottom:1px solid #aeb9d015;position:relative}.brand{gap:12px;font-size:18px;letter-spacing:-.8px}.brand-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#b7a0ff,#7559e8 70%,#5941c7);box-shadow:0 8px 30px #8868ff30;font-weight:900}.brand-light{color:#b9b3ff;font-weight:650}.brand small{font-size:8px;letter-spacing:2.1px;color:#7e89a2}.topbar nav{gap:8px}.topbar nav a{padding:10px 13px;border-radius:9px;color:#9ca7bb;font-size:12px;font-weight:650}.topbar nav a:hover{background:#ffffff08;color:#fff}.version{border-color:#2d3548;background:#10141e;color:#a8b4c9;font-size:9px;font-weight:750;letter-spacing:1.1px;padding:8px 11px}
main{max-width:1120px}.hero{max-width:800px;padding:88px 0 66px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#b8a6ff;font-weight:800}.eyebrow span{color:#81e6dc}h1{font-size:clamp(48px,7vw,78px);letter-spacing:-4.5px;line-height:.99;font-weight:850;margin:22px 0 22px}h1 span{background:linear-gradient(105deg,#c5b5ff 0%,#9e8aff 42%,#7ce7db 100%);-webkit-background-clip:text;background-clip:text}.hero>p{font-size:15px;line-height:1.85;color:#a4aec2;max-width:590px;margin-bottom:34px}.input-panel{border:1px solid #41405c;background:linear-gradient(135deg,#171a29f5,#10141df5);border-radius:20px;padding:21px 23px 16px;box-shadow:0 22px 70px #0004, inset 0 1px #ffffff08}.input-panel label{font-size:9px;letter-spacing:2px;color:#aeb7ca}.input-panel textarea{font-size:25px;font-weight:650;letter-spacing:-.8px;min-height:70px}.input-bottom{border-top-color:#ffffff12;padding-top:14px}.primary{background:linear-gradient(110deg,#a68aff,#8066ed);border-radius:10px;box-shadow:0 8px 24px #8866ff25}.quick-tags{margin-top:18px}.quick-tags>span{font-size:9px;letter-spacing:1.5px}.quick-tags button{background:#111620;border-color:#2a3040;border-radius:9px;padding:8px 12px;font-weight:600}.quick-tags button:hover{background:#1c2030;border-color:#7461bb}
.section{padding:48px 0 58px;border-top:1px solid #ffffff10}.section-heading{align-items:center;margin-bottom:25px}.section-heading h2{font-size:29px;letter-spacing:-1.25px;font-weight:780;margin:9px 0 6px}.section-heading p{font-size:12px;line-height:1.8;color:#98a3b8}.count-pill{color:#c5b7ff;border-color:#554780;background:#211c35;padding:5px 9px}.outline{border-color:#353d51;background:#141925;border-radius:10px;padding:11px 15px;font-size:11px}.outline:hover{border-color:#a18aff;background:#211d32}.filter-row{gap:8px;margin-bottom:18px}.filter{border-color:#293143;background:#10141d;border-radius:9px;padding:9px 14px;font-weight:650}.filter.active{background:#28213e;border-color:#7560b8;color:#e1d8ff}.style-grid,.font-grid{gap:12px}.style-card,.font-card{border-color:#252e40;background:linear-gradient(145deg,#121722,#0e121a);border-radius:15px;padding:16px;box-shadow:0 6px 22px #00000012;transition:transform .18s,border-color .18s,background .18s}.style-card:hover,.font-card:hover{transform:translateY(-2px);border-color:#51466e;background:linear-gradient(145deg,#171b2a,#10141d)}.style-name{font-size:10px;font-weight:700;letter-spacing:.04em;color:#929db2;margin-bottom:8px}.style-result{font-size:18px;color:#f6f4ff}.copy-btn{width:37px;height:37px;border-radius:10px;background:#1b2030;border-color:#343b51;color:#c2b3ff}.copy-btn:hover{background:#2c2544;border-color:#8c76dd}.font-tools{gap:11px;margin-bottom:20px}.search-box{background:#10141e;border-color:#2b3346;border-radius:11px}.search-box input{font-size:12px}.font-tools select{border-color:#2b3346;background:#10141e;border-radius:11px;font-size:12px;min-height:44px}.color-control{border-color:#2b3346;background:#10141e;border-radius:11px;font-weight:600}.font-card{padding:16px}.font-card-head{margin-bottom:16px}.font-name{font-size:11px;font-weight:700;color:#c3cadd;letter-spacing:.01em}.font-badge{font-weight:750;letter-spacing:.06em;color:#a6b0c5;border-color:#343c50;background:#171c29}.font-sample{font-size:27px;min-height:50px;color:#faf9ff;line-height:1.35}.font-actions{gap:7px;margin-top:15px}.font-actions button{font-size:10px;font-weight:750;border:1px solid #34394d;border-radius:8px;background:#181d2a;color:#c8cde0;padding:9px 6px}.font-actions button:first-child{background:#28213e;border-color:#5d4d90;color:#ded5ff}.font-actions button:hover{border-color:#a18aff;background:#28213d;color:#fff}.font-note{padding:13px 15px;border:1px solid #252e40;border-radius:11px;background:#0e121a;font-size:11px;color:#929db2}.tip-card{border-color:#34304e;background:linear-gradient(115deg,#17172a,#111821);border-radius:16px;padding:21px;margin:10px 0 66px}.tip-icon{background:#2b2345;color:#c7b6ff}.tip-card h3{font-size:14px;letter-spacing:-.2px}.tip-card p{font-size:11px;color:#a0a9bc}footer{max-width:1240px;border-top-color:#ffffff10;padding-top:26px;padding-bottom:26px}.footer-brand{font-size:15px}.toast{background:#e9e3ff;color:#21183b;box-shadow:0 14px 45px #0008}
@media(min-width:900px){.style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.font-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.topbar{height:72px}.brand{font-size:16px;gap:9px}.brand-icon{width:37px;height:37px}.topbar nav{gap:2px}.topbar nav a{padding:9px 8px;font-size:10px}.hero{padding:64px 0 45px}h1{font-size:clamp(44px,12vw,61px);letter-spacing:-2.9px}.hero>p{font-size:13px;line-height:1.8}.section{padding:35px 0 42px}.section-heading h2{font-size:24px}.style-card,.font-card{border-radius:13px}.font-sample{font-size:25px}.tip-card{padding:17px}}

/* Cupz Font Generator — bold neo-brutalist editorial theme inspired by the supplied reference */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=Archivo+Black&display=swap');
:root{color-scheme:light;--bg:#fffdf0;--panel:#fffef8;--panel2:#fff0a0;--line:#080808;--muted:#343434;--text:#080808;--purple:#ffdf59;--cyan:#00d8df}
html{scroll-padding-top:76px}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif;letter-spacing:-.025em;line-height:1.55}
body:before{display:none}.ambient{display:none}
.topbar{max-width:100%;height:76px;padding:0 max(22px,calc((100% - 1120px)/2));border-bottom:3px solid #080808;background:#fffdf0}
.brand{font-family:'Archivo Black','DM Sans',sans-serif;color:#080808;font-size:20px;letter-spacing:-1px}.brand-icon{border:3px solid #080808;border-radius:0;background:#ffdf59;color:#080808;box-shadow:4px 4px 0 #080808;font-family:'Archivo Black',sans-serif}.brand-icon span{color:#080808}.brand-light{color:#080808;font-family:'DM Sans',sans-serif;font-weight:800}.brand small{color:#333;letter-spacing:2px}
.topbar nav a,footer>a:last-child{color:#111;font-weight:800}.topbar nav a:hover,footer a:hover{color:#e50050}.topbar nav a{border-radius:0}.version{border:2px solid #080808;border-radius:0;background:#ffdf59;color:#080808;font-weight:900;box-shadow:3px 3px 0 #080808}.version i{background:#00cfa0;box-shadow:none}
main{max-width:1120px}.hero{max-width:820px;padding:70px 0 54px}.eyebrow{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:2px;color:#e50050;font-weight:900}.eyebrow span{color:#080808}h1{font-family:'Archivo Black','DM Sans',sans-serif;font-size:clamp(45px,7vw,78px);line-height:1.03;letter-spacing:-3.5px;font-weight:900;color:#080808}h1 span{background:none;color:#e50050;-webkit-text-fill-color:#e50050}.hero>p{color:#242424;font-size:16px;font-weight:600;line-height:1.8}
.input-panel{border:3px solid #080808;border-radius:0;background:#fffef8;box-shadow:7px 7px 0 #080808;padding:20px 22px 15px}.input-panel label{color:#111;font-weight:900}.input-panel textarea{color:#080808;font-family:'DM Sans',sans-serif;font-size:25px;font-weight:800;letter-spacing:-.8px}.input-panel textarea::placeholder{color:#777}.input-bottom{border-top:2px solid #080808;color:#333}.text-button{color:#080808;font-weight:800}.primary{background:#ffdf59;border:2px solid #080808;border-radius:0;color:#080808;font-weight:900;box-shadow:4px 4px 0 #080808}.primary:hover{filter:none;background:#00d8df}.quick-tags>span{color:#222;font-weight:900}.quick-tags button{background:#fffef8;border:2px solid #080808;border-radius:0;color:#080808;font-weight:800;box-shadow:3px 3px 0 #080808}.quick-tags button:hover{background:#ffdf59;border-color:#080808;color:#080808}
.section{border-top:3px solid #080808;padding:43px 0 50px}.section-heading h2{font-family:'Archivo Black','DM Sans',sans-serif;font-size:clamp(24px,4vw,35px);font-weight:900;letter-spacing:-1.5px;color:#080808}.section-heading p{color:#333;font-size:13px;font-weight:600}.count-pill{border:2px solid #080808;border-radius:0;background:#ffdf59;color:#080808;font-weight:900}.outline{border:2px solid #080808;border-radius:0;background:#ffdf59;color:#080808;font-weight:900;box-shadow:4px 4px 0 #080808}.outline:hover{background:#00d8df;border-color:#080808;color:#080808}.filter{border:2px solid #080808;border-radius:0;background:#fffef8;color:#080808;font-weight:800;box-shadow:2px 2px 0 #080808}.filter.active{background:#080808;color:#fffdf0;border-color:#080808}.style-card,.font-card{border:2px solid #080808;border-radius:0;background:#fffef8;box-shadow:5px 5px 0 #080808;transition:transform .15s,box-shadow .15s}.style-card:hover,.font-card:hover{transform:translate(-2px,-2px);border-color:#080808;background:#fffef8;box-shadow:7px 7px 0 #e50050}.style-name{color:#444;font-weight:800}.style-result{color:#080808;font-weight:700}.copy-btn{border:2px solid #080808;border-radius:0;background:#ffdf59;color:#080808;box-shadow:2px 2px 0 #080808}.copy-btn:hover{background:#00d8df;border-color:#080808;color:#080808}.search-box,.font-tools select,.color-control{border:2px solid #080808;border-radius:0;background:#fffef8;color:#080808;box-shadow:3px 3px 0 #080808}.search-box input{color:#080808}.font-name{color:#080808;font-weight:900}.font-badge{border:1px solid #080808;border-radius:0;background:#ffdf59;color:#080808;font-weight:900}.font-sample{color:#080808}.font-actions button{border:2px solid #080808;border-radius:0;background:#fffef8;color:#080808;font-weight:900;box-shadow:2px 2px 0 #080808}.font-actions button:first-child{background:#ffdf59;border-color:#080808;color:#080808}.font-actions button:hover{background:#00d8df;border-color:#080808;color:#080808}.font-note{border:2px solid #080808;border-radius:0;background:#fffef8;color:#292929}.tip-card{border:3px solid #080808;border-radius:0;background:#ffdf59;box-shadow:6px 6px 0 #080808}.tip-icon{border:2px solid #080808;border-radius:0;background:#fffef8;color:#080808}.tip-card h3{font-family:'Archivo Black','DM Sans',sans-serif;font-size:16px;color:#080808}.tip-card p{color:#202020;font-weight:600}footer{border-top:3px solid #080808;color:#333}footer .brand-icon{box-shadow:3px 3px 0 #080808}.toast{border:2px solid #080808;border-radius:0;background:#ffdf59;color:#080808;font-weight:900;box-shadow:4px 4px 0 #080808}
@media(max-width:650px){.topbar{height:auto;min-height:70px;padding:12px 16px;gap:10px}.brand{font-size:16px}.topbar nav a{font-size:10px;padding:7px 5px}.hero{padding:48px 0 40px}h1{letter-spacing:-2.3px}.hero>p{font-size:14px}.input-panel{box-shadow:5px 5px 0 #080808;padding:16px}.section{padding:32px 0 38px}.section-heading h2{font-size:25px}.style-card,.font-card{box-shadow:4px 4px 0 #080808}.font-actions button{font-size:10px}.tip-card{box-shadow:5px 5px 0 #080808}footer{gap:12px}}

/* Cupz Font Generator — Bebas Neue for interface only; font samples keep each original font. */
@font-face{
  font-family:'BebasNeue';
  src:url('./fonts/BebasNeue-Regular.otf') format('opentype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
body{font-family:'BebasNeue',Impact,'Arial Narrow',sans-serif !important;font-weight:400;letter-spacing:.025em}
/* Apply the website typeface to UI elements without overriding per-font preview samples. */
.brand,.brand-light,.brand small,.topbar nav a,.version,.eyebrow,h1,.hero>p,
.input-panel label,.input-panel textarea,.input-bottom,.text-button,.primary,
.quick-tags>span,.quick-tags button,.section-heading h2,.section-heading p,
.count-pill,.outline,.filter,.search-box,.search-box input,.font-tools select,
.font-name,.font-badge,.font-card-bottom button,.font-note,.tip-card h3,.tip-card p,
footer,.toast{font-family:'BebasNeue',Impact,'Arial Narrow',sans-serif !important;letter-spacing:.025em}
input,textarea,select,button{font-family:'BebasNeue',Impact,'Arial Narrow',sans-serif !important}
/* .font-sample uses its selected font via JavaScript; .style-result retains Unicode styling. */

/* Cupz interactive motion layer */
:root{scroll-behavior:smooth}::selection{background:#ffe15a;color:#111}.brand-icon{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}.brand:hover .brand-icon{transform:rotate(-8deg) scale(1.07);box-shadow:0 8px 30px #9d7bff66}.topbar nav a,footer a,.quick-tags button,.filter,.outline,.primary,.copy-btn,.font-actions button,.text-button{transition:transform .2s ease,background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease}.topbar nav a:hover{transform:translateY(-2px)}button:hover{transform:translateY(-2px)}button:active{transform:translateY(0) scale(.97)}.primary:hover{box-shadow:0 8px 26px #8468f355}.input-panel{transition:border-color .25s,box-shadow .25s,transform .25s}.input-panel:focus-within{border-color:#9d7bff;box-shadow:0 0 0 3px #9d7bff20,0 22px 70px #0005}.style-card,.font-card,.tip-card{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}.style-card:hover,.font-card:hover{transform:translateY(-4px);border-color:#8e79e7;box-shadow:0 12px 30px #0003}.font-sample{transition:color .2s,letter-spacing .2s}.font-card:hover .font-sample{color:#fff;letter-spacing:.15px}.copy-btn:hover,.font-actions button:hover{box-shadow:0 5px 18px #8d76e52a}.ambient{animation:ambient-drift 14s ease-in-out infinite alternate}.ambient-b{animation-delay:-7s}.hero .eyebrow{animation:fade-up .65s both}.hero h1{animation:fade-up .7s .08s both}.hero>p{animation:fade-up .7s .16s both}.input-panel{animation:fade-up .7s .23s both}.quick-tags{animation:fade-up .7s .3s both}.section-heading{transition:opacity .3s} .section.is-visible .section-heading{animation:fade-up .55s both}.section.is-visible .style-card,.section.is-visible .font-card{animation:card-in .45s both;animation-delay:calc(var(--item-index, 0) * 22ms)}.style-card.copy-success,.font-card.copy-success{border-color:#6de4b2;box-shadow:0 0 0 2px #6de4b21c}.toast{transition:opacity .22s ease,transform .22s ease}.toast.show{animation:toast-pop .25s ease-out}.filter:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #a994ff;outline-offset:3px}@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes card-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes ambient-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(24px,18px,0) scale(1.08)}}@keyframes toast-pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Bug fix: on touch devices, a tapped font card can remain in :hover state.
   Keep the preview text readable and preserve the selected font's own face. */
.font-card .font-sample,
.font-card:hover .font-sample,
.font-card:focus-within .font-sample,
.font-card:active .font-sample {
  color: #080808;
}
.font-card:hover .font-sample {
  letter-spacing: .15px;
}

/* Download all fonts panel */
.font-download-all{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:16px 18px;border:2px solid #080808;background:#ffdf59;box-shadow:4px 4px 0 #080808;color:#080808}.font-download-all strong{display:block;font-size:14px;font-weight:900}.font-download-all p{margin:4px 0 0;font-size:11px;line-height:1.6;color:#292929}.download-all-btn{flex-shrink:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;background:#fffef8;color:#080808;box-shadow:3px 3px 0 #080808}.download-all-btn:hover{background:#00d8df;color:#080808}@media(max-width:560px){.font-download-all{align-items:stretch;flex-direction:column}.download-all-btn{white-space:normal;text-align:center;width:100%}}