* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 16px/1.65 var(--font-sans);
  -webkit-tap-highlight-color:rgba(255,198,61,.3)
}
img,svg,video {
  max-width:100%
}
img {
  display:block;
  height:auto
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.6
}
button[aria-busy=true] {
  cursor:progress
}
a {
  color:inherit;
  text-underline-offset:4px
}
button,input,select,textarea {
  accent-color:var(--counter)
}
input,textarea {
  caret-color:var(--counter)
}
h1,h2,h3,h4 {
  font-family:var(--font-display);
  line-height:1.12;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0 0 .6em;
  font-weight:600
}
h1 {
  font-size:clamp(36px,5.4vw,76px)
}
h2 {
  font-size:clamp(30px,3.8vw,52px)
}
h3 {
  font-size:24px
}
p {
  margin:0 0 1em
}
p:last-child {
  margin-bottom:0
}
fieldset {
  min-width:0;
  border:0;
  padding:0;
  margin:0
}
legend {
  padding:0
}
::selection {
  background:#ffe497;
  color:var(--text)
}
:focus-visible {
  outline:3px solid var(--counter);
  outline-offset:4px
}
html:not([data-lang=ms]) .ms,html[data-lang=ms] .en {
  display:none!important
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.skip-link {
  position:fixed;
  top:8px;
  left:12px;
  z-index:1000;
  padding:10px 16px;
  background:var(--text);
  color:white;
  border-radius:10px;
  transform:translateY(-180%)
}
.skip-link:focus {
  transform:none
}
.container {
  width:min(var(--content-width),calc(100% - 48px));
  margin-inline:auto
}
.muted {
  color:var(--text-soft)
}
.tabular {
  font-variant-numeric:tabular-nums
}
.text-link {
  color:var(--songket);
  font-weight:700;
  text-decoration-thickness:1px
}
.text-link:hover {
  text-decoration-thickness:2px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:11px 22px;
  border:1px solid transparent;
  border-radius:var(--control-radius);
  font-size:14px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease
}
.button svg {
  width:20px;
  height:20px;
  flex:none
}
.button--primary {
  background:var(--marigold);
  color:var(--text)
}
.button--primary:hover {
  background:#ffd466;
  box-shadow:0 3px 10px rgba(167,116,14,.14)
}
.button--secondary {
  border-color:var(--hairline);
  background:var(--paper-raised);
  color:var(--text)
}
.button--secondary:hover {
  border-color:var(--counter);
  background:var(--paper-deep)
}
.button--danger {
  background:#fff0ec;
  color:#923321;
  border-color:#ebbaaf
}
.button--danger:hover {
  background:#ffe2da
}
.button--small {
  min-height:44px;
  padding:9px 14px;
  font-size:13px
}
.panel {
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:var(--paper-raised);
  padding:24px
}
.notice {
  border-radius:12px;
  padding:14px 18px;
  background:var(--paper-deep);
  color:var(--text-soft);
  font-size:14px
}
.notice--warning {
  background:#fff4d5;
  color:#6d4b09
}
.notice--error {
  background:#fff0ec;
  color:#923321
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0
}
.field label,.field>span {
  font-size:14px;
  font-weight:700
}
.field input,.field select,.field textarea {
  width:100%;
  min-height:48px;
  border:1px solid #a9bca9;
  border-radius:10px;
  padding:10px 13px;
  background:var(--paper-raised);
  color:var(--text)
}
.field input::placeholder,.field textarea::placeholder {
  color:#617763;
  opacity:1
}
.field input[aria-invalid=true],.field textarea[aria-invalid=true] {
  border-color:#a13b2b
}
.field-error {
  font-size:13px;
  color:#923321
}
.status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:99px;
  padding:4px 10px;
  background:var(--paper-deep);
  font-size:12px;
  font-weight:800
}
.status--warning {
  background:#fff0c6;
  color:#6d4b09
}
.status--error {
  background:#ffe3db;
  color:#923321
}
dialog {
  color:var(--text);
  background:var(--paper-raised);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:24px;
  max-width:min(92vw,560px);
  overscroll-behavior:contain
}
dialog::backdrop {
  background:rgba(23,45,31,.5)
}
@media(max-width:600px) {
  .container {
    width:calc(100% - 40px)
  }
  .panel {
    padding:20px
  }
  .button {
    padding-inline:18px
  }

}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }

}
html[data-motion=paused] [data-ambient],html[data-page-hidden=true] [data-ambient] {
  animation-play-state:paused!important
}

[data-ambient][data-offscreen=true] { animation-play-state: paused !important; }