*{box-sizing:border-box}html{overflow-x:hidden}body{margin:0;background:#f5f1e8;color:#111827;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;overflow-x:hidden}a{color:inherit}.shell{width:min(1180px,calc(100% - 24px));margin:auto}.network{background:#0b1530;color:#fff}.network .shell{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:14px}.network a{font-weight:850;text-decoration:none}.header{border-bottom:1px solid #d4cec0;background:#fffdf8}.header .shell{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}.brand{font-size:1.3rem;font-weight:950;text-decoration:none}.header nav{display:flex;gap:14px;flex-wrap:wrap}.header nav a{text-decoration:none;font-weight:750}.hero{padding:44px 0 28px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:24px;align-items:stretch}.kicker{text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:#2563eb;font-size:.78rem}.hero h1{font-size:clamp(2.6rem,6vw,5.4rem);line-height:.92;margin:.2em 0;letter-spacing:-.04em}.lede{font-size:1.15rem;color:#5b6473;max-width:760px}.trust{border:2px solid #111827;border-radius:24px;background:#0b1530;color:#fff;padding:24px;box-shadow:8px 8px 0 #111827}.trust strong{font-size:1.35rem}.trust ul{padding-left:1.1rem}.workspace{padding:12px 0 36px}.panel{background:#fff;border:2px solid #111827;border-radius:24px;box-shadow:7px 7px 0 #111827;padding:18px}.drop{border:3px dashed #6b7280;border-radius:20px;background:#f9fbff;padding:28px;text-align:center;transition:.15s}.drop.drag{border-color:#2563eb;background:#eaf2ff}.drop h2{margin:.1em 0}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}.btn,button{border:2px solid #111827;border-radius:13px;background:#fff;padding:9px 14px;font-weight:850;cursor:pointer;min-height:44px}.btn.primary,button.primary{background:#ff7245;box-shadow:3px 3px 0 #111827}.btn.blue{background:#8db5ff}button:disabled{opacity:.45;cursor:not-allowed}.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.rule{border:1px solid #d4d9e1;border-radius:16px;padding:12px;background:#fbfcff}.rule label{display:block;font-weight:800;font-size:.84rem;margin-bottom:6px}.rule input,.rule select{width:100%;min-height:42px;border:1px solid #9da6b4;border-radius:10px;padding:7px 9px;background:white}.rule .inline{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rule.check label{display:flex;gap:8px;align-items:center}.rule.check input{width:auto;min-height:auto}.tokens{display:flex;gap:6px;flex-wrap:wrap;font-size:.75rem;color:#5b6473}.tokens code{background:#eef2ff;border-radius:6px;padding:2px 5px}.preview-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px;flex-wrap:wrap}.preview-tools .inputs{display:flex;gap:8px;min-width:min(100%,520px)}.preview-tools input,.preview-tools select{min-height:44px;border:2px solid #111827;border-radius:12px;padding:7px 10px;background:#fff;max-width:100%}.preview-tools input{flex:1}.summary{font-size:.92rem;color:#4b5563}.table-wrap{overflow:auto;border:2px solid #111827;border-radius:16px;background:#fff;max-height:560px}table{border-collapse:collapse;width:100%;min-width:780px}th,td{text-align:left;padding:10px;border-bottom:1px solid #e3e6eb;font-size:.87rem}th{position:sticky;top:0;background:#111827;color:#fff;z-index:2}.filename{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}.filename.new{color:#0f5a34;font-weight:700}.arrow{text-align:center;color:#6b7280}.state{font-weight:800}.row-warning{background:#fff3e8}.empty{text-align:center;padding:32px;color:#6b7280}.exports{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.privacy-note{margin-top:14px;border-left:5px solid #2563eb;background:#eef5ff;padding:12px 14px}.section{padding:36px 0}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{border:2px solid #111827;border-radius:20px;background:#fff;padding:18px;box-shadow:4px 4px 0 #111827}.card h3{margin:.1em 0}.popular{margin:30px auto;width:min(1180px,calc(100% - 24px));min-height:90px;border:2px solid #111827;border-radius:20px;background:#fff;padding:16px}.popular .fallback{display:flex;justify-content:space-between;align-items:center;gap:14px}.footer{background:#0b1530;color:#fff;margin-top:44px;padding:30px 0}.footer .shell{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer nav{display:flex;gap:12px;flex-wrap:wrap}.footer a{color:#fff}.legal{max-width:820px}.legal h1{font-size:clamp(2.2rem,5vw,4rem)}.legal .card{margin:18px 0}.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:8px}.status{position:absolute;left:-9999px}.ad-gap{min-height:150px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.rules{grid-template-columns:repeat(2,minmax(0,1fr))}.cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.shell{width:min(100% - 16px,1180px)}.network .shell{min-height:44px}.header .shell{align-items:flex-start;padding:12px 0}.header nav{justify-content:flex-end}.hero{padding-top:30px}.trust,.panel{box-shadow:4px 4px 0 #111827}.rules{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.preview-tools .inputs{width:100%;display:grid;grid-template-columns:1fr}.preview-tools input,.preview-tools select{width:100%}.popular .fallback{align-items:flex-start;flex-direction:column}.exports button{flex:1 1 calc(50% - 8px)}.drop{padding:22px 12px}.actions .btn,.actions button{flex:1 1 140px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.topline{background:#10224f;color:#fff}.topline .shell{min-height:42px;display:flex;align-items:center;gap:12px}.topline .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#8fb6ff;border-right:1px solid rgba(255,255,255,.28);padding-right:12px;white-space:nowrap}.topline a{min-width:0;color:#fff;text-decoration:none;display:flex;gap:8px;align-items:center}.topline a strong,.topline a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topline a span{color:rgba(255,255,255,.7);font-size:.8rem}.popular{min-height:0}.popular-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.popular-head a{font-weight:800}.popular-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.popular-card{border:1px solid #cfd5df;border-radius:14px;padding:12px;text-decoration:none;display:flex;flex-direction:column;gap:5px;background:#fbfcff}.popular-card span{font-size:.82rem;color:#5d6674}.popular-card:hover{border-color:#2563eb}@media(max-width:760px){.popular-grid{grid-template-columns:1fr 1fr}.topline a span{display:none}}@media(max-width:480px){.popular-grid{grid-template-columns:1fr}}
/* beginner quick guide */
.guide-hero{padding:46px 0 28px}.guide-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:28px;align-items:center}.guide-hero h1{font-size:clamp(2.7rem,6vw,5.2rem);line-height:.94;letter-spacing:-.045em;margin:.18em 0}.guide-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.before-after{border:2px solid #111827;border-radius:24px;background:#fff;box-shadow:8px 8px 0 #111827;padding:22px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}.before-after>div:not(.big-arrow){display:flex;flex-direction:column;gap:9px;min-width:0}.before-after span{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#6b7280}.before-after code,.recipe-files code{display:block;background:#f3f4f6;border:1px solid #d1d5db;border-radius:10px;padding:9px 10px;overflow-wrap:anywhere}.before-after code.good,.good{background:#eaf9ef;color:#0c5b31;border-color:#9bd3ad}.big-arrow{font-size:2rem;font-weight:950;color:#2563eb}.guide-steps{display:grid;gap:18px}.guide-step{display:grid;grid-template-columns:58px minmax(0,1fr);gap:18px;border:2px solid #111827;border-radius:22px;background:#fff;padding:20px;box-shadow:5px 5px 0 #111827}.guide-step h3{font-size:1.35rem;margin:.05em 0 .4em}.step-number{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:#ff7245;border:2px solid #111827;font-size:1.3rem;font-weight:950;box-shadow:3px 3px 0 #111827}.mini-ui{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.fake-button{border:2px solid #111827;border-radius:12px;padding:8px 12px;font-weight:850;background:#fff}.fake-button.primary{background:#ff7245}.fake-button.blue{background:#8db5ff}.tip{background:#eef5ff;border-left:4px solid #2563eb;padding:9px 11px;border-radius:0 10px 10px 0;color:#3d4858}.rule-demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.rule-demo>div{border:1px solid #d4d9e1;border-radius:12px;padding:10px;background:#fbfcff;display:flex;flex-direction:column;gap:4px}.rule-demo b{font-size:.78rem;color:#5b6473}.preview-example{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #d4d9e1;border-radius:14px;padding:12px;margin:12px 0;background:#fbfcff}.preview-example>div:not(.small-arrow):not(.ok-chip){display:flex;flex-direction:column;gap:4px;min-width:0}.preview-example span{font-size:.75rem;font-weight:850;color:#6b7280}.preview-example code{overflow-wrap:anywhere}.small-arrow{font-weight:950;color:#6b7280}.ok-chip{background:#dff6e7;color:#0b6031;border:1px solid #97d6ad;border-radius:999px;padding:6px 9px;font-size:.78rem;font-weight:900;white-space:nowrap}.export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}.export-grid>div{border:1px solid #d4d9e1;border-radius:14px;padding:12px;background:#fbfcff}.export-grid p{margin:.3em 0 0;color:#5b6473}.warning-note{background:#fff2e6;border-left:5px solid #ff7245;padding:11px 13px}.recipe-showcase{display:grid;grid-template-columns:1fr .95fr 1fr;gap:16px;align-items:stretch}.recipe-files,.recipe-rules{border:2px solid #111827;border-radius:20px;background:#fff;padding:18px;box-shadow:4px 4px 0 #111827}.recipe-files{display:flex;flex-direction:column;gap:8px}.recipe-files h3,.recipe-rules h3{margin:.05em 0 .5em}.recipe-files.final{background:#eef9f1}.recipe-rules p{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:7px 0}.recipe-rules span{font-weight:800}.recipe-rules code{background:#f3f4f6;border-radius:7px;padding:4px 6px}.center-action{text-align:center;margin-top:20px}.recipes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.recipe{border:2px solid #111827;border-radius:20px;background:#fff;padding:17px;box-shadow:4px 4px 0 #111827}.recipe h3{margin:.25em 0}.recipe code{display:block;margin-top:10px;background:#f3f4f6;border-radius:8px;padding:8px;overflow-wrap:anywhere}.recipe-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:#8db5ff;border:2px solid #111827;font-weight:950}.plain-table-wrap{overflow:auto;border:2px solid #111827;border-radius:18px;background:#fff}.plain-table{min-width:680px}.plain-table th{position:static}.plain-table td:first-child{font-weight:900}.guide-faq{display:grid;gap:16px}.guide-cta{padding:34px 0;background:#10224f;color:#fff;margin-top:28px}.guide-cta .shell{display:flex;justify-content:space-between;align-items:center;gap:20px}.guide-cta h2{margin:.2em 0;max-width:760px}.guide-cta .kicker{color:#8db5ff}
@media(max-width:900px){.guide-hero-grid{grid-template-columns:1fr}.recipes{grid-template-columns:1fr 1fr}.recipe-showcase{grid-template-columns:1fr}.before-after{max-width:760px}.guide-cta .shell{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.guide-hero{padding-top:30px}.guide-hero h1{font-size:2.7rem}.before-after{grid-template-columns:1fr}.big-arrow{transform:rotate(90deg);justify-self:center}.guide-step{grid-template-columns:1fr;gap:10px}.rule-demo,.export-grid,.recipes{grid-template-columns:1fr}.preview-example{grid-template-columns:1fr}.small-arrow{transform:rotate(90deg);justify-self:center}.ok-chip{justify-self:start}.guide-actions .btn{flex:1 1 150px}.recipe-rules p{grid-template-columns:1fr}.guide-cta .btn{width:100%}}