@charset "UTF-8";
:root{font-family:"Segoe UI",Arial,sans-serif;font-synthesis:none;color-scheme:light;--cream:#f5f0e3;--ink:#24251e;--honey:#e9b935}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{--ground:var(--cream);--foreground:var(--ink);background:var(--ground);color:var(--foreground);transition:background-color .6s ease,color .6s ease}
body[data-theme="ink"]{--ground:var(--ink);--foreground:var(--honey)}
body[data-theme="honey"]{--ground:var(--honey);--foreground:var(--ink)}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.stage{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:220px;isolation:isolate;overflow:hidden}
.frame-header,.frame-footer{position:absolute;z-index:5;left:clamp(20px,4.2vw,64px);right:clamp(20px,4.2vw,64px);display:flex;align-items:center;justify-content:space-between}
.frame-header{top:clamp(19px,3.8vw,50px)}
.frame-footer{bottom:clamp(19px,3.4vw,43px)}
body[data-embed="true"] .frame-header,body[data-embed="true"] .frame-footer .controls{display:none}
body[data-embed="true"] .frame-footer{justify-content:flex-end}
.eyebrow,.edition{font-size:10px;line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.24em}
.edition{opacity:.5;font-weight:400;letter-spacing:.16em}
.artwork{position:relative;width:min(77vw,1150px);aspect-ratio:2/1;transform:translateY(-2%)}
.piece,.bee-group{position:absolute;inset:0}
.piece{background-image:url("../ortak/ari-tekel-logo.webp");background-size:100% 100%;background-repeat:no-repeat;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
body[data-theme="ink"] .piece,body[data-theme="honey"] .piece{background-image:none;background-color:var(--foreground);-webkit-mask-image:url("../ortak/ari-tekel-logo.webp");mask-image:url("../ortak/ari-tekel-logo.webp");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.wing-top{clip-path:polygon(10% 3%,24% 3%,34% 36%,31% 37%,12% 26%);transform-origin:31.8% 34.6%}
.wing-bottom{clip-path:polygon(3% 27%,18% 27%,28% 36%,29% 39%,10% 54%,3% 52%);transform-origin:27.4% 37.7%}
.body-top{clip-path:polygon(25% 34%,41% 34%,41% 60%,37% 60%,32% 48%,25% 44%);transform-origin:33% 47%}
.body-middle{clip-path:polygon(22% 47%,30% 47%,39% 65%,31% 72%,22% 63%,17% 63%,18% 57%);transform-origin:28% 59%}
.tail{clip-path:polygon(17% 63%,24% 63%,31% 73%,28% 86%,17% 87%);transform-origin:24% 75%}
.letter-a{clip-path:inset(30% 32.1% 24% 41.5%)}
.letter-r{clip-path:inset(30% 16.5% 24% 68%)}
.letter-i{clip-path:inset(30% 6% 24% 84%)}
.subline{clip-path:inset(78% 5% 7% 43%)}
.complete{opacity:1;will-change:opacity}
.controls{display:flex;align-items:center;gap:12px}
.controls button{display:flex;align-items:center;justify-content:center;border:0;background:none;padding:9px 0;font-size:11px;letter-spacing:.03em}
.controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.play-toggle{width:30px;min-height:36px}
.replay{gap:8px;opacity:.65;transition:opacity .2s ease}
.replay:hover{opacity:1}
.play-icon{display:none;fill:currentColor!important;stroke:none!important}
body[data-state="paused"] .pause-icon,body[data-state="ended"] .pause-icon{display:none}
body[data-state="paused"] .play-icon,body[data-state="ended"] .play-icon{display:block}
.palette{display:flex;gap:5px}
.palette button{width:28px;height:28px;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;background:none;padding:0;transition:border-color .2s}
.palette button[aria-pressed="true"]{border-color:currentColor}
.palette span{width:13px;height:13px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px #24251e25}
.palette [data-color="cream"] span{background:var(--cream)}
.palette [data-color="ink"] span{background:var(--ink)}
.palette [data-color="honey"] span{background:var(--honey)}
.progress{position:absolute;inset:auto 0 0;height:2px;background:color-mix(in srgb,currentColor 10%,transparent);pointer-events:none}
.progress i{display:block;width:100%;height:100%;background:currentColor;transform-origin:left;transform:scaleX(0);opacity:.58}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:480px){.artwork{width:92vw}.frame-header,.frame-footer{left:18px;right:18px}.eyebrow,.edition{font-size:8px;letter-spacing:.18em}.controls{gap:5px}.controls button{font-size:10px}.palette{gap:0}.palette button{width:25px;height:25px}.replay svg{width:16px}}
@media(max-height:310px){.frame-header{top:15px}.frame-footer{bottom:11px}.artwork{width:min(64vw,480px)}.eyebrow,.edition{font-size:8px}.controls button{font-size:9px}.palette button{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){body{transition:none}.piece{will-change:auto}}