#result {
  text-align:center;
  padding-top:20px
}
#result h1 {
  color:var(--coral)
}
.result-mascot {
  height:165px;
  width:190px
}
.stamp {
  font-size:55px;
  color:var(--coral);
  line-height:1
}
.result-card h2 {
  margin:10px 0
}
.result-card p {
  font-size:13px;
  color:var(--muted)
}
#result-changes {
  font-size:13px;
  line-height:2;
  color:#3b826a
}
#result-title {
  font-size:36px
}
.section-top {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px
}
.section-top h1 {
  font-size:25px;
  letter-spacing:-.7px
}
.section-top .back {
  padding:8px 0
}
.dan-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.dan-grid button[aria-pressed=true],.kuku-grid button[aria-pressed=true] {
  background:var(--mint);
  border-color:#438d77
}
.range-picker {
  display:flex;
  align-items:end;
  gap:8px;
  margin-top:24px
}
.range-picker label {
  font-size:11px;
  flex:1
}
.range-picker select {
  display:block;
  width:100%;
  margin-top:6px
}
.range-picker>span {
  padding-bottom:12px
}
select {
  background:#fffdf8;
  color:var(--ink);
  border:1px solid var(--line);
  padding:10px;
  border-radius:10px;
  min-height:46px
}
details {
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:18px
}
summary {
  cursor:pointer;
  font-size:13px;
  min-height:44px
}
.kuku-grid {
  display:grid;
  grid-template-columns:26px repeat(9,minmax(0,1fr));
  gap:3px;
  margin:18px 0
}
.kuku-grid>* {
  text-align:center;
  align-content:center;
  min-width:0
}
.kuku-grid button {
  padding:0;
  min-height:34px;
  border-radius:8px;
  font-size:12px
}
.kuku-grid .axis {
  font-size:11px;
  color:var(--muted)
}
.kuku-grid .ready {
  background:#e2eed4
}
.kuku-grid .review {
  background:#add9c8
}
.kuku-grid .mastered {
  background:#ffda7c;
  color:#765715;
  border-color:#ddb44d
}
.kuku-grid .repair {
  background:#ffedc5;
  color:#906b24
}
.kuku-grid .tutorial {
  background:#edece5;
  color:#8c918a
}
.legend {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:11px;
  color:var(--muted)
}
.detail-card {
  font-size:13px;
  line-height:1.8
}
.settings-card label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:15px 0;
  font-size:14px
}
.settings-card input[type=range] {
  width:42%;
  accent-color:#39816e
}
.settings-card input[type=checkbox] {
  width:24px;
  height:24px;
  accent-color:#39816e
}
.table-select {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.table-select select {
  width:120px
}
#table-list {
  display:grid;
  gap:8px
}
#table-list button {
  display:flex;
  justify-content:space-between;
  align-items:center
}
#table-list small {
  font-size:12px;
  color:var(--muted)
}
dialog {
  border:1px solid var(--line);
  border-radius:24px;
  width:min(88%,380px);
  padding:28px;
  background:var(--paper);
  color:var(--ink);
  text-align:center
}
dialog::backdrop {
  background:#1e3c4366;
  backdrop-filter:blur(3px)
}
.notice {
  font-size:12px;
  background:#fff0bf;
  padding:12px;
  border-radius:12px
}
.backdrop-fallback #background {
  background:radial-gradient(ellipse at 65% 45%,#ffdfc9,transparent 70%)
}
.result-dan-progress {font-size:13px;margin-top:18px;color:#387b69}
body[data-scene=result] .result-mascot {height:185px;width:215px;filter:drop-shadow(0 6px 0 #fff8)}
body[data-scene=result] .result-card {border:3px solid #fff;box-shadow:0 8px 0 #bf934133,0 0 0 5px #ffe39b;background:#fffdf1}
body[data-scene=result] #result-title {text-shadow:3px 3px 0 #fff}