/* 知序 V3.1.1: a single-color, draggable character playground. */
:root{--blue:#2450E7;--paper:#F4F5F0;--pink:#F5B4CF;--pink-soft:#FCECF3;--blue-soft:#EDF0FD;--ink:#1C231F;--muted:#626A65;--line:#DDE2ED;--white:#FFFFFF;--error:#A9362B;--panel-ease:cubic-bezier(.2,.82,.22,1)}
body{overflow-x:hidden;background:var(--blue);font-family:Noto,"Noto Sans SC","PingFang SC",sans-serif}
body.form-panel-open{overflow:hidden}
body.form-panel-open .start-screen{z-index:50}
.header{position:absolute;z-index:30;inset:0 0 auto;height:110px;margin:0;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;border:0;color:var(--paper);pointer-events:none}
.header .brand{display:flex;align-items:center;gap:11px;pointer-events:auto}.header .brand>img.brand-logo:first-child{display:block;width:38px;height:38px}.header .brand>img.brand-wordmark{display:block;width:110px;height:auto}.header-right{display:flex;align-items:center}.header .beta{min-height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid #F4F5F059;border-radius:999px;color:var(--paper);font-size:9px;letter-spacing:.08em}
.start-screen{position:relative;isolation:isolate;display:block;height:100svh;min-height:660px;overflow:hidden;background:var(--blue);color:var(--paper);--pull:0px;--burst-scale:1}
.play-dots{position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:radial-gradient(var(--pink) 1.4px,transparent 1.4px);background-size:44px 44px;opacity:0;transition:opacity .4s}.start-screen.is-playing .play-dots{opacity:.24}
.hero-copy{position:absolute;z-index:5;left:50%;top:16%;width:max-content;transform:translateX(-52%) rotate(-5deg);text-align:left;pointer-events:none;animation:headingEnter var(--m-intro,.8s) var(--panel-ease) both}
.hero-kicker{margin:0 0 12px 3px;font-family:Work,sans-serif;font-weight:600;letter-spacing:.14em;font-size:9px;color:var(--pink)}
.hero-copy h1{margin:0;width:auto;color:var(--paper);font-size:clamp(32px,3.25vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1.15}
.playground{position:absolute;z-index:4;left:50%;top:51%;width:300px;height:320px;transform:translate(-50%,-50%);--toy-x:0px;--toy-y:0px}
.toy{position:absolute;inset:0;border:0;border-radius:24%;padding:0;display:grid;place-items:center;background:transparent;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:translate(var(--toy-x),var(--toy-y));transition:transform var(--m-drag-return,.22s) var(--m-return-ease,ease-out);outline-offset:10px;will-change:transform}
.toy:focus-visible{outline:2px dashed var(--pink)}.toy:active{cursor:grabbing}.is-dragging .toy{transition:none;cursor:grabbing}.toy-art{display:block;width:100%;height:100%;animation:none;filter:none}.toy-art>img,.toy-art>svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}.toy-art>svg{padding:0;stroke:none;fill:none}.toy-art svg title{display:none}
.toy-note{position:absolute;left:-110px;top:42%;font-size:12px;font-weight:550;letter-spacing:.04em;transform:rotate(-10deg);pointer-events:none;color:var(--pink)}.toy-note svg{display:block;position:absolute;left:35px;top:20px;width:60px;height:40px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toy-instructions{position:absolute;left:50%;top:calc(100% + 29px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--paper);font-size:10px;letter-spacing:.05em;pointer-events:none;opacity:.82}.toy-instructions svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.hint-divider{margin:0 9px;color:var(--pink)}
.toy-beads{position:absolute;inset:0;z-index:-1;pointer-events:none}.toy-beads img{position:absolute;left:50%;top:50%;width:auto;max-width:135px;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.05);transition:transform var(--m-burst-time,.7s) var(--m-return-ease,cubic-bezier(.18,1.35,.4,1)),opacity var(--m-burst-time,.3s);filter:drop-shadow(0 5px 0 #112A8015)}.is-playing .toy-beads img{opacity:1;transform:translate(calc(-50% + var(--bx)*var(--burst-scale)*var(--m-burst,1)),calc(-50% + var(--by)*var(--burst-scale)*var(--m-burst,1))) rotate(var(--br)) scale(.9)}
.pull-entry{position:absolute;z-index:8;right:-36px;top:48%;width:360px;height:160px;transform:translateY(-50%);animation:handEnter var(--m-hand-intro,1.1s) var(--panel-ease) var(--m-hand-delay,.25s) both}
.pull-hand{position:absolute;top:0;right:-8px;width:220px;height:148px;padding:0;border:0;background:none;cursor:grab;touch-action:none;transform:translateX(calc(var(--pull)*-1));transition:transform var(--m-drag-return,.6s) var(--m-return-ease,cubic-bezier(.18,1.5,.4,1))}.pull-hand:hover{transform:translateX(-12px) rotate(-4deg)}.pull-hand:active{cursor:grabbing}.pull-hand:focus-visible{outline:2px dashed var(--pink);outline-offset:6px}.pull-hand>svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.hand-glove{fill:var(--paper)}.hand-sleeve{fill:var(--pink)}.hand-lines{fill:none;stroke-width:2.5}.is-pulling .pull-hand{transition:none;transform:translateX(calc(var(--pull)*-1)) rotate(-3deg)}
.pull-copy{position:absolute;left:-24px;top:26px;transform:rotate(-6deg);font-size:11px;line-height:1.8;white-space:nowrap}.pull-copy>span{color:var(--pink)}.pull-copy button{display:block;padding:2px 0;border:0;border-bottom:1px solid #F4F5F066;border-radius:0;background:none;color:var(--paper);font-size:13px;font-weight:600;line-height:1.8;letter-spacing:.04em}.pull-copy button span{display:inline-block;margin-left:10px;transition:transform .2s}.pull-copy button:hover span{transform:translate(3px,-3px)}.pull-copy button:focus-visible{outline-color:var(--pink)}.pull-copy>svg{width:64px;height:36px;margin:8px 0 0 36px;fill:none;stroke:var(--pink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.panel-backdrop{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);pointer-events:none;visibility:hidden}.wipe-tile{background:var(--pink);transform:scale(0);transform-origin:right center;transition:transform var(--m-tile,.28s) var(--panel-ease) var(--delay)}.panel-backdrop[aria-hidden="false"]{visibility:visible}.panel-backdrop[aria-hidden="false"] .wipe-tile{transform:scale(1.03)}
.info-panel{position:fixed;z-index:70;inset:0;width:100%;height:100dvh;padding:45px 28px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;background:var(--pink);color:var(--blue);transform:translateX(105%);visibility:hidden;pointer-events:none;transition:transform var(--m-panel,.8s) var(--panel-ease),visibility 0s linear var(--m-panel,.8s);isolation:isolate}
.info-panel:before{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(var(--blue) 1px,transparent 1px);background-size:38px 38px;opacity:.12;pointer-events:none}.info-panel:after{content:"";position:absolute;z-index:-1;right:-100px;bottom:-170px;width:480px;aspect-ratio:1;background:url('assets/brand/v3-1-1/logo-white.svg') center/contain no-repeat;opacity:.28;pointer-events:none}
.info-panel[aria-hidden="false"]{transform:translateX(0);visibility:visible;pointer-events:auto;transition:transform var(--m-panel,.8s) var(--panel-ease),visibility 0s}.start-screen.is-pulling .info-panel[aria-hidden="true"]{transform:translateX(calc(100% - var(--pull)));visibility:visible;transition:none;pointer-events:none}
.panel-close{position:absolute;z-index:5;right:4.5%;top:34px;width:44px;height:44px;padding:0;border:1px solid var(--blue);border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--blue);transition:transform .25s,background .2s,color .2s}.panel-close svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.panel-close:hover{background:var(--blue);color:var(--paper);transform:rotate(90deg)}
.panel-heading{position:relative;width:min(100%,380px)}.panel-mark{display:block;width:128px;height:auto;margin-bottom:30px}.panel-kicker{font-family:Work,sans-serif;font-size:9px;font-weight:600;letter-spacing:.13em;margin-bottom:12px}.panel-heading h2{margin:0;color:var(--blue);font-size:clamp(40px,4vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1.15}
.info-panel form{width:min(100%,380px);max-width:none;margin-top:38px}.info-panel .input-row{display:grid;grid-template-columns:1.18fr 1fr;gap:14px}.info-panel .field{display:block;color:var(--blue);font-size:11px}.info-panel .field>.field-label{display:flex;align-items:center;justify-content:space-between;margin:0 2px 9px;color:var(--blue);font-size:11px;font-weight:600}.field-label em{font-style:normal;color:var(--blue);font-size:9px;font-weight:400;opacity:.7}
.info-panel input{width:100%;height:54px;margin:0;padding:0 14px;border:1px solid #2450E755;border-radius:0;background:#F4F5F0C9;color:var(--blue);font-family:Work,Noto,sans-serif;transition:border-color .2s,box-shadow .2s}.info-panel input:hover{border-color:var(--blue)}.info-panel input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2450E71F;outline:0}
.info-panel .input-note{margin-top:9px;color:var(--blue);opacity:.7;font-size:9px}.info-panel form>.primary{min-height:56px;margin-top:26px;border:1px solid var(--blue);border-radius:0;background:var(--blue);color:var(--paper);box-shadow:none;font-size:12px;letter-spacing:.05em;transition:transform .2s,background .2s}.info-panel form>.primary:hover{background:var(--ink);transform:translateX(4px)}.info-panel form>.primary:active{transform:translateX(2px)}.info-panel .privacy{justify-content:center;margin-top:16px;color:var(--blue);font-size:9px;opacity:.7}.info-panel .error{text-align:left;color:var(--error);font-size:11px}
footer{position:absolute;z-index:20;inset:auto 0 0;min-height:80px;margin:0;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;color:var(--paper);border:0;font-family:Work,Noto,sans-serif;font-size:9px;letter-spacing:.04em;gap:16px}.footer-index{position:absolute;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.1em;opacity:.55}footer .inline-link{color:var(--paper);font-size:9px;line-height:1.8;border-bottom:1px solid #F4F5F050}footer .inline-link:hover{color:var(--pink);border-color:var(--pink)}
.screen-opening{background:var(--paper)}.screen-opening .header,.screen-opening footer{display:none}.screen-opening .info-panel{display:none}dialog h2{color:var(--blue)}dialog::backdrop{background:#1C231F75}.close{color:var(--blue)}
@keyframes headingEnter{from{opacity:0;translate:0 15px;rotate:-3deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes handEnter{from{opacity:0;translate:80px 0}to{opacity:1;translate:0 0}}
@media(min-width:1500px){.playground{width:340px;height:360px}.pull-entry{right:-10px}}
@media(max-width:1040px){.pull-entry{width:270px;right:-50px}.pull-hand{width:190px}.pull-copy{left:-30px;top:-38px}.pull-copy>svg{margin-top:3px}.playground{width:270px;height:290px}.hero-copy h1{font-size:38px}.toy-note{left:-85px;font-size:10px}}
@media(max-width:760px){
 .header{height:88px;padding:0 7%}.header .brand>img.brand-logo:first-child{width:31px;height:31px}.header .brand>img.brand-wordmark{width:92px}.header .beta{min-height:25px;padding:0 9px;font-size:8px}
 .start-screen{height:100svh;min-height:650px;--burst-scale:.66}.hero-copy{top:17%;transform:translateX(-50%) rotate(-5deg)}.hero-copy h1{font-size:34px}.hero-kicker{font-size:8px;margin-bottom:10px}
 .playground{top:47%;width:235px;height:250px}.toy-note{left:-36px;top:21%;font-size:9px;transform:rotate(-12deg)}.toy-note svg{left:-8px;top:17px;width:48px;height:32px;transform:rotate(18deg)}.toy-instructions{top:calc(100% + 18px);gap:6px;font-size:9px}.toy-instructions svg{width:19px;height:19px}.hint-divider{margin:0 6px}.toy-beads img{max-width:95px;max-height:100px}
 .pull-entry{top:auto;bottom:12%;right:-43px;width:280px;height:110px;transform:none}.pull-hand{width:170px;height:114px;right:-8px}.pull-copy{left:-13px;top:12px;font-size:10px}.pull-copy button{font-size:12px}.pull-copy>svg{width:50px;height:28px;margin:3px 0 0 40px}
 .info-panel{padding:82px 8% 48px}.panel-close{right:7%;top:28px;width:39px;height:39px}.panel-mark{width:116px;height:auto;margin-bottom:27px}.panel-heading h2{font-size:44px}.info-panel form{margin-top:34px}.info-panel .input-row{gap:10px}.info-panel input{height:53px;padding:0 10px}.info-panel:after{width:340px;right:-85px;bottom:-110px}
 footer{min-height:66px;padding:0 7%;font-size:8px}.footer-index{display:none}footer .inline-link{font-size:8px}
}
@media(max-height:740px) and (min-width:761px){.start-screen{min-height:600px}.header{height:85px}.hero-copy{top:13%}.hero-copy h1{font-size:34px}.playground{top:52%;width:240px;height:255px}.toy-instructions{top:calc(100% + 15px)}.panel-mark{margin-bottom:18px}.info-panel form{margin-top:28px}.panel-heading h2{font-size:42px}.info-panel{padding-top:30px;padding-bottom:24px}}
@media(max-width:760px) and (max-height:710px){.start-screen{min-height:590px}.hero-copy{top:16%}.hero-copy h1{font-size:29px}.playground{width:200px;height:215px;top:47%}.toy-instructions{top:calc(100% + 8px)}.pull-entry{bottom:11%}.panel-heading h2{font-size:36px}.panel-mark{margin-bottom:18px;width:108px;height:auto}.info-panel form{margin-top:26px}.info-panel{padding-top:72px;padding-bottom:22px}}
@media(prefers-reduced-motion:reduce){.hero-copy,.pull-entry,.toy-art{animation:none}.toy,.toy-beads img,.pull-hand,.info-panel,.panel-backdrop *{transition:none}.play-dots{display:none}}

/* User-approved aligned bead: equal arches and one shared expression transform. */
.toy-art .za-paper{fill:var(--paper)}
.toy-art .za-eye{fill:none;stroke:var(--blue);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.toy-art .za-eye-pink{stroke:var(--pink)}
.toy-art .za-idle{transform-origin:160px 160px;animation:beadBreathe var(--m-breath-period,4.8s) ease-in-out infinite}
.toy-art .za-gaze{transform:translate(var(--za-look-x,0px),var(--za-look-y,0px));transition:transform .2s ease-out}
.toy-art .za-expression{transform-origin:160px 164px;animation:beadBlink var(--m-blink,5.4s) infinite}
.is-playing .toy-art .za-reaction{transform-origin:160px 160px;animation:beadPop var(--m-boop,.68s) cubic-bezier(.2,.8,.3,1)}
.is-playing .toy-art .za-expression{animation:beadHappy var(--m-boop,.68s) ease-in-out}
.is-dragging .toy-art .za-idle,.form-panel-open .toy-art .za-idle,.form-panel-open .toy-art .za-expression{animation-play-state:paused}
@keyframes beadBreathe{0%,100%{transform:translateY(var(--m-breath-down,3px)) scale(1)}50%{transform:translateY(var(--m-breath-up,-4px)) scale(var(--m-breath-scale,1.018))}}
@keyframes beadBlink{0%,38%,45%,100%{transform:scaleY(1)}40%,43%{transform:scaleY(.13)}}
@keyframes beadHappy{0%,100%{transform:scaleY(1)}24%,60%{transform:scaleY(.24)}}
@keyframes beadPop{0%,100%{transform:translateY(0) scale(1)}22%{transform:translateY(var(--m-pop-down,7px)) scale(var(--m-squash-x,1.07),var(--m-squash-y,.91))}50%{transform:translateY(var(--m-pop-up,-9px)) scale(var(--m-stretch-x,.96),var(--m-stretch-y,1.05))}77%{transform:translateY(2px) scale(1.02,.99)}}
@media(prefers-reduced-motion:reduce){.toy-art .za-idle,.toy-art .za-expression,.is-playing .toy-art .za-reaction{animation:none}.toy-art .za-gaze{transition:none}}

.motion-paused *, .motion-paused *:before, .motion-paused *:after{animation-play-state:paused!important}

.motion-editor-link{margin-left:auto}.motion-preview .motion-editor-link{display:none}