@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600&family=Comic+Neue:wght@400;700&family=DM+Mono:wght@400;500&family=Fredoka:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--paper:#f3efe6;--ink:#22241f;--muted:#79796f;--line:#d6d0c3;--accent:#a9452e;--card:#fbf9f3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% -10%,#fffdf8 0,transparent 52%),var(--paper);color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased}.page{width:min(100% - 48px,940px);margin:0 auto;padding:88px 0 56px}.intro{max-width:680px;margin:0 auto 58px;text-align:center}.eyebrow{display:flex;align-items:center;justify-content:center;gap:15px;margin:0 0 23px;color:var(--accent);font:500 11px 'DM Mono',monospace;letter-spacing:.19em;text-transform:uppercase}.eyebrow:before,.eyebrow:after{content:'';width:30px;height:1px;background:#c5a397}h1{margin:0;font:500 clamp(64px,9vw,104px)/.9 'Bodoni Moda',serif;letter-spacing:-.06em}h1 em{color:var(--accent)}.prompt{max-width:490px;margin:25px auto 0;color:#65645b;font-size:18px;line-height:1.7}.phrase-box{position:relative;margin:-25px 0 42px;padding:29px 36px 34px;background:linear-gradient(125deg,#292b24,#20221d);color:#f4efe5;border:1px solid #4a493f;box-shadow:10px 10px 0 #ded7c9}.phrase-box:before{content:'';position:absolute;top:0;left:36px;width:72px;height:3px;background:#b5674f}.phrase-heading{margin:0 0 17px;color:#d6a28e;font:500 10px 'DM Mono',monospace;letter-spacing:.15em;text-transform:uppercase}.phrase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}.phrase-grid p{margin:0;padding:14px 0;border-top:1px solid #49493f;font:500 23px/1.3 'Bodoni Moda',serif}.phrase-grid p:nth-child(even){color:#e0b7a8}.gallery{display:grid;gap:34px}.object-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);background:var(--card);border:1px solid #e3ded3;min-height:340px;overflow:hidden;box-shadow:0 7px 22px rgba(57,48,33,.045);animation:rise .5s both;transition:border-color .25s,box-shadow .25s}.object-card:nth-child(even){grid-template-columns:minmax(260px,.85fr) minmax(0,1fr)}.object-card:hover{border-color:#c9b9a7;box-shadow:0 14px 34px rgba(57,48,33,.1)}.object-card:nth-child(even) .photo-wrap{order:2}.photo-wrap{position:relative;min-height:340px;overflow:hidden;background:#d1c9b9}.photo-wrap img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.object-card:hover .photo-wrap img{transform:scale(1.035)}.photo-index{position:absolute;top:18px;left:18px;padding:8px 11px;background:rgba(250,248,242,.93);color:#47473f;font:11px 'DM Mono',monospace;letter-spacing:.1em;border:1px solid rgba(255,255,255,.6)}.card-content{padding:34px clamp(24px,4vw,46px);display:flex;flex-direction:column;justify-content:center}.object-name{margin:0 0 24px;font:500 38px/1.08 'Bodoni Moda',serif;letter-spacing:-.025em}.rank-label{margin:0 0 11px;color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:.11em;text-transform:uppercase}.meaning-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}.meaning{display:grid;grid-template-columns:26px 1fr 48px;align-items:center;gap:11px;min-height:48px;padding:7px 10px;border:1px solid var(--line);background:#f7f4ed;cursor:grab;touch-action:pan-y;transition:background .15s,border-color .15s,transform .15s}.meaning:hover{border-color:#c9b9a7;background:#fcfaf5}.other-meaning{border-style:dashed;background:#f3eee4}.meaning:active{cursor:grabbing}.meaning.dragging{opacity:.4}.meaning.over{border-color:var(--accent);background:#f3e9df}.rank{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e9e3d7;color:#625e53;font:10px 'DM Mono',monospace}.meaning:first-child .rank{background:var(--accent);color:#fff8ed}.meaning-text{font-size:16px;line-height:1.35;color:#3d3e37}.other-input{width:100%;min-width:0;padding:5px 0;border:0;border-bottom:1px solid #c8c1b4;background:transparent;color:var(--ink);font:400 15px Manrope,sans-serif;outline:none}.other-input::placeholder{color:#8d887c}.other-input:focus{border-bottom-color:var(--accent)}.grip{color:#999488;font-size:15px;letter-spacing:-3px;transform:rotate(90deg);user-select:none}.meaning:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.move-controls{display:flex;gap:3px}.move-button{width:25px;height:27px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:#79766b;cursor:pointer;font-size:15px;transition:color .15s,background .15s,border-color .15s}.move-button:hover:not(:disabled){background:#eee6da;border-color:#d8cebf}.move-button:hover:not(:disabled){color:var(--accent)}.move-button:disabled{opacity:.22;cursor:default}.end-note{display:flex;align-items:center;justify-content:center;gap:16px;margin:58px 0 0;color:#77746b;font:italic 22px 'Bodoni Moda',serif}.end-note span{height:1px;width:44px;background:var(--line)}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:620px){.page{width:min(100% - 28px,460px);padding-top:54px}.intro{margin-bottom:40px}.prompt{font-size:16px}.phrase-box{margin:-12px 0 27px;padding:20px 19px 22px;box-shadow:5px 5px 0 #ded7c9}.phrase-grid{grid-template-columns:1fr;column-gap:0}.phrase-grid p{font-size:20px;padding:11px 0}.gallery{gap:19px}.object-card,.object-card:nth-child(even){grid-template-columns:1fr}.object-card:nth-child(even) .photo-wrap{order:0}.photo-wrap{min-height:0;aspect-ratio:1.38}.card-content{padding:22px 20px 24px}.object-name{font-size:29px;margin-bottom:16px}.meaning-list{gap:6px}.meaning{min-height:43px}.end-note{margin-top:36px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

