.keys-dialog { position:fixed; inset:0; margin:0; padding:0; width:100%; height:100%; max-width:none; max-height:none; border:0; overflow:hidden; color:#284459; background:radial-gradient(ellipse at 50% 40%,#f0f3eb99,#a5b6bc55); font-family:"Noto Sans SC","PingFang SC",sans-serif; }
.keys-dialog::backdrop { background:#263e526b; backdrop-filter:blur(18px); }
.keys-dialog[open] { display:grid; place-items:center; }
.keys-close { position:absolute; z-index:5; right:24px; top:24px; width:44px; height:44px; border-radius:50%; border:1px solid #fff9; background:#faf8eedb; color:#3c5664; font:30px/1 sans-serif; cursor:pointer; }
.keys-heading { position:absolute; top:5%; left:6%; pointer-events:none; }
.keys-heading > span { font:10px "DM Mono",monospace; letter-spacing:.18em; }
.keys-hand-title { margin:12px 0 4px; color:#fdfcf3; font:clamp(44px,5vw,78px)/.9 "Nanum Pen Script", "PingFang SC", cursive; letter-spacing:.01em; text-shadow:0 2px 14px #31495838; }
.keys-heading p { margin:9px 0 0 3px; color:#eef4ee; font-size:clamp(14px,1.35vw,19px); letter-spacing:.03em; text-shadow:0 1px 8px #304a5a4d; }
.keys-stage { width:min(720px,94vw); height:min(900px,84dvh); perspective:1100px; pointer-events:none; }
.keys-rig { position:relative; width:100%; height:100%; transform-origin:50% 3%; transform:rotateY(var(--turn,0deg)) rotateZ(var(--sway,0deg)); transition:transform .85s cubic-bezier(.2,.8,.25,1); }
.keys-rig.is-dragging { transition:none; }
.keys-dialog[open] .keys-stage { animation:keys-arrive 1s cubic-bezier(.16,.75,.25,1) both; }
.keys-art { position:absolute; top:0; left:50%; transform:translateX(-50%); height:76%; width:auto; overflow:visible; filter:drop-shadow(3px 6px 2px #34526935) drop-shadow(10px 16px 13px #283e5238); pointer-events:auto; touch-action:none; cursor:grab; }
.keys-art:active { cursor:grabbing; }
.keys-part { transform-box:view-box; transform-origin:var(--pivot); transform:rotate(var(--part-angle,0deg)); transition:transform .75s cubic-bezier(.2,.8,.25,1),filter .2s; cursor:pointer; outline:none; }
.keys-part:hover, .keys-part:focus-visible, .keys-part.is-selected { filter:drop-shadow(0 0 3px #fff3b8); }
.keys-part:focus-visible { filter:drop-shadow(0 0 5px #ffeaaa); }
.keys-tag-anchor { position:absolute; top:var(--tag-top,54%); left:calc(50% + var(--tag-x,0px)); width:clamp(86px,12vw,106px); height:34%; transform:translateX(-50%) rotate(var(--tag-tilt,0deg)); transform-origin:50% 0; pointer-events:none; filter:drop-shadow(2px 3px 0 #677e8a) drop-shadow(5px 10px 8px #20364938); }
.keys-tag-anchor[hidden] { display:none; }
.keys-tag-chain { position:absolute; top:0; left:calc(50% - 4px); width:8px; height:19%; background:repeating-radial-gradient(ellipse at 50% 5px,transparent 0 2px,#fff 2.5px 3px,#758795 3.5px 4.5px,transparent 5px 10px); background-size:8px 12px; filter:drop-shadow(1px 1px 0 #465a68); }
.keys-tag { position:absolute; isolation:isolate; top:15%; width:100%; height:85%; margin:0; padding:30px 10px 22px; border:0; border-radius:12px; background:linear-gradient(125deg,#fff 0%,#a5bbce 12%,#f5fcff 23%,#597082 43%,#eaf4fd 57%,#8299aa 76%,#fff 89%,#577080); color:var(--tag-ink,#334a51); box-shadow:inset 1px 1px 1px #fff,inset -1px -2px 1px #405765; transform-origin:50% 0; }
.keys-tag::before { content:''; position:absolute; z-index:-1; inset:5px; border-radius:inherit; background:linear-gradient(118deg,#ffffffcc 0%,#ffffff55 20%,transparent 33%,#3d58782b 45%,#ffffffa6 66%,transparent 78%,#ffffff85 100%),var(--tag-color); box-shadow:inset 1px 1px 2px #3b546c88,inset -1px -1px 1px #fff,inset 0 0 7px #f6fcff99; }
.keys-tag::after { content:''; position:absolute; z-index:2; inset:7px; background:linear-gradient(116deg,transparent 25%,#fff5 26%,transparent 28%,transparent 62%,#fff4 64%,transparent 71%); border-radius:inherit; pointer-events:none; }
.keys-tag-anchor[data-shape="oval"] .keys-tag { border-radius:50% / 25%; padding-top:34px; }
.keys-tag-anchor[data-shape="diamond"] .keys-tag { clip-path:polygon(50% 0,100% 23%,100% 77%,50% 100%,0 77%,0 23%); border-radius:0; padding:36px 10px 30px; }
.keys-tag-anchor[data-shape="diamond"] .keys-tag::before { clip-path:polygon(50% 0,100% 23%,100% 77%,50% 100%,0 77%,0 23%); }
.keys-tag-hole { position:absolute; top:10px; left:calc(50% - 4px); width:8px; height:8px; border:2px solid #d1d8d8; border-radius:50%; background:#657885; box-shadow:0 1px 0 white,inset 0 1px 2px #172a3e; }
.keys-tag-copy { height:100%; display:flex; justify-content:center; gap:8px; text-shadow:0 1px 0 #ffffffb3; }
.keys-tag h3 { margin:0; writing-mode:vertical-rl; text-orientation:mixed; font-weight:600; font-size:15px; letter-spacing:.16em; }
.keys-tag p { margin:0; display:flex; flex-direction:row-reverse; gap:3px; }
.keys-tag p span { writing-mode:vertical-rl; text-orientation:mixed; font-size:10px; line-height:1.2; letter-spacing:.04em; white-space:nowrap; }
.keys-tag-number { display:none; }
.keys-tag-sign { display:none; }
.keys-tag-anchor.is-dropping .keys-tag { animation:keys-tag-drop .95s both; }
.keys-tag-anchor.is-dropping .keys-tag-chain { animation:keys-chain .48s both; transform-origin:50% 0; }
.keys-footer { position:absolute; bottom:3%; left:0; width:100%; text-align:center; }
.keys-tip { font-size:12px; color:#304c60; }
.keys-footer nav { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.keys-footer button { border:1px solid #ffffff99; border-radius:20px; padding:6px 12px; background:#f4f5ee99; color:#35536a; font-family:inherit; font-size:11px; cursor:pointer; transition:background .2s; }
.keys-tag-anchor.is-retracting { opacity:0; translate:0 -45px; transition:opacity .18s,translate .18s; }
.keys-footer button:hover,.keys-footer button[aria-pressed="true"] { background:#35566d; color:#fffbee; }
@keyframes keys-arrive { from { opacity:0; transform:translateY(-55px) rotate(-6deg); } to { opacity:1; transform:none; } }
@keyframes keys-chain { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes keys-tag-drop { 0% { opacity:0; transform:translateY(-80px) rotate(-8deg); animation-timing-function:ease-in; } 42% { opacity:1; transform:translateY(4px) rotate(7deg); } 65% { transform:translateY(-2px) rotate(-4deg); } 84% { transform:rotate(2deg); } 100% { transform:none; } }
@media(max-width:600px) { .keys-heading { top:22px; left:20px; } .keys-heading > span { font-size:8px; } .keys-heading h2 { font-size:15px; } .keys-stage { height:72dvh; } .keys-tag h3 { font-size:14px; } .keys-tag p span { font-size:10px; } .keys-tag-copy { gap:7px; } .keys-footer button { padding:6px 10px; } }
.keys-tag-anchor { width:var(--tag-width); height:var(--tag-height); }
.keys-tag-chain { width:calc(var(--tag-unit) * 6); left:calc(50% - var(--tag-unit) * 3); height:calc(var(--chain-length) + var(--tag-unit) * 8); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12'%3E%3Cellipse cx='3' cy='5.5' rx='2' ry='4.5' fill='none' stroke='%23536878' stroke-width='1.8'/%3E%3Cellipse cx='2.7' cy='5.2' rx='1.8' ry='4.3' fill='none' stroke='%23eef6fc' stroke-width='.8'/%3E%3Cpath d='M3 9v4' stroke='%23b4c6d2' stroke-width='1.3'/%3E%3C/svg%3E"); background-size:100% calc(var(--tag-unit) * 12); }
.keys-tag { top:var(--chain-length); height:var(--plate-height); border-radius:calc(var(--tag-unit) * 5); padding:calc(var(--tag-unit) * 19) calc(var(--tag-unit) * 6) calc(var(--tag-unit) * 9); }
.keys-tag::before { inset:calc(var(--tag-unit) * 2); }
.keys-tag::after { inset:calc(var(--tag-unit) * 3); opacity:.5; }
.keys-tag-anchor[data-shape="oval"] .keys-tag { padding:calc(var(--tag-unit) * 20) calc(var(--tag-unit) * 4) calc(var(--tag-unit) * 10); }
.keys-tag-anchor[data-shape="diamond"] .keys-tag { padding:calc(var(--tag-unit) * 28) calc(var(--tag-unit) * 4) calc(var(--tag-unit) * 19); }
.keys-tag-hole { width:calc(var(--tag-unit) * 4); height:calc(var(--tag-unit) * 4); left:calc(50% - var(--tag-unit) * 2); top:calc(var(--tag-unit) * 6); border-width:1px; }
.keys-tag-copy { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:calc(var(--tag-unit) * 10); text-align:center; }
.keys-tag h3 { writing-mode:horizontal-tb; font-family:"DM Mono","PingFang SC",sans-serif; font-size:calc(var(--tag-unit) * 8); line-height:1.3; letter-spacing:0; font-weight:500; }
.keys-tag p { display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; gap:calc(var(--tag-unit) * 7); margin:0; width:100%; min-width:0; }
.keys-tag p span { display:block; max-width:100%; white-space:pre-line; overflow-wrap:anywhere; writing-mode:horizontal-tb; font-size:calc(var(--tag-unit) * 8); line-height:1.35; letter-spacing:0; }
.keys-tag-anchor[data-key="certificates"] .keys-tag-copy { gap:calc(var(--tag-unit) * 8); }
.keys-tag-anchor[data-key="certificates"] p { gap:calc(var(--tag-unit) * 6); }
.keys-tag-anchor.is-dropping { animation:keys-weight-sway 3.2s .4s both; }
.keys-tag-anchor.is-dropping .keys-tag { animation:keys-weight-drop .8s both; }
.keys-tag-anchor.is-dropping .keys-tag-chain { animation:keys-chain .42s cubic-bezier(.55,0,1,.5) both; }
@keyframes keys-weight-drop {
  0% { opacity:0; transform:translateY(calc(-1 * var(--chain-length))); animation-timing-function:cubic-bezier(.55,0,1,.5); }
  52% { opacity:1; transform:translateY(calc(var(--tag-unit) * 4)); animation-timing-function:ease-out; }
  75% { opacity:1; transform:translateY(calc(var(--tag-unit) * -2)); animation-timing-function:ease-in-out; }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes keys-weight-sway {
  0% { rotate:-7deg; animation-timing-function:ease-in-out; }
  18% { rotate:5deg; animation-timing-function:ease-in-out; }
  36% { rotate:-3.3deg; animation-timing-function:ease-in-out; }
  54% { rotate:2deg; animation-timing-function:ease-in-out; }
  72% { rotate:-1deg; animation-timing-function:ease-in-out; }
  88% { rotate:.4deg; animation-timing-function:ease-in-out; }
  100% { rotate:0deg; }
}
.keys-tip { max-width:90vw; margin:8px auto; line-height:1.6; }
@media(max-width:600px) { .keys-stage { height:78dvh; } .keys-heading { top:12px; } .keys-hand-title { margin-top:7px; font-size:40px; } .keys-heading p { margin-top:7px; font-size:12px; } .keys-footer { bottom:2%; } .keys-tip { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .keys-dialog[open] .keys-stage,.keys-tag-anchor.is-dropping,.keys-tag-anchor.is-dropping .keys-tag,.keys-tag-anchor.is-dropping .keys-tag-chain { animation:none; } .keys-rig,.keys-part { transition:none; } }