:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#252b35;background:#f6f7f9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #dce0e6;border-radius:8px;background:white;color:inherit;padding:10px 14px}button:hover:not(:disabled){background:#edf1f7}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a4bdeb;outline-offset:3px}.header{height:76px;padding:0 4%;display:flex;align-items:center;gap:24px;background:#fff;border-bottom:1px solid #e3e6eb}.brand{font-size:25px;font-weight:750;letter-spacing:-1px;text-decoration:none;color:#252b35}.muted,.meta{color:#7a828e}.version{margin-left:auto;font-size:12px;background:#f1f3f6;padding:6px 10px;border-radius:5px}main{max-width:1480px;margin:auto;padding:38px 4% 0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}h1{font-size:28px;margin:0 0 10px;letter-spacing:-.6px}p{line-height:1.75}.page-heading p{color:#737c89;margin:0;font-size:14px}.secondary{font-size:13px}.steps{display:flex;list-style:none;padding:0;margin:30px 0 20px;border-bottom:1px solid #dfe3e9;gap:36px}.steps li{padding:0 0 14px;color:#929aa6;font-size:12px}.steps span{font-size:14px;margin-left:8px}.steps .active{color:#385e94;border-bottom:2px solid #385e94}.workspace{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:stretch}.panel{background:white;border:1px solid #e0e4ea;border-radius:12px;padding:24px;min-width:0;min-height:590px}.section-head{display:flex;align-items:center;gap:9px;margin-bottom:30px}.number{color:#8b95a3;font-size:12px}h2{font-size:17px;margin:0;font-weight:650}.badge{font-size:11px;color:#7a828e;background:#f3f5f7;padding:4px 7px;border-radius:4px}.section-head .badge{margin-left:auto}label,legend,.label{font-size:13px;font-weight:600;display:block;margin:0 0 10px}textarea{display:block;resize:vertical;width:100%;height:185px;border:1px solid #dce1e8;border-radius:8px;padding:14px;font-size:14px;line-height:1.8;background:#fcfcfd}textarea::placeholder{color:#a0a7b1}.between{display:flex;justify-content:space-between;gap:10px;align-items:center}.meta{font-size:11px;margin:10px 0 24px}.examples{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:28px}.examples button{font-size:12px;padding:7px 10px;color:#616c7b}.primary{background:#3d5e8e;color:white;border-color:#3d5e8e;font-size:14px}.primary:hover:not(:disabled){background:#304d79}.full{width:100%;margin-top:4px}.full span{float:right}.section-note{font-size:12px;color:#929aa6;border-top:1px solid #edf0f4;margin-top:26px;padding-top:20px;line-height:1.7}.empty{text-align:center;padding:70px 0;color:#939ba6}.empty-mark{font-family:Georgia,serif;font-size:50px;color:#c6cdd6}.empty h3{font-size:15px;font-weight:500;color:#778190}.empty p{font-size:13px}.translation{background:#f5f7fa;padding:16px;border-radius:8px}.translation h3{font-size:17px;line-height:1.7;margin:4px 0 10px}.translation p:last-child{font-size:13px;color:#707a88;margin:0}.metrics{display:flex;gap:16px;margin-top:22px}.metrics div{flex:1}.metrics span{font-size:12px;color:#7a828e;display:block}.metrics strong{font-size:25px;display:block;margin-top:7px}.subsection{border-top:1px solid #edf0f4;padding-top:18px;margin-top:18px}.subsection strong{font-size:14px}.tags{display:flex;gap:6px;margin-top:10px}.tags span{font-size:11px;background:#f2f4f7;padding:5px 7px;border-radius:4px}ul{padding-left:19px;font-size:13px;color:#687383;line-height:1.8}li+li{margin-top:7px}fieldset{padding:0;border:0;margin:0;min-width:0}.personas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 24px}.personas button{font-size:12px;text-align:left;padding:11px 9px}.personas button[aria-pressed=true]{border-color:#57749c;background:#edf2fa;color:#3d5e8e}.range-label{display:flex;justify-content:space-between;gap:6px}output{font-size:11px;font-weight:400;color:#7a828e}input[type=range]{width:100%;accent-color:#526d95}.reply-box{margin-top:24px;border-top:1px solid #e6e9ef;padding-top:22px}.reply-box .label{margin:0}.reply-box p{font-size:14px;min-height:72px;white-space:pre-wrap}.reply-box button{width:100%}.error{font-size:13px;color:#a44242}footer{display:flex;justify-content:space-between;margin:26px 0;padding-bottom:22px;color:#98a0ac;font-size:11px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#303c4b;color:white;padding:12px 20px;border-radius:8px;font-size:13px}[hidden]{display:none!important}@media(max-width:1050px){.panel{padding:18px}.workspace{gap:12px}.personas{grid-template-columns:1fr}.header{padding:0 24px}main{padding:28px 24px 0}}@media(max-width:760px){.workspace{grid-template-columns:1fr}.panel{min-height:0;padding:22px}.empty{padding:25px 0}.header .muted{display:none}.page-heading{align-items:flex-start}h1{font-size:23px}.page-heading p{max-width:230px}.steps{gap:24px}.steps span{font-size:12px;margin-left:3px}.personas{grid-template-columns:1fr 1fr}main{padding:26px 16px 0}footer{gap:20px}.section-head{margin-bottom:22px}}