:root{--paper:#fff9ed;--ink:#293141;--muted:#5d6876;--line:#b6c5c7;--accent:#d95749;--card:#fffefa}
body{background-color:var(--paper);background-image:radial-gradient(#e6dac4 .8px,transparent .8px);background-size:19px 19px;font-family:'Comic Neue','Manrope',sans-serif}
.page{width:min(100% - 48px,960px)}
.eyebrow,.rank-label,.phrase-heading{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:.12em}
.eyebrow:before,.eyebrow:after{height:2px;border-radius:2px;background:#e5aa68}
h1,.object-name,.phrase-grid p,.end-note{font-family:'Fredoka',sans-serif;font-weight:500;letter-spacing:-.025em}
h1{line-height:.98;letter-spacing:-.04em}
h1 em{color:#d95749;text-shadow:2px 2px 0 #f5d28d}
.prompt{font-family:'Comic Neue',sans-serif;font-weight:700;color:#526072}
.phrase-box{margin:-25px 0 42px;padding:29px 36px 34px;background:#e6f5f1;color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 #efbd72}
.phrase-box:before{left:36px;width:72px;height:5px;border-radius:0 0 5px 5px;background:#e99b64}
.phrase-heading{display:table;padding:7px 12px;margin:0 0 17px;background:#ffe59b;border:2px solid var(--ink);border-radius:999px;color:var(--ink);font-size:11px}
.phrase-grid p{padding:14px 8px;border-top:2px dashed #abc9c5;font-size:22px;line-height:1.25;color:#33404e}
.phrase-grid p:nth-child(even){color:#b7463f}
.gallery{gap:34px}
.object-card,.object-card:nth-child(even){border:3px solid var(--ink);border-radius:16px;background:var(--card);box-shadow:7px 7px 0 #a9d9d1;transition:transform .2s ease,border-color .2s,box-shadow .2s}
.object-card:nth-child(even){box-shadow:7px 7px 0 #f0bd76}
.object-card:hover{transform:translate(-2px,-2px);border-color:var(--ink);box-shadow:10px 10px 0 #a9d9d1}
.object-card:nth-child(even):hover{box-shadow:10px 10px 0 #f0bd76}
.photo-wrap{background:#d7e6e3}
.photo-wrap img{filter:saturate(1.04) contrast(1.02)}
.photo-index{top:18px;left:18px;padding:7px 11px;background:#ffe59b;color:var(--ink);font:600 12px 'Fredoka',sans-serif;letter-spacing:.08em;border:2px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);transform:rotate(-3deg)}
.card-content{padding:34px clamp(24px,4vw,46px)}
.object-name{font-size:37px;line-height:1.08}
.rank-label{color:#647381;font-size:11px}
.meaning{min-height:49px;border:2px solid #d6dfdc;border-radius:9px;background:#fffdf7;grid-template-columns:27px 1fr 52px;transition:transform .16s,background .16s,border-color .16s}
.meaning:hover{transform:translateX(2px);border-color:#98c9bf;background:#f1faf7}
.meaning.over{border-color:var(--accent);background:#fff0e3}
.other-meaning{border-style:dashed;background:#fff6da}
.rank{width:25px;height:25px;background:#dcefeb;border:1px solid #9bbdb7;color:var(--ink);font:600 11px 'Fredoka',sans-serif}
.meaning:first-child .rank{background:#f18c72;border-color:var(--ink);color:#fff}
.meaning-text{font-family:'Comic Neue',sans-serif;font-size:17px;font-weight:700;color:#354050}
.other-input{font-family:'Comic Neue',sans-serif;font-size:16px;font-weight:700}
.other-input::placeholder{color:#798080}
.grip{color:#879c9a}
.move-button{border:1px solid transparent;border-radius:7px;font-weight:700;color:#465b63}
.move-button:hover:not(:disabled){background:#ffe59b;border-color:var(--ink);color:var(--ink)}
.end-note{color:#647381;font-size:23px}
.end-note span{height:2px;background:#d5af83;border-radius:2px}
@media(max-width:620px){.page{width:min(100% - 28px,460px)}.phrase-box{margin:-12px 0 27px;padding:20px 19px 22px;border-width:2px;box-shadow:5px 5px 0 #efbd72}.phrase-box:before{left:19px}.phrase-grid p{font-size:21px}.object-card,.object-card:nth-child(even){border-width:2px;border-radius:13px;box-shadow:5px 5px 0 #a9d9d1}.object-card:nth-child(even){box-shadow:5px 5px 0 #f0bd76}.object-card:hover{transform:none}.object-name{font-size:31px}}