/* Two complete compositions, fitted without cropping the cats. */
#app[data-view="title"],.title-screen{background-color:#ff7924;background-image:var(--felt-noise)}
.title-art-plane{width:min(100vw,177.6833dvh);aspect-ratio:1672/941;container-type:inline-size}
.title-artwork,.title-artwork>img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.title-artwork>img{object-fit:contain}
.title-brand{left:38%;top:20%;width:24%;height:22%;margin:0;padding:0;line-height:1;text-shadow:none}
.title-brand>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.title-start-hit,.has-save .title-start-hit,.title-demo{
 font-family:inherit;font-weight:700;letter-spacing:.08em;line-height:1.4;
 border:1px solid #e5cda6;border-radius:16px;background-color:#f6e4c4;
 background-image:var(--felt-noise);color:#30241e;text-shadow:none;
 box-shadow:0 3px 0 #7e4829;outline:1px dashed #b88d5e;outline-offset:-5px;
 cursor:pointer;transition:translate .16s ease,box-shadow .16s ease,filter .16s ease;
 -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.title-start-hit,.has-save .title-start-hit{
 left:40.5%;top:43.5%;width:19%;height:7.8%;min-height:44px;
 padding:5px 12px;font-size:clamp(18px,1.9cqw,30px);
}
.title-save-note{left:34%;top:52.2%;width:32%;font-size:14px;line-height:1.5;color:#fff4dc;text-shadow:none}
.title-demo-area{position:absolute;left:50%;top:86%;width:max-content;max-width:90%;transform:translateX(-50%);text-align:center}
.title-demo{position:static;display:block;transform:none;bottom:auto;left:auto;top:auto;width:170px;min-height:44px;height:auto;margin:0 auto;padding:9px 18px;font-size:16px;background-color:#ebc395;box-shadow:0 2px 0 #9b522d;outline-color:#b47b4a}
.title-demo:before{content:none}
.title-demo-area>small{display:block;margin-top:8px;color:#482719;font-size:14px;line-height:1.5;font-weight:600;white-space:nowrap}
@media(hover:hover){
 .title-start-hit:hover,.title-demo:hover{background-color:#ffedcd;translate:0 -2px;box-shadow:0 5px 0 #7e4829;filter:brightness(1.03)}
}
.title-start-hit:active,.title-demo:active{translate:0 2px;box-shadow:0 1px 0 #7e4829;filter:none}
.title-start-hit:focus-visible,.title-demo:focus-visible{outline:3px dashed #fff7e3;outline-offset:5px}
@media(orientation:portrait){
 .title-art-plane{width:min(100vw,56.2799dvh);aspect-ratio:941/1672}
 .title-brand{left:24%;top:18%;width:52%;height:18%}
 .title-start-hit,.has-save .title-start-hit{left:25%;top:37.5%;width:50%;height:7.2%;min-height:44px;font-size:clamp(20px,5.5cqw,30px);border-radius:16px}
 .title-save-note{left:15%;top:46%;width:70%;font-size:14px}
 .title-demo-area{top:86.5%;width:80%}
 .title-demo{width:130px;font-size:16px;min-height:44px;padding:9px 16px}
 .title-demo-area>small{margin-top:8px;font-size:14px}
}
@media(max-height:520px) and (orientation:landscape){
 .title-brand{top:18%;height:24%}
 .title-start-hit,.has-save .title-start-hit{left:38%;top:42%;width:24%;height:11%;font-size:16px;min-height:40px}
 .title-save-note{top:54%;font-size:14px;color:#30241e}
 .title-demo-area{top:84%;display:flex;align-items:center;justify-content:center;gap:12px;max-width:92%;width:350px}
 .title-demo{width:136px;min-height:40px;padding:7px 12px;font-size:14px;flex:none}
 .title-demo-area>small{white-space:normal;margin:0;font-size:14px;text-align:left;max-width:12ch}
}
@media(prefers-reduced-motion:reduce){.title-start-hit,.title-demo{transition:none}}