@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#24372d;--muted:#7a8279;--paper:#f6f7f2;--line:#dce2d8;--green:#c9e79e}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans SC',sans-serif;font-size:14px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #759a4a;outline-offset:4px}header{height:100px;max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 50px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center}.brand-icon{font-size:45px;line-height:1}.brand strong{font-size:23px;letter-spacing:-1px}.brand strong span{font-size:10px;display:block;letter-spacing:4px;font-weight:500;margin-top:1px}nav{display:flex;gap:32px;align-items:center;color:#798177}nav a.active{color:var(--ink)}nav button{border:0;background:none;color:inherit;padding:0}nav button span{margin-left:4px}.header-cta{border:1px solid #a9b2a3;border-radius:7px;padding:11px 17px;font-size:12px}.header-cta span{margin-left:20px}main{max-width:1220px;margin:auto}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;min-height:585px;padding:65px 0 45px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.7px;display:flex;align-items:center;gap:9px}.eyebrow i{height:6px;width:6px;border-radius:50%;background:#7d9a57}.eyebrow>span{color:#899181;margin-left:10px;font-size:9px}h1{font-size:65px;line-height:1.32;letter-spacing:-3px;margin:22px 0 22px;font-weight:800;position:relative}h1 em{display:inline-block;font-style:normal;font-size:57px;margin-left:15px;color:#85a65b;vertical-align:top}.underlined{position:relative}.underlined svg{position:absolute;bottom:-15px;left:0;width:100%;height:24px;fill:none;stroke:#a9c782;stroke-width:4}.hero-copy>p{font-size:14px;color:#75806f;line-height:2}.hero-actions{display:flex;gap:22px;align-items:center;margin-top:26px}.dark-btn{background:var(--ink);color:white;padding:15px 20px;border-radius:6px;font-size:12px}.dark-btn span{margin-left:30px}.small-note{font-size:11px;color:#858d7e}.hero-stats{display:flex;gap:28px;margin-top:35px;color:#7c8575;font-size:10px}.hero-stats>span{display:flex;align-items:center;gap:9px}.hero-stats b{font-size:20px;font-weight:500;color:var(--ink)}.hero-art{position:relative;height:455px;background:radial-gradient(ellipse at center,#e3ead9,transparent 67%);overflow:hidden}.orbit{position:absolute;border:1px dashed #ced9bf;border-radius:50%;width:400px;height:350px;top:45px;left:45px;transform:rotate(-25deg)}.orbit-two{height:250px;top:100px;transform:rotate(35deg)}.art-label{position:absolute;top:27px;left:60px;font-size:9px;letter-spacing:2px;transform:rotate(-8deg);color:#7d8a70}.mini-window{position:absolute;width:325px;height:240px;left:65px;top:80px;border:1.5px solid var(--ink);border-radius:10px;background:#d8e9b8;transform:rotate(-7deg);box-shadow:9px 10px 0 #b7c8a466;overflow:hidden}.window-bar{height:33px;border-bottom:1px solid #63704d;display:flex;gap:5px;align-items:center;padding:0 13px;background:#edf2dc}.window-bar i{width:6px;height:6px;border:1px solid #798563;border-radius:50%}.window-bar span{font-family:monospace;font-size:9px;margin-left:20px;color:#768368}.window-body{padding:25px;position:relative}.window-body strong{display:block;font-size:32px;line-height:1.1;letter-spacing:-1px;margin-left:72px;margin-top:15px}.pixel{position:absolute;left:22px;top:39px;font-size:65px}.cursor{position:absolute;right:18px;bottom:-20px;font-size:65px;color:var(--paper);text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink)}.sticky{position:absolute;right:10px;bottom:52px;padding:20px 23px;width:205px;height:166px;background:#f2d9a2;transform:rotate(9deg);box-shadow:3px 5px 9px #52643815;font-size:17px;font-weight:600;line-height:1.8}.sticky>span{display:block;font-size:8px;letter-spacing:1.5px;font-weight:400;margin-bottom:8px}.sticky svg{width:90px;height:40px;fill:none;stroke:#6f654a;stroke-width:1.8;margin-left:40px}.art-spark{position:absolute;right:35px;top:39px;font-size:65px;color:#91ac70}.floating-tag{position:absolute;bottom:44px;left:20px;border:1px solid #d6decb;background:#f6f7f2;border-radius:30px;padding:10px 14px;transform:rotate(-6deg);font-size:10px;color:#71815f}.coordinate{position:absolute;bottom:5px;right:15px;font-size:7px;letter-spacing:1px;line-height:1.8;color:#8a947e}.collection{padding-top:35px;border-top:1px solid var(--line)}.section-top{display:flex;justify-content:space-between;align-items:center}h2{font-size:29px;letter-spacing:-1px;margin:12px 0 0;font-weight:700}.section-top h2 span{font-size:11px;font-weight:400;color:#8c9387;letter-spacing:1px;margin-left:20px}.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;padding:11px 13px;gap:10px;background:#fff8}.search>span{font-size:22px;line-height:15px}.search input{background:none;border:0;outline:none;width:190px;font-size:11px;color:var(--ink)}kbd{font-size:10px;border:1px solid var(--line);padding:1px 5px;color:#a1a696;border-radius:3px}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-top:28px}.filters{display:flex;gap:7px}.filters button{border:0;background:transparent;border-radius:6px;padding:10px 15px;color:#7b8375;font-size:12px}.filters .selected{background:var(--ink);color:white}.filters small{font-size:9px;opacity:.6;margin-left:8px}.sort-label{font-size:10px;color:#8a9182}.sort-label select{border:none;background:none;color:#56614d;font-size:11px;margin-left:7px;padding:8px}.demo-note{font-size:10px;color:#91998a;margin:20px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px 23px}.card{border:1px solid var(--line);border-radius:11px;background:#fcfcf8;overflow:hidden;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-5px);box-shadow:0 12px 22px #31462e0d}.cover{height:218px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.cover:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.07' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;opacity:.4}.cover .type{position:absolute;top:15px;left:15px;font-size:9px;letter-spacing:.7px;background:#ffffffa8;padding:5px 9px;border-radius:4px;z-index:1}.cover .cover-no{position:absolute;right:15px;bottom:12px;font-size:8px;letter-spacing:1px;opacity:.5}.favorite{position:absolute;right:13px;top:12px;background:#ffffff90;border:0;color:#4e5948;border-radius:50%;width:29px;height:29px;font-size:18px;z-index:2}.favorite.saved{color:#b66051;background:#fff}.card-info{padding:20px}.card-line{display:flex;justify-content:space-between;gap:5px;align-items:center}.card h3{font-size:17px;margin:0;letter-spacing:-.5px}.status{font-size:9px;color:#6b8c47;white-space:nowrap}.status:before{content:"";display:inline-block;width:4px;height:4px;background:#7ea057;border-radius:50%;margin-right:4px}.card-info>p{font-size:11px;color:#87907e;line-height:1.8;margin:9px 0 14px;min-height:20px}.tags{display:flex;gap:5px}.tags span{font-size:9px;color:#8c9483;background:#eff2e9;border-radius:3px;padding:4px 6px}.card-bottom{border-top:1px solid #e9ede3;display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:13px;color:#939b8b;font-size:9px}.card-bottom button{border:0;background:none;color:#4e6242;font-size:11px;padding:3px 0}.cover-focus{background:#e3e9d7}.clock-art{border-radius:50%;width:143px;height:143px;background:#f9faf2;border:8px solid #cfdbbc;outline:1px solid #bcc9ac;box-shadow:0 8px 0 #b6c5a833;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(-9deg)}.clock-art b{font-size:31px;letter-spacing:2px;font-weight:500}.clock-art span{font-size:8px;letter-spacing:3px;margin-top:5px}.clock-art:after{content:'●';color:#8ea96a;font-size:16px;margin-top:6px}.cover-palette{background:#e9deef}.palette-art{display:flex;gap:7px;transform:rotate(-9deg)}.palette-art i{height:125px;width:39px;border:5px solid #faf7f2;border-bottom-width:25px;border-radius:7px;box-shadow:0 5px 8px #6a44751a}.cover-react{background:#f3dbc3}.reaction-art{text-align:center;border:1.5px solid #7a543c;border-radius:12px;padding:20px 48px;background:#f5e7d8;transform:rotate(5deg);box-shadow:5px 6px 0 #bc8d6a2c}.reaction-art span{font-size:42px}.reaction-art b{display:block;font-size:12px;letter-spacing:2px;margin-top:6px}.cover-markdown{background:#dce7ee}.editor-art{width:240px;background:#f6f9f8;border:1px solid #8aa1ac;border-radius:6px;transform:rotate(-6deg);box-shadow:7px 7px 0 #9bb4c433}.editor-art>span{display:block;border-bottom:1px solid #d6e0e2;padding:7px 10px;font-size:8px;color:#8096a1}.editor-art>div{display:flex;gap:17px;padding:20px 14px}.editor-art code{font-size:11px;color:#8c9ca8;line-height:2}.editor-art strong{font-size:19px;line-height:1.8;border-left:1px solid #dde3e5;padding-left:16px}.cover-wheel{background:#f0e5bc}.wheel-art{width:147px;height:147px;border-radius:50%;background:conic-gradient(#68805a 0 60deg,#e8a475 60deg 120deg,#e6cf85 120deg 180deg,#bfd0a5 180deg 240deg,#a9bac4 240deg 300deg,#d2b8c4 300deg);border:6px solid #fff9e8;box-shadow:0 7px 0 #b5a56e40;position:relative;transform:rotate(-15deg)}.wheel-art:before{content:'✦';position:absolute;background:#fff9e8;border-radius:50%;width:35px;height:35px;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;font-size:20px}.wheel-art:after{content:'▼';position:absolute;top:-22px;left:56px;font-size:25px}.cover-breathe{background:#d9e8df}.breathe-art{height:150px;width:150px;border-radius:50%;background:#c3d6c7;border:20px solid #cbded0;outline:15px solid #d2e3d6;display:grid;place-items:center}.breathe-art span{font-size:12px;letter-spacing:6px;color:#67836b;margin-left:6px}.empty{padding:60px 10px;text-align:center;color:#7b8971}.empty button{display:block;margin:20px auto;border:1px solid var(--line);padding:10px 20px;background:white;border-radius:5px}.collection-end{display:flex;justify-content:center;align-items:center;gap:16px;padding:35px 0 60px;font-size:10px;color:#9ba38f}.collection-end>span:first-child{height:1px;width:50px;background:var(--line)}.collection-end>span:last-child{font-size:22px}.method{display:grid;grid-template-columns:1fr 1.15fr;padding:45px 50px;background:#eaf0e2;border:1px solid #dce5d1;border-radius:10px;gap:70px}.method h2{font-size:32px;line-height:1.6;margin-top:20px}.method p{color:#88927d;font-size:11px;line-height:2}.method ol{list-style:none;padding:0;margin:0}.method li{padding:10px 0 15px;border-bottom:1px solid #d7dfcc}.method li:last-child{border:0}.method li>span{font-size:9px;letter-spacing:1px;color:#8e9c7e}.method h3{font-size:15px;font-weight:500;margin:9px 0 0}.method h3 b{float:right;font-weight:400}.method li p{margin:5px 0 0}.bottom-note{padding:70px 0;text-align:center}.bottom-note>span{font-size:34px;color:#98af7f}.bottom-note h2{font-size:24px;line-height:1.8;letter-spacing:0}.bottom-note a{display:inline-block;font-size:11px;border-bottom:1px solid #abb69c;padding-bottom:7px;margin-top:22px}footer{max-width:1220px;margin:auto;border-top:1px solid var(--line);padding:25px 0 35px;display:flex;justify-content:space-between;align-items:center;color:#9aa18e;font-size:9px}.footer-brand{font-size:15px;font-weight:700;color:#5f7051}.footer-brand span{font-size:9px;margin-left:6px;font-weight:400}dialog{padding:0;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:15px;width:min(760px,calc(100% - 28px));max-height:90vh;box-shadow:0 25px 100px #182d3340}dialog::backdrop{background:#24372d80;backdrop-filter:blur(5px)}.modal-top{display:flex;justify-content:space-between;align-items:center;padding:15px 25px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:2px}.modal-top button{border:0;background:none;font-size:25px;color:var(--ink)}#modal-content{padding:25px 32px}.detail-head h2{margin:0}.detail-head p,.detail-text{color:#7b8870;font-size:12px;line-height:2}.detail-tag{font-size:10px;color:#849675}.demo-stage{padding:25px;background:#eaf0e2;border:1px solid #d9e2d0;border-radius:9px;margin:20px 0;text-align:center;min-height:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px}.demo-stage button,.copy-btn{padding:10px 18px;border:1px solid #cbd6bd;border-radius:5px;background:var(--ink);color:white;font-size:12px}.demo-stage .secondary{background:transparent;color:var(--ink)}.demo-stage input,.demo-stage textarea{padding:10px;border:1px solid #cbd6bd;border-radius:5px;background:#fafbf6;color:var(--ink);max-width:100%}.demo-stage textarea{width:100%;min-height:140px;resize:vertical;font-family:monospace}.demo-stage .timer{font-size:55px;font-variant-numeric:tabular-nums;letter-spacing:3px}.demo-stage .control-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}.demo-stage .control-row input{width:65px}.demo-stage .palette-row{display:flex;width:100%;height:135px;border-radius:8px;overflow:hidden}.palette-row button{flex:1;border:0;border-radius:0;padding:10px 2px;display:flex;align-items:end;justify-content:center;font-size:10px;text-shadow:0 1px 4px #0009;color:white}.reaction-button{width:100%;min-height:145px!important;font-size:20px!important;background:#bd8a63!important}.reaction-button.waiting{background:#bc6457!important}.reaction-button.ready{background:#6c9655!important}.markdown-layout{display:grid;grid-template-columns:1fr 1fr;gap:15px;width:100%;text-align:left}.markdown-output{padding:10px;background:#fff;border-radius:5px;overflow-wrap:anywhere;color:#405137;font-size:13px}.markdown-output h1{font-size:24px;letter-spacing:0;margin:5px 0}.markdown-output h2{font-size:20px}.markdown-output h3{font-size:17px}.markdown-output p{line-height:1.8}.breath-orb{width:95px;height:95px;background:#adc7a2;border-radius:50%;display:grid;place-items:center;margin:30px;transition:transform 4s ease;font-size:12px}.breath-orb.expand{transform:scale(1.5)}.detail-notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px}.detail-notes h3{font-size:13px}.detail-notes p{font-size:11px;color:#849078;line-height:1.9}.prompt-box{background:#eef0e8;padding:15px;border-radius:6px;margin-top:15px}.prompt-box p{font-size:11px;line-height:1.8;color:#738268;margin:0 0 12px}.copy-btn{font-size:10px;padding:7px 12px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 22px;border-radius:7px;font-size:12px;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}[hidden]{display:none!important}
@media(min-width:1500px){main,footer{max-width:1260px}}@media(max-width:1350px){main,footer{margin-left:6%;margin-right:6%}header{padding:0 6%}.hero{gap:0}h1{font-size:58px}.hero-art{transform:scale(.92);transform-origin:right center}.cover{height:200px}}@media(max-width:1000px){h1{font-size:47px}h1 em{font-size:40px}.hero{min-height:520px;padding-top:50px}.hero-art{transform:scale(.78);width:480px;margin-left:-90px}.hero-copy{z-index:1}.hero-stats{gap:15px}.grid{gap:16px}.cover{height:175px}.card-info{padding:15px}.card h3{font-size:14px}.status{font-size:8px}.method{gap:40px;padding:35px}.clock-art{transform:scale(.85) rotate(-9deg)}.palette-art{transform:scale(.85) rotate(-9deg)}.editor-art{transform:scale(.8) rotate(-6deg)}.reaction-art{transform:scale(.85) rotate(5deg)}.section-top h2 span{display:block;margin:8px 0 0}}@media(max-width:720px){header{height:80px}.brand strong{font-size:20px}.brand-icon{font-size:36px}nav{display:none}.hero{grid-template-columns:1fr;padding-top:35px}.hero-copy{padding-left:4px}h1{font-size:52px;margin:22px 0 28px}.hero-copy>p{font-size:12px}.hero-art{width:100%;max-width:480px;height:390px;transform:scale(.9);transform-origin:center;margin:0 auto}.mini-window{left:25px;top:55px}.sticky{right:4px;bottom:40px}.floating-tag{left:0;bottom:10px}.orbit{left:0;top:10px}.coordinate{display:none}.art-label{top:0;left:25px}.hero{padding-bottom:0}.hero-stats{margin-top:25px;gap:22px}.hero-stats b{font-size:17px}.hero-stats>span{gap:5px}.section-top{display:block}.section-top h2 span{display:inline-block;margin-left:12px;font-size:10px}.search{margin-top:20px}.search input{flex:1;width:auto}.toolbar{margin-top:16px;display:block}.filters{flex-wrap:wrap;gap:2px}.filters button{font-size:11px;padding:9px 10px}.sort-label{display:block;text-align:right;margin-top:10px}.demo-note{line-height:1.8;margin-top:10px}.grid{grid-template-columns:1fr 1fr;gap:13px}.cover{height:160px}.card-line{display:block}.card h3{font-size:14px}.status{display:block;margin-top:6px}.card-info>p{font-size:10px;min-height:36px}.card-info{padding:12px}.tags{flex-wrap:wrap}.tags span{font-size:8px;padding:3px 5px}.card-bottom{font-size:8px}.card-bottom button{font-size:10px}.clock-art{transform:scale(.72) rotate(-9deg)}.palette-art{transform:scale(.68) rotate(-9deg)}.reaction-art{transform:scale(.65) rotate(5deg)}.editor-art{min-width:230px;transform:scale(.62) rotate(-6deg)}.wheel-art{transform:scale(.77) rotate(-15deg)}.breathe-art{transform:scale(.68)}.cover .type{top:10px;left:9px;font-size:8px;padding:4px 6px}.favorite{right:8px;top:8px;width:25px;height:25px}.method{grid-template-columns:1fr;gap:20px;padding:25px}.method h2{font-size:28px}.method>div>p br{display:none}.bottom-note{padding:45px 0}.bottom-note h2{font-size:20px}footer{flex-wrap:wrap;gap:15px}footer>span:last-child{width:100%}.detail-notes{grid-template-columns:1fr;gap:0}#modal-content{padding:20px}.markdown-layout{grid-template-columns:1fr}.palette-row button{font-size:8px}.collection-end{font-size:9px;gap:8px}.collection-end>span:first-child{width:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}