/* 菜鸟米表：沿用手绘贴纸、奶油纸色、粉蓝配色与粗描边。
   All headings, domain names, labels and buttons are editable HTML.
   Only the character illustrations use external, optimized WebP images. */
@font-face{font-family:DomainSans;src:url("assets/text.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:DomainHand;src:url("assets/display.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--paper:#fcf8ec;--blue:#d1ecff;--sky:#acdaff;--pink:#fcbccd;--green:#d7f39e;--yellow:#ffe392;--ink:#171714;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:18px}body{margin:0;background:#ebe8df;color:var(--ink);font-family:DomainSans,"Microsoft YaHei",sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #2478af;outline-offset:4px}button:active,.pink-button:active{transform:translateY(2px)}button{touch-action:manipulation}h1,h2,h3,p{margin:0}::selection{background:#fae679;color:#171714}.page{container-type:inline-size;max-width:540px;margin:auto;background:var(--paper);overflow:hidden;position:relative;border-radius:0 0 24px 24px}.hero{height:87cqw;position:relative;background:var(--sky);padding:6cqw 5.5cqw 0}.topline{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;font-size:3.1cqw;font-weight:600}.shop-mark{background:var(--paper);padding:1.35cqw 2.8cqw;border:.42cqw solid var(--ink);border-radius:3cqw 2.4cqw 3cqw 2cqw;transform:rotate(-3deg)}.contact-link{display:flex;align-items:center;gap:1cqw;padding:1.2cqw 0}.title-wrap{position:relative;margin-top:6cqw;text-align:center}h1{display:flex;justify-content:center;gap:1.3cqw;font-family:DomainHand,sans-serif;font-size:20.6cqw;font-weight:400;line-height:1.3;white-space:nowrap;letter-spacing:-.45cqw}h1 span{display:inline-block;-webkit-text-stroke:1.2cqw #151714;paint-order:stroke fill;color:#ffe05e;text-shadow:.45cqw .7cqw 0 #111;transform:rotate(-5deg)}h1 span:nth-child(2){transform:rotate(4deg) translateY(.9cqw)}h1 span:nth-child(3){color:var(--pink);transform:rotate(-4deg)}h1 span:nth-child(4){color:var(--pink);transform:rotate(3deg) translateY(.5cqw)}.hero-subtitle{text-align:center;font-family:DomainHand,sans-serif;font-size:5.5cqw;line-height:1.4;position:relative;z-index:3;margin-top:2cqw}.spark{display:inline-block;color:#ffe56e;font-family:Arial,sans-serif;-webkit-text-stroke:.35cqw var(--ink);font-size:8cqw;line-height:1}.hero-spark{position:absolute;right:-1cqw;top:-2.8cqw;color:#b8eece;font-size:11cqw;transform:rotate(13deg);z-index:2}.hero-notes{position:relative;height:24cqw;margin-top:6cqw;z-index:2}.hand-note{position:absolute;left:3cqw;top:3cqw;transform:rotate(-12deg);font-family:DomainHand,sans-serif;font-size:5.5cqw;line-height:1.1}.hand-note:after{content:'';position:absolute;bottom:-1cqw;left:-2cqw;width:21cqw;border-bottom:.6cqw solid #ecb844;transform:rotate(-4deg)}.sticker{display:block;flex:none;background-repeat:no-repeat;border:.5cqw solid #161612;border-radius:2.7cqw 1.6cqw 2.1cqw 1.5cqw;width:19cqw;height:19cqw;box-shadow:.5cqw .7cqw 0 #12121212}.hero .sticker{position:absolute;width:23cqw;height:24cqw}.hero-dog{right:26cqw;top:-.5cqw;transform:rotate(-10deg)}.hero-rock{right:4cqw;top:3cqw;transform:rotate(8deg)}.note-spark{position:absolute;left:30cqw;bottom:-2cqw;font-size:8cqw;transform:rotate(-9deg)}.clouds{position:absolute;bottom:-.3cqw;left:-5%;width:110%;height:18cqw;background:radial-gradient(ellipse at 13% 100%,var(--paper) 0 27%,transparent 27.8%),radial-gradient(ellipse at 47% 115%,var(--paper) 0 42%,transparent 42.6%),radial-gradient(ellipse at 88% 110%,var(--paper) 0 35%,transparent 35.7%)}
.welcome{position:relative;margin:3cqw 5.2cqw 0;padding:9cqw 5cqw 5cqw;border:.58cqw solid #171714;border-radius:8cqw 6cqw 7cqw 5cqw;background:var(--green)}.welcome-label{position:absolute;left:18cqw;right:12cqw;top:-4.2cqw;background:var(--blue);font-family:DomainHand,sans-serif;font-size:5.3cqw;line-height:1.3;text-align:center;padding:1.5cqw 2cqw;border:.55cqw solid #171714;border-radius:4cqw 5cqw 3cqw 3cqw;transform:rotate(-2deg);white-space:nowrap}.welcome-label .spark{font-size:4.8cqw;-webkit-text-stroke:.2cqw #222;vertical-align:-.3cqw}.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:3cqw}.welcome p{font-size:3.55cqw;line-height:1.65}.welcome strong{font-weight:600}.pink-button{display:inline-flex;align-items:center;justify-content:center;gap:2cqw;background:var(--pink);border:.48cqw solid #171714;border-radius:1.4cqw 1.6cqw 1.3cqw 1cqw;padding:2cqw 3.4cqw;white-space:nowrap;font-size:3.7cqw;line-height:1.3;font-weight:600;min-height:10cqw}.collection{padding:0 4.5cqw;margin-top:10cqw}.section-heading{display:flex;justify-content:center;align-items:center;gap:3cqw;position:relative;margin-bottom:8cqw}.number-tag{font-family:DomainHand,sans-serif;display:block;align-self:center;margin-top:7cqw;border:.58cqw solid var(--ink);border-radius:2.2cqw 1.5cqw 2.7cqw 1.9cqw;background:#ffe45b;font-size:7cqw;line-height:1;padding:.5cqw .5cqw .2cqw;transform:rotate(-9deg)}.handwriting{font-family:DomainHand,sans-serif;font-size:8.6cqw;text-align:center;line-height:1.2;transform:rotate(-2deg);margin-bottom:1.7cqw}.cloud-label{font-family:DomainHand,sans-serif;font-weight:400;font-size:8.6cqw;line-height:1.1;padding:2.6cqw 5cqw 3cqw;display:block;position:relative;background:var(--pink);border:.58cqw solid #161714;border-radius:47% 52% 42% 49%/45% 50% 49% 43%;transform:rotate(-2deg);white-space:nowrap}.heading-spark{font-size:7.5cqw;align-self:flex-end;margin-bottom:5cqw;transform:rotate(12deg)}.folder{position:relative;background:var(--blue);border:.6cqw solid #171714;border-radius:3.5cqw 2.6cqw 3.8cqw 2.3cqw;padding:9cqw 3cqw 4cqw;margin-top:13cqw;isolation:isolate}.folder-tab{position:absolute;top:-7.1cqw;left:-.6cqw;height:9cqw;border:.6cqw solid #171714;border-bottom:0;background:var(--blue);border-radius:3.4cqw 4.5cqw 0 0;padding:1.8cqw 4cqw 0 3cqw;font-family:DomainHand,sans-serif;font-size:5.3cqw;transform:rotate(-1deg);z-index:-1}.folder-tab span[aria-hidden]{font-family:Arial,sans-serif;font-size:4cqw;padding-left:2cqw}.domain-list{display:grid;gap:4.2cqw}.domain-card{position:relative;overflow:hidden;border:.52cqw solid #191a17;border-radius:2.6cqw 1.8cqw 2.4cqw 1.6cqw;background:#fffefa;--card-color:var(--pink)}.domain-card:nth-child(3n+1){transform:rotate(-.55deg)}.domain-card:nth-child(3n+2){transform:rotate(.45deg)}.domain-card.green{--card-color:#d7f39e}.domain-card.yellow{--card-color:#ffe392}.domain-card.aqua{--card-color:#acf0f0}.domain-top{padding:3.2cqw 4cqw 3.5cqw;background:var(--card-color);border-bottom:.5cqw solid #171714}.domain-top h3{font-family:DomainSans,sans-serif;font-size:7.2cqw;font-weight:750;line-height:1.2;letter-spacing:-.23cqw;white-space:nowrap}.domain-top h3.long-domain{font-size:6.3cqw;letter-spacing:-.19cqw}.domain-body{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:3.5cqw 4cqw}.domain-info{min-width:0;flex:1}.domain-name{font-size:5.1cqw;font-weight:500;line-height:1.5;white-space:nowrap}.domain-name.long-name{font-size:3.8cqw;letter-spacing:-.16cqw}.ask-button{font-size:3.5cqw;line-height:1.3;margin-top:2cqw;min-height:8.2cqw;border:.38cqw solid #171714;border-radius:1cqw 1.3cqw .8cqw 1.1cqw;background:var(--paper);padding:1.3cqw 3cqw;white-space:nowrap}.domain-body .sticker{width:18cqw;height:18cqw;transform:rotate(4deg)}.domain-card:nth-child(even) .sticker{transform:rotate(-4deg)}.folder-spark{position:absolute;right:2cqw;bottom:-4cqw;font-size:9cqw;transform:rotate(-12deg)}.collection-end{font-size:3.35cqw;text-align:center;margin-top:6cqw;line-height:1.5}.contact-section{padding:0 5.2cqw;margin-top:14cqw}.contact-section .section-heading{margin-bottom:10cqw}.contact-card{position:relative;padding:10cqw 4cqw 8cqw;text-align:center;background:var(--green);border:.58cqw solid var(--ink);border-radius:4cqw 3cqw 4.5cqw 2.6cqw}.contact-card-label{position:absolute;top:-4cqw;left:11%;right:11%;padding:1.6cqw 1.5cqw;border:.52cqw solid #171714;border-radius:2.5cqw 3cqw 2cqw 2.5cqw;background:#fff3aa;font-family:DomainHand,sans-serif;font-size:4.9cqw;white-space:nowrap;transform:rotate(-2deg)}.contact-caption{font-size:4.25cqw;line-height:1.5}.copy-hint{font-size:3cqw;line-height:1.5;color:#344524}.eyes{position:absolute;right:8cqw;bottom:-.6cqw;height:10cqw;width:15cqw;transform:rotate(-14deg);pointer-events:none}.eyes i{position:absolute;width:5.5cqw;height:9cqw;border:.55cqw solid #111;border-radius:50%;background:white;transform:rotate(32deg)}.eyes i:nth-child(2){right:1.5cqw;transform:rotate(42deg);top:1cqw}.eyes i:after{content:'';position:absolute;bottom:1cqw;right:.4cqw;width:2.6cqw;height:4cqw;background:#111;border-radius:50%}.footer{display:flex;flex-direction:column;align-items:center;padding:14cqw 5cqw 7cqw}.footer-sticker{position:relative;padding:1.3cqw 1.6cqw 1.7cqw;background:#ffe392;border:.48cqw solid var(--ink);border-radius:3cqw 1.6cqw 2.2cqw 1.8cqw;transform:rotate(3deg);margin-bottom:6cqw}.footer-sticker .sticker{width:18cqw;height:18cqw;border:0;box-shadow:none}.footer-sticker span:last-child{display:block;font-size:2.7cqw;font-weight:600;text-align:center;line-height:1.5;margin-top:1cqw}.footer a{font-size:3.4cqw;padding:2cqw 4cqw}
dialog{position:fixed;width:min(90vw,430px);max-height:88dvh;overflow:auto;border:2.5px solid #171714;border-radius:22px 16px 24px 15px;background:var(--paper);color:var(--ink);padding:30px 24px 22px;text-align:center;box-shadow:6px 7px 0 #0002}dialog::backdrop{background:#17222673;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:10px;top:7px;border:0;background:transparent;width:36px;height:36px;font-size:28px;line-height:1}.dialog-kicker{font-size:13px;color:#665e51;margin-bottom:8px}dialog h2{font-family:DomainHand,sans-serif;font-size:34px;font-weight:400;line-height:1.35}#selected-domain{font-size:clamp(20px,5.5vw,29px);font-weight:750;line-height:1.3;overflow-wrap:anywhere;margin-top:18px}#selected-name{font-size:16px;margin-top:8px}.dialog-contact-caption{font-size:15px;margin-top:28px}#copy-feedback{font-size:13px;line-height:1.6;min-height:21px;margin-top:12px}#toast{position:fixed;z-index:10;bottom:24px;left:50%;transform:translateX(-50%);max-width:88vw;width:max-content;padding:12px 18px;border:2px solid #171714;border-radius:12px 9px 13px 9px;background:#fff2a5;color:#171714;font-size:14px;line-height:1.6;opacity:0;pointer-events:none;transition:opacity .15s}#toast.is-visible{opacity:1}[hidden]{display:none!important}
@media(max-width:540px){body{background:var(--paper)}.page{max-width:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{body{background:var(--paper)}dialog,#toast{display:none}.page{max-width:540px}.domain-card{break-inside:avoid}}

.sticker.dog{background-image:url("assets/dog.webp");background-size:100% auto;background-position:center 20.155990%;}
.sticker.rock{background-image:url("assets/rock.webp");background-size:100% auto;background-position:center 20.238827%;}
.sticker.alien{background-image:url("assets/alien.webp");background-size:100% auto;background-position:center 24.256993%;}
.sticker.cat{background-image:url("assets/cat.webp");background-size:100% auto;background-position:center 24.391951%;}
.eyes i:first-child{left:0}

/* JSON-configured prices and longer user-supplied content. */
h1{font-size:min(20.6cqw,calc((89cqw - (var(--title-chars,4) - 1)*1.3cqw)/var(--title-chars,4)))}
.domain-actions{display:flex;align-items:center;flex-wrap:wrap;gap:2cqw;margin-top:2cqw}
.domain-actions .ask-button{margin-top:0}
.price-badge{display:inline-block;border:.35cqw solid var(--ink);border-radius:1cqw 1.3cqw .8cqw 1.2cqw;padding:1.1cqw 2cqw;line-height:1.35;font-size:3.5cqw;font-weight:650;background:#fff2ac;white-space:nowrap}
.fixed-price{background:var(--pink);font-variant-numeric:tabular-nums}
.domain-name{white-space:normal;overflow-wrap:anywhere}
.domain-top h3{white-space:normal;overflow-wrap:anywhere}

.selected-price{font-size:17px;font-weight:650;margin-top:10px;line-height:1.5}
.empty-domains{padding:8cqw 4cqw;text-align:center;font-size:4cqw;line-height:1.6}

/* Friendly neighborhood links, with the same paper-and-ink treatment. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.friends-section{margin-top:14cqw;padding:0 5.2cqw}
.friends-section .section-heading{margin-bottom:4cqw;gap:3cqw}
.friends-section .number-tag{margin-top:0}
.friends-section .cloud-label{background:#fff0ac;font-size:7.5cqw}
.friends-section .heading-spark{margin-bottom:0}
.friends-intro{text-align:center;font-size:3.5cqw;line-height:1.7;margin-bottom:5cqw;overflow-wrap:anywhere}
.friends-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:3.5cqw}
.friend-link{display:flex;align-items:center;gap:14px;padding:4cqw;border:.45cqw solid var(--ink);border-radius:3cqw 2cqw 3.5cqw 2cqw;background:#fffdf5;min-width:0;min-height:64px}
.friend-link:nth-child(3n+2){background:#f3f8df}.friend-link:nth-child(3n){background:#eef8fc}
.friend-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;overflow-wrap:anywhere}
.friend-info strong{font-size:4.2cqw;line-height:1.5}.friend-host{font-size:3.25cqw;color:#556064;line-height:1.5}
.friend-description{font-size:3.5cqw;line-height:1.6}
.friend-link:hover{background:#fff0ac}.friend-link:focus-visible{outline:3px solid #2478af;outline-offset:4px}
.friends-empty{grid-column:1/-1;text-align:center;border:1.5px dashed #aaa38c;border-radius:12px;padding:24px 15px;color:#655f50;font-size:13px;line-height:1.7;background:#fffdf5}
.purchase-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:46px;margin-top:22px;padding:11px 18px;border:2px solid var(--ink);border-radius:8px 10px 7px 8px;background:var(--green);font-size:17px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.purchase-button:hover{background:#c9e988}
@media(min-width:768px){.friends-section{margin-top:76px;padding:0 40px}.friends-section .section-heading{gap:17px;margin-bottom:17px}.friends-section .cloud-label{font-size:38px}.friends-intro{font-size:15px;margin-bottom:27px}.friends-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.friend-link{padding:20px;border-width:2px;border-radius:14px 9px 16px 10px}.friend-info strong{font-size:18px}.friend-host{font-size:13px}.friend-description{font-size:14px}.friends-empty{font-size:15px;padding:32px}}
@media(min-width:1100px){.friends-section{padding:0 66px}.friends-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Search/filter controls keep future, longer domain lists easy to browse. */
.browse-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,.6fr);gap:12px;margin:0 0 20px}
.browse-tools label{display:block;min-width:0;font-size:13px;line-height:1.4}
.browse-tools label>span{display:block;margin-bottom:6px;font-weight:550}
.browse-tools input,.browse-tools select{width:100%;height:42px;padding:8px 10px;border:1.5px solid #171714;border-radius:7px;background:#fffdf5;color:#171714;font:inherit;outline-offset:3px;min-width:0}
.browse-tools input:focus-visible,.browse-tools select:focus-visible{outline:3px solid #2878a9}
#result-count{grid-column:1/-1;font-size:12px;color:#4c575e;line-height:1.5}
@media(min-width:768px){.browse-tools{grid-template-columns:minmax(200px,1fr) 180px auto;align-items:end;gap:18px;margin:0 0 24px}.browse-tools label{font-size:14px}#result-count{grid-column:auto;align-self:end;padding-bottom:12px;min-width:85px;text-align:right}}

/* Desktop and tablet layout. The original hand-drawn mobile layout stays intact. */
@media screen and (min-width: 768px) {
  body { padding: 24px 0; }
  .page {
    width: calc(100% - 48px);
    max-width: 1240px;
    border-radius: 28px 22px 28px 22px;
    box-shadow: 0 8px 28px #1717140a;
  }
  .hero { height: auto; min-height: 444px; padding: 30px 40px 112px; }
  .topline { font-size: 15px; gap: 24px; }
  .shop-mark { padding: 8px 16px; border-width: 2px; border-radius: 15px 12px 15px 10px; }
  .contact-link { gap: 8px; padding: 10px 0; }
  .title-wrap { width: 62%; margin-top: 52px; text-align: left; }
  .title-wrap h1 {
    justify-content: flex-start;
    gap: 6px;
    font-size: min(112px, calc((57cqw - 64px - (var(--title-chars, 4) - 1) * 6px) / var(--title-chars, 4))) !important;
    line-height: 1.22;
    letter-spacing: 0;
  }
  h1 span { -webkit-text-stroke-width: 6px; text-shadow: 3px 4px 0 #111; }
  h1 span:nth-child(2) { transform: rotate(4deg) translateY(4px); }
  h1 span:nth-child(4) { transform: rotate(3deg) translateY(3px); }
  .hero-subtitle {
    width: 60%;
    margin-top: 22px;
    font-size: 28px;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .spark { font-size: 40px; -webkit-text-stroke-width: 1.5px; }
  .hero-spark { right: 0; top: -31px; font-size: 49px; }
  .hero-notes {
    position: absolute;
    width: 34%;
    height: 240px;
    right: 40px;
    top: 120px;
    margin: 0;
  }
  .sticker { width: 80px; height: 80px; border-width: 2px; border-radius: 12px 8px 10px 7px; box-shadow: 2px 3px 0 #12121212; }
  .hero .sticker { width: 146px; height: 153px; }
  .hero-dog { right: 130px; top: 0; }
  .hero-rock { right: 0; top: 43px; }
  .hand-note { left: 20px; top: auto; bottom: 0; font-size: 27px; line-height: 1.2; }
  .hand-note::after { bottom: -6px; left: -8px; width: 105px; border-bottom-width: 3px; }
  .note-spark { left: auto; right: 65px; bottom: -4px; font-size: 41px; }
  .clouds { bottom: -2px; height: 95px; }

  .welcome {
    margin: 6px 40px 0;
    padding: 30px 32px 24px;
    border-width: 3px;
    border-radius: 31px 24px 28px 22px;
  }
  .welcome-label {
    left: 32px;
    right: auto;
    max-width: calc(100% - 64px);
    top: -22px;
    padding: 7px 23px;
    border-width: 2px;
    border-radius: 18px 22px 14px 14px;
    font-size: 25px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .welcome-label .spark { font-size: 23px; -webkit-text-stroke-width: 1px; vertical-align: -2px; }
  .welcome-row { gap: 24px; }
  .welcome p { font-size: 17px; line-height: 1.75; text-wrap: pretty; }
  .pink-button { min-height: 46px; gap: 14px; padding: 10px 22px; border-width: 2px; border-radius: 7px 9px 6px 5px; font-size: 16px; }
  .collection { margin-top: 62px; padding: 0 40px; }
  .section-heading { gap: 17px; margin-bottom: 43px; }
  .section-heading > div { min-width: 0; }
  .number-tag { margin-top: 37px; border-width: 2px; border-radius: 10px 7px 12px 9px; font-size: 33px; padding: 3px 4px 1px; }
  .handwriting { font-size: 35px; line-height: 1.2; margin-bottom: 9px; text-wrap: balance; overflow-wrap: anywhere; }
  .cloud-label { padding: 13px 27px 16px; border-width: 3px; font-size: 42px; line-height: 1.15; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
  .heading-spark { font-size: 35px; margin-bottom: 24px; }
  .folder { padding: 31px 22px 26px; margin-top: 64px; border-width: 3px; border-radius: 18px 13px 20px 12px; }
  .folder-tab { top: -36px; left: -3px; height: 43px; max-width: calc(100% - 30px); padding: 8px 24px 0 17px; border-width: 3px; border-radius: 17px 22px 0 0; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .folder-tab span[aria-hidden] { padding-left: 14px; font-size: 20px; }
  .domain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
  .domain-card { min-width: 0; display: flex; flex-direction: column; border-width: 2px; border-radius: 12px 9px 11px 8px; }
  .domain-top { padding: 17px 18px 18px; min-height: 73px; border-bottom-width: 2px; }
  .domain-top h3 { font-size: 28px; line-height: 1.25; letter-spacing: -.4px; overflow-wrap: anywhere; }
  .domain-top h3.long-domain { font-size: 24px; letter-spacing: -.3px; }
  .domain-body { flex: 1; gap: 14px; padding: 19px 18px; min-height: 140px; }
  .domain-name { font-size: 20px; line-height: 1.55; }
  .domain-name.long-name { font-size: 16px; letter-spacing: 0; }
  .domain-body .sticker { width: 64px; height: 68px; }
  .domain-actions { gap: 8px; margin-top: 13px; }
  .ask-button { min-height: 37px; margin-top: 12px; padding: 7px 10px; border-width: 1.5px; border-radius: 5px 6px 4px 5px; font-size: 14px; }
  .price-badge { max-width: 100%; padding: 6px 9px; border-width: 1.5px; border-radius: 5px 6px 4px 5px; font-size: 14px; overflow-wrap: anywhere; white-space: normal; }
  .folder-spark { right: 12px; bottom: -20px; font-size: 44px; }
  .collection-end { margin-top: 28px; font-size: 15px; line-height: 1.6; }
  .empty-domains { grid-column: 1 / -1; padding: 40px 24px; font-size: 18px; }

  .contact-section {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(0, 1.3fr);
    gap: 20px 40px;
    margin-top: 88px;
    padding: 0 40px;
    align-items: center;
  }
  .contact-section .section-heading { grid-column: 1; grid-row: 1 / 3; margin: 0; gap: 12px; }
  .contact-section .handwriting { font-size: 32px; }
  .contact-section .cloud-label { font-size: 42px; padding: 14px 22px 17px; }
  .contact-section .heading-spark { font-size: 28px; }
  .contact-card { grid-column: 2; grid-row: 1; min-width: 0; padding: 40px 22px 31px; border-width: 3px; border-radius: 21px 15px 23px 13px; }
  .contact-card-label { position: relative; display: table; top: auto; left: auto; right: auto; max-width: 100%; margin: -62px auto 20px; padding: 7px 16px; border-width: 2px; border-radius: 12px 15px 10px 12px; font-size: 23px; white-space: normal; overflow-wrap: anywhere; }
  .contact-caption { font-size: 17px; line-height: 1.6; }
  
  .copy-hint { font-size: 13px; line-height: 1.6; }
  .eyes { right: 30px; bottom: -3px; height: 43px; width: 65px; }
  .eyes i { width: 24px; height: 40px; border-width: 2px; }
  .eyes i:nth-child(2) { right: 7px; top: 5px; }
  .eyes i::after { bottom: 4px; right: 2px; width: 12px; height: 18px; }
  
  .footer { flex-direction: row; gap: 25px; padding: 68px 44px 36px; }
  .footer-sticker { flex: none; padding: 6px 8px 8px; margin: 0; border-width: 2px; border-radius: 13px 8px 11px 9px; }
  .footer-sticker .sticker { width: 66px; height: 66px; }
  .footer-sticker span:last-child { font-size: 11px; margin-top: 4px; }
  .footer a { font-size: 15px; padding: 10px 16px; }
  
  dialog { width: min(90vw, 460px); }
  
  
}

@media screen and (min-width: 1100px) {
  .hero { padding: 32px 55px 120px; min-height: 473px; }
  .title-wrap { margin-top: 52px; width: 59%; }
  .hero-subtitle { font-size: 30px; }
  .hero-notes { right: 57px; top: 121px; width: 33%; height: 258px; }
  .hero .sticker { width: 169px; height: 177px; }
  .hero-dog { right: 154px; }
  .hero-rock { top: 57px; }
  .hand-note { left: 31px; font-size: 29px; }
  .note-spark { right: 50px; bottom: -15px; }
  .welcome { margin-right: 52px; margin-left: 52px; padding: 32px 36px 27px; }
  .welcome-row p br { display: none; }
  .welcome strong { margin-left: 7px; }
  .collection { padding: 0 52px; margin-top: 61px; }
  .domain-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-section { padding: 0 66px; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.3fr); gap: 20px 70px; }
  .contact-section .section-heading { gap: 17px; }
  .contact-section .handwriting { font-size: 37px; }
  .contact-section .cloud-label { font-size: 48px; padding: 16px 29px 19px; }
  .contact-section .heading-spark { font-size: 34px; }
  .footer { padding-right: 66px; padding-left: 66px; }
}

@media screen and (min-width: 768px) and (max-width: 899px) {
  .hero { min-height: 418px; padding-left: 30px; padding-right: 30px; }
  .hero-notes { right: 29px; width: 34%; top: 124px; height: 215px; }
  .hero .sticker { width: 113px; height: 119px; }
  .hero-dog { right: 102px; }
  .hero-rock { top: 40px; }
  .hand-note { font-size: 22px; left: 4px; bottom: 6px; }
  .note-spark { font-size: 32px; right: 10px; bottom: 13px; }
  .hero-subtitle { font-size: 24px; }
  .hero-spark { font-size: 37px; right: 7px; }
  .welcome { margin-right: 28px; margin-left: 28px; padding-left: 25px; padding-right: 25px; }
  .collection { padding: 0 28px; }
  .folder { padding: 24px 16px; }
  .domain-list { gap: 20px; }
  .domain-top { padding-left: 15px; padding-right: 15px; }
  .domain-top h3 { font-size: 26px; }
  .domain-top h3.long-domain { font-size: 22px; }
  .domain-body { padding: 17px 15px; gap: 9px; }
  .domain-body .sticker { width: 52px; height: 56px; }
  .domain-name { font-size: 18px; }
  .domain-name.long-name { font-size: 15px; }
  .ask-button { padding-right: 8px; padding-left: 8px; font-size: 13px; }
  .price-badge { padding-right: 7px; padding-left: 7px; font-size: 13px; }
  .contact-section { padding: 0 28px; gap: 18px 24px; grid-template-columns: minmax(205px, .8fr) minmax(0, 1.2fr); }
  .contact-section .section-heading { gap: 8px; }
  .contact-section .number-tag { font-size: 29px; }
  .contact-section .handwriting { font-size: 28px; }
  .contact-section .cloud-label { font-size: 36px; padding-right: 17px; padding-left: 17px; }
  .contact-section .heading-spark { display: none; }
  .contact-card { padding-right: 15px; padding-left: 15px; }
  .contact-card-label { font-size: 19px; }
  .contact-caption { font-size: 15px; }
  .footer { padding-right: 31px; padding-left: 31px; }
}

/* Wide desktop: use the available canvas without stretching the card copy. */
@media screen and (min-width: 1440px) {
  .page { width: calc(100% - 96px); max-width: 1360px; }
  .hero { padding-right: 64px; padding-left: 64px; }
  .hero-notes { right: 66px; }
  .collection { padding-right: 56px; padding-left: 56px; }
  .domain-list { gap: 28px; }
  .domain-top { padding: 19px 22px; }
  .domain-top h3 { font-size: 30px; }
  .domain-top h3.long-domain { font-size: 26px; }
  .domain-body { padding: 22px; min-height: 150px; }
  .domain-body .sticker { width: 70px; height: 74px; }
  .browse-tools { grid-template-columns: minmax(240px, 1fr) 220px auto; }
}

/* Contact options share one compact card treatment on the page and in its dialog. */
.contact-methods{display:grid;gap:12px;margin:22px 0 18px;text-align:left}
.contact-method{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;border:2px solid var(--ink);border-radius:13px 8px 14px 9px;background:var(--paper)}
.contact-method-info{flex:1;min-width:0}
.contact-method-label{display:block;font-size:12px;font-weight:650;line-height:1.5;margin-bottom:4px;color:#485240}
.contact-method-value{display:block;font-size:clamp(18px,4.8cqw,26px);font-weight:750;line-height:1.4;overflow-wrap:anywhere;user-select:all;font-variant-numeric:tabular-nums}
.contact-method-email .contact-method-value{font-size:clamp(16px,4.3cqw,21px)}
.contact-method-hint{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:#5c604d}
.contact-email-link:hover{text-decoration:underline;text-underline-offset:3px}
.contact-method-copy{display:flex;align-items:center;justify-content:center;gap:7px;flex:none;max-width:44%;min-height:42px;padding:9px 12px;border:1.5px solid var(--ink);border-radius:7px 9px 6px 8px;background:var(--pink);font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.contact-method-copy:hover{background:#f8aec5}
.contact-method-qq .contact-method-copy{background:var(--blue)}
.contact-method-email .contact-method-copy{background:var(--yellow)}
.contact-card .copy-hint{font-size:12px;line-height:1.7;padding-bottom:4px}
.footer-identity{text-align:center;margin-top:4cqw;min-width:0}
.footer-identity>p{font-family:DomainHand,sans-serif;font-size:4cqw;color:#696354;overflow-wrap:anywhere}
.footer .icp-link{display:block;max-width:100%;margin-top:8px;padding:8px 0;font-size:12px;line-height:1.7;color:#5b5a50;overflow-wrap:anywhere}
.footer .icp-link:hover{text-decoration:underline;text-underline-offset:3px}
.footer-identity>.site-runtime{font-family:DomainSans,"Microsoft YaHei",sans-serif;font-size:12px;line-height:1.85;margin-top:9px;color:#5b5a50;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
dialog .contact-methods{margin-top:18px;margin-bottom:0;gap:10px}
dialog .contact-method{padding:12px;background:#f2f7e8;border-width:1.5px}
dialog .contact-method-value{font-size:20px}
dialog .contact-method-email .contact-method-value{font-size:17px}
@media(min-width:768px){.contact-section .section-heading{grid-row:1}.footer-identity{margin:0 0 0 auto;text-align:right;max-width:60%}.footer-identity>p{font-size:23px}.contact-card{padding-bottom:35px}}
@media(max-width:365px){.contact-method{padding:12px;gap:9px}.contact-method-copy{padding:8px;gap:4px;font-size:12px}.contact-method-value{font-size:18px}.contact-method-email .contact-method-value{font-size:16px}dialog{padding-right:18px;padding-left:18px}dialog .contact-method{padding:10px;gap:8px}dialog .contact-method-value{font-size:18px}}

.contact-method-copy[aria-busy="true"]{cursor:wait;opacity:.75}
@media(min-width:768px){.domain-card:only-child,.friend-link:only-child{grid-column:1/-1;justify-self:center;width:min(100%,480px)}}
.contact-method-copy[aria-busy="true"]::before{content:"";width:12px;height:12px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:copy-spin .7s linear infinite}
@keyframes copy-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.contact-method-copy[aria-busy="true"]::before{animation:none}}

/* The fourth section uses the same paper labels and pink buttons as the collection. */
.build-section .cloud-label{background:var(--blue)}
.build-section .section-heading{margin-bottom:6cqw}
.build-button{display:flex;width:100%;max-width:480px;margin-inline:auto;min-height:48px;padding:14px 24px;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:clamp(16px,4cqw,20px);line-height:1.6}
.build-button>span:first-child{min-width:0}
.build-button:hover{background:#f8aec5}
@media(min-width:768px){.build-section .section-heading{margin-bottom:28px}.build-button{min-height:56px;border-width:2px}}

/* Pagination folds the collection into pages while retaining every card in the HTML. */
.domain-pagination{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:660px;margin:30px auto 3px;padding:20px 0 0;border-top:1.5px dashed #7393a6}
.pagination-summary{font-size:12px;line-height:1.7;color:#405263;font-variant-numeric:tabular-nums;text-align:center}
.pagination-controls,.pagination-pages{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
.pagination-controls{gap:12px}
.pagination-button{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px;padding:9px 10px;border:1.5px solid var(--ink);border-radius:9px 6px 10px 7px;background:var(--paper);font-family:DomainSans,"Microsoft YaHei",sans-serif;font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap}
.pagination-button:hover:not(:disabled){background:#fff1b7}
.pagination-button[aria-current="page"]{background:var(--pink);font-weight:750;box-shadow:2px 2px 0 var(--ink)}
.pagination-button[aria-current="page"]:hover{background:var(--pink)}
.pagination-button:disabled{cursor:default;color:#65717a;border-color:#8b9ea8;background:#dcecf4}
.pagination-step{padding-inline:15px;font-size:13px}
.pagination-ellipsis{display:grid;place-items:center;flex:none;min-width:18px;height:44px;color:#405263;font-size:18px;line-height:1}
.browse-tools{scroll-margin-top:24px}
#result-count:focus-visible{outline:3px solid #2478af;outline-offset:4px;border-radius:3px}
@media(min-width:768px){.domain-list.is-single-result>.domain-card:not([hidden]){grid-column:1/-1;justify-self:center;width:min(100%,480px)}}
@media(max-width:767px){.domain-pagination{margin-top:25px;gap:12px;padding-top:17px}.pagination-controls{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:13px 12px}.pagination-pages{grid-column:1/-1;grid-row:1;gap:6px}.pagination-step{width:100%;font-size:13px}.pagination-summary{font-size:12px}}
@media print{.domain-pagination{display:none!important}}