:root{font-family:Arial,"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:#333;background:#f3f3f1;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;border:1px solid #c4c4c0;background:#fafaf8;border-radius:3px;padding:12px 24px;min-height:44px}button:hover{background:#e9e9e5}button:focus-visible,input:focus-visible{outline:2px solid #555;outline-offset:4px}button:disabled{cursor:default;opacity:.55}[hidden]{display:none!important}header{max-width:880px;margin:auto;padding:28px 24px;display:flex;align-items:center;justify-content:space-between}.switch{display:flex;border:1px solid #ccc;border-radius:4px;overflow:hidden}.switch button{border:0;border-radius:0;padding:8px 17px;background:transparent}.switch button[aria-pressed=true]{background:#333;color:#fff}.icon-button{border:0;background:none;padding:8px;width:44px}.icon-button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5}main{max-width:740px;margin:45px auto 0;padding:0 24px 60px;text-align:center}h1{font-size:26px;font-weight:400;letter-spacing:.06em;line-height:1.7;margin:0 0 66px}h2{font-size:19px;font-weight:400;line-height:1.7}.keys{display:flex;justify-content:center;gap:70px}.key{min-width:155px}#start,#end{min-width:145px;letter-spacing:.06em}#start{border-color:#b7756c;background:#f3e3de}#end{border-color:#668fa1;background:#e0ebef}.code{display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;margin-top:24px}.dot{width:21px;height:21px;border-radius:50%;flex:none;border:1px solid #0002}.dot[data-color="1"]{background:#d85550}.dot[data-color="2"]{background:#367ca9}.dot[data-color="3"]{background:#e8bd37}.dot[data-color="4"]{background:#309474}.dot[data-color="5"]{background:#9860aa}.dot[data-color="6"]{background:#e78b43}.dot[data-color="0"]{background:#fff;border-color:#aaa}.literal{font-family:Georgia,serif;font-size:30px;line-height:1;width:21px}.answer-code{margin:65px 0 32px;gap:13px}label{display:block;font-size:14px;margin-bottom:12px}.answer-entry{display:flex;gap:10px;max-width:365px;margin:auto}input{min-width:0;width:100%;border:1px solid #aaa;border-radius:2px;padding:10px 12px;background:#fff}.answer-entry button{white-space:nowrap;padding:10px 18px}#feedback,#copy-status{font-size:14px;min-height:24px;margin:18px 0 0}dialog{border:1px solid #c9c9c4;background:#f8f8f5;color:#333;width:430px;max-width:calc(100% - 32px);padding:38px 24px;text-align:center}dialog::backdrop{background:#0006}.dialog-actions{display:flex;justify-content:center;gap:14px;margin-top:30px}.close{position:absolute;top:4px;right:4px;border:0;background:none;font-size:25px;padding:4px 12px}.share-options{display:flex;justify-content:center;gap:22px;margin-top:34px}.social{width:70px;height:70px;display:grid;place-items:center;padding:12px;border:0;background:transparent}.social svg{width:100%;height:100%;overflow:visible}.discord{color:#5865f2;touch-action:manipulation;user-select:none}.discord svg{width:64px;height:56px}.crack{fill:none;stroke:#f8f8f5;stroke-width:3;stroke-linejoin:round;stroke-dasharray:150;stroke-dashoffset:150}.fragment{display:none}.damaged .crack{stroke-dashoffset:var(--damage,100)}.broken .intact,.broken .crack{visibility:hidden}.broken .fragment{display:block}.broken .fragment use{visibility:visible}.broken .left{animation:break-left .6s ease-in forwards}.broken .right{animation:break-right .6s ease-in forwards}@keyframes break-left{to{transform:translate(-24px,36px) rotate(-18deg);opacity:0}}@keyframes break-right{to{transform:translate(24px,40px) rotate(18deg);opacity:0}}@media(max-width:500px){header{padding:20px}main{margin-top:32px;padding:0 18px 36px}h1{font-size:22px;margin-bottom:48px}.keys{gap:22px}.key{min-width:132px}#start,#end{min-width:128px}.code{gap:7px}.dot{width:18px;height:18px}.answer-code{gap:10px;margin-top:52px}.share-options{gap:12px}}@media(prefers-reduced-motion:reduce){.broken .left,.broken .right{animation-duration:.01s}}

body{min-height:100svh;display:flex;flex-direction:column}header{width:100%}main{width:100%;flex:1}#landing{position:absolute;top:50svh;left:50%;transform:translate(-50%,-50%)}footer{display:flex;justify-content:center;padding:12px 24px 28px}.cipher-square{width:64px;height:64px;margin:0 auto;border:1px solid;border-radius:0}.start-square{border-color:#b7756c;background:#f3e3de}.end-square{border-color:#668fa1;background:#e0ebef}

.answer-clue{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;margin:60px 0 30px}.answer-clue>span{font-size:16px;white-space:nowrap}.answer-clue .answer-code{margin:0;gap:12px}.literal{width:21px;height:26px;position:relative;display:inline-block;flex:none}.literal::before{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:#333;transform:translateX(-50%)}.share-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:168px;background:#333;color:#fff;border-color:#333}.share-button:hover{background:#494949}.share-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.share-options{gap:20px}.social{border:1px solid #deded9;border-radius:12px;background:#fff}.social:hover{background:#eee}.social svg{width:32px;height:32px}.discord svg{width:44px;height:40px}@media(max-width:500px){.answer-clue{gap:14px;margin-top:48px}.answer-clue .answer-code{gap:9px}.literal{width:18px;height:24px}}

#translate{min-width:0;width:100%;border:1px solid #aaa;border-radius:2px;padding:10px 12px;background:#fff;color:#333;text-align:left;font:inherit;white-space:normal;overflow-wrap:anywhere}#translate:hover{background:#fff}.answer-entry button[type=submit]:disabled{opacity:1;cursor:default}

#share-title{font-family:"Yu Mincho",serif;font-size:25px;margin:12px 0 28px}.share-caption{font-size:14px;margin:0}.share-options{margin-top:18px}.text-back{display:block;margin:18px auto 0;padding:8px 16px;border:0;border-bottom:1px solid #888;border-radius:0;background:none}.discord svg{width:48px;height:40px}#clear-share{display:block;margin:20px auto}

#share-dialog{background:#fff;border-color:#e0e0e0;border-radius:12px;padding:36px 24px 24px}#share-title{font-family:inherit;font-size:24px;margin:8px 0 28px}.share-caption{color:#666}.share-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 0}.social{width:100%;height:auto;min-height:92px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:12px;padding:12px 2px;border:0;background:transparent;border-radius:8px;color:#333}.social:hover{background:#f5f5f5}.social svg{height:40px;width:40px;flex:none}.discord svg{width:50px;height:40px}.social-label{font-size:12px;line-height:1.5;white-space:nowrap}#share-x svg{background:#111;color:#fff;padding:6px;border-radius:5px}#copy-link svg{background:#f1f1f1;padding:8px;border-radius:50%}#copy-status:empty{min-height:0;margin:0}.text-back{margin-top:24px}.crack{stroke:#fff}

:root{--surface:#fff;--line:#d7d7d2}button,input{transition:background-color .15s,border-color .15s}h1{letter-spacing:.08em}.cipher-square{width:68px;height:68px}.answer-entry input,.answer-entry #translate{height:48px}.answer-entry button[type=submit]{height:48px;border-color:#555;background:#333;color:#fff;padding-inline:22px}.answer-entry button[type=submit]:hover{background:#4a4a4a}input:focus-visible,#translate:focus-visible{outline:2px solid #888;outline-offset:3px}.share-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.social{min-height:88px;gap:12px}.social-label{font-size:12px;white-space:normal}#share-dialog{width:460px;padding:36px 28px 24px}.share-caption{font-size:13px}.text-back{font-size:14px;color:#666}#copy-link .social-label{max-width:6em}#feedback:empty{margin:0;min-height:0}footer{padding-top:24px}@media(max-width:500px){#share-dialog{padding:32px 18px 22px}.share-options{gap:2px}.social-label{font-size:11px}.social svg{width:36px;height:36px}.discord svg{width:45px;height:36px}.answer-entry button[type=submit]{padding-inline:18px}}@media(prefers-reduced-motion:reduce){button,input{transition:none}}

.code{gap:5px}.dot{width:24px;height:24px}.answer-clue .answer-code{gap:7px}.literal{width:24px}#translate{text-align:center;background:#fafaf8;border-color:#969690;box-shadow:0 1px 2px #0000000a}#translate:hover{background:#f0f0ec;border-color:#74746e}#translate:active{background:#e8e8e3;box-shadow:inset 0 1px 2px #0000000c}@media(max-width:500px){.dot{width:21px;height:21px}.literal{width:21px}.answer-clue .answer-code{gap:6px}}

/* Keep translated labels from changing the puzzle geometry. */
.switch button{width:50px;height:44px;padding:8px 0;line-height:28px}h1{height:3.4em;display:flex;align-items:center;justify-content:center}.answer-clue{display:grid;grid-template-columns:112px max-content;gap:18px;min-height:32px}.answer-clue>span{line-height:24px;text-align:right}.answer-entry{display:grid;grid-template-columns:minmax(0,180px) 88px;max-width:278px;gap:10px}.answer-entry button[type=submit]{width:88px;padding-inline:8px;line-height:24px}.answer-entry input,.answer-entry #translate{line-height:24px}#start,#end{width:145px;height:48px;line-height:22px;padding:12px 10px}@media(max-width:500px){.answer-clue{grid-template-columns:1fr;grid-template-rows:24px 32px;gap:10px}.answer-clue>span{text-align:center}#start,#end{width:128px}}

/* Extend the result popup downward so returning does not land on translate. */
#share-dialog{transform:translateY(40px);max-height:calc(100svh - 96px);overflow-y:auto}#back-share{margin-top:104px}@media(max-height:650px){#share-dialog{transform:none;max-height:calc(100svh - 24px)}#back-share{margin-top:64px}}

.answer-clue{display:flex;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap;gap:14px;height:32px}.answer-clue>span{text-align:left}@media(max-width:500px){.answer-clue{height:66px;gap:6px 10px}}@media(max-width:350px){.answer-clue .answer-code{gap:4px}}

#discord.destroyed{visibility:hidden;pointer-events:none}