:root{
  --ace-black:#090b0b;
  --ace-panel:#101514;
  --ace-panel-soft:#171e1c;
  --ace-gold:#d9b36c;
  --ace-gold-bright:#f0d397;
  --ace-cream:#f7f2e8;
  --ace-muted:#a8b1ac;
}

.ace-demo-body{background:var(--ace-black);color:var(--ace-cream)}
.ace-demo-body .navbar,.ace-demo-body .navbar.scrolled{background:rgba(247,246,242,.97);color:var(--ink)}
.ace-demo-main{overflow:hidden}
.ace-playground{
  position:relative;
  min-height:100dvh;
  padding:132px 24px 72px;
  background:
    radial-gradient(circle at 76% 22%,rgba(217,179,108,.12),transparent 29%),
    radial-gradient(circle at 18% 74%,rgba(35,91,76,.25),transparent 34%),
    linear-gradient(145deg,#070909 0%,#0c1210 58%,#07100d 100%);
}
.ace-playground:before{
  content:"";
  position:absolute;
  inset:90px 4vw auto auto;
  width:min(42vw,520px);
  aspect-ratio:1;
  border:1px solid rgba(217,179,108,.12);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(217,179,108,.035),0 0 0 110px rgba(217,179,108,.018);
  pointer-events:none;
}
.ace-playground-inner{
  position:relative;
  z-index:1;
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);
  gap:clamp(48px,7vw,100px);
  align-items:center;
}
.ace-demo-copy{max-width:500px}
.ace-demo-kicker{display:flex;align-items:center;gap:12px;margin:0 0 24px;color:var(--ace-gold-bright);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.ace-demo-kicker:before{content:"";width:34px;height:1px;background:currentColor}
.ace-demo-copy h1{margin:0;font-family:var(--font-display);font-size:clamp(50px,6.5vw,92px);line-height:.9;letter-spacing:-.065em;font-weight:600}
.ace-demo-copy h1 span{display:block;color:var(--ace-gold);font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}
.ace-demo-lead{max-width:430px;margin:30px 0 0;color:#d2d8d3;font-size:18px;line-height:1.75}
.ace-demo-route{margin:28px 0 0;color:var(--ace-muted);font-size:13px;line-height:1.65}
.ace-demo-route strong{color:var(--ace-cream);font-weight:600}
.ace-mode-field{border:0;padding:0;margin:40px 0 0}
.ace-mode-field legend{margin-bottom:14px;color:#dce1dc;font-size:14px;font-weight:600}
.ace-mode-list{display:grid;gap:10px}
.ace-mode{
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:13px;
  align-items:center;
  padding:11px 16px;
  border:1px solid rgba(247,242,232,.16);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:var(--ace-cream);
  text-align:left;
  cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;
}
.ace-mode:hover{border-color:rgba(217,179,108,.55);transform:translateX(3px)}
.ace-mode[aria-pressed="true"]{background:rgba(217,179,108,.12);border-color:var(--ace-gold)}
.ace-mode-number{color:var(--ace-gold);font-size:12px;letter-spacing:.08em}
.ace-mode strong{font-size:15px;font-weight:600}
.ace-mode small{color:var(--ace-muted);font-size:12px}
.ace-demo-stage{min-width:0}
.ace-device{
  position:relative;
  width:min(520px,100%);
  margin:0 auto;
  padding:18px;
  border:1px solid rgba(217,179,108,.22);
  border-radius:30px;
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
  box-shadow:0 35px 90px rgba(0,0,0,.45);
}
.ace-card{
  position:relative;
  min-height:590px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:27px;
  border:1px solid rgba(217,179,108,.55);
  border-radius:19px;
  background:
    linear-gradient(135deg,transparent 0 48%,rgba(217,179,108,.055) 48% 52%,transparent 52%),
    radial-gradient(circle at 50% 45%,#1c2824 0%,#0c1110 57%,#070808 100%);
}
.ace-card:before,.ace-card:after{content:"";position:absolute;width:105px;height:105px;border:1px solid rgba(217,179,108,.22);border-radius:50%}
.ace-card:before{top:-48px;right:-48px}
.ace-card:after{bottom:-48px;left:-48px}
.ace-card-top{display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--ace-gold-bright);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.ace-status{display:inline-flex;align-items:center;gap:8px;color:#dce3de;letter-spacing:.05em;text-transform:none;font-weight:500}
.ace-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#78b697;box-shadow:0 0 0 5px rgba(120,182,151,.12)}
.ace-reveal{
  position:relative;
  flex:1;
  display:grid;
  place-items:center;
  min-height:360px;
  text-align:center;
}
.ace-symbol{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-53%);
  color:rgba(217,179,108,.11);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(220px,31vw,310px);
  line-height:1;
  transition:color .4s,transform .55s cubic-bezier(.22,.7,.22,1),filter .4s;
}
.ace-result{position:relative;z-index:1;max-width:355px;padding:22px;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .4s}
.ace-result-label{margin:0 0 14px;color:var(--ace-gold-bright);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.ace-result h2{margin:0;color:var(--ace-cream);font-family:var(--font-display);font-size:clamp(34px,5vw,56px);line-height:1.02;letter-spacing:-.045em}
.ace-result p:last-child{margin:18px auto 0;color:#ccd3ce;font-size:17px;line-height:1.6}
.ace-card.is-revealing .ace-symbol{color:rgba(240,211,151,.42);filter:drop-shadow(0 0 28px rgba(217,179,108,.3));transform:translate(-50%,-53%) rotateY(360deg) scale(.83)}
.ace-card.has-result .ace-symbol{color:rgba(217,179,108,.07);transform:translate(-50%,-53%) scale(1.08)}
.ace-card.has-result .ace-result{opacity:1;transform:none}
.ace-instruction{position:relative;z-index:1;margin:0 0 17px;color:#cad1cc;font-size:14px;line-height:1.55;text-align:center}
.ace-hold{
  --hold-progress:0%;
  position:relative;
  z-index:1;
  min-height:62px;
  width:100%;
  overflow:hidden;
  border:1px solid var(--ace-gold);
  border-radius:9px;
  background:rgba(217,179,108,.06);
  color:var(--ace-cream);
  font:600 14px var(--font-body);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  touch-action:none;
  user-select:none;
}
.ace-hold:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--hold-progress);background:linear-gradient(90deg,#9e723a,var(--ace-gold));transition:width .08s linear}
.ace-hold span{position:relative;z-index:1}
.ace-hold:disabled{cursor:wait;opacity:.8}
.ace-after-actions{position:relative;z-index:1;display:none;grid-template-columns:1fr 1fr;gap:10px}
.ace-card.has-result .ace-hold{display:none}
.ace-card.has-result .ace-after-actions{display:grid}
.ace-secondary-action{min-height:54px;border:1px solid rgba(247,242,232,.22);border-radius:8px;background:transparent;color:var(--ace-cream);font:600 13px var(--font-body);cursor:pointer}
.ace-secondary-action:hover{border-color:var(--ace-gold);color:var(--ace-gold-bright)}
.ace-share-status{min-height:22px;margin:12px 0 0;color:var(--ace-muted);font-size:12px;text-align:center}
.ace-demo-note{margin:18px auto 0;max-width:500px;color:#8f9993;font-size:12px;line-height:1.65;text-align:center}
.ace-demo-details{background:#f4f1e9;color:var(--ink);padding:82px 24px}
.ace-demo-details-inner{width:min(1120px,100%);margin:0 auto}
.ace-demo-details .editorial-heading{margin-bottom:44px}
.ace-demo-details .eyebrow{color:#8b6035}
.ace-demo-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#cbc7bd;border:1px solid #cbc7bd}
.ace-demo-map article{background:#f8f5ee;padding:32px;min-height:235px}
.ace-demo-map span{display:block;margin-bottom:38px;color:#94663a;font-size:12px;font-weight:700;letter-spacing:.12em}
.ace-demo-map h3{margin:0 0 14px;font-size:23px;font-weight:550;letter-spacing:-.03em}
.ace-demo-map p{margin:0;color:var(--muted-ink);font-size:15px;line-height:1.7}
.ace-prototype-strip{background:var(--forest);color:#f7f2e8;padding:28px 24px}
.ace-prototype-strip-inner{width:min(1120px,100%);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:28px}
.ace-prototype-strip p{margin:0;max-width:730px;color:#d9e1dc;font-size:14px;line-height:1.7}
.ace-prototype-strip a{flex:none;color:var(--ace-gold-bright);font-size:14px;font-weight:600;border-bottom:1px solid currentColor;padding:6px 0}

@media(max-width:900px){
  .ace-playground{padding-top:116px}
  .ace-playground-inner{grid-template-columns:1fr;gap:50px}
  .ace-demo-copy{max-width:650px;margin:0 auto;text-align:center}
  .ace-demo-kicker{justify-content:center}
  .ace-demo-lead{margin-inline:auto}
  .ace-mode-field{max-width:560px;margin-inline:auto}
  .ace-mode{text-align:left}
  .ace-device{max-width:530px}
  .ace-demo-map{grid-template-columns:1fr}
  .ace-demo-map article{min-height:0}
}
@media(max-width:560px){
  .ace-playground{padding:102px 16px 52px}
  .ace-playground:before{width:76vw;right:-22vw}
  .ace-demo-copy{text-align:left}
  .ace-demo-kicker{justify-content:flex-start;margin-bottom:18px}
  .ace-demo-copy h1{font-size:clamp(48px,16vw,67px)}
  .ace-demo-lead{font-size:16px;margin-top:24px}
  .ace-mode-field{margin-top:30px}
  .ace-mode{grid-template-columns:30px 1fr;padding-inline:13px}
  .ace-mode small{grid-column:2}
  .ace-device{padding:8px;border-radius:22px}
  .ace-card{min-height:535px;padding:21px;border-radius:15px}
  .ace-card-top{font-size:10px}
  .ace-reveal{min-height:330px}
  .ace-symbol{font-size:235px}
  .ace-result{padding-inline:10px}
  .ace-result h2{font-size:38px}
  .ace-result p:last-child{font-size:16px}
  .ace-after-actions{grid-template-columns:1fr}
  .ace-demo-details{padding:60px 20px}
  .ace-demo-details .editorial-heading{display:block}
  .ace-demo-map article{padding:27px}
  .ace-demo-map span{margin-bottom:25px}
  .ace-prototype-strip-inner{display:block}
  .ace-prototype-strip a{display:inline-block;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  .ace-mode,.ace-symbol,.ace-result,.ace-hold:before{transition:none}
}