/* Rounded type and bright, close-up craft materials. */
:root { --paper:#fffcf6;--purple:#f33465;--purple-dark:#bd2450;--mint:#34dba0;--blue:#26bfee; }
h1,h2,.brand-name { font-family:"KN Maiyuan","PingFang SC",sans-serif;font-weight:400;letter-spacing:.015em!important; }
h1 { -webkit-text-stroke:.45px currentColor; }
h2,.brand-name { -webkit-text-stroke:.15px currentColor; }
.brand-name { font-size:23px; }.brand-sub { display:block;margin-top:1px; }
.hero-copy h1 { font-size:60px;line-height:1.22; }.hero-copy h1 span { color:#f33465; }
.hero-desc { color:#635e67; }.home-hero { min-height:466px;grid-template-columns:.9fr 1.1fr;gap:35px; }
.studio-scene { height:398px;background:#cff1e9;border-radius:32px;box-shadow:0 14px 28px #4c887a1c; }
.studio-scene:before { background:radial-gradient(ellipse at 10% 15%,#f7fff7 0,transparent 65%),linear-gradient(130deg,#d4f5e9,#bce5f6); }
.mat { left:6%;top:29px;bottom:auto;width:65%;height:315px;border:7px solid #fffef7;border-radius:12px;padding:0;background-color:#f7f7ee;background-image:radial-gradient(#d4d8d0 1px,transparent 1.5px);background-size:10px 10px;transform:rotate(-7deg);box-shadow:2px 7px 0 #c9cfc4,5px 18px 25px #3d706b3b; }
#heroCanvas { position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px); }
.mat-rim { display:none; }
.hero-portrait { position:absolute;right:5%;bottom:39px;width:32%;height:205px;padding:8px;background:#fffdf6;transform:rotate(9deg);box-shadow:3px 5px 0 #d9c6b5,5px 14px 18px #2e4d5838;z-index:3;border-radius:4px; }
#heroPortrait { width:100%;height:100%;display:block; }
.hero-note { position:absolute;right:22px;top:24px;font-family:"KN Maiyuan",sans-serif;font-size:21px;color:#226c66;transform:rotate(7deg);line-height:1.3; }
#materialCanvas { position:absolute;bottom:9px;left:25px;width:140px;height:53px;z-index:4; }
.pattern-thumb { aspect-ratio:1.03; }.pattern-thumb canvas { display:block;width:94%;height:94%; }
.pattern-name { display:block;font-size:15px;margin:12px 4px 7px; }
.pattern-detail { gap:5px;flex-wrap:wrap; }.pattern-card { padding:11px; }
.modal-scene { height:320px;background:#edf5ee; }.modal-scene canvas { width:280px;height:300px; }
.art-credit { font-size:10px!important;color:#79737d!important; }.art-credit:empty { display:none; }.art-credit a { color:inherit; }
.color-pick { border-radius:50%;background-color:transparent!important;border:0;box-shadow:none;width:38px;height:43px;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important; }
.color-pick:after,.big-color:after { display:none; }.color-pick.active { outline:2px solid #f33465; }
.big-color { width:48px;height:53px;border-radius:0;background-color:transparent!important;background-size:contain!important;background-repeat:no-repeat!important;box-shadow:none; }
.board-stage { background:linear-gradient(135deg,#fcfcf8,#e9eee8); }
.theme-card.primary { background:#d3f5e5; }.theme-card.pink { background:#ffe0e9; }.theme-card.mint { background:#d6edff; }
.mobile-nav .nav-btn.active { color:#cf2452; }
.sr-only { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.home-hero { grid-template-columns:minmax(0,2.45fr) minmax(240px,1fr);gap:32px;padding:27px 0 38px;min-height:0; }
.hero-photograph { position:relative;min-width:0;overflow:hidden;border-radius:25px;box-shadow:0 12px 30px #916b3720; }
.hero-photograph img { display:block;width:100%;height:auto; }
.hero-image-caption { position:absolute;bottom:10px;left:12px;font-size:10px;color:#5c4b42;background:#fff9eade;padding:4px 8px;border-radius:5px; }
.hero-copy { padding:0; }
.hero-copy .eyebrow { font-size:12px;color:#786052;letter-spacing:0; }
.hero-copy h2 { font-family:"KN Maiyuan",sans-serif;font-size:42px;line-height:1.35;color:#654638;margin:19px 0 14px; }
.hero-copy .hero-desc { font-size:13px;line-height:1.9;color:#725f54; }
.hero-copy .button-row { flex-direction:column;align-items:stretch;gap:14px;max-width:230px; }
.material-sample { margin-top:26px;display:flex;flex-direction:column;gap:6px; }
.material-sample #materialCanvas { position:static;width:155px;height:65px; }
.material-sample span { color:#816d62;font-size:11px; }
.pattern-thumb { position:relative;background:linear-gradient(135deg,#fffefa,#f1ebe1)!important;isolation:isolate; }
.pattern-thumb:before { content:"";position:absolute;inset:12px;background-color:#fffdf4;background-image:radial-gradient(circle,#d5cfc2 0 .65px,transparent .85px);background-size:7px 7px;border:5px solid #fffdf7;box-shadow:1px 4px 0 #d8d0c2,4px 8px 11px #7c6d5820;border-radius:6px;transform:rotate(-3deg);z-index:-1; }
.pattern-thumb canvas { width:92%;height:92%;transform:rotate(-3deg); }
.pattern-card:nth-child(3n+2) .pattern-thumb:before,.pattern-card:nth-child(3n+2) .pattern-thumb canvas { transform:rotate(3deg); }
.pattern-card { border-color:#ebe2d8;box-shadow:0 5px 15px #866d4910; }
.pattern-name { line-height:1.6; }.filter-chip { min-height:44px; }
.modal-scene { background-color:#f4f0e7;background-image:radial-gradient(#cbc6b5 .7px,transparent 1px);background-size:10px 10px; }
.modal-scene canvas { width:min(100%,340px);height:300px; }
.art-credit { font-size:11px!important;line-height:1.6; }
.modal { max-height:calc(100dvh - 36px);overflow:auto; }
.preview-switch { display:flex;justify-content:center;gap:6px;margin:-6px 0 15px; }
.preview-switch button { min-height:40px;padding:0 17px;font-size:12px;border:1px solid #e9dfd2;border-radius:20px;background:#fffdf7;color:#786052;cursor:pointer; }
.preview-switch button[aria-pressed="true"] { background:#ffe0e9;border-color:#f9b5c8;color:#ac2245; }
@media(min-width:641px) and (max-width:960px){
  .home-hero { grid-template-columns:minmax(0,1.8fr) minmax(205px,1fr);gap:22px; }
  .hero-copy h2 { font-size:33px; }.material-sample { display:none; }
}
@media(prefers-reduced-motion:reduce){html { scroll-behavior:auto; }*,*:before,*:after { animation:none!important;transition:none!important; }}
@media(max-width:640px){
  .brand-name { font-size:21px; }.brand-sub { display:none; }
  .hero-copy h1 { font-size:43px;line-height:1.18; }.home-hero { gap:24px; }
  .studio-scene { height:320px;border-radius:25px; }
  .mat { height:243px;width:69%;left:5%;top:22px;border-width:5px; }
  .hero-portrait { height:158px;width:32%;right:5%;bottom:32px;padding:6px; }
  .hero-note { display:none; }
  #materialCanvas { width:110px;height:44px;bottom:4px;left:22px; }
  .pattern-name { font-size:13px; }.pattern-detail { font-size:10px; }
  .modal-scene { height:280px; }.modal-scene canvas { width:250px;height:260px; }
  .section-head h2 { font-size:23px; }.page-title h1 { font-size:31px; }
  .home-hero { gap:18px;padding:16px 0 26px; }
  .hero-photograph { border-radius:17px; }
  .hero-image-caption { font-size:8px;bottom:6px;left:8px; }
  .hero-copy { text-align:center; }
  .hero-copy .eyebrow,.hero-copy .hero-desc,.material-sample { display:none; }
  .hero-copy h2 { font-size:24px;margin:0 0 17px; }
  .hero-copy h2 br { display:none; }
  .hero-copy .button-row { max-width:none;flex-direction:row;justify-content:center;gap:12px; }
  .hero-copy .btn { padding:0 17px;font-size:13px; }
  .pattern-thumb:before { inset:8px;border-width:3px;background-size:5px 5px; }
}