:root{
  --orange:#F05A22;
  --orange-deep:#C84215;
  --green:#5D8B58;
  --green-soft:#E8F0E6;
  --green-pale:#F3F7F1;
  --charcoal:#222222;
  --charcoal-2:#2F2D2B;
  --cream:#F5F4F2;
  --cream-2:#EEEAE6;
  --white:#FFFFFF;
  --ink:#202020;
  --muted:#6E6A66;
  --line:#DDD8D3;
  --red:#A84235;
  --shadow:0 20px 55px rgba(35,31,28,.08);
  --shadow-soft:0 10px 28px rgba(35,31,28,.06);
  --radius:20px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(rgba(245,244,242,.94),rgba(245,244,242,.94)),
    radial-gradient(circle at 70% 10%, rgba(240,90,34,.08), transparent 34%),
    var(--cream);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.012em;
}
button,input,select{font:inherit}
button{cursor:pointer}
code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
.app-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}

/* rail */
.rail{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  padding:28px 18px 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(240,90,34,.11), transparent 23%),
    #1F1F1F;
  color:#fff;
  border-right:1px solid #32302E;
}
.brand-lockup{display:flex;align-items:center;gap:12px;padding:0 8px}
.gear-mark{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  color:#ECE9E5;background:#2B2A28;
  border:1px solid #3C3936;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 12px 20px rgba(0,0,0,.2)
}
.gear-mark svg{width:28px;height:28px}
.brand-name{font-size:17px;font-weight:830;letter-spacing:-.04em}
.brand-name span{color:var(--orange);padding:0 3px}
.brand-by{font-size:10px;color:#96908A;margin-top:4px;letter-spacing:.02em}
.brand-by strong{color:var(--orange);font-weight:750}
.rail-rule{height:1px;background:#33302E;margin:25px 8px 22px}
.rail-nav{display:grid;gap:3px}
.rail-item{
  width:100%;border:0;background:transparent;color:#A9A29C;
  display:grid;grid-template-columns:28px 1fr 8px;align-items:center;gap:6px;
  text-align:left;padding:11px 12px;border-radius:11px;
  font-size:12px;font-weight:650;transition:.18s ease;
}
.rail-item:hover{background:#272523;color:#fff}
.rail-item.active{background:#FFFDFC;color:#1F1F1F;box-shadow:0 8px 25px rgba(0,0,0,.17)}
.rail-index{font-size:9px;letter-spacing:.08em;color:#5E5A56}
.rail-item.active .rail-index{color:var(--orange)}
.rail-dot{width:6px;height:6px;border-radius:50%;background:#4A4744;justify-self:end}
.rail-item.active .rail-dot{background:var(--orange);box-shadow:0 0 0 4px rgba(240,90,34,.12)}
.rail-bottom{margin-top:auto;border-top:1px solid #34312F;padding:18px 9px 0}
.secure-chip{display:flex;align-items:center;gap:8px;font-size:10px;color:#DDD7D1;font-weight:700}
.secure-chip span{width:7px;height:7px;border-radius:50%;background:#78A671;box-shadow:0 0 0 4px rgba(120,166,113,.10)}
.rail-bottom p{margin:10px 0 0;color:#766F69;font-size:9px;line-height:1.45}

/* top bar */
.main{min-width:0}
.topbar{
  position:sticky;top:0;z-index:30;
  min-height:76px;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(245,244,242,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(221,216,211,.8)
}
.breadcrumb{font-size:9px;letter-spacing:.13em;color:#918A84}
.breadcrumb strong{color:#55504B}
.page-title{font-size:16px;font-weight:760;margin-top:5px;letter-spacing:-.025em}
.top-actions{display:flex;align-items:center;gap:9px}
.environment-badge{
  display:flex;align-items:center;gap:7px;padding:8px 11px;
  border-radius:999px;border:1px solid #D8D1CB;background:rgba(255,255,255,.58);
  font-size:10px;color:#635D57
}
.environment-badge span{width:7px;height:7px;border-radius:50%;background:#77A570;box-shadow:0 0 0 4px rgba(119,165,112,.11)}
.ghost-btn,.outline-btn,.primary-btn{
  border-radius:10px;padding:11px 14px;font-size:11px;font-weight:780;transition:.16s ease
}
.ghost-btn{border:1px solid #D8D1CB;background:rgba(255,255,255,.5);color:#55504B}
.ghost-btn.dark{border-color:#4A4744;color:#EFE9E3;background:#2A2826}
.outline-btn{border:1px solid #CFC8C2;background:#FFFDFB;color:#292725}
.primary-btn{border:1px solid var(--orange);background:var(--orange);color:white;box-shadow:0 9px 20px rgba(240,90,34,.16)}
.primary-btn:hover{background:var(--orange-deep);border-color:var(--orange-deep);transform:translateY(-1px)}
.outline-btn:hover,.ghost-btn:hover{transform:translateY(-1px);border-color:#BFB6AE}
.canvas{max-width:1240px;margin:0 auto;padding:42px 40px 80px}
.view{display:none}.view.active{display:block}

/* hero */
.hero{
  position:relative;overflow:hidden;
  min-height:480px;border-radius:28px;
  background:#262422;color:#fff;
  box-shadow:0 30px 80px rgba(31,29,27,.18);
  display:grid;grid-template-columns:1.15fr .85fr;
  padding:58px 56px 110px;
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 77% 34%, rgba(240,90,34,.12), transparent 24%),
    radial-gradient(circle at 80% 48%, rgba(93,139,88,.08), transparent 37%);
  pointer-events:none
}
.hero-gridlines{
  position:absolute;inset:0;opacity:.11;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.16) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to right,transparent 0,#000 35%,#000 100%)
}
.hero-copy{position:relative;z-index:2;align-self:center;max-width:700px}
.product-label{font-size:10px;letter-spacing:.18em;color:#B9B1AA;font-weight:800}
.hero h1{font-size:56px;line-height:.98;letter-spacing:-.06em;margin:17px 0 20px;font-weight:820}
.hero h1 span{color:var(--orange)}
.hero-copy>p{max-width:630px;font-size:15px;line-height:1.6;color:#BCB5AE}
.hero-actions{display:flex;gap:9px;margin-top:26px}
.hero-visual{position:relative;z-index:2;display:grid;place-items:center}
.orbit-art{width:min(100%,410px);filter:saturate(.98)}
.hero-strip{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  min-height:74px;padding:0 34px;
  display:grid;grid-template-columns:250px 1fr 160px;align-items:center;gap:20px;
  border-top:1px solid #403D3A;background:rgba(25,24,23,.78);backdrop-filter:blur(9px)
}
.makegood-mark{display:flex;align-items:center;gap:10px}
.m-box{width:30px;height:30px;background:var(--orange);display:grid;place-items:center;color:#1F1F1F;font-size:17px;font-weight:950;border-radius:4px}
.makegood-mark strong{font-size:10px;letter-spacing:.11em}
.makegood-mark small{display:block;color:#827A74;font-size:8px;margin-top:2px;text-transform:uppercase;letter-spacing:.10em}
.hero-strip-copy{font-size:10px;color:#8F8882}
.hero-progress{text-align:right}.hero-progress span{display:block;font-size:8px;letter-spacing:.14em;color:#77706A}.hero-progress strong{font-size:24px;letter-spacing:-.05em;color:#fff}

/* headings */
.eyebrow{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:850;color:var(--orange)}
.eyebrow.green-text{color:var(--green)}.eyebrow.inverse{color:#E27A55}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:20px}
.section-heading.compact{margin-bottom:16px}
.section-heading h2,.content-head h2{font-size:32px;letter-spacing:-.045em;margin:7px 0 0}
.section-heading>p{max-width:480px;font-size:12px;color:var(--muted);line-height:1.55;margin:0}
.system-map{padding:36px 0 12px}
.flow-grid{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:center}
.flow-card{
  min-height:128px;border:1px solid var(--line);background:rgba(255,255,255,.82);
  border-radius:18px;padding:18px;display:grid;grid-template-columns:48px 1fr;gap:14px;text-align:left;
  box-shadow:var(--shadow-soft);position:relative;transition:.18s ease
}
.flow-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.flow-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:18px;font-weight:900}
.flow-icon.orange{background:#F9E8E0;color:var(--orange)}
.flow-icon.green{background:var(--green-soft);color:var(--green)}
.flow-icon.charcoal{background:#E8E5E2;color:#2F2D2B}
.flow-label{font-size:8px;letter-spacing:.13em;color:#9A928C;font-weight:800}
.flow-card h3{font-size:17px;margin:5px 0 3px}.flow-card p{font-size:10px;color:var(--muted);margin:0}
.flow-state{position:absolute;right:14px;bottom:12px;font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:#918A84;font-weight:800}
.flow-state.good{color:var(--green)}
.flow-arrow{text-align:center;color:#B9B2AC;font-size:20px}
.overview-panel{display:grid;grid-template-columns:1fr 320px;gap:16px;margin-top:20px}
.overview-left{padding:24px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.72);box-shadow:var(--shadow-soft)}
.checkpoint-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checkpoint-card{
  border:1px solid #E3DDD8;background:#FFF;min-height:150px;border-radius:14px;padding:16px;text-align:left;
  transition:.18s ease
}
.checkpoint-card:hover{transform:translateY(-2px);border-color:#CFC6BE}
.checkpoint-top{display:flex;align-items:center;justify-content:space-between}.checkpoint-top>span{font-size:9px;color:var(--orange);font-weight:900}
.mini-status{font-size:7px;letter-spacing:.1em;color:#9B938C;font-weight:850}.mini-status.good{color:var(--green)}
.checkpoint-card h3{font-size:14px;margin:22px 0 8px}.checkpoint-card p{font-size:10px;color:var(--muted);line-height:1.5;margin:0}
.policy-card{border-radius:22px;background:#EAF1E8;border:1px solid #D2DFCF;padding:24px;box-shadow:var(--shadow-soft)}
.policy-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#DCE9D9;color:var(--green);margin-bottom:28px}
.policy-icon svg{width:23px}.policy-card h3{font-size:21px;letter-spacing:-.035em;margin:8px 0 8px}.policy-card>p{font-size:11px;line-height:1.55;color:#586156}
.policy-rule{height:1px;background:#CBDAC8;margin:20px 0 13px}.policy-pair{display:flex;justify-content:space-between;font-size:9px;padding:7px 0;color:#667361}.policy-pair strong{font-family:"SFMono-Regular",Consolas,monospace;color:#36583D}.policy-pair.deny strong{color:var(--red)}
.export-bar{margin-top:16px;border:1px solid var(--line);background:#FFF;border-radius:20px;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px;box-shadow:var(--shadow-soft)}
.export-bar h3{font-size:18px;margin:6px 0 5px}.export-bar p{font-size:10px;color:var(--muted);margin:0}.export-actions{display:flex;gap:8px}

/* content surfaces */
.content-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:25px}
.content-head>div:first-child{max-width:760px}.content-head h2{font-size:39px}.content-head p{font-size:13px;color:var(--muted);line-height:1.55;max-width:690px}
.head-chip{font-size:8px;letter-spacing:.13em;font-weight:900;padding:9px 11px;border:1px solid #D7D0CA;border-radius:999px;background:#FFF;color:#6B645E}
.head-chip.green{background:var(--green-soft);border-color:#D1DFCEn;color:var(--green)}
.head-chip.red{background:#F5E7E4;color:var(--red);border-color:#E8D0CC}
.two-col-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.65fr);gap:16px}
.form-surface,.side-surface,.migration-list,.cors-panel,.validation-summary,.validation-checks{
  border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.86);box-shadow:var(--shadow)
}
.form-surface{padding:26px}.form-surface.accent-top{border-top:4px solid var(--green)}
.side-surface{padding:24px;background:#FBFAF8}
.surface-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E6E0DB;padding-bottom:17px;margin-bottom:20px}
.surface-head>div{display:flex;align-items:center;gap:11px}.surface-number{width:28px;height:28px;border-radius:8px;background:#F9E9E2;color:var(--orange);display:grid;place-items:center;font-size:9px;font-weight:900}
.surface-head h3{margin:0;font-size:16px}.surface-hint{font-size:8px;text-transform:uppercase;letter-spacing:.11em;color:#968E87;font-weight:800}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field-grid label.wide{grid-column:1/-1}
label>span,.field-like>span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.12em;font-weight:850;color:#77706A;margin-bottom:7px}
input,select{width:100%;height:46px;border:1px solid #D4CDC7;border-radius:11px;background:#FFF;padding:0 13px;color:#222;outline:none;font-size:12px}
input:focus,select:focus{border-color:#B6AAA0;box-shadow:0 0 0 4px rgba(240,90,34,.07)}
input[readonly]{background:#F4F1EE;color:#6A645E}
small{display:block;margin-top:6px;font-size:9px;line-height:1.4;color:#98918B}
.link-box{height:46px;border:1px solid #D4CDC7;border-radius:11px;background:#FFF;display:flex;align-items:center;padding:0 13px;color:var(--orange);font-size:11px;text-decoration:none}
.link-box.disabled{pointer-events:none;color:#AAA29B;background:#F3F0ED}
.check-row{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #E8E2DD;font-size:11px;line-height:1.4}
.check-row:last-of-type{border-bottom:0}.check-row input{width:16px;height:16px;accent-color:var(--orange);margin-top:1px;flex:0 0 auto}
.check-row b{display:block;font-size:11px}.check-row small{margin-top:3px}.check-row.compact{padding:12px 0 0;border:0}
.side-surface>h3{font-size:20px;margin:7px 0 13px}.tip-card{margin-top:16px;padding:14px;border-radius:13px;background:var(--green-pale);border:1px solid #DAE6D7}.tip-card strong{font-size:9px;color:var(--green);text-transform:uppercase;letter-spacing:.1em}.tip-card p{font-size:10px;color:#5D655A;line-height:1.5;margin:6px 0 0}
.inline-test{display:flex;align-items:center;gap:10px;margin-top:20px}.test-pill{font-size:9px;color:#827B75;display:flex;align-items:center;gap:7px}.test-pill>span{width:6px;height:6px;border-radius:50%;background:#BDB6B0}.test-pill.good{color:var(--green);font-weight:800}.test-pill.good>span{background:var(--green)}.test-pill.bad{color:var(--red);font-weight:800}.test-pill.bad>span{background:var(--red)}
.warning-card{margin-top:18px;padding:15px 16px;border:1px solid #E6CFC9;border-radius:13px;background:#FAEEEB;display:flex;gap:11px}.warning-symbol{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#E8C8C1;color:var(--red);font-weight:900}.warning-card strong{font-size:10px;color:#7E3D34}.warning-card p{font-size:9px;color:#88544D;margin:5px 0 0;line-height:1.5}

/* migrations */
.migration-list{overflow:hidden}
.migration-item{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.migration-item:last-child{border-bottom:0}.migration-item.reclaim-migration{background:#252321;color:#fff}.migration-index{width:38px;height:38px;border-radius:11px;background:#F4EAE4;color:var(--orange);display:grid;place-items:center;font-size:10px;font-weight:900}.reclaim-migration .migration-index{background:#393633}
.migration-copy h3{font-size:14px;margin:0 0 5px}.migration-copy code{font-size:9px;color:#847D76}.reclaim-migration code{color:#B5ADA6}.migration-copy p{font-size:10px;color:var(--muted);margin:6px 0 0}.reclaim-migration p{color:#968F89}
.toggle input{display:none}.toggle span{display:block;width:42px;height:24px;border-radius:999px;background:#D9D2CC;position:relative}.toggle span:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#FFF;left:3px;top:3px;box-shadow:0 2px 6px rgba(0,0,0,.16);transition:.18s}.toggle input:checked+span{background:var(--green)}.toggle input:checked+span:after{left:21px}

/* functions */
.function-deck{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.function-panel{border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:19px;background:#FFF;padding:21px;box-shadow:var(--shadow-soft)}.function-panel.green-line{border-top-color:var(--green)}.function-panel.dark-line{border-top-color:#2A2826}.function-badge{display:inline-block;font-size:7px;letter-spacing:.13em;font-weight:900;background:#F8E7E0;color:var(--orange);border-radius:999px;padding:6px 8px}.function-badge.green{background:var(--green-soft);color:var(--green)}.function-badge.dark{background:#E8E5E2;color:#2C2A28}.function-panel h3{font-size:17px;margin:10px 0 5px}.function-panel>p{font-size:10px;color:var(--muted);line-height:1.5;min-height:44px}.endpoint{margin-top:13px;padding:11px;border-radius:10px;border:1px solid #E0DAD5;background:#F7F4F1;font-size:9px;color:#68615B;word-break:break-all;min-height:50px}.function-actions{display:flex;align-items:center;gap:9px;margin-top:12px}.cors-panel{margin-top:14px;padding:22px;display:grid;grid-template-columns:1fr minmax(280px,1.1fr);gap:20px;align-items:center}.cors-panel h3{font-size:16px;margin:5px 0}.cors-panel p{font-size:10px;color:var(--muted);margin:0}.copy-code{display:flex;align-items:center;gap:8px}.copy-code code{flex:1;padding:11px;border:1px solid #D8D1CB;border-radius:10px;background:#F7F4F1;font-size:9px;overflow:auto}.copy-code button,.copy-field button{border:1px solid #D5CEC8;border-radius:9px;background:#F0EBE7;padding:9px 10px;font-size:9px;font-weight:800}
.copy-field{display:flex;gap:7px}.copy-field input{flex:1}.copy-field button{height:46px;min-width:58px}

/* reclaim */
.reclaim-hero{
  position:relative;overflow:hidden;min-height:250px;border-radius:24px;
  background:#242220;color:#fff;padding:38px 42px;margin-bottom:16px;
  display:grid;grid-template-columns:1fr 270px;align-items:center
}
.reclaim-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 45%,rgba(240,90,34,.14),transparent 27%)}
.reclaim-copy{position:relative;z-index:2}.reclaim-copy h2{font-size:40px;line-height:1.02;letter-spacing:-.055em;margin:10px 0 12px}.reclaim-copy h2 span{color:var(--orange)}.reclaim-copy p{font-size:12px;color:#B6AEA8;max-width:600px}.reclaim-orbit{position:relative;width:230px;height:230px;justify-self:end}.reclaim-ring{position:absolute;border:1px solid #4C4845;border-radius:50%}.ring-a{inset:12px}.ring-b{inset:45px;border-style:dashed;border-color:#705044;transform:rotate(24deg)}.reclaim-center{position:absolute;inset:74px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:48px;font-weight:900;color:#252321;box-shadow:0 16px 35px rgba(0,0,0,.25)}

/* validation */
.validation-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px}.validation-summary,.validation-checks{padding:23px}.summary-title{border-bottom:1px solid #E4DED8;padding-bottom:15px;margin-bottom:6px}.summary-title h3{font-size:18px;margin:7px 0 0}.summary-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #EEE9E4;font-size:10px;color:#77706A}.summary-row strong{font-size:10px;color:#292725;text-align:right}.release-panel{margin-top:15px;padding:22px;border-radius:20px;border:1px solid #E3CFCB;border-left:4px solid var(--red);background:#FFF;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:16px;box-shadow:var(--shadow-soft)}.release-panel.good{border-left-color:var(--green);border-color:#D5E0D2}.release-icon{width:38px;height:38px;border-radius:12px;background:#F4E4E1;color:var(--red);display:grid;place-items:center;font-weight:900}.release-panel.good .release-icon{background:var(--green-soft);color:var(--green)}.release-panel h3{font-size:18px;margin:5px 0 3px}.release-panel p{font-size:10px;color:var(--muted);margin:0}

/* toast */
.toast{position:fixed;right:24px;bottom:24px;z-index:100;background:#222;color:#fff;border-radius:10px;padding:11px 14px;font-size:10px;opacity:0;transform:translateY(8px);transition:.18s;pointer-events:none}.toast.show{opacity:1;transform:none}

/* responsive */
@media(max-width:1080px){
  .app-shell{grid-template-columns:1fr}.rail{display:none}.canvas{padding:32px 22px 70px}.topbar{padding:0 22px}
  .hero{grid-template-columns:1fr;padding:48px 40px 105px}.hero-visual{position:absolute;right:-70px;top:5px;opacity:.25;width:430px}.hero-copy{max-width:760px}.hero-strip{grid-template-columns:220px 1fr 120px}
  .overview-panel,.two-col-layout{grid-template-columns:1fr}.function-deck{grid-template-columns:1fr}.cors-panel{grid-template-columns:1fr}.validation-layout{grid-template-columns:1fr}
}
@media(max-width:720px){
  .canvas{padding:22px 14px 60px}.topbar{padding:0 14px}.top-actions .environment-badge{display:none}
  .hero{padding:38px 24px 100px;border-radius:22px;min-height:520px}.hero h1{font-size:44px}.hero-strip{grid-template-columns:1fr 80px;padding:0 20px}.hero-strip-copy{display:none}
  .flow-grid{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);height:30px}.checkpoint-grid,.field-grid{grid-template-columns:1fr}.field-grid label.wide{grid-column:auto}
  .overview-panel{grid-template-columns:1fr}.section-heading,.content-head,.export-bar{align-items:flex-start;flex-direction:column}
  .function-deck{grid-template-columns:1fr}.reclaim-hero{grid-template-columns:1fr;padding:32px 28px}.reclaim-orbit{display:none}.release-panel{grid-template-columns:42px 1fr}.release-panel .primary-btn{grid-column:1/-1}
}