/* Built by _dev/bundle.mjs from assets/demos/ (dhuaan.css, kiln.css, sunyard.css). Edit the pieces, not this file. */
.dm-dhuaan {
--coal: #131110; --ash: #4A423B; --bone: #F2E8D7; --dim: #A99F90; --ember: #FF6B2C;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--in: 16px; --w: calc(100cqi - 44px); --ring: #FFC978; --ring-2: var(--coal);
display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; contain: layout paint;
scroll-padding: 56px 0 150px; scrollbar-width: thin; color-scheme: dark;
background: var(--coal); color: var(--bone);
font: 500 15px/1.35 var(--font); font-variation-settings: "FLAR" 0, "VOLM" 0; text-align: left;
}
.dm-dhuaan:not(.is-js) :is(.dm-dhuaan__tabs, .dm-dhuaan__step, .dm-dhuaan__order), .is-js .dm-dhuaan__course { display: none; }
.dm-dhuaan__main { flex: 1 0 auto; display: flex; flex-direction: column; }
.dm-dhuaan__head { position: relative; padding: 20px var(--in) 6px; background: radial-gradient(75% 100% at 0 0, #3B1F10, transparent); }
.dm-dhuaan__mark {
margin: 0 0 -.06em -.04em; padding-bottom: .06em;
font: 900 min(100px, var(--w) * .3)/.8 var(--font-d); letter-spacing: -.05em;
background: linear-gradient(0deg, var(--ember) 4%, var(--bone) 52%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.dm-dhuaan__open { position: absolute; top: 14px; right: var(--in); display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ember); }
.dm-dhuaan__open::before { content: ""; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 3.5px -2px 0 currentColor; }
.dm-dhuaan__line, .dm-dhuaan__desc { font: italic 15px/1.3 var(--serif); color: var(--dim); }
.dm-dhuaan__line { max-width: 21em; margin-top: 12px; text-wrap: balance; }
.dm-dhuaan__tabs { position: sticky; top: 0; display: flex; justify-content: space-between; padding: 6px var(--in) 0; background: var(--coal); }
.dm-dhuaan__tab, .dm-dhuaan__course, .dm-dhuaan__label { font: 900 34px/1 var(--font-d); letter-spacing: -.035em; }
.dm-dhuaan__tab { min-height: 46px; padding: 0; border: 0; background: none; color: var(--dim); font-size: min(36px, var(--w) * .056); white-space: nowrap; }
.dm-dhuaan__tab:hover { color: var(--bone); }
.dm-dhuaan__tab[aria-selected="true"] { color: var(--bone); text-decoration: underline var(--ember); text-decoration-thickness: .13em; text-underline-offset: .3em; }
.dm-dhuaan__panel { padding: 0 var(--in) 12px; }
.dm-dhuaan__course { padding-top: 20px; color: var(--ember); }
.dm-dhuaan__dish { display: grid; grid-template: "name name price" "desc step step" / 1fr 56px auto; column-gap: 12px; padding: 12px 0 2px; }
.dm-dhuaan__name { grid-area: name; display: flex; align-items: baseline; font: 800 19px/1.2 var(--font-d); letter-spacing: -.015em; }
.dm-dhuaan__name::after { content: ""; flex: 1; height: 4px; margin-left: 10px; background: radial-gradient(circle, var(--ash) 1.3px, transparent 1.7px) 0 0 / 8px 4px; }
.dm-dhuaan__price { grid-area: price; font-weight: 700; line-height: 23px; text-align: right; }
.dm-dhuaan__desc { grid-area: desc; padding-top: 3px; }
.dm-dhuaan__step { grid-area: step; justify-self: end; display: flex; align-items: center; margin-right: -6px; }
.dm-dhuaan__step button { --bar: linear-gradient(currentColor 0 0) 50% / 12px 2px no-repeat; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; }
.dm-dhuaan__step button::before { content: ""; width: 32px; height: 32px; border: 2px solid var(--ash); border-radius: 50%; background: var(--bar); }
.dm-dhuaan__step button:hover::before { border-color: var(--bone); }
.dm-dhuaan [data-d="1"]::before { border-color: var(--ember); background: var(--bar), linear-gradient(currentColor 0 0) 50% / 2px 12px no-repeat; }
.dm-dhuaan [aria-disabled="true"] { opacity: .4; cursor: default; }
.dm-dhuaan__qty { min-width: 24px; text-align: center; font-weight: 800; color: var(--dim); }
.dm-dhuaan [data-d="1"], .is-on > .dm-dhuaan__name { color: var(--ember); }
.is-on .dm-dhuaan__qty { color: var(--bone); }
.dm-dhuaan .is-on [data-d="1"] { color: var(--coal); }
.is-on [data-d="1"]::before { background-color: var(--ember); }
.dm-dhuaan__foot { margin-top: auto; padding: 8px var(--in) 16px; font-size: 12.5px; color: var(--dim); }
.dm-dhuaan__order { position: sticky; bottom: 0; display: grid; padding: 10px var(--in) 12px; background: #1D1916; border-top: 2px dashed var(--ash); }
.dm-dhuaan__label { display: none; margin-bottom: 16px; font-size: 26px; }
.dm-dhuaan__msg { place-self: start end; padding: 8px 12px; border-radius: 14px 14px 3px 14px; background: #0D5547; }
.dm-dhuaan__msg:has(:empty) { justify-self: start; padding: 0; background: none; font: italic 15px/1.3 var(--serif); color: var(--dim); }
.dm-dhuaan__txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dm-dhuaan__tot { display: block; }
.dm-dhuaan__send {
display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 10px; padding: 0 22px;
border: 0; border-radius: 99px; background: var(--ember); color: #1B0C05; font-size: 16px; font-weight: 800;
}
.dm-dhuaan__send:hover { background: var(--ring); }
.dm-dhuaan__say { font-size: 13.5px; text-align: center; }
.dm-dhuaan__say:not(:empty) { margin-top: 8px; }
@container frame (min-width: 500px) {
.dm-dhuaan { --in: 24px; --w: calc(100cqi - 60px); }
.dm-dhuaan__head { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; padding: 24px var(--in) 12px; }
.dm-dhuaan__mark { grid-row: span 2; font-size: calc(var(--w) * .195); }
.dm-dhuaan__open { position: static; justify-self: end; }
.dm-dhuaan__line { place-self: end; max-width: 13em; margin: 8px 0 .25em; text-align: right; }
.dm-dhuaan__dish { grid-template: "name price step" "desc price step" / 1fr auto auto; }
.dm-dhuaan__step { align-self: center; }
.dm-dhuaan__order { grid-template-columns: 1fr auto; align-items: end; column-gap: 14px; }
.dm-dhuaan__send { margin: 0; }
.dm-dhuaan__say { grid-column: 1 / -1; }
}
@container frame (min-width: 860px) {
.dm-dhuaan { --in: 28px; --w: calc(69cqi - 68px); flex-direction: row; scroll-padding-bottom: 0; }
.dm-dhuaan__main { flex: 1; min-width: 0; align-self: flex-start; min-height: 100%; }
.dm-dhuaan__order { top: 0; flex: none; width: 31cqi; grid-template: auto 1fr / 100%; padding: 26px 22px 20px; overflow-y: auto; border-top: 0; border-left: 2px dashed var(--ash); }
.dm-dhuaan__label, .dm-dhuaan__txt { display: block; }
.dm-dhuaan__send { margin-top: 16px; }
}
.dm-kiln {
--k-bg: #fbf6ee; --k-ink: #3a2b24; --k-raw: #e4d0b4;
--k-sage: #9fbb96; --k-clay: #e59f8c; --k-blue: #3b59c6; --k-butter: #f2d16b;
--k-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--ring: var(--k-ink);
height: 100%; padding: 0 max(16px, 4.4cqi) 10px; overflow: hidden auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: #d9c9b3 #0000;
background: var(--k-bg); color: var(--k-ink);
font: 500 15px/1.4 system-ui, sans-serif; font-variation-settings: normal; text-align: left;
}
.dm-kiln :focus-visible { border-radius: 99px; }
.dm-kiln:not(.is-js) .dm-kiln__js { display: none; }
.dm-kiln__top { position: sticky; top: -1px; z-index: 2; display: flex; align-items: center; gap: 6px; min-height: 61px; padding: 9px 0 8px; background: var(--k-bg); }
.dm-kiln__brand { margin-right: auto; font: 600 21px/1 var(--k-serif); white-space: nowrap; }
.dm-kiln__brand i { color: #a9543f; }
.dm-kiln__cur { display: flex; border-radius: 99px; background: #efe4d3; }
.dm-kiln__cur input { position: absolute; opacity: 0; }
.dm-kiln__cur label { width: 46px; border: 4px solid #efe4d3; border-radius: 99px; font-size: 13px; font-weight: 700; line-height: 36px; text-align: center; cursor: pointer; }
.dm-kiln__cur :focus-visible + label { outline: 3px solid var(--k-ink); outline-offset: 1px; }
.dm-kiln :where(button) { height: 44px; padding: 0 16px; border: 2px solid var(--k-ink); border-radius: 99px; background: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.dm-kiln__bag { display: flex; align-items: center; gap: 7px; padding: 0 4px 0 12px; }
.dm-kiln__bag, .dm-kiln__add:hover, .dm-kiln__cur :checked + label { background: var(--k-ink); color: var(--k-bg); }
.dm-kiln__bag span { min-width: 32px; padding: 0 6px; border-radius: 99px; background: var(--k-butter); color: var(--k-ink); line-height: 32px; }
.dm-kiln button:active { scale: .95; }
.dm-kiln__hero { padding-top: 5cqi; font: 400 clamp(34px, 9.6cqi, 72px)/1 var(--k-serif); letter-spacing: -.025em; }
.dm-kiln__sub { max-width: 31em; padding-top: 12px; color: #74625a; }
.dm-kiln__foot { padding-bottom: 16px; font-size: 12.5px; color: #74625a; }
.dm-kiln__grid { --c: 1; display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 28px 16px; padding: 26px 0 34px; }
.dm-kiln__item { position: relative; display: grid; grid-template: 22em auto auto / 1fr auto; column-gap: 8px; font-size: clamp(10px, 3.75cqi / var(--c), 13px); }
.dm-kiln__item::before { content: ""; grid-column: 1 / -1; border-radius: 11em 11em 28px 28px; background: radial-gradient(7em .8em at 50% 17.5em, #3a2b2430 98%, #0000), linear-gradient(#0000 16.4em, #3a2b2412 0) var(--t); }
.dm-kiln__item p { padding-top: 12px; font: 500 20px/1.2 var(--k-serif); }
.dm-kiln__glaze { display: flex; margin-left: -10px; }
.dm-kiln__sw, .dm-kiln__pot { --g: var(--a); }
.dm-kiln__b, .dm-kiln__b:checked ~ .dm-kiln__pot { --g: var(--b); }
.dm-kiln__c, .dm-kiln__c:checked ~ .dm-kiln__pot { --g: var(--c); }
.dm-kiln__sw { appearance: none; width: 44px; height: 44px; margin: 0; padding: 4px; border: 8px solid #0000; border-radius: 50%; outline-offset: -5px; background: var(--g) content-box; cursor: pointer; }
.dm-kiln__sw:checked { box-shadow: inset 0 0 0 2px var(--k-ink); }
.dm-kiln__gn { position: absolute; inset: 16.1em 0 auto; font-size: 1.2em; font-weight: 700; text-align: center; opacity: 0; pointer-events: none; }
.dm-kiln__sw:checked + .dm-kiln__gn { opacity: 1; }
.dm-kiln__pot { --d: color-mix(in srgb, var(--g) 78%, #2a1509); position: absolute; left: 50%; top: 17.6em; translate: -50% -100%; transform-origin: bottom; background: linear-gradient(90deg, #0000 11%, #fff5 0 19%, #0000 0) 0 0 / 100% 54% no-repeat, radial-gradient(90% 74% at 50% 0, var(--g) 99%, var(--k-raw)); }
.dm-kiln__item:hover .dm-kiln__pot { animation: dm-kiln-nod .5s; }
@keyframes dm-kiln-nod { 35% { rotate: -5deg; } 70% { rotate: 3deg; } }
.dm-kiln__pot::before, .dm-kiln__pot::after { content: ""; position: absolute; }
.dm-kiln__mug::after, .dm-kiln__bowl::after, .dm-kiln__vase::after { inset: -1.1em 0 auto; height: 2.2em; border: .36em solid var(--g); border-radius: 50%; background: var(--d); }
.dm-kiln__mug::before, .dm-kiln__jug::before { left: 100%; top: 1.2em; width: 3.1em; height: 4.2em; border: 1.1em solid var(--g); border-left: 0; border-radius: 0 2.5em 2.5em 0; }
.dm-kiln__mug { width: 9.6em; height: 8.8em; border-radius: 0 0 2.6em 2.6em; }
.dm-kiln__bowl { width: 14em; height: 6.2em; margin-top: -.6em; border-radius: 0 0 7em 7em / 0 0 6.2em 6.2em; }
.dm-kiln__bowl::before { inset: auto 4.4em -.6em; height: 1em; border-radius: 0 0 .5em .5em; background: var(--k-raw); }
.dm-kiln__vase { width: 8.6em; height: 9em; border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; }
.dm-kiln__vase::before { inset: auto 2.8em 92%; height: 3.6em; background: var(--g); }
.dm-kiln__vase::after { inset: auto 2em calc(92% + 3em); height: 1.3em; }
.dm-kiln__plate { width: 12.6em; height: 12.6em; border-radius: 50%; background: radial-gradient(closest-side, var(--g) 55%, var(--d) 56% 59%, var(--g) 60% 92%, var(--k-raw) 93%); }
.dm-kiln__plate::before { inset: 1.2em; border: .5em solid #0000; border-top-color: #fff5; border-radius: 50%; rotate: -42deg; }
.dm-kiln__jug { width: 8.4em; height: 11.6em; border-radius: .5em .5em 3em 3em; }
.dm-kiln__jug::before { top: 1.8em; height: 5em; }
.dm-kiln__jug::after { inset: 0 99% auto -2em; height: 2.8em; background: radial-gradient(100% 100% at 0 100%, #0000 98%, var(--g)); }
.dm-kiln__jar { width: 9.4em; height: 8.2em; border-radius: 1.4em 1.4em 3em 3em; }
.dm-kiln__jar::before { inset: auto .7em 96%; height: 1.6em; border-radius: 1.5em 1.5em .2em .2em; background: var(--d); }
.dm-kiln__jar::after { inset: auto 3.7em calc(96% + 1.3em); height: 1.5em; border-radius: 50%; background: var(--k-raw); }
.dm-kiln__tray { position: sticky; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 26px; background: var(--k-butter); font-size: 14px; }
.dm-kiln:not(.is-open) .dm-kiln__tray { height: 0; padding: 0; overflow: hidden; visibility: hidden; }
.dm-kiln__sum { flex: 1; visibility: visible; }
.dm-kiln__sum b { display: block; font: 500 19px/1.3 var(--k-serif); }
@container frame (min-width: 560px) { .dm-kiln__grid { --c: 2; } }
@container frame (min-width: 860px) {
.dm-kiln__grid { --c: 3; }
.dm-kiln__intro { display: grid; grid-template-columns: 3fr 2fr; align-items: end; }
}
.dm-sunyard {
--y: #FFD21E; --k: #17140D; --w: #FFFCF0; --b: #1E46DC; --o: #FF5A1F; --l: 3px solid var(--k);
--ring: var(--k); --ring-2: #fff; --p: 16px; --h: 116px; --g: 0px;
height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--k) var(--y);
background: var(--y); color: var(--k);
font: 600 .9375rem/1.3 var(--font); font-variation-settings: "FLAR" 0, "VOLM" 0; text-align: left;
}
.dm-sunyard.is-pitched { --g: calc(var(--h) * .65); }
.dm-sunyard .sy > *, .dm-sunyard .sy__fig { position: relative; min-width: 0; padding: calc(var(--p) / 2 + 6px) var(--p); background: var(--y); }
.dm-sunyard .sy, .dm-sunyard .sy .sy__out { display: grid; gap: 3px; min-height: 100%; padding: 0; background: linear-gradient(var(--k) 0 0) 0 / calc(100% - 1px) no-repeat; }
.dm-sunyard b { display: block; font-weight: 800; }
.dm-sunyard button { border: var(--l); border-radius: 0; background: none; font-weight: 800; }
.dm-sunyard button:hover { background: var(--w); color: var(--k); }
.dm-sunyard .sy__s { font-size: .8125rem; }
.dm-sunyard .sy__brand { display: flex; align-items: center; gap: 8px; }
.dm-sunyard .sy__brand::before, .dm-sunyard .sy__draw::before { content: ""; width: 18px; aspect-ratio: 1; border: var(--l); border-radius: 50%; background: var(--o); }
.dm-sunyard .sy__q { margin-top: 6px; font-size: clamp(1.4rem, 6.6cqi, 2.1rem); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.dm-sunyard .sy__rs, .dm-sunyard .sy__fig b { font-size: clamp(2.75rem, 13cqi, 3.25rem); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.dm-sunyard .sy__rs small { font-size: .4em; letter-spacing: 0; }
.dm-sunyard .sy__range {
--t: linear-gradient(var(--k) 0 0) 0 / calc((var(--n) - 2) / 38 * (100% - 38px) + 19px) no-repeat var(--w);
appearance: none; display: block; width: 100%; height: 48px; margin: 0;
background: repeating-linear-gradient(90deg, var(--k) 0 3px, #0000 0 calc((100% - 3px) / 19)) 20.5px 100% / calc(100% - 41px) 8px no-repeat;
}
.dm-sunyard .sy__range:focus-visible { --f: 0 0 0 3px #fff, 0 0 0 6px var(--k); outline: 0; box-shadow: none; }
.dm-sunyard .sy__range::-webkit-slider-runnable-track { height: 14px; border: var(--l); background: var(--t); }
.dm-sunyard .sy__range::-moz-range-track { box-sizing: border-box; height: 14px; border: var(--l); background: var(--t); }
.dm-sunyard .sy__range::-webkit-slider-thumb { appearance: none; width: 38px; height: 38px; margin-top: -15px; border: var(--l); border-radius: 50%; background: var(--o); box-shadow: var(--f, none); }
.dm-sunyard .sy__range::-moz-range-thumb { box-sizing: border-box; width: 38px; height: 38px; border: var(--l); border-radius: 50%; background: var(--o); box-shadow: var(--f, none); }
.dm-sunyard .sy__ends { display: flex; justify-content: space-between; }
.dm-sunyard .sy__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.dm-sunyard .sy__seg, .dm-sunyard .sy__opt { display: flex; flex: 1; gap: 8px; }
.dm-sunyard .sy__opt { align-items: center; min-height: 44px; padding: 0 10px; }
.dm-sunyard .sy__opt[aria-pressed="true"] { background: var(--k); color: var(--y); }
.dm-sunyard .sy__opt svg { width: 24px; max-width: none; }
.dm-sunyard .sy__draw { display: grid; align-content: end; padding-bottom: 10px; }
.dm-sunyard .sy__draw::before { position: absolute; left: 12%; top: var(--p); width: clamp(44px, 6.4cqi, 64px); }
.dm-sunyard .sy__house { position: relative; justify-self: center; width: 100%; max-width: 520px; margin-top: 20px; }
.dm-sunyard .sy__plane { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(var(--h) * .09) 4px; width: calc(100% - var(--g)); height: var(--h); padding: 7px; border: var(--l); background: var(--w); transform-origin: 0 100%; }
.dm-sunyard.is-pitched .sy__plane { gap: 4px; transform: skewX(-18deg); }
.dm-sunyard .sy__plane i { background: #EDE6CC; }
.dm-sunyard .sy__plane i::before { content: ""; display: block; height: 100%; background: var(--b); opacity: calc(var(--n) - var(--i)); scale: clamp(.4, var(--n) - var(--i), 1); transition: opacity .12s, scale .3s var(--spring); }
.dm-sunyard .sy__gable { position: absolute; top: 1.5px; right: 1.5px; width: var(--g); height: calc(var(--h) - 1px); }
.dm-sunyard .sy__wall { position: relative; height: calc(var(--h) * .36); border: var(--l); border-width: 0 3px; }
.dm-sunyard.is-pitched .sy__wall { background: linear-gradient(var(--k) 0 0) calc(100% - var(--g) + 3px) / 3px 100% no-repeat; }
.dm-sunyard .sy__wall::before { content: ""; position: absolute; left: 12%; bottom: 0; width: 18px; height: 68%; background: var(--k); }
.dm-sunyard .sy__wall::after { content: ""; position: absolute; left: 30%; top: 20%; width: 28px; height: 40%; border: var(--l); background: var(--w); }
.dm-sunyard .sy__key { margin: 0 calc(var(--p) * -1); padding: 8px var(--p) 0; border-top: var(--l); }
.dm-sunyard .sy__out { grid-template-columns: repeat(3, 1fr); }
.dm-sunyard .sy__fig { display: grid; align-content: center; }
.dm-sunyard .sy__fig b { font-size: clamp(1.6rem, 10.4cqi, 3rem); }
.dm-sunyard .sy__foot { display: grid; gap: 10px; align-content: start; }
.dm-sunyard .sy__cta { min-height: 52px; padding: 0 24px; background: var(--k); color: var(--y); }
.dm-sunyard .sy__said { min-height: 1.3em; margin-top: 6px; }
@container frame (min-width: 560px) {
.dm-sunyard { --p: 22px; --h: 136px; }
.dm-sunyard .sy { grid-template: auto auto 1fr auto / 3fr 2fr; }
.dm-sunyard .sy__head, .dm-sunyard .sy__foot { grid-column: 1 / -1; }
.dm-sunyard .sy__kind, .dm-sunyard .sy__opt { flex-direction: column; align-items: stretch; }
.dm-sunyard .sy__opt { justify-content: space-between; padding: 10px; text-align: left; }
.dm-sunyard .sy__opt svg { width: 44px; }
.dm-sunyard .sy__out { grid-template-columns: none; }
.dm-sunyard .sy__fig { padding-block: 12px; }
.dm-sunyard .sy__foot { grid-template-columns: 1fr auto; column-gap: 28px; }
.dm-sunyard .sy__go { grid-area: 1 / 2 / 3; }
}
@container frame (min-width: 720px) {
.dm-sunyard { --h: 156px; }
.dm-sunyard .sy { grid-template: auto 1fr 1fr auto / minmax(280px, 2fr) 3fr; }
.dm-sunyard .sy__head { grid-column: 1; }
.dm-sunyard .sy__draw { grid-area: 1 / 2 / 3; }
.dm-sunyard .sy__out { grid-template-columns: repeat(3, 1fr); }
.dm-sunyard .sy__fig b { font-size: clamp(2.8rem, 6.3cqi, 5.5rem); }
}