:root{--paper:#f7f6f0;--ink:#1c2227;--muted:#65716e;--blue:#245bff;--line:#dcded5;--lime:#dcf478}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.wrap{max-width:1200px;margin:auto;padding-left:36px;padding-right:36px}.header{height:112px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:.8px}.brand small{font-size:9px;letter-spacing:2px}.brand-mark{background:var(--ink);color:white;width:42px;height:42px;display:grid;place-content:center;font-size:28px;position:relative}.brand-mark span{position:absolute;background:var(--lime);color:var(--ink);font-size:14px;right:-5px;top:-5px;padding:1px 3px}.header nav{display:flex;gap:28px;align-items:center;font-size:13px}.free-pill{padding:10px 14px;border:1px solid var(--line);border-radius:30px;font-size:10px;letter-spacing:1px}.hero{padding:35px 0 45px;position:relative;max-width:820px}.eyebrow,.section-label{font-size:10px;letter-spacing:1.6px;font-weight:700}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow span{height:7px;width:7px;background:var(--blue);border-radius:50%}h1{font-size:clamp(48px,6.7vw,80px);line-height:.99;letter-spacing:-4.4px;margin:21px 0 23px;font-weight:800}.period{color:var(--blue)}.hero p{max-width:540px;font-size:17px;color:#52605d;line-height:1.65;margin:0}.hero-note{font-size:11px;margin-top:21px;color:var(--muted)}.hero-note span{color:var(--blue);margin:0 10px}.studio{display:grid;grid-template-columns:380px 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:white;box-shadow:0 12px 32px #26352b05}.controls{padding:28px;border-right:1px solid var(--line)}.section-label{display:flex;align-items:center;justify-content:space-between}.text-button{background:none;border:0;color:var(--muted);font-size:11px;padding:4px;text-decoration:underline}.hint{font-size:11px;color:var(--muted);margin:10px 0 20px}.caption{display:grid;gap:9px}.caption input::placeholder{color:#7d8580;opacity:1;font-weight:600}.caption label{font-size:11px;font-weight:700}.caption label span{font-weight:400;color:var(--muted);margin-left:6px}.caption input{margin-bottom:7px;width:100%;padding:13px 12px;border:1px solid var(--line);border-radius:7px;background:#fbfcf9;color:var(--ink);font-size:13px;font-weight:700}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #9bc0ff;outline-offset:3px}.error{color:#b23024;font-size:12px;line-height:1.5;min-height:0;margin:8px 0}.error:empty{display:none}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.pair label{font-size:11px;font-weight:700}select{width:100%;background:white;border:1px solid var(--line);border-radius:7px;padding:11px 6px;margin-top:8px;font-size:11px}.check{display:flex;gap:9px;align-items:center;font-size:12px;margin:19px 0}.check input{accent-color:var(--blue);width:15px;height:15px}.range{font-size:11px;display:block;margin:15px 0}.range output{float:right;color:var(--muted)}.range input{display:block;width:100%;accent-color:var(--blue);margin:13px 0}.controls details{border-top:1px solid var(--line);padding-top:14px}.controls summary{font-size:11px;color:var(--muted);cursor:pointer}.upload-title{margin:25px 0 15px}.upload-title span{font-size:8px;color:var(--muted);letter-spacing:1px}.upload{display:flex;align-items:center;flex-direction:column;gap:8px;border:1px dashed #bbc5b5;border-radius:8px;background:#f8faf5;padding:20px 8px;cursor:pointer;text-align:center}.upload:hover{border-color:var(--blue)}.upload strong{font-size:12px}.upload>span:last-of-type{font-size:10px;color:var(--muted)}.plus{font-size:20px;color:var(--blue)}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within{outline:3px solid #9bc0ff}.image-info{display:flex;gap:8px;align-items:center;font-size:10px;color:var(--muted);line-height:1.5;margin-top:10px}.image-info span{overflow-wrap:anywhere}.preview-panel{padding:28px;background:#f1f3ec}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.tabs{display:flex;background:#e3e7dd;border-radius:30px;padding:3px}.tabs button{font-size:10px;padding:7px 13px;border:0;background:transparent;border-radius:30px;color:#576356}.tabs button[aria-pressed=true]{background:white;color:var(--ink);box-shadow:0 2px 3px #00000008}.canvas-stage{background:#121f24;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:240px;max-height:620px}.canvas-stage.transparent{background-color:#fff;background-image:linear-gradient(45deg,#e1e5de 25%,transparent 25%),linear-gradient(-45deg,#e1e5de 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e1e5de 75%),linear-gradient(-45deg,transparent 75%,#e1e5de 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;padding:35px 15px;min-height:400px}.canvas-stage canvas{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;touch-action:none;cursor:ns-resize}.canvas-stage.transparent canvas{cursor:default}.preview-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:14px 0 23px}.downloads{display:grid;gap:9px}.downloads button{width:100%;border-radius:8px;padding:17px 20px;text-align:left;font-size:12px;font-weight:700}.downloads span{float:right;font-size:17px}.primary{border:1px solid var(--blue);background:var(--blue);color:white;box-shadow:0 4px 12px #245bff22}.primary:hover{background:#164be5}.secondary{border:1px solid #ccd3c2;background:transparent;color:var(--ink)}.secondary:hover{background:#e5eadf}.export-note{font-size:10px;text-align:center;color:var(--muted);margin:14px 0 0;line-height:1.5}.status{color:#2c5e31;font-size:11px;min-height:13px;margin-bottom:0}.how{padding:70px 0 55px}h2{font-size:35px;letter-spacing:-1.2px;line-height:1.14;margin:17px 0 30px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.steps article{border-top:1px solid var(--line);padding-top:21px}.steps article>span{font-size:13px;color:var(--blue)}h3{font-size:16px;margin:18px 0 12px}.steps p,.faq p{font-size:13px;color:var(--muted);line-height:1.8;margin:0}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;border-top:1px solid var(--line);padding:52px 0 60px}.faq h2{margin-bottom:20px}.questions details{border-bottom:1px solid var(--line);padding:18px 0}.questions summary{font-size:13px;font-weight:700;cursor:pointer}.questions p{padding-top:12px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;min-height:100px;font-size:9px;letter-spacing:.5px}footer small{color:var(--muted);font-size:9px}footer nav{display:flex;gap:20px}.skip{position:absolute;left:12px;top:-100px;background:white;padding:12px;z-index:10}.skip:focus{top:12px}.document{max-width:740px;padding-top:40px;padding-bottom:80px}.document h1{font-size:48px;letter-spacing:-2px}.document p,.document li{line-height:1.8;color:var(--muted);font-size:15px}.document h2{font-size:24px;margin-top:35px}.document a{text-decoration:underline}@media(max-width:900px){.studio{grid-template-columns:330px 1fr}.controls,.preview-panel{padding:22px}.wrap{padding-left:24px;padding-right:24px}.faq{gap:35px}.canvas-stage.transparent{min-height:330px}}@media(max-width:700px){.wrap{padding-left:20px;padding-right:20px}.header{height:85px}.header nav{gap:14px}.header nav>a{display:none}.free-pill{font-size:8px;padding:8px 10px}.hero{padding:25px 0 32px}h1{font-size:54px;letter-spacing:-2.8px}.hero p{font-size:15px}.hero-note{font-size:9px}.studio{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line);padding:22px}.preview-panel{padding:20px}.canvas-stage{max-height:560px}.canvas-stage canvas{max-height:560px}.canvas-stage.transparent{min-height:240px}.steps{grid-template-columns:1fr;gap:24px}.how{padding-top:50px}h2{font-size:29px}.steps article>span{float:left;margin-right:15px}.steps h3{margin-top:0}.steps p{margin-left:32px}.faq{grid-template-columns:1fr;gap:15px;padding:35px 0}.faq h2 br{display:none}footer{flex-direction:column;gap:18px;align-items:flex-start;padding-top:25px;padding-bottom:25px}html{scroll-behavior:auto}}

/* Tool Cafe directory and shared site navigation */
.breadcrumbs{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:11px;margin-top:8px}.breadcrumbs a{text-decoration:underline}.hub{--blue:#2d6550}.hub .brand-mark{border-radius:12px;background:#2d6550}.hub-hero{position:relative;padding:46px 0 68px;border-bottom:1px solid var(--line)}.hub-hero h1{font-size:clamp(54px,7.5vw,86px);letter-spacing:-4.5px;line-height:1.03;max-width:760px;margin:25px 0}.hub-hero>p{font-size:18px;line-height:1.7;color:var(--muted);max-width:560px}.hub-cta{display:inline-flex;gap:38px;align-items:center;padding:17px 22px;border-radius:8px;background:var(--blue);color:white;font-size:13px;font-weight:700}.hub-cta:hover{background:#224e3c;text-decoration:none}.hub-cta span{font-size:22px}.hub-note{color:var(--muted);font-size:11px;margin-top:17px}.cafe-emblem{position:absolute;right:40px;top:72px;background:#e7eddc;border:1px solid #d9e2cb;width:185px;height:185px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(9deg)}.cup{font-size:44px;line-height:1.4}.steam{font-size:25px;height:21px;color:#2d6550}.emblem-text{font-size:9px;font-weight:700;letter-spacing:2px;text-align:center;line-height:1.7}.tool-directory{padding:45px 0 50px}.directory-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.directory-heading h2{font-size:32px;margin:12px 0 0}.tool-count{font-size:9px;letter-spacing:1.3px;color:var(--muted);white-space:nowrap}.tool-card{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:white}.card-copy{padding:35px 40px}.card-tags{display:flex;gap:10px;align-items:center;font-size:9px;letter-spacing:1.1px;font-weight:700}.card-tags>span{border-radius:20px;background:#f0f2e9;padding:8px 11px}.card-tags .card-free{background:#e5f1e8;color:#2d6550}.card-copy h3{font-size:38px;letter-spacing:-1.5px;line-height:1.08;margin:24px 0 17px}.card-copy>p{color:var(--muted);line-height:1.8;font-size:14px;max-width:420px;margin:0}.card-features{display:flex;flex-wrap:wrap;gap:8px 17px;font-size:10px;margin:22px 0 28px}.card-features span:before{content:'✓';color:#2d6550;margin-right:5px}.card-art{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;background:radial-gradient(circle at 75% 25%,#253959 0,#111f33 48%,#0b1625 100%);min-height:390px;padding:34px}.card-art:hover{text-decoration:none}.art-caption{font-size:clamp(38px,5vw,66px);font-weight:900;letter-spacing:-2px;line-height:1.12;text-align:center;color:#d9eaff;text-shadow:0 0 3px #67a0ff,0 0 14px #2563ff,0 0 28px #2563ff;z-index:1}.art-label{font-size:9px;color:#a0b5d0;letter-spacing:2px;margin-top:30px;z-index:1}.art-orbit{position:absolute;border:1px solid #5473a63f;width:400px;height:400px;transform:rotate(-25deg);border-radius:32px}.art-orbit:before{content:'';position:absolute;inset:30px;border:1px solid #5473a63f;border-radius:25px}.hub-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;border-top:1px solid var(--line);padding:35px 0 50px}.hub-principles article>span{font-size:9px;letter-spacing:1.4px;color:var(--muted)}.hub-principles h3{font-size:15px;margin:14px 0 11px}.hub-principles p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.hub .header nav{gap:24px}.hub .header nav a{display:block}@media(max-width:950px){.cafe-emblem{right:10px;top:65px;width:140px;height:140px}.hub-hero h1{font-size:68px}.card-copy{padding:28px}.card-copy h3{font-size:34px}.hub-principles{gap:25px}}@media(max-width:700px){.hub .brand{font-size:13px}.hub .brand small{font-size:7px;letter-spacing:1px}.hub .header nav{gap:15px;font-size:11px}.hub-hero{padding:26px 0 40px}.hub-hero h1{font-size:51px;letter-spacing:-2.8px;margin:22px 0}.hub-hero>p{font-size:15px}.cafe-emblem{display:none}.hub-cta{font-size:12px;padding:15px 18px}.directory-heading{align-items:flex-start}.directory-heading h2{font-size:25px}.tool-count{display:none}.tool-card{grid-template-columns:1fr}.card-copy{padding:26px}.card-art{min-height:300px}.art-caption{font-size:54px}.hub-principles{grid-template-columns:1fr;gap:25px;padding:28px 0 38px}.tool-header nav>a:first-child{display:block}.tool-header nav{gap:12px}.tool-header .brand{font-size:13px}.tool-header .brand small{font-size:7px;letter-spacing:1px}.breadcrumbs{font-size:10px;gap:8px}.tool-header .free-pill{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.tool-facts{padding:42px 0 48px;border-top:1px solid var(--line)}.tool-facts h2{font-size:32px;letter-spacing:-1px;margin:15px 0}.facts-intro{max-width:740px;font-size:14px;line-height:1.8;color:var(--muted)}.tool-facts table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.75;margin:24px 0}.tool-facts caption{text-align:left;font-size:11px;color:var(--muted);padding-bottom:12px}.tool-facts th,.tool-facts td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}.tool-facts th{width:28%;font-weight:700;background:#f0f2e9}.tool-facts td{background:#fbfcf9}.caption-example{max-width:820px}.caption-example h3{font-size:17px;margin:26px 0 12px}.caption-example p{font-size:13px;line-height:1.8;color:var(--muted)}@media(max-width:700px){.tool-facts{padding:30px 0}.tool-facts h2{font-size:26px}.tool-facts th,.tool-facts td{font-size:12px;padding:12px 10px}.tool-facts th{width:32%}}