@font-face{font-family:Kaisei;src:url('assets/KaiseiTokumin-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
*{box-sizing:border-box}html{background:#e6d5b4;color:#26271d}body{margin:0;font-family:Arial,Helvetica,sans-serif}.room{position:fixed;inset:0;z-index:-1;background:#e6d5b4 url('assets/dojo.png') center/cover no-repeat;pointer-events:none}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #a13725;outline-offset:5px}main{min-height:100svh;max-width:2000px;margin:auto;padding:110px 9% 110px 14%;display:grid;grid-template-columns:34% 66%;align-items:center;gap:0}.intro{padding:0 28px 0 0;position:relative;z-index:2}.ticker{display:flex;align-items:center;gap:18px;color:#8e3023;font-size:13px;font-weight:700;letter-spacing:.16em;margin:0 0 23px}.ticker span{font-family:Kaisei,serif;font-size:19px;letter-spacing:.06em;border:1px solid #9c392c;padding:6px 4px;line-height:1}h1{font-family:Kaisei,Georgia,serif;font-size:clamp(48px,4.9vw,89px);font-weight:700;letter-spacing:-.05em;line-height:1.16;margin:0}h1 span{color:#963625}.tagline{font-family:Georgia,serif;font-style:italic;font-size:clamp(18px,1.55vw,24px);line-height:1.4;margin:26px 0 21px}.story{font-size:14px;color:#535345;line-height:1.75;margin:0 0 26px}.contract{display:flex;align-items:center;gap:10px;min-height:48px;border-top:1px solid #524b3c55;border-bottom:1px solid #524b3c55;max-width:385px;background:#f8f1e23d}.contract label{font-size:12px;color:#8e3023;font-weight:700;padding-left:8px}.contract input{background:none;border:0;color:#26271d;min-width:0;width:100%;font-family:monospace;font-size:12px;cursor:copy}.contract input::placeholder{color:#797869;opacity:1}.contract button{border:0;background:none;font-size:11px;font-weight:700;cursor:pointer;padding:13px 8px}.contract button:disabled{opacity:.4;cursor:default}.links{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;max-width:385px;margin-top:17px}.links a{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:.025em;min-height:38px;transition:color .2s;cursor:pointer;white-space:nowrap}.links a:hover{color:#a13725}.links img{height:20px;width:20px;object-fit:contain}.links .dex{filter:invert(1)}.links [aria-disabled=true]{cursor:default;opacity:.63}.lesson{min-width:0;position:relative;align-self:center;padding-left:24px;text-align:center}.dialogue{max-width:550px;width:90%;margin:0 auto 12px;text-align:left;padding:19px 24px 22px;background:#fffaf0c9;border:1px solid #e1d5bd;box-shadow:0 4px 20px #4b351613;min-height:155px}.dialogue-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.speaker{font-size:10px;letter-spacing:.12em;font-weight:700;color:#8e3023}#sound{background:none;border:0;padding:5px 0 5px 8px;display:flex;align-items:center;gap:6px;color:#6c6a58;font-size:9px;letter-spacing:.025em;font-weight:700;cursor:pointer;white-space:nowrap}#sound svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}#phrase{font-family:Georgia,serif;font-size:clamp(19px,1.8vw,28px);line-height:1.35;margin:14px 0 0;max-width:720px}.fish{display:block;border:0;padding:0;background:none;width:100%;aspect-ratio:1.4;position:relative;cursor:pointer;filter:drop-shadow(0 14px 11px #3a251a38)}.fish img{position:absolute;left:0;top:-16.6%;width:100%;height:auto;pointer-events:none;user-select:none}.fish .open{opacity:0;transition:opacity 95ms linear;mask-image:radial-gradient(ellipse 24% 24% at 35% 47%,#000 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 24% 24% at 35% 47%,#000 65%,transparent 100%)}.fish.mouth-open .open{opacity:1}.fish:focus-visible{outline-offset:4px}.fish:disabled{cursor:wait}.ask{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;margin:16px auto 0;padding:12px 18px;background:#9a3727;border:1px solid #8e3023;color:#fff3db;font-size:11px;letter-spacing:.08em;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}.ask:hover{background:#7e2a1e}.ask:active{transform:translateY(2px)}.ask span:first-child{font-family:Kaisei,serif;font-size:15px}.ask span:last-child{font-size:20px;line-height:16px}#notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#282a20;color:#f8f1e3;padding:12px 20px;font-size:14px;opacity:0;pointer-events:none;z-index:5}#notice.visible{opacity:1}
@media(min-width:1700px){main{padding-top:140px;padding-bottom:140px}.dialogue{margin-bottom:20px}}
@media(max-width:1100px) and (min-width:761px){main{padding-left:10%;padding-right:7%;grid-template-columns:35% 65%}.intro{padding-right:18px}.lesson{padding-left:10px}.links{column-gap:6px}.links a{font-size:9px;gap:5px}.dialogue{width:100%;padding:17px}h1{font-size:5.3vw}}
@media(max-width:760px){.room{background-position:56% center}main{min-height:100svh;padding:70px 23px 48px;display:flex;flex-direction:column;gap:34px}.intro{width:100%;padding:0;display:contents}.ticker{order:0;margin:0;font-size:11px;gap:14px;align-self:center}.ticker span{font-size:16px}h1{order:1;font-size:clamp(44px,11vw,72px);line-height:1.1;text-align:center;margin-top:-15px}h1 br{display:none}h1 span{margin-left:.17em}.tagline{order:2;text-align:center;font-size:20px;margin:-18px 0 -6px}.story{order:5;text-align:center;margin:0;font-size:14px}.story br{display:none}.story br::after{content:' '}.lesson{order:3;padding:0;width:100%;max-width:570px}.dialogue{width:100%;padding:16px 18px 19px;min-height:139px;margin:0 auto 13px}#phrase{font-size:22px}.speaker{font-size:9px}.fish{aspect-ratio:1.4}.ask{margin-top:18px}.contract{order:4;width:100%;max-width:430px;margin:0}.links{order:6;width:100%;max-width:430px;grid-template-columns:repeat(3,1fr);gap:9px 12px;margin:-17px 0 0}.links a{font-size:9px;gap:6px;justify-content:center}.links img{width:18px;height:18px}.links a:first-child{grid-column:span 2;justify-content:flex-end;padding-right:14px}.links a:nth-child(2){grid-column:span 1;justify-content:flex-start}.links a:first-child span{max-width:none}#notice{width:max-content;max-width:90%;text-align:center;line-height:1.4}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media(min-width:761px){main{padding-top:95px;padding-bottom:70px}.lesson{max-width:660px;width:100%;margin-left:auto}}