@font-face{font-family:PlotMono;src:local("Cascadia Code"),local("DejaVu Sans Mono"),local("Courier New")}
:root{--paper:#fbf7ed;--surface:#fffdf6;--ink:#403b3a;--muted:#80776f;--purple:#8c6ab6;--purple-dark:#735093;--purple-light:#eee5f5;--border:#dcd5c7;--pink:#ed91a7;--hand:"Comic Sans MS","Chalkboard SE","Comic Sans",cursive;--sans:"Trebuchet MS","Segoe UI",sans-serif;--mono:PlotMono,monospace}
*{box-sizing:border-box}body{margin:0;background-color:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23705b34' opacity='.035' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{border:0;background:none}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #8964b9;outline-offset:4px}button:hover{filter:brightness(.97)}button:active:not(.data-point){transform:translateY(1px)}[hidden]{display:none!important}a{color:inherit;text-decoration:none}svg{overflow:visible}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--hand)}.site-header{max-width:1536px;margin:auto;padding:21px 4.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:20px}.brand{font-family:var(--hand);font-size:35px;font-weight:700;letter-spacing:-1.6px;display:flex;align-items:center;gap:10px;line-height:1}.brand b{color:var(--purple);font-weight:700}.brand-dot{font-family:var(--sans);font-size:27px;color:var(--pink);display:inline-block;margin-left:5px;transform:rotate(-14deg)}#brand-cat{width:46px;height:46px;display:block;transform:rotate(-9deg)}#brand-cat svg{width:100%;height:100%}nav{display:flex;gap:24px;align-items:center}.nav-button{font-size:14px;font-weight:600;padding:10px 1px;position:relative;color:var(--muted)}.nav-button.active{color:var(--purple-dark)}.nav-button.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--purple);border-radius:100% 30% 60% 10%;transform:rotate(-2deg)}.nav-button span{margin-left:2px}.treat-button{display:flex;align-items:center;gap:9px;border:1px solid #d7bdd4;background:#faeef0;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 2px 0 #e7d9d9}.tiny-paw{width:20px;height:20px;display:block}.treat-button #treat-count{border-left:1px solid #e4ccd3;margin-left:3px;padding-left:11px;font-size:13px;color:#986472}main{max-width:1440px;margin:auto;padding:0 4.2%}.page-intro{display:flex;justify-content:space-between;align-items:center;padding:31px 0 25px;min-height:165px}.eyebrow{font-size:12px;letter-spacing:1.65px;font-weight:700;color:var(--muted);line-height:1.5}.hand-star{color:#ac8ac9;font-size:19px;margin-right:5px;vertical-align:middle}h1{font-size:39px;letter-spacing:-1.6px;line-height:1.5;position:relative;margin:0 0 2px;font-weight:700}h1>span{color:var(--purple-dark)}.page-intro p{color:var(--muted);font-size:15px}.title-spark{width:33px;height:36px;stroke:#bda7cc;stroke-width:3;fill:none;stroke-linecap:round;vertical-align:middle;margin-left:15px}.intro-cats{position:relative;width:230px;height:125px;margin-right:28px;flex-shrink:0}#intro-cat{position:absolute;width:128px;height:128px;right:5px;bottom:-15px;transform:rotate(5deg)}.speech{position:absolute;left:-7px;top:8px;border:1.5px solid #bca4ce;border-radius:50% 45% 42% 9%;padding:10px 12px;background:#f0e8f5;color:var(--purple-dark);font-family:var(--hand);font-size:18px;transform:rotate(-8deg);z-index:1}.floating-heart{position:absolute;right:-28px;top:30px;color:var(--pink);font-size:38px;transform:rotate(17deg)}.controls-bar{border:1px solid var(--border);border-radius:13px;background:#fffdf7bb;display:flex;align-items:center;gap:23px;padding:15px 18px;box-shadow:0 3px 0 #e7e0d54d}.control-group{display:flex;align-items:center;gap:11px}.control-label{font-size:13px;font-weight:600}.control-divider{height:24px;width:1px;background:var(--border)}.palette-options{display:flex;gap:6px}.palette-button{height:25px;width:25px;border:2px solid var(--surface);border-radius:50%;outline:1px solid transparent;padding:0;position:relative}.palette-button.selected{outline-color:var(--purple-dark)}.palette-button.selected:after{content:"";width:5px;height:5px;position:absolute;background:#fff;border-radius:100%;left:8px;top:8px;box-shadow:0 0 0 1px #0002}.palette-name{font-size:12px;color:var(--muted);white-space:nowrap}.segmented{display:flex;padding:3px;background:#efebe3;border-radius:8px}.segmented button{font-size:12px;padding:4px 10px;border-radius:6px;color:var(--muted)}.segmented button.selected{background:var(--surface);color:var(--purple-dark);box-shadow:0 1px 3px #50472b20}.cuteness-control{display:flex;gap:11px;align-items:center;flex:1}.cuteness-control input{min-width:55px;width:80px;flex:1;max-width:100px}input[type=range]{accent-color:var(--purple);height:16px;cursor:pointer}.cuteness-control>span:last-child{font-family:var(--hand);font-size:13px;color:var(--purple);min-width:35px}.shuffle-button{display:flex;align-items:center;gap:8px;background:var(--purple-light);border:1px solid #d5c3e3;padding:7px 13px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--purple-dark)}.shuffle-button span{font-size:22px;font-family:var(--sans);line-height:1}.plot-heading{display:flex;justify-content:space-between;align-items:center;padding:25px 0 14px;color:var(--muted)}.plot-heading p{font-family:var(--hand);font-size:15px;display:flex;align-items:center;gap:9px}.small-paw{width:20px;height:20px;transform:rotate(-20deg)}.grid-toggle{display:flex;gap:7px;align-items:center;font-size:12px;cursor:pointer}.grid-toggle input{accent-color:var(--purple);width:14px;height:14px}.chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.chart-card{background:var(--surface);border:1.5px solid var(--border);border-radius:17px 16px 19px 15px;position:relative;transition:box-shadow .2s,border-color .2s;min-width:0;overflow:hidden;box-shadow:0 3px 0 #ddd3bf30}.chart-card:nth-child(2n){border-radius:15px 19px 15px 18px}.chart-card:hover{border-color:#beaacc;box-shadow:0 5px 16px #7160480c}.card-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 6px}.card-title{display:flex;align-items:baseline;gap:9px}.card-number{font-family:var(--mono);font-size:11px;color:#a19a8e}.card-title h2{font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.6px;color:var(--chart-colour)}.chart-subtitle{font-size:12px;color:var(--muted);padding:0 18px}.card-menu{display:flex;gap:2px}.icon-button{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;color:var(--muted);font-size:18px;line-height:1}.icon-button:hover{background:#eee7f2;color:var(--purple-dark)}.icon-button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.plot-wrap{padding:6px 10px 0;position:relative}.plot-svg{display:block;width:100%;height:auto;touch-action:pan-y}.plot-svg .data-point{cursor:grab;touch-action:none;outline:none}.plot-svg .data-point:focus .focus-ring{stroke:#735093;stroke-width:2;stroke-dasharray:3 3}.plot-svg .data-point:active{cursor:grabbing}.plot-svg .data-point:hover .cat-marker{filter:drop-shadow(0 3px 2px #68447435)}.plot-svg text{user-select:none;fill:#80786e;font-family:var(--sans);font-size:12px}.plot-svg .axis-label{font-family:var(--hand);font-size:14px;fill:#6c6259}.plot-svg .grid-line{stroke:#e8e0d4;stroke-dasharray:3 5;stroke-width:1}.plot-svg .axis-line{stroke:#9c9284;stroke-width:1.4;stroke-linecap:round;fill:none}.plot-svg .data-line{stroke-linecap:round;stroke-linejoin:round}.chart-footer{border-top:1px dashed #e5ded2;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:11px;min-height:43px}.card-hint{color:#938678;display:flex;align-items:center;gap:5px}.chart-footer button{font-size:11px;color:var(--purple-dark);font-weight:600;padding:2px 0}.chart-footer button:hover{text-decoration:underline}.bottom-note{display:flex;align-items:center;gap:10px;padding:25px 2px 29px;font-size:12px;color:#8f8477}.note-paw{width:20px;height:20px;display:block;transform:rotate(-15deg);opacity:.6}.note-right{margin-left:auto;font-size:11px}.heart-text{color:var(--pink)}footer{border-top:1px solid var(--border);max-width:1320px;margin:0 auto;display:flex;gap:22px;align-items:center;padding:19px 0 24px;color:#918676;font-size:12px}.footer-brand{font-family:var(--hand);font-weight:700;color:#807087;font-size:20px;letter-spacing:-.8px}.footer-version{margin-left:auto;font-size:11px}.footer-version span{color:#b899cf;margin-left:8px}.mobile-break{display:none}.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 3px 0 #e7e0d540}.component-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:24px}.cat-studio{padding:25px 30px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.tag{font:11px var(--mono);border:1px solid #d7c4e6;border-radius:5px;padding:4px 7px;color:var(--purple)}.studio-stage{height:268px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,#f0e9f5 0, #f0e9f566 43%,transparent 65%)}#studio-cat{width:240px;height:250px;transition:transform .25s;padding:0}#studio-cat:hover{transform:rotate(-3deg) scale(1.03)}#studio-cat svg{width:100%;height:100%}.studio-speech{position:absolute;right:3%;top:20px;border:1.5px solid #c4b3d4;border-radius:46% 46% 45% 4%;padding:10px 15px;color:var(--purple-dark);font-family:var(--hand);font-size:14px;transform:rotate(5deg);background:var(--surface)}.stage-spark{position:absolute;color:#bc9fd6;font-size:30px}.spark-one{left:15%;top:25%}.spark-two{right:16%;bottom:14%;font-size:23px}.studio-caption{text-align:center}.studio-caption h2{font-size:29px;color:var(--purple-dark)}.studio-caption p{font-size:14px;color:var(--muted);margin:3px 0 21px}.studio-actions{display:flex;gap:12px;justify-content:center}.primary-button,.soft-button{padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;border:1px solid #7e5ca0;box-shadow:0 3px 0 #64467e1a}.primary-button{background:var(--purple);color:white}.soft-button{border-color:var(--border);background:var(--paper)}.studio-settings{padding:26px 30px}.studio-settings h2{font-size:24px;margin:0 0 23px;letter-spacing:-.8px}.field-label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin:21px 0 13px}.cat-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.cat-choice{border:1.5px solid var(--border);border-radius:12px;padding:8px 3px;font-size:12px;background:#fcf9f2}.cat-choice svg{display:block;width:61px;height:58px;margin:auto auto 6px}.cat-choice.selected{border-color:var(--purple);background:#f1e8f7}.cat-choice .cat-choice-name{display:block}.mood-picker{display:flex;gap:10px}.mood-picker button{border:1px solid var(--border);border-radius:8px;padding:7px 14px;font-size:13px}.mood-picker button.selected{background:var(--purple-light);border-color:#c7afd9;color:var(--purple-dark)}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin:15px 0;cursor:pointer}.toggle-row input{appearance:none;width:35px;height:21px;border-radius:20px;background:#ded9ce;position:relative;cursor:pointer}.toggle-row input:after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:white;transition:transform .2s}.toggle-row input:checked{background:var(--purple)}.toggle-row input:checked:after{transform:translateX(14px)}.component-tip{border-top:1px dashed var(--border);margin-top:22px;padding-top:17px;display:flex;align-items:center;gap:13px}.component-tip>span{width:51px;flex-shrink:0}.component-tip p{font-size:12px;color:var(--muted)}.component-section-title{display:flex;justify-content:space-between;align-items:center;margin:30px 0 15px}.component-section-title h2{font-size:23px}.component-section-title span{font-size:12px;color:var(--muted)}.mini-components{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}.mini-components article{padding:23px 25px}.sample-row{display:flex;align-items:center;justify-content:space-between;gap:10px;height:98px}.sample-row>svg{width:56px;height:56px}.sample-row>span{width:43px;height:43px;border-radius:10px;transform:rotate(-5deg);border:1px solid #6d595729}.sample-row>span:nth-child(2n){transform:rotate(5deg)}.mini-components p{font-size:13px;color:var(--muted)}.code-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:25px;margin-bottom:50px}.code-panel{background:#33313c;border:1px solid #45404f;border-radius:16px;color:#e7dcec;overflow:hidden}.code-tabs{display:flex;align-items:center;gap:16px;border-bottom:1px solid #524959;padding:12px 20px}.code-tabs button{color:#b3a1bf;font-size:12px;padding:6px 0}.code-tabs button.selected{color:#f0dca5}.code-tabs .copy-code{margin-left:auto;padding:5px 9px;border:1px solid #63576c;border-radius:5px}pre{margin:0;padding:26px;overflow:auto;min-height:350px;max-height:530px;font:13px/2 var(--mono);tab-size:2;white-space:pre}code .comment{color:#9d90a7}code .keyword{color:#c6a4ed}code .string{color:#e1c891}.code-disclaimer{padding:14px 24px;background:#3b3544;color:#c0aecb;font-size:12px}.code-aside{padding:25px 30px;display:flex;flex-direction:column;align-items:flex-start}.code-aside>div{height:140px;width:140px;align-self:center}.code-aside h2{font-size:25px;margin:15px 0}.code-aside p{font-size:14px;color:var(--muted);margin-bottom:15px}.code-aside button{margin-top:13px}dialog{max-width:1060px;width:calc(100% - 40px);border:1.5px solid #c5b2d0;background:var(--paper);color:var(--ink);border-radius:21px;padding:25px 29px;box-shadow:0 20px 80px #46334e38}dialog::backdrop{background:#443b4d55;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:16px}.dialog-heading h2{font-size:26px}.dialog-heading .icon-button{font-size:28px}.dialog-body{display:grid;grid-template-columns:1.6fr 1fr;gap:25px;margin-top:22px;align-items:center}.detail-plot{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:13px}.detail-controls{align-self:start}.detail-controls h3{font-size:16px}.text-button{font-size:12px;color:var(--purple-dark);text-decoration:underline}.detail-hint{font-size:12px;color:var(--muted);margin:6px 0 18px}.data-input-row{display:grid;grid-template-columns:80px 1fr 35px;gap:10px;align-items:center;margin:13px 0;font-size:13px}.data-input-row input{width:100%;min-width:0}.data-input-row output{font:13px var(--mono);text-align:right}.export-button{margin-top:20px;width:100%}#tooltip{position:fixed;z-index:20;padding:8px 12px;color:#fcf8ef;background:#47404e;border:1px solid #6e5b7d;border-radius:9px;font-size:12px;line-height:1.5;pointer-events:none;box-shadow:0 3px 10px #443b4d25;max-width:230px}#toast{position:fixed;z-index:100;bottom:27px;left:50%;transform:translate(-50%,20px);background:#51425f;color:#fff7ec;border-radius:13px;padding:12px 21px;font-size:14px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 8px 30px #33273f20}#toast.visible{opacity:1;transform:translate(-50%,0)}#hearts{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}.flying-heart{position:fixed;font-size:23px;animation:float-heart 1.3s ease-out forwards;color:var(--pink)}.cat-eyes{animation:blink 7s infinite;transform-origin:center 51px}.cat-tail{transform-box:fill-box;transform-origin:15% 85%;animation:tail-sway 4s ease-in-out infinite}.cat-marker .cat-eyes{animation-delay:-3s}.cat-sleep-z{font-family:var(--hand);font-size:13px;fill:var(--purple);animation:sleepy 3s ease-in-out infinite}.data-point:hover .cat-face{transform:rotate(-5deg);transform-origin:50px 50px}.cat-face{transition:transform .2s}.shuffled .plot-svg{animation:shuffle-pop .4s ease}.heat-cell{shape-rendering:crispEdges}body[data-motion="off"] *{animation:none!important}@keyframes blink{0%,43%,46%,100%{transform:scaleY(1)}44%,45%{transform:scaleY(.09)}}@keyframes tail-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(6deg)}}@keyframes float-heart{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-135px) rotate(var(--r)) scale(1.2)}}@keyframes sleepy{0%,100%{opacity:.4;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}@keyframes shuffle-pop{0%{opacity:.4;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){main{padding:0 30px}.site-header{padding-left:5%;padding-right:5%}}@media(max-width:1250px){.controls-bar{gap:14px;padding:13px}.palette-name{display:none}.control-group{gap:8px}.control-divider{display:none}.cuteness-control{gap:7px}.note-right{display:none}footer{margin:0 4.2%}.intro-cats{margin-right:10px}.card-top{padding-left:14px;padding-right:14px}.chart-subtitle{padding-left:14px}.chart-grid{gap:15px}}@media(max-width:1000px){.site-header{padding:20px 4%;gap:15px}.brand{font-size:28px;gap:6px}#brand-cat{width:38px;height:38px}nav{gap:18px}.nav-button{font-size:12px}.treat-button{font-size:12px;padding:8px 10px}.treat-button #treat-count{padding-left:7px}.controls-bar{flex-wrap:wrap;gap:12px 20px}.cuteness-control{flex:initial;margin-left:auto}.shuffle-button{margin-left:auto}.chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-intro{padding:24px 0}h1{font-size:34px}.intro-cats{width:170px;transform:scale(.9);transform-origin:right center}.speech{left:-15px}.component-layout{gap:18px}.studio-settings{padding:22px}.cat-studio{padding:22px}.cat-choice svg{width:48px;height:48px}.mood-picker{gap:6px}.mood-picker button{padding:7px 10px}.component-tip p{font-size:11px}.code-layout{grid-template-columns:1.6fr 1fr}.code-aside{padding:20px}.code-aside h2{font-size:22px}.title-spark{display:none}}@media(max-width:700px){.site-header{flex-wrap:wrap;padding:14px 5% 0;gap:8px}.brand{font-size:29px}.treat-button{margin-left:auto}nav{order:3;width:100%;justify-content:space-between;margin-top:5px;gap:5px}.nav-button{padding:12px 6px;font-size:13px}.nav-button.active:after{bottom:-1px}main{padding:0 5%}.page-intro{padding:24px 0 20px;min-height:0}.page-intro .eyebrow{font-size:10px;letter-spacing:1px}.page-intro h1{font-size:29px;letter-spacing:-1.5px;line-height:1.35;margin:8px 0}.page-intro p{font-size:13px;max-width:270px}.intro-cats{width:100px;height:110px;transform:none;margin-right:0;align-self:flex-end;margin-bottom:6px}#intro-cat{width:95px;height:95px;bottom:-8px;right:-5px}.speech{font-size:12px;padding:6px 8px;left:-10px;top:-9px}.floating-heart{font-size:24px;right:-7px;top:23px}.mobile-break{display:block}.controls-bar{gap:14px 10px;display:grid;grid-template-columns:1fr auto;padding:13px}.palette-group{gap:8px}.palette-button{width:23px;height:23px}.palette-button.selected:after{left:7px;top:7px}.control-label{font-size:12px}.segmented button{font-size:11px;padding:3px 8px}.cuteness-control{margin:0;gap:9px}.cuteness-control input{width:60px;min-width:35px}.cuteness-control>span:last-child{font-size:12px;min-width:0}.shuffle-button{font-size:12px;padding:5px 10px;margin:0;justify-content:center}.plot-heading{padding-top:20px;gap:10px}.plot-heading p{font-size:12px;gap:6px}.grid-toggle{font-size:11px;gap:4px}.small-paw{width:17px}.chart-grid{gap:14px;grid-template-columns:1fr}.card-top{padding:16px 18px 6px}.card-title h2{font-size:19px}.chart-subtitle{font-size:13px;padding-left:18px}.chart-footer{font-size:12px;padding:11px 18px}.chart-footer button{font-size:12px}.bottom-note{font-size:11px;padding:23px 0;align-items:flex-start}.note-paw{flex-shrink:0}footer{margin:0 5%;flex-wrap:wrap;gap:5px 14px;padding:17px 0;font-size:11px}.footer-version{width:100%;margin:0;font-size:10px}.footer-brand{font-size:17px}.component-layout{grid-template-columns:1fr}.studio-settings h2{font-size:22px}.cat-choice svg{width:60px;height:60px}.field-label{font-size:12px}.component-section-title{align-items:flex-start;flex-direction:column;gap:3px}.component-section-title h2{font-size:22px}.mini-components{grid-template-columns:1fr;gap:14px}.sample-row{justify-content:flex-start;gap:25px}.sample-row>span{width:42px;height:42px}.code-layout{grid-template-columns:1fr;gap:17px}.code-tabs{gap:10px;padding:12px}.code-tabs button{font-size:10px}pre{padding:17px;font-size:11px}.code-aside{padding:25px}.code-aside>div{height:110px;width:110px}.code-aside h2{font-size:24px}dialog{padding:18px;width:calc(100% - 24px);max-height:90svh}.dialog-body{grid-template-columns:1fr;gap:17px;margin-top:16px}.detail-plot{padding:7px}.dialog-heading h2{font-size:23px}.data-input-row{margin:10px 0}.studio-stage{height:250px}.studio-speech{right:0;font-size:12px}#toast{max-width:90%;width:max-content;font-size:12px;bottom:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}