/* Tokdari polish layer — paired with leonxlnx/taste-skill v2.5.1.
   Product-specific refinements only; upstream kit files are left untouched. */
:root{--site-accent:#ffe26a;--site-forest:#19211c;--site-soft:#f8f7f2}
body{overflow-x:clip}
.site-header{box-shadow:0 3px 28px rgba(27,35,28,.025)}
.site-header__inner{position:relative}
.site-header .brand__mark{box-shadow:inset 0 0 0 1px rgba(20,25,20,.07);transition:transform .22s ease,box-shadow .22s ease}
.site-header .brand:hover .brand__mark{transform:translateY(-2px);box-shadow:0 8px 18px rgba(21,31,20,.1)}
.site-nav a{position:relative;padding:12px 0;text-underline-offset:8px}
.site-nav a::after{content:"";height:1px;position:absolute;left:0;right:100%;bottom:6px;background:#1b241c;transition:right .24s ease}
.site-nav a:hover::after,.site-nav a:focus-visible::after{right:0}
.mobile-menu-toggle{display:none;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 10px;border:1px solid #cfd6c9;border-radius:9px;background:#fff;color:#263227;font-size:12px;font-weight:800}
.mobile-menu-toggle__bars{display:flex;flex-direction:column;justify-content:center;gap:5px;width:17px;height:16px}
.mobile-menu-toggle__bars i{display:block;background:currentColor;height:1.7px;width:17px;border-radius:2px;transition:transform .2s}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bars i:first-child{transform:translateY(3.35px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bars i:last-child{transform:translateY(-3.35px) rotate(-45deg)}
.mobile-menu{display:none}
.hero h1{font-feature-settings:"ss01" on;line-height:1.23}
.hero h1 em{background:linear-gradient(0deg,#ffe26a 24%,transparent 24%)}
.hero__lead{max-width:540px}
.hero__copy .eyebrow{word-break:keep-all}
.hero__product{perspective:none}
.hero__product:before{background:radial-gradient(ellipse,#f2eac6 0%,#eff1e6 42%,transparent 70%)}
.chat-surface{transform:none;border:1px solid #dde3dc;box-shadow:0 32px 80px rgba(17,28,20,.14),0 3px 12px rgba(17,28,20,.03);transition:box-shadow .3s ease}
.connection-panel{transform:none;border-color:#445749;box-shadow:0 21px 47px rgba(21,36,23,.22)}
.connection-panel__result{letter-spacing:-.025em}
.route-node{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.route-node:hover{transform:translateY(-2px);border-color:#9fae9b;box-shadow:0 15px 30px rgba(32,43,31,.055)}
.route-node__visual--route{background:linear-gradient(142deg,#eef1e7 8%,#dde7d8 100%)}
.mini-router__symbol{box-shadow:0 11px 25px rgba(34,49,28,.08)}
/* The route trace is part of the product UI, not a decorative progress indicator. */
.trace-flow{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:16px 24px 15px;border-bottom:1px solid #3c4d40;color:#839584;font:750 10px "DM Sans","Noto Sans KR",sans-serif}
.trace-flow>span{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:32px;padding:7px 10px;border:1px solid #495a4b;border-radius:6px;white-space:nowrap;transition:background .25s,border-color .25s,color .25s}
.trace-flow>span[data-state="active"]{background:#dfefb7;border-color:#dfefb7;color:#203322}
.trace-flow>span[data-state="done"]{background:#354d39;border-color:#4a7651;color:#d0efca}
.trace-flow>span[data-state="error"]{background:#5c3933;border-color:#835047;color:#ffdbca}
.trace-flow>i{color:#68816d;font-size:13px;font-style:normal}
.quick-commands button{min-height:43px;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.quick-commands button:focus-visible{outline-color:#ffe26a}
.quick-commands__reset{margin-left:auto;background:transparent!important;border-color:#637165!important;color:#c5d5c5!important}
.quick-commands__reset:hover{background:#364537!important}
.playground__chat{min-height:485px}
.playground__messages{scrollbar-color:#b6c4be transparent}
.demo-bot__face{box-shadow:inset 0 0 0 1px rgba(34,38,29,.08)}
.demo-bubble{line-height:1.72}
.playground__trace pre{max-width:100%;overflow-wrap:anywhere;overflow-x:auto}
.trace-body{padding-top:21px}
.trace-bottom{min-height:52px}
.trace-bottom[aria-live]{pointer-events:none}
.developer-code__body p{flex-wrap:wrap}
.copy-snippet{margin-left:auto;min-height:36px;border:1px solid #4d6551;border-radius:6px;background:#334237;color:#e0f0d7;font:700 11px "Noto Sans KR",sans-serif;padding:8px 12px;transition:transform .2s,background .2s,border-color .2s}
.copy-snippet:hover{background:#435849;border-color:#769077;transform:translateY(-2px)}
.copy-snippet:focus-visible{outline-color:#ffe26a}
.copy-snippet[data-copied="true"]{color:#16291c;background:#d6eabf;border-color:#d6eabf}
.developer-code__body pre{word-break:normal}
.developer-code__bottom{align-items:center;min-height:60px}
.developer-code__bottom span:last-child{text-align:right}
.footer-bottom>a{transition:opacity .2s ease}
.footer-bottom>a:hover{opacity:.7}
@media(min-width:768px) and (max-width:980px){
 .hero{height:auto;min-height:0;padding-bottom:42px}
 .hero__inner{height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:90px;padding-bottom:105px}
 .hero__copy{width:100%;max-width:690px}
 .hero h1{font-size:clamp(64px,8.5vw,85px);line-height:1.23}
 .hero__product{min-height:590px;max-height:670px;width:100%;padding:45px 0 65px}
 .chat-surface{margin:auto;width:390px}
 .connection-panel{right:9%;bottom:22px}
 .hero__foot{bottom:25px}
 .how-section,.developer-section{padding-block:115px}
 .route-diagram{gap:0}
 .route-node{padding:17px}
 .route-node__visual{height:140px}
 .route-node h3{font-size:17px}
 .route-node p{font-size:12px}
 .trace-flow{gap:5px;padding-inline:13px;font-size:9px}
 .trace-flow>span{padding:5px 7px}
}
@media(max-width:767px){
 .site-header{z-index:85}
 .nav-repo{display:none}
 .mobile-menu-toggle{display:inline-flex;margin-left:auto}
 .mobile-menu{display:block;position:fixed;top:68px;left:0;right:0;background:rgba(249,249,243,.98);backdrop-filter:blur(18px);border-bottom:1px solid #d7dfd5;box-shadow:0 17px 29px rgba(21,33,22,.14);padding:16px max(24px,calc((100vw - 640px)/2)) 25px}
 .mobile-menu[hidden]{display:none!important}
 .mobile-menu a{display:flex;align-items:center;justify-content:space-between;gap:17px;min-height:56px;border-bottom:1px solid #dce2d6;font-size:15px;font-weight:800}
 .mobile-menu a span:first-child{color:#8a9786;font:800 11px "DM Sans",sans-serif;margin-right:auto;min-width:20px}
 .mobile-menu a span:last-child{color:#637065}
 .mobile-menu p{font-size:11px;color:#858f83;margin:20px 0 0}
 .hero__copy{padding-left:0}
 .hero h1{font-size:clamp(45px,10.4vw,68px);letter-spacing:-.075em}
 .hero h1 em{background:linear-gradient(0deg,#ffe26a 22%,transparent 22%)}
 .hero__product{padding-bottom:65px}
 .chat-surface{transform:none;width:min(365px,88%);margin-left:0}
 .connection-panel{transform:none;bottom:10px;right:0}
 .trace-flow{padding:11px 15px;font-size:10px}
 .trace-flow>span{min-height:30px;padding:5px 8px}
 .playground__chat{min-height:410px}
 .playground__messages{min-height:240px}
 .developer-code__body pre{font-size:13px}
 .developer-code__bottom{line-height:1.6}
 .quick-commands__reset{margin-left:0}
 .footer-top__layout h2{word-break:keep-all}
}
@media(max-width:370px){
 .hero h1{font-size:44px}
 .hero__product{height:440px;min-height:430px}
 .chat-surface{width:87%}
 .connection-panel{width:180px;padding:12px;right:-2px}
 .trace-flow{font-size:9px;gap:5px}
 .trace-flow>span{padding:5px 6px}
 .trace-bottom{gap:5px;font-size:9px}
 .developer-code__body{padding:23px 18px}
 .developer-code__body pre{font-size:11.5px}
 .developer-code__bottom{font-size:9px;gap:5px}
}
@media(prefers-reduced-motion:reduce){
 .chat-surface,.connection-panel,.route-node,.site-header .brand__mark,.copy-snippet,.quick-commands button,.mobile-menu-toggle__bars i{transition:none!important;transform:none!important}
}


/* The Taste Skill base treats .wrap:not(.grid) as a vertical flex container.
   Explicit grid membership + a product-specific column contract keeps the
   hero preview and developer API panel beside their copy on desktop. */
main > section.hero > .wrap.hero__inner.grid {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  grid-template-rows:minmax(0,1fr);
  column-gap:5.5%;
  row-gap:0;
  align-items:center;
  height:calc(100% - 65px);
  min-height:680px;
}
main > section.hero > .wrap.hero__inner.grid > .hero__copy {
  grid-column:1;grid-row:1;min-width:0;align-self:center;
}
main > section.hero > .wrap.hero__inner.grid > .hero__product {
  grid-column:2;grid-row:1;min-width:0;width:100%;align-self:center;
}
main > section.developer-section > .wrap.developer-layout.grid {
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  grid-template-rows:auto;
  align-items:center;
  column-gap:8%;
  row-gap:0;
}
main > section.developer-section > .wrap.developer-layout.grid > .developer-copy {
  grid-column:1;grid-row:1;min-width:0;align-self:center;
}
main > section.developer-section > .wrap.developer-layout.grid > .developer-code {
  grid-column:2;grid-row:1;min-width:0;width:100%;align-self:center;
}
@media(max-width:980px) {
  main > section.hero > .wrap.hero__inner.grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    height:auto;
    min-height:0;
  }
  main > section.hero > .wrap.hero__inner.grid > .hero__copy,
  main > section.hero > .wrap.hero__inner.grid > .hero__product {
    width:100%;
    max-width:100%;
    grid-column:auto;
    grid-row:auto;
  }
  main > section.developer-section > .wrap.developer-layout.grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    row-gap:48px;
    column-gap:0;
  }
  main > section.developer-section > .wrap.developer-layout.grid > .developer-copy,
  main > section.developer-section > .wrap.developer-layout.grid > .developer-code {
    grid-column:1;
    grid-row:auto;
  }
  main > section.developer-section > .wrap.developer-layout.grid > .developer-code {
    max-width:620px;
  }
}
@media(max-width:767px) {
  main > section.hero > .wrap.hero__inner.grid {
    padding-top:62px;
    padding-bottom:94px;
    gap:12px;
  }
}