:root{--green: #3AC22F;--deep: #0F5A1C;--mint: #D9F5D3;--white: #FFFFFF;--ink: #0E2410;--moss: #3F5A41;--magenta: #B3155F;--font: "M PLUS Rounded 1c","Arial Rounded MT Bold","Hiragino Maru Gothic ProN",system-ui,sans-serif;}*{box-sizing: border-box;margin: 0;padding: 0;}html{-webkit-text-size-adjust: 100%;}body{font-family: var(--font);font-weight: 500;color: var(--ink);background: var(--green);min-height: 100dvh;overflow-x: hidden;-webkit-font-smoothing: antialiased;}.app{position: relative;display: flex;flex-direction: column;min-height: 100dvh;width: 100%;max-width: 520px;margin: 0 auto;background: var(--green);overflow: hidden;}.bar{display: flex;align-items: center;gap: 12px;padding: calc(12px + env(safe-area-inset-top)) 20px 8px;}.bar img{width: 56px;height: 56px;border-radius: 16px;background: var(--white);box-shadow: 0 1px 2px rgba(14,36,16,0.18),0 4px 10px rgba(14,36,16,0.14);}.bar span{font-weight: 800;font-size: clamp(1.05rem,0.95rem + 0.5vw,1.25rem);letter-spacing: 0.01em;}.head{padding: 6px 24px 0;}h1{font-weight: 800;font-size: clamp(1.6rem,1.15rem + 2.2vw,2.05rem);line-height: 1.14;letter-spacing: -0.01em;text-wrap: balance;}.sub{margin-top: 10px;font-size: clamp(0.92rem,0.86rem + 0.3vw,1rem);line-height: 1.45;max-width: 34em;}.stage{flex: 1 1 auto;min-height: 236px;display: flex;align-items: center;justify-content: center;padding: 14px 24px 18px;perspective: 900px;}.card{position: relative;width: 100%;max-width: 360px;border-radius: 28px;background: var(--white);padding: 18px 18px 16px;box-shadow: 0 1px 2px rgba(14,36,16,0.2),0 6px 14px rgba(14,36,16,0.16),0 18px 34px rgba(14,36,16,0.14);touch-action: none;user-select: none;-webkit-user-select: none;-webkit-tap-highlight-color: transparent;overscroll-behavior: contain;cursor: grab;will-change: transform;outline: none;}.card.is-held{cursor: grabbing;}.card:focus-visible{box-shadow: 0 0 0 4px var(--ink),0 18px 34px rgba(14,36,16,0.14);}.card.is-swap{animation: swap 0.2s both;}@keyframes swap{from{opacity: 0.55;}to{opacity: 1;}}.grab{display: block;width: 36px;height: 4px;border-radius: 2px;background: var(--mint);margin: 0 auto 12px;}.label{font-size: clamp(0.72rem,0.7rem + 0.1vw,0.78rem);color: var(--moss);letter-spacing: 0.04em;text-transform: uppercase;font-weight: 800;}.read{display: flex;gap: 14px;margin-top: 8px;list-style: none;}.read li{min-width: 0;flex: 1 1 0;}.read small{display: block;font-size: clamp(0.7rem,0.68rem + 0.1vw,0.75rem);color: var(--moss);}.read span{display: block;font-weight: 800;font-size: clamp(0.88rem,0.84rem + 0.2vw,0.98rem);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.tray{position: relative;margin-top: 14px;height: 92px;border-radius: 20px;background: var(--mint);overflow: hidden;display: flex;align-items: center;justify-content: center;}.slot{position: absolute;width: 172px;height: 60px;border-radius: 18px;border: 2px solid var(--deep);opacity: 0.28;}.file{position: relative;width: 172px;height: 60px;border-radius: 18px;background: var(--deep);color: var(--white);display: flex;align-items: center;gap: 10px;padding: 0 14px;box-shadow: 0 1px 2px rgba(14,36,16,0.3),0 5px 10px rgba(14,36,16,0.24);will-change: transform;}.file i{flex: none;width: 30px;height: 30px;border-radius: 10px;background: var(--green);position: relative;}.file i::after{content: "";position: absolute;left: 9px;top: 7px;width: 12px;height: 12px;border-right: 3px solid var(--ink);border-bottom: 3px solid var(--ink);transform: rotate(45deg) scale(0.8);border-radius: 1px;}.file span{font-weight: 800;font-size: clamp(0.95rem,0.92rem + 0.15vw,1.02rem);line-height: 1.1;}.file em{display: block;font-style: normal;font-weight: 500;font-size: clamp(0.74rem,0.72rem + 0.1vw,0.8rem);color: var(--mint);}.state{position: relative;margin-top: 12px;height: 22px;font-size: clamp(0.84rem,0.8rem + 0.2vw,0.92rem);}.state span{position: absolute;inset: 0;display: flex;align-items: center;gap: 8px;transition: opacity 0.12s;}.state .fit{font-weight: 800;color: var(--deep);}.state .fit::before{content: "";flex: none;width: 10px;height: 10px;border-radius: 50%;background: var(--green);box-shadow: 0 0 0 3px var(--mint);margin-left: 3px;}.state .loose{color: var(--moss);opacity: 0;}.card.is-loose .fit{opacity: 0;}.card.is-loose .loose{opacity: 1;}.action{background: var(--white);border-radius: 28px 28px 0 0;padding: 16px 20px calc(12px + env(safe-area-inset-bottom));box-shadow: 0 -1px 2px rgba(14,36,16,0.12),0 -8px 22px rgba(14,36,16,0.12);}.cta{display: flex;align-items: center;justify-content: center;min-height: 56px;width: 100%;border-radius: 28px;background: var(--magenta);color: var(--white);font-family: var(--font);font-weight: 800;font-size: clamp(1.05rem,1rem + 0.3vw,1.15rem);text-decoration: none;letter-spacing: 0.01em;box-shadow: 0 1px 2px rgba(14,36,16,0.3),0 4px 10px rgba(179,21,95,0.3);transition: transform 0.09s;-webkit-tap-highlight-color: transparent;}.cta:active{transform: scale(0.97);}.cta:focus-visible{outline: 3px solid var(--ink);outline-offset: 3px;}@media (hover: hover){.cta:hover{transform: scale(1.015);}.cta:hover:active{transform: scale(0.97);}}.after{margin-top: 10px;text-align: center;font-size: clamp(0.8rem,0.77rem + 0.15vw,0.88rem);line-height: 1.4;color: var(--moss);}footer{margin-top: 10px;text-align: center;font-size: clamp(0.7rem,0.68rem + 0.1vw,0.76rem);line-height: 1.4;color: var(--moss);}@media (max-height: 700px){.bar img{width: 48px;height: 48px;border-radius: 14px;}.sub{margin-top: 6px;}.stage{padding-top: 10px;padding-bottom: 12px;}}@media (min-width: 760px){body{background: var(--mint);display: flex;align-items: center;justify-content: center;padding: 24px;}.app{max-width: 430px;min-height: 0;height: min(780px,100dvh - 48px);border-radius: 32px;box-shadow: 0 2px 4px rgba(14,36,16,0.14),0 14px 30px rgba(14,36,16,0.16),0 40px 80px rgba(14,36,16,0.14);}.bar img{width: 72px;height: 72px;border-radius: 20px;}.action{border-radius: 28px 28px 32px 32px;}}@media (prefers-reduced-motion: reduce){.cta{transition: none;}.state span{transition: none;}}html,body{max-width:100%;overflow-x:clip}