#stk-demo{--navy:#102f42;--ink:#0d2639;--green:#245e50;--sage:#e2ece3;--pink:#e9a7ac;background:#faf8f6;color:var(--ink);max-width:1200px;margin:auto;padding:0 clamp(14px,3vw,38px) 32px;font:16px/1.45 "DM Sans",system-ui,sans-serif}#stk-demo *{box-sizing:border-box}#stk-demo [hidden]{display:none!important}#stk-demo a{color:var(--green)}#stk-demo h1,#stk-demo h2,#stk-demo h3{font-family:inherit;color:inherit;line-height:1.1;letter-spacing:-.035em;margin:0;font-weight:760}#stk-demo p{margin:.45em 0}#stk-demo button,#stk-demo select{font:inherit;cursor:pointer}#stk-demo button{background:var(--navy);color:white;border:0;border-radius:10px;padding:10px 18px;font-weight:650}#stk-demo .quiet{background:white;color:var(--navy);border:1px solid #617b77;margin-left:6px}#stk-demo select{background:white;color:var(--ink);border:1px solid #b8c4bf;padding:8px;border-radius:8px}#stk-demo :focus-visible{outline:3px solid #be6e81;outline-offset:3px}#stk-demo .brandbar{display:flex;align-items:center;gap:14px;min-height:72px}#stk-demo .brandbar a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:var(--ink);padding:6px 10px;font-weight:600}#stk-demo .brandbar .brand{margin-right:auto;padding-left:0}#stk-demo .brand img{width:153px;height:auto}#stk-demo .brandbar .current{background:#dce9df;border-radius:13px}#stk-demo .brandbar svg{width:18px}#stk-demo header{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 85% 18%,#234d60,#13374a 64%,#102e40);color:white;padding:24px clamp(22px,4.5vw,54px)}#stk-demo .hero-copy{position:relative;max-width:60%}#stk-demo header h1{font-size:clamp(36px,5vw,60px);width:max-content;margin:6px 0 16px;position:relative}#stk-demo header h1:after{content:'';position:absolute;right:0;bottom:-6px;width:40%;height:5px;border-radius:70%;background:var(--pink);transform:rotate(-2deg)}#stk-demo header p{font-size:1.1em;margin-bottom:16px}#stk-demo header label{font-weight:650}#stk-demo header select{margin-left:6px}#stk-demo header small{letter-spacing:.18em;color:#cbe4da;font-weight:650}#stk-demo header .hint{display:block;margin-top:7px;letter-spacing:0;font-size:.78em;font-weight:400}#stk-demo .desk{position:absolute;right:0;bottom:0;width:43%;height:auto}#stk-demo .section-heading{display:flex;gap:14px;align-items:center;margin:26px 0 14px}#stk-demo h2{font-size:clamp(23px,2.6vw,30px)}#stk-demo .section-heading p{margin:2px 0 0}#stk-demo .badge{display:grid;place-items:center;flex:none;background:#dce9de;color:#21664f;border-radius:13px;width:48px;height:48px}#stk-demo .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#stk-demo .grid article,#stk-demo .plan,#stk-demo .category-tile{background:white;border:1px solid #e2dfda;box-shadow:0 5px 16px #2435280c;border-radius:17px}#stk-demo article{padding:18px 22px;display:flex;align-items:flex-start;flex-direction:column;gap:8px}#stk-demo article img{order:-2;width:100%;height:clamp(155px,20vw,240px);object-fit:contain;background:linear-gradient(120deg,#ecf3ec,#d8e7df);border-radius:30% 24% 23% 15% / 32% 34% 28% 40%}#stk-demo article[data-tool="1"] img{background:linear-gradient(120deg,#fbf1ef,#f4e5e4)}#stk-demo article small{font-size:.76em;color:var(--green);font-weight:700}#stk-demo h3{font-size:1.45em}#stk-demo article p{margin:0}#stk-demo article details summary{cursor:pointer;text-decoration:underline;color:var(--green)}#stk-demo article button{margin-top:5px}#stk-demo .explore-head{display:flex;align-items:center;justify-content:space-between;gap:10px}#stk-demo .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}#stk-demo .category-tile{display:flex;align-items:center;gap:9px;text-align:left;color:var(--ink);padding:14px;font-size:.92em}#stk-demo .category-tile .badge{width:38px;height:42px}#stk-demo .category-tile:nth-child(2) .badge{background:#f9e5e5;color:#aa6069}#stk-demo .category-tile small{display:block;font-weight:400}#stk-demo .category-tile b{margin-left:auto}#stk-demo .category-tile[aria-pressed=true]{border-color:var(--green)}#stk-demo aside{display:flex;gap:18px;align-items:flex-start;background:#e4ede4;padding:24px;border-radius:16px;margin-top:20px}#stk-demo .plan{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:18px}#stk-demo .plan>div{background:var(--sage);border-radius:11px;padding:12px 22px}#stk-demo .plan strong,#stk-demo .plan span{display:block}#stk-demo .plan ul{list-style:none;padding:0;font-size:.9em}#stk-demo .plan li:before{content:'✓ ';color:var(--green)}#stk-demo #stk-management button{margin:8px 6px 0 0}#stk-demo #stk-status:not(:empty){background:#e5eee6;padding:12px;border-radius:8px}
@media(max-width:720px){#stk-demo .tiles{grid-template-columns:1fr}#stk-demo .explore-head,#stk-demo .plan{align-items:flex-start;flex-direction:column}#stk-demo .desk{width:35%;opacity:.9}#stk-demo .hero-copy{max-width:74%}#stk-demo .brandbar{gap:2px;font-size:.88em}#stk-demo .brand img{width:115px}}
@media(max-width:560px){#stk-demo .grid{grid-template-columns:1fr}#stk-demo .hero-copy{max-width:100%}#stk-demo .desk{display:none}#stk-demo .brandbar a{padding:4px}#stk-demo .plan{align-items:stretch}#stk-demo aside{padding:15px;gap:9px}#stk-demo header select{max-width:100%;margin-left:0}#stk-demo article img{height:185px}}