:root {
  --ink:#60473d; --ink-soft:#846d63; --paper:#f7efdf; --rose:#b85c68; --rose-dark:#963c50;
  --shell:#ece0d0; --stitch:#d3b9a2; --green:#708477; --cream:#fffaf0;
  --shadow:0 11px 30px rgba(102,66,49,.10), 0 2px 4px rgba(102,66,49,.06);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'Trebuchet MS',system-ui,'PingFang SC','Microsoft Yahei',sans-serif;line-height:1.5;background-color:#e9dece;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(79,58,40,.025) 0 1px,transparent 1px 5px),radial-gradient(ellipse at 50% 5%,#f6ece1,#e5d5c3 80%)}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #8465b3;outline-offset:3px}.page-wrap{max-width:1600px;margin:0 auto;padding:22px 24px 14px}.stitched{border:2px solid rgba(154,119,95,.19);outline:1px dashed rgba(150,109,90,.48);outline-offset:-10px;border-radius:18px;box-shadow:var(--shadow);position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fbf1df;padding:20px 31px 22px;min-height:118px}.brand-area{display:flex;align-items:center;gap:20px}.brand-mark{font-size:42px;color:#ba6f75;line-height:1}.eyebrow,.mini-heading{font-size:11px;font-weight:800;letter-spacing:.17em;color:#9a7270;margin:0 0 8px}.brand-area h1{font-size:clamp(24px,2.8vw,38px);letter-spacing:-.06em;line-height:1;margin:0;font-weight:900;color:#674940}.brand-area h1 i{font-family:Georgia,serif;color:#be6c7e;font-size:1.1em;font-weight:400}.brand-period{color:#bd727f}.brand-area p{font-size:13px;margin:9px 0 0;color:#917b6d}.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.model-brief{font-size:12px;color:#79675b;white-space:nowrap;margin-right:8px}.lamp,.live-circle,.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#b9a7a0;margin-right:7px}.lamp.on,.live-circle.on,.status-dot.on{background:#77a37b;box-shadow:0 0 0 3px rgba(119,163,123,.2)}.lamp.error,.status-dot.error{background:#bd6465;box-shadow:0 0 0 3px rgba(189,100,101,.15)}.btn{border:0;border-radius:12px;padding:11px 17px;font-size:13px;font-weight:800;box-shadow:0 4px 0 rgba(80,56,45,.12);transition:transform .15s,box-shadow .15s;white-space:nowrap}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(80,56,45,.18)}.btn-cream{background:#ede1ce;color:#80695b}.btn-raspberry{background:#b95e72;color:#fffaf2}.btn-outline{background:#fff6ed;border:2px dashed #d4a6a3;color:#a25365}.btn small{font-weight:500;opacity:.85}.studio-layout{display:grid;grid-template-columns:minmax(205px,245px) minmax(450px,1fr) minmax(210px,262px);gap:20px;margin-top:22px;align-items:start}.card{background:#fbf5e9;margin-bottom:18px;padding:22px 21px}.rules-card h2{font-family:Georgia,'Songti SC','Noto Serif SC',serif;font-size:23px;line-height:1.46;font-weight:600;margin:13px 0 13px}.rules-card h2 em{color:#ac6370;font-style:normal}.muted{color:#8a776d;font-size:13px;line-height:1.9}.rules-illustration{height:92px;display:flex;align-items:center;justify-content:center;gap:17px;font-size:34px}.rule-eye{display:inline-block;color:#785951;transform:rotate(-12deg);filter:drop-shadow(1px 2px 0 #e4c7bf)}.rule-arrow{color:#c68b93;font-size:28px}.rule-stitched{color:#c88189;font-size:46px}.tip{background:#f4e3db;border:1px dashed #d8b6ad;padding:12px 13px;border-radius:10px;color:#886e68;font-size:12px;line-height:1.8;margin:5px 0}.tip strong{font-weight:800;color:#a96470}.rounds-card{padding-bottom:16px}.round-item{display:flex;align-items:center;gap:9px;padding:11px 7px;border-bottom:1px dashed #dcc8b6;font-size:12px;color:#9a897c;transition:.2s}.round-item:last-child{border:0}.round-item.active{background:#f3e0df;color:#8d4e57;border-radius:9px;font-weight:800}.round-item.done{color:#718b75}.round-num{font-size:11px;letter-spacing:.03em;color:#bc9184}.round-name{flex:1}.round-count{font-size:11px;font-weight:800}.handwritten-note{font-family:Georgia,'Songti SC',serif;font-style:italic;text-align:center;transform:rotate(-3deg);color:#a77d76;font-size:18px;margin-top:29px}.handwritten-note small{font-style:normal;font-size:10px;letter-spacing:.08em}.stage-column{min-width:0}.stage-heading{display:flex;justify-content:space-between;align-items:end;gap:10px;padding:2px 4px 17px}.round-label{color:#ad6d77;font-size:11px;letter-spacing:.2em;font-weight:900}.stage-heading h2{font-family:Georgia,'Songti SC',serif;font-size:27px;font-weight:600;margin:3px 0 0}.stage-heading h2 span{color:#b85b70}.stage-progress{text-align:right;white-space:nowrap;line-height:1.2}.stage-progress b{display:block;font-size:25px;color:#ac5e71}.stage-progress>span{font-size:11px;color:#947e70}.stage{position:relative;width:100%;height:min(63vw,600px);min-height:520px;max-height:650px;overflow:hidden;isolation:isolate;background-color:#e8dece;background-image:radial-gradient(ellipse at 55% 45%,rgba(255,255,255,.72),transparent 65%),repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(102,70,46,.03) 0 1px,transparent 1px 4px),linear-gradient(155deg,#eee4d6,#e2d6c7 85%);border-color:#d9c7b6}.stage::after{content:'';pointer-events:none;position:absolute;inset:0;border:18px solid transparent;border-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 12px,rgba(161,130,109,.05) 12px 20px) 18;z-index:11}.top-hint{position:absolute;left:50%;top:22px;transform:translateX(-50%);font-size:10px;font-weight:800;letter-spacing:.23em;color:#b89f90;white-space:nowrap;z-index:6}.stage-sprinkle{position:absolute;z-index:1;color:#cdabb1;opacity:.8}.sprinkle-one{left:14%;top:14%;font-size:26px}.sprinkle-two{right:13%;top:31%;font-size:24px}.sprinkle-three{left:12%;bottom:23%;font-size:19px}.stage-side-note{position:absolute;right:4%;top:57%;transform:rotate(9deg);font-size:10px;font-family:Georgia,serif;color:#b6a19a;letter-spacing:.13em;text-align:center}.doll-body{position:absolute;left:50%;bottom:-16%;width:50%;height:43%;transform:translateX(-50%);z-index:1;border-radius:49% 49% 0 0 / 50% 50% 0 0;background:repeating-linear-gradient(95deg,rgba(255,255,255,.09) 0 3px,rgba(94,62,78,.025) 3px 6px),linear-gradient(120deg,#a69bb1,#c4abc3 60%,#a28ea9);border:3px solid #927f98;box-shadow:inset 7px 9px 17px #e2d3df80,5px 9px 14px #6b55411a}.doll-body::before{content:'';position:absolute;inset:7px;border:2px dashed #e8d8e4;border-radius:inherit}.doll-neck{position:absolute;left:50%;top:-13%;width:20%;height:27%;transform:translateX(-50%);border-radius:28px;background:#ddbc96;border:3px solid #b58c70;z-index:-1}.dress-heart{position:absolute;top:31%;left:50%;transform:translateX(-50%);font-size:38px;color:#ead0d4;text-shadow:1px 2px #907586}.dress-detail{position:absolute;width:50%;height:20%;left:25%;top:1%;border-bottom:4px dashed #e4d6e7;border-radius:0 0 50% 50%}.head-wrap{position:absolute;width:clamp(310px,57%,395px);height:73%;left:50%;top:15%;transform:translateX(-50%);z-index:2}.doll-face{position:absolute;inset:0 3%;background-color:#e6caa9;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.105) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(116,67,37,.035) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 36% 29%,#f2d8b7,#d7ab84 94%);border:4px solid #ad8569;border-radius:48% 48% 46% 46% / 46% 46% 53% 53%;box-shadow:inset 13px 4px 20px #fff9e549,inset -14px -9px 20px #915e3930,0 9px 22px #68492c1c;overflow:hidden}.doll-face::after{content:'';position:absolute;inset:12px;border:2px dashed #ad8467;border-radius:inherit;opacity:.55;pointer-events:none}.face-weave{position:absolute;inset:0;background:repeating-linear-gradient(122deg,transparent 0 8px,rgba(255,255,255,.045) 8px 10px);opacity:.7}.face-center-seam{position:absolute;top:13%;height:73%;width:3px;left:50%;background:repeating-linear-gradient(0deg,#bc9a82 0px 7px,transparent 7px 15px);opacity:.34}.cheek-patch{position:absolute;top:58%;width:25%;height:12%;background:#ca8c89;opacity:.18;border-radius:50%;filter:blur(9px)}.cheek-left{left:8%}.cheek-right{right:8%}.face-stamp{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-7deg);font-size:21px;line-height:1.3;letter-spacing:.15em;font-family:Georgia,serif;text-align:center;color:#b1876f;opacity:.23;pointer-events:none}.doll-ear{position:absolute;top:36%;width:17%;height:22%;border:3px solid #ae8367;background:#ddbd9c;border-radius:45%;z-index:-1}.ear-left{left:-8%}.ear-right{right:-8%}.wool-hair{position:absolute;z-index:5;top:-1%;height:10%;background:#b88b69;border:3px solid #8c6759;border-radius:50%;box-shadow:inset 3px 3px 4px #ebc5a7}.tuft-one{width:31%;left:18%;transform:rotate(-16deg)}.tuft-two{width:38%;left:37%;top:-2%;transform:rotate(10deg)}.tuft-three{width:23%;left:66%;top:1%;transform:rotate(25deg)}.parts-layer{position:absolute;inset:0;z-index:8;pointer-events:none}.stage-bottom-tag{position:absolute;z-index:11;bottom:17px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.22em;color:#b89991;white-space:nowrap}.stage-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 2px}.stage-controls p{font-size:13px;color:#82695f;margin:0}.stage-controls button{min-width:154px}.stage-controls button:hover{background:#f9e4e6}.transition-overlay{position:absolute;inset:0;z-index:30;background:rgba(77,55,53,.3);display:flex;justify-content:center;align-items:center;backdrop-filter:blur(3px);transition:opacity .25s}.transition-overlay.hidden{display:none}.transition-card{background:#fff1e3;padding:31px 38px;text-align:center;min-width:min(86%,360px);animation:popin .4s both}.transition-card span{display:block;font-size:10px;color:#be7f8a;letter-spacing:.2em}.transition-card strong{display:block;font-size:25px;margin:12px 0;font-family:Georgia,'Songti SC',serif}.transition-card small{color:#a08a7d}.catch-sparkles{position:absolute;z-index:25;inset:0;pointer-events:none}.spark{position:absolute;font-size:26px;color:#df909e;animation:sparkle .75s ease-out both;transform:translate(-50%,-50%)}@keyframes sparkle{0%{opacity:1;transform:translate(-50%,-50%) scale(.1)}50%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1.35)}}@keyframes popin{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
/* The falling felt parts are actual DOM objects, not a background image. */
.feature{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transform-origin:center center;filter:drop-shadow(1px 4px 2px rgba(73,46,32,.26));will-change:transform;--eye-close:0;--mouth-open:0;--smile:0;--brow-up:0;--nose-wiggle:0}.feature.captured{filter:drop-shadow(1px 2px 1px rgba(65,41,35,.25))}.feature.captured::after{content:'✕';position:absolute;right:2px;top:4px;font-size:12px;transform:rotate(14deg);color:#c18e7b;opacity:.7}.eye-feature{width:76px;height:56px}.eye-shape{width:69px;height:46px;border-radius:58% 42% 56% 44% / 55% 55% 45% 45%;position:relative;background:linear-gradient(125deg,#fff9ed,#eddfd5);border:4px solid #88635b;box-shadow:inset 1px 2px 2px #fff9f0,0 3px 1px #ac7e6d;overflow:hidden;transform:scaleY(var(--eye-scale,1));transition:transform .06s}.eye-shape::after{content:'';position:absolute;top:-9px;left:0;width:100%;height:13px;background:var(--lid-color,#9c7770);border-radius:50%}.iris{position:absolute;width:34px;height:34px;border-radius:50%;left:50%;top:47%;transform:translate(-50%,-50%);background:var(--iris,#7e6b58);border:3px solid #66524a;box-shadow:inset 4px 3px 4px #ffffff36}.pupil{position:absolute;width:15px;height:15px;left:50%;top:48%;transform:translate(-50%,-50%);border-radius:50%;background:#393331}.pupil::after{content:'';position:absolute;width:7px;height:7px;left:1px;top:0;border-radius:50%;background:white}.eye-feature[data-style="button"] .eye-shape{border-radius:50%;width:47px;height:47px;background:#7d6a6c;border:5px solid #b89888;box-shadow:inset 3px 4px 6px #4f4647}.eye-feature[data-style="button"] .iris{background:#665157;border:0;width:0;height:0}.eye-feature[data-style="button"] .pupil{background:radial-gradient(circle at 24% 26%,#ddd 0 4px,transparent 4.5px),radial-gradient(circle at 74% 26%,#ddd 0 4px,transparent 4.5px),radial-gradient(circle at 24% 76%,#ddd 0 4px,transparent 4.5px),radial-gradient(circle at 74% 76%,#ddd 0 4px,transparent 4.5px);width:27px;height:27px}.eye-feature[data-style="sleepy"] .eye-shape{height:31px;border-radius:55% 55% 48% 48%;background:#f2d4d0}.nose-feature{width:64px;height:66px}.nose-shape{display:block;width:48px;height:49px;background:var(--nose-color,#bf8479);border:3px solid #956c60;box-shadow:inset 5px 4px 4px #ffffff40;border-radius:45% 48% 57% 56% / 65% 64% 34% 35%;transform:scaleX(var(--nose-scale,1)) rotate(var(--nose-tilt,0deg))}.nose-feature[data-style="triangle"] .nose-shape{clip-path:polygon(50% 8%,97% 93%,4% 93%);border-radius:15%;background:#c9898a;border:0}.nose-feature[data-style="button"] .nose-shape{width:43px;height:43px;border-radius:50%;background:#ae7d60}.nose-feature[data-style="button"] .nose-shape::after{content:'··';display:block;text-align:center;font-size:38px;line-height:17px;color:#765845;position:relative;top:9px}.mouth-feature{width:98px;height:61px}.mouth-shape{width:81px;height:36px;border:5px solid #a65767;border-top:0;border-radius:0 0 75% 75% / 0 0 100% 100%;background:linear-gradient(#d99fa4,#b96675);box-shadow:inset 0 -5px 5px #9d546440;transform:scaleX(var(--mouth-width,1)) scaleY(var(--mouth-stretch,1));transform-origin:50% 20%}.mouth-feature[data-style="stitched"] .mouth-shape{height:23px;border:0;border-bottom:6px dashed #9d5362;background:none}.mouth-feature[data-style="oval"] .mouth-shape{height:36px;width:38px;border:5px solid #b6777e;background:#7b4b51;border-radius:50%;transform:scaleY(var(--mouth-stretch,1)) scaleX(var(--mouth-width,1))}.mouth-feature[data-style="lips"] .mouth-shape{height:31px;border:5px solid #b66a7c;border-radius:50% 50% 55% 55%;background:#d98e9b}.brow-feature{width:99px;height:47px}.brow-shape{width:86px;height:26px;border-top:11px solid var(--brow-color,#866051);border-radius:56% 80% 0 0;box-shadow:0 -2px #faf3df2e;transform:translateY(var(--brow-shift,0px)) rotate(-5deg)}.brow-feature[data-style="straight"] .brow-shape{border-radius:16px;width:87px;transform:translateY(var(--brow-shift,0px)) rotate(7deg)}.brow-feature[data-style="crooked"] .brow-shape{width:80px;border-radius:0 95% 0 0;border-top-width:9px;transform:translateY(var(--brow-shift,0px)) rotate(-12deg)}
.camera-card{padding:19px 17px 16px}.panel-title{font-size:11px;font-weight:900;letter-spacing:.17em;display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.webcam-window{aspect-ratio:4/3;position:relative;overflow:hidden;border:7px solid #e1c4b8;border-radius:13px;background:#b5aaa4;box-shadow:inset 1px 2px 8px #675d574a}.webcam-window video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff3e7;background:linear-gradient(125deg,#bcaea7,#978c87);font-size:12px;gap:5px}.camera-message.hidden{display:none}.camera-glyph{font-size:43px;color:#ead6c0}.camera-corner{position:absolute;width:18px;height:18px;border:2px solid #fff9e8;pointer-events:none}.camera-corner.c1{top:8px;left:8px;border-right:0;border-bottom:0}.camera-corner.c2{right:8px;bottom:8px;border-left:0;border-top:0}.tracker-status{margin-top:14px;font-size:12px;color:#857268}.info-strip{margin-top:13px;padding-top:11px;border-top:1px dashed #d8c4b3;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#9b857a}.info-strip strong{color:#a66c78}.expression-card{padding:19px 17px 17px}.expression-icons{display:flex;align-items:center;justify-content:space-evenly;gap:8px;font-size:30px;color:#a95f70;margin:15px 0}.eyeblink-word{font-size:10px;letter-spacing:.12em;font-weight:800;color:#946b65}.bar-label{display:flex;justify-content:space-between;font-size:12px;color:#8d7668}.level-bar{height:11px;background:#e8d5ce;border-radius:11px;position:relative;overflow:hidden;margin:8px 0 10px}.level-bar>div{height:100%;width:0;background:linear-gradient(90deg,#c9a1a2,#b85b73);transition:width .09s}.level-threshold{position:absolute;height:100%;border-left:2px dashed #8e6261;left:58%;top:0}.subtle{font-size:11px;color:#a1897c;line-height:1.8;margin:11px 0 0}.detect-feedback{font-size:11px;font-weight:700;margin-top:11px;color:#af6d7a;background:#f5e5e4;border:1px solid #edcece;border-radius:8px;padding:8px 9px}.help-card{padding:20px 18px}.help-step{display:flex;gap:12px;align-items:start;border-bottom:1px dashed #ddc6b5;padding:8px 0}.help-step:last-child{border-bottom:0}.help-step span{font-family:Georgia,serif;color:#b77884;font-size:22px;line-height:1.1}.help-step p{margin:0;font-size:12px;line-height:1.8;color:#85756d}.footer-line{display:flex;justify-content:space-between;gap:12px;padding:24px 8px 0;color:#a28a7d;font-size:10px;font-weight:700;letter-spacing:.12em}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(18px);padding:12px 20px;background:#654b49;color:#fff8ee;border-radius:12px;box-shadow:0 8px 30px #53342340;z-index:100;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:min(92vw,650px);text-align:center;font-size:13px}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:1220px){.studio-layout{grid-template-columns:205px minmax(400px,1fr)}.right-rail{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.right-rail .card{margin-bottom:0}.stage{height:590px}.topbar{padding:20px}.brand-area h1{font-size:30px}}@media(max-width:780px){.page-wrap{padding:11px}.topbar{flex-direction:column;align-items:start;padding:22px}.studio-layout{display:flex;flex-direction:column}.stage-column{order:0;width:100%}.left-rail{order:1;width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.left-rail .card{margin:0}.handwritten-note{display:none}.right-rail{order:2;display:grid;grid-template-columns:1fr 1fr;width:100%}.right-rail .help-card{grid-column:1/-1}.stage{height:560px;min-height:500px}.head-wrap{width:58%;min-width:260px}.stage-controls{flex-direction:column;align-items:stretch}.stage-controls p{text-align:center}}@media(max-width:500px){.brand-area{gap:10px}.brand-mark{font-size:30px}.brand-area h1{font-size:27px}.topbar-actions{justify-content:flex-start}.stage{height:510px;min-height:510px}.head-wrap{width:74%;min-width:245px}.stage-heading h2{font-size:23px}.left-rail,.right-rail{display:block}.left-rail .card,.right-rail .card{margin-bottom:13px}.footer-line{flex-direction:column;text-align:center;gap:4px}.stage-side-note{display:none}}

/* A gentle cue when one falling part is inside the doll face. */
.ready-hint{position:absolute;top:18%;left:50%;transform:translateX(-50%) translateY(7px);z-index:12;opacity:0;pointer-events:none;background:#b55c70;color:#fff9ef;font-size:11px;font-weight:900;letter-spacing:.12em;border-radius:999px;padding:7px 13px;box-shadow:0 4px 10px #8b52663b;transition:opacity .2s,transform .2s;white-space:nowrap}.ready-hint.visible{opacity:1;transform:translateX(-50%) translateY(0)}.doll-face.can-catch{border-color:#bc6a7c;box-shadow:inset 13px 4px 20px #fff9e549,inset -14px -9px 20px #915e3930,0 0 0 4px #c16a7b38,0 9px 22px #68492c1c}

/* --------------------------------------------------------------------------
   HANDMADE FEATURE KIT
   The moving .feature owns game positioning. Every decorative transform lives
   on a child, so falling, collision detection and saved face coordinates stay
   independent from the felt styling and expression animation.
   -------------------------------------------------------------------------- */
.stage {
  background-color:#e7dac9;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(191,112,126,.13) 0 3px,transparent 3.5px),
    radial-gradient(circle at 87% 74%,rgba(107,139,128,.12) 0 4px,transparent 4.5px),
    repeating-linear-gradient(2deg,rgba(255,255,255,.12) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(92deg,rgba(93,61,43,.025) 0 1px,transparent 1px 6px),
    radial-gradient(ellipse at 52% 43%,#f7f0e5 0,#e8ddcd 66%,#ddcdbb 100%);
}
.doll-face {
  background-image:
    repeating-linear-gradient(4deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(94deg,rgba(101,61,37,.04) 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 34% 25%,#f4dab8,#d4a77f 94%);
  box-shadow:inset 13px 7px 20px #fff9e552,inset -16px -11px 23px #8e5d3938,0 12px 24px #68492c24;
}
.feature {
  overflow:visible;
  isolation:isolate;
  filter:drop-shadow(0 5px 3px rgba(78,49,34,.22)) drop-shadow(0 1px 0 rgba(255,255,255,.62));
}
.feature-art {
  position:relative;
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  transform-origin:50% 50%;
  animation:felt-float var(--float-duration,2.8s) ease-in-out var(--float-delay,0s) infinite;
}
.feature.captured {
  filter:drop-shadow(0 3px 2px rgba(65,41,35,.23)) drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
.feature.captured .feature-art {animation:stitch-settle .62s cubic-bezier(.2,.9,.25,1.25) both}
.feature.captured::before,
.feature.captured::after {
  content:'';
  position:absolute;
  inset:-7px;
  z-index:5;
  pointer-events:none;
  border-radius:48%;
}
.feature.captured::after {
  border:2px dashed #f7e9d6;
  box-shadow:0 0 0 1px rgba(139,91,76,.48);
  animation:sew-ring .68s ease-out both;
}
.feature.captured::before {
  inset:auto -2px -3px auto;
  width:18px;
  height:13px;
  border-bottom:2px solid #945e57;
  border-radius:50%;
  transform:rotate(-25deg);
  animation:thread-tail .72s ease-out both;
}
.feature.captured.stitched-in::after {opacity:0}

/* Eyes: layered wool-white felt, coloured felt iris, embroidery and lashes. */
.eye-feature {width:76px;height:56px}
.eye-shape {
  position:relative;
  width:70px;
  height:47px;
  overflow:hidden;
  border:3px solid #79584f;
  border-radius:57% 43% 55% 45% / 58% 57% 43% 42%;
  background:
    repeating-linear-gradient(7deg,rgba(125,93,75,.06) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 35% 27%,#fffdf4 0,#f4e6d9 70%,#ddc9bb 100%);
  box-shadow:inset 2px 3px 2px rgba(255,255,255,.8),inset -3px -4px 5px rgba(118,78,61,.17),0 3px 0 #b98978;
  transform:scaleY(var(--eye-scale,1));
  transform-origin:50% 54%;
  transition:transform .075s linear;
}
.eye-shape::before {
  content:'';
  position:absolute;
  inset:3px;
  border:1.5px dashed rgba(151,101,84,.56);
  border-radius:inherit;
  z-index:3;
  pointer-events:none;
}
.eye-shape::after {
  content:'';
  position:absolute;
  left:3px;
  right:3px;
  top:-8px;
  height:15px;
  border-bottom:2px dashed rgba(83,58,53,.72);
  border-radius:50%;
  background:var(--lid-color,#b4877f);
  box-shadow:inset 0 -2px 3px rgba(90,55,50,.16);
  z-index:4;
}
.iris {
  position:absolute;
  left:50%;
  top:50%;
  width:35px;
  height:35px;
  transform:translate(-50%,-50%);
  border:3px solid #5f5149;
  border-radius:50%;
  background:
    repeating-conic-gradient(rgba(255,255,255,.17) 0 5deg,transparent 5deg 17deg),
    radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--iris) 65%,white),var(--iris) 52%,color-mix(in srgb,var(--iris) 70%,#342d2a));
  box-shadow:inset 2px 3px 4px rgba(255,255,255,.28),0 1px 2px rgba(59,45,40,.35);
}
.pupil {
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:15px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#332f2d;
  box-shadow:0 0 0 1px rgba(44,35,32,.28);
}
.pupil::after {content:'';position:absolute;left:1px;top:0;width:6px;height:6px;border-radius:50%;background:#fffdf5;box-shadow:8px 8px 0 -2px rgba(255,255,255,.72)}
.lash {
  position:absolute;
  top:6px;
  width:15px;
  height:17px;
  z-index:6;
  border-top:2px solid #3f3734;
}
.lash::before,.lash::after {content:'';position:absolute;top:-5px;width:2px;height:10px;border-radius:2px;background:#3f3734;box-shadow:4px -1px 0 #3f3734}
.lash-left {left:7px;transform:rotate(-27deg)}
.lash-left::before {left:1px;transform:rotate(-31deg)}
.lash-left::after {left:8px;transform:rotate(-10deg)}
.lash-right {right:7px;transform:scaleX(-1) rotate(-27deg)}
.lash-right::before {left:1px;transform:rotate(-31deg)}
.lash-right::after {left:8px;transform:rotate(-10deg)}
.eye-feature[data-style="star"] .pupil {width:18px;height:18px;border-radius:0;clip-path:polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 94%,50% 72%,21% 94%,32% 56%,2% 35%,39% 34%);background:#fff3bd;box-shadow:none}
.eye-feature[data-style="star"] .pupil::after {display:none}
.eye-feature[data-style="button"] .eye-shape {width:49px;height:49px;border:4px solid #af8f80;border-radius:50%;background:repeating-radial-gradient(circle at 35% 25%,rgba(255,255,255,.10) 0 1px,transparent 1px 3px),#746368;box-shadow:inset 5px 6px 7px #4f4548,0 3px 0 #997568}
.eye-feature[data-style="button"] .eye-shape::before {inset:4px;border-color:#cfb5a5}
.eye-feature[data-style="button"] .eye-shape::after,.eye-feature[data-style="button"] .lash {display:none}
.eye-feature[data-style="button"] .iris {width:29px;height:29px;border:0;background:transparent;box-shadow:none}
.eye-feature[data-style="button"] .pupil {width:29px;height:29px;border-radius:50%;background:radial-gradient(circle at 27% 27%,#eadfd2 0 3.5px,transparent 4px),radial-gradient(circle at 73% 27%,#eadfd2 0 3.5px,transparent 4px),radial-gradient(circle at 27% 73%,#eadfd2 0 3.5px,transparent 4px),radial-gradient(circle at 73% 73%,#eadfd2 0 3.5px,transparent 4px)}
.eye-feature[data-style="button"] .pupil::after {display:none}
.eye-feature[data-style="embroidered"] .eye-shape {height:36px;background:linear-gradient(145deg,#e8babb,#c88d98);border-color:#9a6470}
.eye-feature[data-style="embroidered"] .iris {width:43px;height:18px;top:43%;border:0;border-bottom:5px solid #5b4443;border-radius:0 0 55% 55%;background:none;box-shadow:0 2px 0 rgba(255,239,224,.26)}
.eye-feature[data-style="embroidered"] .pupil {display:none}
.eye-feature[data-style="embroidered"] .eye-shape::after {background:#d69fa7}

/* Noses: stuffed felt patches with a separate inner seam. */
.nose-feature {width:64px;height:66px}
.nose-shape {
  position:relative;
  display:block;
  width:48px;
  height:49px;
  overflow:hidden;
  border:3px solid color-mix(in srgb,var(--nose-color) 68%,#58463e);
  border-radius:46% 51% 58% 55% / 64% 63% 37% 36%;
  background:
    repeating-linear-gradient(110deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 32% 25%,color-mix(in srgb,var(--nose-color) 60%,white),var(--nose-color) 55%,color-mix(in srgb,var(--nose-color) 78%,#5e4039));
  box-shadow:inset 5px 5px 5px rgba(255,255,255,.28),inset -4px -5px 6px rgba(89,53,44,.2),0 4px 0 rgba(116,75,63,.27);
  transform:scaleX(var(--nose-scale,1)) rotate(var(--nose-tilt,0deg));
  transition:transform .09s linear;
}
.nose-stitches {position:absolute;inset:4px;border:2px dashed rgba(255,236,215,.72);border-radius:inherit;filter:drop-shadow(0 1px 0 rgba(92,56,47,.34))}
.nose-feature[data-style="triangle"] .nose-shape {width:53px;height:49px;border:0;clip-path:polygon(50% 4%,97% 92%,93% 98%,8% 98%,3% 92%);border-radius:0;background:linear-gradient(125deg,#edb8b5,#c47d83 68%,#9f646d)}
.nose-feature[data-style="triangle"] .nose-stitches {inset:7px 8px 5px;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.nose-feature[data-style="button"] .nose-shape {width:45px;height:45px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#cf9b78,#9a684f 72%);border:4px solid #835d4b}
.nose-feature[data-style="button"] .nose-stitches {inset:9px;border:0;background:radial-gradient(circle at 28% 28%,#5e493f 0 3px,transparent 3.5px),radial-gradient(circle at 72% 28%,#5e493f 0 3px,transparent 3.5px),radial-gradient(circle at 28% 72%,#5e493f 0 3px,transparent 3.5px),radial-gradient(circle at 72% 72%,#5e493f 0 3px,transparent 3.5px)}
.nose-feature[data-style="heart"] .nose-shape {width:48px;height:44px;border:0;border-radius:46% 46% 48% 48%;clip-path:polygon(50% 96%,8% 52%,3% 31%,10% 13%,25% 5%,39% 10%,50% 23%,61% 10%,75% 5%,90% 13%,97% 31%,92% 52%);background:linear-gradient(135deg,#edaaa9,var(--nose-color) 64%,#a95d68)}
.nose-feature[data-style="heart"] .nose-stitches {inset:5px 6px 7px;clip-path:inherit;border-radius:35%}

/* Mouths: felt appliques keep their inner volume when jawOpen stretches them. */
.mouth-feature {width:98px;height:61px}
.mouth-shape {
  position:relative;
  display:block;
  width:82px;
  height:37px;
  overflow:hidden;
  border:4px solid #934f5e;
  border-top-width:2px;
  border-radius:26% 26% 62% 62% / 25% 25% 80% 80%;
  background:radial-gradient(ellipse at 50% 12%,#7a404b 0 32%,#b95f73 34% 68%,#d88891 69%);
  box-shadow:inset 0 -4px 5px rgba(105,44,57,.27),0 3px 0 rgba(122,73,70,.25);
  transform:scaleX(var(--mouth-width,1)) scaleY(var(--mouth-stretch,1));
  transform-origin:50% 16%;
  transition:transform .085s linear;
}
.mouth-shape::after {content:'';position:absolute;inset:3px;border:1.5px dashed rgba(255,218,202,.7);border-radius:inherit;z-index:4}
.mouth-detail {position:absolute;left:18%;right:18%;bottom:2px;height:10px;border-radius:50% 50% 10px 10px;background:#e9a1a0;box-shadow:inset 0 2px 2px rgba(117,52,63,.3)}
.mouth-feature[data-style="stitched"] .mouth-shape {height:31px;border:0;background:none;box-shadow:none;overflow:visible}
.mouth-feature[data-style="stitched"] .mouth-shape::before {content:'';position:absolute;left:7px;right:7px;top:2px;height:23px;border-bottom:6px solid #8d4b5a;border-radius:0 0 52% 52%;background:repeating-linear-gradient(118deg,transparent 0 7px,#e5b9aa 7px 9px,transparent 9px 15px)}
.mouth-feature[data-style="stitched"] .mouth-shape::after {inset:8px 12px 0;border:0;border-bottom:2px dashed #f4d2bd;border-radius:50%}
.mouth-feature[data-style="stitched"] .mouth-detail {display:none}
.mouth-feature[data-style="open"] .mouth-shape {width:46px;height:39px;border-radius:50%;background:radial-gradient(ellipse at 50% 60%,#d5848e 0 20%,#6d3d47 22% 100%)}
.mouth-feature[data-style="teeth"] .mouth-shape {height:36px;border-radius:20% 20% 65% 65%;background:#7c424e}
.mouth-feature[data-style="teeth"] .mouth-detail {left:8px;right:8px;top:4px;bottom:auto;height:14px;border-radius:7px 7px 4px 4px;background:repeating-linear-gradient(90deg,#fff9e9 0 13px,#d8c7b6 13px 14px);box-shadow:inset 0 -2px 2px #c9ac9b}
.mouth-feature[data-style="heart"] .mouth-shape {width:58px;height:43px;border:0;border-radius:38%;clip-path:polygon(50% 97%,7% 53%,3% 32%,9% 14%,24% 5%,39% 9%,50% 23%,61% 9%,76% 5%,91% 14%,97% 32%,93% 53%);background:linear-gradient(140deg,#ed9ba7,#bd5d72 66%,#964557)}
.mouth-feature[data-style="heart"] .mouth-shape::after {inset:5px 7px 7px;clip-path:inherit;border-radius:30%}
.mouth-feature[data-style="heart"] .mouth-detail {left:31%;right:31%;bottom:10px;height:5px;background:#7e3f4c}

/* Brows: thick yarn with visible twisted fibres. */
.brow-feature {width:99px;height:47px}
.brow-shape {
  position:relative;
  width:87px;
  height:29px;
  overflow:hidden;
  border-top:12px solid var(--brow-color,#866051);
  border-radius:56% 80% 0 0;
  background:none;
  filter:drop-shadow(0 3px 1px rgba(75,48,40,.24));
  transform:translateY(var(--brow-shift,0px)) rotate(-5deg);
  transition:transform .1s linear;
}
.brow-shape::after {content:'';position:absolute;left:5px;right:3px;top:-10px;height:8px;border-top:2px dashed color-mix(in srgb,var(--brow-color) 50%,white);border-radius:50%}
.brow-fiber {position:absolute;left:11px;right:9px;top:-9px;height:8px;background:repeating-linear-gradient(108deg,transparent 0 7px,rgba(255,244,226,.38) 7px 9px,transparent 9px 14px);transform:rotate(-3deg)}
.brow-feature[data-style="straight"] .brow-shape {width:87px;border-radius:14px;transform:translateY(var(--brow-shift,0px)) rotate(7deg)}
.brow-feature[data-style="crooked"] .brow-shape {width:80px;border-radius:0 95% 0 0;border-top-width:9px;transform:translateY(var(--brow-shift,0px)) rotate(-12deg)}

@keyframes felt-float {
  0%,100% {transform:translateY(-1px) rotate(-1.4deg)}
  50% {transform:translateY(2px) rotate(1.6deg)}
}
@keyframes stitch-settle {
  0% {transform:scale(1) rotate(0)}
  42% {transform:scale(.88) rotate(-4deg)}
  72% {transform:scale(1.07) rotate(2deg)}
  100% {transform:scale(1) rotate(0)}
}
@keyframes sew-ring {
  0% {opacity:0;transform:scale(1.28) rotate(-18deg)}
  30% {opacity:1}
  100% {opacity:0;transform:scale(.92) rotate(8deg)}
}
@keyframes thread-tail {
  0% {opacity:0;transform:translate(15px,-10px) rotate(-55deg) scale(.3)}
  45% {opacity:1}
  100% {opacity:0;transform:translate(0,0) rotate(-25deg) scale(1)}
}
@media (prefers-reduced-motion:reduce) {
  .feature-art {animation:none}
  .feature.captured .feature-art {animation:stitch-settle .01s both}
  .feature.captured::after,.feature.captured::before {animation-duration:.01s}
}