:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#25213b;--muted:#6d6980;--line:#ebe7f2;--purple:#6444bd;--deep-purple:#45288d;--pale-purple:#f1eafd;--paper:#fff;--bg:#f8f7fc;--radius:22px}*{box-sizing:border-box}body{min-width:300px;color:var(--ink);background:var(--bg);word-break:keep-all;-webkit-font-smoothing:antialiased;margin:0;font-family:Pretendard,Noto Sans KR,Malgun Gothic,Apple SD Gothic Neo,Inter,sans-serif;font-size:15px;line-height:1.55}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}h1,h2,p{margin:0}:is(button:focus-visible,a:focus-visible,input:focus-visible){outline-offset:3px;outline:3px solid #8066cc}[tabindex="-1"]:focus{outline:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.site-header{border-bottom:1px solid var(--line);background:#fff}.header-inner{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:1216px;min-height:72px;margin:auto;padding:0 28px;display:grid}.brand{color:var(--ink);letter-spacing:-.055em;background:0 0;border:0;justify-self:start;align-items:center;gap:10px;padding:0;font-size:22px;font-weight:850;display:inline-flex}.brand-mark{color:#fff;background:linear-gradient(145deg,#7f61da,#5a39b2);border-radius:12px;flex:none;place-items:center;width:37px;height:37px;display:inline-grid;box-shadow:0 2px 6px #6040b32b}.brand-mark svg{transform:rotate(-32deg)}.brand-mark-small{border-radius:8px;width:25px;height:25px}nav{background:#f5f3f9;border-radius:12px;align-items:center;gap:5px;padding:4px;display:flex}nav button,.share-button{color:#625d74;white-space:nowrap;border-radius:9px;justify-content:center;align-items:center;gap:7px;font-size:13px;font-weight:750;display:inline-flex}nav button{background:0 0;border:0;padding:8px 15px}nav button:hover,.share-button:hover{color:var(--deep-purple)}nav button.nav-active{color:var(--deep-purple);background:#fff;box-shadow:0 1px 4px #31214516}.share-button{border:1px solid var(--line);background:#fff;justify-self:end;padding:8px 11px}.main-wrap{width:min(100%,1216px);margin:auto;padding:40px 28px 0}.main-grid{grid-template-columns:minmax(0,1fr) 352px;align-items:start;gap:24px;display:grid}.main-column{gap:18px;min-width:0;display:grid}.side-column{min-width:0}.hero{isolation:isolate;background:radial-gradient(at 78% 8%,#f6efff 2%,#0000 54%),linear-gradient(110deg,#f6eeff 0%,#eee2fc 66%,#e9ddf7 100%);border:1px solid #e8dafa;border-radius:27px;align-items:center;min-height:314px;padding:37px 36px;display:flex;position:relative;overflow:hidden}.hero-copy{z-index:2;position:relative}.eyebrow{color:var(--deep-purple);align-items:center;gap:7px;font-size:13px;font-weight:800;display:inline-flex}.hero .eyebrow{background:#fff9;border:1px solid #fff;border-radius:99px;padding:5px 10px}.hero h1{letter-spacing:-.085em;color:#2e2250;margin:13px 0 14px;font-size:clamp(40px,5vw,64px);font-weight:900;line-height:1.12}.hero h1 em{color:var(--purple);font-style:normal}.hero p{color:#514467;font-size:16px;font-weight:650}.hero-meta{flex-wrap:wrap;gap:9px;margin-top:20px;display:flex}.hero-meta span{color:#5b4b75;background:#fff8;border-radius:7px;align-items:center;gap:6px;padding:5px 9px;font-size:12px;font-weight:750;display:inline-flex}.illustration{pointer-events:none;color:#885ad7;width:302px;height:258px;position:absolute;top:50%;right:7px;transform:translateY(-50%)}.orbit{border:1px solid #fff9;border-radius:50%;width:265px;height:197px;position:absolute;top:32px;left:19px;transform:rotate(-29deg)}.orbit-two{border-color:#fff7;width:295px;height:222px;top:15px;left:5px}.sample{border:1px solid #fff;border-radius:17px;align-content:center;justify-items:center;width:125px;height:91px;line-height:1.2;display:grid;position:absolute;box-shadow:0 13px 24px #6243a426}.sample>span{font-size:11px;font-weight:850}.sample strong{letter-spacing:-.055em;margin-top:7px;font-size:29px}.sample-south{color:#5e399e;background:#fcf8ff;top:38px;left:26px;transform:rotate(-13deg)}.sample-north{color:#216b65;background:#ecfbf4;border-color:#fcfffd;top:132px;right:29px;transform:rotate(11deg)}.sample i{background:#fff;border:2px solid;border-radius:50%;width:11px;height:11px;display:block;position:absolute}.sample-south i{bottom:12px;right:12px}.sample-north i{top:10px;left:10px}.sample-connection{color:#fff;z-index:1;background:#734fc3;border-radius:50%;place-items:center;width:47px;height:47px;display:grid;position:absolute;top:103px;left:125px;transform:rotate(35deg);box-shadow:0 4px 12px #5b32a644}.spark{color:#8d60d0;font-size:20px;font-weight:700;line-height:1;position:absolute}.spark-one{top:31px;right:50px}.spark-two{font-size:26px;bottom:28px;left:41px}.spark-three{font-size:14px;top:96px;right:17px}.entry-card,.help-card,.ranking-card,.play-card,.result-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 16px #3d266607}.entry-card{padding:23px 26px 25px}.entry-head{align-items:center;gap:12px;margin-bottom:16px;display:flex}.entry-head h2,.rank-header h2{letter-spacing:-.045em;overflow-wrap:anywhere;font-size:20px;font-weight:850;line-height:1.25}.entry-head p,.rank-header p{color:var(--muted);margin-top:5px;font-size:13px}.entry-icon,.rank-icon{background:var(--pale-purple);width:43px;height:43px;color:var(--purple);border-radius:13px;flex:none;place-items:center;display:grid}.entry-form{gap:9px;display:flex}.entry-form input{min-width:0;color:var(--ink);background:#fbfaff;border:1px solid #e0dbe9;border-radius:12px;flex:1;min-height:49px;padding:12px 14px}.entry-form input::placeholder{color:#787287}.primary-button,.secondary-button{white-space:nowrap;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:49px;padding:10px 17px;font-weight:800;display:inline-flex}.primary-button{color:#fff;background:var(--purple);box-shadow:0 3px 7px #5d3ca626}.primary-button:hover:enabled{background:#5535ab}.secondary-button{color:var(--deep-purple);background:#f8f5fe;border-color:#ebe2fb}.secondary-button:hover:enabled{background:#efe7fc}.primary-button:disabled,.secondary-button:disabled{opacity:.65}.entry-form>.secondary-button{flex:1}.error-text{color:#a32443;margin-top:8px;font-size:13px;font-weight:700}.help-card{border-radius:16px;overflow:hidden}.help-button{color:#554468;text-align:left;background:0 0;border:0;align-items:center;gap:9px;width:100%;padding:13px 16px;font-weight:780;display:flex}.help-button:hover{background:#faf7ff}.help-button:focus-visible{outline-offset:-4px}.help-button span{flex:1}.chevron.open{transform:rotate(180deg)}.help-card ol{color:var(--muted);margin:0 16px 14px 0;padding-left:40px;font-size:13px}.help-card li+li{margin-top:5px}.rank-header{border-bottom:1px solid var(--line);align-items:center;gap:11px;padding:21px 20px 18px;display:flex}.rank-header>div{flex:1}.rank-icon{color:#9a6120;background:#fff0d9}.icon-button{color:#6b617c;background:#f6f3fa;border:0;border-radius:9px;place-items:center;width:33px;height:33px;display:inline-grid}.icon-button:hover{color:var(--deep-purple);background:var(--pale-purple)}.rank-body{padding:16px 18px 10px}.rank-labels,.rank-list li{grid-template-columns:37px minmax(0,1fr) 73px;align-items:center;gap:8px;display:grid}.rank-labels{color:#6e657e;background:#f6f3fa;border-radius:8px;padding:8px 9px;font-size:11px;font-weight:800}.rank-labels span:last-child{text-align:right}.ranking-empty{text-align:center;min-height:162px;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:15px 6px;font-size:13px;display:flex}.ranking-empty strong{color:#504563;font-size:14px}.empty-icon{color:#76648d;background:#f5f0fb;border-radius:13px;place-items:center;width:43px;height:43px;margin-bottom:7px;display:grid}.rank-list{margin:6px 0 0;padding:0;list-style:none}.rank-list li{border-bottom:1px solid #f3eef7;min-height:45px;padding:8px 9px;font-size:13px}.rank-list li:last-child{border-bottom:0}.place{color:#71687e;align-items:center;font-weight:800;display:flex}.place-1 .place{color:#ae6d0e}.place-2 .place{color:#64788b}.place-3 .place{color:#a96042}.rank-name{overflow-wrap:anywhere;font-weight:750}.rank-time,.timer,.result-time,.result-stats strong{font-variant-numeric:tabular-nums}.rank-time{color:var(--deep-purple);text-align:right;white-space:nowrap;font-weight:850}.rank-footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;gap:10px;padding:13px 20px;font-size:11px;font-weight:700;display:flex}.status-dot{vertical-align:1px;background:#438b70;border-radius:50%;width:7px;height:7px;margin-right:4px;display:inline-block}.site-footer{border-top:1px solid var(--line);color:#726980;justify-content:space-between;align-items:center;gap:10px;margin-top:32px;padding:16px 0 24px;font-size:12px;display:flex}.site-footer div{align-items:center;gap:8px;display:flex}.site-footer>div:first-child{color:#514665;font-weight:850}.source-links a{text-underline-offset:3px}.share-note{color:var(--muted);padding:0 0 10px;font-size:13px}.mobile-rank-link{display:none!important}.text-button{color:var(--deep-purple);background:0 0;border:0;justify-content:center;align-items:center;gap:6px;padding:6px 0;font-size:13px;font-weight:750;display:inline-flex}.text-button:hover{text-underline-offset:3px;text-decoration:underline}.play-card{padding:24px}.play-header{justify-content:space-between;align-items:center;gap:13px;display:flex}.play-header h1,.result-card h1,.ranking-title h1{letter-spacing:-.07em;margin-top:4px;font-size:clamp(25px,4vw,37px);font-weight:900;line-height:1.24}.play-header .eyebrow{overflow-wrap:anywhere}.timer{color:var(--deep-purple);white-space:nowrap;background:#f3ecfd;border-radius:11px;align-items:center;gap:6px;padding:8px 10px;font-size:17px;font-weight:850;display:flex}.progress-info{color:var(--muted);justify-content:space-between;margin-top:17px;font-size:13px;font-weight:730;display:flex}.progress-info strong{color:var(--deep-purple)}progress{width:100%;height:7px;accent-color:var(--purple);background:#eee8f8;border:0;border-radius:20px;margin:5px 0 16px;display:block;overflow:hidden}progress::-webkit-progress-bar{background:#eee8f8}progress::-webkit-progress-value{background:#7954c5;border-radius:20px}progress::-moz-progress-bar{background:#7954c5}.column-head,.board{grid-template-columns:minmax(0,1fr) clamp(21px,8vw,105px) minmax(0,1fr);display:grid}.column-head{color:#614c83;text-align:center;padding:0 0 7px;font-size:13px;font-weight:850}.column-head span:last-child{color:#346b62;grid-column:3}.column-head i{background:#896ad2;border-radius:50%;width:8px;height:8px;margin-right:3px;display:inline-block}.column-head span:last-child i{background:#4f9585}.board{position:relative}.word-column{z-index:1;gap:6px;display:grid;position:relative}.word-tile{color:#3f3162;background:#faf6ff;border:1px solid #e7dcfa;border-radius:9px;place-items:center;width:100%;min-height:41px;padding:5px 16px;font-size:16px;font-weight:820;display:grid;position:relative}.north .word-tile{color:#26574d;background:#f3fbf8;border-color:#d9efe8}.word-tile:hover:enabled,.word-tile.selected{border-color:#8055d1;box-shadow:inset 0 0 0 1px #8055d1}.north .word-tile:hover:enabled,.north .word-tile.selected{border-color:#449583;box-shadow:inset 0 0 0 1px #449583}.word-tile.selected{background:#eee3ff}.north .word-tile.selected{background:#dff5ec}.word-tile.matched{color:#625a6d;background:#faf9fc;border-color:#ebe7f0}.word-tile.incorrect{background:#fff0f4;border-color:#c75270;box-shadow:inset 0 0 0 1px #c75270}.port{background:#fff;border:2px solid #c0a7e9;border-radius:50%;place-items:center;width:10px;height:10px;display:grid;position:absolute;right:-5px}.north .port{border-color:#88baa9;left:-5px;right:auto}.word-tile.matched .port{color:#fff;background:var(--pair-color);border-color:var(--pair-color);width:14px;height:14px;right:-7px}.north .word-tile.matched .port{left:-7px;right:auto}.wires{pointer-events:none;grid-column:2;width:100%;position:relative}.wires>svg{position:absolute;inset:0;overflow:visible}.play-message{color:var(--muted);text-align:center;min-height:29px;margin-top:12px;font-size:13px}.restart{margin:0 auto;display:flex}.result-card{text-align:center;padding:42px 24px}.result-icon{color:#936020;background:#fff1d6;border-radius:22px;place-items:center;width:68px;height:68px;margin:0 auto 12px;display:grid}.result-card p{color:var(--muted);overflow-wrap:anywhere;margin-top:6px}.result-time{color:var(--purple);letter-spacing:-.055em;margin:6px 0 18px;font-size:clamp(43px,8vw,65px);line-height:1.16;display:block}.result-stats{grid-template-columns:1fr 1fr;gap:9px;max-width:430px;margin:0 auto 20px;display:grid}.result-stats div{background:#f7f3fc;border-radius:12px;gap:3px;padding:12px 6px;display:grid}.result-stats span{color:var(--muted);font-size:12px;font-weight:700}.result-stats strong{color:var(--deep-purple);font-size:20px}.result-actions{flex-wrap:wrap;justify-content:center;gap:9px;display:flex}.ranking-view{max-width:770px}.ranking-title{margin-bottom:20px}.ranking-title p{color:var(--muted);margin-top:6px}@media (max-width:1070px){.main-grid{grid-template-columns:minmax(0,1fr) 300px;gap:16px}.illustration{transform-origin:100%;transform:translateY(-50%)scale(.81)}.hero{padding-left:26px}}@media (max-width:820px){.main-wrap{padding:22px 18px 0}.header-inner{min-height:63px;padding:0 18px}.main-grid{grid-template-columns:1fr}.illustration{right:9px;transform:translateY(-50%)scale(.92)}.hero{min-height:277px}.mobile-rank-link{margin:8px auto 0;display:flex!important}.play-card{padding:19px}}@media (max-width:520px){.header-inner{gap:7px;min-height:57px;padding:0 11px}.brand{gap:5px;font-size:18px}.brand-mark{border-radius:9px;width:31px;height:31px}.brand-mark svg{width:20px}.brand-mark-small{border-radius:7px;width:22px;height:22px}.brand-mark-small svg{width:15px}nav{gap:1px;padding:3px}nav button,.share-button{gap:4px;font-size:12px}nav button{padding:7px}nav button svg,.share-button svg{width:13px}.share-button{padding:6px}.main-wrap{padding:14px 11px 0}.main-column{gap:12px}.hero{border-radius:20px;min-height:222px;padding:18px 14px}.hero h1{margin:10px 0;font-size:clamp(33px,8.7vw,47px)}.hero .eyebrow{padding:4px 7px;font-size:10px}.hero .eyebrow svg{width:13px}.hero p{max-width:188px;font-size:13px}.hero-meta{gap:4px;margin-top:12px}.hero-meta span{padding:4px 6px;font-size:10px}.hero-meta svg{width:13px;height:13px}.illustration{right:-5px;transform:translateY(-55%)scale(.54)}.entry-card{border-radius:17px;padding:14px}.entry-head{margin-bottom:12px}.entry-head h2,.rank-header h2{font-size:18px}.entry-head p{font-size:12px}.entry-form input{padding:9px 10px;font-size:16px}.primary-button,.secondary-button{gap:5px;padding:8px 10px;font-size:13px}.rank-header{padding:14px 14px 12px}.rank-body{padding:12px 14px 8px}.rank-footer{padding:10px 14px}.site-footer{margin-top:20px}.site-footer .source-links{gap:6px}.play-card{border-radius:17px;padding:13px}.play-header{gap:6px}.timer{padding:6px;font-size:14px}.timer svg{width:15px}.word-tile{min-height:44px;font-size:15px}}@media (max-width:360px){.illustration{right:-8px;transform:translateY(-55%)scale(.45)}nav button svg{display:none}}