.classic-examples{display:grid;gap:6px;margin-bottom:18px}.classic-examples button{text-align:left;line-height:1.6;padding:8px 10px}

/* Paper, ink and marker — step-by-step working surface. */
:root{color:#101516;background:#edeFec}.header{background:transparent;border-bottom:1px solid #cbd0ca;height:72px}.brand{color:#101516;font-weight:900}body{background-image:radial-gradient(#1c251714 .6px,transparent .6px),linear-gradient(120deg,#fff9,transparent 50%,#cbd0ca55);background-size:5px 5px,100% 100%;min-height:100vh}main{max-width:1100px;padding-top:26px}.page-heading{max-width:780px;margin:28px auto 34px}.page-heading h1{font-size:clamp(42px,6vw,74px);font-weight:900;line-height:1.08;letter-spacing:-3px;position:relative;z-index:0}.page-heading h1:after{content:'';position:absolute;bottom:1px;left:-8px;width:88%;height:15px;background:#ceff46;z-index:-1;transform:rotate(-3deg)}.page-heading p{color:#242c27;margin-top:20px}.steps{justify-content:center;border:0;margin:12px 0 26px;gap:18px}.steps button{border:0;background:none;border-radius:0;padding:5px 8px;color:#89918a;font-size:12px}.steps button.active{color:#111;border-bottom:4px solid #ceff46;font-weight:800}.steps button:disabled{opacity:.4}.workspace{display:block;max-width:780px;margin:auto}.panel{min-height:0;background:#ffffff9c;border:1px solid #d0d5cf;box-shadow:0 10px 35px #26332609;border-radius:10px;padding:30px}.workspace[data-stage="0"] .panel:not(:first-child),.workspace[data-stage="1"] .panel:not(:nth-child(2)),.workspace[data-stage="2"] .panel:not(:nth-child(2)),.workspace[data-stage="3"] .panel:not(:nth-child(3)),.workspace[data-stage="4"] .panel:not(:nth-child(3)){display:none}.workspace[data-stage="1"] .metrics,.workspace[data-stage="1"] #analysis-content>.meta,.workspace[data-stage="1"] .subsection{display:none}.workspace[data-stage="2"] .translation{display:none}.translation{background:transparent;padding:8px 0 25px}.translation h3{font-size:27px;line-height:1.7}.metrics{background:#1e272a;color:#fff;padding:24px;border-radius:6px}.metrics span{color:#c7d0d0}.metrics strong{font-size:36px}.primary{background:#ceff46;color:#111;border-color:#b5d83c;font-weight:750}.primary:hover:not(:disabled){background:#bdea3b}.secondary{background:#ffffff80}.personas{grid-template-columns:repeat(4,1fr);gap:12px}.personas button{min-height:130px;text-align:center;font-weight:700;font-size:15px;border-color:#ccd4c7;background:#fff9}.personas button[aria-pressed=true]{background:#dcff91;color:#12180b;border:2px solid #afd731;box-shadow:0 0 0 4px #d8fa9170}.personas button:before{content:'☺';display:block;font-size:34px;font-weight:400;margin-bottom:12px}.personas button:last-child:before{content:'☠'}.reply-box{border:0;margin:0;padding:12px 0}.reply-box p{font-size:23px;color:#1d2725;min-height:100px}.flow-actions{max-width:780px;margin:20px auto 40px;display:flex;justify-content:space-between;gap:12px}input[type=range]{accent-color:#111}.classic-examples{grid-template-columns:repeat(3,1fr)}.classic-examples button{background:#fff8}.section-head{margin-bottom:22px}.number{color:#606a5e}textarea{height:135px;background:#fff8;border-color:#cbd0c7}footer{max-width:780px;margin:24px auto 0}.badge{background:#edf2e7;color:#65705c}@media(max-width:760px){.steps{gap:2px}.steps button{font-size:10px}.page-heading{margin-top:20px}.page-heading h1{letter-spacing:-1px}.personas{grid-template-columns:1fr 1fr}.personas button{min-height:105px}.classic-examples{grid-template-columns:1fr}.panel{padding:22px}.translation h3{font-size:22px}.page-heading>.secondary{max-width:95px}.reply-box p{font-size:19px}}

.personas button:before,.personas button:last-child:before{display:none}.persona-art{width:74px;height:74px;display:block;margin:0 auto 16px}.personas{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.personas button{transition:transform .18s,background .18s}.personas button:hover:not(:disabled){transform:translateY(-4px)}.personas button[aria-pressed=true] .persona-art{transform:rotate(-7deg)}#loading{max-width:780px;min-height:350px;margin:0 auto;padding:60px 25px;text-align:center;background:#f5f3e9;border:1px solid #d7dacf;border-radius:10px}#loading svg{width:92px;height:92px;margin-bottom:24px;animation:note-wiggle 1.5s ease-in-out infinite}#loading h2{font-size:25px;font-weight:850}#loading p{font-size:13px;color:#7e897c;margin:15px 0 28px}#loading:not([hidden])~.workspace,#loading:not([hidden])~.flow-actions{display:none}.loading-track{height:5px;max-width:220px;margin:auto;background:#dce0d2;overflow:hidden;border-radius:5px}.loading-track span{display:block;width:42%;height:100%;background:#a8d32b;animation:loading-slide 1.4s ease-in-out infinite}@keyframes loading-slide{from{transform:translateX(-110%)}to{transform:translateX(350%)}}@keyframes note-wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) translateY(-4px)}}@media(prefers-reduced-motion:reduce){#loading svg,.loading-track span{animation:none}.personas button{transition:none}}@media(max-width:600px){.personas{grid-template-columns:1fr 1fr}}

.mood-slider{--strength:0%;--mood-color:#afd84c;position:relative;padding:50px 8px 0;margin-top:8px}.mood-face{position:absolute;top:0;left:clamp(8px,var(--strength),calc(100% - 44px));width:42px;height:42px;transition:left .08s linear;pointer-events:none}.mood-face .persona-art{width:42px;height:42px;margin:0}.mood-face svg>circle{fill:var(--mood-color);transition:fill .2s}.mood-slider input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;height:12px;margin:8px 0 16px;border-radius:12px;background:linear-gradient(to right,var(--mood-color) 0%,var(--mood-color) var(--strength),#dce0d6 var(--strength),#dce0d6 100%);cursor:pointer;outline-offset:7px}.mood-slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:30px;border:3px solid #fff;border-radius:9px;background:#18201c;box-shadow:0 1px 5px #18201c40;cursor:grab}.mood-slider input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12)}.mood-slider input[type=range]::-moz-range-thumb{width:18px;height:24px;border:3px solid #fff;border-radius:8px;background:#18201c;cursor:grab}.mood-ticks{display:flex;justify-content:space-between;font-size:11px;color:#7e877c}.mood-slider[data-mood="0"] .mood-ticks span:nth-child(1),.mood-slider[data-mood="1"] .mood-ticks span:nth-child(2),.mood-slider[data-mood="2"] .mood-ticks span:nth-child(3),.mood-slider[data-mood="3"] .mood-ticks span:nth-child(4){color:#18201c;font-weight:800}.range-label output{color:#26311e;font-size:13px;font-weight:650}@media(prefers-reduced-motion:reduce){.mood-face,.mood-face svg>circle{transition:none}}

.brand{display:inline-flex;align-items:center;gap:10px}.brand img{display:block;width:48px;height:48px;object-fit:contain;border-radius:10px}