*{
  box-sizing:border-box;
  word-wrap:break-word;
  overflow-wrap:break-word;
  word-break:auto-phrase;
}
html,body,button,a,label,h1{
  background:#000;
  color:#fff;
  font-family:sans-serif;
}
body{
  margin:0;
}
main{
  width:99%;
  margin:0 auto 12em;
  display:flex;
  flex-flow:wrap;
}
main>div{
  flex:100%;
  order:-1;
  display:flex;
  flex-flow:wrap;
  align-items:flex-start;
}
fieldset{
  flex:20em;
  display:flex;
  flex-flow:wrap;
  font-weight:bold;
  margin-top:0.1em;
  padding:0.1em;
  gap:0.2em;
  background:#333;
  border:0.2em solid #888;
  border-radius:0.3em;
}
fieldset>label,fieldset>button{
  flex:min-content;
  padding:0.3em;
  text-align:center;
  border:0.15em solid #eee;
  display:flex;
  flex-flow:wrap;
  justify-content:space-around;
  align-items:center;
  font:inherit;
}
label[for=all]{
  flex:100%;
}
fieldset>button{
  flex-grow:0.2;
}
fieldset>label,#show:checked~div label,fieldset>button:active{
  background:#eee;
  color:#000;
}
#control,#creator{
  flex:40em;
}
#font{
  flex:60em;
}
@font-face{
  font-family:'OCR-B';
  src:url('OCR-B.woff');
}
@font-face{
  font-family:'Tomorrow';
  src:url('tomorrow6.woff2');
}
@font-face{
  font-family:'Cyberpunk Waifus';
  src:url('CyberpunkWaifus.ttf');
}
@font-face{
  font-family:'Tiny5';
  src:url('tiny54.woff2');
}
@font-face{
  font-family:'Press Start 2P';
  src:url('press-start-2p4.woff2');
}
@font-face{
  font-family:'Pixelify Sans';
  src:url('pixelify-sans4.woff2');
}
@font-face{
  font-family:'Mea Culpa';
  src:url('mea-culpa4.woff2');
}
label[for=mono]{
  font-family:'OCR-B',monospace,sans-serif;
}
label[for=serif]{
  font-family:serif;
}
label[for=tomorrow]{
  font-family:'Tomorrow',sans-serif;
}
label[for=cyber]{
  font-family:'Cyberpunk Waifus',monospace;
}
label[for=tiny]{
  font-family:'Tiny5',monospace;
}
label[for=ps2p]{
  font-family:'Press Start 2P',monospace;
}
label[for=pixel]{
  font-family:'Pixelify Sans',monospace;
}
label[for=culpa],label[for=culpa_bold]{
  font-family:'Mea Culpa',sans-serif;
}
label[for=culpa_bold]{
  -webkit-text-stroke-width: 0.02em;
}
#en:checked~div label[for=en],#ja:checked~div label[for=ja],
#ru:checked~div label[for=ru],
#chrono:checked~div label[for=chrono],
#phonetic:checked~div label[for=phonetic],#abc:checked~div label[for=abc],
#menu:checked~div label[for=menu],#special:checked~div label[for=special],
#url:checked~div label[for=url],#drink:checked~div label[for=drink],
#full:checked~div label[for=full],#short:checked~div label[for=short],
#bartender:checked~div label[for=bartender],
#customer:checked~div label[for=customer],
#balanced:checked~div label[for=balanced],#text:checked~div label[for=text],
#visual:checked~div label[for=visual],
#jump:checked~div label[for=jump],#print:checked~div label[for=print],
#sticker:checked~div label[for=sticker],
#portrait:checked~div label[for=portrait],
#video:checked~div label[for=video],
#compact:checked~div label[for=compact],#gap:checked~div label[for=gap],
#mono:checked~div label[for=mono],#sans:checked~div label[for=sans],
#serif:checked~div label[for=serif],#tomorrow:checked~div label[for=tomorrow],
#cyber:checked~div label[for=cyber],
#tiny:checked~div label[for=tiny],
#ps2p:checked~div label[for=ps2p],
#pixel:checked~div label[for=pixel],
#culpa:checked~div label[for=culpa],
#culpa_bold:checked~div label[for=culpa_bold],
#color:checked~div label[for=color],#loco:checked~div label[for=loco],
#a1:checked~div label[for=a1],#aut:checked~div label[for=aut],
#ds:checked~div label[for=ds],#tri:checked~div label[for=tri],
#glossy:checked~div label[for=glossy],#penta:checked~div label[for=penta],
#hix:checked~div label[for=hix],#lemone:checked~div label[for=lemone],
#all:checked~div label[for=all],label[for=show],fieldset>button{
  background:#000;
  color:#fff;
}
#en:checked~.en,#ja:checked~.ja,#ru:checked~.ru,
#chrono:checked~.chrono,#phonetic:checked~.phonetic,#abc:checked~.abc,
#menu:checked~.menu,#special:checked~.special,
#url:checked~.url,#drink:checked~.drink,
#full:checked~.full,#short:checked~.short,
#bartender:checked~.bartender,#customer:checked~.customer,
#customer:checked~div>#focus,
#balanced:checked~.balanced,#text:checked~.text,
#visual:checked~.visual,#jump:checked~.jump,
#print:checked~.print,#sticker:checked~.sticker,
#portrait:checked~.portrait,#video:checked~.video,
#compact:checked~.compact,#gap:checked~.gap,
#mono:checked~.mono,#sans:checked~.sans,#serif:checked~.serif,
#tomorrow:checked~.tomorrow,#cyber:checked~.cyber,
#tiny:checked~.tiny,#ps2p:checked~.ps2p,
#pixel:checked~.pixel,#culpa:checked~.culpa,
#culpa_bold:checked~.culpa_bold,
#color:checked~.color,#loco:checked~.loco,
#a1:checked~.a1,#aut:checked~.aut,
#ds:checked~.ds,#tri:checked~.tri,
#glossy:checked~.glossy,#penta:checked~.penta,
#hix:checked~.hix,#lemone:checked~.lemone,
#menu:checked+#special:checked~div>.filter,
#en:checked~* span[lang=en],
#ja:checked~* span[lang=ja],
#ja:checked~div label[for=phonetic],
#ru:checked~* span[lang=ru],
#show:checked~div #upina,
#all:checked~div label[for=show],#all:checked~div button{
  display:none;
}
#lang,#type,#creator{
  display:flex !important;
}
#all:checked~div>.filter{
  display:none !important;
}
#en:checked+#ja:checked+#ru:checked~* span[lang=en],
label[for=en]>span[lang=en],
label[for=ja]>span[lang=ja],
label[for=ru]>span[lang=ru],
#creator>label>span[lang=en],
span[lang=en]:only-child,
label[for=all]>*{
  display:inline !important;
}
#all:checked~article,#show:checked~.pin:checked+article{
  display:flex !important;
}
h1{
  flex:100%;
  order:-1;
  font-size:1.3rem;
  margin:0;
}
article{
  flex:25em;
  display:flex;
  flex-flow:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  align-content:flex-start;
  position:relative;
  border:1px solid #333;
}
.pin:checked+article{
  order:-1;
}
article>label{
  flex:50%;
  display:flex;
  min-height:15em;
  max-height:25em;
}
p{
  flex:100%;
  margin-top:0;
}
strong{
  font-weight:bold;
}
img{
  flex:auto;
  max-width:100%;
  object-fit:contain;
}
button,label,h2,img,pre{
  cursor:pointer;
}
.drink img{
  image-rendering:-webkit-optimize-contrast;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  image-rendering:optimizeSpeed;
  image-rendering:pixelated;
}
main>input{
  display:none;
}
.focus{
  position:absolute;
  opacity:0;
}
.focus,.focus:focus~label{
  pointer-events:none;
}
.focus:focus~label>img{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-width:100vw;
  max-height:90vh;
  max-width:100dvw;
  max-height:100dvh;
  width:100vw;
  height:90vh;
  width:100dvw;
  height:100dvh;
  z-index:1;
}
.focus:focus+div{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:#000a;
  z-index:1;
}
pre{
  display:none;
  white-space:pre-wrap;
}
h2{
  font-size:1.2rem;
  flex:100%;
  margin:0;
  padding:1em 0;
}
h2,pre{
  flex:100%;
  -moz-user-select:all;
  -webkit-user-select:all;
  user-select:all;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.print>h2,.sticker>h2,.url h2{
  -moz-user-select:initial;
  -webkit-user-select:initial;
  user-select:initial;
}
.print>h2,.sticker>h2,.jss h2{
  cursor:initial;
}
.url>a{
  flex:100%;
  text-decoration:underline;
}
menu{
  display:flex;
  flex-flow:column wrap;
  gap:1.5em;
  list-style:none;
  padding:0;
  margin:0;
}
.url>menu{
  flex-flow:wrap;
}
menu>*>*,a[href='#top']{
  font-size:1rem;
  display:block;
  padding:0;
  width:3em;
  height:3em;
  border:solid 1px #fff;
}
a[href='#top']{
  position:fixed;
  border-width:0.15em;
  bottom:2em;
  right:2em;
  bottom:calc(env(safe-area-inset-bottom) + 2em);
  right:calc(env(safe-area-inset-right) + 2em);
}
menu>*>*::after,a[href='#top']::after{
  content:'';
  display:block;
  width:100%;
  height:100%;
  background:#fff;
}
.menu::after{
  -webkit-clip-path:polygon(20% 25%,80% 25%,80% 35%,20% 35%,20% 45%,
    80% 45%,80% 55%,20% 55%,20% 65%,80% 65%,80% 75%,20% 75%);
  clip-path:polygon(20% 25%,80% 25%,80% 35%,20% 35%,20% 45%,
    80% 45%,80% 55%,20% 55%,20% 65%,80% 65%,80% 75%,20% 75%);
}
a[href='#top']::after{
  -webkit-clip-path:polygon(85% 45%,60% 45%,60% 90%,40% 90%,40% 45%,15% 45%,50% 10%);
  clip-path:polygon(85% 45%,60% 45%,60% 90%,40% 90%,40% 45%,15% 45%,50% 10%);
}
menu .filter::after{
  -webkit-clip-path:polygon(10% 10%,90% 10%,60% 50%,60% 80%,40% 90%,40% 50%);
  clip-path:polygon(10% 10%,90% 10%,60% 50%,60% 80%,40% 90%,40% 50%);
}
menu a::after{
  -webkit-clip-path:polygon(25% 50%,45% 50%,45% 10%,55% 10%,55% 50%,75% 50%,
    50% 75%,50% 80%,90% 80%,90% 90%,10% 90%,10% 80%,50% 80%,50% 75%);
  clip-path:polygon(25% 50%,45% 50%,45% 10%,55% 10%,55% 50%,75% 50%,
    50% 75%,50% 80%,90% 80%,90% 90%,10% 90%,10% 80%,50% 80%,50% 75%);
}
menu .copy::after{
  -webkit-clip-path:polygon(20% 15%,20% 60%,10% 60%,10% 5%,60% 5%,60% 15%,20% 15%,30% 25%,
    90% 25%,90% 95%,30% 95%,30% 25%,40% 35%,40% 85%,80% 85%,80% 35%,40% 35%);
  clip-path:polygon(20% 15%,20% 60%,10% 60%,10% 5%,60% 5%,60% 15%,20% 15%,30% 25%,
    90% 25%,90% 95%,30% 95%,30% 25%,40% 35%,40% 85%,80% 85%,80% 35%,40% 35%);
}
button.copied::after{
  -webkit-clip-path:polygon(20% 15%,20% 60%,10% 60%,10% 5%,60% 5%,
    60% 15%,20% 15%,30% 25%,90% 25%,90% 95%,30% 95%,30% 25%);
  clip-path:polygon(20% 15%,20% 60%,10% 60%,10% 5%,60% 5%,
    60% 15%,20% 15%,30% 25%,90% 25%,90% 95%,30% 95%,30% 25%);
}
.pin:checked+article menu label::after{
  -webkit-clip-path:polygon(60% 5%,95% 40%,80% 45%,50% 75%,50% 95%,30% 75%,
    5% 95%,25% 70%,5% 50%,25% 50%,55% 20%);
  clip-path:polygon(60% 5%,95% 40%,80% 45%,50% 75%,50% 95%,30% 75%,
    5% 95%,25% 70%,5% 50%,25% 50%,55% 20%);
}
menu label::after{
  -webkit-clip-path:polygon(60% 5%,95% 40%,80% 45%,50% 75%,50% 95%,30% 75%,
    5% 95%,31% 69%,45% 83%,45% 73%,77% 41%,86% 38%,
    62% 14%,59% 23%,27% 55%,17% 55%,31% 69%,
    5% 95%,25% 70%,5% 50%,25% 50%,55% 20%);
  clip-path:polygon(60% 5%,95% 40%,80% 45%,50% 75%,50% 95%,30% 75%,
    5% 95%,31% 69%,45% 83%,45% 73%,77% 41%,86% 38%,
    62% 14%,59% 23%,27% 55%,17% 55%,31% 69%,
    5% 95%,25% 70%,5% 50%,25% 50%,55% 20%);
}
div.copied{
  font-size:1.8em;
  position:fixed;
  top:1.5em;
  left:50%;
  transform:translateX(-50%);
  background:#333;
  color:#fff;
  padding:0.5em;
  border-radius:0.5em;
}
div.copied::after{
  content:'Copied';
}
a:focus,button:focus,label:focus,
a:hover,button:hover,label:hover{
  border-color:#000;
  outline:medium solid #fff;
}