:root{--gold:#f4c300;--ink:#111;--paper:#fbf8fc;--card:#fff;--muted:#666;--line:#ddd}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55}.page{max-width:900px;margin:0 auto;padding:28px 20px 50px}.hero{display:flex;align-items:center;gap:28px;padding:26px 0 34px;border-bottom:1px solid var(--line)}.app-icon{width:145px;height:145px;object-fit:contain;background:#000;border-radius:22px}.hero h1{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 6px}.lead{font-size:1.15rem;color:#444;margin:0 0 16px}.button{display:inline-block;background:var(--gold);color:#111;text-decoration:none;font-weight:700;padding:11px 18px;border-radius:999px}.small{font-size:.85rem;color:var(--muted);margin:8px 0 0}section{padding:32px 0;border-bottom:1px solid var(--line)}h2{font-size:2rem;margin:0 0 10px}h3{font-size:1.25rem;margin:28px 0 12px}.screenshot{display:block;width:min(100%,430px);margin:22px auto;border-radius:18px;box-shadow:0 4px 16px rgba(0,0,0,.12)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid>div,.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}.grid b{display:block;margin-bottom:4px}.grid span{display:block;color:#444}.states{display:grid;gap:10px}.states>div{display:flex;align-items:flex-start;gap:10px}.swatch{width:18px;height:18px;border-radius:50%;border:1px solid #999;flex:0 0 18px;margin-top:4px}.gray{background:#aaa}.gold{background:var(--gold)}.black{background:#111;border-color:#111}.note{background:#fff8d8;border-left:4px solid var(--gold);padding:12px 14px;border-radius:8px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card h3{margin-top:0}.card a{color:#222;font-weight:700}footer{padding-top:24px;color:var(--muted);font-size:.9rem;text-align:center}@media(max-width:680px){.hero{flex-direction:column;align-items:flex-start}.app-icon{width:110px;height:110px}.grid,.two-col{grid-template-columns:1fr}.page{padding-left:16px;padding-right:16px}}

.skill-list{display:grid;gap:8px;margin-top:18px}
.skill-row{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.center-icon{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid #222;display:flex;align-items:center;justify-content:center;overflow:hidden}
.center-icon img{width:58px;height:58px;object-fit:contain}
.text-icon{font-size:1.35rem;font-weight:700;white-space:nowrap}
.skill-name{font-weight:700}
.skill-row a{color:#222;font-weight:700;white-space:nowrap}
@media(max-width:560px){.skill-row{grid-template-columns:62px 1fr}.center-icon{width:54px;height:54px}.center-icon img{width:49px;height:49px}.skill-row a{grid-column:2}}

.wheel-guide{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(280px,.95fr);gap:28px;align-items:start;margin-top:24px}
.wheel-image-wrap{display:flex;justify-content:flex-start}
.wheel-image{display:block;width:min(100%,470px);height:auto;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.wheel-descriptions{display:grid;gap:12px}
.wheel-descriptions>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.wheel-descriptions b{display:block;margin-bottom:3px}
.wheel-descriptions span{display:block;color:#444}
@media(max-width:760px){.wheel-guide{grid-template-columns:1fr}.wheel-image{width:min(100%,520px)} }
.meaning-icon{display:inline-block;width:42px;height:30px;object-fit:contain;vertical-align:middle;margin-right:2px}
.hymn-icon{width:54px}
.boot-icon{width:34px;height:34px}
.wheel-image{width:min(100%,464px);background:transparent}
.wheel-guide{grid-template-columns:minmax(320px,464px) minmax(300px,1fr);gap:28px}
.wheel-image{width:100%;max-width:464px;height:auto;display:block}
.wheel-descriptions{align-self:start}
.meaning-icon{background:#fff;border-radius:4px;padding:1px;object-fit:contain}