:root{--ink: #111;--paper: #fff;--gray: #555;--line: #ddd;--rail: min(240px, calc((100vw - 500px)/2) );--font-latin: "Jost", "Futura", "Century Gothic", sans-serif;--font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;--font: var(--font-latin), var(--font-jp);font-family:var(--font);color:var(--ink);font-synthesis:weight}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper)}a,button{color:inherit}a{text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button,select,input{font:inherit}button{cursor:pointer;background:var(--paper);border:1px solid;color:inherit;border-radius:0}button:focus-visible,a:focus-visible{outline:double 3px;outline-offset:3px}img,video{display:block;max-width:100%}h1,h2,h3,p{margin:0}.skip{position:fixed;top:-60px;left:8px;background:var(--paper);z-index:10;padding:8px}.skip:focus{top:0}.outside{position:fixed;right:28px;top:28px;writing-mode:vertical-rl;font:700 10px/1.5 Arial,sans-serif;letter-spacing:.14em}.column{width:min(100%,500px);position:relative;margin:auto;background:var(--paper);border-inline:1px solid var(--ink);min-height:100vh}aside.rail{position:fixed;z-index:2;inset:0 auto 0 0;width:var(--rail);border-right:1px solid;background:var(--paper);padding:40px clamp(8px,2vw,32px) 22px;display:flex;flex-direction:column;overflow:auto}.brand{font-size:clamp(15px,1.6vw,24px);font-weight:700;letter-spacing:-.06em;line-height:1.25;display:block}.brand:hover{text-decoration:none}.brand small,.en,.meta,.railfoot small,.eyebrow{font:700 10px/1.5 Arial,sans-serif;letter-spacing:.14em}.brand small,.railfoot small{display:block;margin-top:8px}.marks{display:flex;align-items:flex-end;gap:8px;margin-bottom:12px}.marks img{image-rendering:pixelated;filter:brightness(0)}.marks img:first-child{width:46px}.marks img:last-child{width:59px}.side-caption{font:700 25px/1.13 var(--font-latin);letter-spacing:-1px;margin:45px 0 32px}nav.links a{display:flex;align-items:center;gap:13px;padding:8px 0;font-size:13px;font-weight:700}nav.links a:before{content:"";width:7px;height:7px;flex:0 0 auto}nav.links a.current:before{background:currentColor}.railfoot{margin-top:auto;padding-top:32px}.btn{min-height:48px;background:var(--ink);color:#fff;padding:12px 16px;display:inline-flex;justify-content:space-between;gap:20px;align-items:center;border:2px solid var(--ink);font-size:14px;font-weight:700;text-decoration:none}.btn:hover{background:#333;text-decoration:none}i.tri{display:inline-block;width:0;height:0;border-left:7px solid;border-block:4px solid transparent}.plain{border:0;border-bottom:1px solid currentColor;background:transparent;padding:4px 0;font-size:12px}.note{display:block;font-size:11px;line-height:1.8;color:var(--gray);margin:10px 0}header.mobilebar{display:none}dialog.menu{background:var(--ink);color:#fff;border:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;padding:24px}dialog.menu button{float:right;background:transparent;padding:12px;color:#fff;border:0;font-weight:700}dialog.menu nav{clear:both;padding-top:28px;display:flex;flex-direction:column}dialog.menu nav a{font-size:23px;border-bottom:1px solid var(--gray);padding:14px 0;font-weight:700}dialog.menu .menufoot{margin-top:26px}dialog.menu .menufoot a{color:#fff}#quiz{min-height:780px;outline:none}.quiz-page{padding:24px;min-height:740px;display:flex;flex-direction:column}.quiz-page h1{font-size:44px;line-height:1.25;letter-spacing:-.07em;margin:15px 0 23px;font-weight:700}.quiz-page p{font-size:14px;line-height:1.95}.quiz-page .eyebrow{font:700 10px Arial,sans-serif;letter-spacing:.14em}.quiz-page .btn{width:100%;min-height:56px}.quiz-top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid;padding-bottom:20px;margin-bottom:30px}.num{font:700 62px/.85 var(--font-latin);letter-spacing:-.085em}.quiz-top .num{font-size:68px}.quiz-top small{font:700 9px/1.6 Arial,sans-serif;letter-spacing:.15em;text-align:right}.welcome-label{font-size:12px;font-weight:700}.welcome-description{margin-bottom:0}.welcome-art{margin:10px -24px 16px}.welcome-art .gif-strip{width:100%;aspect-ratio:5 / 1;overflow:hidden}.welcome-art img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.welcome-info{display:flex;justify-content:space-between;padding:15px 0;border-block:1px solid;margin:4px 0 24px;font-size:12px}.type-list{border-top:4px solid;padding:25px 24px 36px}.type-list h2{font-size:24px;margin:0 0 20px;letter-spacing:-.05em}.type-list a{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:15px 0;font-size:13px}.type-list b{font:700 23px var(--font-latin);margin-right:14px}.q-progress{display:flex;gap:5px;margin:0 0 26px}.q-progress span{height:5px;background:var(--line);flex:1 1 0}.q-progress .done{background:var(--ink)}.quiz-page.question h1{font-size:30px;line-height:1.6;margin-top:0;min-height:96px}.choices{display:grid;gap:12px}.choices button{border:1px solid var(--ink);display:flex;align-items:center;gap:17px;padding:18px 16px;min-height:66px;width:100%;text-align:left;font-size:15px;background:var(--paper);line-height:1.6}.choices button b{border:1px solid;width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;font:700 12px Arial,sans-serif}.choices button:hover,.choices button[aria-pressed=true]{background:var(--ink);color:#fff}.question-foot{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:12px}.question-foot small{font-size:10px;color:var(--gray)}.waiting{text-align:center;justify-content:center;min-height:740px}.waiting h1{font-size:25px}.waiting .eyebrow{margin-bottom:30px}.cat-window{width:140px;height:140px;margin:20px auto 32px;overflow:hidden}.cat-window img{width:140px;height:140px;image-rendering:pixelated}.wait-meter{height:4px;background:var(--line);width:180px;margin:0 auto 30px;overflow:hidden}.wait-meter span{display:block;height:100%;background:var(--ink);transform-origin:left center;animation:waitfill 2.8s linear forwards}@keyframes waitfill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.waiting .plain{align-self:center}.result-title{font-size:36px!important}.type-art{height:190px;background:var(--ink);position:relative;margin:10px 0 24px;overflow:hidden;color:#fff}.type-art:before{content:"";position:absolute;width:144px;height:144px;border-radius:50%;background:#fff;right:24px;top:24px}.type-art:after{content:attr(data-type);position:absolute;left:20px;bottom:13px;font:700 66px var(--font-latin);letter-spacing:-5px}.type-art[data-type=T2]:before{border-radius:0;transform:rotate(45deg);width:115px;height:115px;top:40px}.type-art[data-type=T3]:before{border-radius:0;background:repeating-linear-gradient(0deg,#fff 0 25px,var(--ink) 25px 45px)}.type-art[data-type=T4]:before{border-radius:80px 80px 0 0}.type-art[data-type=T5]:before{background:linear-gradient(135deg,#fff 50%,transparent 50%);border-radius:0}.type-art[data-type=T6]:before{border-radius:0;background:conic-gradient(#fff 0 90deg,var(--ink) 90deg 180deg,#fff 180deg 270deg,var(--ink) 270deg)}.type-art[data-type=T7]:before{height:72px;border-radius:100px 100px 0 0;top:60px}.type-art[data-type=T8]:before{box-shadow:#fff -28px 2px;background:var(--ink);width:115px;height:115px}.result-block{border-top:1px solid;padding:22px 0}.result-block h2{font-size:20px;margin:0 0 10px}.result-block p{margin-bottom:0}.recommended{border:2px solid;padding:22px;margin:15px 0 20px}.recommended h3{font-size:25px;line-height:1.5;margin:16px 0 8px}.recommended .eyebrow{display:block}.recommended .roast{font-size:12px;color:var(--gray);margin-bottom:20px}.recommended .btn{width:100%}.related{padding:16px 0;border-top:1px solid var(--line)}.related h3{font-size:16px;margin:0 0 6px}.related span{font-size:11px;color:var(--gray)}.related a{display:block;font-size:12px;text-decoration:underline;margin-top:8px}.share-actions{display:flex;flex-wrap:wrap;gap:10px}.share-actions>*{display:inline-block;padding:12px;border:1px solid;background:var(--paper);font-size:12px}.status{font-size:12px;margin-top:10px}.share-url{font-size:11px;color:var(--gray);word-break:break-all;margin-top:6px}.result-end{margin-top:30px}.result-end .plain{display:block;margin:18px auto;width:max-content}.friends-video{margin:5px -24px 16px}.friends-video video{width:100%;height:auto;image-rendering:pixelated}.quiz-footer{display:flex;justify-content:space-between;align-items:center;padding:24px;border-top:1px solid}.quiz-footer a{font-size:12px;font-weight:700}.quiz-footer span{font:8px Arial,sans-serif;letter-spacing:.05em}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(min-width:601px){:root{--rail: clamp(140px, calc((100vw - 500px)/2) , 240px)}.column{margin-left:max(var(--rail),calc((100% - 500px)/2));max-width:calc(100% - var(--rail))}aside.rail>*{max-width:100%}aside.rail .brand{overflow-wrap:anywhere}}@media(max-width:600px){aside.rail,.outside{display:none}.column{width:100%;max-width:none;border:0;margin-top:56px}header.mobilebar{display:flex;position:fixed;z-index:5;inset:0 0 auto;height:56px;background:var(--paper);border-bottom:1px solid;align-items:center;justify-content:space-between;padding:0 16px}header.mobilebar .brand{font-size:16px}header.mobilebar button{border:0;background:transparent;font-weight:700;font-size:13px;padding:12px 0 12px 12px}#quiz{min-height:calc(100svh - 56px)}.quiz-page{min-height:calc(100svh - 120px)}.quiz-page h1{font-size:38px}.quiz-page.welcome{padding-top:40px;min-height:650px}.quiz-page.welcome h1{font-size:56px}.quiz-page.question h1{font-size:27px}.waiting{min-height:calc(100svh - 120px)}}@media(prefers-reduced-motion:reduce){.welcome-art img,.cat-window img,.friends-video{visibility:hidden}.wait-meter span{animation-duration:.01s}}