:root { --ink:#18213b; --blue:#3978f6; --orange:#ff9b42; --paper:#fffdf7; }
* { box-sizing: border-box; }
html { background:#f4f7ff; }
body { margin:0; color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif; background:radial-gradient(circle at 8% 4%,#fff4c8 0 9rem,transparent 20rem),radial-gradient(circle at 92% 12%,#d9f6ff 0 8rem,transparent 22rem),#f4f7ff; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
main { width:min(1180px,100%); margin:auto; padding:28px 28px 40px; }
.hero { position:relative; overflow:hidden; border:4px solid var(--ink); border-radius:30px; background:#6c62e8; color:white; padding:34px 38px 30px; box-shadow:9px 10px 0 var(--ink); }
.hero::after { content:"★"; position:absolute; right:4%; top:-42px; font-size:160px; color:#8279f0; transform:rotate(14deg); }
.hero-copy,.howto { position:relative; z-index:1; }
.eyebrow { margin:0 0 6px; font-size:16px; font-weight:800; letter-spacing:.05em; }
h1 { margin:0; font-size:clamp(38px,6vw,68px); line-height:1.06; letter-spacing:-.05em; }
.subtitle { font-size:18px; font-weight:650; margin:14px 0 26px; }
.howto { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.howto span { display:flex; align-items:center; gap:7px; background:white; color:var(--ink); padding:9px 13px; border:2px solid var(--ink); border-radius:99px; font-weight:800; box-shadow:3px 3px 0 var(--ink); }
.howto b { display:grid; place-items:center; width:25px; height:25px; color:white; background:var(--orange); border-radius:50%; }
.howto i { font-style:normal; font-weight:900; }
.toolbar { margin:34px 0 14px; }
.search { display:flex; align-items:center; gap:9px; max-width:620px; margin:0 auto 18px; padding:12px 18px; background:white; border:3px solid var(--ink); border-radius:18px; box-shadow:5px 6px 0 #cbd6ff; }
.search span { font-size:24px; }
.search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:17px; font-weight:650; }
.filters { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.filters button { border:2px solid var(--ink); border-radius:999px; padding:8px 15px; color:var(--ink); background:white; cursor:pointer; font-weight:800; box-shadow:2px 3px 0 var(--ink); }
.filters button.active { transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); color:white; background:var(--blue); }
.result-count { text-align:center; color:#66708a; font-size:14px; font-weight:700; margin:18px 0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { display:flex; flex-direction:column; min-width:0; padding:18px; border:3px solid var(--ink); border-radius:22px; background:var(--paper); box-shadow:6px 7px 0 var(--ink); }
.card.warning { background:#fff3ef; }
.card-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.tag { display:inline-flex; align-items:center; min-height:31px; padding:5px 10px; border-radius:999px; background:#e5ecff; color:#3b4d83; font-size:13px; font-weight:900; }
.warning .tag { color:#a33b2c; background:#ffd9d2; }
.speak { display:flex; align-items:center; gap:6px; border:2px solid var(--ink); border-radius:13px; padding:7px 10px; background:var(--orange); color:var(--ink); cursor:pointer; font-size:14px; font-weight:900; box-shadow:2px 3px 0 var(--ink); }
.speak span { font-size:21px; }
.speak:active,.copy:active { transform:translate(2px,2px); box-shadow:none; }
.speak.playing { background:#ffd46f; animation:pulse 1s infinite; }
.card h2 { min-height:2.7em; margin:18px 0 12px; font-size:21px; line-height:1.35; }
.code { overflow-wrap:anywhere; padding:12px 10px; background:#edf2ff; border:2px dashed #7889bb; border-radius:12px; color:#273659; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center; font-size:16px; font-weight:900; letter-spacing:.02em; }
.copy { width:100%; min-height:50px; margin-top:15px; border:2px solid var(--ink); border-radius:14px; background:var(--blue); color:white; cursor:pointer; font-size:16px; font-weight:900; box-shadow:3px 4px 0 var(--ink); }
.copy span { display:inline-block; margin-right:7px; }
.copy.done { background:#24aa74; }
.empty { padding:60px 20px; text-align:center; font-size:20px; font-weight:800; }
footer { margin-top:32px; padding:16px 20px; background:#fff2ad; border:2px solid var(--ink); border-radius:16px; line-height:1.7; font-weight:700; }
footer p { margin:0; }
.toast { position:fixed; left:50%; bottom:24px; z-index:20; transform:translate(-50%,120px); opacity:0; max-width:calc(100vw - 30px); padding:13px 20px; border:3px solid var(--ink); border-radius:999px; color:white; background:#1eaa73; box-shadow:5px 6px 0 var(--ink); font-weight:900; transition:.25s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast.show { transform:translate(-50%,0); opacity:1; }
@keyframes pulse { 50% { transform:scale(1.04); } }
@media (max-width:900px) { .grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) {
  main { padding:14px 14px 32px; }
  .hero { padding:26px 20px 24px; border-radius:23px; box-shadow:6px 7px 0 var(--ink); }
  .hero::after { display:none; }
  .subtitle { font-size:16px; line-height:1.65; }
  .howto i { display:none; }
  .howto span { font-size:13px; padding:7px 9px; }
  .toolbar { margin-top:28px; }
  .grid { grid-template-columns:1fr; gap:16px; }
  .card { box-shadow:5px 6px 0 var(--ink); }
  .card h2 { min-height:0; }
  .speak { min-width:112px; min-height:46px; justify-content:center; }
  .copy { min-height:56px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }